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

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

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

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

 

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

Содержание

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

2. Базовая статистика сайта

3. Home

4. Advantages

5. Prices

6. Special Offers

7. Reviews

8. Contacts

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

10. Settings

11. Balance

12. History of recharge

13. New order

14. Mass order

15. Orders history

16. F.A.Q. and Wiki

17. Service list

18. Support

19. Referrals

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

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

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

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

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

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

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

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

Home

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/0U4ss9-u3Xow8W

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Advantages

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

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

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

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

Prices

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

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

  • Facebook
  • Instagram
  • YouTube
  • Twitter

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

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

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

https://gramblast.com/

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

Home

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Special Offers

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

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

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

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

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

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

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

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

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

Reviews

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

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

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

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

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

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

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

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

Contacts

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

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

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

Опубликовано всего три канала для обратной связи – 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Balance

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

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

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

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

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

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

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

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

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

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

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

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

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

History of recharge

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

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

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

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

New order

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mass order

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

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

Orders history

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

F.A.Q. and Wiki

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

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

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

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

Service list

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

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

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

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

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

Support

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

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

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

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

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

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

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

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

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

Referrals

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

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

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

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

 

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

Видео: https://yadi.sk/i/-sho8rL-3Xvfey

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

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

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

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

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

Готов ответить на все вопросы по результатам аудита в скайпе, 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:

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

Смотреть все