Pull to refresh

Comments 103

На кнопке должно быть то, что она делает.
То есть если она должна включать — должно быть написано/нарисовано включение.
А после включения (когда состояние уже = включено) на ней должно быть написано выключить/выключение. Правильно я вас понял?
Угу
Конечно каждый случай уникальный и нужно смотреть по-своему, но лично меня путает если на кнопке нарисовано, например, «Выкл», я ее нажимаю и система включается) Ну, думаю, вы меня поняли.
Если дизайн позволяет можно какой-нить тумблер нарисовать, чтоли… Чтобы на кнопке было одновременно два состояния (или две кнопки).
Я обновил пост. Теперь там есть примера QIP'a.
Квип не показатель.
Имхо, в этом случае лучше было написать текст + кнопку. Например:
Антиспспам выключен [Включить]
Тыкаем, и эта строка меняется на
Антиспам включен [Выключить]
Можно перед текстом соответствующую иконку пририсовать…

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

Включить антиспам (подразумевается и всеми понимается то он выключен в настоящий момент)
Выключить антиспам (подразумевается и всеми понимается то он включен в настоящий момент)
UFO landed and left these words here
Надо было просто написать «Антиспам» на кнопке и все. И два состояние у нее — вжатое и отжатое. И вообще бы не возникло вопросов.
а если у меня плохре зрение и я не могу разобрать вжата она или нет? (я серьезно, если что :) )
Когда выключен, зачеркнуть надпись.
UFO landed and left these words here
Так постепенно приходим к чекбоксу ;)
проще и очевиднее всего просто сделать метку «антиспам» и рядом чекбокс (лампочку того или иного вида)
зачем писать про действие, когда его полностью может отражать иконка?
Меня такой пример тоже смущает.

С точки зрения логики интерфейса как бы всё ок: показано, что произойдёт при нажатии на кнопку, показано текущее состояние системы.

Но у меня возникает когнитивный диссонанс, когда вижу зелёную галку и рядом уточнение «выключен».
хм, у меня в любом состояние подписано защита(включение анти-спама/анти-флада)…
Сколько пользуюсь qip-ом столько и волнует меня этот вопрос, красное включено или выключено, а подпись у него одна на оба состояния… Идеологически правильно знак стопа на значке сообщения, но почему то этот значок кажется как выключена система антиспама. Думаю главное это подпись кнопки, если это просто пиктограмма то обязательно при наведении должно всплывать подсказка к какому результату приведет нажатие этой кнопки…
Собственно, вариант, когда на кнопке описывается то действие, которое произойдет в результате нажатия, мне кажется наиболее правильным.

Некоторые производители программ еще делают две кнопки, которые описывают включение и выключение той или иной возможности. При этом одна из них всегда выключена, а другая всегда включена. При клике по активной кнопке она выключается и включается другая. Зачем они так делают — я не знаю.
Имхо, надпись описывающую то, что произойдет если её нажать.
Личное мнение: пиктограмма на кнопке должна быть всегда одна, отображающая логику как включения, так и выключения. Если не получается одной пиктограммой изобразить оба процесса, скорее всего вы пытаетесь навесить на одну кнопку слишком разные логические действия.

Оформление кнопки может отличаться в зависимости от её состояния. Примеры разного поведения IRL: обычный квартирный выключатель (меняется внешний вид), кнопка вызова лифта (световой индикатор).
ИМХО: Пиктограмма должна быть индикатором состояния, а надпись — действием.
если кнопка содержит оба элемента, то такой подход только запутает. картинка и надпись должны соответствовать друг другу. и я бы сделал в этом случае 2 разные картинки для действий включения и выключения.

если без текста, то картинка должна вдавливаться — тогда она будет обозначать текущее состояние, и одновременно пользователь будет знать, что её можно вдавить, т.е. она одновременно будет совершать и дейстие. в таком случае картинка на ней должна всегда соответсвовать состоянию включённости, а реальным индикатором будет состояние вдавленности.
По моему вдавленная кнопка очень странный и неинтуитивный элемент.
Думал что само собой разумеется но добавлю, индикатор не должен находиться на кнопке.
Полностью согласен, а то на предлагаемой кнопке показывается противополножное состояние, что в итоге сбивает с толку.
Возможно только что пиктограмму надо показывать отдельно от надписи с действием.
1. Отображение физического положения кнопки (вдавлена — значит действие активировано).
2. Цветовое обозначение (зеленый кружок — включено, красный — выключено).
3. Чекбокс (чтобы включить действие, надо отметить его).

В общем, лучше всего менять только отображение пиктограммы, текст рядом с ней меняться не должен (т.е. метка обозначает действие при включении). Если рассматривать вариант QIPа — уберите последнее слово (включен/выключен) и все станет более понятно.
Если убрать последнее слово, то получится наоборот. А именно в первом случае антиспам с красным кружком — выключен, антиспам с зеленым кружком — включен.
Я имел в виду не текущее состояние, которое приведено в посте, а в целом механизм — метка «антиспам» описывает функцию, которой мы будем управлять, а картинка — текущее ее состояние. Т.е., щелкая по иконке с зеленой галочкой, мы увидим, как она заменится на красный «кирпич» и будем знать, что антиспам отключен.
В том то и дело, что красный кирпич означает — антиспам включен.
Перечитайте пожалуйста мой комментарий еще раз. Между моими комментами целых 5 минут, так что не надо торопиться ;)

Я не говорю про то, как сделано СЕЙЧАС.
Красный кирпич рядом с надписью «антиспам» (! внимание! — без слова ВКЛЮЧЕН) наводит на единственную мысль — антиспам сейчас выключен.
… кнопки то бывают разные (в реале) — с фиксацией, без, на несколько позиций (переключатель).
на примере квипа — иконка=текущее состояние, надпись = включить/выключить (причем именно так, а не «вкл.»)
Когда-то давно «посчастливилось» сидеть на квипе, так там я пол года не мог понять, почему долбятся спамеры, хотя включен антиспам. Только потом дошло, что зеленая пиктограмма снизу была очень обманчива.
Именно эта пиктограмма навела меня на мысль спросить у хабра–людей.
Да, просто у квипа нудачно выбраны иконки на кнопке, как на картинке в посте.
В случае с квипом достаточно со второй иконки убрать зелёную галку.
Тогда получается:
Кирпич — спам не пройдёт.
Просто значок — проходят все сообщения.
И идея с надписью «Антиспам» и всё — понравилась…
А еще лучше кирпич заменить на щит — и тогда вообще всё понятно.
Включенная кнопка должна визуально восприниматься как включенная, исходя из принципа аналогии с реальным миром.

То есть если кнопка визуально вдавливается при включении — на ней следует пиктограммой изображать действие, к которому приведет вдавлвание кнопки.

Если пиктограмма меняет картинку — то в каждый момент времени на кнопке должно быть текущее состояние.

Если пиктограмма меняет цвет — то в отключенном состоянии цвета должны быть серыми.
Если кнопка с текстом — то там можно разместить текст
«включить антиспам» — если он выключен
«выключить антиспам» — если он включен.

Если кнопка с картинкой то, как Выше заметили, она должна быть «вдавлена», если антиспам включен «обычна», если он выключен.
Если так посмотреть, то на некоторых примерах QIP можно понять, как не надо делать. :)
Кнопка-индикатор должна вдавливаться, и сохранять вдавленное состояние.

Надпись рядом или кнопке любая, которую сочтете логичной. Самый минимальный вариант надписи для кнопки индикатора «Влючить [ваш текст]». И всё.
Кнопка должна быть одна! :) Включено — кнопка подсвечивается, выключено — не подсвечивается. А надписи только путают!
Тут в принципе ошибка: иконка сообщения и знаки запрешения\всё хорошо. Не сообщения же мы включаем\отключаем, а спам-защиту. Ввиду этого и нужно придумать иконку «защита от спама» и ей уже навешывать дополнения вроде включить и отключить.
А давайте выложим примеры с картинками. А то на словах все пытаются. Тут картинки будут намного понятнее.

Лучше галочки(checkbox) ничего не найти. Её наверно придумали именно для этих целей.
UFO landed and left these words here
Старый добрый чекбокс со словом антиспам куда юзобильнее всех приведенных примеров.

Вот вы мне скажите, зачем рисовать кирпичи, кружки для дизайна подобной кнопки т.д., если даже аудитория хабра не может однозначно всегда определить, что произойдет по щелчку: вкл или выкл.
С идеей о чекбоксе полностью согласен. Но, как все мы знаем, бывают всё же исключения.
всегда меня это раздражало) И в квипе, и еще много где. В компьютерных играх частенько неудачные примеры. Не понимаешь включено или выключено упорно.

Здравым решением по-моему могла бы быть всплывающая подсказка, в которой написано ТЕКУЩЕЕ состояние, а на самой кнопке нарисовано действие, которое произойдет при нажатие.
1) Показываем состояние:

(+) Антиспам включен
(-) Антиспам выключен

2) Показываем доступное действие

(-) Выключить антиспам
(+) Включить антиспам
3) Если пользователи непонятливые, а места много то можно так:

(+) Антиспам включен [выключить]
(-) Антиспам выключен [включить]

4) Для указания состояния также можно использовать выпадающие меню, checkbox и т.д.
Есть функция — есть соответствующая кнопка, и у этой кнопки есть 2 состояния — углубленное (вкл), и обычное (выкл), а иконка одна. Это же классика.
Кнопка должна изобращать действие (включить или выключить).
Отображение состояния (антиспам включен) применимо для нажатия и последующего выбора действий из выпадающего списка.

Пример из квипа ужасен еще и тем, что слову «включен» соответствует красная пиктограмма, которая всегда несет отрицательный смысл.
Если кнопка boolean-like, то есть у нее или true или false, то должна показывать текущее состояние. Если просто кнопка (например «Взорвать планету»), то должно быть нарисоване сие действие схематично :)

Из-за этого дебилизма в квипе я 3 года наивно думал что антиспам у меня включен, но работает он хреново )))
Может именно поэтому меня так и привлекают слайдеры-выключатели в настройках того же iPhone — сразу видно текущее состояние и ничего лишнего не надо.
Помоему в приведенном примере проблема не толька в картинках, а еще и в подписи «антиспам включен/антиспам выключен», мне кажется должны быть глаголы «Включить антиспам / Выключить антиспам», которые будут однозначно говорить о том действии, которое будет произведено.
Подписи исключительно мои, что бы вы могли понять какая пиктограмма, какому состоянию соответствует.
Очень хороший вопрос. И молодец что автор, что его поднял.
С моей точки зрения, самый лучший ответ на ваш вопрос таков: на многопозиционной (вкл./выкл./[неакт.]) кнопке должно быть отображено свойство, а не действие. Например, в случае КИП-а, пиктограмма вообще не нужна (она не читается однозначно), а должна быть просто надпись «Антиспам».
Разумеется, состояния кнопки (включено, выключено, неактивно) должны очень чётко и однозначно визуально читаться.
Вот что бывает когда дизайнеры извращаются с чекбоксом!


На примере четко видно, что чекбокс то, что нужно и разработчики Квипа не ошиблись. Только не стоило так его уродовать, что пользователи не могут узнать этот чекбокс.
Смущение происходит от нескольких вещей: либо человек не сразу понимает состояние и свое возможное действие, либо человека сбивает название состояния (типа «анитиспам», а вот «защита от спама» было бы понятнее).
На мой взгляд можно отображать:
1) иконку состояния с описанием следующего действия
2) иконку и описание состояния, а при наведении выводить описание возможного действия
3) описание состояния и стандартизированный переключатель (как например у айфонов)

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

Не самый удачный пример, но без сомнений левая кнока выключает, правая включает, разве нет?
Если на кнопку вешать картинку с изображением того происходит сейчас, то (при отсутствии подписи) у пользователя это вероятно всего вызовет приступ медитации (с целью понять что же значит кнопка) а в дальнейшем удаление горе-программы
нет.
Вспомни тройник с кнопкой — если кнопка горит, значит при нажатии ты ее выключишь :)
У меня в сетевом фильтре кнопка вкл/выкл горит красным когда влючена и не горит и выглядит просто серой когда всё выключено и красный ассоциируется именно с «убить/выключить», а не «включено» и это вроде норма
а разве изначально (|) не означало 0-выключен, 1 включен?
Прикольно в Outpost Firewall в старой версии режим «запрещать по максимуму» был с красной иконкой, а в новой уже с зеленой. Потому как это нормальный режим — который должен быть поумолчанию. :)

А что до надписей — сам путаюсь. Вообщем это попытка совместить несовместимое — статус + действие в одном интерфейсе.
Как вариант (не видел нигде) поумолчанию показывать статус «Защита включена», а по подведению мышки менять на «Выключить защиту» — действие.

Если же не извращаться так — то всетаки лучше там отображается именно статус. В том же qip кнопка выбора твоего статуса высвечивает «В сети», а не варианты кем ты станешь после ее нажатия :)
Одно дело — кнопка с действием, другое — показатель статуса. Если их разделять, то проблем не будет
Тут другое дело. В квипе одна кнопка выполняет только одно действие, и никак не отображает статус.


Лучший вариант — сразу два состояния показать и одно из них выбрано.
Но тут уже проблемы занимаемых площадей появляются=) попробуйте в то же пространство уместить в 2 раза больше состояний
Кнопка должна отображать что она сделает. И при нажатии не менять изображание и сделать эффект нажатой кнопки.
по моему мнению здесь есть два варианта:
1 вариант:
Кнопок две: одна включает что-то, другая выключает. Естественно на каждой них должно быть написано/нарисовано соответствующие действие, и естественно, что кнопка, активная в данный момент (нажата) — должна быть утоплена.
2 вариант:
кнопка одна — включает и выключает что-то. В этом случае копка должна сама сигнализировать о своем состоянии — включено или выключено.
Хороший пример такого использования кнопок — офисные программы, например кнопка «по центру» в ворде.
Такое использование во-первых уже привычно, а во-вторых — ребята, не надо придумывать ничего нового, уже многие веши были придуманы до нас.
предлагаю так: | спам | — выключен антиспам
| спам | — включен антиспам
простите тег strike почемуто не сработал :(, там где выключен спам, на кнопке должно рисовать зачеркнутое слово спам.
вот мне ничерта не понятна эта кнопка =( я понимаю что действие тут описано, но смена уровня иконки смущает.
В меню эта кнопка подписана, то есть:

Иконка показывает текущее состояние и, когда включена, то вдавленная.
Я думаю, что сама реализация довольно плохая, учитывая, что в прошлых версиях было не так ( иконка показывала, то что будет после действия).После перехода на новую версию было очень не удобно, пока не привык.
Ну еще бы, если использовать статусы в таком меню, то да… ибо объем текста привалирует и иконка становится вторичной.
Хоть она и вторична, но иногда играет важную роль.Например, если человек «на автомате» ищет это пункт меню, то он будет первым делом будет смотреть на иконку, а не читать подпись.А иконку он будет искать по цвету.Я после смены версии программы очень долго задумывался над тем, как это неудобно сделано для меня.
UFO landed and left these words here
ИМХО иконка не должна меняться вообще, если это двух-позиционая кнопка. Более того не должно быть намека на состояние, т.е. никаких галочек/крестиков/минусиков/вкл-выкл и т.д. и т.п.
Должна отображаться иконка функционала (Допустим для антиспама это буква А). В случае отклюенного антиспама кнопка должна быть unpress, а в случае с включенным состоянием кнопка должна быть press.
Если же используются кнопки-статусы, нажати не которые после релиза возвращает кнопку в отжатое состояние и меняет иконку, то тут имеет смысл добавлять всего один штрих на картинку, а точнее черту.
Яркий того пример это иконка включенного/выключено шифрования сообщений в IM клиенте. Шифрование влючено — на иконке ключик, выключено — на иконке перечеркнутый ключик. Вместо перечеркивания можно использовать зеленый и красные цвета соответсвенно.
Главное запомнить, если кнопка является кнопкой-статусом, то на ней должно отображаться не действие, а текущее состояние, а пояснение сделано в виде хинта, в котором опять же будет указано текущее состояние.
Для особо одаренных можно еще в статусе написать сообщение (Текущее состояние: <какой-то функционал> включен/отключен. Для отключения/включения <какой-то функционал> нажмите кнопку)
Все надписи должы быть однозначны. Любой дизайнер интерфейсов скажет тоже самое (я могу ошибаться). Не зря ведь в привалирующем объеме продуктов используются двухпозиционные кнопки с неизменяющимися иконками. Посмотрите на панель работы с текстом в Ворде. ЖКЧ — ничего лишнего, понимается моментально.
Долго искал в комментах именно такую идею, думал никто не предложит, ибо по ходу она самая логичная. По одному взгяду на залипающую кнопку сразу всё понятно: статус функционала, который она реализует, соответственно нужно ли его изменить или оставить всё как есть, принятие решения и его воплощение… Чё-то я как то слишком сложно описал, происходит всё конечно быстро (если не сказать мгновенно)… Ну кароче, такой кнопарь использует только подсознание, в то время как кнопки, на которых ещё куча всякой ереси нарисовано, задействуют ещё и мыслительный процесс, а этот ресурс лучше использовать на что-то более полезно :)
Если кнопка предполагает действие (как в примере выключить компьютер), то она должна отображать это действие.

Если же кнопка предполагает смену состояния то она должна отображать текущее состояние.
Надпись не должна путать, если это действие то так и писать — выключить компьютер
Помоему вопрос стоял о двухрежимных кнопках =)
/me представил кнопку вкл/выкл компьютер в интерфейсе =) интересна реализация подобного =)
Выключатель света в туалете что отображает — наличие света или возможное действие?
Выключатель вещ двухпозиционная, обозначающая замкунть цепь и разомкнуть. Это со школьной поры на подсознательном уровне откладывается, поэтому не думаешь об этом.
Тут принцип другой Свет есть, значит надо изменить положение, и не важно в каком он сейчас находится.
Вот для таких целей, кажется, и придумали хинты к кнопкам… На них уже можно подробным текстом писать, что делает кнопка. При первом запуске побегать по этим хинтам, где спорные места, а потом — отключить.
Если бы еще разрабы заботились о понятности хинта пользователю… =(
В своей CMS для включения/выключения отображения страниц на сайте я использовал только одну иконку и назвал ее Вкл./Выкл. А после выключения просто отображал само название страницы со светлокрасным фоном и подписью ОТКЛ.

И всё это я сделал именно задумавшись над данной проблемой. В QIPе меня это тоже бесит.
UFO landed and left these words here
Когда-то саппорту AIMP'а писал по такому же поводу. Сейчас у них кнопка светиться уже, а тогда что включенная, что нет, все равно была серая с on в одном состоянии и off в другом. Если бы не на слух, то вообще не понятно его текущее состояние и собственно, что произойдет по нажатию. Да и сейчас не совсем однозначно.
Это касательно эквалайзера чтоли? так это проблема скинов помоему. =(
Да именно скина, раз они сменные, но скина стандартного, увы.
UFO landed and left these words here
UFO landed and left these words here
А еще можно сделать выпуклую кнопку OFF, а при нажатии вогнуть ее и написать ON, а также изменить ее цвет с серого на черный и поставить левее ON зеленый пиксельный огонек. Само же значение (то, что надо включать/выключать) прописать правее кнопки.

Как вам такое решение?
Сорри, если такое уже писали (влом читать все комменты).

Есть два варианта:
1. Кнопка отображает текущий статус (включено/выключено).
2. Кнопка отображает действие, которое произойдет, если её нажать (включить/выключить).

В обоих случаях иконка должна соответствовать надписи (чего не скажешь по QIP). И главное придерживаться единого стиля во всей программе.
Меняться должен или текст или иконки… и для этого давно придумали универсальный чекбокс.
А qip ужасный пример юзабилити.
Sign up to leave a comment.

Articles