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

Компоновка верхней части сайта

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

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

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

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

Это подтверждается и данными карты кликов.

Слоган «Восковки есть!» расположен в средней части. Его шрифт и оформление выбиваются из общего дизайна (логотип сделан с имитацией рукописного написания; слоган – обычный общепринятый шрифт семейства Arial).

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

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

Рекомендуем использовать на сайте не более 3-4 шрифтов.

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

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

Она должна быть интуитивно понятной и хорошо структурированной.

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

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

В верхнем меню кнопки не реагируют на наведение курсора. Это показано на видео по ссылке https://yadi.sk/i/MHlQkmXhkRg82 . Это отрицательно сказывается на юзабилити, т.к. пользователь не получает визуальной обратной связи при работе с интерфейсом сайта.

Оформление ссылок «Доставка» и «Оплата» выбивается из общего стиля кнопок верхнего меню.

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

Непонятно, это ссылки или поля поиска.

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

При переходе по страницам в меню не выделяется текущий раздел сайта. Например, http://voskovok.net/prices/ :

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

Большое число ссылок на сайте оформлено как обычный текст. Их неэффективность подтверждается и данными каты кликов. Ниже приведены скриншоты таких элементов:

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

Непонятно, почему при входе на главную (или любую другую страницу) по умолчанию открыт именно этот раздел каталога:

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

В меню каталога не выделяется текущий раздел сайта. Например, вид меню при переходе на страницу http://voskovok.net/catalog/501/503/

Рекомендуем явно выделять текущий раздел в каталоге.

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

Данные ссылки не реагируют на наведение курсора.

В данный момент на сайте отсутствует вспомогательная навигация по типу «хлебные крошки» (https://ru.wikipedia.org/wiki/%D0%9D%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D1%86%D0%B5%D0%BF%D0%BE%D1%87%D0%BA%D0%B0 ). Это отрицательно сказывается на юзабилити, особенно учитывая разветвленную структуру сайта и каталога.

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

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

Учитывая большую высоту некоторых страниц, такое решение неэффективно с точки зрения юзабилити. Например, высота страницы http://voskovok.net/top/ составляет 7489 пикселей при просмотре на широком экране 1920х1080. Это можно увидеть на полном скриншоте по ссылке https://yadi.sk/i/MYOediXgkRs5T.

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

Юзабилити главной страницы сайта

В блоке «Это модно» есть только 4 предлагаемых позиции. Возможность прокрутки и просмотра большего числа товаров отсутствует. Такое решение снижает привлекательность и эффективность этого элемента интерфейса.

Это подтверждается и данными карты кликов – нажатия на эти элементы за квартал практически отсутствуют.

Рекомендуем сделать данный блок с прокруткой 10-20 товаров из каталога.

Не согласовано положение границ блоков.

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

Рекомендуем использовать футер высотой максимум 100-120 пикселей.

Аудит модуля поиска по сайту

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

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

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

Также на странице поиска http://voskovok.net/search/ есть еще три дополнительных кнопки для перехода на страницы с соответствующими формами.

Такое дублирование осложняет выбор нужного варианта и ухудшает юзабилити.

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

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

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

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

В данный момент вызывает сомнение качество работы поиска по каталогу. Например, на сайте есть страница с ценами и размерами розового жемчуга http://voskovok.net/allgem/pearl/578/.

Но при попытке поиска по запросу «жемчуг розовый» или «розовый жемчуг» данные товары не находятся. Это продемонстрировано на видео по ссылке https://yadi.sk/i/0pC1NL2CkWvMt.

Такая же ситуация и с поиском по запросу «изумруд».

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

На сайте есть отдельная страница с заголовком «поиск камней» http://voskovok.net/search/by-ins/ . Но на этой странице есть только выбор формы камня и его размеров. Информация о том, какой это конкретно камень отсутствует (например, фианит).

Аудит юзабилити каталога и корзины

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

Например, заголовки для разных коллекций одинаковы на страницах http://voskovok.net/catalog/422/429/ и http://voskovok.net/catalog/403/407/ .

Такое решение также отрицательно сказывается и на поисковой оптимизации сайта, т.к. нет необходимой уникальности страниц. Все теги заголовка H1 содержат фразу «Каталог восковок», а теги H2 дублируются.

Рекомендуем в заголовке выводить название коллекции и категорию.

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

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

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

Рекомендуем использовать скрипт просмотра фото с автоматическим подгоном высоты под размер картинки.

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

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

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

Ширина поля ввода сделана избыточной.

После добавления товаров в корзину невозможно узнать, сколько конкретно единиц добавлено и какая общая сумма к оплате. Для этого надо переходить на подстраницу корзины http://voskovok.net/my/cart/.

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

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

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

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

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

Рекомендуем явно указать данную информацию

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

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

Рекомендуем обеспечить корректное отображение корзины при любом разрешении экрана.

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

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

Видео работы с корзиной на экране 1366х768 показано по ссылке https://yadi.sk/i/VEsOjEfKkXUSo. При просмотре сайта 1280х768 – по ссылке https://yadi.sk/i/lKjdMnR8kXUoo. В обоих случаях, чтоб найти кнопку «Оформить заказ» надо прокручивать экран вниз.

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

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

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

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

Шрифт в поле примечания к заказу отличается от шрифта выпадающих списков.

В таблице с составом заказа нет возможности посмотреть детальное описание или фото. Так же нет возможности изменить набор товаров в заказе.

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

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

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

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

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

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

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

Ширина полей формы не согласована.

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

Картинка с защитным кодом сделана слишком маленькой и на ней сложно рассмотреть символы. Это подтверждается и данными аналитики форм – на заполнение этого поля пользователи тратят максимальное время.

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

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

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

Даже если пользователь добавил товары в корзину, он не может просмотреть ее содержимое и стоимость заказа без авторизации. Это показано на видео по ссылке https://yadi.sk/i/9nWJhF3ekXAXu.

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

Блок «Новинки каталога»

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

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

Используются слишком маленькие фото.

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

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

Страница «Доставка»

http://voskovok.net/delivery/

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

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

Непонятно, для чего на странице дублируется заголовок.

При попытке просмотра страницы с информацией о самовывозе в Москве http://voskovok.net/delivery/1.html выдается сообщение об ошибке.

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

Страница «Оплата»

http://voskovok.net/howtopay/

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

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

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

Страница прайса «Цены»

http://voskovok.net/prices/

Страница с ценами почему-то имеет заголовок «Все услуги».

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

Не понятно, по какому принципу построена система скидок.

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

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

Текст описания расположен слишком близко к заголовку.

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

Страница «Контакты»

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

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

На сайте используется несколько адресов электронной почты (по направлениям деятельности). Но они все расположены на разных бесплатных почтовых сервисах. На сегодняшний момент общепринятым в таких случаях является привязка почты к имени домена и создания адресов вида адрес_ящика@voskovok.net.

Рекомендуем использовать сервис почты для домена https://pdd.yandex.ru/.

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

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

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

На странице «Контакты» нет никакой информации о том, что у компании есть представительства в других городах. Она вынесена на отдельную страницу «Представительства» http://voskovok.net/offices/. Такое решение является не оптимальным с точки зрения юзабилити.

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

С радостью отвечу на Ваши вопросы по результатам аудита по email, skype или телефону.