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

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

1. Приобрести товар/ воспользоваться услугой.
2. Подписаться на рассылку или оставить контактные данные.
3. Провести на сайте должное количество времени.
4. Рекомендовать сайт друзьям/знакомым.

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

Тонкости дизайна

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

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

Хорошим примером, того «как нельзя делать», является представленный сайт:

Разумеется, дизайн сайта зависит от его специфики. Возложена важная задача: дать понять пользователю, куда он попал и в тоже время стимулировать к действию. Хорошим примером удачного дизайна является сайт сайт магазина Tessemae’s, который продает приправы:

• представлены фото продукции и варианты сервировки;
• использованы яркие цвета, которые ассоциируются с чем-то острым;

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

Логотип

Логотип — важнейший элемент имиджа сайта. Более того, он помогает идентифицировать бренд перед посетителем. Хитрости расположения логотипа:

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

Пример удачного размещения логотипа:

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

Какие могут быть ошибки при оформлении логотипа? Самые банальные:

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

Также огромной ошибкой является отсутствие логотипа:

Навигация

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

Основные характеристики продуманной навигации:

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

К примеру, на сайте Zara в США навигацию легко понять и изучить: все новости и акции изображены в фоновом режиме, а более отвлекающий контент расположен ниже и не мешает посетителю разобраться с функционалом.

Хорошая навигация обязательно имеет:

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

Категорически запрещено перегружать страницы информацией, как это сделано на этом сайте, который функционирует с 2019 года( на минуточку):

Связь с пользователем

Пользователь сайта должен быть в курсе любых изменений:

• прошла ли успешно регистрация;
• принят ли его заказ;
• перезвонят ли ему и в течении какого времени;
• несуществующая страница и прочее.

Главная ошибка сайтов в этой плоскости отсутствие пояснений для пользователя. К примеру, та же несуществующая страница 404 может не иметь информации нужной информации куда вернуться пользователю:

Важно оставить для пользователя ссылки на страницы куда он может перейти из страницы 404. Иначе посетитель быстро покинет сайт.

Ненавязчивое предложение помощи

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

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

Форма регистрации

Чем лаконичнее — тем лучше. Большое количество полей для заполнения подталкивает желание их заполнять. При регистрации необходимо запрашивать минимум информации. Несколько приемов:

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

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

Грубыми ошибками в формах сайтов являются:

• наличие большого количества полей;
• подтверждение почты и пароля;
• необходимость введения номера телефона.

Строка поиска

Обязательный атрибут любого сайта. Важными критериями строки поиска являются:

• длина строки поиска: 27 символов( в 90% случаев сюда поместится даже длинный запрос);
• размещение строки поиска: оптимальное размещение( и самое удачное) в шапке сайта:

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

Подача информации

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

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

Антипример подачи информации на сайте:

Здесь налицо использование неудачных цветов и неподходящие шрифты, очень скудная графика.

А вот пример удачной подачи информации на сайте. Зарубежный блог о технологиях, запущенный в 2013 году Verizon. Глаз приятно радуется:

Заключение

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