Обзор элементов управления интерфейса

Главные идеи#

Кнопки#

• Командная кнопка должна срабатывать, когда кнопку мыши отпускают над ней, а не когда её нажимают. Это защищает от случайных нажатий.
• Подписывайте её глаголом, который называет действие, — «Сохранить» или «Удалить», а не «ОК». Такая подпись ещё и помогает пользователю вернуться к работе, если его прервали.
• Кнопку «Применить» Головач считает вредной: после её нажатия «ОК» и «Отмена» уже не означают того, что на них написано. Понятнее предварительный просмотр плюс отдельные кнопки «Закрыть» и «Применить».
• Кнопка, которая открывает меню, работает лучше всего, если разделить её на две зоны: основная выполняет самое вероятное действие, а стрелка открывает альтернативы.

Чекбоксы и радиокнопки#

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

Списки и поля ввода#

• Раскрывающийся список экономит место, но требует щелчка уже для того, чтобы увидеть варианты. В вебе никогда не выполняйте переход сразу после выбора значения. Требуйте нажатия кнопки, иначе промах мышью превращается в незапланированный переход.
• Прокручиваемые списки должны показывать не меньше четырёх строк, лучше восемь. Для множественного выбора набор чекбоксов понятнее, чем список с множественным выбором.
• Поле ввода не должно быть шире самого длинного допустимого значения.
• Подписи ставьте над полями на часто используемых экранах, где их легко пропустить взглядом, и слева — на редко используемых, где их обязательно прочитают.
• Для чисел Головач рекомендует крутилку (spinner): пользователю не нужно переносить руку на клавиатуру, а ввести можно только допустимые значения. Ползунок подходит для упорядоченных значений, особенно когда их много.

Меню#

Ставьте значимое слово первым в каждом пункте. Показывайте включённые параметры галочкой, а не сменой текста («Показывать сетку» / «Скрыть сетку»). Многоточие сигнализирует, что дальше откроется диалоговое окно. Группируйте пункты так, как думают пользователи, а не так, как устроен код; Головач рекомендует карточную сортировку (card sorting) минимум с четырьмя-пятью представителями целевой аудитории. Глубокие меню чреваты каскадными ошибками: один неверный выбор наверху делает неверными все последующие. Риск снижается, если показывать популярные пункты следующего уровня. Контекстными меню пользуются в основном опытные пользователи, поэтому делайте их плоскими, а самые частые пункты ставьте ближе всего к указателю.

Окна, вкладки и мастера#

• Модальные окна разрушают контекст и ощущение контроля. Избегайте их — разве что иногда для форм ввода данных.
• В строке заголовка самое важное ставьте первым: название документа, а не программы.
• Строку состояния используют недостаточно. Это правильное место для состояния системы и хода выполнения операций.
• Окно должно сканироваться взглядом как набор блоков и звучать как связное предложение, если прочитать его вслух. Важное — в левом верхнем углу; кнопки закрытия — в правом нижнем, потому что выбор параметров предшествует действию.
• Вкладки прячут содержимое, а скрытому содержимому пользователи не доверяют. Если разделов много, делайте вкладки для основных, а остальные выводите списком. Не дополняйте вкладки искусственно, чтобы уравнять их по объёму.
• Мастера (wizards) оправданы, когда последовательность естественным образом фиксирована или задача редкая и сложная. Разрешайте свободно перемещаться вперёд и назад, показывайте, сколько осталось, сохраняйте размер и положение окна неизменными, показывайте уже введённые данные и формулируйте заголовок каждого шага как указание.

Пиктограммы, цвет и звук#

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