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

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

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

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

 

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

Содержание

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

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

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

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

5. Страница «Cryptofunds»

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

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

8. Страница «Guides»

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

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

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

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

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

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

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

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

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

Адрес страницы: https://icoanatomy.com.

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

https://yadi.sk/i/cedl9BgQ3WQSPi
https://yadi.sk/i/fPnCIdUf3WQScN
https://yadi.sk/i/Gj7nnR1C3WQSsX
https://yadi.sk/i/F5eKega83WR59H
https://yadi.sk/i/R0uZxoPH3WR5xp
https://yadi.sk/i/Na4jYZM23WR8sF
https://yadi.sk/i/lAUuGsBQ3WR9ZJ
https://yadi.sk/i/fs2gvSk53WR9nt
https://yadi.sk/i/CTW0qaHa3WRARp
https://yadi.sk/i/OGHNNvuC3WRAeA
https://yadi.sk/i/_M3AwtWx3WRAvq
https://yadi.sk/i/CTgwutqV3WRBFD

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

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/MxIjE4VT3WRDC2

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

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

Видео 1: https://yadi.sk/i/76WElxql3WSoyv

Видео 2: https://yadi.sk/i/V33odv6p3WSqR8

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

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

Видео: https://yadi.sk/i/DM1A0fJW3WSwgS

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

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

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

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

Видео 1: https://yadi.sk/i/LD7WnF8f3WSsM9

Видео 2: https://yadi.sk/i/OdL1iHjZ3WSsXt

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

Видео: https://yadi.sk/i/kZXxRJZe3WSx8i

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

Видео: https://yadi.sk/d/oWJOrd6C3WSxSA

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

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

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

Видео: https://yadi.sk/i/FqVoCM-j3WSyNQ

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

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

Видео: https://yadi.sk/i/-IUz0zdb3WT8vb

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

Видео: https://yadi.sk/i/_6vqRPTe3WT9iW

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

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

Видео: https://yadi.sk/i/YZJVriZu3WTAC5

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

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

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

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

https://yadi.sk/i/FooD8VP83WTBD9
https://yadi.sk/i/ht5pJ3VY3WTBVY

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

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

Видео: https://yadi.sk/i/rQoqh1jw3WTEGB

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

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

Видео: https://yadi.sk/i/Rcg_8Rg23WTFnD

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

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

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

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

Видео: https://yadi.sk/i/3BIBOrR03WTrHX

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

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/q2UVhdoc3WTHvb

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

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

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

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

Видео: https://yadi.sk/i/Hp0P17o23WTYho

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

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

Видео: https://yadi.sk/i/NgmBAscu3WTKWi

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

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

Видео: https://yadi.sk/i/p_mxE4793WTX5F

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

Видео: https://yadi.sk/i/MBBPaKqH3WTpsw

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

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

Адрес страницы: https://icoanatomy.com/coinlist

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

Видео: https://yadi.sk/i/tVV7jDUZ3WWbK3

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

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

Видео: https://yadi.sk/i/0WqrAtZ43WTuzu

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

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

Страница «Cryptofunds»

Адрес страницы: https://icoanatomy.com/cryptofunds.

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

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

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

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

Адрес страницы: https://news.icoanatomy.com/.

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

Видео: https://yadi.sk/i/tZay97eQ3WTydu

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

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

Видео: https://yadi.sk/i/b-Y5hwRo3WTzJA

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

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

Видео: https://yadi.sk/i/W9eZSGUl3WU5H3

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

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

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

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

Видео: https://yadi.sk/i/WxYByF_Q3WU67P

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

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

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

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

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

Юзабилити данных страниц рассмотрим на примере https://news.icoanatomy.com/735.

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

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

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

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

При переходе на страницу просмотра публикаций по тегу (например, https://news.icoanatomy.com/tag/cryptocurrency) на ней нет соответствующего заголовка.

Видео: https://yadi.sk/i/u1gVkFt63WU8Pd

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

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

– нет строки поиска для быстрого доступа к информации по конкретной тематике;

– в явном виде нет меню для навигации по тегам или категориям публикаций;

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

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

Страница «Guides»

Адрес страницы: https://news.icoanatomy.com/category/guides.

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

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

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

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

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

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

Адрес страницы: https://icoanatomy.com/login-page.

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

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

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

Видео: https://yadi.sk/i/Ok_3nh-L3WUzRX

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

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

Видео: https://yadi.sk/i/XrsZ64ZB3WV2EW

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

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

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

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

Видео: https://yadi.sk/i/LeDpKb-s3WV2nB

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/uGq4A51F3WV5P9

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

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

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

Видео: https://yadi.sk/i/XV035WSJ3WV65q

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

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

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

Видео: https://yadi.sk/i/PN9e9fv03WV7VT

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Смотреть все