Книга: Дизайнер интерфейсов
Назад: 5. Пользователь
Дальше: 18. Онбординг

11. Негативный сценарий

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

• Что будет, если пропадет интернет-соединение?

• Что вы предложите пользователю, если не пройдет оплата?

• Что если пользователь введет некорректную информацию?

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

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

12. Обратная связь

Пользователь должен понимать, в каком состоянии находится интерфейс и его сущности. Это может отображаться в виде статусов («Заказ в пути»), анимации или спиннеров загрузки («Письмо отправляется»).

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

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

Качественная обратная реакция создает эмоциональную связь человека с интерфейсом, благодаря чему пользователь чувствует, будто всё у него под контролем. Таким образом создается доверие и лояльность к продукту.

13. Группировка

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

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

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

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

14. Ограничения

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

Подобный пример и есть ограничение, которое не позволяет осуществить одно действие (забрать деньги), пока не будет совершено другое (вынуть карту).

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

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

15. Обучение

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

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

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

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

16. Единообразие

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

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

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

17. Персонализация

Суть персонализации – предоставить актуальную информацию или функционал.

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

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

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

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

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

Назад: 5. Пользователь
Дальше: 18. Онбординг