Проектирование интерфейса: 8 принципов, которые должен знать каждый UX‑дизайнер

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

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

Разработкой и созданием пользовательских интерфейсов, или UX-проектированием, занимается UX/UI-дизайнер. Вот какие задачи он решает:

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

Прототип приложения онлайн-магазина. Источник: behance

Главные принципы проектирования веб- и мобильных интерфейсов почти 30 лет назад сформулировал Якоб Нильсен, руководитель Nielsen Norman Group. В России их хорошо дополняет книга Влада Головача «Дизайн пользовательского интерфейса: искусство мыть слона». Рассмотрим базовые принципы проектирования интерфейсов подробнее:

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

Сервис расшифровки аудио после отправки файла даёт обратную связь, показывая, как идёт загрузка.
Источник: planerka.app

Пользователь видит, что происходит после оформления заказа и когда приедет курьер. Источник: perekrestok

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

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

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

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

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

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

Кнопки «Удалить аккаунт» и «Сохранить изменения» расположены максимально далеко друг от друга, чтобы не было риска их перепутать. Источник: dribbble

Маркетплейс помогает избежать ошибки, уточняя, действительно ли пользователь хочет совершить действие.
Источник: ozon

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

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

Вот три константы дизайн-мышления:

1. Эмпатия ― умение посмотреть на ситуацию с позиции пользователя.
2. Широта мышления ― способность всеохватно посмотреть на пользовательский процесс.
3. Готовность экспериментировать ― пробовать новое, видеть негативные последствия, отказываться от функции или страницы в таком виде и пробовать что-то другое.

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

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

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

3. Генерация идей — на этом этапе дизайнер и команда проекта ищут ответы на поставленные вопросы. Цель — решить проблему наилучшим способом с учётом всех ограничений.

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

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

6. Тестирование. Важный этап проектирования интерфейса — проверка прототипов на реальных пользователях и сбор обратной связи.

Пример схематичного прототипа. Источник: nimax

Самые распространённые ошибки при проектировании интерфейса:

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

❌Неконсистентность разных частей системы. Например, когда в одной части каталога маркетплейса есть «Корзина», но при переходе в другую категорию товаров она превращается в «Лукошко».

❌Резкое прерывание процесса, например всплывающим рекламным баннером или модальным окном с дополнительной информацией, не важной в этом контексте. Такие сообщения только отвлекают и раздражают пользователя.

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

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

«Ой-ой…» — явно не те слова, которые хочет услышать пользователь на странице ошибки после получаса выбора модели идеальных кроссовок. Источник: kant

Пользователю неочевидно, как закрыть это модальное окно с предложением улучшить аккаунт. Источник: ganttpro