Денис Чмель
2 апреля 2009

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

  • Усложняем:
  • чем меньше места это все будет занимать, тем лучше (не сильно ведь важная колонка);
  • не хочется менять цвет текста/фона строк таблицы, это порой используется для других целей (неважные/нередактируемые ячейки, подсветка измененных, зебра и т. п.)
  • чекбоксы подошли бы, но они обычно уже заняты для групповых операций (перемещение, удаление и т. п.)

Какой способ выбрали бы вы?



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


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


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


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


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

Комментарии

Дмитрий Зимин
2 апреля 2009

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

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

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

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

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

Александр Кай
2 апреля 2009

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

Дмитрий Зимин
2 апреля 2009

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

Алексей Блинов
2 апреля 2009

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


2 апреля 2009

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

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

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

Олег Томенко
3 апреля 2009

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

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

Александр Пономарев
3 апреля 2009

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

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

Влад Мушинский
4 апреля 2009

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

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

Илья Наринский
4 апреля 2009

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

Андрей Филиппович
5 апреля 2009

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

Александр Пономарев
5 апреля 2009

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

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


5 апреля 2009

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

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

Влад Мушинский
5 апреля 2009

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

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

Влад Мушинский
5 апреля 2009

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

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

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

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

Евгений Арутюнов
5 апреля 2009

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

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

Александр Пономарев
5 апреля 2009

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

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

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

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

Александр Пономарев
6 апреля 2009

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

Миша Болдов
6 апреля 2009

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

Сергей Асанов
7 апреля 2009

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

Андрей Ившин
8 февраля 2011

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


18 февраля 2011

Андрей!

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

Женя Бакст
5 мая 2011

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.





Недавно всплыло

Как рассчитывается бюджет проекта? 10 Как верстать модули с лентами? 2 Сколько проектов даётся в работу на одного дизайнера в бюро? 5 1



© 2007—2014

Запрещённые слова
Пишите: artgorbunov@artgorbunov.ru