Как за 6 часов провести UX-аудит и создать редизайн для крупного сайта
Привет, это Никита UX-дизайнер из KOTELOV. Сегодня расскажем, как за один день отправить заявку на тендер, выстроить свою работу над ним и провести аналитику с коридорными исследованиями.
Тендер в Исторический Мультимедийный Парк. Крупный проект, времени на подготовку всего день. Нужно было посмотреть сайт, выявить проблемы и предложить решения.
Пришли, посмотрели сайт, определили проблему и разработали концепт. А ниже расскажем о том, как это было: какие проблемы нашли, как искали решения и к какому результату пришли.
Задача
Сделать концептуально новый дизайн сайта. Определить проблемы, предложить смысловые и дизайнерские решения.
Особенности проекта
Сроки разработки были ограничены — по сути, у команды было около 6 часов на изучение ТЗ, аудит сайта и создание решения.
Исторический Мультимедийный Парк — это крупный государственный проект, в рамках которого в разных городах создаются интерактивные музеи. Экспозиции там реально прикольные, у нас несколько ребят ходили туда — им понравилось.
Вместо скучных лекций и грустных экскурсоводов, которые водят вас по залам с рыцарскими латами, там куча интерактивных презентаций и экранов, с которыми можно взаимодействовать. Исторические аудиопрезентации, статистические дашборды, даже целые микрофильмы о разных событиях.
Этапы работы
Определили основную цель сайта → провели первичный аудит → выявили основные проблемы → выдвинули гипотезы → провели коридорные исследования на малой экспертной группе → предложили решения
Анализ сайта и выявление проблем
Для того, чтобы оценить сайт и его эффективность, нужно определить какое у него полезное действие. У этого сайта есть несколько функций:
- Привлечение посетителей
У музея есть уникальное предложение, которое может привлечь посетителей — мультимедийные выставки. Сайт должен раскрывать эти плюсы, чтобы привлекать больше посетителей - Навигация по мероприятиям
Сайт помогает посетителям узнать, когда проходят разовые мероприятия в Парке. Узнать какие выставки доступны именно в этом городе. Это нужно, чтобы обеспечить постоянный трафик на разовые мероприятия. - Коммуникация с аудиторией
Сколько стоит сходить в музей, на каких условиях. Общие новости и что интересного происходит в музее. Сайт должен помогать доносить до посетителей информацию, которое поможет им в получении интересного опыта внутри заведения.
Проект разительно отличается от обычных исторических музеев, поэтому давайте посмотри на сайт, который они отгрохали.
Первичный аудит
Заходим на главную страничку и видим такое.
Первое, что бросается в глаза — это нарушение F-паттерна. В левом верхнем углу — самой важной части сайта — не очень понятная надпись, которая не помогает пользователю понять, что здесь происходит.
F-паттерн — согласно исследованиям, людям проще воспринимать информацию читая слева направо. Соответственно, если они идут по сайту, то знакомятся с информацией по форме буквы F. Сначала верхняя строчка, причем слева направо, потом по левому столбику вниз и средняя строчка. И только потом вниз — все равно просматривая весь сайт с левого края.
1. Запутанная навигация: меню вверху — меню справа В верхнем меню вынесены второстепенные страницы, а важные страницы такие как выставки, цены, афиша спрятаны в боковом меню, которое не сразу заметно
Причем, если нажать на меню справа — там откроется целая дополнительная вкладка. Большинство пользователей, которых мы протестили даже не заметили эту менюшку, а пролистали вниз. А там действительно важная информация, например, временные выставки о которых больше неоткуда узнать.
Мешанина из гиперссылок
Если все-таки найти и открыть меню справа — откроется вкладка с кучей гиперссылок.
Неочевидно, что это кликабельные ссылки — непонятно, на что можно кликать, а что поясняющий текст. Трудновато понять, что означают те или иные ссылки: например, чем афиша отличается от выставок? А пресс-центр от новостей?
2. В заголовках и форматировании отсутствует иерархия
Громоздкое описание, текст выравнен по центру — тяжело читать. Блоки не взаимосвязаны — непонятная логика. Кроме того, нет четко сформулированного УТП.
Нарушена теория близости: подзаголовок расположен далеко от заголовка, из-за чего складывается впечатление, что это 2 несвязных блока. А выравнивание по центру усиливает этот эффект
3. Ошибки с определением расположения
Мы зашли на сайт, будучи в Санкт-Петербурге, но он почему-то определил нас, как жителей Москвы.
4. Важное в середине — неважное в начале
После первого экрана идут разделы Новости и Интересное в парке. Это не очень важная информация, с которой музей связан, но второстепенно. Если посетитель узнает о ней позже — ничего не случится.
Давайте смоделируем ситуацию:
Представьте, что вы из Нижнего Новгорода и решили провести время в культурной столице — Санкт-Петербурге. У вас не так много времени, потому что уикенд планируется после работы. Вы шерстите сайты с музеями и решаете зайти на сайт Исторического Парка. Вас встречает непонятное меню, спрятанную справа информацию о ценах и билетах вы не заметили, там же осталась информация о временных выставках. Вы пытаетесь понять, что происходит, поэтому листаете вниз — стандартный пользовательский сценарий. Ниже ожидают общие новости, которые почти не относятся к работе музея. Еще ниже будет информация о работе музея — это важно, но не имеет значения, потому что вы еще даже не захотели посетить музей. Только после трех экранов удастся добраться до информации об актуальных выставках.
Наконец, мы добрались до выставок
5. Неудачная визуализация продукта
Это три основные выставки, которые можно посетить. Они постоянные, не завязаны на определенные даты и на них можно прийти в любое доступное время. Помните, мы в начале сказали, что выставки интерактивные — там куча экранов, планшетов, проекторов и тд. На этом баннере ничего из этого не видно — немного на третьей фотографии, и все равно это не помогает понять, что будет на выставке.
Даже, если кликнуть на выставку — выйдет вот такая информация.
Снова много текста, который не хочется читать. Можно кликнуть на видео, но оно не выведено на сайт. Если мы все-таки откроем видео, то там будет достаточно долгий кусок, как создавали музей — только на второй минуте появляется реальная визуализация музея, где видны детали.
Можно листнуть на 2 экрана вниз и только тогда мы увидим что-то похожее на реальную выставку.
В итоге, чтобы увидеть первую удачную визуализацию парка — нужно упорно рыскать по сайту больше 5 минут.
6. СТА Шредингера: то есть, то нет
Кнопка «Купить билет» есть только на центральной выставке — на остальных почему-то нет. Можно подумать, что это части одной выставки, потому что кнопка только одна. Описание тоже почему-то есть только у центральной выставки.
После того, как мы 30 секунд искали выставки на сайте — получается найти 3 картинки действующих мероприятий. Есть кнопка купить билет, но только одна, поэтому мы думаем, что это одна выставка в трех разных этапах. Нажимаем на «Купить билет» и видим много несодержательной информации — мы так и не понимаем, что увидим, если потратим один из своих дней на поход в музей.
7. Временные выставки
В парке есть временные выставки, которые проводятся до определенной даты. Музей заинтересован в том, чтобы посетители знали о таких выставках и могли легко найти их на сайте.
Как видно из картинок — временные выставки можно найти на первой странице справа. Проблема в том, что на этом баннере мешанина из информации: Пушкинская карта, выставки, график работы и СТА на телеграм-канал.
Самое страшное в том, что переходы сделаны в стиле «сториз» из запрещенной сети. Только тут нельзя пропустить или остановить «сториз».
Если вы не успели посмотреть текст — придется подождать пока пройдут 12 других картинок и тогда у вас будет еще 5-6 секунд, чтобы посмотреть на на баннер.
8. Нет систематизации
Создается, ощущение, что он создается на конструкторе из разных блоков.
Например, вот
Получился внушительный список проблем:
- Запутанная навигация
- Много текста + разное форматирование
- Добираемся до основного продукта только к середине сайта
- Отсутствует акцент на временных выставках — не понятно до скольки они работают
- Не у всех есть СТА «купить билет»
- На превью не считывается, что это мультимедийная и современная выставка
Как решали проблемы:
Для начала мы провели коридорные исследования: выбрали небольшую тестовую группу, которая часто ходит в музеи и показали им сайт. В ходе подготовки решения мы показывали им промежуточные этапы и корректировали результат в зависимости от их реакции
1. Выстроили навигацию для широкой и узкой аудитории
|Главное, чтобы пользователь не напрягался
В левом верхнем углу — в первой точке взаимодействия с пользователем расположили ключевую информацию связанную выставками и жизнью парка.
В правой части, добавили второстепенную информацию для более узкой аудитории (для экскурсоводов, арендаторов и т.д)
Разделили хэдер на 2 составляющие
Максимально сократили информацию и, не потеряв суть, разместили в хэдере. Это освободило место для более важных акцентов — теперь можно показать выставки.
2. Поменяли акценты — выставки в начало, а второстепенная информация в конце
| Сначала первое, потом второе
Долго думали, что выносить вперед. С одной стороны нужно акцентировать внимание на постоянных выставках, потому что это основной продукт. С другой, есть временные выставки, которые имеют ограничение по времени и логично сконцентрировать внимание на них. Мы сделали 6 вариантов, которые начали тестить на минигруппе из целевой аудитории.
Остановились на таком варианте. Временные выставки вынесли на первый план. Нестандартная верстка карточек, за счет размера и положения позволит увеличить продажи билетов к продвигаемой выставке — на самую левую карточку наибольший акцент. В это место можно ставить выставки, которые скоро закончатся и им нужно больше внимания.
Структурировали заголовки и описание у выставок — вынесли ключевую информацию. Для временных выставок делаем акцент на датах.
3. Добавили воздуха и мультимедийности
| Изображения тоже хотят дышать
Систематизировали блоки, отделили их фоном и зеркальной версткой — сайт стал живым и лаконичным.
Использовали живые фото, чтобы погрузить пользователя в атмосферу парка. Это нужно, чтобы отстроиться от обычных музеев — в прошлом варианте сайта было неочевидно, что это мультимедийный парк.
4. Сделали акцент на доступности музея
| Доступный музей — это тот, который может прийти каждый
5. Добавили живые фотографии
| Нужно больше жизни, больше
Интересное в парке формируется из фотографий людей. До этого было много баннеров и картинок. Мы постарались использовать только фотографии с реальными людьми или объекты с выставок — это создает в парке атмосферу.
6. Привлекаем посетителей отзывами от именитых личностей
| Вот теперь хороший парк
Что получается, когда у Kotelov всего 6 часов:
Подписывайтесь на наш телеграмм-канал, если хотите видеть изнанку диджитал студии. У нас эйчары созваниваются с котами, а команда делает стикеры под каждый пост — t.me/kotelov_love
все разложили понятно и доступно
И как, согласна? Или есть предложения?
Банальный поверхностный дизайн-аудит от джуна. Повезло, что изначальный дизайн был настолько отвратительным, что можно исправить самые очевидные ошибки и написать об этом статейку на vc
Тендер хоть выиграли?
Самый милый ответ, который можно было услышать. А чего там джуновского? Я не шарю, я редактор просто
Ребята, очень понравился подход, выявленные проблемы и созданные решения. Так же бы сделала !!!))
За 6 часов?