Чек-лист юзабилити сайта: как сделать сайт удобным

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

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

Юзабилити - удобство использования. Интуитивный, удобный сайт - это ресурс с высоким юзабилити. Якоб Нильсен, эксперт по юзабилити, назвал 5 факторов удобства:1. Обучаемость. Скорость выполнения задачи пользователем на сайте2. Эффективность. После первого раза использования, сможет ли клиент быстро выполнить свои задачи во второй раз на этом же ресурсе3. Запоминаемость. Если клиент вернется через месяц, будет ли просто ориентироваться на сайте4. Ошибки. Если клиент ошибся, подскажет ли ему информация на странице. Или клиенту придется вводить все заново5. Удовлетворенность. Удобно ли посетителю пользоваться интернет-ресурсом, оформить заказ, найти нужную информациюЮзабилити влияет на конверсию: 1. 3 секунды загрузки страницы = клиент покидает страницу2. Отсутствие конкретной информации = клиент разочарован в сайте3. Если учитывать юзабилити при разработке, то затраты на поддержку ресурса сократятся4. Полная информация о товаре увеличивает объем продаж больше чем на 200%5. Постоянные покупатели, довольные интернет-ресурсом, тратят в 2 раза больше новых клиентовКонверсия и прибыль напрямую связаны с юзабилити. Именно поэтому важно вовремя проводить анализ юзабилити для установления прочных взаимоотношений с клиентами.

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

1. Скорость загрузки. Страница должна загружаться максимум 2 секунды, иначе посетитель нажмет кнопку и закроет ее. Анимация, фото, видео замедляют скорость. Используйте их в меру2. География и язык. Если сайт работает в нескольких регионах, то стоит добавить переключатель языков и поддомены

3. Адаптивность. Сейчас пользователи выходят в интернет чаще всего со смартфонов. Поэтому проверьте, как сайт выглядит на мобильных устройствах: на месте ли верстка, не уехал CTA4. Фавикон и сниппет. Фавикон - логотип, который выделяет сайт в поисковой выдаче. Настройте сниппет - это короткое описание сайта. Укажите важные разделы для удобства пользователей

Страница 404. Это страница об ошибке. Она говорит пользователю о том, что ее не существуют. Добавьте на нее строку поиска и разделы.

1. Восприятие цвета. Учитывайте пользовательский опыт. Красный цвет - для ошибок, зеленый - для корректности действий, серый - неактивное поле. Не используйте другие цвета, чтобы не путать пользователя2. Не перегружайте. Не надо добавлять 1000 иконок, баннеров, рекламы

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

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

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

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

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

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

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

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

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

Карточка товара. У товара должно название, цена и описание

2. Фильтр. Пользователь может искать товар по определенной характеристики. Добавьте фильтр, например, в боковой части страницы3. Популярные товары. Пользователь может сам менять сортировку: по стоимости, отзывам. Но по умолчанию поставьте сортировку по популярности. Так клиент будет видеть, что топ выбора пользователей4. Корзина. Настройте анимацию для корзины. Пусть она подпрыгнет, подсветится, добавится цифра с количеством товара. Не отвлекайте пользователя рекламой, баннерами, он может передумать. В корзине пользователь должен нажать одну кнопку для оформления заказа5. Оплата. Не используйте неоднозначных формулировок. Это важный раздел! Оставьте поля только для способа оплаты и времени, например, при получении или онлайн. После оплаты добавьте текст, что оплата прошла. При возникновении ошибки, расскажите, почему она произошла. Добавьте поле для номера телефона клиента или номер оператора6. Доставка. Страница без лишних полей. Добавьте возможность автозаполнения по местоположению. Если клиент заполнил поля один раз, то добавьте автосохранение

В заключении, прикрепляем итоговые рекомендации для проверки юзабилити.1. Формируйте насмотренность. Изучайте сайты конкурентов, отмечайте, что нравится, а что смущает. Аналитика вам в помощь2. Изучайте ресурсы, специализирующиеся на вашей отрасли. Например, не надо повторять все за магазином электроники, если вы онлайн-школа3. Тестируйте изменения. Например, проводите А/Б тестирования, выделяйте страницы с лучшими показателями4. Мыслите как пользователь. Анализируйте действия пользователя от А до Я, пройдите сами путь от входа до покупки5. Проведите seo-аудит. Его вы можете доверить компании, которая занимается seo-продвижениемПроведение аудита по чек-листу юзабилити - самый простой и дешевый способ проверить ресурс. Удобство клиента - цель номер 1 при проверке. При структурированной проверке, вы найдете способы увеличения конверсии и привлечения покупателей.