2014 Новости

Тестируем юзабилити сайта: исправляем ошибки и улучшаем страницу

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

Даже очень красивый сайт с хромающим кодом, не соответствующий принципам SEО-friendly и загрузкой страницы больше 10 секунд не будет приносить клиентов и денег. И если проблемы с дизайном помогут решить лучшие шаблоны для WordPress, то с улучшением уровня удобства страницы придется потрудиться. Что именно нужно делать, рассказали коллеги из компании TemplateMonster.

Нормальная скорость загрузки — до 3 секунд

Есть как минимум две причины придерживаться этого правила:

  1. Концентрация внимания людей ухудшается. Они становятся более нетерпеливыми, менее сфокусированными, быстро теряют интерес даже к таким элементарным вещам как загрузка сайта. Доказывает этот факт исследование, которое проводили в Майкрософт еще в 2013 году, где узнали, что концентрация человека в среднем составляет 8 секунд, и то в лучшем случае.
  2. Постепенно пользователей, которые ищут информацию с телефона, становится больше. Google поддерживает именно mobile first сайты, повышая их позиции в выдаче. Этот процесс на территории СНГ начался в 2017 году. Тем, кто разрабатывает и продвигает адаптивные ресурсы, беспокоиться не стоит, а остальным стоит проверить, не теряется ли важный контент в мобильной версии.

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

Удобная навигация — и посетитель не потеряется

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

Удобное меню на сайте seveneleven.com.ua


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

Как это решить:

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

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


Как это решить:
Составить иерархию страниц, объединить их в группы и так называемые «страницы-хабы» — тематические страницы, объединяющие несколько подстраниц. Тогда можно будет вывести в меню главные разделы, чтобы пользователь сразу выбрал интересующее направление и не отвлекался на лишние вкладки. В этом поможет, к примеру, плагин JetMenu, где можно выбрать двойное меню — горизонтальное для основных разделов, вертикальное (выпадающее) — для детализации информации по разделам.

Грамотное оформление шапки сайта

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

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

Информация на сайте solution4u.com.ua


Как это решить:

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

Больше свободного пространства

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

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

Текст приклеился к фотографии, сайт persomed.com.ua


Как это решить:

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

Оформление текста по правилам типографики

Думаете, работа с текстовым контентом заканчивается после получения файла с текстами от копирайтера? Она с этого только начинается! Мало написать или залить материалы на сайт, нужно еще грамотно оформить их и сверстать.

Какие проблемы встречаются чаще всего:

  • отсутствие четко выделенных H1, H2, H3, которые бы отличались от простого текста не только размером символов;
  • есть и жирные, и курсивные шрифты, которые не помогают воспринимать информацию, а только отравляют дизайн ресурса;
  • весь текст — сплошное полотно информации, которое читать никто не будет.

Грамотно оформленный текст, который легко читать, сайт profreelance.pro


Как это решить:

Исправить ошибки можно комплексом улучшений:

  • важные материалы или фразы выделять акцентным цветом (одним);
  • не забывать использовать ключевые фразы в описаниях и заголовках;
  • все заголовки, подзаголовки оформлять через H1, H2, H3;
  • дробить данные по абзацам — идеально, когда в одном абзаце до четырех коротких предложений;
  • использовать списки;
  • выделять информацию как цитату или сноску, где это нужно;
  • проследить, чтобы не было грамматических, пунктуационных и других ошибок.

Адекватный дизайн привлекает адекватных клиентов

Адекватный дизайн — это не просто оформление идеей и креативом. Рекомендуют использовать максимум три оттенка: один основной и занимает 80-90% страницы и еще одни-два для расстановки акцентов. Контраст — это хорошо, но он не должен мешать знакомиться с информацией на странице. Важны цвета, которые приятно воспринимать глазу — кислотные оттенки могут подходить под тематику сайта, но долго смотреть на такой ресурс будет сложно.

Дизайн — всему голова


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

Как это решить:

Основные пожелания по хорошему дизайну такие:

  • читабельный шрифт, один для сайта;
  • чем проще, тем лучше;
  • никаких цветов «вырвиглаз»;
  • под кнопки и важные фразы нужен один акцентный цвет;
  • белый или светло-серый фон — это хорошее решение почти в любом случае;
  • виджеты — это круто, но более двух-трех вставлять не нужно;
  • много мигающих объектов — плохо;
  • сначала смысл и удобство, потом красота и дизайн.

Форма для сбора заявок должна быть простой

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

Простое поле для оформления заявки


Как это решить:

Пересмотреть форму для сбора заявок и оставить в ней максимум два-три поля.

Выводы

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

А если долго мучаться с настройками нет возможности и хочется работать с качественными ресурсами, делать работу быстро, можно подписаться на One от TemplateMonster. Всего 19$ в месяц или 229$ в год, и у вас откроется доступ к более чем 10 тысячам шаблонам сайтов с уже готовыми SEO-настройками, чистыми кодами и хорошим юзабилити, презентациям, инфографике, плагинам, а каждый месяц будут приходить новинки.

_____

Алла Тафф, менеджер по работе с партнерами TemplateMonster

Google: избегайте код ошибки 5xx для несуществующих страниц сайта
«Анализ сайта»: специальный тариф для студий
Поздравляем с Днем программиста и дарим скидку!
Комментарии (1)
Здесь был комментарий, который удалил модератор.

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться

К данной записи нельзя добавлять комментарии, т.к. она очень старая.