Чек-лист юзабилити сайта

Чек-лист юзабилити сайта

Отметьте то, что у вас выполнено прямо здесь. Кнопка «Получить отчет» находится в конце чек-листа. Без регистрации, бесплатно.

Технические параметры юзабилити

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

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

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

Автоматическая обработка данных: автоматизация всего, что можно сделать кодом. Например, программа автоматического заполнения данных.

Безопасность

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

Использование безопасных протоколов передачи данных: применение на сайте протоколов HTTPS и SSL-сертификатов для шифрования передаваемых данных и предотвращения их перехвата.

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

Защита от спама: установка на сайт антиспам-фильтров для автоматической блокировки нежелательных сообщений и предотвращения рассылки спама.

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

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

Заголовки H1 и мета-теги Title и Description заполнены корректно, без повторов и пустых значений, что улучшает индексацию сайта поисковыми системами.

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

Все URL сайта являются человекопонятными (ЧПУ), хорошо читаемыми и информативными для пользователей. Они соответствуют основному ключевому запросу и тоже помогают улучшить навигацию по сайту и SEO.

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

Каждому устройству – свое юзабилити

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

Кроссбраузерная совместимость: сайт корректно отображается в разных браузерах.

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

Адаптация интерфейса под устройство (мобильное, десктоп). Каждому устройству – свое юзабилити!

Обязательные страницы сайта

Главная

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

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

Главная должна говорить:

об основных видах деятельности,

продуктах (товарах, услугах),

показывать ваше позиционирование,

раскрывать суть вашего бренда

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

О компании

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

Портфель брендов: укажите какими брендами владеет ваш бизнес, это увеличивает доверие целевой аудитории.

Краткий перечень предлагаемых продуктов или услуг.

Фотографии офиса, магазина, команды.

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

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

404

Проработанный функционал обработки ошибки 404. Нужно объяснить посетителю, что произошло на сайте, какую он допустил ошибку. Разместите строку поиска, укажите контактные данные компании: телефоны, электронную почту, соцсети, мессенджеры.

Карта сайта

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

Общие требования к юзабилити страниц сайта

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

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

Предсказуемость расположения элементов

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

Требования к юзабилити элементов страниц сайта

Фавикон

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

Логотип

Четкий, легко читается, его дизайн возьмите непосредственно из руководства по фирменному стилю компании. Для сайта лучше использовать файл в формате SVG. Очевидно, что размер должен быть таким, чтобы его можно было легко рассмотреть на экране, и в то же самое время, он не должен занимать много места. Рядом с лого можно расположить слоган бренда.

Главное меню

На всех страницах сайта присутствует сквозное главное меню.

Главное меню расположено в верхней части сайта (в шапке)

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

Пункты главного меню называются просто, самым привычным для посетителя образом (не заставляйте его думать, поэтому исключите креатив): “Контакты”, “О компании”, “Доставка” и т.д.

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

Основные и популярные разделы главного меню дублируются в футере.

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

Быстрый скроллинг

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

Иконки

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

Иконки интуитивно понятны, точно соответствуют фирменному стилю.

H1

Заголовок H1 релевантен основному запросу, продвигаемому на конкретной странице сайта.

Title, description, url страницы соответствует H1 и основному запросу, используются LSI слова.

Хлебные крошки

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

Кликабельные элементы

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

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

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

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

Всплывающие подсказки для деактивированных элементов – при наведении курсора появляется сообщение с объяснением причины неактивности.

Ссылки

“Честные” ссылки: выполняют функции перехода на другую страницу, открытия новой вкладки. Ссылки никогда не должны запускать действия!

Наличие понятного текста ссылки (анкора) для указания объекта, на который она ведет. В анкорах используем ключевые и LSI слова. Анкоры имеют особое значение для SEO оптимизации, пишем осознанно!.

Единый дизайн: имеют единый стиль оформления, курсор превращается в “руку” при наведении, после клика меняет цвет.

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

Удобное нажатие на ссылку: текст достаточно крупный и чёткий для комфортного нажатия.

Кнопки

«Честные» кнопки: по клику  выполняется конкретное действие, а не перевод на другую страницу сайта.

Удобство нажатия: кликабельна вся кнопка, а не только текст на ней. Если рядом нет других кнопок, можно сделать кликабельным небольшое пространство вокруг нее.

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

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

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

Кнопки CTA (Call to Action):

Быстрый доступ к СТА-кнопкам: кнопки призыва к действию (купить, заказать услугу, обратный звонок и т.п.) должны быть доступны на каждой странице сайта.

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

Основной CTA - самый заметный: на странице может быть несколько СТА , но должен быть основной, который будет выделяться на фоне других элементов страницы и привлекать больше внимания. Пользователь должен легко его найти и нажать.

Динамичная кнопка СТА: кнопку призыва к действию нужно менять в зависимости от стадии процесса, например, при оформлении заказа, когда пользователь заполняет форму.

Поиск

Пользователи предпочитают сначала искать с помощью разделов и фильтров и только потом используют поиск по сайту или в интернет.

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

Простота использования: поиск запускается нажатием кнопки или клавиши Enter, исправления ошибок происходят автоматически, длина поля поиска не менее 30 символов.

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

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

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

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

Изображения

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

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

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

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

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

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

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

У изображений заполнен alt, что положительно влияет на ранжирование страницы и сайта.

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

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

Футер

Должен иметь простую и понятную структуру.

Ссылки: на главную страницу.

Полное или частичное дублирование разделов основного меню.

Блог, новости, услуги, ответы на вопросы.

Контакты владельца или администрации сайта.

Социальные сети и интернет мессенджеры (Вконтакте, Telegram и т.д.).

Форма обратной связи.

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

Информация о лицензии и авторских правах.

Должен соответствовать стилистике сайта.

Текст футера не должен приводить к переспаму по какому-либо ключевому слову.

Влияние структуры страниц на юзабилити

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

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

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

Списки и таблицы.

Блоки с рекомендуемыми товарами, статьи, новости и т.п.

Тематические теги.

Текст футера не должен приводить к переспаму по какому-либо ключевому слову. Рекомендуется использовать LSI слова, которые семантически связанны с основным запросом, продвигаемым на странице.

Навигация и юзабилити сайта

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

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

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

Кликабельные “хлебные крошки”, выделение текущего пункта навигации.

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

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

Дизайн и юзабилити

Фирменный стиль

Дизайн сайта соответствует правилам, описанным в брендбуке или руководстве по фирменному стилю.

Дизайн и визуальные решения раскрывают характеристики бренда.

Цвет

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

Простые цвета: они одинаково воспроизводится на разных устройствах. Например, web-цвета в палитре фотошопа.

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

Исключением являются случаи, когда яркий, контрастный цвет предусмотрен, как стилеобразующий. Например, красный для M-Видео, МTС.

Шрифт

Размер и тип шрифта удобны для чтения, цвет текста хорошо контрастирует с фоном. Размер шрифта находится в диапазоне от 12 до 16 пикселей.

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

Ссылки отличаются от основного текста.

Все страницы сайта используют один и тот же набор шрифтов.

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

При масштабировании страницы шрифт должен оставаться читаемым.

Изображения

Анимация используются минимально или не используются вообще.

Типографика

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

Оформление дополнительного текста отличается от основного

Рубрикация. Пропорции для заголовка/подзаголовка/основного текста вычисляются по "золотому сечению" = 1,618

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

Композиция

Использование в верстке одной из версий модульной сетки. Стандартное количество колонок - 12. Сетка из шести или восьми колонок, очевидно, облегчит задачу по верстке.

Оптимальный размер кликабельных элементов.

Использование в дизайне приемов и канонов композиции: ритм; большое и малое; форма и контрформа; табличность, наложение, рамочность; динамика и статика; равновесие; акцент и фон; одна страница - один смысл.

Текст

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

Лаконичность: Тексты не содержат “воды”, длинных вступлений или ненужной информации.

Понятная терминология: В пунктах меню, формах, кнопках, анкорах используются термины и формулировки, которые понятны посетителям.

Фокус на ЦА: Используются простые, знакомые и понятные целевой аудитории фразы и слова в тексте.

Легкость представления чисел: Цифры представлены в виде чисел, чтобы упростить их восприятие. Разряды отделяются пробелами, в противном случает большие числа понимают плохо.

Форматирование и читаемость текста: Текст разделен на смысловые блоки с помощью подзаголовков.

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

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

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

Визуальная иерархия: заголовки разных уровней отличаются размером шрифта (см типографика)

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

Списки используются для улучшения организации текста и облегчают чтение.

Ключевые слова и фразы выделяются жирным шрифтом для SEO.

Важные моменты выделяются курсивом или жирным шрифтом для акцентирования внимания посетителя сайта.

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

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

Строки текста занимают около 70-80 символов для удобства чтения.

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

Чередование текста с картинками, фото, таблицами и графиками делает сайт более интересным и легким для восприятия.

Коммуникация с посетителем сайта

Контакты

Краткая контактная информация располагается в верхней части сайта, дублируется в футере. Подробная - находится на отдельной странице.

Место расположения кратких контактных данных (телефоны, адреса электронной почты, мессенджеры и т.д.) постоянно для всех страниц сайта.

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

Защита от копирования, если она есть, не применяется к контактной информации.

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

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

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

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

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

Всесторонняя информация о каждом объекте:

точный адрес, включая корпус, номер офиса и почтовый индекс;

график работы и способы связи в нерабочее время;

Единый бесплатный номер 8(800)...;

телефоны всех отделов, работающих с клиентами;

электронные адреса для приема заказов;

номера интернет-мессенджеров и социальных сетей, используемых вашей целевой аудиторией;

интерактивную карту Google или Яндекс с указанием местоположения вашей компании;

информацию о доступности общественного транспорта, ближайшего к вашему офису;

схему проезда для посетителей на автомобиле и общественном транспорте;

фотографии входа в офис.

Обратная связь

Единый для всего сайта внешний вид формы обратной связи.

Возможность выбора разных способов связи.

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

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

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

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

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

Оправка копии сообщения на email посетителя.

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

Очистка сообщения и вложений после удачной отправки (email или телефон можно сохранить на время сессии).

Онлайн-консультант

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

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

Функционал онлайн-консультанта предоставляет посетителям информацию о примерном времени ожидания ответа на их вопрос.

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

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

Отзывы и комментарии

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

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

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

Функционал

Регистрация

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

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

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

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

Упрощение регистрации через социальные сети помимо стандартной регистрации.

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

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

Расположение полей в одной колонке, поскольку вторую часто пропускают.

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

Выполнение проверок правильности ввода данных без перезагрузки страницы: email, телефон, дата рождения, и так далее. Вывод сообщения об ошибке при неправильном вводе данных.

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

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

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

Визуальное подтверждение правильности заполнения полей, например, с помощью зеленого цвета.

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

Получение электронного письма для подтверждение регистрации, включая “фоновую” регистрацию.

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

Наличие функции “шаг назад” для корректировки введенной информации в процессе регистрации или оформления заказа.

Примеры использование подсказок и автозаполнения:

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

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

Если возможно, часто используемые значения заполняются по умолчанию.

При заполнении поля, предлагаются подходящие значения для автозаполнения.

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

Корзина

Стандартный алгоритм добавления товара в корзину интернет-магазина

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

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

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

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

Удобство работы с корзиной:

В корзине можно изменять количество или полностью ее очистить.

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

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

В корзине предусмотрена возможность связи с менеджерами интернет-магазина для получения помощи в случае возникновения вопросов в процессе покупки:

Иконка онлайн-консультанта.

Контактные телефоны менеджеров.

Форма для обратного звонка.

В корзине отображается информация: изображение, название, краткое описание, цена, количество, общая стоимость.

Изображение и название являются активными ссылками, ведущими на страницу товара.

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

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

Наличие кнопки "Оформить заказ"

Доставка

Минимизация полей для заполнения: сервисы Geo IP хорошо определяют местоположение пользователя и автоматически заполняет соответствующее поле.

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

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

Автоматический расчет суммы доставки, которая включается в итоговую сумму заказа.

Оплата

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

Динамичность: варианты оплаты изменяются в зависимости от выбранного способа доставки (почта, ТК, самовывоз).

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

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

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

Возможность кредитования.

Информативные примечания:

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

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

Оформление заказа

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

Пользователь может вернуться к предыдущим этапам и внести изменения.

Список товаров заказа доступен на всех этапах.

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

Заказ можно оформить без регистрации. Все нужные данные запрашиваются на этапе «данные пользователя».

После завершения оформления заказа пользователь:

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

Получает ссылку на страницу для отслеживания статуса заказа или сразу перенаправляется на эту страницу.

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

Незарегистрированному пользователю предлагают зарегистрироваться и написать о себе.

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

На всех этапах оформления заказа пользователю предлагается помощь:

Заголовок чата поддержки меняется на “Нужна помощь в оформлении заказа?”

Контакты менеджера и предложение помощи размещаются на видном месте.

Юзабилити страницы категорий товара (раздел каталога)

Категории интернет-магазина являются одним из самых важных элементом SEO. H1, Title, description, url, блок описания категории должны соответствовать основному запросу страницы категории. В Title, description рекомендуется использовать LSI слова.

Оптимальное количество товаров на странице категории - 10-15 штук. Смотрим сколько у конкурентов из ТОП выдачи, делаем так же.

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

Гибкость настройки: пользователь может выбирать количество позиций, отображаемых на странице и вариант их отображения (витрина, список, плитка). Есть опция показа всех товаров на одной странице.

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

Фокус на реальность: товары могут искать в разных категориях, сделайте возможным добавлять одну и ту же позицию в разные категории (например, “точка доступа” и “Wi-Fi-роутер”).

Пустые категории. Если в категории ничего нет в наличии, категория не исчезает. У отсутствующих товаров кнопка заказать становится неактивной. Никогда не пишет, что товаров нет (SEO!). Чтобы исключить разочарование посетителя, нужно предложить  что-то подобное из близких категорий. Страницы устаревших категорий остаются в индексе Яндекса и т.п. Это дает возможность переключить внимание посетителя на новые аналогичные.

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

Расширенные характеристики: Их можно просмотреть при наведении курсора или нажатии “Показать больше”.

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

Дополнительные блоки: После товаров соответствующих текущей категории выводятся блоки и «Распродажа», «Акции», «Недавно вы просматривали» , «Сопутствующие» , «Похожие предложения» , «Интересные предложения» и т.п.

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

Сортировка товара

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

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

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

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

Фильтры

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

Кнопка применения: При использовании отложенного фильтра на странице присутствует заметная кнопка, которую пользователь нажимает для активации фильтра.

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

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

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

Готовый URL для результатов фильтрации: После применения фильтра генерируется URL сайта, которым можно поделиться или сохранить в закладки.

Очистка фильтра. Наличие сброса фильтра, каталог возвращается в исходное состояние.

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

Сравнение товаров

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

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

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

Ограничение на сравнение: позволяет сравнивать не более N-го числа позиций . Если число превышает это значение, в сравнение ничего не добавляются, пользователь получает сообщение.

Юзабилити страница товара (карточка)

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

Рекламные материалы, которые могут отвлечь внимание, отсутствуют.

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

Цена

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

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

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

Количество

Информация о количестве покупаемого появляется после добавления в корзину

Изменение количества осуществляется копками -+

Изменение количества до 0 убирает товар из корзины

Наличие и актуальное количество на складе

Фото

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

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

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

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

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

Видео

Одним из элементов фотогалереи может быть видео.

Возможность настроить показ видео

Основное внимание в видео на реальной ситуации использования товара, а не формальной демонстрации.

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

Характеристики товара

Справа от основного фото выводятся основные характеристики и часть описания. Основные характеристики можно назвать, например "Коротко о товаре".

Расширенный список характеристик можно показать по клику на "Все характеристики", а полное описание - "Читать далее".

Для неочевидных характеристик/терминов требуются подсказки.

Все характеристики оформляются в едином стиле.

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

Дополнительная информация

Варианты оплаты

Доставка

Гарантийный срок

Комплектация

Инструкции

Упаковка

Стране-производитель

Возврат

CTA

Заметная и хорошо привлекающая внимание кнопка CTA (“Купить”, “Заказать”, “Перезвоните мне”) крупная, кликабельная, контрастного цвета.

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

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

Для быстрого и простого перехода к оформлению заказа на сайте возможны варианты:

После добавления в корзину отображается всплывающее окно с кнопками (“Перейти к оформлению заказа” и “Продолжить покупки”), что избавляет пользователя от необходимости поиска корзины;

На кнопке “Купить” или рядом с ней при наличии товара в корзине появляется ссылка на оформление заказа;

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

Дополнительные блоки

Список желаний. Товары сохраняются в отдельный список, у них появляется иконка «сердечко».

Похожие предложения. Если отсутствует или снят с производства, предлагаются аналогичные модели.

Сопутствующие товары. Расходные материалы, комплектующие, аксессуары, насадки, которые можно приобрести отдельно.

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

Рейтинг. Оценку можно поставить одним кликом.

Блок отзывов.

Блог

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

Блок ссылок на статьи: Добавление на товарных страницах и категориях ссылок на полезные статьи и материалы блога сайта для помощи клиентам в выборе продукта. Встречно, внедрение в статьи блога ссылок на товарные страницы, чтобы клиентам не приходилось искать их самостоятельно.

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

Отметьте то, что нужно в чек-листе. По ссылкам скачайте^* отчеты:
1. Список пунктов чек-листа, которые отмечены, как выполненные.
2. Список не отмеченных пунктов чек-листа (то, что вам предстоит сделать).
* - файлы сохраняются в каталог, в который настроено сохранение загрузок вашего браузера (путь для сохранения файлов).
Для офлайн заполнения, вы можете скачать юзабилити чек-лист в формате pdf / docx