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

Доброго времени суток! Если ты здесь, значит уже озадачился вопросом, как улучшить свой распрекрасный сайт (лендинг, интернет-магазин, бложичек и т.д.) и повысить эффективность его производительности. Что ж, попроси кота плеснуть тебе коньячку в кружечку, устройся поудобнее, и вникай (ну или, если лень, то сразу отмотай вниз до выводов в заключении). В последние года два под понятием «улучшить» сайт скрывается заморское красивишное слово «оптимизировать». Поэтому за отправную точку улучшения сайта возьмем два параметра: SEO-оптимизированности и юзабилити сайта. Я хочу остановиться более подробно на последнем. Итак, мы знаем: для того, чтобы что-то улучшить, мы должны сначала это «что-то» оценить по определенным параметрам, составить отчет о характеристиках этого «чего-то» и далее – тестировать, изменять, творить ахалай-махалай и получать результаты (которые тоже надо будет анализировать, но это уже будет другая история). Именно поэтому глаголить в этой статье я буду про аудит юзабилити лендинга (не пугайся, к сайтам эти правила тоже вполне применимы). Погнали!

Аудит юзабилити – зачем мне это нужно?

Коротко о главном: согласно авторитетному источнику, Стандарту ISO 9241-11, например, «Юзабилити – степень эффективности, продуктивности и удовлетворенности определенным продуктом при использовании его определенным пользователем в определенном контексте для достижения определенных задач.». О как умно! А в двух словах, юзабилити – это степень ошуршенности вашего сайта в глазах ваших юзеров, базирующаяся на трёх китах: эффективности сайта, продуктивности и способности удовлетворить запросам юзера. С точки зрения SEO проводить аудит юзабилити необходимо, так как улучшение показателей поведенческих факторов (информативность текстов, процент конверсии, время пребывания на сайте и прочие 127 факторов SEO-оптимизации) помогает поднять сайт в позициях поисковых систем. Для развития идеи, с которой был создан тот или иной интернет-ресурс, аудит юзабилити так же полезен потому, что он позволяет не только откорректировать сам ресурс, но и докрутить саму цель, ради которой создавался сайт. Задача аудита юзабилити: найти проблемные места сайта, докрутить их, упростить навигацию юзера, предоставить информацию, максимально соответствующую запросам посетителя – ни шага влево/вправо, и повысить конверсию сайта. И пока ты, читатель, не втянулся в этот головокружительный мир юзабилити, предупрежу тебя: аудит юзабилити – это всего лишь самый первый шаг для оптимизации твоего ресурса. Далее на основе данных аудита будут проводиться тестирования, установки инструментов аналитики, правки, прикручивания скриптов и кодов в индекс, тестирования и опять тестирования…пока совершенный результат, которому нет предела, не будет достигнут. Интересно? Тогда более не смею тянуть кота за причиндалы, читай и пробуй провести аудит, не отрываясь от статьи.

Лучшие помощники аудита юзабилити

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

1. Анализировать статистические данные можно через такие ресурсы как Яндекс.Метрика или Google.Analytics. ЯМ однозначно проще, чем ГА, но всё же потребует минут 40, чтобы разобраться в нем.
2. Спросить самих посетителей сайта, что им не понравилось. Именно «НЕ понравилось», так как люди склонны более охотно давать критику, нежели похвалу чему-либо/кому-либо.  Для этого тоже существует ряд скриптов и приложений. Один из них находится на сайте Visual Web Optimizer (да, мы молимся на этот ресурс всем агентством, потому что он реально удобный!).
3. Наблюдать за действиями посетителей сайта можно не только втихаря из-за спинки стула подопытного, но и с помощью тех же инструментов Яндекс.Метрика и Google.Analytics.

Аудит юзабилити сайта, по бОльшей своей части, основывается на человеческих факторах, на принципах эргономики в том числе. Так вот, я к чему веду: зная эти стандарты, вполне реально и логично разделить направления аудита юзабилити на 3 жирных категории: оценка технической части сайта, дизайна и контента. Разумеется, параметры аудита юзабилити могут меняться в зависимости от ниши, структуры сайта (многостраничник, сайт-визитка, лендинг, подписная/продуктовая страницы, блог), географического расположения пользователей. Но я всё же хочу затронуть самые актуальные пункты, на которые стоит обратить внимание, проводя аудит юзабилити лендинга.

Контент лендинга

1. Текст, понятный твоей бабушке или всё идеальное – просто Слова на лендинге должны быть максимально просты для восприятия (как говорил С.Круг, «понятны даже твоей бабушке»), т.е. никакой переоптимизации ключевиками семантического ядра. Тем более – для лендинга SEO-оптимизация ваще не имеет смысла. Текст любого сайта создается для того, чтобы пользователи читали именно то, что хотят найти в интернете, а не наоборот. Несомненно, нужно проследить, чтобы пользователям было доступно необходимое количество информации для ответа на их поисковые запросы. 2. Привлекай внимание посетителя визуально (Структурируй текст) Используй болд, италик, маркеры, блочное разделение и прочие прелести текстового форматирования для выделения ключевой информации, которая будет доступна вашему юзеру за полторы секунды. Ты никогда не угадаешь, сколько юзер отвел у себя в голове времени на изучение твоего ленда – поэтому нам с тобой нужно успеть донести наш посыл в кратчайшие сроки. Текст обязательно должен быть структурирован по смысловым блокам. И, естественно, разделяться не только границами таблиц, но и дизайнерскими финтифлюшками. Именно для этого и были придуманы такие структуры блоков как буллиты, триггеры, формы Call-To-Action, счетчики, калькуляторы и проч. 3.Контактная информация или «Разрешите представиться» Обязательно указывай контактную информацию на ленде – это повышает уровень социального доверия среди твоих посетителей и предоставляет им возможность если и не совершить целевое действие, то хотя бы дать шанс твоему продажнику привлечь их царственное внимание. До сих пор самым простым и оперативным способом наладить контакт остается телефонный звонок. И именно поэтому здравствуют и процветают такие сервисы, как «назойливая зеленая трубка справа» Callback Hunter, сервис прослушки звонков клиентов Callcontrol, аппетитный облачный сервис Mango Office и так далее. Но не стоит забывать о необходимости самого последнего блока на каждом уважающем себя ленде «Остались вопросы?» и наличия назойливого онлайн-консультанта JivoSite «Здравствуйте, чем я могу Вам помочь?». У меня есть подруга – человек с ученой степенью из Лондона – так вот она боится телефонных разговоров с незнакомыми голосами, в том числе и с сервисом. Именно поэтому помни: нам нужно повысить юзабилити лендинга даже для таких застенчивых социальных калек, потому что ни один юзер не должен себя ограничивать на нашем ленде. 4. Статика лучше динамики или не пичкай ленд динамичными сервисами Реклама рекламе рознь. Баннеры, ссылки, сервисы желтая реклама – все эти источники дополнительного профита бизнеса могут превратиться в убийц сайта при неправильном расположении. Что касаемо лендинга, надо быть очень аккуратными с сервисами – в этом случае, как коса на камень: надо ставить максимум один (два?) сервиса, но ни в коем случае не винегрет из них. Оптимизировать, оптимизировать, да не выоптимизировать, как говорилось в одной статье, или краткость – сестра конверсии. 5. Чем короче якорь, тем надежнее стоит корабль Анкоры (текст гиперссылок) должны быть понятны. То есть, если я сейчас упомяну о триггерах и правилах их оформления, но объяснять более детально мне будет лень, тогда дальше я дам ссылку – и тебе уже будет понятно, какую информацию ты получишь, перейдя по ссылке. Не надо писать изъезженные фразочки «узнать тут», «продолжение следует…», «читать далее». Пропиши пользователю мини-заголовок того контента, который ему предоставит эта подчеркнутая гиперссылка. Количество слов в анкоре не должно превышать 3х. 6. Количество полей ввода данных Не заставляй юзера заполнять лишние поля ввода и информации о себе. Данные мобильного твоего юзера всегда приоритетнее его почты. И шансов закрыть клиента на покупку гораздо больше при личном контексте, чем через безголосые письма. Но есть ниши, в которых почтовый адрес важнее номера телефона. А вообще – лучше меняй в каждой форме заявки поля ввода данных. Так же обращу твоё внимание на такой тонкий момент как поля расчетов калькулятора на ленде – максимум 5 полей. Не терроризируй юзера полями ввода. Лучше меньше, да лучше. Да и вообще, как говаривал сэр С.Круг: «Не заставляй меня думать». 7. Призыв к действию или Текст кнопки заявки Текст кнопки заявки должен соответствовать результату, который мы предлагаем нашим пользователям в заголовке СТА. То есть если в заголовке СТА стоит «Внимание акция! Оставь заявку и получи скидку 100500%», то в кнопке должна быть надпись «Получить скидку». И, разумеется, не стоит переоптимизировать ленд формами заявки – их должно быть максимум 4: первая на главном экране, вторая или третья (в зависимости от длины посадочной страницы) в «теле» ленда и последняя – четвертая – перед футером. 8. Грамматические ошибки Лол штаа?! – вот этого не должно быть. Именно поэтому и придумали профессию копирайтера – человека, отвечающего за смысловую структуру текста, его логическое расположение в блоках, за употребление речевых оборотов и правописание/пунктуацию/орфографию/какой-то-ещё-раздел-науки-русского-языка. Но что касаемо написания – тут тебе может помочь отличнейший сервис Яндекс.Спеллер или, если хочешь проверить уже готовый сайт, то Яндекс Вебмастер. Можешь сделать это самостоятельно, но, как правило, велика вероятность того, что твои глаза уже замылены прочими пунктами аудита. Поэтому будь добр, не поленись заплати хорошему копирайтеру или попроси какого-либо гуманитария проверить текст.

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

1. Отображение лендинга Внимательно отследи, как видят твой сайт пользователи, заходящие с различных устройств и с различных браузеров. За счет «резинового» макета элементы ленда могут наезжать друг на друга, перекрывать необходимую информацию да и просто неэстетично выглядеть. Помни: пользователю должен нравится твой ленд. 2. Динамическая навигация Навигация по странице должна подсказывать посетителю его следующее действие. К примеру, все мы привыкли, что при наведении указателя на элемент с видео, стрелочка меняется на указательный палец. Или при наведении курсора на текст, стрелка меняется на курсор-выделение. Используйте эти привычные автозамены-якори для упрощения навигации между элементами лендига. 3. Выпадающее меню Здесь важно одно простое правило: выпадающий список должен умещаться в рамках 2/3 экрана. Делается это для удобства выбора необходимого пункта из списка и более наглядного восприятия информации в выпадающем меню. 4. Хлебные крошки Посетитель любого сайта всегда должен четко понимать, где он находится. Отражением этого служит два ориентира: адресная строка с доменным именем и указатели в хэдере (прим. «Меню-Дорожный багаж-Чемоданы»). 5. Логотип компании Логотип компании должен располагаться в верхнем левом углу и вести на главную страницу сайта. Это негласное правило, которое существует ещё с бородатой даты запуска сайтов в интернете. В случае с лендингами – логотип не должен никуда уводить посетителя, т.к. это всё равно, что купить домик в Тайланде и переехать жить в коммуналку в Тамбове. 6. Всплывающие окна Любая динамика на сайте или ленде моментально приковывает внимание пользователя. Особенно – если всплывающее окно мешает просмотру содержания сайта/ленда. Поэтому настоятельно рекомендуется ни в коем случае не размещать автоматически всплывающие окна, а привязывать всплывающий блок только к определенному действию пользователя на сайте. 7. Содержание главной страницы/первого экрана Пользователь должен в течение 5 секунд понять, где он находится, перейдя на тот или иной ресурс. Поэтому крайне важно, чтобы графический и текстовый контент на главной странице сайта или на первом экране лендинга давали максимально понятную, ёмкую, а главное – целевую информацию о ресурсе, которому принадлежит этот сайт. 8. Перегруженность опциями Общее количество функциональных элементов на странице не должно рассеивать внимание посетителя. Человеку сложно ориентироваться, когда ему мешает слишком большое количество элементов, и тем более нелегко удержать во внимании все элементы, требующие совершить действие с ними (например форма заявки, фильтр товаров, поиск по сайту). По большей части этот пункт относится к интернет-магазинам и сайтам-многостраничникам, но к ленду этот пункт так же подходит. 9. Работоспособность технических элементов Необходимо проверить работоспособность всех элементов на сайте. Всегда перепроверяйте дважды! Одни из самых важных элементов, которые кровь из носа необходимо проверять:

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

Ошибки дизайна

1. Непривычное расположение элементов на странице В интернете есть негласные правила расположения элементов на странице: логотип – верхний левый угол, контактная информация – верхний правый угол, коорзина – верхняя правая часть хедера, поле поиска – верхняя правая часть хедера. Под товаром в интернет-магазине должна располагаться яркая кнопка «Купить», поля для регистрации/авторизации должны быть в правой верхней части страницы, форма захвата данных на ленда – либо справа на первом экране, либо по горизонтали. Чем меньше посетитель сайта ищет (прости за каламбур) кнопку «Поиск», тем выше коверсия твоей страницы. Размещай привычные элементы сайта там, где их привыкли искать. 2. Отступы Для удобства восприятия информации контент на сайте должен быть поделен на блоки с отступами. Внутри этих блоков элементы так же должны быть сгруппированы. Касаемо текста – должны быть разделения на смысловые абзацы. Или же текст должен быть визуально разделен элементами дизайна. Помни одно: информация, которую несет тот или иной элемент (с текстом или без) должна восприниматься быстро и легко. 3. Пространство страницы Довольно часто на сайтах можно встретить пустые неиспользуемые места. Это может быть связано с тем, что сайт не протестирован в более высоком разрешении, или структура сайта не продумана — например, боковые меню больше, чем основной текст на странице. 4. Визуальный шум Визуальный шум – показатель уровня восприятия контента на странице. То есть чем больше элементов не несущих смысловую нагрузку расположено на странице, тем выше уровень визуального шума. Переизбыток яркости фона, слишком «радужный» дизайн («Правило 3 цветов»), чрезмерная концентрация иконок-кнопок-рамок с изображением на одном экране – всё это создает проблемы в восприятии главного – информации, несущей сайтом. Самый простой способ проверить уровень визуального шума: отойди на 1,5 метра от монитора и проследи, сможешь ли ты быстро найти текст на экране и прочесть его. 5. Читаемый шрифт Текст должен быть читаемым. Поэтому следует обратить внимание на цвет шрифта, удобство чтения и расположение текста относительно элементов. Цветовая гамма должна быть подобрана таким образом, чтобы у посетителя не вытекали глаза (никакого прописного шрифта цвета фуксии на зеленом фоне). Так же не буду сейчас разводить холивар на тему использования шрифта с засечками или рубленого, но всё же упомяну, что согласно общепризнанным нормам, шрифтом с засечками должны быть оформлены все заголовки и крупные элементы на странице, а рубленым шрифтом – основной текст. И НИКАКОГО КАПСА ! 6.Автозаполнение полей ввода данных Не заставляй думать юзеров сайта – поставь шаблон, демонстрирующий  правильное заполнение формы захвата данных. Шаблон должен исчезать, как только посетитель сайта кликнет на строку ввода данных. Так же отмечу, что рядом с формой должно появляться уведомление в случае неправильного заполнения. 7. Выделение ссылок Просто запомни: любые гиперссылки должны быть оформлены вот так. Любые гиперссылки, которые были уже посещены, вкладки меню и прочие элементы, которые уже видел юзер, необходимо выделять от ещё не посещенных мест. Ввиду этого нельзя использовать синий и фиолетовый цвета для оформления шрифтов, т.к. это будет вводить посетителей в заблуждение. 8. Подпись изображений Необходимо указывать название изображения в тегах alt и title. Помимо того, что это обязательный пункт адаптации сайта для пользования инвалидами и людьми с ограниченными возможностями, так и вдобавок это весьма полезная функция, позволяющая людям с крайней плохой скоростью загрузки интернета воспринимать контент страницы. Сделать подписи несложно, зато вероятность того, что необходимая информация передастся посетителю, увеличится в разы.

Олын-ол

Что же полезного в этой статье? 1. Зачем проводить аудит юзабилити:

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

2. Как провести аудит юзабилити бесплатно:

• проанализировать имеющиеся статистические показатели и данные (через Яндекс.Метрику или Google.Analytics);
• спросить посетителей сайта о том, что не понравилось (через сервис Visual Web Optimizer);
• собрать несколько человек и понаблюдать за тем, как они пользуются сайтом;
• понаблюдать за тем, как юзеры интернета пользуются сайтом (через те же сервисы Яндекс.Метрики и Google.Analytics).

3. Аудита юзабилити проводится по 3 направлениям:

• Контент;
• Техническая часть;
• Дизайн.

4. Аудит юзабилити контента проводится по следующим пунктам:

• понятность смысла текста;
• структурированность текста;
• контактная информация;
• статичность/динамика элементов сайта;
• текст гиперссылок;
• поля ввода данных;
• текст кнопок;
• грамматический АшиПки.

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

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

6. Аудит юзабилити дизайна сайта базируется на следующих моментах:

• расположение элементов на странице;
• отступы;
• пространство страницы;
• визуальный шум;
• шрифт;
• автозаполнение полей ввода данных;
• выделение ссылок;
• подпись изображений в тегах alt и title.

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