Павел Вакуненко
4 июля 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


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

Но придуманное изначально Эплом правило очень простое и основано на здравом смысле. Нужно честно прочитать название пункта меню. Если при нажатии на слово мгновенно произойдёт или откроется ровно то, что оно означает, то многоточие не нужно. Если же для достижения того, что написано, потребуется активное участие человека (как правило, дополнительный ввод), то многоточие ставится.

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

  • В простых случаях всё понятно:
  • Открыть…
  • Сохранить
  • Сохранить как…

Правило объясняет, почему кнопкам «Свойства» и «Опции» многоточия не нужны — они сразу показывают свойства и опции.

Но есть нюансы. Например, если на кнопке написано «Настройка», то многоточие не нужно, потому что результатом нажатия будет появление окна «Настройка», а если по-человечески — начало процесса настройки. А если написано «Настроить…», то многоточие обычно нужно, потому что при нажатии на кнопку конечный результат сразу не произойдёт. Здесь можно представить себе пианино с такой волшебной кнопкой. Если при нажатии на кнопку пианино сразу становится настроенным, многоточие не нужно. А если при нажатии у пианино просто откроется крышка, приглашая нас залезть внутрь с ключом и камертоном, то многоточие в названии необходимо.

Важная особенность многоточия — оно даёт понять человеку, что он сможет отменить действие. Этим можно иногда пользоваться, если нужно, чтобы человек не боялся нажимать на кнопку, даже если это противоречит общему правилу.

Теперь вернёмся к вашему примеру. Сначала исправим синтаксические ошибки.

Выпадающий список — это элемент выбора. В языке ХТМЛ он так и называется — select. Своим видом он уже подсказывает пользователю, что с его помощью нужно что-то выбрать, поэтому слово «выбрать» — лишнее. А название поля пишется снаружи — и оно у вас уже есть.


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


Спросим себя, появится ли новый контрагент сразу при выборе этого пункта? Я предполагаю, что ответ «нет» — сначала потребуется ввести его название. Тогда нужно поставить многоточие, но если у вас другой сценарий, примите решение по тому же правилу.

Ещё примеры

Хотя мы уже убрали одно слово «контрагент», оно по-прежнему встречается два раза. Применим УВЛ:


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


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


P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Михаил Озорнин
4 июля 2016

Иногда на это влияет редполитика интерфейсов компании.

Например, Яндекс отказался от использования многоточий в своих интерфейсах. Роман Искандаров кратко рассказывает почему в лекции Школы дизайна Яндекса: https://youtu.be/trf-C-MI5x8?t=51m25s (с 51:25 если вдруг ссылка на видео не откроется с нужного места).

Александр Строганов
4 июля 2016

И поскольку у нас нет длинного «Другой контрагент…», ширину выпадающего списка можно уменьшить до ширины самого селекта.

Илья Муравьёв
4 июля 2016

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


11 июля 2016

Илья!

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

Андрей Щербатых
5 июля 2016

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

По-моему, лучший вариант — подставить последнее использованное значение. Если его не было — то подставить или наиболее очевидное (например, для выбора языка — русский), или первое по алфавиту.

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


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

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

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

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





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

4 Кто ты? 1 4 4