Такие термины как UX (пользовательский опыт) и UI (пользовательский интерфейс) были неоднократно описаны и объяснены, но как насчет, интерактивного дизайна? Да, еще один технологический акроним, который стоит запомнить, но не волнуйтесь, мы сделаем вашу жизнь проще, объясняя это через удивительный пример!

Золотое правило: Юзабилити

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

  • Обучаемость
  • Эффективность
  • Удовлетворенность

Кейс Just for Laughs

Just fof laughs — ежегодный комедийный фестиваль в Монреале. В 2016 году сайт hahaha.com сделал капитальный ремонт. Что может быть лучше, чем этот наглядный пример для иллюстрации принципа интерактивного дизайна.

Основной упор сайта hahaha.com делается на удобстве работы.  

Для JFL, одним из ключевых элементов является гибкое меню навигации для редактирования через CMS клиент. Оно разработано в двух одновременных воплощениях, французском и английском языках, которые не повторяются дословно.

Компания вдохновилась adobe.com, меню независимое от сайта не ухудшающее пользовательский опыт. Также оно было прекрасно адаптировано под мобильные устройства.

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

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

Обучаемость

Сколько времени ваши пользователи должны потратить, чтобы понять ваш сайт? Является ли навигация интуитивной?

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

Она была разделена на 3 уровня. 

  1. Гамбургер-меню

Обычное мобильное меню, первый уровень навигации максимально упрощен. Это оставляет почти 100% пространства контенту, включая домашнюю страницу и анимацию, в то же время оно легкодоступно.

  1. Пять разделов

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

  1. Шахматный порядок

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

Эффективность

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

  • Внешний вид кнопки должен меняться по наведению курсора;
  • Списки категорий должны раскрываться;
  • При наведении курсора на элемент ожидается появление подсказок.

Сосредоточив внимание на визуальной согласованности, интуитивных взаимодействий и лучше всего признанных стандартов юзабилити через его дизайн, MultipleMedia обеспечивает оптимальное понимание интерфейса пользователей hahaha.com.

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

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

Удовлетворенность

Довольны ли пользователи интерфейсом вашей цифровой платформы? Являются ли дизайн и образы визуально интересными?

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

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

Для продвижения нового мюзикла «Мэри Поппинс» компания разработала тематическую анимацию и поместила ее на главной странице. 

Главной целью маркетологов было создание атмосферы путешествия, которое задает тон и погружает зрителя в мюзикл «Мэри Поппинс». Прежде всего, маркетологи хотели разработать полный опыт для зрелищных шоу.

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

Источник