Аудит юзабилити нумизматического информационного портала

Общие замечания по аудиту

Отчет содержит ряд скриншотов и ссылок на дополнительные материалы.

Красным маркером обозначены выявленные проблемы.

Дополнительные материалы (в частности, видео) желательно скачивать на компьютер для просмотра в максимальном качестве.

Также в отчете при необходимости приводится сравнение аналогичных решений и функционала на сайтах-конкурентах:

http://www.wolmar.ru/

http://www.m-dv.ru/

https://www.raritetus.ru/

Логотип

Логотип сайта является довольно важным имиджевым элементом. Он должен быть по возможности уникальным, соответствовать тематике сайта и фирменному стилю (если он разрабатывался).

К сожалению, в данный момент эти требования в большей части не выполнены.

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

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

http://www.m-dv.ru/

https://www.raritetus.ru/

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

Позиционирование сайта

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

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

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

http://www.monetof.ru/

http://www.wolmar.ru/

http://www.m-dv.ru/

https://www.raritetus.ru/

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

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

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

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

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

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

Аналогичная проблема с позиционированием логотипа:

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

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

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

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

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

Также непонятно, как спозиционировано главное меню – по центру страницы или правому краю. Из-за этого дизайн выглядит несогласованным.

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

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

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

В нижней части сайта расположено меню со слишком большими вертикальными отступами.

Рекомендуем уменьшить отступы до 20-30 пикселей.

Разный отступ в блоке вспомогательной навигационной цепочки:

Рекомендуем использовать одинаковый отступ величиной 15-20 пикселей в соответствии с модульной сеткой сайта.

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

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

При просмотре сайта со смартфонов показатель отказов выше практически в два раза.

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

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

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

По ссылке https://yadi.sk/i/2Nu79_6SwetBf показан скриншот главной страницы с обозначением уровня вложенности таблиц.

По ссылке https://yadi.sk/i/6GfXZ5XnwetZm – скриншот с вложенностью таблиц каталога.

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

В результате верстка сайта некорректно отображается при уменьшении ширины окна браузера. Это показано на видео по ссылке https://yadi.sk/i/6GfXZ5XnwetZm.

Страница детального просмотра монеты также некорректно работает при уменьшении окна браузера. Это показано на видео по ссылке https://yadi.sk/i/OLVgj03Cwew73.

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

Стили оформления находятся внутри HTML кода сайта. Это не соответствует стандартам и отрицательно сказывается на юзабилити сайта.

Также присутствуют большие вставки скриптов в HTML код сайта. Часть такого кода показана на скриншоте по ссылке https://yadi.sk/i/-2Jt6D6HweyP6.

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

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

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

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

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

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

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

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

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

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

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

При выборе монеты меню снова появляется.

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

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

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

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

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

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

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

Рассмотрим, насколько качественно выполняется поиск на сайте fcoins.ru

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

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

Непонятно, что обозначает оранжевая рамка вокруг текста:

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

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

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

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

Ширина поля «Название» слишком маленькая. В нее не помещается текст с названием монеты. Для примера показан скриншот с запросом «полушка Петра Алексеевича».

Абсолютно непонятно, в каком формате и в какой последовательности надо вводить данные в полях формы:

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

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

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

Далее рассмотрим дизайн формы расширенного поиска.

Общепринятым является расположение чекбоксов слева от текста, а не справа.

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

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

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

Непонятно, для чего нужен данный чекбокс.

Более 40 процентов формы занимает пустой нижний отступ:

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

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

Не согласована ширина полей и положение границ:

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

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

Юзабилити  главной страницы

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

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

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

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

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

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

Нет настройки количества лотов на странице. Это отрицательно сказывается на юзабилити.

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

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

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

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

Рекомендуем добавить современный скрипт просмотра фотогаллерей с описанием, например http://lokeshdhakar.com/projects/lightbox2/#examples или аналогичный.

Непонятно, почему данные ссылки расположены в списке с разными отступами.

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

Не совсем понятно, почему при нажатии на название монеты происходит перенаправление на сторонние ресурсы. Это показано на видео по ссылке https://yadi.sk/i/c9hViW63whC2N.

Непонятно, что обозначает «Добавить в избранное». Какие либо пояснения по поводу этого функционала отсутствуют.

Рекомендуем добавить соответствующую подсказку к ссылке с помощью title=’текст подсказки’.

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

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

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

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

http://www.fcoins.ru/catalog.asp.

Некорректно выводятся ссылки с фото монет. При уменьшении ширины окна браузера они выводятся сначала в три ряда, потом в два, потом в один, потом снова в два. Это показано на видео по ссылке https://yadi.sk/i/IDrnGC2Owi9AY.

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

Из-за большого размера фотографий монет общая увеличена общая высота страницы. Это отрицательно сказывается на юзабилити. Пользователю необходимо использовать вертикальную прокрутку окна браузера, чтобы найти нужную категорию. Особенно это актуально при уменьшении ширины окна браузера и просмотре сайта на мобильных устройствах. По ссылке показан полный скриншот страницы с картой скроллинга https://yadi.sk/i/C0KnPQoCwiAok.

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

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

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

Детальный просмотр монеты на примере страницы http://www.fcoins.ru/catalog/catalogrimp/catalogrimp19306.asp

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

При нажатии на фото просмотр увеличенного фото открывается в новом окне. Для просмотра следующего фото надо возвращаться и снова нажимать на просмотр. Такое решение не соответствует современным стандартам и отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/gWRXUXOJwiCyD.

Рекомендуем добавить современный скрипт просмотра фотогаллерей с описанием, например http://lokeshdhakar.com/projects/lightbox2/#examples или аналогичный.

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

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

Крайне негативным моментом является то, что табличные данные располагаются в нижней части страницы после большого пустого пространства и не видны без использования прокрутки страницы. Полный скриншот показан по ссылке https://yadi.sk/i/u_gk4qXiwiHrU.

Положение этих таблиц зависит от количества открытых разделов бокового меню. Это показано на видео по ссылке https://yadi.sk/i/cijCDZVEwiJmJ.

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

Некорректно отображается фото монеты при уменьшении ширины окна браузера. Это показано на скриншоте по ссылке https://yadi.sk/i/2ag2noE0wekSP.

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

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

Монеты по периоду на примере http://www.fcoins.ru/catalogrimpprav.asp?prav=aleksandr2.

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

Монеты по периоду и типу на примере страницы http://www.fcoins.ru/catalogrimppravmet.asp?prav=aleksandr2&met=ser.

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

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

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

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

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

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

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

Сообщение о необходимости заполнения обязательных полей появляется только после попытки отправки формы. Его дизайн не вписан в общее оформление сайта (стандартное диалоговое окно браузера).

В данный момент нет проверки корректности ввода данных в поля формы во время заполнения. При попытки регистрации удалось пройти проверку после добавления «1» во все поля формы. После отправки сервер выдал внутреннюю ошибку. Процесс показан на видео по ссылке https://yadi.sk/i/q0CNbQyFwmma2.

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

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

При попытке входа с зарегистрированным логином и паролем снова появляется внутренняя ошибка сервера. Это показано на видео по ссылке https://yadi.sk/i/j5Z-uGpYwmnzk.

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

При добавлении лотов в избранное в соответствующей строке все равно выводится «0». Чтобы узнать количество отложенных лотов, надо обновить страницу либо перейти на другую страницу сайта. Аналогичная проблема и при удалении лотов из избранного. Это показано на видео по ссылке https://yadi.sk/i/ywpy7TD1wmpSD.

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

Карта сайта

http://www.fcoins.ru/sitemap.asp

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

В данный момент на ней фактически представлены только три страницы верхнего уровня: «О сайте», «Поиск лотов по аукционам», «Каталог проходов и цен».

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

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

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

Доступность контактной информации

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

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

Рекомендуем опубликовать на сайте подробную контактную информацию и использовать комплексные сервисы для захвата клиентов. Например, http://krible.com , https://callbackkiller.com/ или аналогичные. Это позволит кардинально повысить конверсию сайта.

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