Аудит юзабилити сайта интернет-магазина ювелирного дома

Вводная информация.

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

Перед просмотром дополнительных материалов их желательно скачивать на компьютер.

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

Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.

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

Качественная навигация по сайту является основой для построения эффективного юзабилити сайта.

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

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

Рассмотрим, насколько качественно проработаны меню и навигационные элементы в данный момент на сайте.

В верхней части страницы расположено вспомогательное меню для перехода на информационные страницы сайта:

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

Видео показано по ссылке https://yadi.sk/i/rhRxN0tK3MVbeM

Аналогичная проблема наблюдается и при переходе в раздел «Список желаний». Видео показано по ссылке https://yadi.sk/i/vO9c–lf3MVbp6

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

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

Согласно данным статистики, наиболее востребованным является раздел «Кольца». Например, на главной странице доля переходов в него составляет 31.8% (практически каждый третий посетитель сайта). Ниже приведены соответствующие скриншоты:

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

Как и говорилось выше, наиболее популярный раздел сайта – кольца. Полная карта кликов для главной страницы приведена на скриншоте по ссылке https://yadi.sk/i/UUbeXmFu3MWZKE.

Рекомендуем пересмотреть очередность блоков и поставить их в соответствии с востребованностью у пользователей.

Отдельно стоит отметить, что одним из требований юзабилити, является наличие атрибута title=”” для всех ссылок.

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

Рекомендуем прописать атрибут title для всех ссылок на сайте.

Каталог ювелирных изделий

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

Первым разделом каталога является «Коллекции» http://maxim-demidoff.ru/catalog/collections.

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

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

Видео показано по ссылке https://yadi.sk/i/stHdrHyv3MVfvk.

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

При нажатии открывается страница с просмотром соответствующей коллекции. Например, http://maxim-demidoff.ru/catalog/collections/vintazh, которая состоит из колец и сережек.

Видео показано по ссылке https://yadi.sk/i/GbF4cP913MVgW9.

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

При нажатии на эту кнопку пользователь возвращается не на предыдущую страницу с коллекцией, а в подраздел каталога («Кольца» или «Серьги» соответственно).

Видео показано по ссылке https://yadi.sk/i/aBa1AWwL3MVgzR. Это не соответствует ожиданиям пользователя и отрицательно сказывается на юзабилити.

Рекомендуем обеспечить корректный переход назад к списку коллекций.

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

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

Видео показано по ссылке https://yadi.sk/i/mZTqWgkG3MVhme

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

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

Видео показано по ссылке https://yadi.sk/i/xC_AC-S63MVi2V

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

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

Общепринятым вариантом является следующая последовательность действий:

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

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

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

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

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

Видео показано по ссылке https://yadi.sk/i/8hySmHSd3MWdT8

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

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

Поиск по сайту

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

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

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

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

Видео показано по ссылке https://yadi.sk/i/kraYAWmM3MaGGC.

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

Видео показано по ссылке https://yadi.sk/i/3Gs_QQvJ3MaGUC.

Аналогичная проблема при поиске «кольцо с сапфиром» или «кольцо с изумрудом».

Видео показано по ссылке https://yadi.sk/i/BIz0KkNE3MaGgW.

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

При этом содержание других страниц (например, с новостями компании) не индексируется и поиск по ним не осуществляется.

Видео показано по ссылке https://yadi.sk/i/UL5nYSIG3MaHCb.

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

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

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

Список желаний

http://maxim-demidoff.ru/wish-list

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

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

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

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

Видео показано по ссылке https://yadi.sk/i/cRaIsb7k3MaJ5U.

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

Ближайший бутик

http://maxim-demidoff.ru/stores

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

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

Кроме этого, пользователь должен совершить дополнительные действия с выбором города. Это отрицательно сказывается на юзабилити. Полный скриншот показан по ссылке https://yadi.sk/i/nmZQ0MkW3MaJju.

Это подтверждается и данными статистики. Город выбирают только 68,72% пользователей.

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

Для примера по ссылке https://yadi.sk/i/-x1hpXEr3MaSBH показана реализация этого функционала на сайте http://nebo.ru/

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

Раздел «Новости»

http://maxim-demidoff.ru/news

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

Видео показано по ссылке https://yadi.sk/i/hms6yF3L3MaUxN.

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

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

Видео показано по ссылке https://yadi.sk/i/9uVyL2pI3MaWEr

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

Форма заказа

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

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

Видео показано по ссылке https://yadi.sk/i/agXjiiWq3MaXDa

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

Видео показано по ссылке https://yadi.sk/i/UoAFAoQe3Maei6.

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

Верстка сайта

Далее рассмотрим, насколько качественно выполнена верстка сайта и ее соответствие современным стандартам.

Стили оформления находятся внутри HTML-кода, а не вынесены во внешние таблицы стилей. Ниже приведены скриншоты таких элементов:

Рекомендуем вынести все стили оформления во внешние CSS-файлы.

Присутствуют вставки таблиц стилей внутри HTML-кода.

Рекомендуем вынести стили во внешние CSS-файлы.

Структура заголовков не соответствует рекомендациям к семантике кода. Используются теги заголовков пятого уровня, а теги первого, второго, третьего и четвертого уровня отсутствуют. Это также отрицательно сказывается на оптимизации кода для поисковых систем. Ниже для примера показаны уровни заголовков для страницы http://maxim-demidoff.ru/catalog/products/garnitur-melodiya-serdca

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

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

320×480 https://yadi.sk/i/Cd3ePMWL3MaiG2

480×320 https://yadi.sk/i/JLbryLdi3Maj3q

800×600 https://yadi.sk/i/c3hyT4hE3MajtB

1024×768 https://yadi.sk/i/Tje6wWC63MamUD

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

Работа сайта в Яндекс.Браузере последней версии показана в видео по ссылке https://yadi.sk/i/E9Ks0ooo3Mao8V. Критические ошибки отсутствуют.

Отображение сайта в браузере Firefox показано в видео по ссылке https://yadi.sk/i/uXjt2mcX3Maor4

В ходе тестирования обнаружено некорректное отображение страницы http://maxim-demidoff.ru/stores.

Детальное видео показано по ссылке https://yadi.sk/i/wyf50Cx93MaqK8

Рекомендуем обеспечить корректную работу страницы с адресами бутиков в браузере Firefox.

В браузере Opera проблем верстки не выявлено.

Видео показано по ссылке https://yadi.sk/d/Ysgzob8N3Mar6m

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

Готов ответить на все вопросы по результатам аудита в скайпе, email или по телефону.