Илья Сидоренко Дизайнер интерфейсов

«Хорошие дизайн-решения настолько полно отвечают нашим нуждам,
что становятся невидимыми. Плохие же кричат о своей
несостоятельности, и заметить их очень просто».
Дональд Норман. «Дизайн привычных вещей»
Если при использовании сервиса человек вынужден задумываться,
совершая привычные действия, – значит, интерфейс можно упростить.
Это касается не только сценариев, но и микроинтерфейсов.

---

Я видел, как пользователи замирали во время выбора даты, когда
компонент был выполнен непривычным образом. Или терялись после
завершения какого-либо действия, не зная, что делать дальше. Всё это
негативно влияет на опыт использования (UX).
Самый простой способ проверить интерфейс – посадить за компьютер
представителя целевой аудитории и понаблюдать за его действиями.
Если в какой-либо момент он сделает паузу, то, скорее всего, эту часть
интерфейса нужно изменить, упростив или добавив подсказку.
8. Целевое действие
Пользователь должен понимать, какое целевое действие от него
требуется на каждом этапе сценария и на каждой странице сайта или
сервиса. Чаще всего к этому действию его подталкивает кнопка перехода
к следующему шагу или создания какой-либо сущности.
На сайте такой кнопкой будет регистрация или оплата, в соцсети –
создание нового поста, а внутри поста ключевым действием станет
реакция: лайк или комментарий.
Сделайте целевое действие заметным – например, выделите цветом – и
обеспечьте к нему быстрый доступ, ведь необдуманное перемещение
такого элемента из-за большого количества пользователей может очень
сильно повлиять на доход компании.
В соцсетях целевое действие помогает вовлекать людей в
использование сервиса. Представьте, что вы поставили лайк любимым
фильмам, но не всем. Несправедливо. И теперь вы бродите по соцсети,
расставляете лайки, получаете уведомления и просматриваете
рекламу 
9. Иерархия
Правильно выстроенная визуальная иерархия помогает определить
приоритет информации и понять зависимость между элементами.
Читая статью, вы обращаете внимание сначала на картинку, после на
заголовок и уже потом на сам материал. Цель подобной структуры –
сначала завлечь картинкой и заголовком, а после погрузить в чтение
истории.
Хорошая иерархия помогает различать основную и второстепенную
информацию в сервисах. Например, название карточки всегда заметнее,
чтобы взгляд в первую очередь цеплялся за него.
Заходя на страницу человека в соцсети, вы прежде всего обращаете
внимание на фото и имя – и только после этого переходите к описанию и
публикациям. Таким образом мозгу проще анализировать информацию.

---

Сами подумайте, насколько сложно было бы работать с сервисами, если
бы дизайнер использовал только текст одного размера и цвета.
Для создания визуальной иерархии используйте следующие
инструменты: размер, цвет и расположение. Кроме того, ее можно
создавать с помощью отступов.
10. Распознавание
Каждый день мы используем различные сервисы, на основе чего мозг
формирует паттерны. Благодаря им он экономит энергию, выполняя
повторяющиеся действия и контактируя со знакомыми элементами.
Вы и сами знаете, что большинство ежедневных дел мы совершаем не
задумываясь. То же самое и в дизайне. Интернет существует уже много
лет, и люди привыкли использовать сайты и приложения определенным
образом.
Не нужно усложнять им жизнь, пытаясь придумать оригинальное
решение там, где это неуместно (почти везде, не считая творческих
конкурсов). Людям это не нужно. Им нужно лишь решить свои задачи
максимально быстрым способом.
В то же время некоторые решения могут быть очень удобны, но
непривычны пользователям из-за того, что всю жизнь они работали по-
другому. Если ваше решение действительно хорошее, то через какое-то
время им всё равно начнут пользоваться.
11. Негативный сценарий
Проектируя интерфейс, дизайнер должен задумываться, каким образом
поведет себя система, если что-то вдруг пойдет не по плану. Такое рано
или поздно непременно произойдет, поэтому лучше подготовиться
заранее.
• Что будет, если пропадет интернет-соединение?
• Что вы предложите пользователю, если не пройдет оплата?
• Что если пользователь введет некорректную информацию?
Представьте все возможные варианты развития событий и постарайтесь
придумать универсальное решение, так как, пытаясь справиться с
каждой потенциальной проблемой по отдельности, вы усложните
интерфейс никому не нужной логикой.
Самое печальное, что вы этого даже не заметите, поскольку по факту
будете делать полезную работу. Без понимания общей картины
подобные изменения могут сильно усложнить продукт.

---

12. Обратная связь
Пользователь должен понимать, в каком состоянии находится
интерфейс и его сущности. Это может отображаться в виде статусов
(«Заказ в пути»), анимации или спиннеров загрузки («Письмо
отправляется»).
Например, при сильном нажатии на экран iPhone реагирует вибрацией,
подтверждая, что действие совершено. Наведение курсора на объекты
интерфейса может изменять длину и контрастность тени, как будто
элемент поднимается или опускается в реальном мире.
Помимо этого, не стоит бросать пользователя после совершенного
действия. Предложите ему варианты продолжения работы (к примеру,
создать еще одно письмо или перейти во «Входящие») или как минимум
покажите, что действие прошло успешно («Письмо отправлено», «Заказ
создан»).
Качественная обратная реакция создает эмоциональную связь человека
с интерфейсом, благодаря чему пользователь чувствует, будто всё у
него под контролем. Таким образом создается доверие и лояльность к
продукту.
13. Группировка
Пользователь не всматривается и не вчитывается в каждый блок. Он
сканирует. И чем лучше вы сгруппируете информацию, тем проще ему
будет ориентироваться на странице.
На уровне форм и модальных окон вы группируете схожие по типам
поля. Например, выносите в блок «Контакты» ссылки на соцсети, сайт и
номер телефона.
На уровне структуры страницы – объединяете схожие элементы в блоки.
Например, для отображения одних сущностей используете таблицы, а
фильтры выделяете в отдельный блок.
На уровне структуры всего сервиса вы продумываете навигацию.
Пользователь должен сразу понимать, в каком разделе искать
необходимую информацию.
14. Ограничения
Все современные банкоматы, прежде чем выдать наличные, навязчиво
просят забрать карту. Таким образом они минимизируют вероятность
того, что вы уйдете без нее, забрав деньги. (Их вы вряд ли забудете, так
как это цель вашего визита.)

---

Подобный пример и есть ограничение, которое не позволяет
осуществить одно действие (забрать деньги), пока не будет совершено
другое (вынуть карту).
Ограничения не менее полезны и в цифровых интерфейсах. В одном из
сервисов, над которым я работал, мы не допускали пользователя к
основным функциям, пока не проверили его документы: так повышается
безопасность системы.
Однако на ограничения можно смотреть и по-другому. Например, клиент
просит вас сделать дизайн логотипа, используя определенный цвет.
Некоторые дизайнеры жалуются на это, хотя именно подобные
ограничения помогают сфокусироваться на одном направлении, вместо
того чтобы метаться в многообразии вариантов, которые предлагает
фантазия.
15. Обучение
Помогайте пользователю разобраться в сложных местах интерфейса.
Внедряйте онбординг, добавляйте подсказки, создавайте документацию
или записывайте обучающие видео.
Очень часто пользователи уходят не из-за того, что им не нужен продукт,
а из-за того, что не смогли в нем разобраться, тогда как в другом сервисе
всё понятно с первого раза.
Некоторые компании тратят много сил на привлечение клиентов, но
сразу же забывают о них, как только те попадут в систему, – хотя любой
маркетолог знает, что удержание дешевле, чем привлечение.
Дизайнеру сложно оценить понятность интерфейса, так как все сценарии
он многократно проработал у себя в голове. Здесь придут на помощь
тестировщики, за действиями которых вы сможете понаблюдать.
16. Единообразие
Опирайтесь на схожие компоненты и паттерны в разных частях своего
сервиса. Таким образом, всем станет проще: пользователю –
ориентироваться, а вам – добавлять новый функционал.
Используя единую дизайн-систему, вы повышаете вероятность того, что
отдельные части сервиса будут работать одинаково. Хотя часто даже у
больших компаний второстепенные для бизнеса функции сильно отстают
в дизайне от флагманских.
Покопайтесь в настройках Google или Facebook, и вы это увидите.
Однако если крупные компании могут себе такое позволить, то
большинству сервисов лучше придерживаться единообразия во всем.
17. Персонализация

---

Суть персонализации – предоставить актуальную информацию или
функционал.
Сегодня существует множество способов больше узнать о пользователе.
Некоторые данные он предоставляет сам (личная информация в
профиле), другие можно получить из открытых источников (страницы
соцсетей) или анализируя его действия внутри сервиса (покупки, оценки,
лайки).
Медиасервисы могут фильтровать публикации согласно предпочтениям
конкретного пользователя, анализируя понравившиеся ему материалы.
Так работают ленты соцсетей, поднимающие вверх публикации, которые
с наибольшей вероятностью его заинтересуют.
Финансовые сервисы анализируют прошлые действия и предлагают их
на главном экране. Например, если вы часто переводите деньги другу, то
эту операцию можно упростить до нажатия одной кнопки «Перевести
1000 рублей Диме на карту».
Amazon анализирует огромные объемы информации, чтобы
рекомендовать товары, которые покупают похожие на вас пользователи.
Мало того, он способен спрогнозировать, какие товары и через какой
период вы захотите купить вновь.
Анализ больших данных – очень эффективный инструмент. Подумайте,
каким образом можно использовать его в своем проекте.
18. Онбординг