4. Работа над удобством сайта: чек-лист по юзабилити

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

1. Проведен пользовательский аудит юзабилити (тестирование минимум 5 пользователей):

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

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

2. Проверены общие параметры удобства сайта:

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

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

3. Адаптирована общая структура сайта

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

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

4. Проанализирована шапка (хедер) сайта:

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

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

5. Проверено меню сайта:

5.1 Проанализировано основное меню:

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

5.2. Проверен футер (дополнительное меню) сайта:

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

5.3 Используется иерархическое меню и/или «хлебные крошки»:

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

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

6. Адаптирован поиск по сайту

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

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

7. Проверены ссылки:

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

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

8. Проверены кнопки на сайте:

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

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

9. Обеспечены все возможности связи и взаимодействия с целевой аудиторией:

9.1. Учтены общие требования в аспекте коммуникаций:

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

9.2. Проверено качество и удобство форм обратной связи:

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

9.3. Проанализировано удобство формы регистрации:

• есть понимание пользы регистрации - указаны выгоды авторизованного пользователя;
• форма регистрации имеет минимум полей - в идеале электронный адрес и пароль (логином может выступать сама почта);
• предусмотрена упрощенная регистрация с авторизацией через соцсети;
• предложена подписка на рассылку, но от неё можно отказаться, сняв соответствующую галочку в форме;
• реализована «фоновая» регистрация (для интернет-магазинов) - при заказе товара указывается e-mail и ФИО, а пароль генерируется автоматически (высылается на почту заказчика);
• письма с подтверждением регистрации исправно приходят на почту (важно и для «фоновой» регистрации).

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

10. Проанализировано информационное наполнение сайта:

10.1. Проверены общие требования к содержимому:

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

10.2. Учтены требования к визуальному оформлению:

• текст и фон оформлены в контрастных цветах (причем лучше классика - белый фон и черный текст, чем белый текст и черный фон);
• используются «безопасные» шрифты - без засечек на концах букв (к примеру, Arial или Verdana);
• используется 12-16 размер шрифта;
• логотип компании расположен в верхнем левом углу сайта;
• подзаголовки выделены шрифтом;
• верхний регистр используется по минимуму;
• числовая информация для удобства разбивается (не 10454506, а 10 454 506);
• шрифтом выделены не SEO-ключи, а фразы с дополнительной, особой смысловой нагрузкой;
• любые выделения текста уместны, их немного, в противном случае поисковые боты могут заподозрить переспам;

• используется одинаковое выравнивание.

10.3. Проанализированы юзабилити-требования к графике:

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

10.4. Адаптирована главная страничка сайта:

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

10.5. Проанализирован раздел «О компании»/«Контакты»:

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

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

11. Учтены все актуальные потребности мобильных пользователей: 

• есть мобильная версия сайта или используется адаптивный дизайн;
• любой URL-адрес ресурса доступен с мобильных девайсов (используется формат CompactHTML или XHTMLMobile);
• работает перенаправление пользователей с учетом разрешения и размера экрана устройства, с которого они заходят (под эти параметры подстраивается ширина странички, шрифт, изображение и т.д.);
• отображение сайта корректно на любых устройствах;
• функциональные возможности мобильной аудитории такие же, как и у пользователей стационарных устройств (заказ товаров, подписка, участие в голосованиях и т.д.);
• создана Accelerated Mobile Page версия ресурса (желательно для новостных проектов).

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

12. Проанализированы дополнительные требования к юзабитили:

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

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

13. Юзабилити регулярно изучается и анализируется в целях улучшения:

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

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