Содержание
Когда в апреле я ушла с работы, у меня был план, что с помощью своих изящных приемов с CSS3-анимацией я займу должность фронтэнд-разработчика в одном из нью-йоркских агентств. Но по мере того, как я выступала всё на большем количестве конференций и отвечала на вопросы на собеседованиях во многих компаниях, поняла, что больше никогда не смогу получать удовольствие от работы в качестве обычного верстальщика. Меня не восхищает Angular.js. Я не хочу быть стражем еще одного огромного хранилища таблиц стилей. Я не строю ночами напролет расширения Sass (ну, за исключением того, который я строила для расчета CSS-анимации ключёвого кадра).
Только одна сфера разбработки меня действительно пугала: взаимодействие. Шаблоны, SVG, API веб-аудио, webGL. CSS3-анимация была только началом моего увлечения. Я начала смотреть на браузер как на нечто большее, чем просто приложение для чтения документов, а на интернет — как на нечто большее, чем набор связанных страниц.
С помощью HTML мы рассказываем истории и передаем огромное количество данных, а анимация помогает нам делать это лучше. Так же, как иерархия ведёт людей по контенту, анимация ведёт их через взаимодействия, помогая понять связи, структуру, причину и результат. Анимация — это не то, что неплохо бы иметь. Это важная часть коммуникации.
Другой слой информации
Анимация — это мощный инструмент, так как она может создавать «иллюзию жизни». Она учитывает такие физические понятия, как сила тяжести, реакция, сжатие, растяжение и время. Именно поэтому диснеевские анимированные шедевры выглядят и «чувствуются» лучше, чемдешёвые изобретения их конкурентов. Реальность полна чувствительных сигналов, которые сообщают нашему мозгу то, где мы находимся и что нас окружает. Перевод даже части этих данных в двухмерную среду поможет пользователям понять больше информации о том, на что они смотрят и как это относится к пространству, в котором они находится.
С развитием плоского дизайна и вытекающей из него задержки в развитии UX, мы увидели, насколько опасным может быть исключение визуальных подсказок из компонентов сайта. Анимацию можно применять с противоположной целью. При правильном использовании, анимация может указывать на:
Причинно-следственную связь
Когда что-то одно происходит перед другим, наш мозг осознает, что эти две вещи связаны, и что первое привело ко второму. Например, вы нажали кнопку отправки, и форма исчезла: понимаете, что это вы заставили форму отреагировать, а не таймер, который по случайному совпадению был настроен на то же время, в которое вы нажали на кнопку.
Обратную связь
Если причинно-следственная связь между двумя событиями может быть очевидна и без человеческого вмешательства (например, исчезновение счетчика загрузки, когда фильм готов к проигрыванию), то обратная связь – это когда что-либо указывает на то, что действия пользователя привели к реакции (например, кнопки при клике выглядят, как нажатые).
Такая анимированная скевоморфная реакция на действие пользователя сообщает ему, что он нажал кнопку (помните как люди нажимают кнопки оплаты по несколько раз?).
Взаимоотношения
Анимация помогает подчеркнуть места, где вещи относятся друг к другу иерархически, пространственно, и какие из них вам доступны. Например, когда на iPhone с iOS7 вы открываете приложение, оно появляется из иконки вместо того, чтобы сменять экран, как в iOS6. Таким образом, вы помните, где на главном экране находится ярлык приложения, что упрощает его повторный поиск.
Продвижение:
Анимация может показывать прогресс прохождения какого-либо линейного процесса. Большинство из нас знакомы с таким понятием, как «полоса загрузки». Также это относится к индикатору на GPS-устройстве в приложении с картами, который показывает ваш прогресс в пути. Намного сложнее было бы следовать серии снимков дороги по мере вашего продвижения.
Физику
Показывать то, как реагируют виртуальные вещи в реальном мире — это настоящая скевоморфичность. Например, когда что-либо «падает» вниз экрана, движение будет более реалистичным, если анимация будет набирать скорость, так как падающие объекты ускоряются под действием силы тяжести. Когда действие «ощущается» реально, оно помогает пользователям поддаться вашим анимациям.
Переход
Это поистине человеческое изобретение: плавный переход от одного кадра к другому в фильме не имеет природного прототипа. Однако, переходы бесценны для отображения изменений в установках или задаче, и большинство людей привыкли благодаря телевидению и фильмам, что то, что идет после перехода, более или менее связано с тем, что было до.
Анимация как улучшение
Когда Coin запустили свой сайт для предварительных заказов, тысячи людей приготовили кошельки, чтобы принять в этом участие. Наслаждаясь анимированными демонстрациями сайта на разных разрешениях, я заметила, как мало здесь маркетингового копирайтинга — вместо этого тут используется несколько анимаций и видеороликов, которые показывают, а не рассказывают. Оставшийся текст тщательно отобран и не отрывается от общей идеи. Для анимации требуется меньшая скорость загрузки, чем для видео, и меньше участия зрителя: здесь нет кнопок, которые нужно нажимать, она просто появляются по ходу прокрутки.
Эти взаимодействия не ограничиваются сценариями рекламы, как например, у последнего Mac Pro или карандаша от FiftyThree. Даже в случаях с большим количеством рекламного текста, как например в обзоре XBox 360 от Polygon, дополнительная анимация делает контент «более живым», приводя в движение простые штрихованные иллюстрации. В навигации используется тонкая анимация, которая помогает увидеть, в каком месте статьи вы находитесь по отношениюк другим её частям. В New York Times сделали героическую попытку интерактивного повествования, начиная с обзора Олимпийских игр 2012 и заканчивая статьями вроде «Игры акулы и малька».
От мониторов к сенсорным экранам и обратно
Когда память ОЗУ измерялась в мегабайтах, анимация не была привычным явлением за пределами игр (и даже там она была, в основном, сырой и примитивной). Пользователи слабо понимали умозрительную картину «до» и «после», выполняя такие действия, как открытие меню. Тогда мозгу приходилось больше работать, чтобы следить за тем, что произошло между нажатием кнопки и появлением меню. Этот легкий разрыв мог дезориентировать пользователя при переходе от воображения к выполнению задачи. По мере усложнения интерфейсов, этот разрыв увеличивался. Анимация помогала соединить точки между разными состояниями, как сказали в 1993 исследователи взаимодействия человека с компьютером Скотт Хадсон и Джон Стаско:
За счет разгрузочной интерпретации изменений в системе восприятия информации, анимация позволяет пользователю продолжать думать о задаче без необходимости переносить контекст на интерфейс. Исключая внезапные визуальные изменения, анимация снижает шанс того, что пользователь будет удивлен.
Сегодня маленькие и мощные устройства с сенсорными экранами заставляют нас втискивать интерфейс в крошечные пространства — причем, гладко. Именно поэтому мы все чаще полагаемся на вертикальную ось: слои, скользящие панели, стороны, изменение размера. Но такие пространственные отношения довольно сложно осмысливать, используя старый принцип «сравнения снимков», поэтому создание анимации между состояниями «до» и «после» оберегает людей от растерянности и раздражения.
Учитывая распространение компактных устройств, такие шаблоны дизайна вряд ли скоро выйдут из моды. Фактически, устройства с большими экранами адаптируются под них, накладывая информацию и манипулируя ею в трехмерном пространстве — в качестве примера можете посмотреть на новую демо-версию макета Famo.us.
Вымощена благими намерениями: поддержка, производительность и отзывчивость
Такие типы взаимодействия — это последний писк моды. На их разработку и поддержку уходит много времени и денег. Не все браузеры поддерживают CSS-анимацию, SVG-анимацию, элементы Canvas и прочее. И даже если браузер обещает поддержку этих функций, устройства, на которых он запущен, могут быть недостаточно мощными, чтобы обеспечивать полноценную работу. Создатели вашего устройства могут ошибиться. Нет одного решения для всех размеров. Нужно проводить собственное исследование, принимать решения и компенсационные меры.
Наиболее важно знать и применять самые эффективные технологии анимации и тестировать их на реальных устройствах. Если это вообще возможно, проводите эксперименты со всеми устройствами и браузерами, которые могут для этого использоваться. Нет смысла тратить время на взаимодействия, которые не подходят для целевой аудитории.
В некоторой степени, мы можем прибегнуть к помощи нашего старого друга — прогрессивного улучшения. При помощи таких инструментов, как Modernizr, можно выбрать в качестве цели браузеры, которые не поддерживают вашу анимацию, и сделать для них полизаполнение или что-либо статичное, что будет отображаться вместо анимации.
Однако производительность — это реальная проблема, особенно на недостаточно мощных устройствах с экранами с высоким разрешением. Обычно у них голова меньше, чем нужно для тела – их процессоры слишком слабые для того, чтобы достаточно быстро перерисовать экран и избежать искусственности. Эта искусственность убивает драгоценную иллюзию жизни. В таком случае, варианты ограничены:
- Оптимизировать анимацию. Если анимация выглядит искусственно, вернитесь к своим средствам разработки и проанализируйте её временную шкалу. Возможно, вам придётся изменить дизайн, чтобы перерисовка шла быстрее (градиенты и тени делают анимацию значительно сложнее).
- Предложить альтернативу. Если вы оптимизировали всё, что только можно, но все равно остались комбинации устройств и браузеров, которые плохо поддерживают анимацию, делая взаимодействие с интерфейсом непригодным, попробуйте проанализировать эти комбинации. Это даст возможность использовать выборочный подход и предложить для них статичную альтернативу.
- Ориентироваться на определённый сегмент рынка. Некоторые разработчики могут себе позволить обслуживать только определённое количество устройств и браузеров, не беспокоясь о меньшинстве пользователей. Например, разработчикам, которые создают приложения на базе HTML5 для Firefox OS или Kindle Fire, нет смысла переживать о трафике IE8, в то время как разработчикам, работающим с интранетом, где доступ есть только у определенных браузеров, не нужно уделять внимание Android. Бывают случаи, когда предоставление хороших работающих решений большинству предпочтительнее, чем ориентация на меньшинство, поэтому важно анализировать свой трафик. Но, если у вас сильно или даже умеренно разнообразная целевая аудитория, тогда даже ваше меньшинство может стать большинством.
- Не делать этого. Иногда это преждевременно. Иногда мы с пренебрежением вспоминаем напичканные Flash, сложные или бесцельные микросайты, представленные клиентам в таком виде, который моя мама назвала бы «больше денег, чем смысла». И на это есть своя причина. Довольно просто увлечься превращением интернет-пространства в нечто живое. Иногда, мы даже забываем о самом главном — целевой аудитории. Но если фокусировать внимание на наших пользователях, их потребностях, и, в первую очередь, на ограничениях их устройств, можно прийти к рациональным решениям. Они могут отодвинуть веб-анимацию, не давая забыть, что не обязательно делать что-либо только потому, что мы это можем.
Вы все еще хотите быть веб-аниматором?
Будь вы дизайнером или фронтэнд-разработчиком, инвестиции в навыки и теорию анимации помогут вам улучшить интерфейс. К счастью, у старомодной анимации были десятилетия для превращения в вид искусства, полный обучающих материалов и технологий, переданных мастерами.
Одной из таких технологий является раскадровка. Для крупных проектов нужен обобщенный вид большого количества взаимодействий. Диснеевская Студия Анимации первой создала раскадровку: большие движимые пробковые плиты, на которых аниматоры могут приколоть иллюстрации по хронологии событий. Их можно убирать и добавлять по мере повествования, а доску можно перенести в другое место для других команд, которые будут с ней работать. Что касается интернет-пространства, всем обычно хочется построить ветвистую раскадровку путей, которыми может пойти взаимодействие человека с интерфейсом. Эту раскадровку можно сделать, выделяя отдельные плитки под различные наборы действий и реакций.
Раскадровки улучшают совместную работу над проектом, чётко сообщая, что, где и как происходит. Также они идеально подходят для первых этапов исследования, когда вы не хотите, чтобы люди слишком зацикливались на одном определённом дизайне. Ещё они помогают людям обдумывать действия заранее. Движения рисуются непосредственно на плитке цветными стрелками и дополняются прелестно ёмкими фразами вроде «панорамировать» или «увеличить». На эту тему есть много книг (моя любимая – «Курс дизайна по раскадровке: Принципы, практика и технологии») и сайтов, вроде Skillshare, которые часто предлагают доступные курсы, преподаваемые мастерами мирового класса.
Изучение теории анимации занимательно само по себе. (Это также отличное оправдание для того, чтобы сидеть и смотреть классические мультики в «образовательных целях»!). Я рекомендую начать с книги «Школа анимации по методу Тезука, Том 1: Изучение основ». Она краткая, раскрывает наиболее важные концепции и не займёт много времени. У вас есть больше времени? Ознакомьтесь с моим постоянно дополняемым списком книг по анимации на Goodreads. Если у вас есть любимый анимированный фильм, найдите книгу вроде «Искусство создания …» о нём — они обычно загружаются вместе с раскадровками, деталями анимации и вариантами дизайна (например, я сейчас читаю «Искусство создания фильма Frozen»). Даже если вы не считаете себя дизайнером, ознакомление с этими терминами позволит вам узнать больше о тех, которые вы употребляете.
Как можно более подробно ознакомьтесь с CSS-анимациями и переходами, SVG, канвасами, API веб-анимации, веб-аудио, видео и даже с WAI-ARIA (как звучит такое аудио при приглушении?).
- Сайты вроде MDN — отличный справочный материал.
- HTML5 Rocks объясняет множество плохо изученных API.
- На Codrops демонстрируются эксперименты.
- На Kirupa.com более подробно, чем где-либо еще, объясняются принципы CSS-анимации.
- Книги O’Рейлли – это классика, но они также помогают познакомиться с работами таких знаменитых людей, работающих, рассказывающих и пишущих в сфере дизайна и разработки игр на HTML5, как Вал Хед, Паскаль Д’Сильва, Джесси Фримен, Себ Ли-Делиль, и дажевашей покорной слугой.
- Многие разработчики и дизайнеры приводят свои анимации в таких фреймворках, какAngular.js, и прототипирование с возможностью использования анимации, как, например,Framer.js.
- Такие библиотеки, как D3, могут раскрыть тайну создания SVG-таблиц и их переходов.
- Для анимации, основанной на страницах, некоторые компании предлагают визуальные интерфейсы, упрощающие использование временной шкалы, от Sencha’s Animator до Adobe Edge Animate и бесплатного (хоть и ориентированного на рекламу) Web Designer от Google.
Вам не обязательно использовать все эти техники и инструменты каждый день, вам просто нужно знать, какие из них лучше подходят для определённых задач. Например, канвасы – это кошмар в части доступности, так как они, по сути, представляют собой тег изображения, который позволяет двигать пиксели как угодно. Они не подходят для инфографик или интерфейсов, при этом анимации на базе SVG и CSS можно использовать с материалами, которым отведено важное значение на странице. Если вы считаете, что вам нужны одновременно анимация и звук, можно использовать видео-тег. Но если вам нужно разделить эти элементы, неплохим вариантом может оказаться использование канвасов и веб-аудио.
Вместо того, чтобы пытаться освоить каждый найденный API, лучше потратьте немного времени на то, чтобы поиграться с несколькими элементами. Ищите способы их применения в проектах, и получайте обширные знания по многим техникам. Тогда вы научитесь применять нужный инструмент для определённых обстоятельств, когда будет такая возможность. Вам не нужно по каждой технике перечитывать дюжину книг. Даже одна небольшая, но авторитетная книга, например «Веб-аудио API» Бориса Смуса, может научить вас многому и укрепить уже имеющиеся знания.
Приступаем к работе
Анимированные интерфейсы могут быть довольно мощными — настолько, что смогут предложить конкурентные преимущества для продуктов, вне зависимости от платформы. Я настолько уверена в таком будущем, что решила вложить деньги в эту идею и организовать свою собственную компанию, Tin Magpie, которая специализируется на создании привлекательных взаимодействий при помощи кода. Я надеюсь, многие из вас поддержат меня и не могу дождаться момента, когда увижу, что создадите вы.
Это перевод статьи под названием “Web Animation at Work” от Rachel Nabors. Перевели в компании UXDepot с одобрением издания A List Apart.
