Аудит сайта рейтингов товаров и услуг
Аудит юзабилити №524
Дата аудита: июль 2018 года
Объем отчета: 52 страницы
Кейс по комплексному анализу и улучшению юзабилити сервиса. Оптимизация структуры каталога товаров и услуг. Тестирование юзабилити личного кабинета пользователя. Рекомендации по повышению конверсии сайта.
Вводная информация
В данном отчете приведены детальные описания основных проблем, скриншоты сайта и дополнительные видео с демонстрацией выявленных недостатков.
Перед просмотром дополнительных материалов их желательно скачивать на компьютер.
Также по всем выявленным проблемам даны рекомендации по их устранению.
Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.
Навигация по сайту
Качественная навигация по сайту является основой для построения эффективного юзабилити сайта.
Она должна обеспечивать быстрый и простой переход на любую страницу или раздел сайта максимум за 3 клика.
Кроме этого, навигационные меню должны информировать пользователя о его текущем местоположении на сайте.
Рассмотрим, насколько качественно проработаны меню и навигационные элементы в данный момент на сайте.
Большое количество навигационных элементов, ссылок и кнопок не реагируют на наведение курсора. Это отрицательно сказывается на юзабилити и уменьшает количество кликов по ним.
В таблице приведены скриншоты и демонстрация работы таких элементов интерфейса.
Рекомендуем сделать эти элементы интерактивными и добавить динамическое выделение при наведении курсора.
В нижнем меню не выделяется текущий раздел сайта. Невозможно понять, на какой странице находится пользователь в конкретный момент времени.
Рекомендуем явно выделять ссылку на текущий раздел сайта при помощи изменения оформления ссылки или соответствующего графического маркера.
Форма регистрации и входа
Далее рассмотрим юзабилити и работу формы регистрации новых пользователей и входа на сайт. Это особенно актуально при запуске нового сайта и формировании постоянной аудитории.
Регистрация с помощью профилей социальных сетей в данный момент, к сожалению, не работает.
В форме входа такая возможность есть.
Рекомендуем обеспечить возможность входа на сайт через соцсети.
Непонятно, почему для одинаковых функциональных блоков входа с помощью соцсетей используется два разных дизайна в форме авторизации и регистрации.
Рекомендуем придерживаться единого стиля оформления для однотипных элементов интерфейса.
Не совсем понятно, что для чего нужны чекбоксы «Мессенджеры».
Рекомендуем убрать этот блок из формы регистрации.
Форма регистрации содержит 5 обязательных полей. Это затрудняет процесс и будет служить причиной уменьшения количества успешных регистраций на сайте.
Рекомендуем максимально упростить форму и процесс регистрации на сайте:
- оставить два поля «Имя» и «Email»;
- пароль генерировать автоматически и отправлять на почту сразу после подтверждения email-адреса;
- предлагать поменять пароль в после первого входа пользователя в личный кабинет;
- фамилию запрашивать при добавлении первого отзыва, комментария, статьи или опроса.
Это позволит максимально упростить и сделать незаметным для пользователя заполнение всех необходимых данных в профиле.
Не проработан вывод информационных сообщений об ошибках при заполнении формы.
Все сообщения показываются в одном блоке в верхней части формы. Он содержит большое количество текста без логической разбивки и сложен для восприятия пользователем. Такое решение не является оптимальным с точки зрения юзабилити и не соответствует современным тенденциям построения интерфейса.
Кроме этого, при выводе текста в верхней части увеличивается общая высота формы. В результате, с ней становится невозможно работать, т.к. кнопка «Зарегистрироваться» скрывается с экрана, а при использовании вертикального скролла прокручивается контент страницы. Блок с формой при этом остается неподвижным. Фактически, отправить форму в данном случае становится невозможно.
Рекомендуем добавить скрипт динамической проверки правильности ввода данных непосредственно в процессе заполнения формы и выводить текстовые подсказки и сообщения рядом с соответствующими полями.
Недостаточная контрастность цвета текста и белого фона. В результате, восприятие текста затрудняется.
Рекомендуем использовать более темный цвет для текста в полях формы.
В целом, процесс регистрации прошел успешно.
Письмо с подтверждением регистрации также получено на почту.
В его оформлении допущены некоторые ошибки.
После слова «Здравствуйте» размещена запятая для выделения обращения к пользователю.
При этом фамилия и имя, указанные при регистрации, в письме не выводятся.
Рекомендуем обеспечить корректный вывод имени и фамилии пользователя в письме.
Отдельно необходимо отметить, что письмо сформировано в обычном текстовом виде без использования какой-либо графики, элементов дизайна или стилистики сайта. Это отрицательно сказывается на его привлекательности для пользователей.
Рекомендуем выполнить HTML верстку письма в соответствии с современными требованиями и общей стилистикой оформления сайта.
Использование капчи в форме входа на сайт не имеет логического смысла и затрудняет работу пользователя с сайтом.
Рекомендуем убрать капчу из формы авторизации на сайте.
При нажатии на ссылку для подтверждения пароля открывается не отдельная страница с соответствующим сообщением, а форма авторизации. Это вводит пользователя в заблуждение.
В дальнейшем, вход на сайт под логином и паролем прошел без проблем.
Главная страница
Далее рассмотрим дизайн, юзабилити и работу элементов интерфейса главной страницы сайта.
В верхнем левом углу расположен логотип, который является ссылкой на домашнюю страницу. Это правильное, соответствующее современным требованиям.
В качестве графического элемента логотипа используется широко распространенное изображение смайлика. Его достаточно сложно назвать уникальным. Это является отрицательным моментом с точки зрения формирования своего узнаваемого стиля сайта.
Рекомендуем рассмотреть возможность разработки и использования на сайте уникального графического элемента в логотипе.
Рекомендуем скрывать на публичных страницах неиспользуемые элементы интерфейса, а также находящиеся в разработке модули.
Не согласована высота верхних и нижних вертикальных отступов.
Рекомендуем выровнять величину верхнего и нижнего отступа. Это придаст дизайну более аккуратный вид.
В данных блоках используются изображения низкого качества с видимыми искажениями и артефактами.
Рекомендуем использовать на сайте только высококачественные иллюстрации и фото достаточного разрешения.
В блоке с прокруткой размещены 3 баннера с рекламной информацией. При этом они выполнены в виде статичных изображений. Текст и графика слиты в одну картинку. Это отрицательно сказывается на юзабилити и привлекательности блока для пользователей.
Рекомендуем использовать современные скриптовые решения для отдельной верстки и анимации текстов и фоновых изображений в баннерах.
Непонятно, это ссылки или обычный текст.
Рекомендуем явно обозначить ссылки при помощи подчеркивания.
В блоке «Лидеры рейтингов» название категории является ссылкой на соответствующий раздел. В соседнем блоке «Доска объявлений» такое же название категории является текстом.
Рекомендуем сделать указанные элементы ссылками в обоих случаях.
В блоке «Лидеры рейтингов» изображение товара не является ссылкой на соответствующую страницу или просмотр увеличенного фото. Это снижает эффективность этого изображения.
При этом в соседнем блоке «Доска объявлений» изображения выполнены ссылками на соответствующие страницы.
Рекомендуем добавить ссылки к изображениям товаров.
В одном анонсе объявления дата и время публикации выводится в той же строке, что и цена. Во втором – под ценой. В результате дизайн выглядит неаккуратно.
Рекомендуем обеспечить одинаковый вывод и позиционирование типовых элементов интерфейса.
Ссылки оформлены как обычный текст.
Рекомендуем явно обозначить ссылки при помощи подчеркивания.
Важная информация, которая должна привлекать новых пользователей на сайт и стимулировать их к написанию отзывов, размещена ближе к нижней части страницы и не видна без использования прокрутки. Это снижает маркетинговую эффективность блока.
Скриншот: https://yadi.sk/i/ryNygkPI3YyVH4
Рекомендуем переместить блок с описанием конкурентных преимуществ и уникальных условий сотрудничества для пользователей сайта в верхнюю часть страницы. Тогда ее увидит максимальное количество пользователей.
В текстах допущены ошибки и опечатки (две «с», нет точки в конце предложения).
Рекомендуем выполнять тщательную проверку всех текстов, публикуемых на сайте.
Информация о конкурсе также размещена в самом низу страницы. Большинство пользователей ее не увидят.
Рекомендуем опубликовать информацию о конкурсе в верхнем блоке с прокруткой баннеров.
Главная страница каталога
Дизайн и компоновка страницы фактически полностью повторяет домашнюю страницу сайта.
Для нее верны все ошибки и рекомендации, указанные в отчете выше.
При наведении курсора не обеспечивается достаточная контрастность иконки категории и фона.
Рекомендуем при наведении курсора использовать белый цвет для иконки и зеленый – для фона.
Просмотр категории каталога
Непонятно предназначение данного элемента интерфейса.
Модуль выбора товаров по диапазону цены в данный момент не работает.
Рекомендуем обеспечить корректную работу модуля подбора по цене, т.к. он является критически важным для большинства пользователей.
Отдельно необходимо отметить, что информация о цене в явном виде отсутствует в таблице с рейтингом товаров. Именно стоимость в большинстве случаев является ключевым фактором для принятия решение о покупке того или иного товара (услуги).
Рекомендуем в отдельной колонке выводить цены, указанные на странице детального просмотра товара.
Ссылки в списке брендов не реагируют на наведение курсора.
Рекомендуем убирать подчеркивание при наведении курсора.
При переходе к просмотру выбранного бренда нет возможности вернуться к просмотру всех товаров. Соответствующая ссылка на главную страницу категории в списке отсутствует. Это отрицательно сказывается на юзабилити сайта.
Рекомендуем добавить в конце списка ссылку «Все производители».
При переходе на страницу просмотра бренда (например, Sony http://avascore.com/catalog/mobilnye-telefony/filter/brand-is-1aae401e714d8345dd907722f3032968/apply/) его название не выводится в блоке вспомогательной навигации. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта.
Рекомендуем обеспечить корректную работу вспомогательной навигации при переходе по подкатегориям каталога и брендам.
Нет возможности сортировки таблицы по названию товара, цене, рейтингу, количеству недель в топе, количеству мнений. Это затрудняет работу с каталогом и отрицательно сказывается на юзабилити.
Рекомендуем добавить сортировку по возрастанию и убыванию столбцов таблицы.
Заголовок должен иметь четкий визуальный приоритет и быть хорошо заметным рядом с другими элементами интерфейса.
Сейчас это требование не выполняется. Названия товаров выделены жирным шрифтом. Заголовок теряется на их фоне.
Рекомендуем использовать такой же размер шрифта, как и в других заголовках на странице.
Т.к. пользователь просматривает страницу слева направо, более привычным и логичным является размещения блока с фильтром слева, а не справа списка товаров.
Скриншот: https://yadi.sk/i/hCvUUHGq3YyakB
Параметры фильтра не адаптируются под параметры конкретной категории. Например, все смартфоны Apple работают на iOS. Но для них выводится полный список всех операционных систем, которые не актуальны для данного производителя. Это отрицательно сказывается на юзабилити.
Кроме этого, такое решение приводит к увеличению количества строк в списках параметров и с ними становится сложно работать. Например, в списке «Диагональ» практически невозможно найти нужную.
Рекомендуем доработать алгоритм фильтрации и обеспечить динамическое формирование списков с учетом возможных комбинаций выбранных параметров.
В блоке «Мнения авторов о топах» нет ссылок на изображениях.
Рекомендуем добавить в код ссылки.
Непонятно, почему второстепенная информация с датой публикации выполнена большим шрифтом и имеет визуальных приоритет над заголовками публикаций.
Рекомендуем использовать больший размер шрифта в заголовке, а меньший – в дате.
Также при просмотре категорий нет возможности изменить количество товаров на странице и тип вывода ленты с товарами (списком, расширенным списком, плиткой и т.д.). Это затрудняет более удобную настройку интерфейса для каждого конкретного пользователя.
Рекомендуем расширить функциональные возможности каталога.
Страница детального просмотра
Для товара опубликовано только одно фото. Дополнительные фотографии и видео отсутствуют.
Рекомендуем обеспечить возможность добавления и вывода нескольких фото и видео для каждого товара или услуги.
Непонятно, что обозначает иконка с изображением подарка.
Обычно пунктирное подчеркивание используется для обозначения ссылок на скрытые элементы интерфейса, которые открываются при клике. В данный момент, пунктиром выделен обычный текст. Никаких событий при клике на него не происходит.
Модуль добавления оценки пользователем работает корректно. Но после выставления оценки пользователь почему-то перенаправляется на страницу http://avascore.com/google-play/.
Если пользователь уже проголосовал за товар, то вывод кнопки «Добавить свою оценку» и соответствующего информационного сообщения после клика по ней не имеет логического смысла.
Рекомендуем полностью скрывать кнопку добавления оценки от уже проголосовавших за конкретный товар пользователей.
Непонятно, почему при добавлении текстового отзыва выводится информационное сообщение «Вы уже голосовали за этот товар». Создается впечатление, что пользователю уже нельзя опубликовать текстовый отзыв.
Текст отзыва был успешно отправлен на модерацию.
Найти текст и статус отправленного отзыва в личном кабинете, к сожалению, невозможно. Соответствующий раздел в личном кабинете отсутствует.
Рекомендуем выводить в личном кабинете список отзывов, отправленных на модерацию.
Отдельно необходимо отметить достаточно ограниченный функционал модуля добавления отзыва, который является наиболее важным элементом сайта. Фактически, он представляет собой одно текстовое поле.
Отсутствует возможность:
- выполнить форматирование текста;
- добавить изображения и фото;
- отдельно указать главные преимущества и недостатки;
- указать опыт использования или владения.
Такая реализация отрицательно сказывается на юзабилити, возможностях работы с отзывами и привлекательности контента сайта для пользователей.
При этом на сайтах-конкурентах такие возможности есть. Например, ниже приведен скриншот с элементами страницы https://otzovik.com/review_4394685.html
Рекомендуем максимально расширить функциональные возможности модуля добавления отзывов, как наиболее важного элемента сайта.
В блоке создания опроса в данный момент, возможно, добавить только три варианта ответа.
Рекомендуем обеспечить возможность добавления произвольного количества вариантов ответов в опросах.
В целом, опрос был успешно создан и отправлен на модерацию. Также он выводится в соответствующем разделе личного кабинета.
Непонятно, для чего на вкладке «Описание» дублируется контент вкладок «Отзывы», «Цены» и «Частные объявления».
Рекомендуем избегать избыточного дублирования одинаковых элементов интерфейса.
Далее рассмотрим юзабилити модуля добавления объявления.
Непонятно, что обозначают звездочки рядом с названиями полей формы.
Рекомендуем явно указать, что поля, отмеченные звездочкой, являются обязательными для заполнения.
При попытке отправки формы с незаполненными полями текст с указанием ошибок выводится в одном блоке в верхней части формы. Такое решение затрудняет восприятие информации и отрицательно сказывается на юзабилити.
Рекомендуем добавить скрипт динамической проверки правильности ввода непосредственно в процессе заполнения формы и выводить сообщения рядом с соответствующими полями.
Непонятно, почему в данном заголовке используется шрифт меньшего размера.
Рекомендуем придерживаться единого стиля оформления заголовков полей формы.
Не выводится превью загруженного изображения товара.
Нет возможности удалить или изменить уже загруженное фото. Это крайне негативно сказывается на юзабилити.
Рекомендуем доработать функциональные возможности модуля для более удобной работы с изображениями товара.
Явно не обозначено, в какой валюте необходимо указать стоимость товара.
Рекомендуем добавить обозначение валюты (рубли).
Эти данные уже указывались пользователем при регистрации, и есть в личном кабинете. Но при добавлении объявления они не подгружаются автоматически в форму и пользователь должен каждый раз вводить их заново.
Рекомендуем добавить автоматическое заполнение полей по данным из профиля пользователя.
При возврате к редактированию товара из режима пред просмотра, теряется загруженное фото товара и его приходится выбирать заново.
Рекомендуем обеспечить сохранение загруженных изображений при редактировании.
Отправка объявления на модерацию в данный момент не работает.
Рекомендуем обеспечить полную функциональность модуля добавления и публикации объявлений.
Поиск по сайту
Учитывая большое количество товаров и услуг, которые в будущем будут опубликованы на сайте, а также разветвленную структуру каталога, модуль поиска является важным элементом для обеспечения хорошего юзабилити и высокой конверсии сайта.
Он должен обеспечивать быстрый и релевантный поиск нужной информации по всем разделам сайта, а также вывод результатов в максимально удобной форме.
Рассмотрим, насколько выполнены эти требования в данный момент.
В строке поиска при вводе запроса появляются динамические подсказки. Это правильное решение, соответствующее современным стандартам.
Но в дизайне блока с подсказками допущены некоторые ошибки.
Используется избыточная ширина, не адаптированная под размер контента. В результате, справа остается пустая зона, и дизайн выглядит неаккуратно.
Рекомендуем уменьшить общую ширину блока в соответствии с шириной контента, выводимого в нем.
Ссылка «Все результаты» оформлена как обычный текст.
Рекомендуем выделить ссылку при помощи подчеркивания.
Дизайн страницы с результатами поиска не проработан.
Оформление поля и кнопки формы не соответствует стилю оформления аналогичных элементов интерфейса.
Рекомендуем привести оформление элементов формы поиска в соответствие с общей стилистикой сайта.
Возможность выбора количества результатов на одной странице отсутствует. По умолчанию выводится 50 результатов, и страница имеет избыточную высоту.
Скриншот: https://yadi.sk/i/INs4s5zh3YzhXq
Рекомендуем добавить на страницу выпадающий список для настройки количества результатов и по умолчанию выводить 10 сниппетов.
Блок с сортировкой результатов поиска находится в самом низу страницы и не виден без полной прокрутки страницы вниз. Это отрицательно сказывается на юзабилити.
Рекомендуем продублировать данный модуль в верхней части списка с результатами.
Для всех результатов поиска (в том числе и товаров) отсутствуют изображения.
Для всех результатов выводится один и тот же путь в каталоге. Такое решение не имеет логического смысла и не несет полезной нагрузки.
Рекомендуем либо выводить полный корректный путь к каждому конкретному товару, либо убрать его из результатов поиска.
В целом, дизайн страницы выглядит недоработанным и не соответствует общей стилистике сайта.
Личный кабинет пользователя
В данный момент функционал личного кабинета запущен частично. Далее в отчете будут приведены ошибки в работе и юзабилити доступных элементов интерфейса.
Центральную часть главной страницы личного кабинета занимает баннер с приветствием пользователя. Он не несет никакой полезной функциональной нагрузки и дублирует приветствие в верхней части экрана. В результате, пространство страницы используется неэффективно.
Рекомендуем полностью убрать этот элемент из личного кабинета.
Блоки, которые являются ссылками, не реагируют на наведение курсора.
Рекомендуем сделать указанные элементы ссылками.
Текст подсказки не соответствует тексту ссылки.
Рекомендуем привести в соответствие и расширить текст подсказок.
Мои объявления
В форме добавления товара (услуги) используется слишком короткое поле для ввода названия.
Рекомендуем разместить поле ввода под его заголовком и увеличить его ширину до общей ширины формы.
Невозможно добавить новую категорию или подкатегорию товара. Доступен только выбор из существующих категорий.
Рекомендуем добавить возможность публикации после прохождения модерации новых категорий каталога.
Явно не указано, какие поля являются обязательными для заполнения. Об этом можно узнать только после неудачной попытки отправки. Поля подсвечиваются красным, но какие-либо текстовые сообщения отсутствуют.
Рекомендуем указать, какие поля являются обязательными и выводить соответствующие информационные сообщения рядом с полями формы.
После отправки объявления на модерацию, оно не выводится в личном кабинете. Невозможно узнать, в каком статусе находятся объявления, когда они были отправлены на модерацию и т.д. Это крайне негативно сказывается на удобстве работы пользователя с сайтом.
Рекомендуем выводить в личном кабинете список объявлений, находящихся на модерации.
Мои опросы
Юзабилити процесса добавления опросов был рассмотрен в аудите выше.
По выводу списка опросов в личном кабинете замечаний нет.
Мой блог
Кнопки сохранения и отправки на модерацию расположены в непривычном для большинства пользователей месте – над модулем визуального редактора текста публикации.
Рекомендуем выводить эти кнопки под текстовым полем с публикацией.
При попытке сохранения черновика выводится информационное сообщение, смысл которого не понятен.
Не выводится превью добавленного фото.
Рекомендуем выводить превью изображения на странице редактирования публикации.
Мои подписки
Модуль добавления и удаления подписки на разделы сайта работает корректно.
Мои настройки
В поле выбора даты рождения нет блокировки будущих дат. В результате, возможен выбор некорректных значений даты рождения.
Рекомендуем блокировать будущие даты и добавить скрипт проверки правильности ввода даты рождения.
Общие итоги и выводы
В данный момент сайт содержит ряд существенных недоработок, которые крайне негативно сказываются на юзабилити и конверсии:
- основные блоки и разделы сайта запущены частично. Не обеспечена их полная функциональность;
- большое количество ссылок и навигационных элементов интерфейса не реагируют на наведение курсора. Это уменьшает количество кликов и переходов по ним;
- форма регистрации содержит большое количество обязательных полей. регистрация при помощи профиля социальной сети в данный момент не работает;
- нет сортировки списков товаров. допущены ошибки в юзабилити модуля фильтра и подбора по параметрам;
- не проработан дизайн страницы с результатами поиска по сайту;
- функционал личного кабинета пользователя в данный момент не доработан и содержит ошибки.
Рекомендуем выполнить доработки и устранить выявленные ошибки. Это позволит улучшить юзабилити, повысить конверсию и маркетинговую эффективность сайта.
Полезные ссылки и ресурсы
 |
Крупнейший регистратор доменных имен REG.RU
Регистрация и продление доменных имен в любых зонах. |
 |
Ведущий хостинг-провайдер BEGET.RU
Хостинг, аренда серверов, регистрация доменов. |
 |
Сервис тестирования юзабилити реальными пользователями
Отбор и анкетирование целевой аудитории сайта. |
 |
Сервис мониторинга, анализа и оценки эффективности поискового продвижения.
Съем и отслеживание позиций сайта, работа с семантическим ядром. |
 |
Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности.
Покупка готовых текстов и заказ уникальных статей на нужную тему. |
 |
Сервис автоматизации продвижения сайта и рекламы в интернете.
Подбор и покупка ссылок, оптимизация контекстной рекламы. |
 |
26 000 готовых премиум-шаблонов для сайтов
Высококачественные шаблоны для любых сайтов, материалы для дизайна сайта. |
 |
Крупнейшая фриланс-биржа
Сервис удаленной работы. |
Получать новые кейсы на email:
Примеры аудита юзабилити автомобильных сайтов
Смотреть все
