Аудит корпоративного сайта компании по SMM и SMO

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

Дата аудита: июнь 2018 года

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

 

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

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

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

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

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

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

Home

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

Более оптимальным с точки зрения юзабилити, будет использование плавающего меню, постоянно прикрепленного к верхней границе экрана. Например, такое решение применяется на сайте http://www.buy-youtub-views.com/.

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

Данные элементы являются ссылками. Но они не реагируют на наведение курсора. При клике ничего не происходит.

В коде не прописаны ссылки на соответствующие разделы сайта.

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

Не согласован размер элементов.

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

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

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

Не согласована величина вертикальных отступов между элементами:

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

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

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

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

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

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

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

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

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

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

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

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

При возврате к форме восстановления пароля через ссылку «Recovery Password» это же сообщение выводится черным текстом на черном фоне.

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

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

Advantages

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

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

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

Prices

Далее рассмотрим юзабилити блока с информацией о ценах на услуги.

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

  • Facebook
  • Instagram
  • YouTube
  • Twitter

При нажатии на ссылку «Prices» пользователь видит блок с информацией только о ценах продвижения на YouTube и соответствующим заголовком. Это не всегда соответствует ожиданиям пользователя, т.к. для многих из них эта информация неактуальна. Например, если необходимо продвижение в Facebook.

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

https://gramblast.com/

Home

http://www.buy-youtub-views.com/

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

Компоновка блоков выполнена не оптимально. В результате контент в нижней строке с ценами обрезан.

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

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

Кнопки «Order» не работают. Сделать заказ необходимой услуги невозможно. Какие-либо информационные сообщения при этом отсутствуют.

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

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

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

Special Offers

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

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

Изображения примеров размыты.

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

Опубликовано только два примера в портфолио.

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

Reviews

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

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

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

Рекомендуем увеличить высоту минимум до 7-10 пикселей.

Непонятно, это одна или две разных ссылки, т.к. текст написан слитно без пробела или разделителя.

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

Contacts

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

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

Опубликовано всего три канала для обратной связи – skype, icq и email.

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

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

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

В целом, набор предлагаемых каналов связи не соответствует современным тенденциям и списку наиболее популярных мессенджеров. Ниже приведены данные популярности различных мессенджеров по странам мира (источник – https://www.web-canape.ru/business/internet-2017-2018-v-mire-i-v-rossii-statistika-i-trendy/ )

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

Личный кабинет пользователя

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

Settings

Адрес страницы: http://top4smm.com/order/users/edit.

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

Рекомендуем заменить фото на графическую заглушку.

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

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

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

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

Кнопки «Save» не реагируют на наведение курсора.

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

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

Рекомендуем выводить текущее фото пользователя в блоке «Set Avatar».

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

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

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

Не работает переключение горизонтального или вертикального меню.

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

Balance

Адрес страницы: http://top4smm.com/order/users/balance.

Баланс аккаунта выводится только в долларах. Для клиентов из Германии и Франции более актуальным будет вывод в евро, т.к. эта валюта является основной.

Нет автоматической смены валюты при переключении на немецкий или французский язык. Возможность ручной смены валюты аккаунта также отсутствует.

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

Непонятно, почему знак обозначения валюты «$» перенесен на следующую строку, а не находится рядом с числом.

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

Иконки платежных систем не реагируют на наведение курсора.

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

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

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

History of recharge

Адрес страницы: http://top4smm.com/order/users/operations.

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

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

New order

Адрес страницы: http://top4smm.com/order/orders/request.

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

Но ссылкой сделана не вся его площадь, а только кнопка «Try». При этом она не реагирует на наведение курсора.

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

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

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

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

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

Кнопка «Send» не реагирует на наведение курсора.

Используется поле избыточной ширины:

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

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

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

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

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

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

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

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

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

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

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

Рекомендуем сделать данный элемент шириной минимум 8-10 пикселей.

Mass order

Адрес страницы: http://top4smm.com/order/orders/massorder.

Для форм и элементов интерфейса данного подраздела справедливы те же ошибки и рекомендации, что и для подраздела «New order», указанные в отчете выше.

Orders history

Адрес страницы: http://top4smm.com/order/orders/history.

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

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

Непонятно, для чего в выпадающих списках дублируются строки «Select» и «All», выполняющие одну и ту же функцию. Такое решение не имеет логического смысла.

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

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

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

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

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

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

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

F.A.Q. and Wiki

Адрес страницы: http://top4smm.com/order/help

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

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

Service list

Отрицательным моментом является то, что невозможно просмотреть описание услуги при клике на ее название. Для этого необходимо использовать ссылку «Open».

При этом ссылки «Open»и «Close» не реагируют на наведение курсора.

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

Support

Адрес страницы: http://top4smm.com/order/tickets/

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

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

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

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

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

Referrals

Адрес страницы: http://top4smm.com/order/referrals

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

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

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

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

Общие итоги и выводы

В данный момент сайт содержит ряд существенных недоработок, которые крайне негативно сказываются на юзабилити и конверсии:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

Смотреть все