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

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

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

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

На русскоязычной версии сайта в форме поиска текст на английском языке.

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

Не совсем понятно, что обозначает термин «виральный краудфандинг». При этом краткое пояснение дается только более распространённому термину «краудфандинг».

Зеленый блок с подсказками задуман с эффектом тени, но из-за белого фона вокруг он выглядит неаккуратно.

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

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

При нажатии на ссылку «получите бонус» открывается окно со служебным сообщением на английском языке.

В данном блоке с информацией о бонусах:

1. Используется английский язык;
2. Не совсем понятно, для чего указывать значения бонуса с точностью до цента;
3. Пропущены точки в конце предложений;
4. При нажатии на ссылки открывается одна и та же форма авторизации. Это продемонстрировано на видео по ссылке https://yadi.sk/i/vktxdkZwsLpw3. Какая-либо дополнительная информация отсутствует.

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

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

Также не совсем понятно, для чего сделано дублирование данных навигационных элементов – они находятся практически рядом.

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

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

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

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

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

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

Текст пересекается с серой рамкой при наведении курсора.

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

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

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

Текстовая информация так же не разделена точками или переносами строк между предложениями.

Буквы в нижней строке текста обрезаны границами блока.

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

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

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

Этот блок выполнен одной картинкой. Ссылка ведет на одну страницу сайта, хотя фактически это разные разделы.

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

В блоке «Как это работает» текстовая и графическая информация размещена в шахматном порядке. Это показано на скриншоте по ссылке https://yadi.sk/i/zjt7H899sMJWN.

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

Визуальные связи графики и текста продемонстрированы на скриншоте по ссылке https://yadi.sk/i/BzOC_NShsMKLz.

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

Страница «Все компании»

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

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

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

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

Ссылки не реагируют на наведение курсора. Это продемонстрировано на видео по ссылке https://yadi.sk/i/OUukSqNcsN3nk.

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

Страница «Как это работает»

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

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

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

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

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

Для примера по ссылке https://yadi.sk/i/SFnYGC_NsN5Pi представлен полный скриншот страницы при просмотре сайта на экране разрешением 1024х768 пикселей.

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

Компоновка бокового меню

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

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

Также стоит отметить, что часть разделов содержит практически одинаковую информацию. Например:

Логические группировки показаны на следующем скриншоте:

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

Отсутствует отступ у активного раздела меню.

Страница результатов поиска

Дизайн данной страницы будем рассматривать на примере поиска по запросу «Цена».

Адрес страницы с результатами https://helpangel.org/ru/?s=%D1%86%D0%B5%D0%BD%D0%B0

Заголовок страницы выполнен на английском языке.

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

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

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

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

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

Непонятно, где ссылки, а где текст.

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

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

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

Отдельно стоит отметить, что при переходе через результаты поиска в разделы типа https://helpangel.org/ru/my_keywords/j-price/ (первый результат тестового поиска) выявлены баги с выводом кода сайта. Это продемонстрировано на видео по ссылке https://yadi.sk/i/Atc2NLt3sLgGW . Попасть в эти разделы из навигационного меню сайта не удалось.

Форма входа и регистрации

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

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

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

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

В одном случае кнопка входа через Facebook содержит русскоязычное название, во втором – на английском. Это показано на видео по ссылке https://yadi.sk/i/J7sfZcq1sNQU9.

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

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

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

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

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

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

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

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

Далее рассмотрим основные аспекты работы личного кабинета.

Фото профиля является ссылкой на профиль. Непонятно, для чего сделано такое дублирование.

В выпадающем меню профиля первый пункт называется «Пожертвования», а в стационарном меню профиля – «Мое участие».

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

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

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

При переходе по разделам меню профиля происходит смещение иконок. Это показано на видео по ссылке https://yadi.sk/i/OXZ_ch8LsNwor.

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

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

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

После публикации статуса в разделе «Команда» невозможно удалить комментарий – пользователя перебрасывает на страницу с 404-й ошибкой. Это показано на видео по ссылке https://yadi.sk/i/xxXqRbwrsP2Ys.

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

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

Отсутствует пробел между двоеточием и цифровым значением:

Отсутствует возможность сортировки данных таблицы по транзакции, сумме и дате платежа (прим. – надо уточнить этот момент после добавления нескольких строк таблицы).

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

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

В форме пополнения баланса также допущен ряд ошибок, которые показаны на скриншоте:

Комментарии к форме вывода средств также показаны на скриншоте ниже:

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

Далее рассмотрим раздел «Настройки»

Заголовок поля на английском языке:

Избыточная ширина полей ввода.

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

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

Создание компании

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

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

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

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

Аналогичная ситуация:

Рекомендуем явно указать: «Выберите языковую версию сайта».

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

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

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

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

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

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

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

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

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

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

Загрузить тестовое изображение для компании, к сожалению, не удалось. Это показано на видео по ссылке https://yadi.sk/i/FKjDktfYsPnKB.

В поле «Описание компании» не указано минимальное и максимальное количество символов.

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

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

Непонятно, что обозначает стоимость вознаграждения.

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

Поле имеет заголовок «Время доставки», при этом фактически происходит выбор даты, а не времени.

Процесс заполнения формы и работа ее отдельных элементов показаны на видео по ссылке https://yadi.sk/i/jeimsyFjsPzRr.

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

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