ОМП / STEP 1
8. Анализ юзабилити сайта
Под юзабилити понимается, насколько сайт дружелюбен и удобен по отношению к его пользователям.
Для того, чтобы сайт приносил конверсии, пользователи не должны испытывать дискомфорт и тратить много времени на поиск нужной информации.
Юзабилити-аудит сайта позволяет выявить барьеры на пути пользователя и найти способы их устранения.
Для того, чтобы сайт приносил конверсии, пользователи не должны испытывать дискомфорт и тратить много времени на поиск нужной информации.
Юзабилити-аудит сайта позволяет выявить барьеры на пути пользователя и найти способы их устранения.
Его необходимо проводить:
- при запуске нового продукта
- при добавлении нового функционала на сайт
- для улучшения текущих показателей конверсии.
Ниже будут описаны этапы юзабилити-аудита для веб-версии сайта, но аналогичную проверку можно (и нужно) проводить и для мобильной версии сайта и для мобильного приложения.
Этап 1. Анализ трафика в системах аналитики
Убедись, что все страницы работают корректно. Проанализируй следующие показатели Google Analytics:
- статистика по страницам (показатель отказов, показатель выходов, количество страниц за сеанс, средняя продолжительность сеанса, конверсии)
- используемые операционные системы, браузеры
- используемые типы устройств.
Наибольший интерес представляют самые популярные страницы и критические места (где большой процент отказов, отсутствует или низкая конверсия).
Например, если ты видишь большой % отказов с определенного браузера, имеет смысл зайти через него и понять, почему так происходит (выдаёт ошибку, поехала вёрстка, не отображаются картинки и т.д.).
Например, если ты видишь большой % отказов с определенного браузера, имеет смысл зайти через него и понять, почему так происходит (выдаёт ошибку, поехала вёрстка, не отображаются картинки и т.д.).
Этап 2. Технический анализ
При необходимости SEO-специалисты MGCom проводят подробный технический анализ сайта рекламодателя, но проджект-менеджеру важно уметь самостоятельно провести краткий анализ и выявить ошибки, лежащие на поверхности. Необходимо проверить:
- скорость загрузки (её можно посмотреть на PageSpeed или TestMySite), рекомендуемая скорость загрузки — до 5 секунд
- адаптивность сайта (корректное отображение на разных устройствах, браузерах и операционных системах)
- безопасность протокола (адрес сайта начинается с https, а не http)
- favicon и title (иконка и текст, отображаемые на вкладке браузера при открытии сайта).
Этап 3. Анализ структуры и контента
Поставь себя на место пользователя и оцени сайт как в первый раз. Интерфейс должен быть тебе понятен, функционал всех кнопок должен быть очевиден, страницы должны открываться корректно.
Хедер
Шапка, верхняя плашка сайта. Это своеобразная карта сайта для пользователя. Именно при первом взгляде на нее пользователь должен понять, чем именно занимается компания, и как начинать свой путь по сайту.
Шапка, верхняя плашка сайта. Это своеобразная карта сайта для пользователя. Именно при первом взгляде на нее пользователь должен понять, чем именно занимается компания, и как начинать свой путь по сайту.
Главное меню
Должно быть удобным, простым, понятным. Хорошо, когда оно находится в шапке (верхней плашке) и всегда доступно пользователю. Оптимальный размер меню — 7-8 пунктов. Самые значимые ссылки размещаются слева.
Пример - не ок:
Должно быть удобным, простым, понятным. Хорошо, когда оно находится в шапке (верхней плашке) и всегда доступно пользователю. Оптимальный размер меню — 7-8 пунктов. Самые значимые ссылки размещаются слева.
Пример - не ок:
Поиск на сайте
Если на сайте представлено много товаров, пользователю должен быть доступен поиск в шапке сайта. Желательно реализовать сортировку и фильтрацию результатов поиска.
Если на сайте представлено много товаров, пользователю должен быть доступен поиск в шапке сайта. Желательно реализовать сортировку и фильтрацию результатов поиска.
Главная страница
На главной странице должны присутствовать только самые важные элементы. Если какую-то информацию можно убрать — лучше сделать это (перенести в другую часть сайта). Хорошо, когда все элементы на главной странице востребованы — пользуются вниманием посетителей, обеспечивают переходы по сайту.
Пример — не ок:
На главной странице должны присутствовать только самые важные элементы. Если какую-то информацию можно убрать — лучше сделать это (перенести в другую часть сайта). Хорошо, когда все элементы на главной странице востребованы — пользуются вниманием посетителей, обеспечивают переходы по сайту.
Пример — не ок:
Страницы категорий или разделы
Посетитель должен сразу получить искомую информацию, для этого необходимо корректно настроить заголовки и подзаголовки, тщательно структурировать контент.
Посетитель должен сразу получить искомую информацию, для этого необходимо корректно настроить заголовки и подзаголовки, тщательно структурировать контент.
Страницы товаров или услуг
Желательно использовать подробные описания, характеристики, отзывы, фотографии и видео. На страницах должны содержаться элементы, помогающие совершить заказ, подать заявку или запросить консультацию.
Пример — не ок:
Желательно использовать подробные описания, характеристики, отзывы, фотографии и видео. На страницах должны содержаться элементы, помогающие совершить заказ, подать заявку или запросить консультацию.
Пример — не ок:
Онлайн-консультант
Проверь, чтобы онлайн-консультант (при наличии) не мешал отображению контента и не раздражал посетителей.
Проверь, чтобы онлайн-консультант (при наличии) не мешал отображению контента и не раздражал посетителей.
Страница регистрации
Если на сайте предусмотрен личный кабинет, регистрация не должна быть утомительной. Оптимальное число строк формы 2-4. При этом желательно предусмотреть автоматическую регистрацию с помощью социальных сетей.
Страница корзины
Должна иметь максимально простой дизайн и функционал. Проверь, что уточняются все (и только!) необходимые детали заказа. Все лишние элементы следует убрать, ничто не должно отвлекать пользователя от покупки.
Оформление заказа
Пользователь должен иметь возможность максимально быстро завершить покупку — в 1 клик, или заполнить буквально 3-4 поля. Чем больше времени пользователь тратит на оформление заказа, тем меньше пользователей всё же оформят заказ.
Футер
Нижняя плашка сайта. Тут стоит добавить ссылки, на информационные страницы (о нас, контакты, доставка, оплата, гарантия и т.д.) и на социальные сети и мессенджеры компании при наличии.
Если на сайте предусмотрен личный кабинет, регистрация не должна быть утомительной. Оптимальное число строк формы 2-4. При этом желательно предусмотреть автоматическую регистрацию с помощью социальных сетей.
Страница корзины
Должна иметь максимально простой дизайн и функционал. Проверь, что уточняются все (и только!) необходимые детали заказа. Все лишние элементы следует убрать, ничто не должно отвлекать пользователя от покупки.
Оформление заказа
Пользователь должен иметь возможность максимально быстро завершить покупку — в 1 клик, или заполнить буквально 3-4 поля. Чем больше времени пользователь тратит на оформление заказа, тем меньше пользователей всё же оформят заказ.
Футер
Нижняя плашка сайта. Тут стоит добавить ссылки, на информационные страницы (о нас, контакты, доставка, оплата, гарантия и т.д.) и на социальные сети и мессенджеры компании при наличии.
Этап 4. Оценка дизайна
Принцип минимализма
На сайте должна присутствовать только необходимая и актуальная информация. Следует стремиться к простоте в логике и оформлении, без перегруженности, которая мешает пользователю на его пути к совершению целевого действия.
На сайте должна присутствовать только необходимая и актуальная информация. Следует стремиться к простоте в логике и оформлении, без перегруженности, которая мешает пользователю на его пути к совершению целевого действия.
Уровень стандартизации
Все элементы сайта должны быть выполнены в одном стиле и цветовой гамме. Это облегчает восприятие и ускоряет действия пользователей.
Пример — не ок:
Все элементы сайта должны быть выполнены в одном стиле и цветовой гамме. Это облегчает восприятие и ускоряет действия пользователей.
Пример — не ок:
Расстояния между элементами
Проанализируй расположение объектов по отношению друг к другу: оцени расстояние между элементами, в том числе между абзацами, строками, словами, буквами в тексте.
Пример — не ок:
Проанализируй расположение объектов по отношению друг к другу: оцени расстояние между элементами, в том числе между абзацами, строками, словами, буквами в тексте.
Пример — не ок:
Доступность элементов
Основные элементы сайта: меню, контакты, кнопка заказа, корзина, — должны быть расположены в привычных местах, а иконки хорошо считываться. В этом случае пользователю максимально комфортно, он быстро ориентируется и легко находит нужную информацию.
Пример — не ок:
Основные элементы сайта: меню, контакты, кнопка заказа, корзина, — должны быть расположены в привычных местах, а иконки хорошо считываться. В этом случае пользователю максимально комфортно, он быстро ориентируется и легко находит нужную информацию.
Пример — не ок:
Кликабельность элементов
Ключевые элементы сайта должны быть выделены (размером, цветом и т.д.) и кликабельны. Хорошо, если для них предусмотрено несколько состояний: обычное, при наведении курсора, при совершении клика.
Кнопки
Кнопки на сайте — важнейшие элементы конверсии. Они должны быть тщательно проработаны, контрастны по отношению к контенту, расположены в ожидаемых местах. Каждая кнопка предназначена для одного целевого действия — оно четко обозначается в названии и дизайне элемента.
Пример — не ок:
Ключевые элементы сайта должны быть выделены (размером, цветом и т.д.) и кликабельны. Хорошо, если для них предусмотрено несколько состояний: обычное, при наведении курсора, при совершении клика.
Кнопки
Кнопки на сайте — важнейшие элементы конверсии. Они должны быть тщательно проработаны, контрастны по отношению к контенту, расположены в ожидаемых местах. Каждая кнопка предназначена для одного целевого действия — оно четко обозначается в названии и дизайне элемента.
Пример — не ок:
Формы
Важен принцип минимализма: формы должны содержать только самые необходимые поля, все второстепенное следует исключить. Длинные формы можно разбить на шаги с демонстрацией прогресса. Если информации много, она группируется посредством подзаголовков, отступов.
Пример — не ок:
Важен принцип минимализма: формы должны содержать только самые необходимые поля, все второстепенное следует исключить. Длинные формы можно разбить на шаги с демонстрацией прогресса. Если информации много, она группируется посредством подзаголовков, отступов.
Пример — не ок:
Текст
Простой и доступный текст лучше воспринимается пользователями. Текст должен иметь заголовки, подзаголовки и четкую структуру. Содержание нужно проверить на отсутствие "воды". В тексте не должно быть ошибок.
Пример — не ок:
Простой и доступный текст лучше воспринимается пользователями. Текст должен иметь заголовки, подзаголовки и четкую структуру. Содержание нужно проверить на отсутствие "воды". В тексте не должно быть ошибок.
Пример — не ок:
Изображения
Должны использоваться оригинальные реалистичные изображения в высоком разрешении.
Интерактивные элементы
Интерактивные элементы служат якорями, привлекающими взгляд и внимание пользователей. Они используются для наиболее важных действий, и их не должно быть много.
Пример — не ок:
Должны использоваться оригинальные реалистичные изображения в высоком разрешении.
Интерактивные элементы
Интерактивные элементы служат якорями, привлекающими взгляд и внимание пользователей. Они используются для наиболее важных действий, и их не должно быть много.
Пример — не ок:
Примеры сайтов с хорошим юзабилити:
https://www.moon-trade.ru/
https://www.rendez-vous.ru/
https://europlan.ru/
https://alfabank.ru/
https://www.moon-trade.ru/
https://www.rendez-vous.ru/
https://europlan.ru/
https://alfabank.ru/
Этап 5. Финальная проверка
Удостоверься, что сайт соответствует базовым принципам:
Логика
Сайт должен предлагать пользователю определенную последовательность действий для достижения конкретной цели.
Доступность информации
Ключевая информация должна быть всегда под рукой, чтобы пользователь имел возможность совершить следующий шаг (в соответствии с логикой сайта). Пользователь рассчитывает на то, что все нужные данные будут предоставляться ему автоматически, без усилий с его стороны.
Эффективность использования
Нужно, чтобы пользователь получал желаемый результат как можно быстрее. Путь от знакомства с услугой/товаром до совершения заказа должен быть кратчайшим, форма обратной связи минимизирована, а ввод данных автоматизирован.
Гибкость навигации
Сайт должен иметь продуманную навигацию, работающую на совершение конверсий. Проверь, чтобы на всех страницах присутствовали ссылки, ведущие к ключевым объектам. На любой странице должна быть возможность возврата на главную страницу, а также в основные родительские разделы. «Тупиковые» ссылки нужно устранить.
Свобода действий
Протестируй возможности совершения действий и их отмены на сайте. У пользователя должен быть выбор, а также право в любой момент отменить решение (вернуться назад). Помимо основных сценариев всегда есть альтернативные: возврат, отмена заказа сразу после оформления. Проанализируй их тоже, потому что пользователю должно быть удобно всегда и везде.
Логика
Сайт должен предлагать пользователю определенную последовательность действий для достижения конкретной цели.
Доступность информации
Ключевая информация должна быть всегда под рукой, чтобы пользователь имел возможность совершить следующий шаг (в соответствии с логикой сайта). Пользователь рассчитывает на то, что все нужные данные будут предоставляться ему автоматически, без усилий с его стороны.
Эффективность использования
Нужно, чтобы пользователь получал желаемый результат как можно быстрее. Путь от знакомства с услугой/товаром до совершения заказа должен быть кратчайшим, форма обратной связи минимизирована, а ввод данных автоматизирован.
Гибкость навигации
Сайт должен иметь продуманную навигацию, работающую на совершение конверсий. Проверь, чтобы на всех страницах присутствовали ссылки, ведущие к ключевым объектам. На любой странице должна быть возможность возврата на главную страницу, а также в основные родительские разделы. «Тупиковые» ссылки нужно устранить.
Свобода действий
Протестируй возможности совершения действий и их отмены на сайте. У пользователя должен быть выбор, а также право в любой момент отменить решение (вернуться назад). Помимо основных сценариев всегда есть альтернативные: возврат, отмена заказа сразу после оформления. Проанализируй их тоже, потому что пользователю должно быть удобно всегда и везде.
Оформление юзабилити-аудита
После прохождения всех предыдущих этапов необходимо свести все полученные данные в единый документ (оформляется в виде презентации):
- описать все вышеперечисленные пункты, уделив больше внимания обнаруженным недостаткам
- приложить скриншоты, видео, таблицы для демонстрации проведенного аудита
- ко всем найденным недостаткам предложить доработки; их стоит также сопроводить скриншотами, ссылками или видео, что и как можно сделать; обрати внимание на опыт конкурентов, в нём можно найти вдохновение.