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

Мы составили чек-лист таких ошибок. Проверьте свой сайт, возможно что-то из этого списка есть и на вашем сайте.

Шапка

1. Логотип и краткое описание деятельности компании. Попав на сайт, пользователь должен сразу понять, чем занимается компания, и в чём она может быть ему полезна. Также неплохо указать город или регион, на который ориентируется компания. Не стоит использовать слоган, которые не поясняет рода деятельности компании.

Хорошо: ООО «Гараж»  «Ремонт литых дисков в Санкт-Петербурге»

Плохо: ООО «Гараж»  «Вам покорятся все дороги!»

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

3. Рядом с номером телефона должна находиться ссылка на альтернативный способ связи. Это может быть ссылка на форму отправки сообщения или заказ обратного звонка.

Хорошо:

Компания занимается изготовлением натяжных потолков и установкой кондиционеров.

 

Плохо:

Очень плохо:

Компании занимаются изготовлением пластиковых окон.

Навигация

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

1. Ясные и краткие названия пунктов меню. Пункт меню должен емко отражать содержание страницы, на которую попадет пользователь при клике. Не стоит называть разделы сайта «креативно», пункты меню должны быть понятны посетителям.

2. Акцент на главное меню. Многие сайты, содержащие большой объем контента и функционала, имеют главное и дополнительное меню. При этом акценты в дизайне не всегда расставлены верно. Главное меню обеспечивает доступ к тому контенту, который наиболее востребован пользователями. Дополнительное — к важному, но менее востребованному контенту.

Например, в главном меню интернет-магазина размещены категории товаров, а в дополнительном — сервисная информация, информация о компании и т.д.

Хорошо:

Плохо:

 

 

 

 

Это шапки интернет-магазинов детских товаров. Во втором примере меню каталога товаров находится ниже.

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

4. Дублируйте заголовки пунктов меню на страницах. Учитывайте, что пользователи могут попасть на страницу не только с внутренних страниц сайта, но и из поиска. Заголовок поможет ему сразу понять, что это именно то, что он искал.

Хорошо:

Плохо:

 

 

 

 

 

Во втором примере: раздел сайта с неочевидным названием «Полезное», содержащий ответы на часто задаваемые вопросы о пластиковых окнах.

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

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

 

 

 

 

 

 

 

 

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

Дизайн и контент

Все любят красивые сайты. Но часто личные вкусы заказчиков сайта противоречат юзабилити и здравому смыслу. А дизайнер в студии рисует, что ему скажут, ведь «желание заказчика — закон».

1. Ясная визуальная иерархия на каждой странице. Зайдите на любую страницу своего сайта и задайте вопрос: «Что должен сделать пользователь на странице?». Ответ на этот вопрос однозначно расставит приоритеты в размещении информации на странице.

Более важная информация и элементы должны быть выделены и размещены в первом экране сайта.

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

Отличный пример, как делать нельзя:

 

 

 

 

 

 

 

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

А если повертеть головой, можно заметить еще блоки «Клиентам» и «Партнерам» — в них и скрывается главное меню сайта.

Еще пример:

Страница «Контакты» — красивая картинка. А зачем?

3. Кнопки должны быть похожи на кнопки. Это очевидно, но многие пренебрегают этим правилом.

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

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

6. Если сайт находится в разработке, и на нем есть пустые страницы и разделы — скройте их до момента размещения контента. Наличие пустых страниц создает ощущение заброшенности сайта,  снижает доверие к компании.

Формы

Форма — самая важная точка конверсии на сайте. От ее реализации напрямую зависит количество контактов, которые вы получите с сайта.

1. Формы должны содержать минимально необходимое количество полей: имя, телефон или email, необязательное поле для комментария. Все, что вы можете спросить по телефону, при личной встрече или в процессе переписки — спросите позже.

2. В формах должны быть отмечены обязательные поля.

3. Подсказки при неверном заполнении должны отображаться рядом с полем, в котором возникла ошибка.

4. Необходимо производить проверку корректности введенных данных.

5. На форме не должно быть кнопок отмены/очистки формы.

6. Кнопка отправки заявки должна быть яркая и заметная.

Хорошо:

 

 

 

 

 

 

Плохо:

 

 

 

 

 

 

 

 

 

 

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

А теперь проверьте свой сайт.

 

Первоисточник здесь

Также читайте по этой теме

• Цифровой мир: новые возможности для продавцов и покупателей
• На что обратить внимание при оценке онлайн-привлечения?
• Собираемся на мероприятие [ XIII Бизнес-Форум TOP Marketing ]