Аудит сайта пример: Пример SEO-аудита сайта — SEO на vc.ru

Показываем, как происходит аудит сайта на примере компании Домстрой

Подопытный (www.gkdomstroy.ru) — сайт компании, занимающейся продажей стройматериалов и оказывающей строительные услуги

Анна Кожевина

Аккаунт-директор «Сибирикс»

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

Анализ я обычно выполняю по схеме, описанной тут.

Экспресс-анализ входящего трафика

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

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

Итак, основная точка входа на сайт — статьи раздела «Полезная информация» (эффект seo — в этом разделе хорошие тематические и уникальные тексты). Весомый трафик — на главную. Всего 3% — в каталог (на сайте каталог сейчас скорее условный — разделы наполовину пустые и товары там не представлены, есть только описания разделов). На остальные страницы попадают вообще единичные посетители.

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

За три месяца на сайт пришло 11 025 посетителей, из них 99,4% новые (количество возвратов пользователей на сайт крайне низкое). Просмотрено 21 952 страницы. Средний показатель отказов — 74,1% (это значит, что почти 75% посетителей просматривают только одну страницу, причем закрывают ее не позже чем через 15 секунд после открытия. Эти посетители однозначно ничего не закажут и не обратятся в компанию).

Соответственно остальные посетители (где-то 950 человек в месяц) просматривают в среднем по 5 страниц (считается так: (21 952 — 11 025*0,741) / 11 025*0,259) — значит, пытаются найти интересующую их информацию. Если не найдут — тоже ничего не закажут. Необходимо решать две проблемы — уменьшать % отказов и помогать посетителям найти интересующую информацию при просмотре сайта, и подтолкнуть их к обращению в компанию.

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

• Главная страница — 62,6%.
• Страницы раздела статьи — в среднем 77,8%.

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

Анализируем запросы, по которым приходят пользователи (Метрика: «Источники» — «Поисковые фразы»). Трафика по нецелевым запросам практически нет. Основная доля трафика приходится на низкочастотные запросы типа «название материала — купить/цена»:

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

Итого, рекомендации по точкам входа на сайт

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

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

Смотрим сам сайт

1. Общее впечатление от сайта

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

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

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

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

2. Юзабилити и контент — постраничный анализ сайта

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

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

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

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

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

Раздел «О компании»
Сейчас раздел представляет собой текстовую страницу «О Компании», и четыре дочерние страницы — «О нас», «Реализованные проекты», «Лицензии и сертификаты», «Контакты».

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

«Лицензии и сертификаты» пользователи почти не просматривают. Поэтому достаточно представить их отдельным блоком на странице «О Компании».

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

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

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

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

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

Ниже описания тем же шрифтом указано: «Для приобретения данного материала позвоните нам по телефону (495) 730−17−82. У наших консультантов вы также можете узнать любую интересующую информацию по данному материалу: выяснить условия покупки, доставки, возможность льготного приобретения, а также правила укладки и ухода за ним», либо «По вопросам сотрудничества обращайтесь: 730−17−57 доб. 116».

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

Что можно сделать?

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

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

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

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

3. Доступность контактной информации

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

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

4. Навигация по сайту

Навигация по сайту затруднена.

Во-первых, она путает пользователей. На сайте есть отдельные страницы с одинаковыми по смыслу названиями: «О компании» и «О нас».

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

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

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

Как видно из карты ссылок (Метрика: «Поведение» — «Карта ссылок») за три месяца по ссылкам в меню каталога было порядка 30 кликов (по каждой). За это же время кликов по ссылке «О компании» было в 10 раз больше. Переходов в каталог больше из центрального блока на главной странице, чем из меню.

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

Рекомендуется:

Отказаться от второго уровня основного меню, оставив следующие пункты:

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

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

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

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

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

Предлагаю изменить структуру главной страницы и навигации так:

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

Что такое юзабилити-аудит

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

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

Какие работы можно провести

Проверить данные в системах аналитики — Google Analytics и «Яндекс.Метрика».

Полезно будет знать:

Пути пользователей по сайту.

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

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

Куда пользователи кликают на страницах и их поведение (на записях сессий).

С каких устройств заходят чаще всего.

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

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

Проверить ресурс по 10- и эвристикам Нильсена — они помогут выявить общие проблемы юзабилити интерфейсов.

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

Эвристики Нильсена

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

Первая: видимость состояния сайта

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

Информация после завершения заказа в интернет-магазине

Вторая: схожесть между сайтом и реальным миром

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

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

Третья: свобода действий

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

В Gmail можно отменить удаление письма

Четвертая: последовательность и стандартизация

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

Пятая: предотвращение ошибок

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

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

Шестая: на виду, а не в памяти

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

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

Седьмая: гибкость и эффективность использования

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

В поиске Google не нужно вручную печатать весь запрос, он сам предложит подходящие варианты

Восьмая: эстетика и минимализм

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

Так выглядит интерфейс, где нет ничего лишнего

Девятая: помощь пользователям в распознавании ошибок

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

В этой форме сразу понятно, как исправить ошибки

Десятая: помощь и документация

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

Обычно во всех сервисах есть раздел Help

Чек-лист для юзабилити-аудита

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

Основное

На сайте установлен SSL-сертификат.

Сайт загружается за 1–2 секунды. Специалисты Google выяснили, что если сайт на мобильных устройствах загружается более трех секунд, то 53% пользователей покинут его сразу. Проверить скорость загрузки можно на PageSpeed или Test My Site.

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

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

Очевидно, что на этом сайте нам предлагают страховку

А здесь мы можем заказать литую заготовку

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

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

Яркий и узнаваемый favicon очень полезен в таких случаях

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

Title на странице нашей услуги «Разработка»

Есть проработанная 404-страница. На странице обязательно размещены ссылки на основные разделы сайта и / или поиск.

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

Отличный пример у Squarespace — тут тебе и меню по сайту с CTA, и блок с промо-предложением, и рекомендуемые ссылки

Нет пустых, незаполненных страниц.

Навигация

Шапка, подвал, меню

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

Номер телефона и e-mail размечены как ссылки с параметрами «tel:» и «mailto:». Пример:

<a href=»tel:+79999999999″> +7 999 999-99-99</a>
<a href=»mailto:email@company. com»> [email protected]</a>

По клику на логотип открывается главная страница. На главной странице логотип некликабелен.

В меню — ограниченное количество ссылок на основные разделы. Рекомендуется размещать до 7–8 ссылок.

У «Сбербанка» в главном меню — 11 ссылок, считывается довольно тяжело

На сайте «Тинькофф» ссылок всего 6 и гораздо легче найти нужную

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

Пункты меню названы понятно и привычно для пользователей. Примеры:

Авторизация → Вход
Наше предприятие → Компания
Расположение → Контакты

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

Навигация по страницам

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

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

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

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

Нет «тупиковых» страниц — с каждой страницы должна быть возможность перейти на другую страницу. Например, быстрые ссылки или блок с рекомендуемыми товарами в интернет-магазине.

Блоки с рекомендациями популярны не только в интернет-магазинах

На сайте есть поиск, и он хорошо заметен — размещен в шапке.

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

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

Поиск по сайту запускается как по клику на кнопку, так и по нажатию клавиши «Enter» в поисковой строке.

На Asos поиск работает очень быстро

Поиск умеет исправлять ошибки и предлагает пользователю варианты запроса. Особенно важно для интернет-магазинов и каталогов с множеством продуктов / услуг.

И сам исправляет ошибку в запросе

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

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

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

На Airbnb, когда ничего не найдено, предлагают перейти по быстрым ссылкам или посмотреть конкретные предложения

Дизайн и UI

Общие моменты

Применяются следующие правила:

— Теория близости: «объекты, расположенные близко друг к другу, воспринимаются связано».
— Правило внутреннего и внешнего: «Внутреннее ≤ внешнее».

Внутреннее — расстояние между буквами, внешнее — между словами.
Внутреннее — расстояние между словами, внешнее — между строками.
Внутреннее — расстояние между строками, внешнее — между абзацами или поля вокруг текста.

Здесь все пункты преимуществ слились в один большой блок, непонятно, куда относятся иконки

В этом примере за счет дополнительного «воздуха» между пунктами четко виден каждый пункт

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

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

Текстовый контент на сайте представлен в виде текста, а не изображений.

Общие элементы сайта размещены в привычных местах. Например, логотип — сверху слева, иконка корзины — справа. Подробнее: Закон Якоба.

Все элементы легко считываются на странице — между элементами достаточно «воздуха», нет нагромождения элементов в рамках экрана.

Контент размещен слева-направо по значимости (так, как мы читаем).

Пользователю очевидно, что элементы, с которыми он может взаимодействовать, кликабельны.

Все кликабельные элементы достаточно крупные, чтобы пользователь легко мог попасть по ним. Подробнее: Закон Фиттса.

Крупные кнопки на этом сайте — это часть дизайн-концепции, но все равно может быть примером следования Закону Фиттса

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

Картинка из гайдов Material Design

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

Вид курсора меняется, если навести его на кликабельные элементы.

На первом экране сайта аэропорта Стамбула видно, что ниже есть табло рейсов

Длина текстовых строк — 60−80 символов.

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

Доступность

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

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

Элементы сайта контрастны. Для проверки можно использовать плагин Color Contrast Analyzer (для Chrome). Участки экрана с хорошим контрастом будут выделены белым, а области с плохим контрастом — бледными и малозаметными. Для некоторых отраслей наличие на сайте версии для слабовидящих — требования законодательства.

Комфортные для чтения размеры шрифта. Для основного текста рекомендуется использовать минимум 16px.

Кнопки, CTA

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

Выделено одно основное ключевое действие, если всего их — несколько.

Две кнопки целевых действий с разным приоритетом в середине экрана

На каждой коммерческой странице сайта есть возможность совершить целевое действие.

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

Названия кнопок однозначно говорят пользователю о том, что произойдет по нажатию. Для обозначения действий используется глагол в начальной форме (отвечает на вопрос «что сделать?»).

Конкретная формулировка «Открыть банковский счет» вместо банального «Зарегистрироваться»

Ссылки

Ссылки

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

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

Ссылка в тексте не очень резко выделяется, но в то же время хорошо заметна

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

Номер телефона в шапке подчеркнут пунктиром, потому что по клику совершается звонок

Текст ссылки дает однозначное понимание, что откроется при нажатии. Если ссылка стоит в тексте, то текст не должен терять смысла без ссылки. Хорошо описано в Ководстве.

Ссылки не ведут на текущую страницу.

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

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

Чекбоксы

При клике с выбранного чекбокса снимается выделение.

Кликабельны полностью — и сам чекбокс, и его название.

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

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

В горизонтальном списке все сливается в одну линию

А так все хорошо считывается

Если в группе — более пяти чекбоксов, рекомендуется добавлять ссылки / кнопки для выбора (и снятия выбора) сразу всех чекбоксов.

Радиокнопки

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

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

Используются по назначению — для выбора одного значения из нескольких.

Кликабельны полностью — и сама радиокнопка, и ее название.

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

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

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

Если какой-то пункт выбран по умолчанию (например, на странице настроек в личном кабинете), то он стоит первым в списке.

Выпадающие списки

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

А если всего два значения, то лучше использовать радиокнопки

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

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

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

Поле слишком короткое — в списке много длинных значений

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

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

Комбинированные списки

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

Таблицы

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

Для разграничения строк используется пустое пространство — ничего лишнего

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

Широкая таблица перестраивается в несколько последовательных мини-таблиц

Контакты и обратная связь

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

Номер телефона указан в правильном формате с кодом региона.

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

Представительства компании можно посмотреть как в списке, так и на карте (если много представительств в разных странах / регионах).

Главный офис отображен на карте.

Если представлены контакты конкретных сотрудников, то желательно указывать их ФИО, должность и размещать фото для повышения доверия.

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

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

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

Кнопка чата в стилистике сайта не отвлекает от контента

Структура формы

Структура формы

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

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

Группировка полей заголовками на странице размещения объявления

Поля в длинных формах размещены в одну колонку для удобства восприятия.

Форма организована как предложение, где заголовок формы — подлежащее, кнопка отправки — сказуемое, а поля для заполнения — другие члены предложения.

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

Форма разбита на шаги, сверху — прогресс заполнения

Содержание формы, поля

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

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

Поля формы имеют отдельное состояние, когда они в фокусе (курсор установлен в поле).

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

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

Поле в фокусе выделено черной рамкой

Форма поддерживает возможность перемещения между полями клавишей Tab. Перемещение по полям происходит последовательно, фокус не уходит за пределы формы.

При открытии формы фокус автоматически падает в первое поле формы.

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

Название поля отображается всегда: и в пустом поле, и в заполненном поле, и при его заполнении

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

У всех полей формы прописан корректный тип вводимых данных. Например, для ввода телефона: <input type=»tel»>. При вводе данных в данное поле с мобильных устройств на них сразу откроется числовая клавиатура.

При вводе адресов пользователю подсказываются значения из подключенного справочника.

В «Тинькофф» даже при вводе ФИО предлагаются значения для выбора

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

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

Проверяется корректность заполненных данных. Например, для e-mail, даты или числовых полей.

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

ВКонтакте объясняют зачем нужно указывать дату рождения

Заполнение, валидация, отправка

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

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

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

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

Модальные окна

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

Есть заметная кнопка закрытия.

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

Контент

Человеческий текст, который понятен и интересен пользователю, а не только «заточен» под поисковые запросы. Краткость в изложении, отсутствие «воды» — пользователи не любят читать большие объемы текста. Длинные тексты разбиты на абзацы, комфортные для чтения.

Заголовки легко различимы между собой за счет размера. Однозначно можно ответить, где h2, а где h3.

Информативные заголовки, которые объясняют, что пользователь увидит под ними.

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

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

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

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

Цифры больше 4−5 знаков отбиваются разрядами для удобства считывания, например:

2409 → 2 409
20409 → 20 409

Таблицы

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

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

Изображения

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

У всех изображений прописаны alt и title.

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

Заключение

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

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

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

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

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

Не стоит останавливаться на проверке юзабилити сайта по чек-листу. Чтобы сделать ваш ресурс максимально дружелюбным к пользователям, обратитесь к A/B-тестам и юзабилити-тестированиям. Это тема для другой статьи.

Читайте по теме

#Сайт #Сайты #Аналитика #UX-аналитика #Бизнес #Веб-аналитика #Проектирование

вернуться к списку статей

Оцените статью

Подпишитесь на нашу рассылку

Мы отправляем полезные материалы, которые помогут вам в работе

Услуги

Сайты и сервисы

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

Дизайн

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

Аналитика

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

SEO-продвижение

Увеличиваем органический трафик на сайте и снижаем затраты на привлечение клиентов.

Шаблон углубленного аудита SEO

Зачем использовать шаблон аудита SEO?

Поисковая оптимизация раньше была очень простой:

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

Вуаля! Просто так вы окажетесь на первой странице Google.

Но этот подход больше не работает.

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

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

Введите: этот шаблон аудита SEO.

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

Все, не вдаваясь в мельчайшие детали.

Что включено

Вот что включено в этот шаблон SEO-аудита:

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

Как использовать этот шаблон

1. Загрузите бесплатный шаблон SEO аудита на этой странице.
2. Шаг за шагом следуйте шаблону. Для получения более подробной информации о любом элементе см. наш пошаговый контрольный список SEO-аудита.
3. Внесите все рекомендуемые улучшения.
4. Через несколько недель проверьте эффект ваших изменений. (В рейтингах, а также Google Analytics, как описано.)

Как повысить свой рейтинг с помощью низко висящих фруктов

Существует бесконечное количество вещей, которые вы можете сделать, чтобы увеличить свой поисковый трафик. Но иногда хочется чего-то БЫСТРО. Вот список простых вещей, которые вы можете быстро решить, чтобы улучшить свой рейтинг.

• Найдите несвязанные упоминания брендов. Блоггеры часто упоминают другие сайты, фактически не ссылаясь на них. Таким образом, быстрый способ создать ссылки — связаться с любыми владельцами сайтов, которые сделали это с вашим сайтом. И попросите их добавить ссылку. BuzzSumo упрощает поиск несвязанных упоминаний брендов. А чтобы получать уведомления о будущих событиях, установите оповещения для вашего бренда в Google Alerts и Talkwalker.
• Добавить больше внутренних ссылок. Всякий раз, когда я публикую новую статью, я добавляю ссылки на любой фрагмент контента, который еще не имеет хорошего рейтинга. Использование богатого ключевыми словами анкорного текста, когда я могу. Вы также можете использовать отчет «Ссылки» в Google Search Console, чтобы время от времени проверять свои внутренние ссылки.
• Используйте функции автозаполнения Google и «Люди также спрашивают», чтобы найти новые ключевые слова LSI для существующего контента. Добавляйте их естественным образом и наблюдайте, как растет трафик. Еще один отличный ресурс для ключевых слов LSI — Answer the Public.
• Добавить больше контента на игнорируемые страницы. В частности, для сайтов электронной коммерции страницы продуктов и страницы категорий часто содержат очень мало контента. Что делает ранжирование этих страниц почти невозможным. Простое добавление более уникальной копии на эти страницы может изменить день и ночь.
• Проверьте, что ваши основные конкуренты делают по-другому. Это полезно проверять в любое время, когда вы находитесь не на первой странице Google: посмотрите, что страницы с самым высоким рейтингом делают по-другому. Они все используют формат, отличный от вашего? Если да, то попробуйте изменить его. Все ли сайты ваших конкурентов имеют гораздо более высокий авторитет домена? В этом случае вам нужно создавать ссылки, чтобы конкурировать. Или сосредоточьтесь на менее конкурентоспособных ключевых словах с длинным хвостом.
• Обновить старый контент. В Backlinko мы ежегодно обновляем ВСЕ основные публикации. Это не просто означает добавить «2021» в конец названия. Это означает чтение контента и проверка его точности. И добавить раздел или два, чтобы украсить его к Новому году.
• Получите еще больше помощи по SEO с помощью других наших бесплатных шаблонов SEO.

15-шаговый контрольный список аудита веб-сайта (и шаблон PDF)

28 авг

28 авг

Отличные веб-сайты делают бизнес более надежным.

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

 

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

Содержание

Шаг 1. Проверьте настройки Google Analytics
Шаг 2. Проверьте тенденции трафика Google Analytics
Шаг 3. Проверьте совместимость с мобильными устройствами
Шаг 4. Оцените SEO на странице
Шаг 5. Проверьте наличие проблем с индексацией
Шаг 6. Запустите тесты скорости страницы
Шаг 7. Выполните проверку контента
Шаг 8. Оцените взаимодействие с пользователем
Шаг 9. Проведите анализ конкурентов
Шаг 10. Найдите неработающие ссылки
Шаг 11. Проверьте рейтинг ключевых слов
Шаг 12. Проверьте наличие социальных пикселей и тегов
Шаг 13. Проведите аудит всех сторонних технологий
Шаг 14: Аудит URL-адресов и структуры сайта
Ярлык: используйте инструмент SEO-аудита.
Загрузите шаблон аудита веб-сайта. правильно:

Проверьте код отслеживания Google Analytics

Если код отслеживания Google Analytics встроен непосредственно на веб-сайт или реализован с помощью стороннего плагина, вам следует рассмотреть возможность переноса кода в Диспетчер тегов Google. Это бесплатный инструмент Google для управления тегами, который устанавливается один раз на сайте, а затем легко управляется с помощью панели управления тегами. По сути, это контейнер, в который вы можете добавлять любые теги/пиксели (включая GA), необходимые для отслеживания, ретаргетинга или любых других целей.

 

Проверить настройки событий и целей

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

 

С событиями связаны Цели. Их также необходимо настроить в GA в разделе «Администратор». Вы можете создавать цели на основе правил URL, поведения на сайте (время и просмотры страниц) или событий. Различие между Событиями и Целями заключается в том, что Цели должны представлять окончательную «конверсию» (т. е. покупка, отправка формы, регистрация, подписка и т. д.), тогда как События — это важные действия, которые происходят на пути к конверсии.

 

Если вы проверяете настройки GA вашего клиента и видите пустую таблицу, где должны быть Цели (как на скриншоте выше) — то это первое, что вы должны помочь своему клиенту сделать!

 

Шаг 2. Проверьте тенденции трафика Google Analytics

 

При первом анализе учетной записи GA вашего клиента, как говорит Пол Кокс, «сначала задайте бизнес-вопрос». Если цели настроены, определите источники трафика, которые имеют наибольшую ценность (или приводят к наибольшему количеству конверсий). Сегментируйте этих пользователей и узнайте больше об их поведении на сайте. Увеличиваются или уменьшаются со временем посетители из наиболее конвертируемых источников трафика? И наоборот, какие источники трафика являются худшими для конверсии? Какие краткосрочные, среднесрочные и долгосрочные тенденции вы можете выделить? При представлении клиенту эта часть аудита должна проиллюстрировать поведение идеального веб-посетителя. 9Шаг 3. Проверка совместимости с мобильными устройствами Просто введите URL-адрес, чтобы узнать, оптимизирован ли он для мобильных устройств:

 

 

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

 

Шаг 4. Оценка SEO на странице

 

SEO на странице охватывает несколько областей HTML-кода сайта. Вы должны проверить каждый из следующих тегов:

• Тег