Как дизайн интерфейсов работает на взаимодействие бренда с клиентами
UX-дизайнер Ребекка Хендерсон о том, как создать собственное видение модели поведения бренда, и о будущем UX-дизайнеров.
В избранное Руководство по сборке и эксплуатации Ikea: минималистичное, забавное и интуитивно понятное каждому. Какие основные аспекты стиля культового бренда можно использовать, чтобы направить его движение и поведение?
Несколько лет назад я начала работать с анимационным дизайном. Это было время, когда в нашей области не было движения: UX-дизайнеры работали со статичными элементами, тонули в примечаниях, а наш основной рабочий инструмент мог предложить нам только простые, кликабельные переходы.
Я знала, что анимационный дизайн очень важен для нашей профессии, но я не понимала, с какой стороны к нему подойти. После тщательного анализа десятков примеров использования анимации в цифровой сфере, я увидела модель, которую в определенный момент можно было бы использовать. Я стала лучше понимать, как анимация облегчает передачу информации через пользовательский опыт, что она уменьшает когнитивную нагрузку, делает UI более реалистичным и осязаемым, и в целом помогает отшлифовать пользовательский опыт.
Я сформировала принципы UX-хореографии, которые дизайнеры могли бы использовать, чтобы помочь нам разобраться, когда, почему и как внедрять анимацию.
За последние год или два UX-дизайнеры добились огромных успехов. В настоящее время в нашем распоряжении находятся десятки инструментов для разработки прототипов, которые просто интегрируются и которые можно очень быстро освоить, а следовательно их проще внедрить в рабочий процесс.
Очень полезно, что многие дизайнеры делятся своими советами и самыми удачными примерами анимационного дизайна, поэтому сейчас доступно много качественного материала, на котором можно учиться. В целом, мне кажется, что дизайнеры теперь лучше осознают, что значат дизайн, анимация и взаимодействие. Так что продолжайте и дальше делать то, что вы делаете. Бренду нужна идентичность
Несмотря на прогресс в создании прототипов, у анимации есть один недостаток: за реализацией взаимодействия теряется идентичность бренда. Сейчас в нашем распоряжении так много нестандартных способов перехода, а мы часто застреваем на одних и тех же, пусть и хороших, приемах: ведь так просто скопировать то, что уже есть и работает в других компаниях. Сейчас как никогда важно, чтобы бренды и дизайнеры уделили больше внимания создаваемым нами интерфейсам взаимодействия бренда с потребителями с точки зрения его отличительных особенностей и идентичности.
Лично я столкнулась с той же проблемой, когда некоторое время пыталась интегрировать принципы UX-хореографии в свой рабочий процесс, а также продолжала оценивать и любой другой опыт взаимодействия, который мне встречался. Я начала понимать, что у принципов есть иерархия, а именно, что важно начинать с характерного для бренда стиля изложения материала и с того, чтобы заранее создать свое видение поведения и тона «персонажа».
Если это сделать, то получится добиться сплоченности, разработать мотивацию и порядок коммуникации между командами (подробнее на эту тему чуть позже). Как творческая команда определяет стиль изложения для текстовой рекламы, создает цветопробу для графического материала, проводит шрифтовую работу, формирует стиль используемых изображений и иконографии, также и за разработкой взаимодействий должен стоять такой же уровень работы. Темы, которые мы обсудим в этой статье:
Почему нужно разрабатывать собственное видение поведения своего бренда, и в какой части творческого процесса следует начать думать об этом.
Разработка фундаментальных принципов анимации бренда, под которые будет подгоняться последующая разработка любых взаимодействий.
Создание комплексного руководства по анимации, чтобы внедрить единый стиль поведения.
Поиск привлекательных моментов в опыте, которые выходят за рамки стандартных требований.
Как вносить исправления в то, что уже было запущено, и строить планы на будущее.
Если бы бренд говорил с нами, что бы он сказал? Если бы бренд мог двигаться, как бы это было? Делаем анимацию и взаимодействие привлекательными
Почему один сервис лучше, чем другой? И почему сервис может казаться уникальным в сравнении с другими? Кроме создания продукта и услуг интуитивно понятными, простыми и приятными в использовании, нам приходится ещё и оценивать, что для брендов является актуальным, аутентичным и представляет истинную ценность.
И правда, самым очевидным и подходящим решением кажется открывать приложение с карты, на которой видно расположение ближайших автомобилей. Но какой из этих UI показывает знание бренда о том, что отличает его услугу и делает её более привлекательной в сравнении с остальными? Как это можно понять по UI? Честь и хвала Uber за то, что недавно основательно пересмотрела свой опыт и проделала серьезную работу над своими поездками:
Характерные для бренда анимация и взаимодействие — детали более высокого уровня, которые могут влиять на опыт и на то, как пользователь будет воспринимать ваш бренд и продукт. И хотя эта статья в основном об анимации, теперь более чем когда-либо, пользователи могут быть привлечены брендами через десятки различных точек взаимодействия, которых раньше просто не существовало: боты, VR, управление голосом, расширения Slack — список будет только расти.
Анимация и экраны — только одна часть уравнения. Пользователи ожидают получить тот же уровень услуги вне зависимости от того, где они находятся. Они ждут последовательности и от бренда. Чтобы добиться последовательности и аутентичности, команды должны выработать основательную точку зрения на стратегию поведения своих брендов, на то, какую уникальную ценность несет в себе их услуга или продукт, и какие чувства должен вызывать их бренд у пользователей. Когда мы должны начинать думать об анимации бренда и с чего начинать?
Если коротко — с самого начала. Более подробный ответ: вам придется проводить множество итераций в течение всего творческого процесса. Возможно, вам не удастся понять, как создавать анимацию, пока вы не начнете бессистемно разрабатывать некоторые процессы и лучше понимать свои слабые стороны, но никогда не будет слишком рано начать разрабатывать свое видение поведения бренда.
Я выяснила, что лучше всего в самом начале творческого процесса, когда все творческие отделы ещё работают вместе, погрузиться в такие темы как бренд, философия и цели. Легче всего начать с любых руководств по корпоративному стилю. Как бренд позиционирует себя в настоящее время? Каковы его ценности? Какие чувства у пользователей бренд хотел бы вызывать? И, что более важно, хочет ли бренд, чтобы ваша команда изменила его, сделала из него что-то новое?
После того, как мы как следует разберемся с этими вопросами, у нас появится возможность сделать шаг назад и черпать вдохновение из опытов окружающих нас брендов. Теперь главное мыслить широко и смотреть на отклонения от нормы. Есть ли что-то ещё, из чего вы можете черпать вдохновение, например, опыт розничной торговли, физические продукты, историческое влияние бренда, стиль изложения материала или более масштабная философия? Начните улавливать ключевые слова, которые приходят на ум.
[embedded content]
Один из самых моих любимых примеров: язык дизайна IBM «Машины в действии». Команда разработала микровзаимодействия, наблюдая за движениями механизмов и тем, как их движения соотносились с продуктивными функциями. Создаем фундаментальные принципы анимации
Другие творческие дисциплины начинаются с определения своего видения того, каким должен быть стиль текста, цвет, шрифты, стиль иллюстраций и иконография. Теперь и вам выдался шанс начать формировать свое видение поведения бренда. Черпайте вдохновение из ключевых слов, которые придумают члены вашей команды или которые вы подглядели у другого бренда.
Эти ключевые слова могут отличаться от того, что есть в основном руководстве по корпоративному стилю, и они и должны отличаться — прежде всего потому, что это должны быть прилагательные, которые описывают действие (то есть, динамика бренда не может быть описана словами вроде «рационально функционирующий»).
Цель — сузить список до трех уникальных ключевых слов, которые станут основополагающими элементами анимации. Какое слово кажется вам наиболее аутентичным и привлекательным? Слова могут измениться в процессе, но по крайней мере вам будет с чего начать.
Когда мы взялись за проект UFC.TV для R/GA, наша команда первым делом погрузилась в руководство по корпоративному стилю и философию бренда. Было очень важно задействовать такие понятия как дисциплина, атлетичность, тренировки и уважение. Было очень важно, чтобы рассказывая о событиях, наши копирайтеры делали акцент на их эпичности, чтобы при создании интересных историй акцентировалось внимание на бойцах и их жизни, а особо выделялось то, что эти бои являются кульминацией многих лет тренировок и самоотверженности.
Мы хотели, чтобы в визуальной составляющей ощущалась продуманность и инновационность: бойцы должны восприниматься как герои и яркие личности. Чтобы дизайн был динамичным, команда изучала элементы линейной графики и улучшала отдельные моменты опыта. Конечный результат оказался свежим, инновационным и как бы погружал пользователя в опыт. Эти ключевые слова помогли нам передать фундаментальные принципы анимации: сильный, быстрый и продуманный. Образец прототипа возможного опыта адаптации пользователей, созданный с учетом фундаментальных принципов анимации «сильный, быстрый и продуманный». Выбранный элемент выступает вперед, полоса загрузки быстро продвигается и элементы быстро сменяются шаг за шагом.
Сильный: Создавая движение элементов, мы черпали вдохновение в атлетичности. Иногда анимация может напомнить вам внезапный быстрый удар или выпад.
Быстрый: Движения бойцов — быстрые и точные. Представьте себе резкое ускорение и резкое замедление, чтобы реализовать такое ощущение в анимации.
Продуманный: UFC.TV — премиум-сервис, который по нашему мнению должен быть тщательно разработанным. Почему выгодно иметь свое видение анимации для бренда
Если начать с разработки видения, то это поможет вам в трех пунктах: коммуникация, мотивация и целостность. Базовые принципы анимации помогут вашей команде выстроить диалог, а также лучше передать опыт, который вы пытаетесь создать вместе со своим клиентом (а они будут только рады этому, потому что тоже начнут лучше представлять опыт). А когда вы начнете заниматься специфическими деталями дизайна и создавать прототипы микровзаимодействий, они и сами помогут вам обосновывать те дизайнерские решения, которые будут казаться правильными. В итоге, каждое взаимодействие будет ощущаться связанным с остальными.
Упражнение: попробуйте сформировать свое видение того, какие у приведенных ниже брендов могут быть базовые принципы анимации. Если не хотите работать именно с этими брендами, выберите три других бренда. Возможно, с некоторыми брендами работать будет проще, принципы будут очевиднее. Но на самом деле, мы работаем со множеством брендов, для которых определить базовые принципы анимации очень и очень сложно. Не сдавайтесь и помните, что не всегда нужны нестандартные взаимодействия. Однако для работы в команде это задание может оказаться настоящим вызовом. Вот одна из версий разработки базовых принципов анимации. Проверьте, совпадают ли ваши наработки с этим, или наоборот отличаются. Ikea: умный, минималистичный, имеющий направление. FedEx: точный, оперативный, вызывающий чувство благодарности. Patagonia: осмотрительный, сильный, вызывающий необыкновенные ощущения. Это хорошее упражнение: идеи можно обговаривать со своей командой, с клиентами, а в идеале тестировать на пользователях. Снаряжение для альпинизма Patagonia. Фотограф Майки Шефер.
Несколько вещей, которые вдохновили меня во время этого упражнения: опыт розничной торговли компании Ikea (простой и непрерывный процесс во всем) и их минималистичные и дружелюбные инструкции по сборке мебели. Есть что-то чудесное в том, как они делают красоту и восторг доступными массовому покупателю.
Цель компании FedEx — сноровка и точность. Ассоциации бренда связаны прежде всего с простотой, оптимизацией, изобретательностью, связью, уверенностью и персональным подходом. Patagonia— здесь больше неопределенности. Лично меня вдохновляет их философия и всё это ощущение исследования мира и чуда.
У них очень простой продукт, он создан для «тихих видов спорта» (то есть для таких, где не требуется моторов или нет ликующей толпы), как например, альпинизм, катание на лыжах, серфинг и бег по пересеченной местности. Их вдохновляют такие моменты, когда мы чувствуем связь с природой. К чему ещё можно обратиться, чтобы получить информацию, которая требуется для создания взаимодействия? Применяем анимацию на практике: моменты бренда и поведение бренда
Теперь, когда вы прилично разбираетесь в том, как по вашему мнению должен двигаться и вести себя ваш бренд, как это применить на практике? В начале процесса нужно подумать о продукте или услуге, которые вы собираетесь разрабатывать.
Начните с того, зачем вообще вы создаете этот продукт или услугу (то есть, какова главная проблема, которую вы пытаетесь решить)?
Где ваши пользователи будут проводить большую часть своего времени?
Какие чувства вы хотите у них вызвать?
Я часто начинаю с того, что определяю некоторые наиболее важные моменты и процессы, которые заполнят опыт. Наша команда также пытается разобраться в том, какие моменты пользовательского опыта позволят выделить эту услугу из ряда ей подобных, сделают её уникальной и привлекательной (например, мы уже раньше говорили о домашнем экране Uber, на котором показаны автомобили вокруг места нахождения пользователя и расположена функция «поездки»).
Такие наиболее важные части опыта мы называем моментами бренда (Branded Moments). А все, что находится между этими моментами, должно отражать поведение бренда (Branded Behavior). И то, и другое должно создаваться на основе базовых принципов анимации разработанных для вашего бренда. Поведение бренда
Давайте начнем с поведения бренда. В целом оно охватывает все микровзаимодействия внутри опыта, который вы создаете: те моменты, где вы могли бы применить UX-хореографию, например, обеспечить обратную связь пользователям, намекнуть на то, что они могли бы сделать или куда пойти дальше с помощью опережающей связи (Feedforward), позволить им познакомиться с тем, как они перешли на эту страницу и куда могут пойти дальше с помощью пространственного обзора (Spatial Awareness), или выделить наиболее важные элементы экрана, чтобы направить внимание пользователя (User Focus).
Сюда же относятся и все мельчайшие тонкости любых других переходов и промежуточных состояний, например, наведение мышкой на ссылку и переход по ней. Ваша цель на этом этапе — начать применять и совершенствовать свои базовые принципы анимации в отношении всех микровзаимодействий, чтобы добиться ощущения целостности и внести больше конкретных практических советов в руководство.
При создании каждого экрана и процесса вам нужно определить их цель, что вы пытаетесь передать пользователям и что будет для них главной необходимостью. Я обнаружила, что полезно вести журнал регистрации всех типов микровзаимодействий, с которыми мы сталкиваемся при создании опыта. Это образец того, как может выглядеть журнал регистрации взаимодействий (взят из нашей работы над UFC), и как можно начать группировать похожие взаимодействия в глобальные и, наоборот, характерные только для этой страницы элементы.
Начинайте с очень подробного списка, затем сужайте его. Это поможет вам сгруппировать те элементы, которые требуют одинаковых действий. Например, диалоги. Очень важно в это же самое время тесно работать визуальными дизайнерами (если конечно, вы уже самостоятельно не работаете в этом направлении) — часто то, что вы сделали в макете, будет выглядеть или действовать не так, как вы себе представляли, после того, как визуальный дизайнер улучшит общую картину. Вам стоит работать вместе, чтобы своевременно озвучивать точно такое выполнение анимации, которое вы хотели бы видеть. Пример поведения бренда Airbnb. Каждая точка взаимодействия погружает в опыт, кажется цельной, дружелюбной и относится к поиску, а в результате весь опыт кажется связным. Разрабатываем руководство по анимации для характерного для бренда стиля поведения
После того, как вы начали группировать категории взаимодействий, наступает момент, когда можно начать добавлять более конкретные технические указания к своим базовым принципам анимации, например, какие-нибудь упрощения, скорость переходов, изменение прозрачности или масштаба. В конце концов, маловероятно, что вы сможете создать прототип для каждого микровзаимодействия в своем продукте, но если вы создадите прототип шаблона, то вам будет легче проверить как один и тот же прием можно применять к разным моментам.
Так что теперь, когда вы пересмотрели свой список взаимодействий, вам может понадобиться только один прототип шаблона на каждую категорию. Когда вы создаете прототип, время от времени отвлекайтесь и спрашивайте себя, соответствует ли разрабатываемое вами взаимодействие вашим базовым принципам анимации (например, ощущается ли взаимодействие сильным? Быстрым? Продуманным?).
Полезно также попросить кого-нибудь со стороны проверить ваши прототипы. Тот самый метод, который вы начнете применять, будет началом для обширных руководств по анимации и взаимодействиям бренда. Эти руководства также станут рекомендациями, которые команда разработчиков сможет использовать, если встретится с другими сценариями, в которых требуется развитие анимационных стандартов. Конструирование на будущее решает. Так формируется руководство, а глобальная интерпретация анимации дополняется специфическими для бренда признаками.
Одно важное разъяснение: когда вы смотрите на весь этот большой список ключевых моментов, которые вы устанавливаете для того, чтобы применять их дальше при создании анимации, многие из них вам могут показаться очень условными. Возможно, они могут показаться вам скучными. Не пытайтесь переделывать их с заведомо завышенными требованиями, и не надо добавлять дополнительную анимацию, пока все эти моменты не покажутся вам наглядными и крутыми.
Анимация никогда не должна мешать пользователю, и лучший дизайн — всё ещё невидимый дизайн. Вы увидите, что когда пользователи начнут взаимодействовать с вашей услугой всё чаще и чаще, микровзаимодействия, с которыми они будут сталкиваться, будут усложняться.
Со временем эти тончайшие моменты начнут формировать идентичность бренда, и поведение бренда станет очевидным. Так же как вы начинаете перенимать манеры человека, которого вы очень давно знаете, так же вы начнете перенимать поведение бренда.
(По разным моментам становится видно, что они были созданы по единой технологии) Моменты бренда
Будь то начало процесса разработки, или если вы просто начали лучше понимать, что вам нужно в самом процессе, вы начнете видеть моменты в своем опыте, которые будут вам казаться ключевыми на пути к достижению основной цели. Это момент, который должен быть привлекательным и уникальным, соответствовать идентичности вашего бренда. А может быть вы, наоборот, хотите создать что-то удивительное или вызывающее восторг, чтобы сделать ваш опыт запоминающимся. Это мы и называем моментами бренда. Каждый из этих примеров становится ключевой частью идентичности бренда. Интуитивный диск управления температурой от компании Nest, восхитительная чашка, полная бонусных звездочек от Starbucks, и причудливые привидения от Snapchat, спрятанные то тут, то там.
Эти моменты и возникают из ваших базовых принципов анимации, но существуют возможности выходить за рамки своих стандартов. Возможно, ключевые моменты становятся более иллюстративными, но это делается исключительно ради идентичности и опыта.
Проведите работу с вашей командой и клиентом, оцените, что по вашему мнению будет важнее всего там, где вы можете оказать наибольшее влияние. Опять же, спросите себя, что будет актуальным, аутентичным и истинным для бренда, и какие чувства вы хотите вызвать у пользователя в этот момент.
Если взять те же три бренда, что и раньше, какие возможности есть, чтобы создать для них моменты бренда? Для FedEx это может быть процесс отслеживания посылки. Для Ikea — онлайн-инструкции по сборке мебели. А для Patagonia — элемент, внедренный в опыт покупки, например, навигация по продуктам или просмотр контента, который демонстрирует товар в действии. Как бы вы изменили эти моменты, чтобы создать что-то привлекательное?
[embedded content]
Страница с видеороликами UFC, где размещены прямые трансляции и повторы прошлых событий — то место, где пользователи проводят большую часть своего времени, большая часть их опыта. Внутри этих селективных модулей на самой странице мы хотели уделить дополнительное внимание таким мелочам, как, например, стирается статистика бойцов во время прямых трансляций между поединками, как перемещаются имена бойцов и как фанаты могут предсказать победителей. Заключение
Проектирование взаимодействий с брендом должно быть цикличным процессом. Развиваясь, выделите время и оцените опыт, который вы создаете, и то, как лучше разработать стиль бренда. Подумайте, какие чувства у пользователей вы хотите вызывать и что вы хотели бы услышать от них об опыте. И наконец, не забывайте иногда делать шаг в сторону и редактировать продукт: большое количество ярких деталей может встать на пути у пользователя.
Но надо признаться, что не всегда этот процесс будет простым и ясным. Может быть будет и так, что работая над большим и устоявшимся брендом, вам удастся концентрироваться только на маленьких направлениях работы. Не дайте этому помешать вам, лучше соберите все, что вы знаете о деятельности бренда до настоящего времени в плане разработки руководств по взаимодействию, и если получится, передавайте это же видение бренда в своей небольшой части работы. Чем раньше вы начнете общаться с командой и брендом, тем более успешной будет ваша команда в долгосрочной перспективе. Смотрим в будущее
Как уже упоминалось ранее, анимация — это всего лишь один аспект огромной истории: экраны могут быть только частью уравнения. Роль UX-дизайнеров постоянно меняется, так как мы пытаемся идти в ногу с возникающими трендами и технологиями цифрового опыта.
Будь то боты, голосовое управление, виртуальная реальность и опыт погружения в нее, крошечные интерфейсы умных часов или окружающая среда дополненная технологиями, мы лучше всего подготовлены к тому, чтобы начать соединять точки и предоставить всестороннее видение того, как можно принести пользу и брендам и покупателям. Проектирование продуктов для бренда через взаимодействие поможет нам создать упорядоченный, целостный и знакомый опыт в каждой ключевой точке, сделав его при этом аутентичным и индивидуальным.
В избранное Руководство по сборке и эксплуатации Ikea: минималистичное, забавное и интуитивно понятное каждому. Какие основные аспекты стиля культового бренда можно использовать, чтобы направить его движение и поведение?
Несколько лет назад я начала работать с анимационным дизайном. Это было время, когда в нашей области не было движения: UX-дизайнеры работали со статичными элементами, тонули в примечаниях, а наш основной рабочий инструмент мог предложить нам только простые, кликабельные переходы.
Я знала, что анимационный дизайн очень важен для нашей профессии, но я не понимала, с какой стороны к нему подойти. После тщательного анализа десятков примеров использования анимации в цифровой сфере, я увидела модель, которую в определенный момент можно было бы использовать. Я стала лучше понимать, как анимация облегчает передачу информации через пользовательский опыт, что она уменьшает когнитивную нагрузку, делает UI более реалистичным и осязаемым, и в целом помогает отшлифовать пользовательский опыт.
Я сформировала принципы UX-хореографии, которые дизайнеры могли бы использовать, чтобы помочь нам разобраться, когда, почему и как внедрять анимацию.
За последние год или два UX-дизайнеры добились огромных успехов. В настоящее время в нашем распоряжении находятся десятки инструментов для разработки прототипов, которые просто интегрируются и которые можно очень быстро освоить, а следовательно их проще внедрить в рабочий процесс.
Очень полезно, что многие дизайнеры делятся своими советами и самыми удачными примерами анимационного дизайна, поэтому сейчас доступно много качественного материала, на котором можно учиться. В целом, мне кажется, что дизайнеры теперь лучше осознают, что значат дизайн, анимация и взаимодействие. Так что продолжайте и дальше делать то, что вы делаете. Бренду нужна идентичность
Несмотря на прогресс в создании прототипов, у анимации есть один недостаток: за реализацией взаимодействия теряется идентичность бренда. Сейчас в нашем распоряжении так много нестандартных способов перехода, а мы часто застреваем на одних и тех же, пусть и хороших, приемах: ведь так просто скопировать то, что уже есть и работает в других компаниях. Сейчас как никогда важно, чтобы бренды и дизайнеры уделили больше внимания создаваемым нами интерфейсам взаимодействия бренда с потребителями с точки зрения его отличительных особенностей и идентичности.
Лично я столкнулась с той же проблемой, когда некоторое время пыталась интегрировать принципы UX-хореографии в свой рабочий процесс, а также продолжала оценивать и любой другой опыт взаимодействия, который мне встречался. Я начала понимать, что у принципов есть иерархия, а именно, что важно начинать с характерного для бренда стиля изложения материала и с того, чтобы заранее создать свое видение поведения и тона «персонажа».
Если это сделать, то получится добиться сплоченности, разработать мотивацию и порядок коммуникации между командами (подробнее на эту тему чуть позже). Как творческая команда определяет стиль изложения для текстовой рекламы, создает цветопробу для графического материала, проводит шрифтовую работу, формирует стиль используемых изображений и иконографии, также и за разработкой взаимодействий должен стоять такой же уровень работы. Темы, которые мы обсудим в этой статье:
Почему нужно разрабатывать собственное видение поведения своего бренда, и в какой части творческого процесса следует начать думать об этом.
Разработка фундаментальных принципов анимации бренда, под которые будет подгоняться последующая разработка любых взаимодействий.
Создание комплексного руководства по анимации, чтобы внедрить единый стиль поведения.
Поиск привлекательных моментов в опыте, которые выходят за рамки стандартных требований.
Как вносить исправления в то, что уже было запущено, и строить планы на будущее.
Если бы бренд говорил с нами, что бы он сказал? Если бы бренд мог двигаться, как бы это было? Делаем анимацию и взаимодействие привлекательными
Почему один сервис лучше, чем другой? И почему сервис может казаться уникальным в сравнении с другими? Кроме создания продукта и услуг интуитивно понятными, простыми и приятными в использовании, нам приходится ещё и оценивать, что для брендов является актуальным, аутентичным и представляет истинную ценность.
И правда, самым очевидным и подходящим решением кажется открывать приложение с карты, на которой видно расположение ближайших автомобилей. Но какой из этих UI показывает знание бренда о том, что отличает его услугу и делает её более привлекательной в сравнении с остальными? Как это можно понять по UI? Честь и хвала Uber за то, что недавно основательно пересмотрела свой опыт и проделала серьезную работу над своими поездками:
Характерные для бренда анимация и взаимодействие — детали более высокого уровня, которые могут влиять на опыт и на то, как пользователь будет воспринимать ваш бренд и продукт. И хотя эта статья в основном об анимации, теперь более чем когда-либо, пользователи могут быть привлечены брендами через десятки различных точек взаимодействия, которых раньше просто не существовало: боты, VR, управление голосом, расширения Slack — список будет только расти.
Анимация и экраны — только одна часть уравнения. Пользователи ожидают получить тот же уровень услуги вне зависимости от того, где они находятся. Они ждут последовательности и от бренда. Чтобы добиться последовательности и аутентичности, команды должны выработать основательную точку зрения на стратегию поведения своих брендов, на то, какую уникальную ценность несет в себе их услуга или продукт, и какие чувства должен вызывать их бренд у пользователей. Когда мы должны начинать думать об анимации бренда и с чего начинать?
Если коротко — с самого начала. Более подробный ответ: вам придется проводить множество итераций в течение всего творческого процесса. Возможно, вам не удастся понять, как создавать анимацию, пока вы не начнете бессистемно разрабатывать некоторые процессы и лучше понимать свои слабые стороны, но никогда не будет слишком рано начать разрабатывать свое видение поведения бренда.
Я выяснила, что лучше всего в самом начале творческого процесса, когда все творческие отделы ещё работают вместе, погрузиться в такие темы как бренд, философия и цели. Легче всего начать с любых руководств по корпоративному стилю. Как бренд позиционирует себя в настоящее время? Каковы его ценности? Какие чувства у пользователей бренд хотел бы вызывать? И, что более важно, хочет ли бренд, чтобы ваша команда изменила его, сделала из него что-то новое?
После того, как мы как следует разберемся с этими вопросами, у нас появится возможность сделать шаг назад и черпать вдохновение из опытов окружающих нас брендов. Теперь главное мыслить широко и смотреть на отклонения от нормы. Есть ли что-то ещё, из чего вы можете черпать вдохновение, например, опыт розничной торговли, физические продукты, историческое влияние бренда, стиль изложения материала или более масштабная философия? Начните улавливать ключевые слова, которые приходят на ум.
[embedded content]
Один из самых моих любимых примеров: язык дизайна IBM «Машины в действии». Команда разработала микровзаимодействия, наблюдая за движениями механизмов и тем, как их движения соотносились с продуктивными функциями. Создаем фундаментальные принципы анимации
Другие творческие дисциплины начинаются с определения своего видения того, каким должен быть стиль текста, цвет, шрифты, стиль иллюстраций и иконография. Теперь и вам выдался шанс начать формировать свое видение поведения бренда. Черпайте вдохновение из ключевых слов, которые придумают члены вашей команды или которые вы подглядели у другого бренда.
Эти ключевые слова могут отличаться от того, что есть в основном руководстве по корпоративному стилю, и они и должны отличаться — прежде всего потому, что это должны быть прилагательные, которые описывают действие (то есть, динамика бренда не может быть описана словами вроде «рационально функционирующий»).
Цель — сузить список до трех уникальных ключевых слов, которые станут основополагающими элементами анимации. Какое слово кажется вам наиболее аутентичным и привлекательным? Слова могут измениться в процессе, но по крайней мере вам будет с чего начать.
Когда мы взялись за проект UFC.TV для R/GA, наша команда первым делом погрузилась в руководство по корпоративному стилю и философию бренда. Было очень важно задействовать такие понятия как дисциплина, атлетичность, тренировки и уважение. Было очень важно, чтобы рассказывая о событиях, наши копирайтеры делали акцент на их эпичности, чтобы при создании интересных историй акцентировалось внимание на бойцах и их жизни, а особо выделялось то, что эти бои являются кульминацией многих лет тренировок и самоотверженности.
Мы хотели, чтобы в визуальной составляющей ощущалась продуманность и инновационность: бойцы должны восприниматься как герои и яркие личности. Чтобы дизайн был динамичным, команда изучала элементы линейной графики и улучшала отдельные моменты опыта. Конечный результат оказался свежим, инновационным и как бы погружал пользователя в опыт. Эти ключевые слова помогли нам передать фундаментальные принципы анимации: сильный, быстрый и продуманный. Образец прототипа возможного опыта адаптации пользователей, созданный с учетом фундаментальных принципов анимации «сильный, быстрый и продуманный». Выбранный элемент выступает вперед, полоса загрузки быстро продвигается и элементы быстро сменяются шаг за шагом.
Сильный: Создавая движение элементов, мы черпали вдохновение в атлетичности. Иногда анимация может напомнить вам внезапный быстрый удар или выпад.
Быстрый: Движения бойцов — быстрые и точные. Представьте себе резкое ускорение и резкое замедление, чтобы реализовать такое ощущение в анимации.
Продуманный: UFC.TV — премиум-сервис, который по нашему мнению должен быть тщательно разработанным. Почему выгодно иметь свое видение анимации для бренда
Если начать с разработки видения, то это поможет вам в трех пунктах: коммуникация, мотивация и целостность. Базовые принципы анимации помогут вашей команде выстроить диалог, а также лучше передать опыт, который вы пытаетесь создать вместе со своим клиентом (а они будут только рады этому, потому что тоже начнут лучше представлять опыт). А когда вы начнете заниматься специфическими деталями дизайна и создавать прототипы микровзаимодействий, они и сами помогут вам обосновывать те дизайнерские решения, которые будут казаться правильными. В итоге, каждое взаимодействие будет ощущаться связанным с остальными.
Упражнение: попробуйте сформировать свое видение того, какие у приведенных ниже брендов могут быть базовые принципы анимации. Если не хотите работать именно с этими брендами, выберите три других бренда. Возможно, с некоторыми брендами работать будет проще, принципы будут очевиднее. Но на самом деле, мы работаем со множеством брендов, для которых определить базовые принципы анимации очень и очень сложно. Не сдавайтесь и помните, что не всегда нужны нестандартные взаимодействия. Однако для работы в команде это задание может оказаться настоящим вызовом. Вот одна из версий разработки базовых принципов анимации. Проверьте, совпадают ли ваши наработки с этим, или наоборот отличаются. Ikea: умный, минималистичный, имеющий направление. FedEx: точный, оперативный, вызывающий чувство благодарности. Patagonia: осмотрительный, сильный, вызывающий необыкновенные ощущения. Это хорошее упражнение: идеи можно обговаривать со своей командой, с клиентами, а в идеале тестировать на пользователях. Снаряжение для альпинизма Patagonia. Фотограф Майки Шефер.
Несколько вещей, которые вдохновили меня во время этого упражнения: опыт розничной торговли компании Ikea (простой и непрерывный процесс во всем) и их минималистичные и дружелюбные инструкции по сборке мебели. Есть что-то чудесное в том, как они делают красоту и восторг доступными массовому покупателю.
Цель компании FedEx — сноровка и точность. Ассоциации бренда связаны прежде всего с простотой, оптимизацией, изобретательностью, связью, уверенностью и персональным подходом. Patagonia— здесь больше неопределенности. Лично меня вдохновляет их философия и всё это ощущение исследования мира и чуда.
У них очень простой продукт, он создан для «тихих видов спорта» (то есть для таких, где не требуется моторов или нет ликующей толпы), как например, альпинизм, катание на лыжах, серфинг и бег по пересеченной местности. Их вдохновляют такие моменты, когда мы чувствуем связь с природой. К чему ещё можно обратиться, чтобы получить информацию, которая требуется для создания взаимодействия? Применяем анимацию на практике: моменты бренда и поведение бренда
Теперь, когда вы прилично разбираетесь в том, как по вашему мнению должен двигаться и вести себя ваш бренд, как это применить на практике? В начале процесса нужно подумать о продукте или услуге, которые вы собираетесь разрабатывать.
Начните с того, зачем вообще вы создаете этот продукт или услугу (то есть, какова главная проблема, которую вы пытаетесь решить)?
Где ваши пользователи будут проводить большую часть своего времени?
Какие чувства вы хотите у них вызвать?
Я часто начинаю с того, что определяю некоторые наиболее важные моменты и процессы, которые заполнят опыт. Наша команда также пытается разобраться в том, какие моменты пользовательского опыта позволят выделить эту услугу из ряда ей подобных, сделают её уникальной и привлекательной (например, мы уже раньше говорили о домашнем экране Uber, на котором показаны автомобили вокруг места нахождения пользователя и расположена функция «поездки»).
Такие наиболее важные части опыта мы называем моментами бренда (Branded Moments). А все, что находится между этими моментами, должно отражать поведение бренда (Branded Behavior). И то, и другое должно создаваться на основе базовых принципов анимации разработанных для вашего бренда. Поведение бренда
Давайте начнем с поведения бренда. В целом оно охватывает все микровзаимодействия внутри опыта, который вы создаете: те моменты, где вы могли бы применить UX-хореографию, например, обеспечить обратную связь пользователям, намекнуть на то, что они могли бы сделать или куда пойти дальше с помощью опережающей связи (Feedforward), позволить им познакомиться с тем, как они перешли на эту страницу и куда могут пойти дальше с помощью пространственного обзора (Spatial Awareness), или выделить наиболее важные элементы экрана, чтобы направить внимание пользователя (User Focus).
Сюда же относятся и все мельчайшие тонкости любых других переходов и промежуточных состояний, например, наведение мышкой на ссылку и переход по ней. Ваша цель на этом этапе — начать применять и совершенствовать свои базовые принципы анимации в отношении всех микровзаимодействий, чтобы добиться ощущения целостности и внести больше конкретных практических советов в руководство.
При создании каждого экрана и процесса вам нужно определить их цель, что вы пытаетесь передать пользователям и что будет для них главной необходимостью. Я обнаружила, что полезно вести журнал регистрации всех типов микровзаимодействий, с которыми мы сталкиваемся при создании опыта. Это образец того, как может выглядеть журнал регистрации взаимодействий (взят из нашей работы над UFC), и как можно начать группировать похожие взаимодействия в глобальные и, наоборот, характерные только для этой страницы элементы.
Начинайте с очень подробного списка, затем сужайте его. Это поможет вам сгруппировать те элементы, которые требуют одинаковых действий. Например, диалоги. Очень важно в это же самое время тесно работать визуальными дизайнерами (если конечно, вы уже самостоятельно не работаете в этом направлении) — часто то, что вы сделали в макете, будет выглядеть или действовать не так, как вы себе представляли, после того, как визуальный дизайнер улучшит общую картину. Вам стоит работать вместе, чтобы своевременно озвучивать точно такое выполнение анимации, которое вы хотели бы видеть. Пример поведения бренда Airbnb. Каждая точка взаимодействия погружает в опыт, кажется цельной, дружелюбной и относится к поиску, а в результате весь опыт кажется связным. Разрабатываем руководство по анимации для характерного для бренда стиля поведения
После того, как вы начали группировать категории взаимодействий, наступает момент, когда можно начать добавлять более конкретные технические указания к своим базовым принципам анимации, например, какие-нибудь упрощения, скорость переходов, изменение прозрачности или масштаба. В конце концов, маловероятно, что вы сможете создать прототип для каждого микровзаимодействия в своем продукте, но если вы создадите прототип шаблона, то вам будет легче проверить как один и тот же прием можно применять к разным моментам.
Так что теперь, когда вы пересмотрели свой список взаимодействий, вам может понадобиться только один прототип шаблона на каждую категорию. Когда вы создаете прототип, время от времени отвлекайтесь и спрашивайте себя, соответствует ли разрабатываемое вами взаимодействие вашим базовым принципам анимации (например, ощущается ли взаимодействие сильным? Быстрым? Продуманным?).
Полезно также попросить кого-нибудь со стороны проверить ваши прототипы. Тот самый метод, который вы начнете применять, будет началом для обширных руководств по анимации и взаимодействиям бренда. Эти руководства также станут рекомендациями, которые команда разработчиков сможет использовать, если встретится с другими сценариями, в которых требуется развитие анимационных стандартов. Конструирование на будущее решает. Так формируется руководство, а глобальная интерпретация анимации дополняется специфическими для бренда признаками.
Одно важное разъяснение: когда вы смотрите на весь этот большой список ключевых моментов, которые вы устанавливаете для того, чтобы применять их дальше при создании анимации, многие из них вам могут показаться очень условными. Возможно, они могут показаться вам скучными. Не пытайтесь переделывать их с заведомо завышенными требованиями, и не надо добавлять дополнительную анимацию, пока все эти моменты не покажутся вам наглядными и крутыми.
Анимация никогда не должна мешать пользователю, и лучший дизайн — всё ещё невидимый дизайн. Вы увидите, что когда пользователи начнут взаимодействовать с вашей услугой всё чаще и чаще, микровзаимодействия, с которыми они будут сталкиваться, будут усложняться.
Со временем эти тончайшие моменты начнут формировать идентичность бренда, и поведение бренда станет очевидным. Так же как вы начинаете перенимать манеры человека, которого вы очень давно знаете, так же вы начнете перенимать поведение бренда.
(По разным моментам становится видно, что они были созданы по единой технологии) Моменты бренда
Будь то начало процесса разработки, или если вы просто начали лучше понимать, что вам нужно в самом процессе, вы начнете видеть моменты в своем опыте, которые будут вам казаться ключевыми на пути к достижению основной цели. Это момент, который должен быть привлекательным и уникальным, соответствовать идентичности вашего бренда. А может быть вы, наоборот, хотите создать что-то удивительное или вызывающее восторг, чтобы сделать ваш опыт запоминающимся. Это мы и называем моментами бренда. Каждый из этих примеров становится ключевой частью идентичности бренда. Интуитивный диск управления температурой от компании Nest, восхитительная чашка, полная бонусных звездочек от Starbucks, и причудливые привидения от Snapchat, спрятанные то тут, то там.
Эти моменты и возникают из ваших базовых принципов анимации, но существуют возможности выходить за рамки своих стандартов. Возможно, ключевые моменты становятся более иллюстративными, но это делается исключительно ради идентичности и опыта.
Проведите работу с вашей командой и клиентом, оцените, что по вашему мнению будет важнее всего там, где вы можете оказать наибольшее влияние. Опять же, спросите себя, что будет актуальным, аутентичным и истинным для бренда, и какие чувства вы хотите вызвать у пользователя в этот момент.
Если взять те же три бренда, что и раньше, какие возможности есть, чтобы создать для них моменты бренда? Для FedEx это может быть процесс отслеживания посылки. Для Ikea — онлайн-инструкции по сборке мебели. А для Patagonia — элемент, внедренный в опыт покупки, например, навигация по продуктам или просмотр контента, который демонстрирует товар в действии. Как бы вы изменили эти моменты, чтобы создать что-то привлекательное?
[embedded content]
Страница с видеороликами UFC, где размещены прямые трансляции и повторы прошлых событий — то место, где пользователи проводят большую часть своего времени, большая часть их опыта. Внутри этих селективных модулей на самой странице мы хотели уделить дополнительное внимание таким мелочам, как, например, стирается статистика бойцов во время прямых трансляций между поединками, как перемещаются имена бойцов и как фанаты могут предсказать победителей. Заключение
Проектирование взаимодействий с брендом должно быть цикличным процессом. Развиваясь, выделите время и оцените опыт, который вы создаете, и то, как лучше разработать стиль бренда. Подумайте, какие чувства у пользователей вы хотите вызывать и что вы хотели бы услышать от них об опыте. И наконец, не забывайте иногда делать шаг в сторону и редактировать продукт: большое количество ярких деталей может встать на пути у пользователя.
Но надо признаться, что не всегда этот процесс будет простым и ясным. Может быть будет и так, что работая над большим и устоявшимся брендом, вам удастся концентрироваться только на маленьких направлениях работы. Не дайте этому помешать вам, лучше соберите все, что вы знаете о деятельности бренда до настоящего времени в плане разработки руководств по взаимодействию, и если получится, передавайте это же видение бренда в своей небольшой части работы. Чем раньше вы начнете общаться с командой и брендом, тем более успешной будет ваша команда в долгосрочной перспективе. Смотрим в будущее
Как уже упоминалось ранее, анимация — это всего лишь один аспект огромной истории: экраны могут быть только частью уравнения. Роль UX-дизайнеров постоянно меняется, так как мы пытаемся идти в ногу с возникающими трендами и технологиями цифрового опыта.
Будь то боты, голосовое управление, виртуальная реальность и опыт погружения в нее, крошечные интерфейсы умных часов или окружающая среда дополненная технологиями, мы лучше всего подготовлены к тому, чтобы начать соединять точки и предоставить всестороннее видение того, как можно принести пользу и брендам и покупателям. Проектирование продуктов для бренда через взаимодействие поможет нам создать упорядоченный, целостный и знакомый опыт в каждой ключевой точке, сделав его при этом аутентичным и индивидуальным.
Ещё новости по теме:
18:20