Материал

Удобный интерфейс сайта

Удобный интерфейс сайта, как создать, основные ошибки

Среди миллионов сайтов не все имеют удобный пользовательский интерфейс. В погоне за “супер” дизайном многие забывают о конечных пользователях.

Рассмотрим пример создания неудобного интерфейса. Заказчик обращается в web студию. Заполняет бриф на создание сайта, ему рисуют графический макет полностью по его пожеланиям, создавая “супер” дизайн, чтобы выделиться среди конкурентов так как это главный критерий. Каков будет результат? Мы получим красивый сайт. Пользователь зайдет на такой сайт, который выполнен за несколько сотен тысяч рублей, он будет перенасыщен цветами, анимацией и т.п. Первая фраза пользователя - “Красиво, интересно, а где меню, куда нажимать? А как получить информацию о компании?”. И вот в этом главная ошибка при создании удобного интерфейса для сайта.

Обратите внимание на сайты, особенно сферы недвижимости. Вы заходите на сайт, первое, что вы делаете - это закрываете всплывающее окно специального предложения, на втором этапе вы закрываете окно чата, дальше вы закрываете окно обратного звонка, затем нажимаете “отмена” при предложении подписаться на новости и рассылки. А теперь скажите, много ли потенциальных клиентов это выдержат? 

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

Итак, рассмотрим несколько ошибок при создании интерфейса:

 

Ошибка

Результат

Как исправить

Перенасыщенность информацией

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

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

Дизайн

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

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

Формы

Пользователь не может оставить заявку из-за перенасыщенности формы, капчи, которую сложно заполнить и т.п.

Старайтесь делать как можно меньше полей в форме.

Поиск

Пользователь не может найти нужную информацию и уходит с сайта

Расположите поиск в шапке сайта на видном месте. 

Меню. Навигация

Ухудшается навигация по сайту

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

Обратная связь. Всплывающие окна. Онлайн чаты

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

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

Онлайн калькуляторы

Пользователь путается во множестве параметрова расчета

Укажите только главные параметры в калькуляторе, если потребуется полный расчет, то создайте форму заявки в вашем калькуляторе.

Изображения

Слишком частое использование изображений негативно влияет на работу с сайтом. Внимание пользователя рассеивается. 

Используйте более гармонично текст и изображения. 

Сплошной текст

Очень большие тексты тяжело читать.

Разбивайте тексты на разделы, добавьте таблицы и перечисления. Выделяйте заголовки. Используйте иконки в перечислениях.

Анимация

Выпрыгивание элементов страницы сайта часто отвлекает внимание пользователя.

Используйте более плавную анимацию и только при необходимости

Фреймы

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

Не используйте фреймы

Всплывающие баннеры

Часто отвлекают посетителей сайта. Их не просто закрыть

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

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

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

Старайтесь как можно меньше использовать модальные окна. Можно сделать так, чтобы информация разворачивалась прямо на странице (вкладка).

 

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

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