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

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

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

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

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

И так…

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

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

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

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

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

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

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

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

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

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

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

Текст

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

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

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

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

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

Цвета

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

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

Они должны…

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

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

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

Теперь поговорим про удобство… Запомните одно правило.

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

© Яна Ходкина

Поэтому разберем ключевые моменты…

Навигация

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

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

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

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

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

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

* Да простит меня автор сайта, который я так бессовестно раскритиковала в этой статье.

Обращение к автору:

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

Обратиться ко мне можно через страницу Контакты

*Да, я не знаю какие еще статьи есть на том сайте, но я знаю как зовут автора, потому что я кликнула на кнопку “Моя история”  :-)

** Я бы и сама ему написала, но не нашла кнопки “Контакты”.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

Навигация

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

P.S. Чтобы обратиться ко мне за консультацией по юзабилити Вашего сайта, просто свяжитесь со мной  через страницу Контакты.

C уважением, Яна Ходкина

Комментариев: 11

  1. Здравствуйте. Прочел внимательно вашу статью, а что, реально такой фон и текст есть как на у вас на картинке http://my-headway.ru/wp-content/uploads/2015-10-30-8.47.41_thumb.png
    Я вот все бьюсь с рубрикатором в сайдбаре своего сайта. Не могу разбить статьи как можно более удобно для посетителей по рубрикам. Может что посоветуете?

    • Егор, название рубрик понятно. Все логично для посетителя. Правда меня смущают адреса рубрик. Например переходим в рубрику «Оптимизация и продвижение». А адрес у этой рубрики category/pishem-staty/ (пишем статьи). ЧПУ не совпадают с названиями.
      Ну это скорее про SEO оптимизацию, чем про юзабилити.

      • У меня рубрики вообще не индексируются, дубли. Вот и названия рубрик я несколько раз менял, а ссылки не трогал, т.к хоть они в noindex, но ошибки сканирования выдают в Google, а дублей не создают. Парадокс.

        • Странно… Вот всегда так бывает, когда учимся на своих ошибках.
          У меня тоже, в свое время было — сначала сделаешь, а потом переделываешь, а потом снова переделываешь. Пока не поймешь, как правильно ))

  2. Интересная и полезная статья, спасибо. Интересно узнать подробные рекомендации, как прямо или косвенно узнать уровень юзабилити сайта? По каким показателям счетчика или выдачи?

    • Виталий, обратите внимание на показатель отказов. Это время проведенное людьми на вашем сайте.

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

      В Яндекс метрике — Визит считается отказом, если для него одновременно выполнены следующие условия:
      за время визита зафиксировано не более одного просмотра страницы;
      продолжительность визита меньше 15 секунд;

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

      Виталий, спасибо за идею для написания полноценной статьи :)

      • Не всё так просто.
        Вот у нас аудитория состоит из 2-х частей: студентов и потенциальных клиентов. Среднее количество отказов — это средняя температура больницы. А попробуйте отселектировать одних от других?
        Или шрифты. Без зесечек легче читаются, но хуже запоминаются. Так что если хочется запомниться, не используйте Arial.

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

          • Дело даже не в засечках. Чтобы запомниться, шрифт должен обладать некоторой «манерностью». Arial не запоминается

  3. Спасибо Яна за очень полезную инструкцию! Эта статья для меня как азбука,попробую внимательно следовать твоему уроку и надеюсь,что у меня получится удержать посетителей на сайте после проделанных действий.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *