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

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

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

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

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

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

Логотип и слоган

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

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

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

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

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

Рядом размещен текст «Производственное объединение 999». По нему также неясно, о каком именно производстве идет речь.

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

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

Кроме этого, на некоторых страницах указывается название «Золото 999». Например, http://www.zoloto999.ru/uslovija-dostavki/

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

Фавикон

Этот элемент является достаточно важным для идентификации сайта среди других ресурсов.

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

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

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

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

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

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

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

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

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

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

https://yadi.sk/i/1juXLhXz3LfAAY

https://yadi.sk/i/zKI-_8243LfAPx

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

При выборе языковой версии сайта данный блок выводится по-разному. При этом сслыка «rus» является ссылкой на саму себя. Видео показано по ссылке https://yadi.sk/i/ozu9-w-S3LfFjT

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

Работа вспомогательной навигации

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

Но на некоторых страницах данный модуль работает с ошибками.

На главной странице выводится одна ссылка, которая ведет на ту же страницу. Такое решение не имеет практического смысла для пользователей. Видео показано по ссылке https://yadi.sk/i/nGqnLDbw3LfBHt

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

При просмотре публикаций в навигационной цепочке не выводится название выбранной публикации. Видео показано по ссылке https://yadi.sk/i/i2-K7vi23LfBdj

Аналогичная проблема возникает и при просмотре новостей. Видео показано по ссылке https://yadi.sk/i/FOeMma0g3LfC7B

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

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

Фактически, ссылки “Main” и “En” дублируют друг друга. Видео показано по ссылке https://yadi.sk/i/GoPAjVUU3LfEzx

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

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

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

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

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

Вывод результатов должен быть удобным и информативным.

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

Для примера выполним поиск по запросу «кольцо с самородком».

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

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

При переходе по первым результатам в выдаче открывается страница с 404-й ошибкой (страница не найдена). Видео показано по ссылке https://yadi.sk/i/2guInayc3LigYs.

Результаты поиска оформлены в виде текстовой ленты. Все результаты имеют одинаковые тексты (дата, заголовок, описание) и отличаются только информацией о весе. Фото изделий отсутствуют. Скриншот показан по ссылке https://yadi.sk/i/yW774TYz3Ligrs.

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

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

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

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

Главная страница сайта

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

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

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

Не совсем понятно, для чего на самом видном месте рядом с логотипом выводится время в Магадане:

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

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

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

Но в его юзабилити допущен ряд ошибок.

Нет никаких элементов для управления прокруткой, ее остановки при наведении курсора, либо быстрого перехода к заинтересовавшему баннеру. Это крайне негативно сказывается на эффективности данного блока. Видео показано по ссылке https://yadi.sk/i/FJf_5a3y3LgJcH.

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

Изображения загружены большего размера и масштабируются средствами браузера. Например, баннер http://www.zoloto999.ru/netcat_files/22/8/svadebnyy.jpg имеет размер 1645х542 пикселя и ужимается до 842х278.

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

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

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

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

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

Данный баннер является ссылкой на главную страницу, что не имеет логического смысла.

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

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

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

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

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

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

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

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

Допущены ошибки в строках с указанием пробы:

Также, крайне отрицательным моментом является то, что цена в явном виде указана всего для 3 из 16 изделий, представленных на главной странице. Полный скриншот показан по ссылке https://yadi.sk/i/iETOnXPh3LgTrk

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

Отдельно стоит отметить, что в левой колонке остается пустым достаточно большой блок под лентой новостей. Скриншот показан по ссылке https://yadi.sk/i/6-lIIy5s3LgUKn.

Используется слишком большой отступ между анонсами новостей:

Рекомендуем уменьшить отступ и привести его в соответствие с модульной сеткой сайта.

Верхние границы элементов не выравнены и дизайн выглядит неаккуратно:

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

Главная страница каталога

Далее рассмотрим дизайн и юзабилити главной страницы каталога.

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

Есть пустые зоны в одном из рядов:

Не выводится фото для подраздела «Пирсинг»:

Полный скриншот показан по ссылке https://yadi.sk/i/E6drofHZ3LgZeM.

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

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

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

Просмотр категории каталога

Юзабилити подстраниц каталога будем рассматривать на примере раздела «Женские кольца» http://www.zoloto999.ru/ishop/zhenskie-koltsa/.

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

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

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

Нет возможности поочередного быстрого просмотра фото товаров, представленных на странице. При нажатии на фото происходит переход на страницу детального описания изделия. Чтоб посмотреть следующее кольцо надо возвращаться на страницу каталога. Видео показано по ссылке https://yadi.sk/i/6s8cJDVR3LgtqJ.

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

Учитывая, что все кольца, представленные в каталоге, являются уникальными и представлены в одном размере, нет смысла в использовании выпадающих списков с размерами – пользователь не может выбрать размер, отличный от указанного. Видео показано по ссылке https://yadi.sk/i/ZOh4-0UA3Lguv2.

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

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

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

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

Кроме этого, блок с кнопками перекрывает информацию о весе и цене товара. Видео показано по ссылке https://yadi.sk/i/eej0UFFc3LgwQh.

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

При использовании постраничной навигации макет страницы разваливается. Видео показано по ссылке https://yadi.sk/i/Bgp8E5UP3Lgx3E.

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

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

• Сортировка изделий по параметрам (вес, цена, размер, дата добавления);
• Сортировка изделий по статусу «Наличие» или «Предзаказ»;
• Возможность заказать похожую модель другого размера;
• Подбор товара по параметрам (размер, вес, цена и т.д.);
• Добавление изделий в список сравнения или лист желаний для предварительного и окончательного отбора нужного товара;
• Просмотр нескольких фото товаров.

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

Быстрый просмотр товаров

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

Слишком большой отступ между заголовком и верхней границей окна:

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

Выпадающий список с размером перекрывает кнопку покупки и информацию о товаре:

Иконка для закрытия блока находится вверху, а при просмотре увеличенного фото – внизу. Видео показано по ссылке https://yadi.sk/i/Vs_jfqpq3Lgxq6.

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

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

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

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

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

Детальный просмотр товара

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

Кроме этого, выявлен ряд дополнительных недостатков.

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

Рекомендуем сделать данный элемент ссылкой.

Для всех товаров представлено только одно фото. Этого недостаточно для принятия решения о покупке изделия.

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

Ниже расположен вывод ленты товаров. Какой-либо заголовок отсутствует. Непонятно, что это за товары. Для примера по ссылке https://yadi.sk/i/PZ1vG52L3Lh2eW показан полный скриншот страницы http://www.zoloto999.ru/ishop/zhenskie-koltsa/rings_2360.html

Рекомендуем добавить заголовок для блока

При нажатии кнопки предзаказа, открывается соответствующая форма. Ее дизайн не проработан, нет проверки правильности заполнения полей. Удается успешно отправить абсолютно пустую форму предзаказа либо с неправильно заполненными полями. Видео показано по ссылке https://yadi.sk/i/LeaID4U33Lh34d.

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

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

Рекомендуем добавить такую навигацию.

Корзина и оформление покупки

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

Не проработан дизайн мини-корзины. Используется слишком маленький отступ между строками текста:

Не согласовано взаимное расположение верхних и нижних границ мини-корзины и соседних элементов:

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

Иконка товара, добавленного в корзину, пересекается с границей товара в нижнем ряду. Видео показано по ссылке https://yadi.sk/i/UWnd8P_Z3LiUEy.

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

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

https://yadi.sk/i/q0snJLdo3LiUje

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

При попытке пересчета суммы покупки в корзине выводится пустая страница. Перерасчет фактически не работает. Видео показано по ссылке https://yadi.sk/i/UsLy0cBE3LiV8J.

Аналогичная проблема возникает и при попытке удаления товаров из корзины. Видео показано по ссылке https://yadi.sk/i/iztG22WG3LiVNY.

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

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

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

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

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

В дизайне формы регистрации допущен ряд ошибок.

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

Нет заголовка поля:

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

Заголовки данных полей находятся слишком далеко:

Сообщение об ошибках в заполнении пароля выводится слишком далеко в противоположном углу формы. Видео показано по ссылке https://yadi.sk/i/ycTzjGFe3LiXNp.

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

После успешной регистрации заказ так и не был оформлен. Товары остались в корзине, в истории операций ничего нет. Видео показано по ссылке https://yadi.sk/d/CjNY7CH93LiXwW.

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

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

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

Контакты

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

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

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

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

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

Email компании размещен на бесплатном сервисе gmail, что снижает доверие пользователей к компании и сайту.

Рекомендуем использовать адрес почтового ящика, привязанный к домену сайта вида info@zoloto999.ru.

Кроме этого, на всех страницах сайтe email является обычным текстом, а не ссылкой. Это отрицательно сказывается на юзабилити.

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

Общепринятая форма отправки сообщения на сайте отсутствует.

На странице контактов также нет карты проезда к офису компании.

Рекомендуем добавить форму отправки сообщения и интерактивную схему проезда.

На странице «Контакты» нет информации и ссылок на профили компании в социальных сетях (facebook, vk, instagram).

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

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

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

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

Личный кабинет

Дизайн личного кабинета в данный момент не проработан. Отсутствует какое-либо оформление в соответствии с общей стилистикой сайта и необходимый функционал.

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

Новости

Дизайн раздела новостей не проработан.

Отсутствует текст анонса для последних добавленных новостей. В результате в верхней части страницы выводится пустая зона экрана. Полный скриншот показан по ссылке https://yadi.sk/i/8mP0HPmg3Lie8p

Текст новостей не отформатирован и содержит ошибки.

Например, на странице https://yadi.sk/i/8mP0HPmg3Lie8p вставлены ссылки на несуществующие изображения:

Кроме этого, текст является не уникальным и вставлен с сайта http://fishki.net/1324544-50-interesnyh-faktov-o-zolote.html. Размещение не уникального контента является крайне негативным не только с точки зрения юзабилити, но и на поисковой оптимизации – сайт может попасть под санкции поисковых систем.

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

Англоязычная версия сайта

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

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

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

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