Что такое юзабилити сайта — разработка интерфейса сайта

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

Важные правила по юзабилити сайта и разработке оптимального интерфейса

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

👁️‍🗨️ Usability — это степень эффективности, продуктивности и удовлетворенности, с которой продукт может использоваться пользователями для достижения некоторых задач в определенном контексте.

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

User Interface (UI — пользовательский интерфейс) — ощущение и реакция человека, вследствие использования или предполагаемого использования продукта, системы или услуги.

User eXperience (UX — опыт взаимодействия) — желаемый, ожидаемый и практический опыт взаимодействия пользователя с продуктом.

Каналы восприятия информации

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

Основные каналы для восприятия информации на сайте
Восприятие информации на сайте

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

Поэтому нам нужно делать упор на визуальном канале.

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

Время для восприятия информации различными элементами мозгом человека
Среднее время обработки информации человеческим мозгом

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

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

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

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

Секретные приемы заострения внимания

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

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

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

Здесь больше всего запоминаются вот эти фигуры:

Секрет наиболее запоминающихся фигур для нашего мозга

Почему так происходит?

Контраст

При группировке объектов использовались различные варианты контраста. Их бывает 4 вида.

Основные варианты контраста объектов
Варианты контраста объектов

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

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

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

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

Пользовательский опыт

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

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

Правила краев и середины в юзабилити

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

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

Диаграмма Гутенберга

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

Раньше основным паттерном был F.

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

Но это происходило раньше, когда были более простые интерфейсы. Сайты тогда были похожи друг на друга.

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

Поэтому сейчас рекомендую ориентироваться на другие паттерны. 90% интерфейсов рекомендую строить по диаграмме Гутенберга.

Диаграмма Гутенберга при проектировании интерфейса сайта и юзабилити
Диаграмма Гутенберга

1. Начальная область

Экран можно поделить на 4 части. В верхнем левом углу пользователь будет начинать взаимодействие.

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

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

Если вы малый бренд, то акцентировать внимание на логотипе не стоит.

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

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

2. Область с высоким потенциалом

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

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

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

3. Область с низким потенциалом

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

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

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

4. Конечная область

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

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

Но даже если люди понимают, что в блоке 2 и 3 для них интересного ничего нет, то тогда они начинают пробегаться по диагонали.

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

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

Почему конверсия не будет равна 100%?

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

Общее распределение трафика для сайтов в рунете
Распределение трафика для рунета

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

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

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

Поэтому средняя конверсия не 100%, а около 1- 3% для разных тематик. То есть из 100 человек, которые зашли на сайт, от силы закажут 1 — 3 человека. Остальных людей придется дожимать.

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

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

А все начинается с выдачи!

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

Отображение сниппетов сайта в поисковой выдаче Яндекса
Сниппеты в поисковой выдаче

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

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

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

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

Как улучшить конверсию сайта?

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

Как работает интернет рассылка для улучшения конверсии на сайте

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

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

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

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

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

Пользовательские сценарии

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

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

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

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

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

Если я не найду такой, то на этом шаге мой сценарий (запрос) закончится. Если же я нашел товар, то начинается третий шаг и так далее.

Как проектировать сценарии

Проектировать пользовательские сценарии можно практически на всем. Вот основные моменты проектирования:

  • На потребностях
  • На страхах
  • На эмоциях
  • На опыте
  • На ожиданиях
  • На целях (ниже разберем)

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

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

Проектирование сценариев для покупателя и бизнеса в интернете

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

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

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

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

Создание сценариев для разных пользователей на сайте

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

Методология моделирования сценария

Вот план методологии моделирования:

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

Сегментация целевой аудитории

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

1 Информационные проекты — частные тренеры, консультанты, коучи, психологи и прочее — те, кто консультирует, обучает и работает с 1 — 3 помощниками. Женщины 28 — 40 лет. 10%
2 Небольшой оффлайновый бизнес — детские развивающие центры, небольшие магазины, языковые школы, сфера красоты (парикмахерские и так далее). Женщины 28 — 40 лет. 15%
3 Частные специалисты на стыке бизнеса и фриланса — фотографы, визажисты, спортивные инструкторы, репетиторы. Женщины 28 — 40 лет. 25%
4 Бизнесмены, вышедшие из продаж и открывшие собственный маленький бизнес — это стройка, авто, установка оборудования. Мужчины 35 — 40 лет. 10%
5 Фрилансеры — копирайтеры, дизайнеры, сммщики. Мужчины 20 — 40 лет. 40%

Выбор персонажа

На этом этапе выбираем какого-то популярного персонажа. К примеру, можно взять Леру из сериала «Реальные пацаны».

Персонаж Лера из сериала «Реальные пацаны»
Лера из сериала «Реальные пацаны»

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

Основные ее черты:

  • Добрая
  • Заботливая
  • Рассудительная

Далее начинаем моделировать этого персонажа. Для этого выписываем ее:

  • Потребности
  • Страхи
  • Ожидания
  • Опыт
  • Эмоции
  • Промежуточные и конечные цели

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

Создание профиля задач для бизнеса

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

Создаем профиль основных задач для бизнеса

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

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

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

  1. Сдать в аренду как можно больше техники
  2. Сдать технику на длительный срок
  3. Сдавать определенную технику
  4. Загрузить автопарк на будни
  5. Чтобы сайт рекомендовали своим друзьям (ссылки, соц. сети)

Создание профиля задач для покупателя

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

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

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

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

Итак, главная задача для Чебурашки — «Как можно быстрее нужен подъемный кран для постройки 3-ех этажной школы.»

Соответственно, профиль задач Чебурашки будет следующим:

  1. Понять на сайте, туда ли я попал, есть ли там что-то про подъемный кран
  2. Подойдет ли мне подъемный кран (например, хватит ли вылета стрелы для 3-ех этажной школы)
  3. Кто будет управлять этой техникой
  4. Как ее заказать и так далее

Приоритеты покупательских целей

Теперь нужно расставить приоритеты покупательских целей. Расставляем все цели по порядку для каждого персонажа и проставляем баллы. В примере ниже максимальный балл у первой цели равен 9, так как всего выписано 9 целей.

Все цели Сумма баллов целей Чебурашка (нужен подъемный кран) Колян (нужна газель) Сильвестр (нужны 5 катков)
Цели Баллы Цели Баллы Цели Баллы
Понять туда ли попал, есть ли определенная техника (№1) 27 цель №1 9 цель №1 9 цель №1 9
Узнать, сколько стоит аренда техники (№2) 12 цель №8 8 цель №2 8 цель №8 8
Узнать минимальное время аренды (№3) 3 цель №5 7 цель №9 7 цель №4 7
Узнать, когда техника сможет подъехать (№4) 18 цель №4 6 цель №3 6 цель №7 6
Узнать, кто будет управлять техникой (№5) 7 цель №10 5 цель №4 5 цель №6 5
Узнать про закрывающие документы (№6) 5 цель №10 4 цель №2 4
Узнать варианты оплаты (№7) 6 цель №10 3
Узнать, подходит ли данная техника (№8) 16
Узнать, как выгоднее заказать (№9) 7
Как заказать Основная цель должна быть достижима в любой момент прохождения сценария

Как видно на три сегмента (персонажа) у нас приходится 9 задач. Причем задачи для каждого персонажа совсем разные. Поэтому у всех в сценарии получилось разное количество шагов. У Чебурашки — 5, у Коляна — 6, у Сильвестра — 7.

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

У каждого персонажа выписали цели и расположили в нужном порядке. Если цель №1 выполняется на сайте (то есть персонаж понял, что он попал на нужный проект), тогда проверяем следующую цель и так далее.

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

На как это сделать?

Вариант по landing page

Расстановка приоритетов сегментов ца по методу проектирования landing pageМожно использовать вариант, по которому проектируется landing page. То есть под сегменты расставляем приоритеты.

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

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

А так у нас 9 целей.

Поэтому максимальный балл берем по количеству целей. В примере, это 9. То есть цель № 1 является самой приоритетной и имеет максимальный балл. Далее для каждой цели снижаем балл на 1.

Поскольку цель №1 приоритетная для всех трех персонажей, то ответ на ее решение должен находится на самом первом экране.

Идем далее и смотрим следующую цель.

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

Далее мы получаем общий (оптимальный) сценарий.

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

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

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

Вариант с приоритетным сегментом

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

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

К примеру, цель №1 для Чебурашки и Коляна будет 9 баллов. Но для Сильвестра она будет иметь 11 баллов.

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

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

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

Прохождение сценариев на сайте

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

Вот, что нужно сделать:

  1. Задокументировать все неудобные моменты при прохождении сценария
  2. Составить список гипотез по улучшению UI сайта
  3. Формирование чек-листа с простановкой приоритетов внедрения/тестирования

Проектируем интерфейс сайта

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

Проектирование интерфейса сайта для улучшения юзабилити проекта

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

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

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

Исследование юзабилити на пользователях

👨‍💻 Если раньше мы моделировали пользовательские сценарии, то теперь будем их анализировать на реальных людях.

Исследование юзабилити на реальных пользователях сайта

Вот план методологии исследования юзабилити на пользователях:

  1. Постановка широких задач для посетителей
  2. Выбор респондентов, которые попадают под целевую аудиторию
  3. Анализ их сценариев
  4. Анализ обратных связей от людей
  5. Формирование списка гипотез

Постановка задач

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

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

Как еще можно заставить респондентов думать, как покупатели?

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

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

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

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

Вот примеры постановки широких задач в виде вопросов
  1. Если вам предстоит выбрать товар для себя, какими 5 критериями вы будете руководствоваться при выборе? Каждый из критериев оцените по 10-бальной шкале, в зависимости от степени важности/актуальности для вас.
  2. Руководствуясь своими критериями, подберите для себя на сайте подходящий товар. Какой информации для вас, как покупателя, не хватает о товаре? Какая раскрыта не полностью? А какая излишняя?
  3. Закажите выбранный вами товар online. Все ли получилось? Понятны ли вам условия оплаты и доставки? Какие сложности возникли? За счет чего можно сделать оформление и заказ удобнее? Укажите несколько причин почему вы выбрали именно этот товар.
  4. Найдите в поиске сайт конкурента, на котором удобнее подбирать и заказывать похожий товар. Почему? укажите несколько основных причин. Оцените наш сайт и проект конкурента по 10-бальной шкале.
  5. Наш сайт вызывает у вас доверие? Стали бы вы приобретать товар в этой компании или же обратились в другую? Почему? Назовите 5 основных причин почему вы закажете или не закажете товар на нашем сайте.
    [свернуть]

Поиск респондентов

Как вы думаете, где можно найти респондентов чтобы они попадали под целевую аудиторию? Вот несколько вариантов:

  1. Спросить у друзей, родственников и сотрудников компании. Можно записывать посещение пользователя и давать заполнить анкету.  Однако при частых анализах у таких людей просто «замыливается взгляд».
  2. Спросить у естественных посетителей сайта (используем опросы, email-рассылку, социальные сети и так далее)

Ниже хочу наглядно представить вам основные плюсы и минусы для двух видов респондентов.

Естественные посетители сайта:

  • Сложно замотивировать
  • Можно спрашивать только лояльных посетителей
  • Нет точного портрета респондента
  • Вряд ли согласятся потратить много времени
  • Сложно понять причины ответа
  • Являются целевой аудиторией сайта

Знакомые и родственники:

  • Замотивированы
  • Можно спрашивать у любых людей
  • Понимание портрета пользователя
  • Можно много спрашивать
  • Можно отследить сценарий поведения на сайте
  • Не являются ЦА

Группировка замечаний по usability

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

Как выявить все основные замечания по usability

Рекомендую сортировать по следующим типам:

  1. Контент (вода в тексте, плохие фото, шрифт и так далее)
  2. Удобство
  3. Доверие (например, не доверяет потому что не показан цех производства продукции)
  4. Условия заказа (может не хватать данных о работе компании или продукте)
  5. Технические ошибки
  6. Логика действий (например, человек не видит подсказки, что его товар попал в корзину)

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

Чек-лист по юзабилити сайта

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

Общий чек-лист по юзабилити сайта в интернете

Чек-лист:

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

Анализ юзабилити сайта

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

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

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

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

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

  • Процент отказов
  • Время на сайте/странице
  • Количество расшариваний
  • Количество регистраций
  • Сколько просмотрели страниц
  • Количество просмотренный страниц до цели
  • Количество консультаций
  • Сколько звонков
  • Online-заявки
  • Продажи
  • Рост среднего чека
  • Рост оборота
  • ROI
  • другие

Для сбора информации можно использовать:

  • Счетчики веб-аналитики (Яндекс Метрика или Google Analytics)
  • Данные CRM систем
  • Коллтрекинг
  • Данные владельца бизнеса

Выводы

Все правила юзабилити сайта сводятся к такому порядку действий:

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

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

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

Сервисы по тестированию юзабилити сайта:

  • Askusers — отечественный сервис по тестированию юзабилити сайта. Один из лучших в своем роде! Можно проводить различные исследования и A/B тесты. Еще есть возможность сравнивать свой проект с конкурентами, а также делать глубокий анализ на целевую аудиторию. С помощью этого сервиса можно многое узнать о своем сайте. Предоставляют максимально полную информацию. Поэтому многие топовые бизнесмены для анализа предпочитают использовать именно этот сервис. Для людей, желающих подзаработать, можно зарегистрироваться в качестве асессора и выполнять задания.
  • ChangeAgain — зарубежный сервис для анализа удобства пользования сайтом. Цены немного больше чем у предыдущей компании. Работает на основе данных из Google Analytics. Точность данных довольно высокая. Можно проводить A/B, MVT и Split тесты.
(голосов: 371, средний: 5,00 из 5)
Загрузка...

Сказать спасибо кнопками ниже:

Секреты эффективной рекламы
Секреты эффективной рекламы!

Успей скачать, пока бесплатно! До конца моего предложения осталось:

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

Юзабилити сайта - отзывы

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

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

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

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

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

  • Спасибо за кейсы и рекомендации. Это главные основы юзабилити.
    Скажите, в таблице у вас целей всего 10 а не 9. И как заставить испытуемого пройти сценарий?

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

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

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

Юзабилити сайта - отзывы

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

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