Юзабилити сайта — правила, принципы, секреты

Юзабилити сайта – это такой этап разработки, которым в Рунете почти никогда и никто не занимается. Ни верстальщик, ни программист, ни дизайнер. И только если владелец сайта перед разработкой задастся вопросом удобства своего будущего проекта и опишет пожелания в техническом задании – иногда получится что-то приличное. Но, это скорей исключения, т.к. владелец сайта в 100% случаев полагается на интуицию, а она очень часто подводит.

У меня каждую неделю несколько стандартных писем: «разработчики сделали сайт, рекламщики запустили рекламу, клики есть – продаж нет. Почему?».

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

Гораздо чаще,  причины неуспеха сайта в более простых вещах: например, если пользователь не увидел в правой части шапки контакты фирмы – владелец теряет около 20% возможной прибыли. Если забыли в главном экране (без прокрутки) указать, чем конкретно фирма занимается (это не фантастика, такие случаи сплошь и рядом) – отминусуйте ещё 20 процентов прибыли. Несколько таких косяков в оформлении и все усилия по разработке сайта пошли прахом. Большинство принципов юзабилити для простого сайта-визитки предельно просты, просто почти никто про них не знает.

Потому я постараюсь написать кратко и просто, а Вы пройдитесь по своему сайту и сверьтесь, что на нём есть, а чего нет:).

Что такое юзабилити сайта?

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

Удобство или красота?

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

Корректная верстка

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

F-образный шаблон – один из главных «секретов» юзабилити

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

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

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

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

Ориентация на местности

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

Обязательные элементы:

  • логотип компании
  • название компании
  • слоган, хотя бы частично поясняющий, что на этом сайте предлагается
  • контактные данные компании
  • меню
  • цепочка ссылок до главной страницы («хлебные крошки») – возможно, но необязательно

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

Для юзабилити сайта очень важно сочетание цветов

На этот счёт есть простые и чёткие принципы юзабилити . О них можно прочитать в статье  Подбор цвета для сайта — простые правила сочетания

Прокрутка (скроллинг)

Горизонтальной прокрутке просто следует отказать. Огромная часть посетителей, столкнувшись с ней, покинет сайт сразу.

Вертикальная же прокрутка не раздражает, но на первом видимом экране непременно должно быть что-то, что заинтересует пользователя. Он не должен покинуть сайт, даже не начав прокручивать.

Поля и отступы

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

Шапка

Не стоит делать ее огромной, ведь кто-то просматривает ваш сайт с небольшого экрана нетбука или планшета. Да и на полноценном мониторе это редко выглядит красиво. Большинство посетителей,  увидев одну шапку вместо контента, уже не станут его искать.

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

Меню — горизонтальное или вертикальное?

Меню — основной инструмент навигации по сайту, потому оно не должно быть сложным. Идеальное меню — горизонтальное и одноуровневое.

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

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

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

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

Пункты меню

Люди всегда хорошо реагируют на знакомые и привычные элементы интерфейса. Приходя на сайт, он ожидает увидеть в меню что-то вроде «О нас», «Услуги», «Контакты» и так далее. Если такие повсеместно используемые пункты меню будут названы иначе, посетитель просто может не обратить на них внимание.

Форма поиска, входа, регистрации и тому подобное

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

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

Ссылки

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

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

Анимация

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

Звук

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

Реклама

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

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

2 комментария для “Юзабилити сайта — правила, принципы, секреты

  1. Такой вопрос: сейчас очень много компаний, которые предлагают «обратную связь».
    Например, редхелпер или Лайвтекст, или WebConsult…
    Это же тоже огромный пласт юзабилити сайтов. У Вас нет статей на эту тему?

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

Добавить комментарий для admin Отменить ответ

Ваш адрес email не будет опубликован.

Пролистать наверх

Быстрая заявка на консультацию

  1. Заполняем поля (можно просто имя и любой удобный для Вас контакт: почта и/или страница vk и/или ватсап);
  2. Очень хорошо, если вы сможете заполнить и отправить бриф (скачать)
  3. Жмём «Отправить» ;
  4. В течении 24 часов (обычно намного быстрее) – я с Вами свяжусь, а далее всё обсудим и спланируем.
Всегда рад сотрудничеству! C уважением, Николай.