Интуитивно понятный интерфейс: как создать комфорт пользователю?

Все посетители приходят на ваш портал с определенной целью: например, найти нужную информацию, заказать товар или услугу или связаться с представителями вашего бизнеса. В этом им помогает интерфейс сайта – та графическая картинка, которую пользователь видит на экране своего устройства. Если он создан в соответствии с принципами UI/UX дизайна, то user experience или пользовательский опыт будет успешным: человек получит то, зачем пришел, а вы – увеличите прибыль за счет нового клиента. Однако в случаях с неудачным интерфейсом все обстоит ровно наоборот: веб–ресурс закрывают, потому что взаимодействовать с ним неудобно, и конверсия сайта падает.

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

Интерфейсы, которые помогают пользователям

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

• Текстовый интерфейс (Text User Interface). Самый яркий пример его реализации – командная строка BIOS. TUI не предусматривает наличие сложной графики и выбора цветов. Эти детали здесь даже не вторичны, а попросту не нужны, ведь такой интерфейс выполняет сугубо утилитарные задачи: например, запуск определенных команд путем введения числовых и буквенных символов.
• Голосовой интерфейс (Voice User Interface). Позволяет распознавать голосовые команды пользователя и незаменим в тех случаях, когда посмотреть на экран невозможно: например, при управлении автомобилем. Умные колонки, голосовые помощники в смартфонах, системы Smart Home – все это примеры реализации VUI.
• Тактильный интерфейс (Touch User Interface). Эта технология повсеместно реализована в мобильных устройствах. Простейший пример ее реализации – виброотклик на определенные действия: нажатие на кнопки виртуальной клавиатуры на тачскрине или взаимодействие с джойстиком во время компьютерной игры. Использование тактильных ощущений для удобства пользователей постоянно расширяется. Так, интерфейс электронных книг имитирует прикосновение к бумажным страницам и ощущения, возникающие при их перелистывании, а подсказки в виде сигналов и вибраций при нажатии на отдельные элементы дизайна веб–площадки могут значительно упростить путь пользователя.
• Графический интерфейс (Graphical User Interface). Это сочетание отдельных элементов интерфейса сайта – кнопок, иконок, форм, блоков, которая делает процесс контакта человека с ресурсом простым и понятным. Именно разработкой GUI и занимаются веб–дизайнеры.
• Жестовый интерфейс (Gesture Interface). Это технологии, позволяющие управлять любым устройством при помощи мимики, поворотов головы, движений рук без прямого контакта. Жесты широко используются в мобильном UI/UX дизайне для улучшения пользовательского опыта, реализуются в системах управления автомобилями, сфере развлечений (технологии VR).
• Нейронный интерфейс (Brain Computer Interface). Находящийся в стадии разработки, нейронный интерфейс позволяет управлять программами и устройствами буквально силой мысли. Пока он применяется только в виде концептов для улучшения качества жизни людей с ДЦП или травмами позвоночника.

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

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

Основные элементы интерфейса

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

Что включает в себя по–настоящему понятный интерфейс сайта?

Хедер

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

Футер

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

Меню

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

Кнопка

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

Форма

Блок с несколькими полями, кнопкой и CTA. Заполнение формы – одно из конверсионных действий, поэтому подходить к дизайну этого элемента нужно с особым вниманием. Форма может включать в себя: 

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

Аккордеон

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

Контентный блок

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

Слайдер

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

Pop–up

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

Модальное окно

Разновидность поп–ап, которая отличается от последнего своим размером. Модальное окно закрывает практически весь экран. Чтобы продолжить просмотр контента, посетитель ресурса вынужден либо закрыть этот элемент, либо выполнить требуемое действие.

Тултип

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

Пагинация

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

Хлебные крошки

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

Поисковая строка

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

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

Чек– лист для портала: проверяем, удобный ли интерфейс у сайта

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

• Оцените, насколько удобно расположены отдельные компоненты: взаимодействие с одним элементом не должно провоцировать случайного нажатия на другой;
• Проверьте работоспособность всех кликабельных элементов и форм как в декстопной, так и в мобильной версии;
• Оцените, насколько понятен маршрут, который ведет к целевому действию: условно, каждый посетитель должен понимать, что для подписки на рассылку надо нажать конкретную кнопку и заполнить форму;
• Проведите «коридорный» тест, продемонстрировав готовый макет 1–2 представителям своей аудитории. Попросите их выполнить определенные действия и оценить удобство ресурса.

Для того чтобы создать интуитивно понятный пользовательский интерфейс в Taptop, не нужно обладать навыками написания кода. В Библиотеке шаблонов уже собраны готовые макеты, наполненные всеми необходимыми элементами. Достаточно выбрать тот вариант, который откликнется представителям вашей целевой аудитории, и стилизовать его под собственный бренд–бук. Функционал конструктора позволяет добавлять и удалять отдельные компоненты страниц, менять их цвет и форму. Экспериментируйте, чтобы создавать площадки с безупречным дизайном и функционалом.