Дизайн для грязи, солнца и перчаток: чему интерфейсы могут научиться у внедорожной техники

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

Из-за этого интерфейс, который хорошо выглядит в макете, не обязательно оказывается удобным в жизни. Чтобы заметить такие проблемы до релиза, полезно смотреть не только на сайты и приложения, но и на физические продукты. Особенно — на те, которые изначально рассчитаны на сложные условия эксплуатации.

Почему дизайнеру полезно изучать внедорожную технику

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

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

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

Урок 1. Важное действие должно быть легко выполнить

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

В мобильном интерфейсе похожая проблема возникает с маленькими кнопками и иконками. На макете легко нажать курсором на крестик размером с букву. На смартфоне пользователю приходится попадать в него пальцем — иногда на ходу и одной рукой.

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

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

Урок 2. Контраст нужен не для красоты

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

Особенно страдают решения, построенные на едва заметных различиях: светло-серый текст на белом фоне, тонкие разделители, слабоконтрастные подписи. Пока дизайнер рассматривает их на хорошем мониторе, проблема может оставаться незаметной.

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

Есть простой способ проверить макет: открыть его на реальном смартфоне и выйти на улицу. Некоторые решения после такого теста захочется изменить без дополнительных исследований.

Урок 3. Пользователь не должен искать управление

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

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

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

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

Урок 4. Интерфейс должен отвечать на действия

У физических элементов управления часто есть заметная обратная связь: переключатель меняет положение, индикатор загорается, механизм начинает работать. Человек получает подтверждение, что его действие принято.

Цифровому интерфейсу такая обратная связь нужна не меньше.

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

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

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

Урок 5. Хороший дизайн учитывает ошибки

Недостаточно спроектировать сценарий, в котором человек всё делает правильно. Нужно подумать, что случится, если он промахнётся, нажмёт не туда или передумает.

Чем серьёзнее последствия, тем важнее защита от случайного действия.

В интерфейсе кнопки «Сохранить» и «Удалить проект» не стоит делать одинаковыми и размещать вплотную друг к другу. Для необратимого удаления можно запросить подтверждение. Если действие обратимо, ещё удобнее дать возможность его отменить.

При этом подтверждение не должно появляться после каждого шага. Если постоянно спрашивать «Вы уверены?», пользователь привыкнет автоматически нажимать «Да». Защищать стоит прежде всего действия с заметными последствиями.

Урок 6. Проверять интерфейс нужно за пределами Figma

Макет показывает, как выглядит дизайн. Но он плохо показывает, как продукт ведёт себя в реальной ситуации.

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

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

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

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

Если интерфейс работает только в идеальных условиях презентации, работа над ним ещё не закончена.