featured_interactive

Как улучшить UX на сайте при помощи интерактивных элементов

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

Ниже, вместе с экспертами webdesignerdepot.com, мы рассмотрим несколько примеров использования анимированных картинок, флэш-роликов и других интерактивных элементов в дизайне страниц некоторых известных сайтов.

El Monstruo: побеждаем монстров смсками

El Monstruo — фонд, созданный в партнерстве между UNICEF (Детский фонд ООН) и ING Direct (голландский финансовый холдинг) для поддержки школ в развивающихся странах. На сайте размещен анимированный видеоролик, в котором картонный монстр выгоняет детей из школы и преследует их. В ролике есть опция — пожертвовать небольшую сумму, используя SMS, с помощью специальной кнопки, возникающей в самый острый момент сюжета. Если вы жертвуете, дети спасаются и все радуются счастливому концу, если же нет, то…

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

Такой ход, давая немедленное эмоциональное вознаграждение, делает этот рекламный ролик чрезвычайно эффективным.

 

Slavery Footprints — расследование улик

01

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

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

Этим способов вы вовлекаетесь в тему не просто как посторонний посетитель, но как непосредственный участник. Slave Footprint придумали фантастический способ вовлечения посетителей в свою историю — на эмоциональном уровне.

 

Supple: плюсы СЕО и минусы без СЕО

02

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

Используя грамотно организованные хотспоты, кликая на которые пользователи могут получить в виде всплывающих подсказок пояснения к инфографике и некоторым аспектам излагаемой темы, Supple более глубоко знакомят своих потенциальных заказчиков с принципами СЕО. Различные виды анимации делают сайт более живым, а слайдеры на изображениях позволяют «заглянуть» за скриншот анализируемых страниц и посмотреть детали их кода.

 

Inception — разъяснение

03

Конечно, Inception (Начало) — великий фильм. Но его сюжет запутан донельзя. К счастью, вот этот сайт (http://www.inception-explained.com/) все разъясняет подробно с помощью интерактивной инфографики. Персонажи фильма изображены в виде разноцветных кругов, слои сна внутри сна возникают один над другим при пролистывании сайта сверху вниз.

Всплывающие пояснения дают описание, что происходит с тем или иным персонажем, что происходит в данный момент по сюжету в фильме.

Этот сайт дает нам простой, но яркий пример интерактивного рассказа — он позволяет нам двигаться по сюжету в нашем собственном темпе. Что очень помогает разобраться в столь запутанном фильме, как «Начало».

 

Coin: одна карточка заменяет все остальные!

04

Ваш кошелек лопается от множества кредиток в нем? Coin – это электронная кредитная карта, в которую вы можете загрузить все остальные свои карты и использовать только ее одну, выбирая нужную карту с помощью сенсорного меню.

Смысл этого продукта — объединить в один девайс множество кредиток, и этот смысл исчерпывающе показан на сайте компании: когда вы пролистываете вниз страницу, изображения кредитных карт собираются вместе и трансформируются в Coin.

Главная идея выражена минимальными средствами.

 

Bellroy: уменьшите талию вашего кошелька!

05

Когда мы говорим об «уменьшении талии» кошелька, очень хотелось бы уменьшить толщину самого кошелька, но никак не объем его содержимого. Кошельки Bellroy сконструированы так, чтобы иметь меньшую толщину, чем обычные, при том же самом объеме находящихся в нем карточек и денег.

Чтобы показать это, на сайте Bellroy использована анимация — при помощи слайдера можно увеличивать количество помещенных в обычный кошелек и кошелек Bellroy кредиток от 1 до 10 и сравнить получившуюся толщину на соответствующем изображении. С помощью этой и других захватывающих анимаций посетители вовлекаются в тему, ведь проблема раздутого кошелька надоела уже практически всем.

 

Babel the King: дождь из кошек

06

Babel – интерактивная детская игрушка, продающаяся на iTune, в которой кот Babel борется с так раздражающими его облаками. Приложение предназначено для детей 2-8 лет и наполнено картинками, аудио, анимацией и интерактивными элементами.

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

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

 

Akita показывает, как данные путешествуют вокруг земного шара

07

Кажется, что email-сообщения доходят до адресата мгновенно. Но что на самом деле происходит, когда они путешествуют от отправителя до адресата? Служба поддержки Akita показывает в пошаговом представлении, как данные перемещаются вокруг света.

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

 

Бен-телохранитель

08

Бен-телохранитель — приложение для iPhone, которое защищает и шифрует данные. Рекламная кампания этого приложения основана на персонаже Бена, непобедимого защитника.

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

 

Nissan Note

09

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

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

 

EveryLastDrop – история о сбережении воды

10

Сайт показывает один день использования воды, рассказывая о количестве потраченной жидкости. От простого душа утром, до количества воды, использованной при изготовлении одежды, еды и т. п. Простая, анимированная прокруткой история, которая в итоге приводит вас в космос!

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

 

The Boat: поучительный рассказ о мучениях и спасении

11

Короткий рассказ Нама Ле «Лодка» был представлен в виде интерактивной новеллы на сайте sbs.com.au, рассказывая нам о спасающихся на хрупкой лодке от ужасов войны во Вьетнаме людях, противостоящих враждебному океану.

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

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

 

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

 

По материалам блога Web Designer Depot

About likezilla

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