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

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

На всякий случай, юзабилити – это то, насколько сайт удобен и понятен для пользователя.

Как часто надо возвращаться к вопросу удобства сайта? Всегда! Этот процесс не имеет ни конца, ни края. Потому что нет предела совершенству.

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

Знаете, что это дает?

Вот вам реальные данные реальных компаний:

Так что работаем, ребята.

Тут все фишки для улучшения юзабилити, которые мы применили при создании сайта для управляющей компании «Солид Менеджмент»:

Два слова о проекте, чтоб вы были в курсе дела, и перейдем к самим фишкам.

«Солид Менеджмент» – компания с 25-летней историей на рынке ценных бумаг, которая предоставляет услуги по управлению инвестициями.

Мы в 365 Media Group взялись за разработку нового сайта для этой компании.

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

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

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

Но при этом нам удалось раскрыть смысл названия компании (Солид – это римская золотая монета, которая 800 лет оставалась главной денежно-счетной единицей Римской империи, затем Византии). Отсюда все эти непоколебимые колонны и статуи, которые говорят: с нами надежно.

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

На сайте «Солид Менеджмент» нужно было кратко, но емко представить ключевой продукт компании – Паевые Инвестиционные Фонды.

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

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

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

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

Поэтому мы:

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

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

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

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

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

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

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

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