ТОП-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. «Многотекстаибукв»

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

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

11 примеров ошибок дизайна сайта

По данным портала dev.by, в целом по Беларуси в отрасли «Компьютерных и информационных услуг» насчитывается более 930 компаний.

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

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

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

---

1. Крошечные кликабельные области

---

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

Гиперссылки, неудобные для нажатия

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

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

<a href="http://www.examplesite.com">

---

2. Пагинация используется не по назначению

---

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

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

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

Использование пагинации не по назначению приводит к 2 основным проблемам:

1. Это действительно раздражает! Кому нравится загружать несколько страниц просто для того, чтобы прочитать одну статью? Таким образом создается барьер для посетителей сайта, которые покинут его после первой или второй страницы.
2. Вторая причина связана с SEO (поисковой технической оптимизацией). Поисковые системы анализирует содержимое на страницах, чтобы понять, о чем она, а затем индексируют ее соответствующим образом. Если же контент разбивается на несколько страниц, то каждая отдельная страница имеет все меньше смысла сама по себе и содержит меньше ключевых слов по конкретной тематике. А это негативно влияет на рейтинг страницы в поисковой выдаче.

---

3. Дизайн выглядит как навязчивая реклама

---

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

Дизайн выглядит как навязчивая реклама

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

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

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

---

4. Разрешение экрана

---

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

Сколько бы ни говорили о креативности, оригинальности и уникальности, такой подход – абсолютное табу в современном веб-дизайне.

Горизонтальная прокрутка усложняет навигацию

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

---

5. Фоновая музыка

---

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

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

Кроме того, не существует такого проигрывателя, который подошел бы под все браузеры. Тот, который будет работать в Google, не подойдет, например, для Opera или Mozilla. А если код с проигрывателем не прогрузится, то будет отображаться пустое место, что вряд ли хорошо повлияет на дизайн вашего сайта.

---

6. Повторяющиеся заголовки страниц

---

Названием страницы является фрагмент текста, который пишется между тегами <title></title> в разделе <HEAD> HTML-кода.

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

• Хорошее название помогает пользователям понять содержание страницы

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

• Оптимизация заголовка для поисковых систем

Поисковым системам нужна разная информация для ранжирования результатов конкретного запроса.

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

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

---

7. Контент, который трудно понять

---

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

Контент трудно понять

Текст трудно воспринимать из-за обилия шрифтов и цветов

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

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

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

Вот несколько советов:

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

---

8. Нет возможности для коммуникации

---

Участие пользователей важно, если вы хотите построить успешное сообщество. А сообщество имеет большое значение, если вы хотите создать успешный веб-сайт.

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

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

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

---

9. Отсутствие поиска

---

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

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

Реализовать окно поиска на сайте достаточно легко.

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

---

10. Длинная форма регистрации

---

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

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

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

Длинная форма регистрации

---

11. Постоянная ссылка, ведущая в никуда

---

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

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

301 редирект является своеобразной инструкцией, хранящейся на сервере, которая перенаправляет посетителей на новые соответствующие страницы. Так что, если кто-то зайдет на сайт, используя старую ссылку, он не будет видеть страницу «ошибки 404» («Страница не найдена»): 301 редирект автоматически перенаправит в нужное место, при условии, что он установлен правильно. Код ответа сервера «301 Moved Permanently» обозначает тип перенаправления – постоянное.

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

Поэтому для устранения проблем и ошибок лучше всего обратиться за помощью к профессионалам в Usability аудите сайта и редизайне WEB сайта.

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, то все основные элементы сразу же вынесены на главную не перегруженную лишним страницу, а покупку уже можно совершить на следующей экране, перейдя по ссылке на партнерский сервис. То же самое в случае и с ТуТу — все нужное сразу под рукой на первом экране, а на втором — уже возможна покупка.

Десять ошибок юзабилити: публикации CASTCOM

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

1. Очень плохо заметная ссылка авторизации на сайте (log-in)

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

А для тех кто решил не тратить свое время на поиски – ссылка для авторизации «Log-in» находится по центру страницы в желтом прямоугольнике. Так задуман веб дизайн данного сайта. Правда, не особо хороший вариант её расположения?!

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

2. Всплывающие окна (pop-up) для отображения в них контента

На данный момент практически у всех современных браузеров, таких как Firefox, Safari, Opera и Internet Explorer, есть « штатный блокировщик», который занимается блокировкой всплывающих окон, рекламных баннеров и всего того, что похоже на явную рекламу. Поэтому использовать поп-апы для отображения контента бессмысленно и не разумно.

Adidas все-таки решил воспользоваться данным подходом на своем сайте (ImpossibleStory.com), вследствие чего, большая часть аудитории перестала посещать его. Мало кому нравиться постоянно отключать блокировщика ради просмотра сайта.

3. Замена скроллинга и нового способа реализации меню перемещением элементов при помощи перетягивания курсором мыши

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

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

4. Неотличимые от обычного контента ссылки

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

Такого как на этом сайте не должно быть ни в коем случае RealPlayer.

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

Не допускайте в контенте перенасыщение информацией веб-страниц сайта. Примером данной ситуации послужит сайт Overstock.

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

6. Блокировка браузера до тех пор, пока пользователь не выполнит требования предъявляемые на сайте

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

Что самое интересное, ничто не помогает:

• Ни «cancel»

• Ни «ok»

• Ни то, что вы пытаетесь свернуть или развернуть изображение

• Ни клик вне модального окошка

• Окно не закрывается

• Клик по иконке «?» так же не срабатывает

Очень неприятная ситуация сложившаяся всего лишь по той причине что вы чем то заинтересовались…

7. Один слой сайта «наползает» на другой

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

Подобной проблемой страдает и Yahoo.com.

8. Динамическая навигация

Очень симпатично и оригинально, не так ли?!

На самом деле это очень неудобно.

9. Выпадающие меню

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

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

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

Примером тому могут послужить 2Advanced и Brita.net.

10. Мигающие изображения

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

Превосходное издание Digital Web Magazine, допустил эту досадную ошибку, разместив в левом сайдбаре страниц сайта анимированный рекламный блок.

Интересный эксперимент или ошибка будущего?

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

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

Юзабилити сайта: типичные ошибки и рекомендации по улучшению

Термин «usability» с английского переводится как «эргономичность», то есть удобство в использовании. Это одно из самых важных условий качества и эффективности сайта. Юзабилити –система организации максимально удобной для посетителей информационной структуры сайта. Каждый человек, заходящий на сайт, должен просто и быстро найти нужную для себя информацию – эту задачу и решает юзабилити. В этом очень важную роль играет дизайн ресурса, интерфейс, навигация, текстовое оформление и т.д.

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

На что влияет юзабилити?

Глобально – на успех сайта. Юзабилити нужно уделить должное внимание прежде, чем вкладываться в рекламу и продвижение. Иначе это неэффективно. От того, насколько качественно проработано usability, будут зависеть такие показатели сайта:

1. Уровень конверсии.
2. Показатели отказов.
3. Количество повторных продаж.
4. Затраты на техническую поддержку сайта.

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

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

Основные ошибки в юзабилити

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

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

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

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

Советы по улучшению usability

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

Размещение важной информации на главной странице

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

• Проходящих сейчас акциях;
• Популярных товарах;
• Конкурентных преимуществах компании.

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

Указание алгоритма действий

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

Создание простой навигации

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

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

Быстрая загрузка страниц

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

Всегда актуальные данные о товаре

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

Еще один хороший ход – сообщать о количестве единиц товара на складе. Это дополнительно мотивирует к совершению покупки.

Оптимизация корзины

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

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

Добавить похожие товары

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

Когда нужна проверка юзабилити сайта

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

Проверку юзабилити обязательно нужно проводить в таких случаях:

1. Перед запуском проекта.
2. Для увеличения уровня конверсии.
3. При добавлении новых функций на сайт.

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

Почему снижается конверсия сайтов? Примеры 60 ошибок в дизайне и юзабилити / Хабр

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

В этой статье мы рассмотрим примеры основных UX ошибок и выделим шестьдесят распространенных проблем, исправление которых гарантирует рост конверсии.

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

Как Вася выбирал микрофон в интернет магазине с плохим юзабилити

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

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

За счет продуманной навигации Вася не растерялся и быстро нашел категорию «Микрофоны».

Когда Вася открыл категорию «Микрофоны», то сразу столкнулся с первой проблемой в виде непродуманного рубрикаторного фильтра. Этот фильтр не подходит для новичков, поскольку требует понимания микрофонной тематики. Без этого сложно:

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

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

В рубрике студийных микрофонов Вася расставил товары по возрастанию цены и остановил свой выбор на микрофоне Superlux HO8 за 50 $. Это самый бюджетный вариант из доступных студийных микрофонов и по отзывам покупателей стоит своих денег. То есть то, что нужно для начинающего ютубера. Вася оформляет покупку и уже договорился с заказчиком на озвучку первого видеоролика.

Выбор Васи — микрофон Superlux HO8 стоимостью 50 $.

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

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

Далее Вася начал самостоятельно собирать информацию о выбранном микрофоне и выяснил следующие нюансы:

1. На сайте этого же интернет-магазина самая дешевая установка фантомного питания ZEEPIN 48V. Она стоит около 37 $ и доступна только по предзаказу. Стоимость более дорогих установок начинается от 65 $.
2. Помимо фантомного питания к микрофону Superlux HO8 нужно приобрести стойку и поп-фильтр. Еще не помещает внешняя звуковая карта и акустический экран для подавления лишних шумов. Все вместе это еще не менее 100 $.
3. Вместо всего перечисленного можно было приобрести бюджетный USB-микрофон, который смог бы удовлетворить потребности начинающего ютубера. Например, за 50 $ можно приобрести Trust GXT 232; а за 85 $ — Blue Microphones Snowball iCE.

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

Установка фантомного питания ZEEPIN 48V за 37 $.

Чтобы избежать потери клиента, владельцу интернет-магазина стоило посмотреть на свои товары с позиции новичка и сделать ставку на образовательный контент — ко всем сложным продуктам добавить подсказки, полезные статьи или видео. Если бы Вася своевременно узнал о фантомном питании, то не купил ненужный ему товар: он бы перешел на страницу с микрофоном Superlux HO8 → из открывшихся подсказок узнал про фантомное питание → перешел бы на статью, где подробно рассказывается про фантомные установки → изучил материал про разновидности микрофонов → вернулся бы к списку микрофон и выбрал из доступных предложений оптимальный вариант с USB-разъемом. Все бы остались довольны и продолжили сотрудничество. А так обида и уход к конкурентам.

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

Техническая часть

Низкая скорость загрузки

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

Долгая загрузка сайта.

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

Тяжёлые файлы картинок.

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

Большое количество запросов во время загрузки страницы.

В Amazon провели исследования и посчитали, что если скорость загрузки сайта падает хотя бы на 100 мс, то конверсия продаж сразу снижается на 1%. Чтобы этого не допустить — владельцам сайтам рекомендовано проводить два типа тестов. Первый тест должен проводиться в реальном времени и по нему можно сразу вычислить медленные страницы. Второй тест должен быть периодическим (раз в неделю или месяц) и по его результатам можно исправлять все медленные элементы.

Неработающие или битые ссылки

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

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

Битые ссылки в программном коде.

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

При открытии страницы в новом окне.

Ошибка 404

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

Не оптимизированная страница 404

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

Следите за тем, чтобы страница 404 не была скучной и пустой.

Чтобы оптимизировать страницу 404 — придерживайтесь следующих рекомендаций:

1. Кратко опишите, куда попал человек и почему он здесь.
2. Разместите ссылку на главную страницу сайта.
3. Разместите ссылки на популярные разделы сайта.
4. Попросите пользователя сообщить об ошибке администратору сайта.
5. Заморочьтесь с дизайном и сделайте так, чтобы 404 страница была оформлена в том же стиле, что и весь сайт.

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

Плохо реализованная горизонтальная прокрутка

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

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

Отсутствие адаптивной верстки

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

Сайт без адаптивной верстки.

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

Сайт не настроен под сверхчеткие Ultra HD мониторы

В 2019 году большинство сайтов ориентируются на мониторы с двумя типами разрешений: HD и Full HD. В HD-экранах плотность пикселей составляет 1366×768 — это самые бюджетные мониторы, которые постепенно утрачивают свою популярность. В Full HD-экранах плотность пикселей составляет 1920×1080 — это самые популярные мониторы, на разрешение которых ориентируются большинство разработчиков при настройке адаптивного верстки.

Вместе с HD и Full HD-мониторами набирают популярность экраны с Ultra HD-разрешением (4К мониторы). В Ultra HD-экранах плотность пикселей составляет 3840×2160 — это позволяет достигать сверхчеткой картинки с детализированным показом мельчайших деталей на сайте. Также уже можно купить 8К монитор, где плотность пикселей составляет 7680×4320.

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

Нерабочий поиск на сайте

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

Неправильный приоритет в поисковой выдаче.

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

Ненастроенное автосохранение в корзине заказов

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

Все сильно меняется, если пользователь совершает много покупок. В этом случае отсутствие автосохранения может привести к потере клиента.

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

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

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

Проблемы с версткой

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

Пример слетевшей верстки: жмете на форму для заполнения → экран автоматически возвращается в исходное верхнее положение.

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

Пример слетевшей верстки: иконки соцсетей налезают на текст страницы.

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

Пример слетевшей верстки: некорректное отображение текста в адаптивной версии сайта.

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

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

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

Некликабельные кнопки

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

Пример некликабельных кнопок: не работают кнопки «Купить в кредит» и «Купить в 1 клик».

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

Пример некликабельных кнопок: не работают фильтры для оценки или окончательного выбора альтернативных цветовых решений.

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

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

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

Пример некликабельных кнопок: некликабельный баннер на главной странице.

В примере баннер не только некликабельный, но и составлен без призыва к действию. Чтобы это исправить — достаточно добавить работающие кнопки «Перейти» или «Подробнее».

Некликабельная корзина товаров

Корзина товаров — это привычное место, куда посетители интернет-магазина заходят перед подтверждением заказа. Если значок «Корзина» сделать некликабельным, то многие пользователи не захотят разбираться с непривычным функционалом и совершат покупку в другом месте. Чтобы этого избежать — не экспериментируйте с корзиной товаров и всегда делайте ее значок кликабельным. И еще момент: не используйте вместо слова «Корзина» другие креативные названия. Есть риск, что на «Тележку», «Склад» или «Лукошко» пользователи не кликнут.

Самостоятельный запуск аудио и видеофайлов

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

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

Логика

Кнопка «гамбургер» в основной версии сайта

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

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

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

Сайт без логотипа

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

Слайдер на главной странице

Стоит учесть, что главную страницу видят 1-5% от всего трафика сайта. Также большинство слайдеров плохо отображаются на мобильных девайсах и сохраняют те же проблемы, что и сайты с горизонтальной версткой. Качественный слайдер делать иногда дорого, а бюджетные варианты сразу портят общее представление о ресурсе: пользователь переходит на сайт → видит неудобный и плохо проработанный слайдер → покидает страницу или начинает изучать страницу с негативным настроем. Чтобы этого избежать — достаточно отказаться от слайдера на главной странице и разложить презентационный материал о сайте с помощью простых дизайнерских решений: текста, графики или видео.

Невыделенные ссылки

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

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

Избыточные анимации

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

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

Отвлекающие элементы

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

Всплывающие окна без кнопки «Закрыть»

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

Раздражающая капча

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

Навязчивые pop-up окна

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

Если делаете pop-up окна — предлагайте в них что-то полезное и настраивайте их так, чтобы пользователь успевал хоть немного изучить содержимое сайта.

Обязательная регистрационная процедура

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

Если хотите безопасно собрать пользовательские данные — просто объясните преимущества регистрационной процедуры и сделайте автоматической, когда происходит первая покупка. Пароль отправляйте на почту.

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

Сложная регистрационная процедура

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

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

Маскировка поля ввода пароля

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

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

Навигация

Ненастроенная пагинация

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

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

Непродуманные сценарии перемещения

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

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

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

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

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

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

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

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

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

Навигация на главной странице

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

Для интернет-магазина, этот пункт меню можно не использовать.

Отсутствует навигация внутри статей сайта

Для больших статей в блог нужна своя навигация. Чтобы ее подготовить — достаточно выполнить два действия:

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

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

Формальная навигация

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

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

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

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

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

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

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

Оформление

Неподходящий дизайн

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

Пример непрофессионального дизайна. Здесь все смешано в одной куче и залито красным фоном.

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

Пример креативного дизайна, когда система фильтров не воспринимаются как фильтры.

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

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

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

Неудобная текстовая колонка

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

Непропорциональные изображения

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

Пример слишком высокого изображения в шапке. Чтобы добраться к контенту — нужно скролить страницу. Проблема решается уменьшением высоты шапки на 50-70%.

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

Пример неправильного распределения элементов в мобильной версии сайта. Первое изображение выпадает из каталога и выглядит больше остальных.

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

Несочетаемый текст и фон

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

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

Пример плохо читаемого текста на иллюстрациях.

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

Пример нечитабельного текста в адаптивной верстке.

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

Непроработанный дизайн текста

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

Это скучная текстовая простыня.

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

Задизайненый текст.

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

Креативное использование ссылок в элементах интерфейса

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

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

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

Неудачное цветовое оформление

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

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

Урок цветовой арифметики.

Если вам не интересно изучать колористику и разбираться с цветовой гаммой — оставьте на сайте белый фон. Этим пользуется Apple и с клиентами все в порядке.

Чрезмерное количество рекламы

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

Непроработанный призыв к действию

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

Пример баннера со слабым призывом к действию.

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

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

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

Пример слабого призыва в подписной форме.

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

Пример поврежденного призыва в адаптивной версии сайта.

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

Пример баннера без призыва к действию и понятного предложения.

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

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

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

Пример некачественной фотографии товара.

Чтобы быстро поднять качество изображений — купите портативный китайский куб для предметной съемки (фотобокс). Это недорогой аксессуар, который придаст всем изображениям вашего интернет-магазина фирменности.

Отсутствие или переизбыток иллюстраций

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

Плохо сверстанные кнопки соцсетей

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

Пример неправильно оформленных кнопок социальных сетей с устаревшим виджетом instagram.

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

Маркетинг

Нет четкого главного предложения сайта

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

Отсутствие гарантий

Гарантия — это признак того, что продавец уверен в товаре и может ручаться за его качество. Возьмем два интернет-магазина, в которых MacBook Air 2018 года продается за 1900 $. Первый магазин работает без гарантий, а во втором срок гарантийного периода составляет 12 месяцев. При таких условиях большинство пользователей совершать покупку во втором интернет-магазине.

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

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

Сложные товары продаются без подсказок

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

Онлайн-чат без менеджера

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

Нет информации о количестве доступного товара

Представьте такую ситуацию: крупная IT-компания открывает новый офис и покупает в него сорок 2К мониторов Dell P2418D. Представитель IT-компании переходит на сайт интернет-магазина → оформляет заказ → получает накладную с указанием точного срока доставки и отталкиваясь от этого срока объявляет сотрудникам о дате начала работы в новом офисе.

Если компании нужно сорок 2К мониторов Dell P2418D, то им важно знать, могут ли они купить такое количество товара в одном месте. Обычно оптовая покупка обходиться дешевле.

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

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

Нет данных о доставке и способах оплаты

Тарифы перевозчиков вместе с комиссией платежных сервисом могут прибавить к первоначальной стоимости заказа до 15%: выбрали товар на 100 $ → получили к оплате 115 $. Из-за этого важно прописывать все службы доставки и все платежные системы, которые поддерживает интернет-магазин:

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

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

Нет письма подтверждения

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

Контент

Проблемы с грамматикой

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

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

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

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

Если расценки и информацию о себе не обновлять, то у клиентов формируется неправильное ожидание: рассчитывали заказать визитки за 100 $, а минимальная цена еще полгода назад выросла до 200 $. Это раздражает, вызывает недоверие и становится стимулом для того, чтобы никогда не пользоваться услугами компании.

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

Некачественный текстовый контент в блоге

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

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

Отсутствие обязательных страниц «О нас» и «Контакты»

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

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

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

Слишком длинное страница товара и/или категории

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

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

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

Есть страница, но нет описания товара

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

Отсутствие описания на странице карточки товара.

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

Непродуманная структура карточки товаров

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

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

Отсутствие заголовков и подзаголовков

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

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

Непродуманные названия заголовков и подзаголовков

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

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

Маскировка полезного контента

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

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

Игнорирование списков

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

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

Что дальше

Шаг №1.

Скачайте чек-лист с перечисленными ошибками в дизайне и юзабилити.

Шаг №2. Проверьте свой сайт и отметьте все моменты, которые нуждаются в улучшении.

Шаг №3. Устраните отмеченные проблемы и замерьте конверсию сайта.

А с какими ошибками в дизайне и юзабилити сталкиваетесь лично вы? Делитесь опытом в комментариях.

Автор: Андрей Чорный, CEO Plerdy.com

10 типичных ошибок коммерческих сайтов с точки зрения юзабилити. Читайте на Cossa.ru

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

Проанализировав 80 роликов, мы составили список типичных ошибок коммерческих сайтов.

Логотипы, названия, описания

Ошибка #1: есть только название компании или ее логотип, но нет описания — чем занимается компания.

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

Видео.

Неудачный пример логотипа #1

Неудачный пример логотипа #2

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

Видео.

Пример слишком общего описания специализации

Ошибка #3: для объяснения сути компании используется слоган. Да, слоганы хороши, если у вашего бренда практически 100% узнаваемость и в головах потребителей уже выстроилась устойчивая цепочка вроде: Just do it — это Nike. Если это пока не так, то рядом с логотипом напишите, что вы предлагаете.

На приведенном ниже примере пользователю было сложно понять, на какой сайт он попал: интернет-магазина или типографии. И слоган «Успех в Кубе» ясности не добавил.

Видео.

Неудачный пример слогана #1

А вот другая — более удачная версия этого же сайта: тут у пользователя проблем с определением тематики сайта не возникло, потому что создатели сайта добавили описание «Московская типография».

Удачный пример: есть и слоган, и описание

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

Например, если в описании сайта написано «Консалтинг», этого не достаточно, чтобы понять, какие услуги предоставляет данная компания:

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

Видео.

Неудачный пример использования терминов #1

Еще один пример: не все знают, что такое vape, лучше дополнительно объяснить. Человек, который пользуется электронными сигаретами, вас поймёт, а обычный курильщик этот термин может и не знать. Такие вещи лучше предусмотреть заранее, потому что вейперы когда-то в прошлом тоже курили обычные сигареты и про vape никогда не слышали.

Неудачный пример использования терминов #2

Ошибка #5: описание сферы деятельности сайта написано не очень заметно.

На приведенном ниже примере слоган написан крупно и «перетягивает» на себя внимание, а описание компании на его фоне теряется.

Видео.

Неудачный пример описания сферы деятельности сайта

А вот пример хорошей первой страницы:

Функционал

Ошибка #6: на первой странице пользователю показываются сразу ВСЕ возможности сайта.

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

Видео.

Неудачный пример функционала

Назойливые Pop-up и электронные помощники

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

Видео.

Неудачный пример Pop-up

При этом Pop-up, конечно, могут быть весьма эффективны, если их грамотно использовать.

На сайте booking.com всплывающее сообщение появляется на странице бронирования и только в том случае, если пользователь нажимает кнопку «Закрыть окно», не заполнив форму бронирования до конца. Цель — мотивировать пользователей забронировать номер.

Хороший пример Pop-up

Почему это всплывающее окно эффективно?

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

Целевые действия. Типичные ошибки

Ошибка #8: целевое действие на первой странице не сформулировано. Например, пользователи прочитали об услугах компании, им всё понравилось, а как заказать услугу — непонятно.

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

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

Видео.

Пример отсутствия призыва к целевому действию

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

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

Видео.

Ошибка #10: целевое действие предлагают совершить слишком рано. Например, пользователь заходит на сайт и сразу же видит кнопку «Записаться на процедуру».

Он ещё не готов это сделать, так как ещё ничего про процедуру не знает. Логичнее показать ему, например, две кнопки: «Узнать подробнее» и «Записаться»: одну для новых пользователей, другую — для более опытных, которые о процедуре уже прочитали.

Видео.

Неудачный пример призыва к действию #1

Неудачный пример призыва к действию #2

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

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

7 распространенных ошибок юзабилити в веб-дизайне

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

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

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

1. Крошечные интерактивные области

Решение: Сделайте кнопки крупнее.

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

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

2.КОМПЛЕКСНАЯ НАВИГАЦИЯ

РЕШЕНИЕ: ВИТРИНА ОСНОВНЫЕ.

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

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

3. ИЗБЫТОЧНАЯ ИЛИ НЕОРГАНИЗИРОВАННАЯ ИНФОРМАЦИЯ

РЕШЕНИЕ: обрезать жир.

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

И хотя я на 110% согласен с Рэндом Фишкиным в его недавнем видео Whiteboard Friday — «Идеальная длина сообщения в блоге и частота публикации — B? !! $ # ÷ x» — я также считаю, что существует такая вещь, как слишком много контента, и если кто-то скажет нам, что точный подсчет слов зависит от отрасли или имеющейся информации, нам легко подумать: «Ну, мой контент очень ценен и требует подробного объяснения, так что это нормально, если много текста / изображений на моем сайте и в блоге.«Нам легко думать, что мы исключение из правил. Но реальность такова: касается пользователей, а не эго .

Независимо от того, состоит ли ваш контент из 500 или 500 миллионов слов, мы должны думать о пользователях и ценности, которые им дает наш контент. Это особенно актуально для мобильных устройств, где работать с недвижимостью еще меньше. Так что да — не пытайтесь подогнать или заполнить свой контент до необходимого количества слов, но также знайте, что читатели (включая вас и меня) по-прежнему имеют ограниченный объем внимания и нуждаются в скиммируемом контенте … Белка!

Сотрудник блоггера GDD Эмили Мэлоун делится тем же советом по устранению беспорядка в своем недавнем блоге: 10 рекомендаций по оптимизации коэффициента конверсии для начинающих (проверьте это — хорошее чтение!).

4. ПЛОХАЯ ТИПОГРАФИЯ

РЕШЕНИЕ: Выберите шрифт, который легко просматривать.

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

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

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

5. ДЛИННЫЕ ФОРМЫ

РЕШЕНИЕ: Спрашивайте только то, что требуется от ваших потенциальных клиентов.

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

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

* PRO-TIP: При создании форм рассмотрите два основных вопроса: 1) насколько ценным является контент, который вы предлагаете, и 2) какая информация необходима для привлечения квалифицированного лида? Если предложение — это то, что они могут легко найти в другом месте, они, скорее всего, не захотят передавать кучу личной информации, если она вообще есть. Более того, вам нужно убедиться, что вы действительно можете использовать данные, которые вы собираете. Чаще всего наличия полей формы для имени и адреса электронной почты (а также, в зависимости от формы, окна сообщения) более чем достаточно, чтобы начать сбор ценной информации о ваших потенциальных клиентах.

6. БЕЗОПАСНЫЙ ДИЗАЙН

РЕШЕНИЕ: дизайн для любого устройства.

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

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

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

7. НЕДОСТАТОЧНАЯ (ИЛИ НЕ СУЩЕСТВУЮЩАЯ) ФУНКЦИОНАЛЬНОСТЬ ПОИСКА

РЕШЕНИЕ: Если у вас много контента, добавьте хорошую функцию поиска.

Если ваш веб-сайт достаточно насыщен контентом и вы не пользуетесь надлежащими функциями поиска, то вы упускаете его (как и ваши посетители)!

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

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

---

Хотите узнать больше о том, как спланировать следующий редизайн вашего веб-сайта?

Посмотрите, как подход Designzillas оказал влияние в Интернете, просмотрев наши тематические исследования ниже.

Измерение ошибок в пользовательском опыте — MeasuringU

Ошибки случаются и непреднамеренные действия неизбежны.

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

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

Во-первых, что такое ошибка?

Промахи и ошибки: два типа ошибок

Может быть полезно разделить ошибки на промахи и ошибки. Дон Норман много писал о промахах и ошибках в главе 5 «Дизайн повседневных вещей».

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

Вот несколько промахов

1. Ошибка при вводе адреса электронной почты
2. Ошибка при вводе пароля
3. Случайное нажатие на соседнюю ссылку
4. Нажатие кнопки «Сброс» вместо «Отправить» (к сведению, в форме кнопки «Сброс» нет).
5. Ошибка при вводе адреса электронной почты в поле «Введите повторно»
6. Выбор неправильного месяца при бронировании
7. Случайное двойное нажатие кнопки (часто с двойной отправленной формой)

Вот некоторые ошибки

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

Четыре причины ошибок

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

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

Как записывать ошибки

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

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

Ошибки объясняют, почему

Было показано, что

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

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

Анализ ошибок

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

Вычисление частоты ошибок

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

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

Возможности для ошибок

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

Например, при снятии денег в банкомате будет меньше возможностей для ошибок, чем при отправке отчета о расходах с 4 квитанциями и пробегом в приложении для отчетов о расходах. Вы определяете в интерфейсе места, где пользователи могут совершать ошибки, и делите общее количество ошибок для всех пользователей на общее количество возможностей.Например, если задача имеет 5 возможностей для ошибки и 10 пользователей пытаются выполнить задачу, существует 50 возможностей. Если вы наблюдаете 5 ошибок у пользователей, коэффициент ошибок составляет 5/50 = 10%.

Для получения более подробной информации о методе создания вероятности ошибки см. У меня есть целый раздел в Практическом руководстве по измерению удобства использования, а также в статьях CHI 2005 [pdf] и UPA [pdf].

Объедините ошибки в единую метрику удобства использования (SUM)

Я не всегда записываю ошибки, но когда я это делаю, мне нравится включать их в единую метрику удобства использования (SUM).Мы обнаружили, что [pdf] среднее время, процент выполнения, удовлетворенность задачей и ошибки (все выраженные в пропорциях) являются отличным единым критерием для описания удобства использования задачи. Его можно использовать на информационных панелях или при сравнении конкурирующих продуктов.

Накладные расходы на ошибку

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

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

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

[mc4wp_form id = ”3053 ″]

9 распространенных ошибок юзабилити в веб-дизайне — Smashing Magazine

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

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

Вас также могут заинтересовать следующие сообщения по теме:

1. Крошечные интерактивные области

Гиперссылки предназначены для того, чтобы по ним можно было нажимать, поэтому, чтобы их можно было использовать, имеет смысл убедиться, что на них легко нажимать .Вот пример слишком маленьких ссылок. щелкнуть по ним сложнее, чем должно быть. Это ссылки для комментариев на Hacker News, сайте социальных новостей. (Интерактивные области выделены красным):

Больше после прыжка! Продолжить чтение ниже ↓

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

Ссылка для комментариев в газете.

Зачем нам нужна большая интерактивная область? Простой.Потому что наши движения руки с помощью мыши неточны. Большая интерактивная область упрощает наведение курсора мыши на ссылку . Чтобы получить большую интерактивную область, мы можем либо увеличить всю ссылку, либо увеличить отступ вокруг ссылки с помощью свойства CSS «padding». Вот код:

   Пример сайта   

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

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

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

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

Но есть еще один способ использования нумерации страниц в Интернете. Контентные страницы, например статьи в блогах, иногда разделяются на несколько страниц. Зачем это делается? Какая выгода? Маловероятно, что статья настолько длинная, что требует разбивки на страницы; в большинстве случаев используется для увеличения просмотров страниц .Поскольку многие блоги и журналы получают доход за счет рекламы, увеличение количества просмотров страниц (т. Е. Загрузки отдельных страниц) увеличивает их статистику просмотров и позволяет им взимать больше за каждое объявление.

_Статья Wired о логотипе Google разбита на восемь страниц, поэтому ее очень трудно читать._

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

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

3. Повторяющиеся заголовки страниц

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

А вот как страница отображается в результатах поиска Google:

4. Контент, который трудно сканировать

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

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

Целевая страница Basecamp.

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

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

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

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

5. Невозможно связаться

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

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

При переходе по контактной ссылке на официальном сайте Coca-Cola. вам представлена ​​эта страница.Ни электронной почты, ни номера телефона. Большинство ссылок ведут на автоматизированные ответы на часто задаваемые вопросы; в форме обратной связи указываются ваш адрес и возраст, ее длина не должна превышать 500 символов; Форма «Отправить идею» состоит из двух страниц с приложенными условиями. Не похоже, что Coca-Cola действительно хочет, чтобы вы связались с ними.

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

Enkoder — мое любимое решение для размещения адресов электронной почты в Интернете.Enkoder — это приложение, которое бывает двух видов: бесплатное для Mac OS X и бесплатное в виде веб-приложения. Он шифрует любой адрес электронной почты, который вы даете ему , и дает вам кучу бредового кода JavaScript для размещения на вашей странице. Когда страница с кодом загружается, ваше электронное письмо волшебным образом появляется как интерактивная ссылка . Боты, ищущие адреса электронной почты, не смогут интерпретировать код — по крайней мере, таков план.

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

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

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

Бывший форум GetSatisfaction для Apple.

6. Нет возможности искать

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

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

Якоб Нильсен

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

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

А вот и для Yahoo:

Чтобы он заработал, все, что вам нужно сделать, это изменить значение «скрытого» поля на доменное имя вашего веб-сайта .Это ограничит область поиска Google или Yahoo только вашим веб-сайтом. Вы также можете изменить значение текста «Отправить», чтобы говорить все, что вы хотите.

7. Слишком много функций, требующих регистрации

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

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

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

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

На целевой странице Pixlr, онлайн-приложения для редактирования графики, есть ссылка «Перейти и начать!» При нажатии на нее открывается приложение. Ни испытаний, ни регистрации; вы сразу же протестируете приложение.

8. Старые постоянные ссылки никуда не ведут

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

301 редирект — это небольшие инструкции, хранящиеся на вашем сервере, которые перенаправляют посетителей на соответствующие страницы. Итак, если кто-то заходит на ваш сайт по старой ссылке, он не увидит страницу с ошибкой 404 («Страница не найдена»): перенаправление 301 перенаправляет их в нужное место , при условии, что вы его настроили. правильно. Число «301» обозначает тип перенаправления: постоянное.

Ошибка 404 Фрая / Уайлса.

Есть несколько способов выполнить 301 редирект. Их реализация частично зависит от используемого вами веб-сервера. Вот основы обработки 301 редиректа на самом популярном на данный момент веб-сервере Apache.

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

Вот простой код переадресации 301:

  RewriteEngine на
Перенаправление 301 /oldpage.html /newpage.html  

Код не требует пояснений.Когда кто-то пытается получить доступ к «yoursite.com/oldpage.html», он будет немедленно перенаправлен на «yoursite.com/newpage.html». Бит «RewriteEngine on» наверху гарантирует, что движок mod_rewrite включен (по умолчанию выключен). Это движок, который обрабатывает перенаправления.

9. Длинные регистрационные формы

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

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

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

У Tumblr одна из самых коротких форм регистрации. Всего три поля: электронная почта, пароль и URL вашего нового блога.

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

Меньше думать

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

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

6 честных и ценных советов от UX-дизайнера

В этой статье вы можете узнать больше о:

• Опыт UX-дизайнера в постоянно меняющемся проекте
• Менее известный взгляд на ошибки юзабилити
• 6 советов по изменению рабочего процесса, чтобы избежать плохого юзабилити и низкой конверсии веб-сайта

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

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

Неэффективность сортировки ошибок юзабилити

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

Ошибки юзабилити влияют на то, насколько удобно, эффективно и результативно пользователь проходит путь.

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

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

Мы перешли от мониторов к маленьким мобильным экранам, а планшеты и умные часы с круглыми экранами расширили палитру. И это рассматривает только одну переменную в более сложном уравнении.

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

Как улучшить рабочий процесс с учетом ошибок юзабилити Несколько лет назад никто не моргнул при разработке функции тележки, доступной при смахивании вверх от нижней части экрана. В 2017 году появился iPhone X. С тех пор большинство пользователей использовали этот жест для перехода на домашний экран. Источник: support.apple.com

1. Интегрируйте осведомленность в свой рабочий процесс

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

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

2. Получить справочную информацию

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

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

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

3. Разберитесь со своими предубеждениями

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

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

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

4. Примите свои ошибки

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

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

5. Поймите свои ошибки и используйте их

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

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

6. Подтвердите свои изменения

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

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

Заключение и резюме

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

1. Интегрируйте осведомленность в свой рабочий процесс: Знайте текущие модели поведения пользователей и технологические изменения.
2. Получите справочную информацию: Найдите реальный способ узнать больше о мотивации выбора и предпочтений.
3. Разберитесь со своими предубеждениями: Будьте готовы узнавать что-то новое и следить за новыми перспективами.
4. Примите свои ошибки: Дизайнеры оценивают так же человечно, как и пользователи, для которых они разрабатывают; ошибки не делают вас менее уязвимыми.
5. Поймите свои ошибки и используйте их: Поймите причину неудачного выбора дизайна; это приносит гораздо больше, чем сама ошибка.
6. Подтвердите свои изменения: Реконструкция рабочего процесса требует проверки для определения эффективности.

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

Продолжить обучение с UX studio

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

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

Основы оценки юзабилити | Usability.gov

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

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

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

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

• Интуитивно понятный дизайн : почти легкое понимание архитектуры и навигации по сайту
• Простота обучения : насколько быстро пользователь, никогда ранее не знакомый с пользовательским интерфейсом, может выполнять базовые задачи
• Эффективность использования : Как быстро опытный пользователь может выполнять задачи
• Запоминаемость : после посещения сайта, если пользователь может вспомнить достаточно, чтобы использовать его эффективно при будущих посещениях
• Частота и серьезность ошибок : как часто пользователи совершают ошибки при использовании системы, насколько серьезны ошибки и как пользователи восстанавливаются после ошибок
• Субъективное удовлетворение : Если пользователю нравится пользоваться системой

Каковы методы оценки и когда их следует применять?

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

Возможности для тестирования включают:

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

Работа с данными тестирования

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

После того, как вы соберете свои данные, используйте их для:

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

Глоссарий терминов по оценке удобства использования | Usability.gov

• A / B тестирование

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

• Допустимая погрешность

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

• Аналитический паралич

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

• Тестирование производительности

  Тестирование с использованием набора стандартных передовых практик или прошлых показателей производительности.

• Сортировка карт или сортировка карт

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

• Каскадное меню

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

• Каскадные таблицы стилей (CSS)

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

• Пример использования

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

• Флажок

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

• Сигналы кликабельности

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

• Сортировка закрытых карт

  Упражнение по сортировке карточек, в котором участники группируют темы контента или «карточки» по заранее определенным категориям. [См. Сортировка карточек и Открытая сортировка карточек]

• Познавательная нагрузка

  Количество умственных усилий, необходимых, чтобы что-то понять.

• Когнитивное прохождение

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

• Совместное проектирование

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

• Тестирование концепции

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

• Смещение подтверждения

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

• Эффект контекста

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

• Контекстный запрос

  Исследование, посвященное тому, как пользователи взаимодействуют с оборудованием и интерфейсами в своей собственной среде.

• Коэффициент конверсии

  Процент посетителей, совершивших целевую транзакцию в Интернете

• Тестирование коридора

  Неофициальный или специальный тест или запрос для получения быстрой обратной связи от пользователя или данных

• Дневник

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

• Прямые данные пользователя

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

• Действует

  Мера или описание того, насколько точно может быть достигнута цель.

• Эффективность

  Мера или описание того, насколько быстро и легко может быть достигнута цель.

• Конечные пользователи

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

• Поле ввода

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

• Экологический профиль

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

• Анализ ошибок

  Часть анализа задачи, которая определяет частоту и тип ошибок, возникающих для каждого указанного набора потоков задач.

• Ошибка комиссии

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

• Ошибка пропуска

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

• Частота ошибок

  Частота возникновения ошибок в заданный период времени.

• Исправление ошибок

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

• Этнография, или этнографические исследования

  Целостное качественное исследование пользователей в контексте их реальной среды в течение определенного периода времени.

• Экспертная оценка или Экспертная оценка

  См. Эвристическая оценка.

• Eyetracking или Eye Tracking

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

• Благоустроенные мастерские

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

• Координатор

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

• Сообщение обратной связи

  Сообщение, подтверждающее пользователю, что действие было выполнено успешно.

• Маркировка полей

  Служит для описания назначения и функции элементов формы.

• Тестирование в первый клик

  Метод тестирования, позволяющий узнать, на что посетители переходят в первую очередь на веб-сайте.

• Фокус-группа

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

• Читаемость шрифта

  Насколько легко или сложно прочитать набор слов определенного стиля шрифта.

• Размер шрифта

  .

  Высота шрифта в пунктах.

• Формирующее тестирование

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

• Бесплатное объявление

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

• Распределение функций

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

• Анализ пробелов

  Метод оценки, используемый для демонстрации разницы между желаемым состоянием и текущим состоянием.

• Глобальная навигация

  Средство доступа к основному контенту или функциям с каждой страницы

• Текст справки

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

• Эвристическая оценка / Экспертиза

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

• Высококачественный прототип

  Интерактивный прототип, имитирующий реальную систему или функциональность сайта и детали дизайна.[См. Также прототип низкой точности]

• Помощь при наведении или Подсказка / Подсказка

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

• Человеческий фактор

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

• Инженерия человеческого фактора (HFE)

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

• Взаимодействие человека и компьютера (HCI)

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

• Гибридная навигационная модель (гибридная структура)

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

• Промышленный образец или дизайн продукта

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

• Интервью

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

• Итеративное тестирование

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

• Обучаемость

  Насколько легко или сложно научиться эффективно использовать систему или интерфейс.

• Шкала Лайкерта

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

• Продольное исследование

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

• Прототип низкой точности

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

• Ментальная карта или модель

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

• Тральщик

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

• Модерируемое юзабилити-тестирование

  Юзабилити-тестирование при активном участии фасилитатора или модератора.

• Сортировка открытых карт

  Упражнение по сортировке карточек, в котором участники группируют темы контента или «карточки» по категориям, а затем не маркируют категории. [См. Сортировка карточек и Сортировка закрытых карточек]

• Оптимальный путь

  Самый действенный и действенный способ системы выполнить задачу.

• Пагинация

  Разделение информации на отдельные последовательно пронумерованные или связанные страницы.

• Бумажное прототипирование

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

• Параллельное проектирование

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

• Рабочие характеристики

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

• Цели деятельности

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

• Тест производительности

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

• Персона

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

• Простой язык

  Четкое и сжатое сообщение, написанное, чтобы читатели могли понять информацию как можно быстрее и полнее.

• Данные предпочтений

  Собираемая информация о восприятии и чувствах пользователя к опыту.

• Цели предпочтений

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

• Прототип

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

• Качественные исследования

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

• Количественные исследования

  Исследование человеческого поведения с упором на числовые данные и статистику.

• Быстрое прототипирование

  Быстрое создание макетов того, как будет выглядеть система, для облегчения внутреннего обзора или тестирования.

• Рейтинговые шкалы

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

• Читаемость

  Степень, в которой пользователи могут легко и точно читать информацию на веб-странице

• Репрезентативная выборка

  Выбор группы участников, представляющих вашу целевую аудиторию

• Адаптивный дизайн

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

• Возможность сканирования

  Насколько легко читать и понимать основной текст.

• Сканирование

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

• Сценарии

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

• Просеиватель

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

• Ограничитель прокрутки

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

• Пропустить навигацию / Пропустить логику

  Позволяет создавать собственные пути на основе предыдущих действий или ответов

• Раздельные исследования участков

  Создание двух версий одного и того же веб-сайта и тестирование их друг против друга

• Техническое задание (SOW)

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

• Опрос или анкета

  Анкеты, рассылаемые целевой аудитории для сбора данных от отдельных лиц по определенным темам или опыту

• Шкала удобства использования системы (SUS)

  SUS — это технологически независимая десятибалльная шкала для субъективной оценки удобства использования.

• Целевая аудитория

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

• Целевая страница

  Место на сайте, где пользователь найдет искомую информацию. [См. Также страницу назначения]

• Задача

  Процедура, которая включает цели, шаги, навыки, начальное состояние, входы, конечное состояние и выходы для выполнения действия.

• Анализ задачи

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

• Глубина задачи

  Количество уровней в иерархической структуре.

• Диаграммы задач

  Отображение различных задач и их взаимосвязей на сайте.

• Профиль задачи

  Обзор задачи и всех ее характеристик, таких как частота, важность и поток.

• Сценарий задачи

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

• Протокол мыслей вслух

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

• Удобство использования

  Насколько эффективно, действенно и удовлетворительно пользователь может взаимодействовать с пользовательским интерфейсом.

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

  Различные методы измерения удобства использования.

• Юзабилити-лаборатория

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

• Юзабилити-тестирование

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

• Вариант использования или пользовательский сценарий

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

• Опыт использования (UE, UX)

  Широкий термин для нескольких дисциплин, изучающих влияние дизайна на простоту использования и уровень удовлетворенности продуктом, сайтом или системой.

• Исследование пользователей

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

• Дизайн, ориентированный на пользователя (UCD)

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

• Каркас

  Очень упрощенный набросок важной информации на странице.Также известна как архитектура страницы, схема страницы или план

Предотвращение ошибок в UX-дизайне: как это сделать в Facebook и Gmail

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

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

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

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

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

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

    Рис. 1. Mailchimp демонстрирует предотвращение ошибок, предлагая пользователям ввести DELETE для подтверждения своих действий.

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

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

    Рис. 2. Mailchimp снова демонстрирует предотвращение ошибок, на этот раз когда пользователь хочет отправлять электронные письма.

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

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

    Плохой дизайн: Bitly

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

    Однако, когда я попытался войти в систему, мне это не удалось, и единственное сообщение, которое я получил, было «Нет. Попробуйте снова.» Но такое сообщение об ошибке не говорит мне, где именно я ошибаюсь.Я не понимаю, что я ввел неправильно: имя пользователя или пароль, или и то, и другое? В довершение ко всему, «Нет» также звучит для меня немного снисходительно — как будто Битли издевается над моей ошибкой. Как я продемонстрирую позже при обсуждении Facebook, хорошая стратегия предотвращения ошибок четко разграничит ошибки, т. Е. Сообщит, неправильно ли введено имя пользователя или пароль. Facebook прекрасно справляется с этой задачей, даже идя еще дальше, сообщая вам, что вы ввели старый пароль, если случайно допустили такую ​​ошибку.

    Рис. 3. Немного демонстрирует плохой дизайн в предотвращении ошибок, не сообщая мне, был ли введен мой адрес электронной почты / имя пользователя или пароль неправильно.
    Еще один плохой дизайн: ProtonMail

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

    И какая это может быть проблема: например, представьте, что вы подаете заявку на работу по электронной почте. Вы потратили часы, собирая свои мысли, чтобы составить идеальное сообщение и приложить все усилия, чтобы представить себя наиболее подходящим кандидатом. Большой! Однако из-за того, что вы были , так что сильно увлечены задачей, вы пошли дальше и нажали кнопку «Отправить»… только для того, чтобы позже понять, что вы на самом деле не прикрепили свое резюме.Теперь вы находитесь в затруднительном положении, когда вам нужно решить, стоит ли вам попытаться написать это неудобное объяснительное электронное письмо — на этот раз с приложенным резюме — или прекратить это и искать работу в другом месте … или просто надеяться, что электронное письмо сможет соблазнить их достаточно, чтобы вернуться и попросить вас прислать свое резюме в любом случае (маловероятно). Вы можете упрекнуть себя за эту ошибку, но это также плохой пример предотвращения ошибок в UX-дизайне.

    Как будто….

    Позвольте мне использовать аналогию, чтобы объяснить важность предотвращения ошибок в UX-дизайне.Представьте, что вы в кофейне заказываете кофе. Вы спрашиваете официанта: «Эй, можно мне кофе, пожалуйста?» Официант просто ответит вам: «Нет». Вы в замешательстве спрашиваете его: «Ты уверен? Я чувствую запах кофе и вижу, как другие люди пьют кофе в ресторане ». На этот раз он вообще не отвечает. Поговорив с другими людьми за соседним столиком, вы обнаруживаете, что должны сказать официанту, КАКОЙ ТИП кофе вы хотите; в противном случае ваш заказ не будет выполнен. Так что, если вы закажете «Кафе Латте», он вам поможет.Было бы неплохо иметь где-нибудь в ресторане табличку с надписью «Скажите, пожалуйста, какой кофе вы хотите, чтобы мы выполнили ваш заказ»? После такого переживания вы бы снова вернулись в ту кофейню?

    Введите хороший дизайн: случай из Facebook

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

    Рис. 5. Facebook демонстрирует хороший дизайн в предотвращении ошибок, сообщая мне, где именно я сделал ошибку. В этом случае он сообщает мне, что я ввел неправильный пароль.

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

    Рис. 6. Facebook демонстрирует хороший дизайн в предотвращении ошибок, мягко направляя меня и сообщая мне, что я использовал старый пароль, и давая мне возможность войти в свою учетную запись.
    Еще один хороший дизайн: Gmail

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

    Рис. 7. Gmail демонстрирует хороший дизайн в предотвращении ошибок, напоминая мне, что я забыл прикрепить файл. Такой дизайн заставляет меня чувствовать себя в безопасности и в целом создает хороший UX.
    Что мы можем извлечь из этого?

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

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

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

    Хотите узнать больше?

    Если вы хотите стать экспертом в UX-дизайне, дизайн-мышлении, UI-дизайне или другой связанной теме дизайна, подумайте о том, чтобы пройти онлайн-курсы UX-дизайна от Interaction Design Foundation: например, «Дизайн-мышление», стать UX-дизайнером из Scratch, Проведение юзабилити-тестирования или исследования пользователей — методы и передовые практики. Удачи в вашем познавательном путешествии!

    Список литературы
    1. https: // www.nngroup.com/articles/slips/
    2. https://www.nngroup.com/articles/user-mistakes/
    3. https://www.nngroup.com/articles/confirmation-dialog/
    4. https: // www.nngroup.com/articles/ten-usability-heuristics/
    5. https://dev.to/izzet/error-prevention-one-of-the-usability-heuristics-2l4b
    6. https://medium.com / @ digitalofthings / ux-принцип-7-уменьшить-когнитивную-нагрузку-через-предотвращение ошибок-aada2960b12e
    7. https://uxgorilla.

       No related posts.