Главное Свежее Вакансии Образование
😼
Выбор
редакции
5 376 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Юзабилити сайта — удачные и не очень удачные примеры

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

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


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

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


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

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


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

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

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


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

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

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


Логотип


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

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

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


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

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

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

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


Навигация


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

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

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

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


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

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

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


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


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

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

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


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


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


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


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


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


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

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


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

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

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


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


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

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


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


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


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

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

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


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

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


Заключение


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

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Igor Timokhin
С интересом узнал новый для себя термин "фуллер", спасибо, что хоть хуллером не назвали по простоте копирайтерской душевной. Вообще-то буржуйскими буквами это слово пишется "footer", что по-русски читается как "футер".
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.