Никогда не мог найти идеального способа показать, «включено» ли что‑то

Вы затронули мою любимую проблему настенного выключателя, у которого индикатор показыват то ли состояние, то ли команду:

Переключатель на Айфоне — интерфейсный позор. Если его «починить», он бесполезно разрастется:

Подобный переключатель хорош, когда нужно действительно показать два состояния:

Проблема неоднозначности существует и во всех софтверных плеерах: по одной иконке невозможно понять, нажата ли уже «плей» или на нее еще нужно нажать. Начиная с новой Веборамы, мы используем только недвусмысленные плееры:

Денис, в вашем случае, как и на Айфоне, нужно было использовать именно чекбоксы. Лучше найдите другой способ отмечать объекты для операций.

Комментарии

Дмитрий Зимин

Ой, здорово‑здорово! Я, глянув на картинку, первым делом подумал, что кто‑то взял мой прототип, залез ко мне в голову, достал оттуда ровно те же самые вопросы и задал их в Советы — уж настолько все похоже. Даже идея визуализировать лампочками http://juniorman.ya.ru/…&item_no=1805&with_parent=1#reply‑juniorman‑1814 (http://juniorman.ya.ru/…=1#reply‑juniorman‑1814) и рассуждения по поводу «веборамовских» решений.

Я в своем варианте (а все очень похоже, только у меня не телефоны, а объявления) немного опросил потенциальных пользователей. По всему получилось, что вариант «лампочек» и небольшая поддержка цветом приводили людей к однозначному пониманию.

Вариант с чекбоксами лично мне не нравится по двум причинам:

в списке из, скажем, 50 элементов нужно быстро выхватить взглядом позиции включенные / выключенные. С этим хорошо справляется цветовая индикация.
Чекбоксы — не командные кнопки. Это ведь множественный селектор. И нет никакой привычки ожидать после нажатия выполнения действия. А в указанном случае, как я предполагаю, переключатель играет роль именно запуска команды. И очень странно предлагать заменить флажки с их родной роли на чужеродную!

Хотя мне очень нравится вариант Артема «с ножницами» и решение на новой Вебораме (залипание клавиши), но, Денис, мой совет таков: подготовьте несколько вариантов и опросите 10‑15 человек. Это будет лучше и практичнее, чем гадать и неделю искать вариант решения.

Мой вариант ниже:

Дмитрий Зимин

Как‑то попутно в голову пришел вариант для iPhone.

Александр Кай

Артем, в плеере Веборамы неочевидна возможность «отжатия» кнопки.

Алексей Блинов

Александр, «отжатие» неочевидно только если вы сами кнопку не нажимали. А если сами нажали «Плей», то вполне понятно, что можно отжать.

Николай Товеровский

Мне тоже интересна эта тема.

Я думаю, что для плееров нужно делать две кнопки «Пауза» и «Плей». Причем и та и другая должны западать.

Именно так мы и сделали в нашем плеере для КСИНО (http://www.ksoftware.ru/wiki/ksino).

Олег Томенко

Я за чекбоксы и выделение шрифта.

Пометка для операций — ctrl+click, например.

Александр Пономарев

Дмитрий, ваше решение с лампочкам считаю самым удачным и правильным. Конечно, дело не в лампочках. Вместо лампочек возможны и другие пиктограммы. Оно хорошо тем, что задача решается «локально», а не переносится, уже в виде дизайнерской энтропии, на следующий уровень иерархии (множественный выбор чекбоксами).

Не соглашусь с вами только в одном, что чекбоксы предназначены исключительно для множественного выбора. Если что‑либо предназначено для выполнения задач большого объема, то это не значит, что с помощью этого нельзя справиться с задачей меньшего объема. Да, конечно, в таком случае это возможно будет выглядеть как «стрельба из пушки по воробьям». Но воробья можно убить ядром, а «слона дробиной» — нельзя (хотя, можно смертельно ранить)). Вопрос уместности чекбоксов очень ситуативен, важно только чтобы сам чекбокс не использовался не в своем качестве. Не использовался вместо радиокнопки, например. Вспомните билеты по ПДД — если вы себя преднамеренно ограничиваете в правах (перестраховываетесь), то вы не сдаете экзамен.

Влад Мушинский

К слову, уже не стану рисовать, но в случае списка из нескольких элементов с разными состояниями хорошо работают группировки. К примеру, если яблоко есть, груша есть, ноутбук есть, а телефона и ящерицы нету — телефон и ящерицу показываем справа или снизу. Если достаем из кармана телефон, аяксом переносим его в категорию предметов, которые есть: влево или вверх. В других случаях вкладки, что особенно полезно если состояний много: все товары в заказе, дальше вкладка с необработанными, принятыми, отправленными курьером, полученными, сорвавшимися.

Другие случаи на картинке.

Илья Наринский

Я вот так делал:

Андрей Филиппович

А как вам такой вариант?

Александр Пономарев

Олег, извините, уже столько было сказано, про то как ограничен круг людей, из числа пользователей, осознающих возможность контрол‑клика без ежедневной тренировки…

Оставаясь на стороне Дмитрия, как борца с хаосом, отмечу, что Влад Мушинский отчасти прав в своей реплике про лампочки. Дело в том, что сама лампочка (или любая другая пиктограмма) никак не сообщает пользователю о возможности переключения, а загромождать список элементами форм иной категории, относящихся к более элементарным операциям, не хочется. Но выход есть, поскольку можно дать понять о возможности переключения наличием кнопки, которая появляется при условии нахождения курсора мышки над соответствующей позицией списка. Разумеется, включенное состояние должно выглядеть нажатым (утопленным, впуклым)). Поскольку мне лень было рисовать нажатую кнопку, то для примера изобразил выключенную.

Илья Бирман

Все логические рассужденя относительно айфоновских переключателей вроде бы приводят к тому, что они неправильные. Практика же показывает, что не бывает случая, когда бы ты не понял, включена у тебя какая‑то штука или выключена; включишь ты её сейчас или выключишь.

Переключатель на Айфоне — синий, когда включен, и серый, когда выключен. При таком цветовом отличии совершенно не важно, что там написано и нарисовано внутри :‑)

Влад Мушинский

Илья, с моей точки зрения, кодирование должно быть минимальным. Вы прибегнули к кодированию (1) средствами html (подчеркивание для неактивного режима), (2) к цветам и к форме (3). Это слишком избыточно, громоздко: дизайнеру нужно ощущать непосредственно, как бедный пользователь должен осознать каждый из предложенных вами способов кодирования, чтобы разобраться в одном единственном контроле, о чем речь. Это как повторить одно и то же трижды: уместно при обучении, но не в интерфейсах.

Александр, во‑первых, чтобы зажечь лампочку, на неё никогда в жизни не нужно нажать — лампочка это не кнопка. В образе не хватает достоверности.
Во‑вторых, не понимаю, почему если что‑то есть — то лампочка (не индикатор на панели, а именно лампочка) горит. У меня есть телефон, поэтому горит лампочка. Мне очень трудно в таком «поэтому» увидеть логику.
Так что не разделяю вашего энтузиазма по поводу этого решения, которого нигде не встречал (узнаваемости ему тоже, как следствие, не хватает).

Влад Мушинский

«Никогда не мог найти идеального способа показать „включено“ ли что‑то или „выключено“ с возможностью переключения».

К слову, любопытна в заданном вопросе сама ситуация, когда появилось некое понятие «включено» рядом с чекбоксами. Как пользователь, я смирюсь с любым контролом, но мне пока из приложенной к вопросу картинки совсем неясно, что значит это «включено» и как оно соотносится с чекбоксом, который вообще‑то значит то же самое. Тогда выходит, что для каждого товара мы предлагаем дважды сказать, включен или выключен он относительно общего списка.

Надеюсь, суть моего недоумевания ясна? В чем разница по логике этого данного интерфейса между чекбоксом слева и включенностью справа?

Вполне возможно, что счастливый пользователь системы об этом осведомлен не более моего.

Евгений Арутюнов

Налицо проблема: в то время как клик по одному элементу является указанием на «существительное» (формирует выборку, с которой еще предстоит что‑то сделать), клик по соседнему уже является «глагольным» — сразу приводит к действию. По виду чекбокса (не говоря уже о нововведенных элементах интерфейса) невозможно точно определить, как он сработает. Значит нужно постараться хотя бы в рамках одного интерфейса привести все к одной модели.

Нельзя ли в каждом конкретном случае обойтись вообще без создания выборки? А если нельзя — обязательно ли индикатор состояния должен быть мгновенно работающим переключателем? Ведь не факт, он перегружается функционально, из‑за чего, собственно, и все эти сложности.

Александр Пономарев

Влад, обратите внимание, я уже дважды написал, что вместо лампочек могут быть другие пиктограммы. Так что говорю третий раз: «На лампочках не настаиваю».

Мои соображения относились только к иерархичности «контролов», как вы их называете. Если вы решаете локальную проблему за счет нарушения иерархии, вы неизбежно оказываетесь в ловушке. Лучше в малом согрешить, чем в большом. Правда вот англичане говорят, что «из двух зол не выбирают», но я им не верю :)

Доказательства моих слов на виду. Обратите внимание, что ко нтрол включения стоит ближе к названию модели телефона, чем чекбоксы для «групповухи». Это значит, даже на уровне интуиции Денис правильно оценил иерархию контролов. Ситуация такова: есть локальная необходимость выбора и есть глобальная необходимость выбора в пределах одной страницы. Мой вопрос, какой из двух необходимостей вы отдадите привелегию на использование более понятного контрола?

Чекбоксы понятны всем — они не нуждаются в догадках. Им преимущественное право для решения глобальной проблемы групповых операций. Даже поставить в каждой строке по два чекбокса (!) считаю меньшим недоразумением, чем включать и выключать чекбоксом, а для группового выбора искать неочевидные для пользователя решения.

Александр Пономарев

— Айфон, Айхэвфаунд!

Миша Болдов

Все айфоноподобные переключалки не могут жить на экране, т. к. мы не водим по нему пальцем. К стандартному выключателю в ОС все давно уже привыкли — выбирайте чекбокс.

Сергей Асанов

Мне кажется, удобно и понятно сделаны подобные переключатели на сайте lookatme.ru

Андрей Ившин

В случае плеера на Ютубе и других видеохостингов очевидно, что кнопка Play/pause является командой, т. к. пользователь находится в контексте проигрываемого в данный момент ролика. Т. е. мы видим кнопку «пауза» только когда проигрывается ролик. Кнопку «плей» — когда ролик на паузе, не проигрывается.

Артём Горбунов

Андрей!

Часто на паузу ставят, чтобы ролик прогрузился дальше. В такой ситуации даже в режиме «плей» ролик не обязательно будет играть. Возникает путаница.

Женя Бакст

Я у себя в кабинете раньше часто путал, какой выключатель тут включён, какой выключен, какой вообще выключатель света, а не подъёмник внешних жалюзей или ещё какой‑нибудь неведомый выключатель.

Потом при помощи маркера решил для себя эту проблему раз и навсегда.

Комментарии

Рекомендуем другие советы

Свежак

Текст

Дизайн

Вёрстка

Визуализация

Текст

Показать состояние в интерфейсе

Бирман порет формы