Например, капитан космического корабля управляет им посредством приборного пульта. Если кораблю нужно совершить прыжок через гиперпространство, то командир нажимает красную кнопку с надписью “Гипер”. Если остановиться на орбите, то “Стоп орбита”. Если ему нужно донести сообщение до членов экипажа - он нажимает кнопку на микрофоне. Интерфейс управления интуитивно понятен.
На многих интернет-ресурсах даже при высокой посещаемости очень мало посетителей совершают ожидаемые от них действия (делают покупку, кликают на видео, заполняют форму, отправляют статью на конкурс, скачивают материал и т.п.). В этом случае говорят, что у веб-ресурса низкая конверсия, которая является одним из главных показателей в интернет-продажах. Конверсия — это превращение посетителя в покупателя, поэтому немаловажную роль в этом процессе играет правильно построенный веб-интерфейс.
Типы пользовательских интерфейсов
- Прикладной — помогает реализовать функциональные информационные технологии.
- Системный — помогает взаимодействовать с компьютером. Он, в свою очередь, делится на командный, графический, речевой, мимический и семантический.
- Командный позволяет вводить команду с экрана.
- Графический содержит образы и действия, пользователь при этом пользуется только мышью.
- Речевой — работает по речевой команде.
- Мимический — считывает образ лица.
- Семантический — объединяет все вышеперечисленные виды пользовательских интерфейсов.
Если посетитель попал на сайт, но не смог разобраться с навигацией, запутался в страницах, не нашел важную информацию, или веб-страница “криво” отобразилась на его устройстве — значит, веб-ресурс потерял потенциального клиента. Конверсия снижается.
“Дружественный интерфейс” предполагает лояльный настрой посетителя, механизм работы на сайте понятный, все сервисы предупредительны и доброжелательны и т.д.
Иногда проводят аналогию между интерфейсом и дизайном веб-проекта. Но есть существенное отличие. Дизайн — это внешний вид, а интерфейс – это взаимодействие человека с интернет-проектом. Полноценный ресурс обязательно должен иметь дружественный интерфейс.
Каким должен быть дружественный интерфейс
- Интуитивность. Пользователь не должен сталкиваться с трудностями для решения своей задачи.
- Недвусмысленность. Например, клавиша Enter — это переход на другой экран, ввод и т.д. Значит, она не должна нести другое действие.
- Минимальность. Человек должен испытывать минимальные трудности при вводе информации в систему. Если он какую-то информацию вводил ранее — то она должна на следующих экранах появляться автоматически.
- Помощь. Простая и понятная система помощи должна быть качественной и своевременной.
- Гибкость. С сайтом должны легко разобраться как продвинутые пользователи, так и “чайники”.
- Логичность. Если системе необходима одноплановая информация для разных функций, то логичнее ее запрашивать в одном блоке, например, при регистрации.
- Эргономичность. Человек должен минимизировать умственные действия при работе с системой. Например, он не должен вводить название города — лучше предложить сделать выбор.
- Привлекательность. Да, в какой-то мере этот пункт перекликается с дизайном.Но он также важен, ведь если самая удобная навигация будет навевать на посетителя тоску — то вряд у сайта будет высокая конверсия.
- Когнитивность. Если мы все знаем о шаблонах и ожиданиях среднестатистического человека, не нужно специально отходить от стандартов своей целевой аудитории, иначе сайт внесут в список непривлекательных. Если в шапке должны быть контакты — пусть там они и будут. Если текст подчеркнут — значит, он является ссылкой, и никак иначе.
Специалист, который трудится над разработкой веб-интерфейса — это UI-дизайнер, он компонует интерактивные элементы, которые улучшают конверсию веб-ресурса и способствуют полному погружению веб-посетителя в контент.
Важные советы для UI-дизайнеров
Узконаправленность. Создание UI-дизайна — сложная задача. Например, создать удобный ресурс под нужды всех посетителей невозможно, поэтому желательно его оптимизировать только для определенной целевой аудитории.
Расположение блоков и их наполнение
- Используйте сетку. Разметьте страницу и расположите основные блоки. Полезным на этом шаге будет процесс прототипирования сайта и пользовательского интерфейса — создание эскиза размещения элементов на каждой странице. Общепринятые расположения элементов: брендирование — левый верхний угол, навигация — под шапкой, контент — центр, объявления и анонсы -справа.
- Не забывайте о корректном отображении интернет-ресурса на мобильных телефонах.
- Футер не должен содержать много текста. Контакты внизу желательно разместить. Можно продублировать важную информацию в сокращенном варианте.
- Слайдеры. Это довольно эффектные “крутилки” в шапке. Как правило, размещают на слайдерах свои товары или услуги для того, чтобы люди быстро поняли тему бизнес-проекта или для выделения важной информации.
- Правило семи. Кратковременная память может одновременно удерживать около 7 элементов. Придерживайтесь этого правила и группируйте информацию в блоки.
- Используйте пустое пространство для разделения важных элементов. Пробел воспринимается как руководство к действию.
Навигация
- Вертикальная навигация. В настоящее время намечается тенденция к упрощению навигации (левое вертикальное меню исчезает). Но, к сожалению, горизонтальное меню не всегда удобно. Если пунктов меню много — применяйте вертикальную навигацию.
- Выпадающие списки нужны, если дерево меню очень разветвленное.
- Хлебные крошки — навигационная строка на веб-ресурсе, помогает пользователю ориентироваться и возвращаться на предыдущие экраны. Ее также любят поисковые системы. Она обязательна.
- Нумерация (пагинация) страниц. Если контента много, то лучше организовать пагинацию. Она снизит время загрузки и облегчит восприятие материала пользователем.
- Модальные вкладки закрывают дополнительный контент и открывают его по желанию читателя. Экономят место, создают удобства.
- Порядок. Меню должны быть упорядочены. Если информации много — логично разбивать ее на тематические блоки.
- Архивы. На большом интернет-портале целесообразно убирать старые записи в архив, при этом не закрывать их доступность.
- Иконки облегчают работу и экономят место. Лучше использовать рядом с картинками пометки-описания, чтобы исключить двусмысленность их восприятия.
Работа с посетителем
- Интерактивность. Веб-ресурс оживает, если добавить кнопки соцсетей, рейтинги, комментарии и т.п.
- Простая регистрация. Если на первом шаге у человека возникают трудности — то он уходит на другой веб-ресурс. Регистрация должна быть простейшей. Все остальные данные можно запросить позднее. Каптча также не должна быть такой, что разглядеть ее предоставится возможность только с огромной лупой.
- Акценты. Важный фразы выделяйте. Человек увидит сначала то, что ВЫ захотите ему показать.
- Поиск. Данный механизм должен быть реализован в обязательном порядке для объемного интернет-ресурса. Как правило, его размещают в шапке или в вертикальном меню.
- Превью. Каждый длинный текст в новостной ленте должен содержать картинку и краткий релиз. Человек должен сначала заинтересоваться, а потом кликнуть для разворачивания материала.
- Ссылки. Они должны быть подчеркнуты по тексты или выделены по-другому. Человек должен знать, что на элемент можно “кликнуть”.
- Ненужные эффекты убирайте. Они отвлекают человека и мешают воспринимать важную информацию.
- Формы. Используются для связи с администрацией ресурса, заказов, принятия комментариев и т.п. Если форма длинная — включите процент ее заполнения, чтобы человек видел, сколько еще осталось полей. Разделяйте вопросы по категориям.
- Подписки. Кнопки RSS, Twitter и другие сделают веб-страницы более коммуникативными, облегчающие слежение за новостями.
- Призрачные (прозрачные) кнопки не всегда понятны посетителю. Такие элементы приносят низкую конверсию.
- Микро-подсказки — важная составляющая, делающая проект более детальным и качественным. Они легко объясняют сложные функции на сайте.
- Если ваш сайт претерпел редизайн или он только планируется — оставляйте важные элементы на старых местах. Иначе постоянные пользователи будут ощущать растерянность и могут уйти.
Конечно, на этом рекомендации не заканчиваются. Мы рассмотрели самые распространенные приемы для создания хорошего интерфейса. Пользуйтесь нашими советами и создавайте красивые и удобные сайты. Ведь главное для любого бизнес-проекта — это высокая конверсия.
