Прицельный огонь по ошибкам в юзабилити

Если вы читаете эту статью, то, пожалуй, не стоит объяснять, что означает термин «юзабилити».

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

Каждый из нас понимает, что посещаемость сайта может быть высокой, например, если это интернет-магазин. В умных книжках сказано,  что если конверсия у таких сайтов в день достигает до 3%, то сайт работает как надо. Но есть способ достичь более высоких результатов?
Удобство сайта в использовании  имеет важную роль. Теперь предположим, что у вас есть сайт и туда могут зайти разные пользователи от «горячих», что очень хорошо, до ледянных «холодных». Так вот, как не разочаровать ни тех, ни других посетителей? Как не спровоцировать их уйти к конкурентам? Трудно привести точное количество ошибок в юзабилити, просто постараюсь донести самые важные моменты. Перед  этим  предварительно разобью  на 3 раздела:

  1. Доступность сайта
  2. Идентичность  и Навигация
  3. Содержание

Доступность информации сайта

  1. То, что видит пользователь при загрузке страницы важно!  Но не заставляйте ждать эту информацию. Ожидание отклика более чем на 2 секунды может снизить интерес пользователя к сайту. Вы ведь тоже не любите ждать? Используйте CSS спрайты и различные инструменты для тестирования веб-страниц, тем самым вы выявите узкие места для проведения работ по оптимизации кода. На начальных этапах разработки сайта отнеситесь ответственно к выбору быстрого движка и мощного хостинга.
  2. Выделиться хочет каждый, но не стоит портить зрение пользователей. Как, например, уникальное предложение на баннере, которое трудно разобрать:Баннер с плохо выраженным предложениемГлаза устают от контрастности. В таком случае лучше придерживаться старомодного способа:  темное на белом:Баннер с хорошо выраженным предложением
  3. Следующий пример:Невидимый текстВы, наверняка, захотите отнести его к предыдущему разряду, но нет. Здесь, помимо контраста между текстом и фоном, очень мелкий текст. Чтобы сделать его читабельным, я увеличила его с помощью Firebug на 3 пикселя, сравните:Текст, увеличенный на 3 пикселяНужно всячески облегчать текст  для чтения. Выделять ключевые слова, использовать списки, заголовки, публиковать короткие параграфы, разбавлять контент изображениями и т.д.
  4. Умеренно используйте Flash другие дополнения. Можно добавить про платформу Microsoft Silverlight, который еще не так применяем и известен, но постепенно набирает обороты. Новые технологии хороши только тогда, когда это действительно приближает к вашим целям.  Иногда стоит придерживаться стандартных HTML/CSS шаблонов, тем более это большой плюс  для поисковых систем.
  5. Уже не новость, что следует указывать альтернативный текст — ALT  для ваших изображений. В них нуждаются и поисковые системы, и пользователи, если страница не отображает картинки по какой-то либо причине. Крайне важно (и удобно) прописывать  ALT  изображений для ключевого содержания, например, пункты меню. Сравните  сайт с загруженными изображениями: Сайт №1 с изображениямиИ он же только без загрузки изображений, но с альтернативным текстом:Сайт №1 с альтернативным текстомА теперь посмотрите на еще одну страницу другого сайта:Сайт №2 с изображениямиИ на ту же самую страницу, но без изображений и альтернативного текста:Сайт №2 без изображений и альтернативного текстаВся информация теряется и выглядит бессмысленно, особенно это касается раздела «Наши сотрудники».
  6.  На сайте обязательно должна быть оформлена страница Not-found/Ошибка 404. Даже если пользователь не нашел то чего искал, вы с помощью этой страницы ошибки  можете перенаправить его на нужный раздел:404 ошибка. Хороший пример №1Не забывайте, что страница ошибки должна соответствовать по дизайну всего сайта. Даже использовать в ней капельку юмора никогда не помешает:404_good2Примеры приведены с сайта Рейтинг 404.  Если пользователь в результате наткнется на такое: 404_ошибка. Не оформленный вариант.Он, вероятнее, покинет сайт сразу.

Идентичность и Навигация

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

  1. Как правильно разместить  логотип, слоган,  контактную информацию, а также примеры навигации все это подробно раскрыто в нашем познавательно-интересном посте  Правила «хорошего тона».Всего за несколько секунд пользователь должен понять, какая перед ним компания, оценить ее деятельность, преимущества и полезность для себя. Как здесь:Пример хорошо поставленного сайта
  2. Часто на главной странице сайта стараются разместить всю информацию о компании.  Не стоит «пичкать» главную страницу всем подряд, для пользователей важнее доверие к вам.

Как никогда не стоит делать:"Напичканный сайт"

Подробную информацию разместите отдельно в разделе «О нас», «О Компании», «Новости» и сделайте удобное навигационное меню:Сайт с хорошей навигацией и правильным оформлением

Содержание

Вы слышали такую фразу, что «Content is king»?

Проанализируем юзабилити вашего сайта .

  1. Готовьте для пользователей интересную и легко воспринимаемую информацию, тогда ваш контент будет выполнять требуемую функцию на сайте, а не являться просто мусором для заполнения места (про место, кстати, мы скоро поговорим).
  2. Для SEO и для визуального восприятия не забывайте использовать четкие заголовки контента в <h1>,<h2> и т.д., также уникальные заголовки страниц в <title>, <description>.
  3. Миф о «первом экране» или о том, что люди не хотят читать длинные страницы. Если  у вас уже возник вопрос насчет «первого экрана» (да кто же их считает?), поясняю – это та часть веб-страницы, которая видна пользователю в первую очередь при загрузке сайта, то есть без дополнительной прокрутки. При аналитике мы  часто сталкивались с тем, что пользователи не видят  главный элемент сайта, потому что он находился не в «первом экране».  Такая проблема при ее решении  может только усугубить ситуацию, например, когда разработчики «напихивают»  начало сайта всем,  чем попало. Достаточно много места отнесено для «первого экрана», если опереться на интернет статистику со значениями стандартного монитора:Статистика: "Расширение монитора"На первую страницу не обязательно помещать все, что вы считаете важным для сайта. Опубликуйте только самое необходимое для правильного понимания деятельности вашей компании. Пользователь, скорее всего не станет прокручивать вниз, если  вами не заинтересуется и это касается в первую очередь «холодных» посетителей (об этом немного выше – Идентичность и Навигация).Есть еще один интересный факт, давно выявленный при исследовании Джо Личен, которое объясняет, что малое (но скорее всего заинтересовывающее!) количество контента сверху сайта побуждает искать пользователя продолжение внизу.Результат исследования Джо ЛиченаИ если вы планируете следовать доказательствам Джо Личена , то используйте в конце страницы «лестницу» на верх:
    Кнопка вверхили просто такую кнопкуКнопка вверх №2
  4. Какой бы дизайн не присутствовал у вас на сайте, не стоит делать яркие, громоздкие ссылки и кнопки! Не выделяйте много слов жирным шрифтом, от этого текст потеряет свою значимость и будет просто бес-по-лез-ным, останется  не прочитанным, да и просто не таким красивым:Пример использования жирного шрифта
  5. Осторожно используйте всплывающие окна, иногда пользователь может уйти из-за «навязчивого окошка». Многие браузеры блокируют подобные окна самостоятельно, чтобы не загромождался экран.

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

Пример карты кликов

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

Подпишись!

Оставьте адрес, и каждую среду мы будем высылать свежую статью

Спроси
автора статьи