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

Аудит юзабилити №398

Дата аудита: ноябрь 2015 года

Объем отчета: 34 страницы 

 

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

 

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

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

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

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

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

Логотип в правом углу страницы

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

Анализ карты кликов логотипа

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

Ошибки в оформлении слогана

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

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

Большое количество шрифтов на странице

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

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

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

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

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

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

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

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

Оформление ссылок

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

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

Ссылки оформлены как поля поиска

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

Ошибки в выделении текущего раздела сайта

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

Не выделяется текущий раздел сайта

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

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

Ссылки оформлены как обычный текст

Ссылки оформлены как обычный текст

Ссылки оформлены как обычный текст

Ссылки оформлены как обычный текст

Ссылки оформлены как обычный текст

Ссылки оформлены как обычный текст

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

Непонятно, ссылка или заголовок

Анализ данных карты кликов

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

Почему открsn этот раздел меню

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

В меню каталога не выделяется текущий раздел сайта. Например, вид меню при переходе на страницу 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 или телефону.

Get new case studies by email:

More Case Studies

See all