Юзабилити сайта


Оглавление (нажмите, чтобы открыть):

Улучшаем юзабилити сайта: 64 совета, как сделать сайт удобнее

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

Проверка шапки сайта

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

Проверьте, что в шапке сайта находится:

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

Проверка навигации сайта

Анализ навигации входит в стандартный анализ юзабилити сайта. На сайте может быть горизонтальное меню и вертикальное меню.

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

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

Навигация должна быть:

  1. Интуитивно понятной пользователю.
  2. Логичной, т.е. выстроенной по какому-то понятному принципу.
  3. Информативной. Проверьте, что в меню имеются все обязательные разделы. Их список мы разбирали в статье «Как правильно разработать и оптимизировать структуру сайта?»
  4. Ссылки в меню должны быть набраны текстом, не картинками.
  5. Цвет ссылок должен выделяться и не совпадать с цветом основного текста на сайте.
  6. Ссылки должны реагировать на наведение курсора. Например, у ссылки должен меняться цвет, появляться или исчезать подчеркивание.
  7. Избегайте перегруженного меню. Это усложняет навигацию на сайте.

Проверка оформления текстов на страницах

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

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

Проверка каталога товаров

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

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

Советы для владельцев интернет-магазинов:

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

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

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

Проверка юзабилити форм

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

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

Иные проверки

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

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

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

Юзабилити

Юзабилити (от английского usability) – это удобство пользования сайтом, мобильным приложением, компьютерной программой. Юзабилити сайта является одним из решающих факторов при продвижении ресурса. Яндекс, Google и другие поисковые системы могут определять, насколько сайт удобен для пользователя. Для этого предусмотрены как автоматические алгоритмы, так и отдельные сервисы, помогающие веб-мастеру достичь желаемого результата.

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

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

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

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

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

Тестирование сайта. Для тестов юзабилити часто используется сервис Google Page Insights, с помощью которого можно определить скорость загрузки страниц. Также, если у вас большое количество посетителей на сайте, можно сделать A/B-тестирование, пробуя различные варианты и анализируя изменения с помощью Яндекс.Метрики.

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

Анализ конкурентов. Для создания понятной и удобной структуры необходимо проанализировать сайты конкурентов из топа выдачи поисковых систем. Если они занимают лидирующие позиции в Яндексе, Google, то признаны удобными и полезными для пользователей. Проведите полный анализ юзабилити сайта, выявите сильные и слабые стороны и учтите все факторы при доработке.

Как улучшить юзабилити

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

Навигация и структура сайта

Проработанное меню

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

Грамотная перелинковка

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

«Хлебные крошки»

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

Карта сайта

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

Возможность быстро найти информацию

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

Наличие функциональных элементов

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

Оформление сайта

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

Шрифты и заголовки

  • Не используйте слишком мелкий или большой шрифт.
  • Посмотрите в Интернете, какие шрифты более востребованы и приятны для основной массы пользователей.
  • Откажитесь от неконтрастных шрифтов (светлый текст на светлом фоне или темный текст на темном фоне).

Цветовая гамма

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

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

Качественный контент

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

Содержание и грамотность

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

Структура и форматирование

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

Высокая скорость загрузки страниц

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

Отсутствие ошибок 404

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

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

Поддержка работы с разными браузерами и мобильными устройствами

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

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

Юзабилити сайта: как правильно удержать посетителя сайта

Вступление

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

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

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

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

Тезисы современного юзабилити сайта

Существуют исследования, что порядка 50% пользователей отказываются совершить покупку, а 40% вовсе не возвращаются повторно на сайт, где отсутствует качественное юзабилити.

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

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

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

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

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

Юзабилити анализ (тестирование)

Можно выделить 5 взаимосвязанных способов анализа юзабилити своего сайта:

  1. Анализ статистики сайта. Делается при помощи инструментов для веб-мастеров Яндекс.Метрики и Google Analytics. Код счетчика, установленный на сайт, позволяет собирать информацию о страницах входа, поведению посетителей, время пребывания на сайте и т.д.
  2. Анализ отзывов посетителей и гостей. Размещение форм голосования и опроса, создание форм обратной связи и отзывов.
  3. Юзабилити тестирование. Этот способ предполагает участие групп реальных людей, оценивающих сайт «свежим взглядом».
  4. Слежение за поведением пользователей. Для слежения используйте инструмент Вебвизор, который найдете на Яндекс.Метрике. Этот инструмент пишет, действия посетителя на сайте и показывает их на «тепловой карте».
  5. Заказ профессиональной экспертизы.

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

Выводы

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

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

Юзабилити сайта — что такое

Время чтения: 5 мин.

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

Мастер Йода рекомендует:  Хочу стать веб-разработчиком подробный план по изучению JavaScript

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

Садитесь поудобнее, сварите себе чашечку кофе, укройтесь теплым пледом — и мы начнем.

Все готово? Тогда поехали в увлекательный мир продаж!

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

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

Юзабилити сайта — это то, что создает желаемый опыт для пользователей.

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

Решения принимаются на основе следующих вопросов:

  • Есть ли что-то тут для меня?
  • Какую выгоду веб сайт несет мне?
  • Легко ли пользоваться сайтом?
  • Все ли понятно с первого раза?

Если посетители ответили на все вопросы «да», то ваш сайт прошел первую ступень оптимизации успешно.

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

Мера юзабилити

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

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

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

Минимизировать, в частности:

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

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

Факторы веб сайта

  • Эффективность
    Насколько быстро посетители могут выполнить те или иные действия.
  • Запоминаемость
    Если посетитель долго не заходил, как быстро он сориентируется на нем, чтобы выполнить какое-либо действие?
  • Ошибки
    Сколько ошибок делают посетители, насколько они серьезны и как легко их можно исправить?
  • Удовлетворение
    Насколько приятен, комфортен веб сайт посетителям?

Удобство и простота

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

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

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

Закон электронной коммерции: если посетители не могут найти продукт на сайте, они не могут его купить.

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

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

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

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

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

Любую теорию нужно проверять и давать достаточно времени для тестирования, чтобы в конце концов были сделаны правильные выводы. Если какой-то вопрос спорный, то не нужно стоять на своём и идти на принципы. Лучший способ его решить — проверка. Я всегда говорю это своим клиентам: «Давайте проверим это!» Тем самым вы быстро и легко докажете или опровергнете свои предположения. Практика и еще раз практика! Тестируйте свои гипотезы.

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

Стандарт — это когда 50% и более крупных сайтов размещают элементы в одном и том же месте.

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

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

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

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

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

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

Понравилась статья? Нажми на кнопку социальных сетей, чтобы сохранить статью!

Как улучшить юзабилити сайта: 6 простых советов

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

Автор: Анна Шумилкина, веб-аналитик Ingate

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

Рекомендации относятся в первую очередь к многостраничным услуговым сайтам и сайтам интернет-магазинов. У лендингов (landing page) другие принципы юзабилити, о них в статье говорить не будем.

Итак, как повысить удобство использования сайта?

1. Проработайте шапку сайта

Чтобы шапка была максимально удобной и эффективной, в ней должны присутствовать следующие элементы:

Дескриптор

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

Конверсионные элементы

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

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

Контакты

На сайте рекомендуем указывать один, максимум два номера телефона. Оптимально, если один из них будет в формате «8 (800)…», так как он бесплатный для звонков из регионов. Большее количество номеров часто вызывает замешательство пользователей и визуально загромождает шапку.

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

Рассмотрим ещё несколько примеров шапок сайтов с дескриптором, конверсионными элементами и контактами:

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

  • шапка должна быть небольшой по высоте (в среднем от 40 до 70 px), чтобы не мешать обзору;
  • содержать кнопку перехода на главную страницу;
  • содержать телефон и/или кнопку «Заказать звонок» для связи с компанией;
  • содержать значок «Корзины» для быстрого перехода в неё и оформления заказа (для интернет-магазинов).

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

Вот примеры закреплённых при скроллинге шапок:

2. Проработайте главную страницу сайта

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

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

Яркий баннер/баннеры

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

Блок преимуществ


Чтобы улучшить юзабилити сайта, важно кратко и ёмко сформулировать основные преимущества компании, товаров или услуг (4–7 слов) и визуализировать их. Иконки должны соответствовать содержанию пунктов и вызывать конкретную ассоциацию.

Ссылки на основные разделы сайта

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

3. Проработайте элементы навигации

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

Разберём, какие элементы нужно проработать в первую очередь.

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

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

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

Футер

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

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

  • контакты;
  • блок со ссылками на инфостраницы («О компании», «Фотогалерея», «Партнёрство», «Вакансии» и др.);
  • блок со ссылками на сервисные страницы («Доставка», «Оплата», «Условия возврата», «Гарантийное обслуживание» и пр.);
  • ссылки на аккаунты компании в соцсетях.

Примеры оформления футера:

Кнопка навигации «Наверх»

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

Контентная перелинковка

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

Пример ссылок с отдельных фраз:

Пример блочной перелинковки внутри текста:

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

4. Проработайте страницы товаров/услуг

Такие страницы можно разделить на три вида:

  • каталоги товаров или услуг;
  • карточки товаров;
  • страницы услуг.

Рассмотрим каждую из них.

Каталожные страницы

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

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

Пример каталога услуг в тематике «Аренда выделенных серверов»:

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

Карточки товаров

С точки зрения эффективности один из лучших способов организации карточки товара следующий:

  1. Изображения товара лучше располагать слева. У пользователей должна быть возможность рассмотреть продукт с разных ракурсов и приблизить его. Неактивные фото рекомендуется размещать в виде маленьких превью под основным фото или сбоку от него;
  2. Справа (сверху вниз) следует указать наименование продукта, цену, расположить функционал изменения количества выбранных товаров и конверсионные элементы. До кнопок заказа желательно разместить краткое описание, главные характеристики или основные условия доставки и оплаты.
  3. Фото, главную информацию о товаре, цену и кнопку заказа лучше размещать в первом экране просмотра, чтобы пользователю не пришлось совершать лишнее действие — прокрутку.
  4. Детальные характеристики продукта рекомендуется располагать под всеми указанными блоками во вкладках.

Примеры оформления карточек товаров:

Страницы услуг

Здесь рекомендуется разместить блоки:

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

Прочие элементы опциональны, их желательно размещать после указанных.

5. Проработайте функционал заказа

Формы захвата данных пользователя

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

  • Минимум полей. Если для заявки хватит одного поля, смело оставляйте только его.
  • Минимум обязательных полей. В идеале — только поле для ввода телефона или email-адреса (в зависимости от того, какой тип связи предпочтительнее для компании). В поле для ввода телефона рекомендуется добавлять маску, чтобы минимизировать риск ошибки при вводе. Также важно указать, какие поля обязательны для заполнения, например отметьте их звёздочкой. Для улучшения юзабилити сайта важно, чтобы функционал проверки заполнения обязательных полей был интуитивно понятным. Например, если пользователь не заполнит поле, его границы подсветятся красным цветом и появится надпись: «Пожалуйста, заполните обязательное поле».
  • Отсутствие капчи. Если капча всё же необходима для фильтрации ботов, рекомендуется использовать самую простую. На данный момент это reCaptcha от Google.
  • Яркая и заметная кнопка отправки заявки.
  • Наличие надписи о согласии на обработку персональных данных со ссылкой на политику конфиденциальности компании.
  • После отправки заявки пользователю должно показываться оповещение, в течение какого времени с ним свяжутся.

Примеры форм заявки:

Страница «Корзины»

Основные принципы организации страницы «Корзины»:

  1. Товары, которые пользователь добавил в «Корзину», должны быть визуализированы. Необходимо разместить их фото, указать наименование, цену, количество. Кроме того, у покупателя должна быть возможность увеличить и уменьшить число добавленных продуктов, удалить их, а также перейти из «Корзины» к карточке товара.
  2. Необходимо указать общую стоимость покупки, причём она должна автоматически изменяться при добавлении в «Корзину» новых товаров или их удалении.
  3. Кнопка начала оформления заказа или покупки в один клик должна быть яркой и заметной.
  4. Каждый шаг в процессе оформления заказа (выбор способа доставки и оплаты, указание адреса) важно визуально отделить от следующего.
  5. Пользователь должен чётко понимать, сколько он заплатит за доставку каждым из способов. Эту цифру желательно выводить отдельно, плюс указывать итоговую сумму с учётом стоимости доставки.

6. Увеличьте скорость загрузки основных страниц сайта

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

Чтобы оптимизировать скорость загрузки, нужно:

  1. На основе статистики Яндекс.Метрики и Google Analytics выбрать основные страницы, которые приносят максимальное количество трафика и/или страницы, на которые запланировано вести трафик в ближайшем будущем.
  2. Протестировать скорость их загрузки с помощью любых общедоступных сервисов, например Pagespeed Insights от Google.
  3. Реализовать доработки с учётом рекомендаций сервиса. Если вы не специалист в данной области, сделать это будет достаточно сложно, зачастую требуется помощь веб-разработчика.

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

Если доля мобильного трафика составляет более 20% или вы планируете увеличить её в ближайшее время, например за счёт запуска контекстной рекламы, создайте мобильную верстку или разработайте адаптивную версию ресурса для удобного отображения на смартфонах. И не забывайте про A/B-тесты. Это лучшее решение, если вы не знаете наверняка, что лучше сработает в конкретном случае!

Что такое юзабилити и какие параметры влияют на удобство сайта для пользователя

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

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

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

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

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

Принципы юзабилити

Удобство сайта для пользователя можно оценить по следующим составляющим:

  • наличие формы поиска на сайте. Обычно размещается в самом заметном месте – в шапке или вверху в сайбаре;
  • навигация. Очень хорошо себя зарекомендовали «хлебные крошки». Они позволяют перейти пользователю, как на главную, так и в раздел или под раздел, где находится статья или товар;
  • контактные данные в шапке сайта для коммерческих проектов (телефоны, электронная почта, адрес офиса). Желательно наличие отдельной страницы «О компании» (с адресом офиса, сертификатами), где бы пользователь увидел, что компания надежная и ей можно доверять.
  • удобство и простота использования сайта, переходов по нему и поиск информации – это основа юзабилити. Например, «Правило трех кликов» — согласно которому посетитель должен сделать на более 3 кликов, чтобы найти интересующую его информацию.
  • корректное отображение сайта и всех элементов на нем. Подразумевается не только кроссбраузерность, но и наличие мобильной версии. Элементы не должны наезжать друг на друга, закрывать просмотр текста на странице;
  • дизайн. В этом вопросе, не редко происходит конфликт дизайна и юзабилити. Рекомендации юзабилити сайта предполагают минималистичный дизайн, с минимумом графических элементов, влияющих на восприятие контента, но и на скорость загрузки ресурса в целом.
  • контент. Материалы на сайте не только должны быть полезными для посетителя, но и удобны для восприятия посетителями. Юзабилити статьи включает: логическую структуру подачи текста, оформление заголовков внутри статьи, содержание страницы для быстрой навигации, наличие иллюстраций и видео, выделение ключевых мыслей. Подробнее по ссылке https://inetsovety.ru/struktura-i-oformlenie-statyi-na-sayte/

к оглавлению ↑

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

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

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

Человек закроет сайт в течение первых 15 секунд, если:

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

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

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

Рекомендации для улучшения юзабилити сайта

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

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

Мастер Йода рекомендует:  Персональные рекомендации от Яндекс.Директ

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

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

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

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

Тестирование юзабилити сайта

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

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

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

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

Подытожим, какие параметры улучшают юзабилити сайта:

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

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

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

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

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

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

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

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

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

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

Восприятие информации на сайте

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

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

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

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

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

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

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

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

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

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

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

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

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

Контраст

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

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

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

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

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

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

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

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

Иконки понятны для многих

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интернет-магазин 5 элемент

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

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

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

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

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

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

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

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

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

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

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

Распределение трафика для рунета

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

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

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

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

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

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

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

Сниппеты в поисковой выдаче

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

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

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

Бизнес же со своей стороны хочет, чтобы продажи росли и были выгодными. Вот как раз несоответствие этих двух взглядов приводит к тому, что конверсия нигде не будет равной 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. То есть под сегменты расставляем приоритеты.

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

В таблице всего получилось 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

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

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

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

25+ советов по юзабилити сайта

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

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

Немного теории

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

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

Чего хотят пользователи? – какие элементы сайта мешают конверсии и негативно влияют на продажи? Можно строить огромное количество догадок, пытаясь понять человеческую логику при просмотре страниц сайтов. А можно воспользоваться технологией айтрекинга (eye-tracking) и тепловыми картами, чтобы выявить проблемы.

Веб-дизайн, за который пользователи не скажут «спасибо» – эксперты по юзабилити без устали повторяют «Веб-сайт должен быть удобным и понятным для пользователя!». К сожалению, к этим словам прислушиваются далеко не все. Зачастую владельцы сайтов в стремлении сделать интересный и необычный сайт (которым не стыдно похвастать перед друзьями и родственниками) принимают самые безумные решения дизайнеров. Специалисты eConsultancy сделали интересную подборку «креативных находок» на сайтах, которые не стоит повторять.

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

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

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

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

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

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

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

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

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

Правила юзабилити ссылок – верно, ли считать, что «все гиперссылки должны быть синими и подчеркнутыми», или всё гораздо сложнее?

10 приёмов усовершенствования форм заказа на ecommerce-ресурсах – с комментариями известного эксперта по юзабилити с подходом психолога Дмитрия Сатина.

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

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

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

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

Мобильные сайты

19 причин, почему ваш сайт не посещают с мобильного – список наиболее частых проблем, которые многие компании до сих пор не решили.

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

Юзабилити на практике

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

Принципы юзабилити: понятно, удобно, комфортно. Коротко о главном

В современном мире понимание основ юзабилити является необходимостью. Большинство посетителей сайта не совершают действий, которых от них ждут владельцы ресурсов. Люди не заказывают товар, не регистрируются, не подписываются на обновления и т.д. В чем причина такого поведения пользователей?
Причина проста – ресурс оказывается неудобным для пользователя. Например, для того чтобы «заказать» продукт, приходится пройти несколько страниц, а кнопку регистрации и вовсе невозможно обнаружить. Это делает ресурс неконкурентоспособным.
Как уменьшить количество отказов от использования сайта? Если проект нуждается в основательном подходе, можно обратиться в студию, к специалистам. Юзабилити-лаборатории предлагают не только различные варианты тестирования и проектирование интерфейса. А если бюджет ограничен, можно попробовать познать азы юзабилити самостоятельно.

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

  1. Правило 7-ми.
    Известно, что способности человеческого мозга небезграничны. Человек способен держать в кратковременной памяти не более 5-9 сущностей. Поэтому не следует размещать в навигации больше 7 пунктов.
    С этой точки зрения сайт tutu.ru, безусловно, заслуживает хороших отзывов, поскольку основной функционал удалось разместить в шапке сайта, ограничиваясь 4 пунктами меню и выпадающим списком.
    В то время как сайт Российских Железных дорог — отличный пример того, как делать не надо. От количества разрозненной информации пестрит в глазах, хочется просто закрыть его и больше никогда не заходить.
  2. Правило 2х секунд.
    Чем меньше пользователь ждет отклика программы, сайта или приложения, тем больше вероятность того, что он не откажется от использования этого продукта. 2 секунды – это оптимальный временной интервал отклика программы, именно к нему стоит стремиться. Так что стоит сто раз подумать, прежде чем ставить на сайт тяжелую флэшевую заставку, как это сделали на mtv.ru.
  3. Правило 3х кликов.
    Никому не нравится серфить страницы, в поисках необходимой информации и функционала. У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это способствует и более успешной индексации сайта поисковыми роботами.
  4. Правило Фиттса
    Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели.
    Метафорически правило можно объяснить так: легче указать на зажигалку, чем на спичку. Но указать на утес или огромный дирижабль одинаково просто. Если объект интерфейса, например ссылка, и без того достаточно крупный, нет смысла делать его еще крупнее.
  5. Перевернутая пирамида
    Этого принципа придерживается сам гуру юзабилити, Якоб Нильсен. Статья должна начинаться с итогового вывода, за которым следуют ключевые моменты, а завершаться наименее важной для читателей информацией. Это оптимально для веба, где пользователь хочет получить информацию максимально быстро.

Но даже спроектированный по всем правилам интерфейс стоит протестировать. Фокус-группы – самый доступный способ для тестирования «своими силами».

Тестирование состоит из четырех этапов:

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

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

Пример по теме

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

Кнопка «enter» звучит как призыв попасть на главную страницу сайта. Но вместо главной страницы попадаем на «чистый лист».

Здесь взгляд приковывает изображение красной ленты, и мы, конечно, думаем, что это ссылка, и может даже на меню. Но нет – это всего лишь символ борьбы со СПИДом, который призван обозначить общественную позицию певца и не более. И тогда рука тянется в левый верхний угол. А там и не меню вовсе, а кнопка полноэкранного режима. Несколько секунд в замешательстве, и поиски окончены, вожделенное меню внизу, в центре экрана. Кликаем… и видим ПЛЕЕР! Нас снова обманули.

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

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

Урок 143. Что такое юзабилити сайта и почему оно так важно?

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

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

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

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

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

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

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

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

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

Как сделать сайт лучше?

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

Навигация сайта

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

Обязательно разместите в меню навигации все важные элементы:

  • Контакты;
  • О компании;
  • Услуги;
  • Доставка и оплата.

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

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

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

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

Скорость загрузки сайта

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

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

Обратная связь

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

  1. Расположите телефон в шапке сайта;
  2. Сделайте шапку сайта “ездяющей”, то есть шапка сайта вместе с номером телефона должна двигаться вместе со скроллом;
  3. Внедрите виджеты обратного звонка типа JivoSait, Onicon, CallBackHunter
  4. Разместите формы обратной связи в наиболее удобных местах на странице;
  5. Обязательно вставьте форму обратной связи на страницу “Контакты”.

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

Поиск по сайту

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

Реализовать это можно с помощью специальных плагинов от Яндекса или Google, также можно воспользоваться плагинами для CMS.

Оформление заявки. Регистрация

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

А оформление заказа в интернет-магазине упростить до 2 – 4 полей, так как людям лень заполнять объемные формы и передавать лишнюю информацию (как им кажется) незнакомым людям.

Контент

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

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

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

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

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

Мастер Йода рекомендует:  Провайдеры будут удаленно управлять компьютерами пользователей
Добавить комментарий