20 октября 2016, 10:00 20692 11

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

И как их исправить.

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

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

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

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

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

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

Видео.

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

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

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

Видео.

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

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

Цифровая Пятница 2017

COSSA приглашает на первую в истории массовую распродажу онлайн-сервисов для бизнеса — Цифровую Пятницу 2017!

Сразу 85 компаний объявили неделю скидок и специальных условий на свои продукты для предпринимателей: CRM-системы, сервисы для управления бизнес-процессами, инструменты интернет-маркетинга и другие, более 17 категорий решений.

Акция идет всего неделю с 17 по 24 ноября, так что поторопитесь — и удачного вам b2b-шоппинга!

Реклама

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

Видео.

Неудачный пример слогана #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.

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

- 0 +
Максим Лунин #
20.10.2016 22:09
Хорошие примеры. Как маркетолог, со всеми пунктами согласен. Но чтобы не разбирать миллион ошибок, лучше самому сделать маркетинговый аудит сайта. Его можно сделать в любой момент существования сайта и увидеть сразу все недочеты. Как его сделать можно прочитать тут: https://spark.ru/startup/toque-advertising/blog/17602/marketingovij-audit-sajta-shema-proverki
Ответить
- +1 +
Вера Петрова #
21.10.2016 11:54
Максим, цель материала - показать наиболее типичные ошибки. По сути - ваш аудит ответчает на те же вопросы, мы просто показали какими бывают эти ответы. И, что главное, будучи владельцем сайта и видя его рождение с первых прототипов, очень сложно трезво на него взглянуть. Наш https://uxcrowd.ru как раз таки и позволяет провести этот аудит свежим взглядом быстро и недорого.
Ответить
- 0 +
Максим Лунин #
21.10.2016 12:02
Да, я видел) Вы молодцы)
Ответить
- -1 +
Полная ерунда из разряда «как сделать продающий сайт».

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

В большинстве примеров просто надо понимать ЦА и подумать, что человек не случайно забрел на ваш сайт, а искал его, мы не кликаем просто так на ссылки и не набираем абркадабру в поисковике. Поэтому с вероятностью в 90% я и так знаю о чем этот сайт т.к. я его сам искал, а в некоторых случаях (как в примере с креативным агентством) надо просто понимать, что их ЦА не бабушки и не любители телевизора, а люди которые понимают, что такое Creative Agency.

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

Короче, хреновый у вас аудит. Очередной набор шаблонных изречений, придуманных еще в 90-х маркетологами, когда надо было объяснять что такое сайт и как он работает.
ИМХО, конечно же.
Ответить
- +1 +
Вера Петрова #
21.10.2016 12:04
Валерий, позволю себе не согласиться. Пересмотрела ещё раз скриншоты из статьи, догадаться по контенту о чем сайт можно лишь в нескольких случаев. И, к тому же, это только одна из 10 типичных ошибок (непонятность бизнеса).
Про попап - можно считать его безусловным злом, это ваше право. Но актуальное предложение в нужный момент лучше бессмысленных окон. Мы не ставили себе задачей судить попап, мы показали как использовать инструмент грамотно и не грамотно.
Про ЦА — люди попадают на сайт не только с органической выдачи, но и с рекламы. И не всегда это то, что искал пользователь.
В целом в вашем комментарии я вижу канву "пользователь умный и сам всё знает и разберется".  К сожалению таких пользователей мало. И даже на примере своего собственного продукта мы регулярно сталкиваемся с непонимаением того, что же мы предлагаем, и ваш пост тому пример ;-)
У нас не аудит. У нас тестирование на реальных пользователях. Не идеальных, не экспертах, а именно случайных живых людях, которые реагируют как им кажется правильным. А статья - подборка наиболее ярких примеров ошибок из тестов в нашей системе.
И спасибо за ваше мнение!
Ответить
Мои 5 основных врагов юзабилити :)
1. Кнопка сброса в форме (reset, очистить). Такие кнопки могут встречаться в формах комментариев к заказу или формах обратной связи с интернет-магазином, где пользователь вводит своё сообщение. Если такая кнопка расположена рядом с кнопкой отправки (отправить, submit, post), то при её случайном нажатии сбрасывается вся форма. Если текст не копирован, а создан изначально в форме, это крайне раздражает покупателя.

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

3. Бывает, что кнопка закрытия окна (тот самый «крестик» в правом верхнем углу) выполняет не ожидаемое пользователем действие, например, сворачивает окно в трей или уменьшает его. В то время как эта кнопка должна совершать единственное действие – закрывать окно по клику пользователя.

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

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

http://wezom.com.ua/blog/juzabiliti-vs-veb-analitika
и крутая статья о юзабилити и веб аналитике :)
Ответить
- +1 +
Soda Art #
27.10.2016 14:17
Ошибка с точки зрения юзабилити в том, что ошибки юзабилити сайтов написаны полужирным шрифтом зеленого цвета, которые просто не возможно читать http://joxi.ru/Rmzz7aoFWqqkqm
Ответить
- 0 +
Вера Петрова #
01.11.2016 17:59
Спасибо за ваше замечание, согласны. Постараемся в будущих материалах тщательней подходит к оформлению!
Ответить
- 0 +
Еще одна ошибка - считать удачным последний "удачный пример". В данном случае уместнее была бы кнопка с названием "Каталог", а не "Купить", т.к. эта кнопка ведет не к покупке, как таковой и может одних ввести в заблуждение, других - кто не собирался так сразу покупать, а хотел только выбрать что-то для начала, заставить рыскать по странице в поисках каталога. В остальном статья хорошая и полезная.
Ответить
- 0 +
Вера Петрова #
02.11.2016 11:47
Алина, спасибо за комментарий. С точки зрения названия кнопки - да, правильнее было бы назвать ее Каталог. Но и с существующим названием к путанице это не должно привести, потому что кнопка Каталог на странице тоже есть - рядом с описанием преимуществ Азбуки. То есть с точки зрения прохождения пути покупателя все верно: вначале читаем о преимуществах - затем идем в каталог, и только потом покупка. С названием же вы правы - в следующий раз будет использовать более однозначные примеры.
Ответить
- 0 +
Dima Bodeko #
15.11.2016 00:45
Блин ребята, хоть и юзабилити не визуальный дизайн в прямом понимании, но... как можно прислушываться к советам написанным зеленым текстом на белом фоне!! Тексточитабилити не оч совсем.
Ответить
Ответить?

Самые интересные статьи, обзоры и размышления —
в рассылке!

Email *


Подпишись!


Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Twitter Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Twitter, чтобы пользоваться сайтом

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