Чек-лист юзабилити: основные рекомендации

Оглавление

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

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

1. Скорость загрузки

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

Рекомендуется, что сайт должен загружаться до 3 секунд. Если загрузка превышает это время, то вы можете потерять значительную часть посетителей.

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

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

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

• https://developers.google.com/speed/pagespeed/insights/
• https://gtmetrix.com
• https://tools.pingdom.com
• https://sitespeed.ru
• https://loading.express
• https://webpagetest.org

2. Версия для мобильных устройств

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

Существует 2 вида представления контента сайта на мобильных устройствах:

• Адаптивная версия. Версия, при которой полная версия сайта адаптируется под мобильное устройство. Позиционирование контента меняется в зависимости от ширины экрана.
• Мобильная версия. Версия, которая является отдельным сайтом. Позиционирование контента изначально имеет вид, удобный для чтения и взаимодействия с помощью мобильного устройства.

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

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

Для проверки наличия мобильной версии можно воспользоваться ручной проверкой или с помощью сервисов:

• Яндекс.Вебмастер (проверка от Яндекс)
• Google Search Console (проверка от Google)

3. Кроссбраузерность

Кроссбраузерность – это особая верстка сайта, обеспечивающая одинаковое отображение его страниц в разных браузерах.

Дело в том, что каждый браузер работает на определенном движке. У каждого браузера он свой и из-за этого каждый браузер распознает HTML код по-разному. Поэтому возникает проблема: сайты некорректно отображают одну и ту же информацию в разных браузерах.

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

Если ваша аудитория посещает сайт с различных браузеров (Opera, Chrome, Firefox и пр.), убедитесь, что, ваш сайт отображается в них корректно.

Сделать это можно вручную или с помощью сервисов:

• browsershots.org
• browserling.com
• crossbrowsertesting.com

4. Интуитивно понятный интерфейс

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

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

Еще одним важным критериям «понятности» интерфейса выступает визуальная часть:

• Используйте иконки рядом с текстом. Так вы упрощаете понимание текста;
• Используйте пиктограммы вместо текста. Если они однозначно характеризуют содержание.
• Используйте интерактив в нужном месте. Размещайте кнопки и визуально-интерактивную часть там, где её ожидают найти.

Основная задача интерфейса – дать пользователю ответить на вопросы «Кто, что, где, почему, когда».

Предположим, что вы приходите в пункт проката автомобилей, заказываете один, подходите к нему и собираетесь сесть в салон. Но вот незадача — на двери нет ручки! Ну и как проникнуть внутрь автомобиля?

Это пример неинтуитивного дизайна.

5. Единообразие интерфейса

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

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

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

Проверьте, чтобы все однотипные элементы на сайте были оформлены одинаково:

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

6. Умеренность

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

Например, информационные сайты очень часто злоупотребляют pop-up формами и предлагают скидку при определенном пролистывании текста страницы:

Pop-up формы – это лишь один вид навязчивости. Есть другие возможности более ненавязчивого получения контактов для продажи.

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

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

Если вы не знаете какую роль играет SEO в любом бизнесе, рекомендуем прочитать нашу прошлую стать – Роль SEO в бизнесе.

7. Цветовая палитра

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

Например, яркий красный текст на контрастно синем цвете не виден:

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

А вот пример из реального проекта, где авторы сайта не предусмотрели читаемость текста на фоне:

При выборе палитры лучше придерживаться более спокойных и универсальных цветов:

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

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

8. Визуальный контент

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

Плохой пример:

Хороший пример:

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

9. Назначение

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

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

Плохой пример:

Хороший пример:

10. Текст

Шрифт, размер текста, цвет текста, адекватные межабзацовые, межстрочные и межсимвольные отступы, стиль и цель повествования, структура содержания — это все формирует удобство чтения текста.

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

Плохой пример:

Наши специалисты готовы оказать онлайн поддержку, которая позволит вам достигнуть решения задачи, в основе которой лежит ваша проблема, позвоните нам по телефону 8 (951) 999-77-55 и мы расскажем, как решить её.

Хороший пример:

Мастер готов оказать онлайн поддержку и записать вас по номеру: +7 (951) 999-77-55.

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

11. Действия

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

Например, кнопка «Обратный звонок» или контактный телефон должны быть выделены – это помогает пользователям увидеть особые элементы сайта.

12. Основное действие

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

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

Плохой пример:

Хороший пример:

13. Доступность

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

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

3. Элементы быстрой остановки:
   • возможность закрытия pop-up форм;
   • кнопка остановки видео, музыки;
   • кнопки скрытия контента;
   • и пр.

4. Элементы быстрого поиска:
   • поиск по сайту;
   • сортировка;
   • фильтрация;
   • группировка;
   • подборка по параметрам;
   • карта сайта;
   • ссылки в навигации;
   • и пр.

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

Вывод

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

Мы в Цифровом Элементе часто сталкиваемся с проблемами взаимодействия с сайтом: неочевидная структура, нечитаемый текст и пр. Над всеми этими проблемами можно и нужно работать, если ваш сайт – инструмент продаж. В продажах не должно быть барьеров у ваших потенциальных клиентов.

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

Аудит юзабилити вашего сайта Оставить заявку