Восприятие и внимание¶
Внимание, память и точность движений у человека ограничены, а интерфейс расходует именно их. Есть несколько хорошо проверенных закономерностей, которые объясняют, почему одно решение даётся пользователю легче другого.
Рабочая память¶
Рабочая память удерживает ограниченное количество информации. Классическая оценка Миллера «семь плюс-минус два», касалась запоминания последовательностей. Более поздние исследования, например, работы Нельсона Коуэна, оценивают её объём примерно в четыре смысловых блока. Из этого следует не правило «не больше семи пунктов меню», часто ошибочно приписываемое Миллеру, а более общее требование: пользователь не должен запоминать информацию между экранами.
Номер заказа, который нужно скопировать на одной странице и вставить на другой, условия фильтра, исчезающие после перехода, подсказка формата, видимая только до начала ввода - всё это создаёт нагрузку на рабочую память и приводит к ошибкам.
Закон Хика¶
Время выбора увеличивается логарифмически по мере роста числа равновероятных вариантов. Этот закон применим к выбору среди знакомых альтернатив, но не работает для длинных меню, где пользователь ищет неизвестный пункт. В таких случаях важны группировка и понятность названий, а время поиска увеличивается линейно.
Отсюда два практических вывода. Для часто принимаемых решений лучше сократить количество вариантов, предлагая разумное значение по умолчанию и скрывая редкие за «Дополнительно». А для навигации важнее не количество пунктов, а скорость, с которой пользователь может отбросить неподходящие группы.
Закон Фиттса¶
Время перемещения курсора к цели зависит от расстояния до неё и размера. Это объясняет минимальные размеры целей и то, что частые действия происходят ближе к месту, где сосредоточено внимание и курсор. В работе с мышью края и углы экрана выглядят как цели бесконечной глубины, потому что курсор упирается в их границы. Поэтому системные меню традиционно располагаются у края экрана. На сенсорных экранах этого эффекта нет, и решающим становится размер области касания и удобство её достижения большим пальцем.
Минимальные размеры области касания различаются в зависимости от источника. Apple HIG рекомендует не менее 44×44 pt, Material Design - 48×48 dp. WCAG 2.2 требует не менее 24×24 CSS px для критерия 2.5.8 Target Size (Minimum) уровня AA и достаточного расстояния между мелкими целями. Критерий 2.5.5 уровня AAA увеличивает это требование до 44×44 CSS px. Видимый элемент может быть меньше, если его кликабельная область расширена отступами.
Сканирование страницы¶
Пользователи не читают экраны, а сканируют их, выхватывая заголовки, начала строк и выделенные элементы. Исследования движения глаз (в частности, многолетние исследования Nielsen Norman Group) описывают несколько устойчивых паттернов, самый известный из которых - F-образный: внимание сосредоточено на верхних строках и левом крае текстового блока. Этот паттерн возникает не как идеал, а как следствие плохо структурированного текста, поэтому задача дизайнера - не подстраиваться под него, а давать сканированию опору: начинать заголовки и пункты с ключевого слова, выносить важное в начало строки, использовать визуальную иерархию так, чтобы её можно было считать за секунду.
Время отклика¶
Классические исследования Роберта Миллера (1968) и Стюарта Карда с коллегами (1991) остаются полезными ориентирами. Отклик менее 0,1 секунды воспринимается как мгновенный и не требует дополнительного уведомления. Задержка до 1 секунды заметна, но не мешает ходу мысли. После примерно 10 секунд внимание пользователя начинает рассеиваться, и без индикатора прогресса он может усомниться, что процесс продолжается. Подробные рекомендации для каждого интервала времени можно найти в разделе Обратная связь и ожидание.
Аффорданс и сигнификатор¶
Термины часто путают, а разница практическая. Аффорданс - возможность действия, которую объект предоставляет: кнопку можно нажать, ползунок - сдвинуть. Сигнификатор - видимый признак, сообщающий об этой возможности: объём и заливка кнопки, подчёркивание ссылки, «ручка» у края панели. Плоский интерфейс не лишает элементы аффордансов, но часто лишает их сигнификаторов, и тогда пользователь не знает, что текст в таблице кликабелен или что карточку можно перетащить. Убедитесь, что элемент не только функционирует, но и сразу заметен до начала взаимодействия.