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

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

Дата аудита: май 2018 года

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

Нет заголовка первого столбца таблицы.

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

Нет возможности сортировки по столбцу «Status».

Рекомендуем добавить сортировку по столбцу «Status».

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

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендуем заменить графическую ссылку на текстовую с соответствующим текстом, например «details».

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

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

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

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

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

https://youtu.be/3Z-U98ATlt4
https://youtu.be/ziC2d0dbJkU

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

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

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

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

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

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

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

Еще один рекламный баннер прикреплен к нижней границе экрана.

На странице в явном виде отсутствует какая-либо текстовая информация, как о сайте, так и о компании.

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

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

Юзабилити модуля фильтрации

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

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

Иконка для доступа к фильтру:

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

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

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

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

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

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

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

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

Не совсем понятно, для чего выводится переключатель «pre-sale». Соответствующих позиций в списке криптовалют в данный момент нет.

Кнопка сброса фильтра не реагирует на наведение курсора.

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

Страница со списком криптовалют

Для части криптовалют нет изображений с логотипами.

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

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

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

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

Страница «Cryptofunds»

На странице представлено всего два фонда.

Работе всех элементов страницы присущи те же ошибки, что и на главной странице сайта.

Для них верны те же рекомендации, что даны в аудите выше.

Новости и публикации

Заголовок страницы, который является ссылкой, не реагирует на наведение курсора.

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

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

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

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

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

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

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

Иконка закрытия блока не реагирует на наведение курсора.

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

Большая часть блока остается пустой и не содержит какой-либо полезной информации.

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

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

Страница детального просмотра публикации.

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

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

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

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

При переходе на страницу просмотра публикаций по тегу на ней нет соответствующего заголовка.

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

Кроме этого, разделу новостей присущи такие недоработки:

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

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

Страница «Guides»

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

Менее важный с точки зрения юзабилити конверсии раздел «News» вынесен на отдельный поддомен.

При этом более важный раздел «Guides» является подразделом третьего уровня поддомена https://news.icoanatomy.com/

В случае формирования структуры сайта с использованием поддоменов, рекомендуем сделать отдельный поддомен вида https://guides.icoanatomy.com/ для публикации соответствующей информации.

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

Вход и регистрация

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

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

Кнопки формы не реагируют на наведение курсора.

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

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

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

Непонятно, для чего дублируется один и тот же текст сообщения об ошибке.

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

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

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

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

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

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

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

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

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

Разрешение экрана 480×320:

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

Просмотр информации о криптовалюте работает корректно.

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

Разрешение экрана 800х600:

Основные элементы сайта работают корректно.

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

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

Полезные ссылки и ресурсы

REGRU-logo-color-3 Крупнейший регистратор доменных имен REG.RU

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

https://cp.beget.com/promo_data/static/static100x100_6.png Ведущий хостинг-провайдер BEGET.RU

Хостинг, аренда серверов, регистрация доменов.

Сервис тестирования юзабилити реальными пользователями

Отбор и анкетирование целевой аудитории сайта.

Сервис мониторинга, анализа и оценки эффективности поискового продвижения.

Съем и отслеживание позиций сайта, работа с семантическим ядром.

Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности.

Покупка готовых текстов и заказ уникальных статей на нужную тему.

SeoPult Сервис автоматизации продвижения сайта и рекламы в интернете.

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

300x60_1 26 000 готовых премиум-шаблонов для сайтов

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

Крупнейшая фриланс-биржа

Сервис удаленной работы.

Получать новые кейсы на email:

Примеры аудита юзабилити автомобильных сайтов

Смотреть все