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

Онбординг – процесс, в рамках которого вы знакомите пользователя с
продуктом.
Чаще всего он осуществляется тремя способами:
1. Прежде чем пустить пользователя в систему, ему показывают
несколько экранов, на которых объясняется суть сервиса. Обычно этот
метод используется в мобильных приложениях: вам показывают
картинку и поясняющий текст. Да, это те самые экраны, которые мы
пролистываем, а потом пытаемся разобраться в интерфейсе
самостоятельно.
2. Пользователю помогают пошагово совершить первые действия.
Например, Basecamp при входе в систему предлагает создать первый
проект, запрашивая его название, сроки и необходимые документы.
Pinterest предлагает подписаться на интересные темы, а Apple Music –
на любимых исполнителей. Таким образом формируется персональная
лента, и продукт становится ближе новому пользователю.
3. Вместо пошаговых сценариев каждый экран предлагает контекстные
подсказки. К примеру, когда пользователь впервые попадает на страницу

---

заказов, вы можете указать ему на ключевые элементы (кнопку создания
заказа, фильтры, список).
Все эти действия обучают и вовлекают в процесс использования
сервиса. А чем лучше обучен и вовлечен новый пользователь, тем
меньше вероятность, что он уйдет.
19. Обратимость
Напомню, что пользователи – это люди, а людям свойственно совершать
ошибки. И если вселенная безразлична к нам, как писал Стивен Хокинг,
то пусть хотя бы ваш интерфейс будет дружелюбным.
«Удаление» и «Отмена» – критические действия, поэтому к их
реализации нужно подходить осторожно. Ваш интерфейс не должен
выглядеть как бездушная машина, готовая выполнять любые повеления
хозяина, хотя иногда кажется, что именно в этом и состоит его цель.
Дизайн должен помогать, предупреждать, благодарить, вызывать
положительные эмоции и уверенность, что всё находится в руках
пользователя, – при этом не нагружая его лишней ответственностью.
Другими словами, человек должен чувствовать себя комфортно не
только когда включает сервис, но и когда совершает критические
действия.
Пользователь нечасто нажимает кнопку «Удалить» по ошибке. Обычно
это происходит намеренно. Проблема в том, что он может выбрать не
тот объект, из-за чего потеряется важнейшая информация. В этом
случае интерфейс послушно (и безвозвратно) выполнит действие
пользователя, но будет ли он тогда считаться хорошим? Видимо, нет.
Что же делать?
Хороший вариант – удалить объект сразу, но оставить возможность
отменить действие. В этом случае пользователь поймет, нужный ли
объект он удалил, и в случае ошибки сможет быстро его восстановить.
Таким образом удаляются элементы в сервисах Google (Keep, Docs,
Gmail).
Однако здесь есть одна деталь.
Подобная практика хорошо работает, когда вы взаимодействуете с
нулями и единицами (например, удаляете письмо или заметку). Но когда
по ту сторону интерфейса – реальный человек, такое решение будет
ошибочным. Представьте, что подумает таксист (и система), если вы
отмените заказ, а через несколько секунд вновь его активируете. В этом
случае лучшим вариантом будет запрашивать подтверждение, прежде
чем совершать отмену или удаление.
20. Анимация

---

У любой анимации должна быть своя цель. Например, плавно
открывающаяся карточка сделает ваш интерфейс более реалистичным,
а «встряхивающиеся» поле ввода или модальное окно сообщат об
ошибке, если что-то пошло не так.
Спиннер загрузки покажет, что интерфейс не завис и нужно лишь
немного подождать для завершения работы. После этого он может
плавно превратиться в галочку, создав приятный опыт использования
сервиса.
Некоторые элементы могут видоизменяться при наведении курсора,
помогая пользователю сфокусироваться на выбранном объекте.
Например, вы можете визуально «приподнять» элемент при помощи
тени или привлечь к нему внимание, поменяв цвет фона или изменив
прозрачность элемента.
Apple использует анимацию на своем сайте для того, чтобы показать, как
их продукция выглядит внутри и слой за слоем превращается во всем
привычное устройство.
Главное – не переборщить с анимацией. Используйте ее только в том
случае, если она помогает пользователю лучше понять работу
интерфейса.
21. Адаптив
Мобильный трафик с каждым годом растет. Некоторые считают, что он
нужен только для просмотра справочной информации, а для
дорогостоящих продуктов ключевую роль играет полноценная веб-
версия.
Это правда: окончательное решение о покупке техники, автомобиля или
квартиры люди принимают, просматривая полноценные сайты (а если
быть честным до конца, то даже при личном просмотре офлайн). Но
мобильная версия очень часто является первым контактом человека с
брендом, поэтому не стоит ее игнорировать.
На одной конференции прозвучала шутка, что маркетолог с утра первым
делом должен проверять, как сайт компании смотрится на телефоне,
поскольку порой после очередного обновления важная информация
теряется, из-за чего трафик сильно падает.
Например, был случай, как после небольшого визуального обновления
номер телефона, написанный белым цветом, наехал в мобильной
версии на светлый блок, из-за чего в компанию перестали поступать
звонки. А представьте, каких денег стоит клиент в автомобильной
индустрии или недвижимости!
Переходя к практическим советам, отмечу, что в мобильной версии
сайта не обязательно предоставлять всю информацию. Или, возможно,
какую-то стоит скрыть, а какую-то – сделать заметнее.

---

К примеру, если ваша задача – создать сайт сложного интернет-сервиса,
то сделайте так, чтобы на мобильном устройстве с ним можно было
только ознакомиться, но не использовать. В такой ситуации полезнее
предложить посетителю оставить адрес почты, куда вы направите свое
предложение, а не давать доступ к сервису.
Если вы указали телефон, то удостоверьтесь, что, кликнув по нему,
посетитель сразу же перейдет к звонку (копировать и вставлять номер в
«Контакты» неудобно).
Проектируя веб-версию, сразу задумывайтесь, как элементы будут
отображаться при просмотре на телефоне. Благодаря этому вы
сэкономите не только свое время, но и время разработчика. Обычно
сложности возникают с адаптацией горизонтальных схем.
Поскольку экран мобильных устройств намного ýже, вам необходимо
решить, в какой последовательности располагать контент. Например, что
вы поставите первым: слоган и описание преимуществ или форму
регистрации? Вроде бы форма важнее, но без слогана и описания она
вряд ли заинтересует пользователя.
Проверьте, как смотрятся изображения. Часто точка фокуса уезжает за
пределы экрана – не допускайте этого. В некоторых случаях можно и
вовсе заменить фоновое изображение цветным фоном.
Не забудьте уменьшить размер шрифта. А лучше просто пообщайтесь с
разработчиком и задайте правила, благодаря которым шрифт будет
автоматически уменьшаться в зависимости от ширины экрана.
Проверьте все формы. Обратите внимание на разные состояния и
типовые поля ввода. Некоторые элементы веб-версии неудобно
использовать на телефоне – например, длинные выпадающие списки.
Не забывайте о контексте. Если у вас есть доступ к геопозиции
пользователя, то в разных точках ему нужна разная информация. К
примеру, в ресторане человеку неинтересен адрес заведения, когда же
он находится дома – наоборот.
22. Уведомления
Уведомления могут вызывать разную реакцию. В некоторых случаях они
сообщают о важных событиях – например, о встрече или приезде такси.
В других могут сильно отвлекать: к примеру, когда на каждый лайк
присылается отдельное push-уведомление.
Если вы будете присылать уведомления по каждому событию, то одно
важное может затеряться среди остальных. Причем пользователь будет
винить в утере себя, тогда как виноват в этом дизайнер.
В описании уведомления сообщайте две детали: что именно произошло
и с каким объектом. Таким образом, пользователь сразу поймет, в чем

---

дело, и ему не придется проваливаться внутрь, чтобы узнать
подробности.
Самый простой пример.