Каждый раз, открывая приложение или страницу сайта, мы видим интерфейс (UI). Это видимая часть программного обеспечения, с которой можно взаимодействовать.
Качественным интерфейсом считается тот, в котором пользователь может быстро разобраться — ему интуитивно понятно, куда нажимать, чтобы найти нужный товар и добавить его в корзину, прочитать новости компании или перейти в раздел с вакансиями.
За разработку пользовательского интерфейса отвечают два специалиста: UI-дизайнер и Frontend-разработчик.
- UI-дизайнер — разрабатывает дизайн интерфейса.
- Frontend-разработчик — верстает и программирует готовые дизайн-макеты.
Кажется, что ответственность за качество интерфейса, в первую очередь, лежит на UI-дизайнере, а роль Frontend-разработчика вторична.
Но именно Frontend-разработчик делает так, чтобы:
- Интерфейс сайта или приложения правильно отображался на разных устройствах
- Все элементы UI (кнопки, формы, ссылки, иконки, онлайн-чат) корректно работали
- Веб-ресурс быстро загружался
- Бизнес-цели проекта были достигнуты
Разбираемся в принципах успешного интерфейса вместе.
1. Естественность и интуитивность
Попадая на сайт, пользователь не должен тратить время, чтобы разобраться, как им пользоваться. Основные разделы сайта должны быть понятны ему с первых секунд. Все элементы должны быть четко подписаны и иметь визуальные обозначения.
Например, мы не задумываемся, что означает значок тележки и почему список покупок нужно смотреть именно там. Использовать вместо тележки значок звездочки или ноутбука будет странным и непонятным. Пользователь не разберется и уйдет с сайта.
2. Отсутствие противоречий
На всех страницах веб-интерфейса кнопки, выполняющие одни и те же функции, должны выглядеть одинаково.
Если на главной странице кнопка «Узнать цену» ведет на страницу товара, а в разделе «Каталог» при нажатии на такую же кнопку товар отправляется в корзину, то это противоречие.
3. Интерактивность и наличие обратной связи
Самый простой пример — когда мы ставим лайки в соцсетях, то они меняют цвет. Так мы сразу понимаем, что наше действие выполнено. Это и есть своего рода обратная связь от интерфейса. Мы нажали кнопку, что-то изменилось. Если бы мы ставили лайки, а они не меняли бы цвет, мы бы не понимали, удалось действие или нет.
Этот же принцип подходит и для сайтов:
- Так, при добавлении товара в корзину, кнопка может менять цвет, размер или надпись с «Добавить в корзину» на «Уже в корзине».
- Верно придуманный пароль для входа на сайт подсвечивается зеленым цветом, а с ошибкой — красным.
- Во время загрузки появляется кружочек, показывающий, сколько % уже загружено.
- Всплывающие сообщения об ошибке, если что-то пошло не так.
4. “Ctrl+Z” — возможность отменить любое действие
Каждый может допустить опечатку в личных данных, добавить лишний товар в корзину или случайно закрыть страницу сайта. Кнопки «назад», «отменить», «вернуться к предыдущему шагу» просто необходимы.
Кроме того, понадобятся подсказки (какие символы должны быть в пароле, чтобы он был надежным), предупреждения (что если пользователь уйдет со страницы, то не сможет вернуться к выгодному предложению) и подтверждения (например, на оплату товара).
5. Запрашивай минимум информации
Чем больше действий нужно совершить для достижения цели, тем меньше людей до нее дойдут. В форме регистрации или обратной связи стоит оставлять только самые необходимые поля (нужный минимум).
Если пользователь давно сотрудничает с вами, является лояльным постоянным клиентом, то для него можно добавить больше вопросов. Но точно не при первом знакомстве с продуктом, а спустя время.