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

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

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

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

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

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

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

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

• 42 стационарных цирка по всей России
• 40+ сайтов цирков по всей стране
• 3 000 000+ зрителей в год

Сайт

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

Бизнес-цели

• Увеличение продаж онлайн билетов и повторных визитов в цирк
• Сокращение расходов на поддержание сайтов компании
• Создание единого современного имиджа компании

Наша задача

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

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

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

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

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

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

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

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

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

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

Гипотеза 1

Гипотеза 2

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

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

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

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

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

• Проанализировали статистику 6 основных сайтов Росгосцирка
• Пообщались с экспертами компании
• На основе этих данных и результатов опроса создали Персонажей - собирательные образы основных групп пользователей
• Выбрали основного персонажа, который часто посещает сайт и испытывает сложности при покупке билетов
• Описали основные сценарии поведения персонажа на сайте и его требования к сайту

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Вкусный и здоровый гайд по юзабилити-тестированиям
• Как разрабатывается концепция
• Как происходит процесс проектирования
  
• Кейс Росгосцирка на нашем сайте
  
• Как мы помогли нашему клиенту в 6 раз увеличить количество активных пользователей — кейс компании NovaKid
  

• Как‌ ‌стать‌ ‌UX-специалистом: 10‌ ‌советов‌ ‌из‌ ‌практики https://uexpert.ru/kak-stat-ux-spetsialistom-10-sovetov-iz-praktiki/
• Вкусный и здоровый гайд по юзабилити тестированиям https://uexpert.ru/vkusnyj-i-zdorovyj-gajd-po-yuzabiliti-testirovaniyam/
• Юзабилити-аудит сайта: полный гид + примеры https://uexpert.ru/yuzabiliti-audit-sajta-polnyj-gid-primery/
• Особенности CJM в UX-дизайне. Часть 1. Виды CJM https://uexpert.ru/osobennosti-cjm-v-ux-dizajne-chast-1/
• Особенности CJM в UX-дизайне. Часть 2. Как создать CJM https://uexpert.ru/osobennosti-cjm-v-ux-dizajne-chast-2-kak-sozdat-cjm/
• Подборка статей про особенности восприятия человека https://uexpert.ru/category/osobennosti-vospriyatiya-cheloveka/
• Как изменить интерфейс и не взбесить пользователей https://vc.ru/design/270587-kak-izmenit-interfeys-i-ne-vzbesit-polzovateley/

• Всё, что ты хотел узнать про UX-стажировку, но боялся спросить и 5 секретов юзабилити-аудита – ответы на ваши вопросы про UX-стажировку, обратная связь и разбор тестовых заданий и о том, как проводится юзабилити-аудит по шагам на примере реального кейса.
• Как подготовиться, чтобы попасть на UX-стажировку – ответы на вопросы студентов по теме UX-стажировки в нашей компании, рекомендации материалов.
• Какого UX-исследователя оторвут с руками – делимся требованиями работодателей из РФ и в мире к UX-специалистам на основе исследования 126 вакансий. Что должен знать и уметь UX-исследователь, чтобы его с радостью взяли на работу.
• Как стать UX-исследователем, которого оторвут с руками – как и где получить образование в сфере UX-исследований, как получить свой первый практический опыт, как подготовить резюме и пройти собеседование, как получить конкурентное преимущество, как выбрать свою первую работу, что делать если не берут на работу и как выглядит путь развития от нуля до PRO.
• Книги PRO UX с Артемом Кузнецовым – разбор самых полезных книг по теме UX / UI, которые должен прочитать каждый, кто хочет стать востребованным UX-специалистом.
• Эксперты PRO UX с Артемом Кузнецовым – беседы с профессионалами в сфере UX и проектирования интерфейсов о приходе в профессию, опыте работы, про процесс проектирования цифровых продуктов, про роли и обязанности UX / UI и прочих специалистов, про инструменты и методы работы, про стажеров и джунов, про путь джидая в профессии, про рынок UX / UI и про жизнь вообще.

• UX-школа Артема Кузнецова - обучаем за 3 месяца всем основным методам UX-исследований, теория и практика, международный сертификат.
• Курс по юзабилити-аудиту PRO - обучаем проводить юзабилити-аудит на самом высоком уровне и уверенно и аргументированно представлять его результаты Заказчику.
• Курс по юзабилити-тестированию PRO – обучаем проводить юзабилити-тестирование на самом высоком уровне и уверенно и аргументированно представлять его результаты Заказчику.
• Тест по юзабилити-аудиту - можно проверить свои знания аудита и получить Сертификат, получить преимущество при устройстве на стажировку.
• UX-стажировка в компании Ю-эксперт - бесплатная практика в реальных проектах под руководством опытных специалистов.
• Как подготовиться, чтобы попасть на UX-стажировку - подборка материалов (статьи, видео), рекомендации материалов для самостоятельного изучения, ответы на вопросы про стажировку.
• Все обучающие материалы от Ю-эксперт – все наши обучающие курсы, предложения по консалтингу / менторингу / коучингу и стажировке.