ДизайнУха
05
Oct

6 техник сторителлинга для лучшего интерактивного дизайна

источникthenextweb.com
авторJerry Cao

Давайте сразу с этим согласимся: не каждый визуальный рассказ должен быть интерактивным.

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

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

Источник фото: Blackhouse

Если вашу историю можно передать одним изображением, тогда не используйте двадцать. Но если для вашей истории требуется двадцать, тогда точно не пытайтесь впихнуть её в восемь. Тогда она будет понята и выполнит свои задачи. Это всё к тому, чтобы ваш рассказ был детальным или простым ровно на столько, насколько это нужно. Ни больше, ни меньше.

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

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

В этой статье мы опишем несколько способов подачи интерактивной истории.

1. Сделайте пользователя персонажем истории


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

Например, на сайте The Slavery Footprint используется управляемый вопросник, чтобы сделать подаваемую информацию индивидуальной для пользователя. Фактически, сайт сразу становится «про них», а не про очередного пользователя без личности.

Источник изображений: http://slaveryfootprint.org/ via Digital Telepathy

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

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

Другой отличный пример сайта, который непосредственно задействует пользователя в качестве «персонажа», это Tesla Motors. Особенно их страница «Go Electric», на которой задаются самые распространённые вопросы о переходе на электрокар. Когда они задают вопрос напрямую пользователю, ему кажется, что он (пользователь) имеет важное значение (что, конечно, улучшает вовлечение).

Источник изображений: http://my.teslamotors.com/goelectric

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

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

2. Геймифицируйте ваш сайт

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

Геймификация, простыми словами, это система рисков (затрат) и наград. Вы ищете пути, чтобы ваша история награждала ваших пользователей за совершение определённых заданий.

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

Источник изображений: UXPin

Если награды стоящие (неважно, физически или психологически), они являются отличным мотиватором для пользователей. Просто будьте осторожны с тем, чтобы уровень награды соответствовал уровню риска для вашего пользователя. Слишком маленькая награда недостаточно стимулирует пользователей, в то время как слишком большая настораживает их («Почему я получаю так много ни за что? Здесь должна быть уловка»).

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

Foursquare долго использовал геймификацию в их приложении, поощряя пользователей бесконечно чекиниться в разных местах. Чем больше вы чекинитесь, тем более полезным становится приложение. Поэтому в этом случае геймификация играет большую роль. В их приложении Swarm вы можете также получать награды, становясь «мэром» (среди ваших друзей, использующих Swarm) места, в котором вы часто чекинитесь.

Источник изображений: Foursquare

Как мы объясняли в Interaction Design Best Practices, геймификация работает благодаря простой схеме сигнал-шаблон-награда, которая формирует пользовательские привычки.

Источник изображений: UXPin

По причине того, что сигнал поменять трудно, вы будете менять шаблон или награды.

Dropbox — хороший пример геймификации с помощью добровольного вознаграждения. Они дразнят пользователей наградой (250mb бесплатного пространства) в обмен на ряд небольших действий, которые они называют «серией квестов». Они также представили эти семь квестов в форме чеклиста. Этот приём давит на нужду человека в чувстве завершённости.

Неудивительно, что такая геймификационная модель реально сыграла огромную роль в первоначальном росте Dropbox.

Источник изображений: Dropbox

Когда вы видите ваш первоначальный размер хранилища, вас уведомляют (сигнал) о том, что можно дозаполнить профиль или пригласить друзей в сервис (оба действия — шаблоны). Давая такие простые задания за одинаковую награду, Dropbox удаётся удерживать даже наменее заинтересованных пользователей, которые бросили бы приложение, чтобы не платить.

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

3. Дополняйте обычные действия интерактивом

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

Когда дело доходит до кликов, используйте изображения, чтобы указать на нужное место клика, и что произойдёт после этого действия (и почему это выгодно). Как рассказывается в Web Design for the Human Eye, вы должны убедиться в согласованности настроений вашего текста и изображений.

Обратите внимание, как в примере ниже от Squarespace изображение в высоком разрешении подкрепляет слоган «Create a beautiful website». Если вы хотите завладеть вниманием пользователя, умещайте заголовок в 5-7 слов, затем найдите (или создайте) верную графику для мгновенной передачи сформулированного сообщения.

Источник фото: Squarespace

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

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

Источник фото: Squarespace

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

Источник фото: http://humaan.com/about/

Источник фото: http://humaan.com/about/

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

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

4. Пусть ваш визуал будет отзывчивым

Добавление эффектов, которые бы отзывались на действия пользователя — это тактика, похожая на наши предыдущие советы по оптимизации распространённых действий. В большинстве случаев это будет какая-то простая анимация (как мы уже упоминали в примере про сайт Humaan). Эту реакцию эффектов можно привязать к кликам, скроллингу или более сложным действиям типа формы заявки.

Сайт приложения Babel — отличный пример. По скроллу вниз кошка (главный персонаж, Бабель) по-видимому падает с неба, кувыркаясь в полёте. Перестаёшь скроллить, и кошка повисает в воздухе, держась за зонт. (На скриншоте не видно, так что зайдите на сайт, чтобы убедиться).

Источник изображений: http://babeltheking.com/eng via Digital Telepathy

5. Прячьте второстепенные элементы как «пасхальное яйцо»

Это одна из самых каверзных стратегий интерактивного дизайна, подходящая не всем сайтам. Но радость от возможности делать находки может стать одним из незабываемых впечатлений для пользователей. Вот некоторые типы сайтов, которым подойдёт этот приём:

  • игровые сайты (и про конкретные игры, и про игровую индустрию вообще);

  • сайты с розыгрышами призов и конкурсами (пасхальные яйца добавят им веселья);

  • сайты с прицелом на гиков, компьютерщиков (кто откажется от пасхального яйца с хорошим Konami Code?)

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


Вот пример сайта, умело использующего подобную тактику: The Museum of Mario, который показывает эволюцию супербратьев Марио и видеоигр про них. Разные области на разных экранах внутри сайта предоставляют разнообразие действий, включая имитацию геймплея видеоигр и раскрывая информацию о персонажах и играх.

Так как целевая аудитория сайта The Museum of Mario уже заранее полюбила пасхальные яйца, такой способ подачи информации хорошо работает. Он также эффективен, потому что прямо под заголовком написано: «покликайте вокруг, чтобы найти скрытый интерактив!».

Источник изображений: http://mario.ign.com/ via TheUltralinx

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

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

6. Мыслите шире: начало, середина и конец

У каждой хорошей истории есть начало, середина и конец. Даже история, состоящая из одной картинки, работает по такой же повествовательной схеме (только цикл проходит быстрее). Но эта схема эффективнее работает в более комплексной истории, (например, объяснение того, почему ваша CRM выделяется на фоне десятков других).

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

Источник изображений: Designing CX Free Customer Journey Template

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

Никогда не будет лишним провести исследование ваших пользователей и затем разработать подробный сценарий нахождения посетителя на сайте (Adaptive Path предоставляет превосходное бесплатное руководство, а Designing CX полезный набор инструментов). Как только вы изучите весь процесс и цельный сценарий, можете создать схему каждой его отдельной части. Фокусируйтесь только на начале, середине и конце, постоянно имея ввиду те области, в которых ваш сайт или приложение должны играть важную роль в контексте большей картинки.

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

Заключение

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

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

Источник изображений: Shutterstock