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

Содержание материала:

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

Проверка сайта

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

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

Но каков процент именно таких разборчивых людей среди ваших посетителей?

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

Тревожные звонки

Здесь важно не упустить момент старения вашего ресурса. Поэтому стоит периодически смотреть за статистикой. Для этого используйте сервисы Google Analytics или Яндекс Метрика. Если вы обнаруживаете следующее, то начинайте аудит юзабилити:

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

Приступаем к анализу

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

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

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

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

Дизайн и элементы

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

Шапка, верхняя часть страницы, отображает логотип, название. Клик по лого переносит посетителя на главную. Возможно указание телефонных номеров или других контактов. Логотип должен быть оригинальным и узнаваемым. Лучше заказать его у профессионалов.
Контент полностью связан с заголовками. Текстовые материалы имеют структуру, разделы, подзаголовки, абзацы, списки, выделение ключевых фраз. Изображения подписаны, укомплектованы в галерею, если их много.
Обложка или главная точно определяют вектор сайта. Если это компания — то чем она занимается, если магазин — что продает. Старайтесь выражать задачи лаконично, в минимум предложений и слов. Делайте так, чтобы было «понятно даже бабушке».
Меню находится слева, либо в верхней части. Его видно без дополнительных прокруток, хорошо, если оно закреплено или появляется при небольшом скролле. Хороший пример — ВКонтакте.
Географическую привязку следует указывать сразу же. Если вы работаете в определенном городе, будь то Минск или Санкт — Петербург, то сообщайте в первых текстовых группах. Это положительно скажется на SEO.
Цена имеет важное значение для потребителя. Если ваша стоимость меньше, чем у конкурентов, то можно сообщить об этом в начале текстовой группы. Если она высокая, то только после того, как опишите свои преимущества.

Структура сайта

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

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

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

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

Порядок лендинга

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

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

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

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

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

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

Понятие юзабилити веб-сайта: принципы, параметры эффективности

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

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

Итак, ключевые параметры эффективности юзабилити веб-сайта:

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

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

Серьезные ошибки, ухудшающие юзабилити

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как улучшить юзабилити сайта? Рекомендации и советы

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

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

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

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

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

текст структурирован: заголовки, подзаголовки, маркированные списки, абзацы;
текстовые блоки четко отделены друг от друга;
наличие белых полей и межстрочных интервалов;
размер кегля 14-16 рх;
шрифты и форматирование одинаковые на всех страницах сайта;
кликабельные части текста выделены синим;
ключевая информация подается по F-кривой (по левому краю, вверху, по центру первого экрана);
достаточный контраст между текстом и фоном (например, черный на белом);
CTA на кнопках — в неопределенной форме глагола (инфинитив): заказать, подписаться, найти.

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

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

Хотите поблагодарить за статью? Сделайте репост

Улучшение юзабилити сайта — насколько это важно?

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

Топ-пост этого месяца: Как сделать адаптивный шаблон объявления в Яндекс.Директ

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

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

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

Улучшение юзабилити: основные методы оптимизации

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

Навигация сайта. Как много кликов пользователю приходится сделать, чтобы найти то, что он ищет, и сделать заказ? Все ли действия важны или можно ликвидировать промежуточные шаги и тем самым упростить путь к цели? На какое действие приходится больше всего отказов от продолжения совершения заказа?
Уровни сайта. Анализ этого фактора позволяет увидеть, насколько спрятаны важные страницы веб-ресурса от пользователей. Замечено, что глубокие уровни остаются недоступными не только для посетителей, но и для поисковых роботов.
Перелинковка. Ссылки в контенте могут служить ключевыми словами для поискового робота и оптимизировать ориентацию пользователей на сайте. Особое внимание надо уделить тексту этих ссылок.
Заголовки. Они должны четко отражать суть текста. Контент может быть очень интересным, но неудачный заголовок убивает все шансы на прочтение.
Поиск. Сайты, в которых более 100 страниц, должны быть снабжены строкой поиска.
Шрифты. Они должны быть удобны для восприятия.
Структура текста. В веб-контенте исключены длинные абзацы. Текст, какой бы он ни был длины, должен быть четко структурирован. Обязательны подзаголовки, буллитные и нумерованные списки, схемы.

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

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

Оптимизация юзабилити и поведенческие факторы

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

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

Оценить все эти показатели позволяют Google Analytics и Яндекс.Метрика.

Показатель отказов

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

Как уменьшить число отказов?

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

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

Глубина просмотра

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

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

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

Посмотреть глубину просмотра в Яндекс.Метрике можно в отчете «Содержание», дальше надо перейти на «Страницы входа». Здесь можно увидеть график по глубине просмотра:

Время, которое пользователи проводят на сайте

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

Какие именно шаги по улучшению юзабилити увеличивают время пребывания пользователя на сайте?

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

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

Что влияет на юзабилити?

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

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

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

Страница перегружена анимацией

Лаконичное оформление сайта

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

Читабельный текст для сайта

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

Пример плохой формы

Пример хорошей формы

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

Пример корректного отображения информации при 404 отклике страницы

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

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

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

Юзабилити-аудит сайта

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

Этап первый: анализ функциональных решений

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

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

Второй этап: анализ отсутствующего функционала

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

Третий этап: анализ трафика

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

Отчёт и рекомендации

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

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

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

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

Стоимость

Для небольших сайтов от 10.000р до 20.000р.;
Для сайтов услуг или небольших интернет-магазинов от 20.000р. до 40.000р.
Для крупных порталов, сайтов конкурентных сфер и интернет-магазинов от 40.000р.
Средний срок выполнения задачи рассчитывается по формуле: стоимость / 1000. Таким образом выполнение самого простого SEO проекта структуры сайта составит 5-ть дней.

Расчёт точной стоимости и сроков осуществляется бесплатно. Обращайтесь по контактам, указанным на сайте.

Как сделать самостоятельный аудит юзабилити сайта и улучшить его

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

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

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

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

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

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

Юзабилити влияет на посещаемость и конверсию (если речь о сайте для продаж) сайта. И это влияние легко прослеживается.

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

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

Разработка

Адаптивность

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

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

Правильный код

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

Код сайта должен быть максимально валидным. Это определяется активированной темой и плагинами сайте.

Взаимодействие с аудиторией

Заметные призывы к действию

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

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

Наличие формы обратной связи

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

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

Контент

Семантика

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

Контент должен решать проблемы и вопросы посетителей. Он должен давать максимально полные советы и варианты решения.

Оформление

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

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

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

Архитектура и структура

Поиск

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

Форма поиска должна быть на видном месте и работающей.

Навигационное меню

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

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

Дизайн

Всё нужное на первом месте

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

Всё важное должно быть на первом экране.

Привычный внешний вид

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

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

Юзабилити-аудит

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

Топ-пост этого месяца: Как объединить в React js компоненты для упрощения работы с приложением примеры и синтаксис

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

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

Маленькие ошибки — большие убытки

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

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

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

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

Когда нужен аудит юзабилити?

Как минимум в трех случаях:

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

Как понять, что есть проблемы с юзабилити?

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

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

1. Поведенческие показатели сайта. С их помощью можно объективно понять, что с сайтом что-то не так. Поведенческие показатели доступны в Яндекс.Метрике в отчете «Посещаемость». Обратите внимание на отказы, глубину просмотра и время на сайте. Также интересен показатель доли новых посетителей, который отражает степень лояльности пользователей.

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

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

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

3. Оценка эксперта. Необязательно платить эксперту. Есть несколько способов бесплатно получить консультацию:

запишитесь на бесплатный вебинар, касающийся дизайна и юзабилити сайта, — организаторы лояльно относятся к своим подписчикам, охотно отвечают на вопросы и безвозмездно дают советы (максимум — в обмен на лайки и репосты);
найдите тематические статьи с активным обсуждением в комментариях и задайте свои вопросы автору по поводу юзабилити сайта, тем более что к дискуссии может подключиться много людей;
отправьте заявку на бесплатный аудит в SeoPult (на адрес [email protected]) — если ваш сайт заинтересует администрацию, результаты аудита будут опубликованы в постоянной рубрике блога «Экспертиза».

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

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

Какие составляющие юзабилити подлежат аудиту?

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

1. Техническая сторона

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

Валидность кода HTML, CSS и JS (при неправильной верстке сайта элементы могут отражаться некорректно, а функционал будет нерабочим или работать с перебоями. Проверить валидность HTML можно с помощью сервиса validator.w3.org, CSS — jigsaw.w3.org, JS — piliapp.com).
Скорость загрузки сайта (проверить ее можно с помощью PageSpeed Insights — стремитесь к тому, чтобы при переходе на сайт с мобильного и ПК оценка была не ниже 90%).
Ответ сервера: существующие страницы отдают код 200, несуществующие — 404 (обязательно создайте страницу 404 в дизайне сайта с указанием причины ошибки и ссылками на главную или ключевые разделы).

2. Контент

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

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

3. Навигация

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

ссылки в тексте легко различимы, и их нельзя спутать с простым текстом, выделенным жирным или подчеркнутым;
небольшое количество уровней вложенности (в идеале — не более 3-4);
количество пунктов меню на каждом уровне вложенности — не более 7-8;
настроены человекопонятные URL (ЧПУ);
наличие «хлебных крошек» (чтобы пользователь понимал, в какой части сайта он находится, и мог вернуться на предыдущий этап);
нет «битых» ссылок;
есть HTML-карта сайта на отдельной странице.

4. Дизайн

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

Во время аудита учитывайте такие нюансы:

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

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

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

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

6. Идентификация и контакты

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

логотип — на всех страницах сайта;
настроенный фавикон;
номер телефона (и другие контакты при необходимости) — на видном месте на всех страницах;
страница «О нас» (общее описание деятельности);

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

Подводим итоги

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

Юзабилити-аудит адаптивности сайта застройщиков

Специалист по юзабилити Зинаида Гришанина проанализировала адаптивность сайта объединения застройщиков «ВКБ-Новостройки» и составила рекомендации, актуальные для многих сайтов недвижимости.

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

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

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

Есть два варианта сделать сайт удобным для пользователей планшетов и смартфонов — реализация адаптивного дизайна или создание отдельной мобильной версии. Сайт «ВКБ-новостройки» использует первый подход.

Оценку качества мы проводили как с точки зрения выполнения UI-дизайна (дизайна пользовательского интерфейса), так и UX-дизайна (дизайна пользовательского опыта), в том числе в формате сравнительного анализа с удачными версиями прямых конкурентов и лидеров рынка недвижимости, таких как: develug.ru, cian.ru, gik23.ru, homesoverseas.ru, domofond.ru, sob.ru.

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

Что нам дали данные веб-аналитики

По данным Яндекс.Метрики за последний квартал доля посетителей, взаимодействующих с сайтом «ВКБ-Новостройки» с помощью мобильных устройств, составила треть всей аудитории — 34 % (26,6% приходится на смартфоны и 7,7% —- на планшеты).

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

Рисунок 1. Поведенческие характеристики в отчете «Устройства» (Яндекс.Метрика, данные за последний квартал).

Большинство пользователей используют мобильные устройства Samsung (10,02% от всех посетителей сайта) и Apple (9,29%). При этом для планшетов поведенческие характеристики примерно одинаковы для всех марок, а для смартфонов — хуже для устройств марки Apple.

Рисунок 2. Отчет «Устройства» (Яндекс.Метрика, данные за последнюю неделю).

Обнаружив высокий показатель отказов на устройствах Apple, мы провели экспресс-анализ адаптивности сайта, используя смартфон Apple iPhone 6s plus. В анализе мы также учли то, что по данным «Вебвизора» Яндекс.Метрики посетители со смартфонами просматривают сайт в портретной ориентации (используют устройство вертикально).

Проблемы со скоростью загрузки

Мы проверили скорость загрузки сайта «ВКБ-Новостройки» на мобильных устройствах на примере главной страницы с помощью сервиса Google PageSpeed Insights. Он показал низкую скорость загрузки.

Рисунок 3. Результаты проверки скорости загрузки сайта на мобильных устройствах с помощью сервиса Google PageSpeed Insights.

Анализ отображения сайта на смартфонах

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

Быстрая ссылка «наверх»

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

Отображение контента

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

Рисунок 4. Неоптимальное отображение текстового контента и ссылки на форму заказа обратного звонка

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

Чтобы оценить удобство и функциональность сайта на смартфоне, попытаемся подобрать квартиру по определенным характеристикам. Рассмотрим ситуацию, когда потенциальный покупатель ищет двух-трехкомнатную квартиру в Краснодаре, не дороже 6 млн. рублей, не в ипотеку. Дом должен быть уже сдан в эксплуатацию. Общая площадь квартиры должна составлять не менее 60 квадратных метров. Этаж не так важен. Санузел — строго раздельный, окна выходят во двор. Остановки общественного транспорта в пешей доступности (5 минут пешком), развитая инфраструктура (супермаркеты, мед. учреждения и пр.). Желательно наличие неподалеку «зеленой зоны» — парка или лесопарка.

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

Фильтр подбора объектов на главной странице

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

Нет возможности выбрать одновременно несколько вариантов в поле «количество комнат».
Неочевидно, каким образом допустимо вводить данные в поле «площадь»: конкретное число, обозначающее желаемую площадь, или значения в текстовом формате, например, «от 60» или «60-200». Также неясно, нужно ли указывать единицу измерения — «кв.м.» или «м 2 ».
В поле «дата ввода в эксплуатацию» требуется вводить слишком конкретные данные. Между тем, покупателю достаточно информации, что дом уже сдан. Чтобы отсеять варианты в еще строящихся домах, пользователь вынужден придумать, как ему задать значения, чтобы на странице с результатами поиска отображались квартиры только в сданных в эксплуатацию домах.
Также неочевидно, в каком формате вводить данные в поле «этаж», например, строго «1», «1-5», «до 10» и т.п.
После выбора всех параметров в расширенном фильтре нужно нажать на кнопку «найти квартиру», которая отображается выше, под «кратким» поиском. Под «полным» поиском расположена достаточно яркая кнопка заявки на быструю консультацию, поэтому некоторые пользователи могут нажать на нее по ошибке (перепутать с кнопкой действия для фильтра подбора объектов).

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

Страница «Новостройки Краснодара»

На странице показывается восемь блоков с описаниями ЖК (микрорайонов) в Краснодаре. В них приводится только название и адрес, не указаны ни застройщик, ни уровень цен на квартиры, ни количество доступных квартир и количество комнат в них. Адрес объекта набран простым текстом и некликабелен — его нельзя открыть на карте. Для того чтобы узнать преимущества одного ЖК перед другими, пользователю придется переходить в каждый из них отдельно. Однако наверху страницы есть фильтр, с помощью которого можно подобрать варианты по нужным характеристикам. Воспользовавшись им, мы обнаружили, что возможности открыть «расширенный поиск» нет, а в поле «количество комнат» можно выбрать только один вариант.

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

Страница результатов поиска «Квартиры в новостройках Краснодара»

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

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

Рисунок 7. Страница результатов поиска.

Примеры аудитов

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

Состав каждого аудита индивидуален с учетом особенностей конкретного сайта.

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

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

15 шагов по улучшению юзабилити

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

Ясное и осознанное взаимодействие

1. Выбирайте размеры шрифтов

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

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

2. Пишите информативные сообщения об ошибках

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

Но настоящие пользователи не могут этим похвастаться.

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

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

Удобство форм ввода

3. Упростите требования к паролям

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

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

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

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

4. Используйте правильные формы ввода

Многие советуют использовать форматирование данных в полях ввода. Например, если добавить input[type=»email»], input[type=»tel»] , то при вводе автоматически переключается раскладка. Однако выглядит это странно и вовсе не помогает, а мешает в заполнении формы.

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

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

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

5. Срежиссируйте яркий и запоминающийся опыт первого использования

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

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

6. Дьявол в деталях

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

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

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

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

7. Микрокопирование не должно использоваться задним числом

«Микрокопирование» имеет отношение ко всем маленьким инструкциям и подтверждениям, используемым в приложениях.

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

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

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

8. Всегда обеспечивайте наличие контекста

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

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

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

Крайне популярный сегодня material design от Google вывел на новый уровень использование анимации для обеспечения контекста. Нажатие на объект запускает анимированное перетекание из текущей страницы к подгружаемой информации об объекте. Это наглядно показывает логические взаимосвязи, откуда что проистекает и куда пользователь вернётся.

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

9. Атомарные действия

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

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

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

10. Сообщения об ошибках

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

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

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

11. Сосредоточение уведомлений в одном месте

Благодаря распространению одностраничных приложений мы имеем возможность унифицировать всевозможные пользовательские уведомления. Граница между нативными и веб-приложениями становится всё более размытой. Когда приложению нужно повзаимодействовать с пользователем, то куда легче отправлять все сообщения в какое-то отдельное место, а не размещать их в контексте. Хотя из этого правила есть исключения. Хорошим примером репозитория уведомлений является папка входящих сообщений Gmail. А модуль для организации уведомлений Growl не даст пользователю не заметить важное сообщение.

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

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

12. Избегайте тупиковых состояний

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

13. Предоставляйте пользователю контроль

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

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

14. Избегайте рассеивания внимания

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

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

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

15. Разбивайте большие сложные задачи на более мелкие операции

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

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

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

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

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

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

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

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

Топ-пост этого месяца: Реально ли заработать в интернете, получится ли это у вас, нужны ли вложения и сколько вы сможете