У Британской Национальной Оперы (ENO) показался новый сайт. С позиций пользовательского опыта (UX, user experience), все стало четче и понятнее, не смотря на то, что дизайн стал намного примитивнее. Предлагаем вам поразмыслить, из-за чего это трудится, обратившись за комментариями к агентству, занимавшемуся разработкой данного сайта.
Упрощение навигации
Сравните навигацию на ветхом и новом сайте ENO, каковые приведены ниже:
Ветхая версия дизайна
Новая версия дизайна
Новое упрощенное меню ведет к тому, что пользователю нужно делать больше кликов для перехода на конкретную страницу. К примеру, раздел о еде и напитках ранее был дешёв по одному клику из выпадающего меню, сейчас же это занимает два клика.
Но не обращая внимания на необходимость лишних нажатий, полностью разумеется, что новое упрощенное меню куда более комфортно, чем старое:
- Главные страницы более заметны и на них меньше выбор действий, дабы визитёры не пропустили самую актуальную и ответственную данные.
- Ориентированный на пользователя интерфейс (human-centred design) предоставляет комфортно управляемый комплект информации.
pSubstrakt, агентство занимавшееся редизайном, подводит следующий хороший результат:
«То что происходит на сцене — это только вершина огромного айсберга, исходя из этого в то время, когда дело доходит до сайта, начинает проявляться множество качеств, незаметных ранее. Несложная навигация — в большинстве случаев первое, чем приходится жертвовать.
Одна из главных целей была в том, дабы упростить навигацию и сократить избыточное количество контента, сориентировав сайт на три главных потребности пользователя: заказ билетов, организация визита, получение дополнительной информации об опере».
Долгие страницы с навигацией «прыжками» (jump navigation) разрешают высвободить пространство для ответственного контента и не заваливать пользователя второстепенной информацией.
- Как расширить конверсию в 4 раза, упростив дизайн лендинг-пейдж
Липкие кнопки «Заказать»
Любая страница мероприятия в опере имеют собственную кнопку «Заказать» (Book), которая закрепляется в верхней части страницы, в то время, когда вы скроллите страницу вниз:
Такая липкая навигация (sticky navigation) сейчас стала весьма популярна в Сети. Крис Унитт из One Further, проводивший пользовательское тестирование данного проекта отмечает:
«Substrakt трудились над веб-сайтом для Бирмингемского ипподрома, другого клиента отечественной компании, и мы сходу заметили эффект от прикрепленных кнопок, так что вычисляем эту функцию необходимой и нужной.
Честно говоря, эта кнопка употребляется вдвое чаще чем статическая».
Не смотря на то, что обрисованный функционал до тех пор пока еще не представлен в мобильной версии, но возможно покажется в скором времени. На данный момент большая часть бронирований билетов в ENO осуществляется с ПК.
Липкая навигация, в то время, когда CTA-кнопка закрепляется в верхней части страницы при скроллинге, все более популярна в Сети
Твитнуть цитату
- Навигация мобильных приложений и сайтов: базисные правила юзабилити
Моделирование контента
По словам представителей Substrakt, моделирование контента было использовано для лучшего отражения информации:
«Надлежащее моделирование контента (пьеса, концерт, кастинг/креатив, новости) сделало перекрестные ссылки более действенными. Одинаковый контент возможно представлен на сайте различными методами, дабы лучше соответствовать потребностям пользователя.
К примеру, тот, кто забронировал билет на «Чудесную флейту», может захотеть взглянуть изображения данного представления в галерее, а тот, кто ищет неспециализированную данные об опере, возможно заинтересован в изображениях всех постановок: прошедших, текущих и будущих.
…[Это] свидетельствует, что ответственная информация вряд ли потеряется в обилии контента, в случае если привязывать ее к чему-либо более значительному для путешествия пользователя по сайту».
- Организация какое количество веб-ресурсе: плоская иерархия vs глубокая иерархия
Стремительная приобретение
Все больше веб-сайтов, посвященных развлечениям и искусству, предпочитают применять кнопку «стремительной приобретения».
Она находится в верхней части страницы «Что на данный момент идет» и ведет к тому, что те, кто нехотя исследуют сайт, легко смогут ее отыскать.
Крис Унитт дает пара пояснений по данной кнопке, и по кнопке «Календарь», которая будет введена в скором времени в верхней части основной страницы:
«Мы проводили тестирование ранней версии сайта, задействуя участников, выбранных в начале проекта. Оно доказало, что неспециализированная концепция была верной, но мы нашли множество небольших недочетов. каковые в итоге смогли исправить, опираясь на опыт пользователей.
К примеру, на странице «Что на данный момент идет» календарь был сделан более эргономичным, а кнопка «стремительной приобретения» была добавлена специально для людей, каковые отказывались скроллить сайт вниз либо имели какие-либо затруднения с этим (последнее актуально для людей с маленьким пользовательским опытом)».
- Влияние «результата Хобсона + 1» на мотивацию к целевому действию
Мобильная версия
Новый упрощенный сайт с дополнительным скроллингом и уменьшенным меню идеально подходит для мобильной версии.
Как продемонстрировано на скриншоте ниже, показалась ясность и сфокусированность на контенте, что усиливает навигацию и узнаваемость бренда:
Не смотря на то, что заказ билетов посредством мобильной версии пока не очень популярен у аудитории, без сомнений данный новый подход принесет громадную пользу ENO, поскольку привычки пользователей в этом нюансе меняются .
А вы вычисляете ли новый дизайн сайта более удобной для навигации? Каково ее главное преимущество перед ветхой, на ваш взор? Поделитесь в комментариях.
Высоких вам конверсий!
По данным: econsultancy.com
Случайные статьи:
UX UI дизайн – что это такое, уроки для начинающих: как рисовать тень, чекбокс, ссылки,
Подборка похожих статей:
-
Как улучшить мобильный лендинг: кейс от gohenry
Часть мобильного трафика увеличивается , в связи с чем все больше компаний обращает внимание на мобильные предположения собственных сайтов. Но как…
-
Как улучшить онбординг: кейс от pinterest
Хорошие отношения постоянно строятся на балансе, взаимных уступках и компромиссах — среди них и отношения между пользователем и компанией. Pinterest…
-
Школа юзабилити: как улучшить навигацию сайта?
Грамотная навигация удобна для пользователей и очень важна для действенного поискового продвижения. Она облегчает поиск нужной информацим, и процесс…
-
15 Образцовых примеров мобильного веб-дизайна
Сейчас многие компании уделяют созданию качественных мобильных ресурсов значительно больше внимания, поскольку по последним данным 80% пользователей…