UX — это ловкость рук и никакого мошенничества

Как с помощью User Centered design перепроектировать сайт так, чтобы конверсия увеличилась в 3,5 раза. Рассказываем об этом на примере сайта Росгосцирк, который мы провели через все “круги юзабилити”, чтобы сделать из него "конфетку".

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

Мы взялись за дело с полной серьезностью. Лучшие специалисты компании вооружились передовыми UX-методами и приступили к обследованию клиента, чтобы привести его в здоровый и спортивный вид. Итак, что было сделано:

Разберем примененные методы подробнее, чтобы вы смогли воспользоваться нашим опытом и улучшить состояние ваших “подопечных сайтов”.

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

«Росгосцирк» — самая крупная цирковая компания не только в Европе, но и в мире. История компании началась почти 100 лет назад (в 1919 году).

Сайт

Семейство сайтов состояло из 40 разрозненных дизайнов. У цирка не было единой концепции взаимодействия с клиентами. Все дизайны выглядели старомодными.

Бизнес-цели

Наша задача

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

Вот такой план проекта мы разработали

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

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

Если по правде, то сначала собрали 100 важных вопросов! Но затем проанализировали веб-метрики сайта и пообщались с заказчиком, и таким образом получили ответы на 76 вопросов, оставив 34 ключевых вопроса, которые задали непосредственно пользователям.

Опрос в цифрах

Проверка гипотез

Мы не просто провели опрос, но и проверили гипотезы относительно поведения пользователей и будущего сайта в целом. Всего выдвинули 30 гипотез, из которых подтвердилась 21.

Некоторые гипотезы не подтвердились, например, эта: “Пользователи покупают билеты в цирк накануне за 2-3 дня”. Оказалось, что люди чаще покупают билеты за неделю (55%), чуть реже и за месяц (26%).

Зато другие гипотезы подтвердились. Итак, примеры гипотез.

Гипотеза 1

Гипотеза 2

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

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

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

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

Прежде чем рисовать концепцию будущего сайта нужно было провести важный этап работы, который включал и исследование и креатив. Что мы сделали:

Рассмотрим подробнее процесс создания персонажа.

Персонаж и сценарии

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

Шаги, которые нужно предпринять, чтобы создать пользователей и сценарии:

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

Мы получили 3 группы персонажей и выбрали из них одного ключевого. В качестве параметров для ключевого персонажа мы выбрали группу 1, как наиболее уязвимую, которая сталкивается с большим количеством сложностей в интернете, чем другие группы. Если этому персонажу будет удобно на сайте, то остальным тоже.

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

Если вам интересно посмотреть пример такого отчета, напишите нам

Концептуальный прототип

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

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

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

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

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

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

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

На рисунке показаны дизайны 1, 2, 3.

В итоге Росгосцирк предпочел второй вариант дизайна. А какой вариант понравился вам?

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

Посоветовали сделать описание представления в один абзац, чтобы посетитель не устал читать длинный текст. Ведь цирк – это визуальное шоу. Покупка билетов – целевое действие на сайте. Блок с выбором билетов должен быть ярким и очевидным. Поэтому плашки крупные, контрастные, на каждой есть день, время представления и кнопка “Заказать билет”.

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

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

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

Результаты внедрения нового дизайна

Какое-то время разработчики Росгосцирка программировали сайт и одевали его в новый дизайн, и совсем скоро он начал работать и продавать первые билеты. В цирки потекли реки зрителей, которые наконец-то смогли приобретать билеты на представления онлайн. Конверсия новых сайтов возросла в 3,5 раза!

Росгосцирк не остановился на достигнутом, чтобы сделать сайт еще удобнее для пользователей было решено провести юзабилити-тестирование. На рассмотрение взяли сайт тульского цирка https://www.circus-tula.ru/. Стоит отметить, что тестирование проводилось не сразу после запуска сайта, а через несколько месяцев.

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

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

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

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

Пример описания проблемы

Юзабилити-тестирование помогло Росгосцирку посмотреть на сайт глазами пользователей и сделать его еще удобнее.

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

Если информационный голод не утолился, то советуем почитать еще несколько статей: