Улучшаем юзабилити сайта

В этой статье хочу рассказать про юзабилити сайта.

Большинство владельцев сайтов и блогов не задумываются о юзабилити своих ресурсов. “Главное чтобы было красиво” –  думают они. Но красота понятие относительное. Спросите любого дизайнера. Для кого-то “желтый” – это цвет солнышка, а для кого-то (заранее простите меня) цвет мочи.

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

Разве что снова, когда-нибудь, статья с этого ресурса не попадется тебе в ТОП 3 поисковой выдачи Яндекса. И зайдя туда снова, ты вспомнишь этот ресурс и мысленно улыбнешься… Это пример неправильного визуального юзабилити.

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

Все красиво, но вот куда “тыкнуться” чтобы прочитать другие статьи? А где меню? А где найти содержание или контакты? Ничего непонятно. А вот это уже отсутствие технического юзабилити.

И так…

Что такое юзабилити

Юзабилити это –  от англ. usability — дословно «возможность использования», «способность быть использованным», «полезность» (выдержка из википедии).

Говоря простым языком – это удобство и простота использования чего-либо. В нашем случае сайтов.

Вы знаете, что 90% сайтов имеют проблемы с продвижением, с объемом продаж, с количеством подписчиков, постоянных читателей, с показателем отказов именно из-за плохого юзабилити?

Основные параметры юзабилити

Восприятие и удобство – эти два основных параметра идут сразу после полезности.

Да, мы можем потерпеть кислотные цвета на сайте но все же прочтем статью, если она нам очень важна (ключевое слово оооочень)

Да, мы помучаемся с поиском на сайте, если уверены, что где-то здесь “ну вот точно-точно” есть то, что нам нужно.

Но останемся ли мы там надолго и вернемся ли снова? Конечно нет!

Какие параметры улучшают юзабилити сайта

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

Текст

  • Читаемый текст раз. Разбит на абзацы, заголовки, подзаголовки)
  • Читаемый текст два. Желательно темный шрифт на светлом фоне, а не так, как в примере…

Улучшаем юзабилити сайта

  • Читаемый текст три. Есть шрифты с засечками, есть без засечек (смотри пример ниже). Во втором случае текст более читаемый.

шрифты пример. Улучшаем юзабилити сайта

  • Читаемый текст четыре. Плотность шрифта (расстояние между буквами и строками).
  • Читаемый текст пять. Размер шрифта. (мелкий шрифт на сайте – плохо, огромный шрифт на сайте – некрасиво и не удобно. У кого-то огромные мониторы, а кто-то будет читать с экрана маленького нетбука. Поэтому, не впадайте в крайности.)

Цвета

Не буду углубляться в подробности web-дизайна. Тема слишком объемная… Поэтому дам только ключевые вещи. Если захотите разобраться – проGooglите.

Основные правила использования цветов на сайте:

Они должны…

  • Соответствовать тематике сайта
  • Гармонировать между собой (читай не раздражать)
  • Отражать фирменный стиль

Частая проблема, которая беспокоит именно меня – это неправильно подобранные цвета из серии “вырви глаз”. Безусловно, сайт может быть ярким и красочным (например это детский или развлекательный сайт) НО, сочные цвета должны быть правильно подобраны, и желательно чтобы их было не более трех-четырех.

*Для подбора гармонирующих между собой цветов, лично я использую сервис Сolorscheme

Теперь поговорим про удобство…

Навигация

меню (верхнее или боковое)

На сайте должно быть меню и оно должно быть информативным, а не состоять из двух кнопок “Главная” и “Контакты”. Попала я случайно на один сайт. Автор обучает людей компьютерной грамотности. Полезной информации на сайте “вагон”. Но я смогла прочитать лишь ту статью, на которую попала из поисковика. А знаете почему? А потому что у него в меню сайта всего лишь две кнопки. Я даже заскринила это для вас.

Меню. Улучшаем юзабилити сайта

Причем, при нажатии на “Индивидуальное обучение”, мы переходим на продающий лендинг в этом же окне браузера и уже не можем попасть обратно. Разве что, с помощью кнопки “назад” в том же браузере. То есть, по сути мы первым же (ладно-ладно, вторым) действием покидаем сайт автора!

Хотя мне очень любопытно было ознакомиться с содержанием всего сайта. Окинуть, так сказать, взором заголовки всех имеющихся статей и почитать еще что-нибудь. Но нет. Автор сказал “Хватит” 🙂  Мне до сих пор любопытно, какое общее количество статей на этом сайте около 100 или 2-3тыс. В боковой колонке находились 5-6 рубрик со скучными названиями. Ну не заходить же в каждую из них и не листать десятки страниц анонсов в поисках интересного чтива….

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

Если у вас блог с большим количеством статей – то обязательно должно быть содержание и ссылка/кнопка на него на видном месте.

Представьте книгу-энциклопедию без содержания, как вам? Ну там хоть по толщине наглядно виден объем информации. На сейте такого нет…

Подвал (футер)

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

В каждом отдельном случае по-разному. Карту сайта (содержание) можно тоже разместить в подвале, но только при условии грамотной основной навигации.

Сайдбар (боковая колонка)

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

Работоспособность

Если на сайте есть кнопки – они должны работать.

Если на сайте есть ссылки – они не должны быть битыми и вести на несуществующие страницы.

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

Совет: Выясняйте конкретные причины

Пример: Нет подписчиков с сайта.

Проанализируйте:

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

Три правила юзабилити сайта

  1. Сайт должен работать
  2. Сайт должен быть приятен для посетителя
  3. Он должен быть удобен для посетителя

Оценка юзабилити сайта

Схема юзабилити сайта

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

Услуга платная и включает в себя длинный чек лист, по которому будет проанализирован ваш блог/сайт и даны рекомендации.

Что вы получите, обратившись ко мне за оценкой юзабилити сайта?

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

Какие параметры входит в отчет:

Технический аудит сайта

  • Оценка скорости загрузки сайта
  • проверка сайта на вирусы
  • проверка на раздражающие факторы (агрессивная реклама и пр.)

Внутренняя и внешняя оптимизация

  • проверка на уникальность
  • анализ контента (аудио, видео, текст)
  • анализ SEO оптимизации (ключи, теги, тайтл, мета, Н1 и др)

Визуальная составляющая

  • оформление сайта
  • цветовые соответствия

Навигация

  • меню
  • страницы
  • поиск