Ошибки юзабилити: Юзабилити сайта: анализ базовых ошибок | чек-лист по usability-аудиту сайта – 50 ошибок, ухудшающих юзабилити сайта. Проверьте юзабилити по чек-листу

Содержание

50 ошибок, ухудшающих юзабилити сайта. Проверьте юзабилити по чек-листу

50 ошибок, ухудшающих юзабилити сайта

В статье собрано описание 50 ошибок в юзабилити сайта и советы по их устранению. Используя статью как чек-лист, вы сможете проверить и повысить удобство вашего проекта для посетителей. Для удобства все ошибки юзабилити сгруппированы по типам. Если у вас останутся вопросы, пишите в комментариях – постараюсь помочь советом.

Общие ошибки в юзабилити сайта

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

  1. Отсутствие адаптивного дизайна или мобильной версии сайта. Учитывая рост мобильной аудитории многих сайтов, дизайн проекта должен адаптироваться к экранам мобильных устройств. Иначе посетителям будет неудобно просматривать сайт с планшетов и смартфонов.
  2. В первом экране (область сайта, доступная на ПК без прокрутки) отсутствует меню и полезный контент. Это ошибка, особенно отсутствие меню. Если посетитель сразу не увидит навигацию, он может подумать, что ее нет совсем.
  3. Сокрытие меню в «гамбургер» на обычной версии сайта для ПК. Прятать меню в «гамбургер» необходимо только на версиях сайта для мобильных устройств. При просмотре сайта на ПК меню должно выводиться полностью, иначе посетитель может не понять, где находится навигация.
  4. В дизайне сайта отсутствуют специальные места для размещения информации об акциях и спецпредложениях. Это может вызвать трудности при необходимости анонсировать на сайте акции, поэтому необходимо заранее предусмотреть в шаблоне места для размещения баннеров.
  5. Недостаточная контрастность фона и текста. Исследования показывают, что посетителям проще всего читать черный текст на белом фоне. Однако не всегда сайт имеет белый фон и черный шрифт. Проверьте, что читать текст на вашем сайте удобно и он не сливается с фоном, не режет глаза.
  6. Мелкий шрифт. Частая проблема, которая ухудшает юзабилити сайта. Размер шрифта должен быть таким, чтобы посетитель мог легко воспринимать текст с экрана.
  7. Использование шрифта с засечками. Такой шрифт сложнее читать с экрана. Предпочтительнее использовать шрифт без засечек.
  8. Выравнивание текста по ширине. Оптимально использовать выравнивание по левому краю.
  9. Реклама на сайте занимает более трети площади. Большая площадь рекламных мест может вызвать санкции со стороны поисковых систем.
  10. На сайте имеются всплывающие окна. Использовать их нежелательно, поскольку такие окна сильно раздражают посетителей.
  11. Наличие горизонтальной полосы прокрутки. Создает неудобство для посетителей.
  12. В шаблоне дизайна используются неоптимизированные для web изображения. Это типичная ошибка, ухудшающая юзабилити сайта. Мне приходилось встречать в шаблонах картинки, вес который был более 1 Мб. Они замедляли загрузку сайта, особенно на мобильных устройствах с медленным Интернетом.

Ошибки в шапке сайта

  1. В шапке сайта отсутствует логотип и/или название компании и сфера ее деятельности. Посетитель не понимает, на какой сайт он попал и какую информацию может найти на нем. Несмотря на очевидный характер, ошибка часто встречается на сайтах, в том числе – коммерческих.
  2. Шапка занимает более 50% площади экрана, в результате полезный контент смещается вниз и для его просмотра необходимо прокручивать экран.
  3. На логотипе нет ссылки на главную страницу сайта. Пользователи привыкли нажимать на логотип в шапке, чтобы перейти к главной странице.
  4. В шапке корпоративного сайта отсутствуют номера телефонов. Посетителям приходится прилагать усилия для поиска контактной информации.
  5. Номера телефонов в шапке сайта прописаны картинкой, а не текстом. Посетитель не может скопировать номер телефона.
  6. У номеров телефонов не указан код страны и города, из-за чего иногородние посетители не могут связаться с компанией без знания кода города.
  7. Номера телефонов скрываются в версии дизайна, адаптированной для мобильных устройств. Также мне встречалась проблема, когда в определенном браузере или при открытии сайта на определенном устройстве номер телефона в шапке «исчезал» и клиенты не могли позвонить в компанию.
  8. Элементы шапки или меню сделаны на Flash, из-за чего они не выводятся на мобильных устройствах.

Ошибки в навигации сайта, ухудшающие юзабилити

  1. Отсутствуют «хлебные крошки». Этот элемент позволяет пользователю перейти на один или несколько уровней выше, а также видеть, в каком разделе и подразделе сайта он находится. Также «хлебные крошки» улучшают внутреннюю оптимизацию сайта.
  2. Цвет ссылок на сайте не отличается от цвета основного шрифта, из-за чего ссылки мало заметны посетителям.
  3. Цвет ссылок не синий. Пользователи привыкли, что текст ссылок – синий. Иной цвет может ухудшить юзабилити сайта.
  4. Ссылки в меню прописаны картинкой, а не текстом. Не столько ошибка в юзабилити, сколько во внутренней оптимизации сайта. Рекомендуется все ссылки в меню делать текстовыми.
  5. В меню не выделяется раздел, в котором находится посетитель. Таким образом, посетитель не видит, в каком разделе он находится.
  6. Боковое меню размещено в правой колонке. Сомнительное решение с точки зрения юзабилити, поскольку пользователи привыкли видеть боковое меню справа.
  7. Меню не дублируется в «подвале» сайта. Системы аналитики показывают, что пользователи активно взаимодействуют с навигацией в «подвале» сайта. Поэтому имеет смысл дублировать ссылки на важные разделы сайта в «подвале», а не только размещать там ссылки на юридические документы.
  8. В меню сайта отсутствуют ссылки на важные разделы. Например, на сайте компании в меню обязательно должны быть ссылки на разделы «О компании», «Контакты», ссылки на услуги или каталог товаров.
  9. Ссылки не реагируют на наведение курсора мыши. Желательно, чтобы ссылки изменяли оформление при наведении курсора. Например, у ссылок менялся цвет.

Ошибки юзабилити в оформлении текстов на сайте

  1. Заголовки и подзаголовки имеют такой же размер, как основной текст. Они не выделяются и не привлекают к себе внимание.
  2. В текстах не используются подзаголовки. Рекомендуется добавлять один подзаголовок на каждые 2000 знаков текста с пробелами.
  3. В текстах не используются таблицы, нумерованные и ненумерованные списки. Тексты набраны «сплошной стеной» – их неудобно читать.
  4. Отсутствие фотографий и других иллюстративных материалов. Фотографии делают текст привлекательнее и способствуют удержанию внимания посетителей.
  5. Фотографии не подписаны. Проверьте, что каждая фотография имеет описание в атрибутах ALT или TITLE.
  6. Кнопки социальных сетей находятся далеко от контента, из-за чего посетители реже делятся контентом в социальных сетях.
  7. В статьях на сайте не выводится дата публикации, из-за чего сложно понять актуальность представленной информации.

Ошибки, ухудшающие юзабилити интернет-магазинов

  1. Отсутствует возможность сортировки товаров в каталоге, нет форм подбора товара по параметрам.
  2. Отсутствуют фотографии к некоторым или всем товарам в каталоге. Ошибкой является размещение фотографий только запакованных товаров без размещения содержимого коробки. Например, фотография упаковки с игрой мало что даст потенциальному покупателю. Необходимо также добавить фотографию, показывающую саму игру.
  3. При заказе товара, имеющего разные варианты расцветок или размеры, нет возможности выбрать конкретную расцветку или размер. Досадная ошибка в юзабилити, способная серьезно снизить уровень продаж.
  4. На карточках товаров отсутствуют блоки с сопутствующими товарами.
  5. Недостаточно подробные описания товаров. Например, в описании детских товаров нужно указывать возраст детей, для который данный товар подойдет.
  6. Отсутствуют оценки товаров, рейтинги, отзывы. Это важная информация, которая может помочь потенциальному покупателю принять решение о заказе.
  7. Излишне сложная регистрация и процесс оформления заказа на сайте. Каждый лишний шаг может серьезно снизить конверсию.

Ошибки на странице «Контакты»

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

  1. Отсутствует адрес электронной почты.
  2. Отсутствует график работы компании. Отсутствует информация об обеде или работе в выходные дни.
  3. Отсутствуют реквизиты компании. Особенно эта проблема актуальна для интернет-магазинов.
  4. При наличии нескольких номеров телефонов не указано, какой номер и к какому отделу компании относится.
  5. Указан адрес только одного офиса компании при наличии нескольких офисов, торговых точек, пунктов выдачи и т.д.
  6. Отсутствует схема проезда.
  7. Отсутствует информация, как лучше проехать в компанию на автомобиле, общественном транспорте.

Как проверить и оценить юзабилити сайта?

Ниже размещен алгоритм, следуя которому, вы сможете улучшить юзабилити вашего сайта:

  • Последовательно проверьте ваш сайт по чек-листу, размещенному выше. В нем ровно 50 пунктов для проверки.
  • Отметьте проблемы, которые вы найдете.
  • Составьте техническое задание на исправление ошибок. Если вам потребуется программист для решения проблем, вы можете бесплатно добавить проект на биржу или найти специалиста в каталоге веб-программистов.
  • Исправьте ошибки юзабилити, выявленные на сайте, самостоятельно или при помощи специалистов.

Чтобы оценить эффективность внесенных изменений, полезно измерить основные показатели сайта до и после доработок. При этом минимальный период, который необходимо брать для оценки – месяц до и месяц после доработок.

Сравнивать имеет смысл такие показатели, как:

Резюме

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

Полезные статьи по теме:

ТОП-35 ошибок юзабилити и дизайна сайта · Блог Системы PromoPult

В статье «Что такое юзабилити, и как сделать сайт удобным для пользователей» мы уже рассказывали о понятии и принципах удобного ресурса. Сегодня мы поговорим об ошибках, которые часто допускаются при веб-проектировании. Для удобства мы сгруппировали ошибки в логические группы.

Внешний вид

1. Много рекламы

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

2. Всплывающие окна

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

Сюда же относятся всплывающие окна (виджеты) с различными предложениями (подписаться на группу, купить товар, заказать обратный звонок). Если вы их используете, то дайте возможность пользователю ознакомиться с содержимым сайта (настройте отображение окон по определенному алгоритму, например, при нахождении 15 секунд в карточке товара).

3. Отсутствие единой дизайнерской концепции

Сайт должен быть выдержан в едином стиле. Не стоит креативить и раскрашивать в разные цвета страницы с рубриками, записями и главную или применять разные элементы оформления. Это сбивает с толку, и пользователь просто не поймет, где он — на вашем сайте или уже нет.

4. Ошибки верстки

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

5. Отсутствие логотипа

В шапке сайта должен быть логотип. Каждый пользователь интуитивно ищет логотип именно здесь. Какой бы у вас ни был сайт — интернет-магазин, блог или каталог объявлений — логотип обязательно нужен.

6. Реклама на коммерческом сайте

Рекламные баннеры сторонних ресурсов или блоки контекста на страницах интернет-магазина — явление, как минимум, странное. Это может вызывать недоверие со стороны клиентов и быть губительным для репутации.

7. Автоматический запуск видео или музыки

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

8. Неудачная цветовая гамма и контрастность

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

9. Неудобное и нелогичное расположение элементов

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

10. Избыточная анимация

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

Навигация

11. Лишнее меню

На сайте достаточно двух меню: основного (ключевые разделы сайта — о компании, акции, контакты, доставка и проч.) и каталожного (навигация по каталогу товаров или услуг). Большее количество меню может сбивать с толку и запутать посетителей.

12. Битые ссылки

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

13. Не оформлена страница 404

Не всегда удается отследить все битые ссылки, а иногда пользователи ошибаются в написании URL, вбивая адрес вручную. Если все-таки посетитель попал на несуществующую страницу, она не должна выглядеть так:

Расположите здесь интересные записи, форму поиска, рубрики, объясните, почему возникла ошибка 404. Можно также поместить интересную картинку или видео — это привлечет внимание. Подробнее о работе с такими страницами мы писали в этой статье.

14. Нет «хлебных крошек»

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

15. Малый размер кликабельных элементов

По всем ссылкам и кнопкам должно быть удобно и легко кликать. Особенно это важно для мобильной версии сайта. В противном случае человек может случайно нажать не туда и покинуть сайт в гневе.

16. Горизонтальная прокрутка

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

17. Отсутствие внутреннего поиска на сайте

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

18. Нет страниц «Контакты» и «О нас»

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

19. Тупиковый сценарий

Не создавайте случаев на сайте, когда у посетителей возникает вопрос: «А что дальше?» Часто такая тупиковая ситуация возникает после оформления и отправки заказа (нет уведомления о том, что заказ принят), после проведения оплаты и так далее. После каждого действия информируйте пользователя о том, что происходит и что ему делать дальше.

Функциональность

20. Медленная загрузка страниц

Увеличение времени загрузки страницы до 7 секунд повышает показатель отказов на 30%. Если страница грузится еще дольше, то показатель отказов стремится к 100%. Медленные сайты хуже индексируются и ниже ранжируются поисковиками. Именно поэтому надо работать над увеличением скорости загрузки страниц и времени ответа сервера. Для проверки отклика страниц используйте этот бесплатный сервис от Google.

21. Мгновенный запрос регистрации

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

22. Проблемы с формами регистрации

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

23. Скрытые поля ввода паролей

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

24. Отсутствие оптимизации для мобильных устройств

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

25. Нет поддержки мониторов с высоким разрешением

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

26. Нет «социальных» кнопок

Связь сайта с соцсетями обеспечивает дополнительный трафик. Разместите кнопки «Поделиться», «Мне нравится», и ваш ресурс начнет получать ссылки и переходы из соцсетей.

Контент

27. Непонятно, о чем сайт

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

Сайт о строительстве и ремонте? Не угадали

28. «Полотна» текста

Текст должен быть визуально привлекательным. Это не значит, что надо вставлять рамки с «бегущими муравьями», но подзаголовки, списки, блоки с важной информацией пойдут на пользу. Не делайте большие абзацы: один абзац — одна законченная мысль.

29. Нечитабельный шрифт

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

30. «Растягивание» статьи на несколько страниц

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

31. Отсутствие навигации внутри статьи

Если статья большая, то стоит сделать содержание и ссылки по ходу текста «К оглавлению». Также допустимо применение ссылок-якорей на различные части текста.

32. Неактуальная информация

Это распространенная проблема корпоративных сайтов. Когда-то кто-то создал сайт, наполнял его какое-то время, и на этом все. В результате на сайте годами висят записи, которые давно утратили актуальность. У посетителя сразу возникает вопрос: работает ли компания? Поэтому обновляйте информацию, проявляйте активность. Это оценят и посетители, и поисковики.

33. Узкая или широкая колонка текста

Ширина поля для текста должна составлять 60-70% ширины страницы. Очень узкие колонки вытягивают текст, и их неудобно читать. Широкие колонки усложняют чтение, ведь можно потерять строку (как на рисунке ниже).

34. Переизбыток (или недостаток) изображений

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

35. «Многотекстаибукв»

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

Итак, теперь вы знаете, каких ошибок нельзя допускать при разработке юзабилити сайта. Избегайте их, и ваш сайт станет «магнитом» для пользователей.

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

Примеры ошибок в юзабилити на сайтах. Страшный ТОП-7

От автора: готовы к ТОП-7 страшных ошибок, которые нельзя ни под каким предлогом допускать на своем сайте? Не поленитесь и уделите 5 минут своего драгоценного времени на прочтение этой статьи, в которой увидите примеры ошибок в юзабилити на сайтах. Наверняка вам интересна эта тема, поэтому обязательно ознакомьтесь с приведенными мною 7-ю ключевыми пунктами, чтобы облегчить жизнь себе и посетителям веб-страницы.

Примеры ошибок в юзабилити на сайтах. Страшный ТОП-7

Если человек хоть немного «в теме» и проходил какие-то курсы по веб-дизайну, то на каждом шагу в интернете он может встретить просто кошмарнейшие примеры неправильного юзабилити сайта. Причем самое забавное, что, как правило, владельцы этих веб-страниц на 350% уверенны, что их детище самое красивенькое. Эх, как бы они удивились, если собрали бы несколько отзывов у своей целевой аудитории. Ну да ладно, давайте от лирики к делу.

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

Слишком навязчивые баннеры.

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

Примеры ошибок в юзабилити на сайтах. Страшный ТОП-7

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Да вас самих наверняка страшно бесит, когда заходишь на сайт ознакомиться с ценами, ассортимент посмотреть, а вам тут же в лицо 43 всплывающих предложения по типу: «подпишись», «скидка 101%» и т. д. Вы вроде бы и купить были не прочь, но на всякий случай бежите оттуда подальше, чтобы не прибило еще этими баннерами ненароком.

Отсутствие оптимизации под смартфоны и планшеты.

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

Примеры ошибок в юзабилити на сайтах. Страшный ТОП-7

Перенасыщенность анимацией.

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

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

Элементы на странице, вводящие в заблуждение.

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

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

Примеры ошибок в юзабилити на сайтах. Страшный ТОП-7

Перенасыщенность информацией.

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

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

Скрытые ссылки.

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

Визуальный дисбаланс.

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

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

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

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

Примеры ошибок в юзабилити на сайтах. Страшный ТОП-7

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

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

Примеры ошибок в юзабилити на сайтах. Страшный ТОП-7

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее Примеры ошибок в юзабилити на сайтах. Страшный ТОП-7

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

8 ошибок юзабилити, которые губят сайт

Sostav.ru при помощи ведущих экспертов рынка продолжает разбирать российские интернет-ресурсы с точки зрения качества их исполнения и удобства использования. Если в прошлый раз мы анализировали сайты госкомпаний и ведомств, то на этот раз рассмотрели типичные ошибки сервисных интернет-ресурсов: онлайн-магазинов, сервисов услуг и т. д.

1. Навязчивые баннеры

Большое количество навязчивых баннеров встречаются на каждом третьем портале и интернет-магазине, уверены эксперты. Под навязчивыми баннерами понимаются не только баннеры как таковые, но и плашки с фразами «подпишись на нас в соцсетях», «скидки!», «рассылка новостей», лезущие из угла назойливые окошки онлайн-консультантов, в которых никто не отвечает по часу. Этим грешат интернет-магазины (особенно одежды), торрент-трекеры и сайты с пиратским контентом, а также популярные развлекательные сайты.

Ольга Круглова, арт-директор компании «ТриЛан»


При заходах на сайты Adme.ru, Babywit.com, баннеры напрочь перекрывают содержимое страницы. То есть, ты еще не осмотрелся на месте, не решил, а по адресу ли попал, а тебе уже тычут в лицо просьбами и предложениями.

Существуют же и менее навязчивые способы сообщить об акции или напомнить про подписку.


А в случае cайта агентства элитной недвижимости «Славянский двор», например, плашка с вопросом, который для меня на данный момент неактуален (думаю, любой человек в состоянии сам найти и открыть окно онлайн-консультанта на сайте, когда он действительно потребуется), вообще перекрывает часть важного функционала — фильтра по недвижимости.

2. Отсутствие оптимизации

Разработчики довольно часто забывают о том, что у многих пользователей далеко на самые передовые устройства. Речь, причем, идет именно об устройствах, а не старых браузерах, уточняет Глеб Железин из агентства Nectarin Agency.

Глеб Железин, Head of Production Nectarin


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

Что касается нового сайта «Альфа-Банка» – он красив, но работает очень сомнительно. На нашем, не самом слабом, лэптопе (переносимом персональным компьютере) сайт подергивается, и его работу нельзя назвать плавной. Будем надеяться, что Студия Артемия Лебедева поправит это в будущем.

А вот сайт «Рокетбанка» показывает, как надо сочетать понятный и простой контент с небольшой анимацией. Такой сайт отлично работает на любых устройствах.

3. Элементы сайта, вводящие в заблуждение

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

4. Избыточная анимация

Сама по себе анимация на сайте выглядит очень красиво и создает приятное впечатление, но если переборщить с ее количеством и оптимизацией — не выйдет ничего хорошего, уверены эксперты. Пример избыточной анимации Алексей Шевцов из WebProfy увидел на сайте «Зарулем.рф», а Глеб Железин из Nectarin — на сайте израильской больницы «Ассута». В таких случаях владельцам сайта следует половину анимированных элементов вообще убрать.

«Часто можно встретить ситуацию, когда буквально каждый элемент на странице анимирован. Но за сомнительной красотой скрывается проблема отвлечения пользователя от основного — контента. Так или иначе, пользователь будет отвлекаться на анимацию, и его концентрация на вашем продукте будет ниже», — уверен Железин.

5. Многобукв

Не нужно показывать людям больше информации, чем они в состоянии воспринять, советует Алексей Шевцов. Когда клиент хочет рассказать обо всех своих услугах одновременно, это приводит к тому, что пользователь не в состоянии быстро сориентироваться и принять решение. То есть для того, чтобы сделать ресурс эффективным, следует не перенасыщать. Как это сделали, например, туроператор «Балкан» и сайт об отелях на русском языке TopHotels, а наоборот, ограничивать пользовательский выбор.

Когда информации на сайте слишком много, клиент достигает обратного эффекта: человек видит сразу все, но на деле ничего не различает. Страницу эксперты советуют делать длиной в несколько экранов и не использовать контент-боксы внутри страницы, чтобы к проблеме избыточной информации не добавлять еще и «эффект сюрприза» (до клика не известно, нужен ли пользователю этот контент), как это сделал, к примеру, на своем сайте туроператор Tez Tour.

Алексей Шевцов, арт-директор WebProfy (Kokoc Group)


Важно определить приоритеты. Люди приходят на сайт, чтобы совершить некую последовательность действий. Она должна быть продумана на этапе разработки ресурса. Каждый раз, рисуя user path, конструктор делает предположение о том, какие именно детали могут понадобиться пользователю и именно их расставляет на виду. Не каждое предположение оправдывается, но не делать их совсем — ошибка. Так, сайт туроператора Pac Group предлагает пользователям самостоятельно решать свои проблемы.

Если большой объем информации все же неизбежен, нельзя смешивать разные ее типы. Не стоит применять один и тот же стиль оформления к новостям, акциям и рубрикатору или делить новости на несколько одинаковых на вид категорий. Отделить нужные данные в этом случае становится довольно трудно, как на сайте другого туроператора ICS Group.

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

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

6. Тупиковый сценарий

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

Дарья Сушкова, старший проектировщик веб-разработчика DEFA


Неприятная вещь на сайте «Utair»: если выбрать даты, на которые нет рейсов, сервис выдает сообщение об ошибке. При этом мы оказываемся на пустой тупиковой странице без каких-либо подсказок, какие даты стоит выбрать, чтобы рейсы всё-таки нашлись.

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


Александр Ковальский, руководитель и креативный директор агентства Creative People


Весь современный подход uix/ui строится на том, что мы одинаково хорошо должны отвечать как на глобальные вопросы (куда я попал? как мне это может помочь? и т.д.), так и на частные (когда речь идет о конкретном сценарии формы или кнопки). Чаще всего аудитория разная, потребности разные, но если это не бесхребетный лендинг, а нормальный сайт — ему нужна навигация. Понятная навигация. Звучит слишком просто и банально, но большое количество огромных сайтов спотыкаются именно об этот момент.

Главный грех компании-разработчика до сих пор в моде: спроектировать структуру сайта громоздкой, запутанной, без четких сценариев.

7. Большой выбор продуктов

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

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

Пример, на который стоит равняться — сайт заграничного VDS-хостинга DicitalОcean, наглядно отражающий один из трендов последних лет — довольно однообразное, но тем не менее эффективное оформление продуктовых страниц или страниц с выбором подписки в виде карточек (их удобно сравнивать).

5 типичных ошибок интернет-магазинов

1. Отсутствие реакции интерфейса на добавление товара в корзину: кнопка уже добавленного товара никак не меняется. Сайт магазинов бытовой техники «Сеть техники» лучший тому пример (должна измениться, как минимум, надпись — «в корзине»). Иногда блок корзины не показывает наличия и количества добавленного в нее товара, как на сайте интернет-магазина техники «Позитроника».

2. Отсутствие функции покупки в один клик, покупки без регистрации, а также форма регистрации и оформления заказа с лишними для его выполнения полями. Издательский дом «Питер» при покупке электронной книги зачем-то требует в обязательном порядке контактный телефон и ФИО.

3. Неадаптивный к опечаткам и вводу в неправильной раскладке поиск, как на сайте интернет-гипермаркета Dostavka.ru.

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

5. Отдельного упоминания по степени «неюзабельности» заслуживают сайты большинства образовательных учреждений, особенно высших, часто имеющих объемную и запутанную структуру (cайт Российского университета дружбы народов, сайт Северного (Арктического) федерального университета имени М.В. Ломоносова и другие) и дошкольных, ввиду перегруженности декором, анимацией, флэшем и прочими «приправами» в котлах ада для дизайнеров (сайт детского сада в г.Белово, сайт московский центр развития личности «Лана»)

Ольга Круглова, арт-директор «ТриЛан».

8. Трудности при поиске и анализе «ошибок»

Важный аспект в работе сервисов, связанных с онлайн-платежами — это корректная обработка ошибок и уведомление пользователей. Например, на сайте авиакомпании «Победа» при оплате билета сервис не сообщает, прошел платеж или нет. На сайте той же авиакомпании, отмечает Дарья Сушкова, старший проектировщик веб-разработчика DEFA, невозможно быстро узнать максимальный размер и вес багажа (меж тем, компания имеет жесткие ограничения на его провоз).

«Для этого, во-первых, нужно переходить на страницу «Правила перевозки», во-вторых, найти на ней нужную информацию не так-то просто. Поиска на странице нет, а все блоки информации спрятаны под «плашками», которые нужно по очереди разворачивать, чтобы либо прочитать содержимое каждого из блоков, либо воспользоваться ctrl+f в браузере. Глобального поиска на сайте также нет», — уточняет Сушкова.

Довольно часто получается так, что плохой с точки зрения юзабилити сайт имеет хороший дизайн и даже получает за него награды. За примерами можно обратиться на специализированный портал о наградах в области дизайна сайта и веб-разработки http://www.awwwards.com, советует Григорий Коченов, креативный директор интерактивного агентства AGIMA.

«Иногда надо долго ходить по сайту, который получил статус «Site of the day», просто чтобы понять, зачем он и про что. Зато графика хорошая и визуально они сделаны идеально. Но смысла мало, или смысл дизайна в самом дизайне, тогда все хорошо, но все равно непонятно», — уточняет Коченов.

Григорий Коченов, креативный директор интерактивного агентства AGIMA


Мне больше нравятся примеры того, как плохой, немодный и несовременный дизайн являются настоящим Дизайном с большой буквы.

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

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

Сайт разнообразного рода электронных объявлений, пользующийся большой популярностью у американских пользователей интернета Graiglist.org — идеальный пример того, как дизайн 90-х живет сейчас и приносит хорошие деньги. И ему не нужен редизайн. Он убьет атмосферу и этот уникальный дух ресурса. И что еще важнее, убьет все пользовательские привычки и сценарии, к которым миллионы человек привыкли почти за 20 лет.

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

Эксперты сходятся во мнении, что есть и удачные примеры юзабилити сайтов, отвечающие всем выше перечисленным критериям. Среди таких, например, отличились сайты Skyscanner.ru и TuTu.ru, сервисов поиска и сравнения цен авиабилетов, отелей и проката автомобилей. Сайты Skyscanner и TuTu одновременно решают бизнес-задачи и удобны с точки зрения пользователя.

Константин Нефедов, управляющий партнер digital-агентства Далее


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

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

5 самых распространенных ошибок юзабилити сайтов

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

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

В этой статье мы разберем 5 основных ошибок, которые мешают быть сайту удобным для пользователей. И покажем решения как сделать, чтобы ваш потенциальный клиент как можно скорее был готов нажать кнопку «заказать».

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

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

Выявлено 5 самых распространённых ошибок в юзабилити, которые не следует допускать

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

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

ОШИБКА 1: НЕУДОБНЫЕ МНОГОУРОВНЕВЫЕ МЕНЮ

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

РЕШЕНИЯ как исправить проблему непопадания в нужный пункт:
  1. Реализовать меню следующим образом: при наведении мышки «выезжает» полностью весь раздел. Так как это, одна прямоугольная область, то пользователю менее сложно не попасть на нужный пункт и выйти за рамки меню. В такой этой реализации есть еще одно очевидное преимущество – это видимость одновременно всех пунктов.
  2. Если всплывшее меню на вашем сайте активно в течение некоторого промежутка времени, это время активности можно увеличить. В этом случае, вы дадите пользователю больше времени, и он успеет выбрать в меню нужный пункт.

ОШИБКА 2: НЕПОНЯТНЫЕ ЗАПУТАННЫЕ КАТЕГОРИИ

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

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

РЕШЕНИЯ как сделать категоризацию понятной для большинства пользователей:
  1. Наилучший способ – это протестировать. Попросить несколько пользователей найти на сайте определённый товар или нужную информацию, не используя поиск по сайту. Количество тестирований с разными пользователями проводить столько раз, пока не будет найден самый быстрый путь нахождения искомого.
  2. Можно воспользоваться при создании и изменении структуры сайта такими полезными сервисами, как TreeJack и OptimalSort . Первый помогает в тестировании выбранного варианта категоризации и показывает, насколько успешно вам удалось справиться с задачей. Второй лучше всего использовать на стадии планирования, он реализован как способ сортировки карточек.

Юзабилити сайта — практические рекомендации

Вам нужен хороший современный сайт и выбираете исполнителя?

Тогда не теряйте время, напишите нам прямо сейчас!

Оставить заявку

ОШИБКА 3: ОТСУТСТВИЕ ИЛИ НЕКОРРЕКТНАЯ РАБОТА ПОИСКА НА САЙТЕ

Поиск по сайту – очень важный элемент юзабилити сайта. Однако многие пренебрегают им. Около 10% пользователей постоянно пользуются поиском. Даже если внутренний поиск на сайте есть, часто с ним связаны следующие четыре проблемы:

  1. Поиск не учитывает морфологию языка, опечатки и дефисы
  2. Поле для ввода поискового запроса не достаточно велико
  3. В результатах поиска выдается информация не связанная с искомой
  4. 4В результатах поиска отсутствует сортировка по важности.
РЕШЕНИЯ: как улучшить выдачу результатов внутреннего поиска
  1. Для исправления, сначала необходимо протестировать, как работает ваш поиск. Результаты дадут вам картину того, что получают ваши пользователи.
  2. Затем используйте сервис «Яндекс.Поиск для сайта» — он решит проблему опечаток и учёта морфологии.
  3. Далее необходимо поменять критерии сортировки и настроить вывод первыми более релевантных ответов. Таким образом, проблема выдачи релевантных ответов будет решена. 

ОШИБКА 4: ВНЕШНИЙ ВИД ССЫЛОК НА СТРАНИЦАХ САЙТА

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

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

РЕШЕНИЯ: как визуализировать ссылки чтобы повысить их распознаваемость
  1. Делайте текст ссылки цветным и используйте подчёркивание
  2. Не используйте подчёркивание, если текст не является ссылкой
  3. Применяйте для ссылок разные цвета: один цвет для тех страниц, на которых посетитель уже был и другой цвет – для тех страниц, на которых ещё не был
  4. Не используйте эффекты при наведении мышки на ссылку, чтобы не вводить в заблуждение
  5. Не используйте для текста ссылок шрифт меньшего размера, чем остальной текст

ОШИБКА 5: СКУЧНЫЙ КОНТЕНТ

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

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

РЕШЕНИЯ: как сделать сайт интересным

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

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

Даже если вы только начали свой бизнес в Интернете, и пока не можете заказать аудит юзабилити сайта и полномасштабное тестирование. У вас всегда есть возможность попросить нескольких своих знакомых с еще «не замыленным» взглядом «прогуляться» по сайту, дать ему свою оценку и выполнить то или другое целевое действие.

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

← Поделиться с друзьями !

37 ошибок юзабилити, или Почему клиенты не любят ваш сайт

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

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

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

Что не нравится клиенту, когда он…
…смотрит на сайт:

1. Изобилие рекламы. Всем нужно зарабатывать, но когда под слоем рекламы не видно содержания, показатель отказов стремится к максимуму.

2. Некорректная верстка. Если вы используете Firefox, не считайте, что все остальные делают так же. Существует (о, ужас) множество любителей Internet Explorer, которые также желают видеть ваш сайт во всей красе, а не в формате «меня перекосило». Тестируйте площадку в разных браузерах.

3. Анимация и прочее мигание. Движущиеся картинки, как правило, раздражают людей. Как минимум, не размещайте больше одного анимированного элемента на странице.

4. Всплывающие окна (pop-up). Это те самые баннеры, которые неожиданно раскрываются при загрузке «нужной» страницы. Поп-апы не любят не только пользователи, но и поисковые системы. Уничтожайте их.

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

6. Разнообразие дизайна. Если каждая страница веб-ресурса представляет отдельный дизайнерский шедевр, вашему клиенту будет сложно сориентироваться. Исключение – креативные «сайты ради сайтов» и специализированные брендированные страницы. Вы планируете продавать товар или услугу? Соблюдайте единство дизайна, это облегчит жизнь вашим клиентам.

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

8. Кнопки-ссылки на сторонние ресурсы в подвале сайта. Это классический «привет из 90-х», когда веб-ресурсы в основном раскручивались за счет обмена ссылками. В современном мире смотрится странно и немного «дешево». Плюс, уводит ваших посетителей на другие сайты.

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

…перемещается по сайту:

10. Дополнительная навигация. На сайте допустимо два меню – основной каталог и меню полезных страниц (о компании, контакты, оплата и доставка). Каждое новое меню путает пользователя. Запутавшийся клиент – потерянный клиент.

11. Отсутствие указателя «Вы здесь». Подобными указателями служат «хлебные крошки» (навигационная цепочка, представляющая путь пользователя от корня сайта до текущей страницы) и выделение цветом активного пункта меню.

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

13. Отсутствие функциональной страницы 404-й ошибки. Даже если вы пропустили мертвую ссылку на собственном сайте, постарайтесь мотивировать пользователя вернуться на ресурс после посещения несуществующей страницы. Оптимальный вариант – страница ошибки, выполненная в общем дизайне сайта, содержащая полезные навигационные ссылки. Для того чтобы нивелировать негатив клиента, можно обратить ошибку в шутку. А многие интернет-магазины предлагают приятные бонусы своим посетителям в качестве компенсации за доставленные неудобства.

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

15. Очень мелкие кликабельные элементы. Если вы планируете переход по ссылке, продумайте также возможность для пользователя по этой ссылке попасть. Часто встречающиеся на сайтах активные ссылки «Отзывы» или «Комментарии», набранные исключительно мелким шрифтом, вызывают негодование.

16. Использование внутренней прокрутки на сайте. Особенно, если речь идет о горизонтальной прокрутке. Ваш сайт обязан помещаться в экран пользователя.

17. Медленная загрузка страниц. Никто не будет ждать, когда ваш сайт соизволит загрузиться, клиенты уходят к более быстрым.

…читает на сайте:

18. Орфографические и грамматические ошибки. Наличие подобных недочетов вызывает сомнения в вашем профессионализме.

19. Нечитаемый шрифт. Очень мелкие буквы, очень яркие буквы, очень бледные буквы. Заботьтесь о людях с плохим зрением и не провоцируйте пользователей с хорошим присоединиться к первым.

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

21. Узкая колонка текста. Категорически неудобно для чтения. Особенно, если колонка сопровождается пустотой или множеством баннеров по бокам.

22. Некачественные иллюстрации к текстам. Лучше промолчать, чем сказать глупость. Так же и с картинками – если у вас нет в наличии красивой и качественной фотографии, лучше обойтись без иллюстраций.

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

24. Мертвые новости на сайте. Традиционная ошибка всех корпоративных сайтов. Вы приходите на ресурс, он вполне себе внушает вам доверие, но сейчас 2012 год, а в разделе «Новости» висит сообщение о том, что лучшим менеджером по продажам стала госпожа Пупкина, датированное 2008 годом. И сразу рождается мысль, а что происходило с компанией после пресловутой победы Пупкиной? Не развалилась ли она окончательно (компания, а не Пупкина)? Правило простое: если у вас не бывает интересных для пользователей новостей, уберите соответствующий раздел с сайта.

…совершает транзакцию на сайте:

25. Отсутствие поиска. Если человек пришел на ваш сайт с конкретным вопросом, а вы не подумали предоставить ему возможность найти ответ, вы правда думаете, что он решит остаться с вами надолго?

26. Нет мотивирующего слова «О проекте». На главной странице желательно не просто показать клиенту, что у вас есть, но и коротко убедить его в том, почему стоит покупать именно у вас.

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

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

29. Необходимость регистрация для совершения полезного действия. Если пользователь хочет купить у вас товар, не стоит создавать ему дополнительные препятствия. Путь к покупке должен быть простым и приятным. Если пользователь дошел до корзины дайте ему возможность выбора – регистрации с созданием личного кабинета или оформления быстрого заказа без регистрации.

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

31. Не выводятся предупреждения о долгих операциях. Если сложный поиск по базе товаров вашего сайта занимает длительное время, сообщите об этом вашему клиенту. Для того чтобы он не думал, что у вас «все зависло и умерло».

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

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

34. Капча. Это вселенское зло, особенно, если она представляет собой нечитаемое месиво иностранных букв. Замените капчу в комментариях к статьям премодерацией и уж точно уберите ее из формы заказа в интернет-магазине. Лучше получить несколько спам-заказов, чем потерять реального клиента, не совладавшего с вашей системой защиты от ботов.

35. Отсутствие письма с подтверждением получения заказа. Идеальный интернет-магазин сообщает клиенту о получении заявки при помощи электронной почты, продублировав на e-mail информацию о ней. В дальнейшем это позволит клиенту в любой момент выяснить судьбу своей будущей покупки, просто назвав оператору колл-центра номер заказа.

36. Отсутствие явно видимой контактной информации. Сделайте коммуникацию двухсторонней. Пользователь должен иметь возможность оперативно связаться с вами любым удобным ему способом (телефон, электронная почта, скайп, онлайн-консультант и прочее).

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

Сделайте свой сайт радующим! И избегайте бегущей мигающей строки.

Мастер-класс: Почему уходят клиенты? 12 ошибок юзабилити, которые надо срочно исправить!

Анастасия Бадина, ведущий специалист по поисковому продвижению холдинга Ingate

Работает в сфере SEO с 2008 года. Продвигала сайты таких компаний, как РОСНО, МИАН, МФ Мария, Philips, Neotech и других. Регулярно выступает на профильных вебинарах и конференциях.

Посетитель решил купить товар на вашем сайте, но в последний момент передумал. Знакомая ситуация? Самое страшное для любого владельца сайта – это потерять “на последнем шаге” уже принявшего решение покупателя. И чаще всего причина этого – ошибки юзабилити.

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

1. Проблемы с корзиной

Не стоит устраивать из поиска корзины тест на сообразительность для посетителя – это может стоить вам заказов.

Корзина должна располагаться на каждой странице интернет-магазина и постоянно присутствовать в поле зрения пользователя. Наиболее распространенное положение корзины на странице – правый верхний угол. Именно там большинство посетителей привыкли ее видеть. Когда пользователь нажимает на кнопку “Купить/Положить в корзину”, он должен четко понимать, что действие произошло: товар добавлен в корзину, и он может или продолжить покупки дальше, или же перейти к оформлению заказа.

Например, в одном интернет-магазине это реализовано следующим образом:

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

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

2. Неработающий функционал

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

3. Неэффективные формы на сайте

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

  • Отсутствие автосохранения данных. Знакомая многим ситуация при заказе авиабилетов через интернет: пользователь тщательно заполнил длинную форму, ввел данные о паспортах, датах вылета и прилета, но в одном из многих пунктов ошибся – в итоге теряется вся информация, заполняй форму заново! Не у каждого хватит терпения на это, и кто-то просто уйдет на другой сайт.
  • Отсутствие механизмов ввода стандартных данных, например, города или даты. В итоге пользователи вынуждены вводить данные вручную и велика вероятность ошибки или неверного формата данных. К примеру, дату можно написать разными способами: 27 марта 2012 года, 27/03/2012, 27.03.12 и т.д. Предоставьте пользователям удобную возможность выбрать дату из календаря, а город из выпадающего списка с городами.
  • Отсутствуют подсказки рядом с неочевидными полями для заполнения.
  • Отсутствуют сообщения об ошибках при неправильном заполнении полей. Например, пользователь ошибся при заполнении формы. Сообщение об ошибке есть, а вот где именно надо поправить информацию, не ясно.
  • Форма имеет слишком много лишних и необязательных полей, что сильно уменьшает желание пользователей взаимодействовать с ними. В качестве примера приведу форму расчета стоимости кухни. Заголовок “Быстрый расчет кухни” выглядит явной издевкой над пользователем. Сложно поверить, что такую многовариантную форму удастся заполнить быстро. Неизвестно, у всех ли пользователей (многие из которых выбирают кухню впервые и не знают ответа на некоторые вопросы, которые задаются им в форме) хватит желания и терпения заполнять такую форму:

Чтобы найти проблемные места в формах на своем сайте, используйте Яндекс.Метрику. Здесь есть инструмент “Аналитика форм”, который состоит из двух частей: схематичной воронки конверсии формы и непосредственно аналитической части, с помощью которой можно узнать, какие поля ваших форм не заполняются пользователями, а какие даже заставляют прекратить заполнение формы и покинуть сайт:

  • Используется сложная Captcha (система защиты от спама). В идеале никаких капч при заказе товара быть не должно – зачем проверять человека, который уже готов расстаться со своими деньгами и приобрести ваш товар?

4. Недостаточная контактная информация

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

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

Постарайтесь предоставить пользователю максимальную контактную информацию:

— телефон,

— адрес,

— электронная почта, skype, ICQ (пусть пользователи сами решают, как им удобнее будет с вами связаться),

— карта проезда,

— время работы офиса.

Сориентироваться на месте покупателям обязательно помогут фотографии вашего офиса.

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

5. Нет информации о доставке и оплате или она непрозрачная

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

Приведу пример того, как делать не надо. Это “математический квест”, где пользователю предстоит самостоятельно рассчитать стоимость многовариантной доставки:

А вот как можно было бы сделать, чтобы пользователям было удобнее:

6. Некачественные изображения товара

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

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

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

7. Нечитабельный текст

Насколько легко воспринимаются тексты на вашем сайте? Чтобы понять это, ответьте на несколько вопросов:

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

Если хотя бы на один из этих вопросов вы ответили: “Да”, — ваш текст, скорее всего, тяжело воспринимается пользователями.

8. Нарушение кроссбраузерности

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

9. “Портянкам” — нет, структурированным текстам – да!

Если вы не владелец “Википедии” или иного информационного портала, то будьте готовы к тому, что длинные и пространные описания товара и ваших преимуществ пользователи читать не будут.

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

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

10. Неочевидные названия сервисов и пунктов меню

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

Например, данный сервис расчета стоимости перевода замаскирован под некую “Игру”:

Те пользователи, которым нужен расчет перевода, могут и не найти его на сайте, решив, что его нет. Задумайтесь, что вам важнее – клиенты или оригинальность названия?

11. Орфографические ошибки в текстах

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

12. Отсутствие поиска или его некорректная работа

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

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

Плюсом будет предоставление пользователям расширенного функционала поиска по каталогу товаров/продукции.

Заключение

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

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

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

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

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