Принципы хорошего интерфейса

Хороший интерфейс не заставляет думать. Он показывает, что можно делать, и подсказывает, что произошло.

«Не заставляйте меня думать». — Стив Круг, название его книги о юзабилити

Существуют базовые принципы, которые отличают понятный интерфейс от мучительного. Их сформулировали Якоб Нильсен и Дон Норман, и за десятилетия они почти не изменились, потому что меняются технологии, а не человеческий мозг.

Четыре опоры

Видимость. Человек должен видеть, что можно сделать. Если кнопка спрятана, её нет. Обратная связь. На каждое действие система отвечает: нажал — кнопка «утопилась», отправил — появился спиннер. Узнаваемость вместо запоминания. Не заставляйте помнить — показывайте варианты. Прощение ошибок. Любое опасное действие можно отменить.

  ОБРАТНАЯ СВЯЗЬ: система всегда отвечает

  [ Сохранить ]  ->  нажатие  ->  спиннер  ->  "Сохранено ✓"
       тык             отклик       процесс       итог

  Без отклика человек жмёт кнопку 5 раз и злится

Аффорданс — намёк на действие

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

Как делают ПЛОХО

Форма отправляется молча: человек нажал «Оплатить», ничего не произошло (на самом деле идёт запрос), он нажимает ещё раз — и оплачивает дважды. Нет видимости, нет обратной связи, нет прощения ошибки.

Как делают ХОРОШО

После нажатия кнопка блокируется и показывает спиннер «Обрабатываем…», затем «Готово». Если что-то пошло не так — понятное сообщение и кнопка «Повторить». Человек всегда понимает, на каком он шаге.

Чек-лист

• Главное действие экрана видно без прокрутки и поиска.
• На каждое действие есть мгновенный отклик.
• Я показываю варианты, а не прошу вспоминать.
• Опасные действия можно отменить или подтвердить.
• Кликабельное выглядит кликабельным (честный аффорданс).

Эвристики Нильсена — это не правила, а зеркала, в которых видны типовые промахи. Кроме «видимости статуса» важны: консистентность и стандарты (одинаковое называть одинаково), предотвращение ошибок (лучше не дать ошибиться, чем потом ругать), узнавание вместо припоминания (показывать варианты, а не заставлять держать их в голове) и помощь в восстановлении — понятная ошибка с подсказкой, как её исправить, а не сухое «Error 400».

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

Классические примеры живут вне экранов. Панель микроволновки с тридцатью кнопками, где «разогреть» спрятано за тремя нажатиями. Или «двери Нормана» — створка с ручкой, которую хочется тянуть, а на ней написано «От себя». Если к предмету нужна инструкция «толкать», виноват не человек, а дизайн — форма должна сама подсказывать, что с ней делать.

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

Итог

Эти четыре опоры — видимость, обратная связь, узнаваемость, прощение — фундамент юзабилити. Они скучные, но именно их нарушение делает интерфейсы невыносимыми.

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