Анимация в дизайне интерфейса информационных сайтов

Animation in Interfaces of Content-oriented Websites

 

Беляев Александр Ашотович
кандидат филологических наук, старший научный сотрудник кафедры фотожурналистики и технологий СМИ факультета журналистики МГУ имени М.В. Ломоносова, certainlyakey@gmail.com

Aleksandr А. Beliaev
PhD, Senior Researcher at the Department of Photojournalism and Media Technology, Faculty of Journalism, Lomonosov Moscow State University, certainlyakey@gmail.com

 

Аннотация

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

Ключевые слова: анимация, веб-дизайн, CSS, интерфейс, интерактивный дизайн, дизайн интерфейса.

 

Abstract

Animation use has amplified quickly in the design of websites lately, affecting a considerable part of mass media sites. This paper aims to do an overview of the guidelines for using animation to perfect the usability qualities of a web interface, find out its design functions based on previous research and literature and describe how animations are used on actual information sites.

Key words: animation, web design, CSS, interface, interactive design, interface design.

 

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

История использования анимации в вебе, как и в интерфейсах приложений, привязана к технологиям: анимация реализовывалась в основном при помощи платформы Flash, неинтерактивных изображений в формате GIF и скриптов на языке программирования Javascript³. Долгое время анимации в веб-интерфейсах были призваны, главным образом, привлекать внимание посетителей. Вследствие этого анимации воспринимались скорее как развлекательный и даже раздражающий прием, не слишком совместимый с идеей дизайна, нацеленного на решение пользовательских задач.

Популяризация в начале 2010-х гг. удобных и производительных инструментов для анимации элементов DOM-дерева⁴, а именно свойств CSS transition и animation, изменило эту ситуацию. Дизайнеры стали смотреть на анимацию с практической точки зрения. Двигаясь в общем русле раскрепощения оформления информационных сайтов, которое связано с обогащением инструментария каскадных таблиц стилей, анимации начали обретать новые роли в дизайне веб-интерфейсов. Это исследование имеет своей целью, обобщив заключения, сделанные в этой области ранее, и подкрепив их примерами из области интернет-СМИ, определить, какие задачи может решать анимация в веб-дизайне, а также показать, как и в каком объеме информационные сайты используют на сегодняшний день эффекты анимации.

Исследования в этой области касались, прежде всего, использования анимации в дизайне графического интерфейса приложений и операционных систем. В частности, С. Хадсон и Д. Стаско⁵ (Технологический институт Джорджии), а также Б. Тверски и др.⁶ считают, что применение анимации позволяет увеличить объем воспринимаемой пользователем информации, а Б.В. Чанг (Стэнфордский университет) и Д. Унгар⁷ показывают, что анимация способствует смягчению резкого перехода между разными состояниями интерфейса. Как подмечено Д. Тидвелл⁸, анимация выполняет своего рода ориентационную функцию, не давая пользователю «выпасть» из уже установившейся системы координат. В первую очередь, преимущества анимации связаны с такой психической функцией человеческого сознания, как кратковременная память. Анимация какого-либо изменения в интерфейсе − например, скрытия информационного блока на сайте − позволяет «продлить» в сознании пользователя факт изменения и зафиксировать его с большей надежностью, а также придать факту изменения дополнительные смыслы. Помимо этого анимация способна привлекать внимание, даже если анимируемый объект появляется на периферии зрительного поля⁹, и поэтому может быть использована как сильный стимул для фокусировки внимания даже в сложных, насыщенных деталями интерфейсах.

Хадсон и Стаско в работе, на которую мы ссылаемся выше, указывают, что анимация не должна быть обязательным приемом, исключающим правильное понимание происходящих на экране процессов в случае ее отсутствия. Ее задача − повышать качество восприятия, а не определять характер воспринимаемого события. В своде рекомендаций для разработчиков компании Microsoft приводится список возможных случаев, когда анимация может не достичь своих целей¹⁰: наличие других сильных акцентов в оформлении, наличие проблем со зрением у пользователей и недостаточные вычислительные ресурсы машины.

Несколько слов следует сказать о параметрах, из которых складывается анимация. Это анимируемые свойства объекта (положение, размер, прозрачность, цвет и т.п.), длительность анимации и используемая функция скорости¹¹. CSS также добавляет в этот ряд параметр задержки (delay) перед началом анимации. Все вместе эти компоненты образуют систему, которую, по аналогии с макетом в графическом дизайне, можно назвать композицией анимации. В случае с составной анимацией одного объекта, состоящей из сегментов (шагов), каждый из сегментов следует, очевидно, рассматривать как подсистему, действующую, тем не менее, согласно общему характеру системы. Анимироваться могут также несколько разных объектов одновременно, и в этом случае можно говорить о целой анимационной сцене.

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

В целом мы можем выделить три общих функции, которые анимация выполняет в графических интерфейсах. Во-первых, анимация облегчает восприятие некоторых процессов и структур в интерфейсе. В значительной степени описанию этой функции посвящена эта статья. Во-вторых, анимация привлекает внимание. Практически с самой зари Всемирной паутины дизайнеры пользовались коллоссальным потенциалом анимации в плане притяжения взгляда для создания, среди прочего, рекламных баннеров, что в некоторых случаях приводило к печальным последствиям – веб-страницы осознанно и не очень злоупотребляли количеством анимированной рекламы¹². В настоящее время анимации используются на сайтах СМИ в том числе для создания визуального интереса, динамики: например, иллюстрации в материале могут «отрисовываться» прямо на экране или вводиться при помощи привлекательного для взгляда перехода. В-третьих, анимация может показывать соответствие между действиями пользователя (например, проведением пальцем по экрану или перетаскиванием скроллбара зажатой кнопкой мыши) и событиями в интерфейсе. Плавный скроллинг без преувеличения можно назвать значительно более удобным, чем, скажем, постраничное пролистывание, в первую очередь потому, что пользователь имеет возможность отслеживать интересующий его элемент в процессе прокрутки, не теряя его из виду. Также − в первую очередь на устройствах с сенсорным экраном − процессы, управляемые продолжающимися действиями пользователя («свайпы», «щипки», движения мыши с зажатой кнопкой и т.д.), воспринимаются более естественно, будучи анимированными. Анимация отражает плавность движений управляющего интерфейсом человека и придает взаимодействию между человеком и машиной иллюзию прямого управления (direct manipulation)¹³. Наконец, на более общем уровне восприятия анимация может повлиять на степень «правдоподобности» интерфейса − в живом мире человек не наблюдает резких изменений, и анимация точно так же, как и, например, текстуры или округлые линии, делает интерфейс более доступным благодаря углублению его сходства с объектами и процессами реального мира.

Важнейшая для веб-дизайнера проблема в рамках концепции дизайна, ориентированного на пользователя¹⁴, − как сделать интерфейс наиболее удобным для решения задач, стоящих перед посетителем сайта. Разберем, как анимация может повлиять на восприятие интерфейса и как она может повысить качество работы с ним. Художник и дизайнер Р. Наборс выделяет¹⁵ несколько коннотаций, формируемых анимацией в восприятии пользователя. Обозначив эти коннотации как задачи анимации, мы используем приведенные им формулировки в качестве базы, внеся в список задач некоторые изменения и дополнения.

 

Последовательность и причинно-следственные связи

Анимация связывает состояние интерфейса «до» и «после» смысловой цепочкой, в которой «до» маркируется как исходное состояние, а «после» − как следствие какого-либо изменения, произведенного в интерфейсе. Изменение («причина») может быть инициировано как пользователем, так и самой системой, в любом случае важна связность процесса: анимация «продлевает» момент перехода и таким образом дает возможность пользователю удостовериться в сохранении контроля над системой, помогает зафиксировать, когда произошло какое-либо изменение. Также анимация может отвечать на вопрос, почему оно произошло, устанавливая дополнительную смысловую связь между прошлым и будущим состояниями. Наиболее простой пример − анимация кнопок: они могут плавно сдвигаться при нажатии (Huffington Post¹⁶) или же активироваться после введения необходимой для регистрации информации (Los Angeles Times¹⁷ − рис. 1).

Рис. 1. Анимация кнопки при вводе электронной почты в Los Angeles Times

Другими примерами могут послужить плавное увеличение иллюстрации при щелчке по ней (USA Today¹⁸), смена кадров в галереях контента (американский Cosmopolitan¹⁹, отечественные «РИА Новости»²⁰), переход из одного режима отображения страницы в другой (так визуализируется переход в режим Visual Browseна сайте Los Angeles Times или смена расположения анонсов при изменении ширины экрана на сайте Openspace²¹ – рис. 2), сдвиг фиксированной шапки страницы или отдельных элементов в ней при начале прокрутки от первого экрана (Slate²², The Irish Times²³ – рис. 3). Принцип последовательности хорошо проявляет себя и в мультимедийных историях, где анимация позволяет более плавно развертывать элементы сюжета по мере его чтения (см., например, материал издания Victory Journal La Gran Fuga²⁴ – рис. 4).

Рис. 2. Анимированная «переверстка» макета на Openspace

 

Рис. 3. Изменения в шапке The Irish Times после прокрутки

 

 

Рис. 4. «Контролируемая» анимация в интерактивном материале Victory Journal

 

Отношения

Анимация указывает на отношения между визуальными элементами, на их положение в иерархии. Так, плавное увеличение размеров элемента, на который наведена мышь (навигационное меню в шапке сайта японского онлайн-СМИ Isuta²⁵ – рис. 5) или его раскрытие (подписи в галерее анонсов на сайтах PBS²⁶ или Colta²⁷) соответствуют временному повышению его значимости для пользователя по сравнению с другими элементами.

Рис. 5. Анимация в навигационном меню Isuta

 

Затухание фона страницы при раскрытии формы авторизации также демонстрирует контрастное снижение важности всех остальных элементов (Buzzfeed²⁸ – рис. 6, Slon²⁹).

 

Рис. 6. Затемнение экрана при открытии окна авторизации на сайте Buzzfeed

 

На сайте The Next Web³⁰ при щелчке в навигационной панели слева выбранный анонс «взмывает вверх», обозначая таким образом свое повышение в статусе. В интерактивном материале Xbox One − The Review игрового сайта Polygon³¹ анимация текущего пункта в навигации по странице выделяет его, сообщая читателю, где он находится, а в статье New York Times, озаглавленной The Russia Left Behind³², содержание публикации привязано к анимируемому при прокрутке маршруту Петербург-Москва (рис. 7).

 

Рис. 7. Анимированный маршрут в интерактивном материале The New York Times

 

Одновременная анимация нескольких элементов может указывать на их принадлежность к одной группе, так, например, как это сделано на сайте немецкого журнала 032c³³, где при наведении мыши на фотографию в анонсе одновременно анимируется ссылка под анонсом More («читать далее»).

Рис. 8. Анимация нескольких элементов на сайте журнала 032c

 

Прогресс (ожидание) и готовность

В определенных паттернах взаимодействия³⁴ анимация может указывать на временной статус процесса, идущего в системе. Она может иметь место: 1) по факту прогресса в выполнении задачи, информируя пользователя о текущей скорости; 2) при отсутствии продвижения вперед или при невозможности точного указания на степень выполнения − для обозначения того, что активность по выполнению задачи имеет место и интерфейс не «завис» (система не вышла из-под контроля); 3) по окончании какого-либо процесса. Часто при визуализации процесса ожидания анимируется отдельный объект − индикатор ожидания, назначение которого, помимо прочего, сообщить пользователю, что взаимодействие с интерфейсом невозможно на период выполнения задачи. Индикатор ожидания может принимать разные формы − вращающегося «колесика» (т.н. «спиннер») или заполняющейся полоски («прогресс-бар») − и используется при загрузке самых разных типов ресурсов, в том числе видеороликов (на сайтах газеты New York Times³⁵ или телеканала НТВ³⁶), анонсов в меню (Polygon³⁷ – рис. 9) или самих материалов (USA Today). В качестве спиннеров иногда используются элементы фирменного стиля, например логотипы (у Polygon и New York Times).

Рис. 9. «Фирменный» индикатор загрузки на сайте Polygon

 

Для ощущаемого ускорения процесса ожидания применяются различные приемы, например, двигающиеся «волны» в прогресс-баре или быстрая пульсация – рис. 10³⁸.

 

Рис. 10. Прогресс-бар с двигающимися в обратном направлении «волнами»

 

Иногда прогресс-бар также используется в различных слайдерах для демонстрации времени, оставшегося до перехода к следующему слайду (см., например, сайты изданий Now Fashion³⁹ или InStyle – рис. 11⁴⁰).

 

Рис. 11. Круговой прогресс-бар, совмещенный с навигацией в слайдере, на сайте InStyle

 

Наконец, анимация задействуется, чтобы показать окончание процесса загрузки каких-либо элементов на сайте. Загрузившиеся элементы могут «влетать» или плавно появляться на подготовленном для них пространстве. Этот прием используют, например, сайты газеты New York Times – при загрузке дополнительных анонсов в новостном меню в шапке⁴¹ (рис. 12) – или Bloomberg View⁴², японской Yomiuri Shimbun⁴³ и отечественного «Спутника и Погрома»⁴⁴ при прокрутке всей страницы.

 

Рис. 12. Анимация загрузившихся анонсов на сайте New York Times

 

Имитация законов физики и особенностей поведения реальных объектов

Так же, как в визуальном оформлении стремление максимально близко отразить реальность нашло свое логическое воплощение в направлении, называемом скевоморфизм⁴⁵, так и в интерактивном дизайне анимации зачастую стремятся отразить особенности движения в реальном мире. Отражаться могут различные физические явления: инерция (анимация замедляется ближе к концу), сила тяжести (объект ускоряется при движении вниз), деформация при столкновении и т.д. Паттерны взаимодействия даже, как можно предположить, черпают вдохновение в языке жестов: например, потряхивание формы при неправильно введенных данных авторизации на сайте Look At Me (рис. 13)⁴⁶ может имитировать отрицательное покачивание головой.

 

Рис. 13. Анимированное указание на ошибку во введенных данных на Look At Me

 

Возможность интерактивного взаимодействия

Анимированный элемент может подсказывать пользователю, что он является интерактивным, выступая, таким образом, в роли аффорданса⁴⁷, либо указывать на возможность взаимодействия со страницей в целом. Так, реклама на Slon при загрузке страницы плавно увеличивается, обозначая таким образом факт наличия компактного формата и то, что ее можно впоследствии скрыть. Также популярным паттерном взаимодействия в веб-дизайне является «прыгающая стрелка» (их регулярно использует в своих интерактивных материалах музыкальное издание Pitchfork⁴⁸ – рис. 14), размещаемая обычно внизу первого экрана страницы и «приглашающая» прокрутить страницу.

 

Рис. 14.

 

Компактное отображение контента

Анимация может быть и инструментом, помогающим экономить пространство на макете веб-страницы. Такие функции обычно более свойственны интерактивным элементам. Так, бегущая строка так же, как и блоки с внутренней прокруткой или «табберы» (блоки с переключающимися вкладками), позволяет показать больше информации в ограниченном пространстве. Как правило, в этом случае подразумевается автоматическая анимация, происходящая с равными интервалами (российский спортивный портал Sportbox⁴⁹), либо непрерывная (сайт ирландской газеты Independent⁵⁰).

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

Подобие реальности. Значительная часть анимаций уподобляется знакомым людям и реальным прототипам. Например, онлайн-журнал Harvard Law Review⁵¹ использует при переключении слайдов комплексную анимацию, составленную сразу из двух анимационных эффектов − движения вверх и изменения прозрачности (рис. 15).

 

Рис. 15. Анимация слайдера на сайте Harvard Law Review

 

A сайт журнала 032c анимирует анонсы свежего выпуска в шапке страницы, плавно выдвигая их из «тумана» (увеличивая и изменяя прозрачность) к зрителю при наведении мыши. В свою очередь, сайт газеты USA Today в специальном разделе Big Page⁵² воспроизводит при переключении слайдов перелистывание страниц книги. Иногда анимация несет в себе конкретную ассоциацию, связывающую какой-либо аспект характера фирменного стиля или семантическую роль элемента страницы с реальным объектом. Так, сайт онлайн-издания о кино The Dissolve⁵³ (рис. 16) отображает в заголовке посвященной новостям секции бегущую строку, используя ассоциацию с электронными информационными табло.

 

Рис. 16. Бегущая строка на сайте онлайн-журнала The Dissolve

 

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

При этом полной достоверности ни в анимации, ни в визуальном оформлении анимированного элемента не требуется − достаточно воспроизвести в анимации наиболее яркий аспект реального действия, подав его наиболее ярким, читаемым образом. Чем более преувеличенной будет анимация по сравнению с реальным аналогом, тем более «живой» она будет восприниматься, но в то же время – и более «мультяшной», несерьезной. См. у Д. Унгара и Б.В. Чанга: «Парадоксальным образом, только путем преувеличения мультфильмы добиваются большего реализма»⁵⁴. В этой связи часто цитируют «12 базовых принципов (приемов) анимации», сформулированных художниками-мультипликаторами студии Disney О. Джонстоном и Ф. Томасом в книге «Иллюзия жизни»⁵⁵. Такие приемы, как упреждение (anticipation), доводка (follow through) или движение по дуге (arcs) позволяют придать анимации движения выразительность и создать впечатление, будто объект подчиняется законам физики. Так, USA Today применяет принцип доводки для того, чтобы оживить раскрытие меню глав на странице интерактивных материалов⁵⁶ (рис. 17), а блог Glass новостного сайта Quartz⁵⁷ использует в оформлении анонсов прием, именуемый дополнительным действием (secondary action – рис. 18).

 

Рис. 17. Принцип доводки на сайте USA Today

 

Рис. 18. Принцип дополнительного действия в блоге Glass издания Quartz

 

Длительность. Чересчур долгая анимация приводит к появлению у пользователя раздраженности, привлекая слишком много внимания. Это заметно, скажем, в анимации слайдера авторских колонок на сайте швейцарской газеты Neue Zurcher Zeitung⁵⁸, длящейся около 5 секунд (рис. 19). Это не совсем верно в обратном отношении − даже совсем короткая анимация может выполнять некоторые базовые задачи. Сайты, которые стараются обходиться «статичным» оформлением, например сайт американского журнала Variety⁵⁹ или украинского Forbes⁶⁰, могут использовать микроанимации, длящиеся 100−300 миллисекунд. При этом использование функции скорости на малой длительности, очевидно, не дает нужного эффекта.

 

Рис. 19. Анимация слайдера на сайте газеты Neue Zurcher Zeitung

 

Сложность анимации или анимационной сцены

Анимация нескольких свойств объекта и особенно нескольких объектов сразу занимает и развлекает  пользователя, «выглядит интереснее». Именно благодаря этому она активно используется в оформлении тех жанров онлайн-журналистики, которые делают акцент на эстетику и разнообразие форм подачи информации. В качестве примера можно привести то обстоятельство, что мультимедийные истории и интерактивная инфографика активно задействуют сложные анимации, их можно назвать даже постоянным компонентом формы таких публикаций (см., например, материалы Station to Station: The Past, Present, and Future of Streaming Music музыкального издания Pitchfork⁶¹ или In Flight газеты Guardian⁶²). В то же время, с точки зрения эффективности восприятия, велик риск потери концентрации внимания и, как следствие, ухудшения качества восприятия информации. Можно предположить, что чем больше параметров и объектов анимируется одновременно, тем более рассеивается внимание пользователя.

Характерным примером и негативных, и позитивных сторон сложной анимационной сцены могут послужить сразу две секции слайдшоу на сайте о кино The Dissolve, секция Video-on-demand и анонсы материалов разделов в шапке (рис. 20): переключение анонсов и раскрытие блока соответственно сопровождаются разнонаправленным, разноскоростным и несинхронизированным движением двух элементов, таким образом,  внимание полностью концентрируется на составляющих самой анимации, а обработка собственно информации, содержащейся во входящих в «фокус» анонсах, отходит на второй план (см., например: «Если элементы двигаются в разных направлениях, наблюдателю сложно уследить за ними всеми»⁶³). Другой пример можно обнаружить на онлайн-презентации медиахолдинга Rambler⁶⁴: индикатор ее загрузки представляет собой заполняющуюся полоску в виде вращающегося круга. Наличие двух одновременно анимирующихся свойств делает затруднительным получение информации о процессе загрузки.

Рис. 20. Сложная анимационная сцена на сайте The Dissolve

 

Анимационная сцена, единообразная по какому-либо признаку, воспринимается легче, как, например, в меню Issues шапки изданий Fast Company⁶⁵, в котором изображения журнальных обложек проявляются «веером» − одна за другой. Сложные анимации можно обнаружить также на кнопках, призывающих совершить какое-либо важное действие (Call-to-action), например на новостном сайте Quartz⁶⁶ (рис. 21); очевидно, что кнопки просто обязаны быть заметными.

 

Рис. 21. Анимированная кнопка подписки на рассылку на сайте Quartz

 

Производительность воспроизводящего устройства

 Несмотря на то что значение этого фактора варьируется от устройства к устройству и от платформы к платформе, переоценить его сложно. Плавное воспроизведение анимации необходимо для адекватного ее восприятия: «...сбои в воспроизведении анимации способны разрушить иллюзию, создаваемую интерфейсом и привлечь [нежелательное. – А.Б.] внимание к самой анимации»⁶⁷. В том числе в силу недостаточной производительности технической базы анимация появляется в общедоступных пользовательских интерфейсах сравнительно поздно, и расцвет ее начинается со второй половины 2000-х гг. Немалую роль в этом сыграло распространение сенсорных экранов (по причинам, указанным выше), а также появление в мобильных устройствах чипов, отвечающих за видеоускорение. Но даже при наличии аппаратного ускорения анимация может воспроизводиться с заметным подтормаживанием, и это касается не в последнюю очередь анимации, используемой в оформлении веб-сайтов: анимации, объявленные через CSS и тем более через Javascript⁶⁸, зачастую становятся причиной ощутимых «тормозов» и лишают интерфейс отзывчивости. П. Льюис и П. Айриш утверждают, что современные браузеры без особых усилий способны анимировать только свойства, относящиеся к положению, масштабу, повороту или прозрачности⁶⁹. Если анимируемый объект достаточно крупный или анимация сопровождается какими-либо другими изменениями, например DOM-дерева, производительность также снижается. Падение частоты кадров заметно на сайте журнала i-D⁷⁰, где анимируется переход между фото в полноэкранном слайд-шоу, а микроанимации в некоторых случаях перестают восприниматься вообще − скажем, на сайте Slon, где открытие модального окна авторизации сопровождается анимированным появлением декоративного фона длительностью 300 мс. В самом худшем случае анимация сложных мультимедийных элементов вкупе с применением других требовательных к мощности устройства приемов способна довести производительность веб-интерфейса до абсолютно неприемлемого уровня, как это хорошо видно на примере материала Soul to Keep издания Pitchfork⁷¹.

 

Культурные особенности

Специфика национальной культуры, языка и т.п. может определять и особенности анимационных эффектов. Так, на сайте катарского телеканала Al Jazeera⁷², как и на некоторых других⁷³ (хотя не всех) сайтах арабских массмедиа, направление анимации в слайд-шоу и бегущей строке − справа налево, а не так, как принято, например, в Европе, Америке или Индии.

Если рассматривать анимацию на сайте в целом в рамках концепции дизайна, ориентированного на пользователя, характер ее должен быть обусловлен, прежде всего, нуждами посетителя сайта. Так, скорость анимации может находиться в зависимости от природы потребления информации на нем: действительно, для некоторых ориентированных на «быстрое» потребление новостных сайтов характерны недолгие, иногда едва заметные анимации (пример − сайт New York Times), а, например, аналитические, «медленные» интернет-СМИ, наподобие Colta, могут позволить себе «неторопливые» анимации. Точно так же анимация может сообразовываться с потребностями пользователя в конкретный момент времени на более низком уровне: например, отображение полосы управления видео на сайте британского журнала Vanity Fair⁷⁴ (рис. 22) сопровождается быстрой анимацией, а скрытие − медленной, что может быть мотивировано большей заинтересованностью пользователя, инициирующего действие.

 

Рис. 22. Анимация скрытия и отображения полосы управления видео на сайте Vanity Fair

 

В то же время сравнительно медленная анимация при скрытии баннера подписки на социальные сети на сайте W-O-S⁷⁵ ощущается как раздражающая, поскольку баннер, отображаясь при первом заходе на сайт в виде модального окна, блокирует все содержимое страницы.

Вероятно, можно утверждать, что анимация ничем не отличается от других элементов веб-дизайна − таких, как цветовая палитра, типографика, ритмические характеристики макета и т.д. − в том, что она должна гармонично сочетаться и с общей направленностью, характером фирменного стиля. Как пишет В. Хэд, «может показаться, что [анимации, добавленные ради красоты. – А.Б.] не приносят реальной пользы интерфейcу, однако они сообщают массу интересного о бренде или теме»⁷⁶. Соответственно этому могут быть выбраны параметры анимации; например, британский информационный сайт о моде Never Underdressed⁷⁷, оформление которого изобилует контрастными цветами и резкой геометрией четких форм и линий, использует быстрые анимации, выполняющиеся часто с равномерной скоростью, рывками. Важна также согласованность анимаций между собой, что становится особенно важно по мере роста масштабов использования анимации на сайте. Например, сайт USA Today использует похожие по длине и скорости анимации по всему сайту. Более того, они играют системообразующую роль: весь сайт напоминает приложение, поскольку загрузка новой страницы происходит для пользователя на уровне интерфейса сайта, а не браузера. Чтобы подчеркнуть это, даже переходы между страницами связываются анимациями, в процессе загрузки отображается индикатор выполнения (рис. 23). Такой подход позволяет создать у пользователя ощущение неразрывности опыта посещения сайта.

 

Рис. 23. Переходы между страницами на сайте USA Today

 

Интересно, что ради ощущения большей согласованности дизайнерами делаются попытки синхронизировать скорость анимации, активирующейся по факту прокрутки, со скоростью самой прокрутки. Этот эффект хорошо заметен на страницах научно-популярного онлайн-журнала Nautil.us⁷⁸ (рис. 24) или сайта французского издания GQ⁷⁹. Такая синхронизация может сделать общие ощущения от движений на странице более гармоничными, подчинив общему ритму действия посетителя сайта и те действия, которые инициируются самим интерфейсом. Также популярным приемом стала контролируемая прокруткой анимация, когда анимируемое изменение проявляется или обращается вспять по мере прокручивания страницы (см., например, главную страницу сайта журнала i-D).

 

Рис. 24. «Синхронизированная» с прокруткой анимация на страницах научно-популярного журнала Nautil.us.

 

Итак, подводя итоги, скажем:

• Анимация способствует смягчению резкого перехода между разными состояниями интерфейса и обладает большим потенциалом по донесению сообщения до пользователя.
• Анимацию можно причислить к второстепенным инструментам веб-дизайна в том смысле, что ее отсутствие не должно сказываться на работоспособности интерфейса или считываемости контента сайта.
• Ее составляющие − анимируемые свойства объекта, длительность анимации и используемая функция скорости.
• Можно говорить о композиции анимации и анимационных сценах, когда анимируются несколько объектов.
• Три функции анимации – это облегчение восприятия некоторых процессов в интерфейсе, привлечение внимания и установление соответствия между действиями пользователя и событиями в интерфейсе.
• Анимация может выполнять следующие задачи – выражать последовательность и причинно-следственные связи, отношения между элементами дизайна, визуализировать прогресс выполнения задачи, имитировать законы физики и поведение реальных объектов, указывать на возможность интерактивного взаимодействия и способствовать компактному отображению контента.
• Эффективность анимации определяют следующие факторы – подобие реальности, ее длительность, сложность анимации или анимационной сцены, производительность воспроизводящего устройства и культурные особенности.
• Применение анимации обусловлено, в том числе, традиционными факторами, действительными и для визуальных инструментов (в т.ч. удовлетворение потребностей пользователя, фирменный стиль). Согласованные между собой анимации на сайте могут способствовать проявлению ритма в оформлении и выразительно характеризовать фирменный стиль издания.

Анимации на сегодняшний день являются сложным, но эффективным инструментом веб-дизайна. Такой инструмент приходится как нельзя кстати в интерфейсах современных интернет-СМИ, тяготеющих к упрощению формы и отходу от скевоморфизма через направление так называемого «плоского» дизайна. Как замечает Д. Эндерс, «плоский − значит неинформативный»⁸⁰, и анимация может возместить скудость визуальных подсказок в интерфейсе. Но и безотносительно к популярным трендам дизайна анимация может успешно решать некоторые задачи, стоящие перед дизайнером интерфейса, и при корректном применении является емким и точным средством визуальной коммуникации.

 

---

1. В переводе с англ. − interaction design. По причине обилия трактовок под интерактивным дизайном мы будем понимать разновидность дизайна, которая имеет дело с контролируемым изменением объекта дизайна в связи с определенными действиями пользователя.
2. Cм. также классическое определение анимации в интерфейсе пользователя у Р. Бекера и Й. Смолла: «Анимация – это динамическое визуальное сообщение, форма и структура, развивающиеся во времени» (Baecker R., Small I. Animation at the Interface // The Art of Human-Computer Interface Design. Boston, 1990. P. 251.)
3. Нестандартный HTML также поддерживает некоторые расширения, связанные с анимацией, например тег marquee (бегущая строка) или тег blink (мигающий текст).
4. DOM (Document Object Model) − объектная модель документа – программный интерфейс, позволяющий получать доступ к узлам в языках разметки, относящимся к веб-стандартам.
5. Hudson S., Stasko J.T. Animation Support in a User Interface Toolkit: Flexible, Robust, and Reusable Abstractions // Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology. Atlanta, 1993. P. 57.
6. Tversky B., Morrison J.B., Betrancourt M. Animation: Can It Facilitate? // International journal of human-computer studies. Philadelphia, 2002. Т. 57. № 4. P. 247−262.
7. Chang B.-W., Ungar D. Animations: From Cartoons to User Interface // Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology. Atlanta, 1993. P. 45.
8. Tidwell J. Designing Interfaces. Sebastopol, 2010. P. 84.
9. Faraday P., Sutcliffe A. Designing effective multimedia presentations // Proceedings of ACM CHI ’97. New York, 1997. P. 272−279.
10. Animations and Transitions. Windows Dev Center. – URL: http://msdn.microsoft.com/en-us/library/windows/desktop/dn742481.aspx
11. Функция скорости (timing function или pacing function) задает изменение скорости анимации в течение ее выполнения. Графически функцию скорости можно представить в виде кривой Безье.
12. См. мнение Я. Нильсена: «Движущиеся картинки оказывают подавляющее воздействие на периферийное зрение. Веб-страница не должна симулировать нью-йоркский Таймс-Сквер, без конца атакуя органы восприятия» (Nielsen J. Original Top 10 Mistakes in Web Design. 1996. – URL: http://www.nngroup.com/articles/original-top-ten-mistakes-in-web-design/)
13. См.: Hutchins E., Hollan J.D., Norman D.A. Direct Manipulation Interfaces // Human-Computer Interaction. 1985. V. 1. Is. 4. P. 311−338.
14. Автором термина «дизайн, ориентированный на пользователя» (user centered design) считается Д. Норман, составивший первый сборник научных работ по теме в 1986 г. (Norman D.A., Draper S.A. User Centered System Design: New Perspectives on Human-Computer Interaction. Mahwah, 1986.) Эта концепция стала на сегодняшний день одной из самых популярных идей в дизайне интерфейсов и активно используется в веб-дизайне. (См., напр.: Garrett J.J. The elements of user experience: User-Centered Design for the Web and Beyond. Berkeley, 2011.)
15. Nabors R. Animation And The Future Of UX // Future of Web Design London conference session. London, 2014. April, 8.
16. http://huffingtonpost.com
17. http://latimes.com
18. http://usatoday.com
19. http://cosmopolitan.com
20. http://ria.ru
21. http://openspace.ru
22. http://slate.com
23. http://irishtimes.com
24. http://victoryjournal.com/stories/el-duque-la-gran-fuga
25. http://isuta.jp
26. http://pbs.org
27. http://colta.ru
28. http://buzzfeed.com
29. http://slon.ru
30. http://thenextweb.com
31. http://polygon.com/a/xbox-one-review
32. http://nytimes.com/newsgraphics/2013/10/13/russia
33. http://032c.com
34. Паттерн взаимодействия – описание успешного и повторимого способа решения какой-либо задачи, стоящей перед интерактивным дизайном.
35. http://nytimes.com
36. http://ntv.ru
37. http://polygon.com
38. Исследование К. Гаррисона и др. показывает, что подобные приемы способны уменьшить субъективное время ожидания на 11%. (Harrison C., Yeo Z., Hudson S.E. Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations // Proceedings of the 28th Annual SIGCHI Conference on Human Factors in Computing Systems. New York, 2010.)
39. http://nowfashion.com/gosha-rubchinskiy-menswear-spring-summer-2015-paris-9204
40. http://instyle.com
41. http://nytimes.com/2014/07/13/magazine/the-post-post-apocalyptic-detroit.html
42. http://bloombergview.com
43. http://yomiuri.co.jp
44. http://sputnikipogrom.com
45. От греч. σκεος – инструмент и μορφή – форма.
46. http://lookatme.ru
47. «Аффорданс» (от англ. affordance, также используются переводные термины «назначение» или «возможность») − по Д. Норману, «наглядная подсказка, как пользоваться предметом». (Норман Д. Дизайн привычных вещей. М., 2013. С. 47; Norman D. The Design of Everyday Things. New York, 2002. P. 47. (Norman D. Dizayn privychnykh veshchey. Moskva, 2013. S. 47.)
48. http://pitchfork.com/features/cover-story/reader/mac-demarco
49. http://news.sportbox.ru/Vidy_sporta/Biatlon
50. http://independent.ie
51. http://harvardlawreview.org
52. http://usatoday.com/big-page
53. http://thedissolve.com
54. Chang B.-W., Ungar D. Animations: From Cartoons to User Interface // Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology. Atlanta, 1993. P. 49.
55. Thomas F., Johnston O. The Illusion of Life: Disney Animation. New York,1995.
56. См. напр. – URL: http://www.usatoday.com/longform/news/nation/2014/03/11/fugitives-next-door/6262719
57. http://glass.qz.com
58. http://nzz.ch
59. http://variety.com
60. http://forbes.ua
61. http://pitchfork.com/features/cover-story/reader/streaming
62. http://theguardian.com/world/ng-interactive/2014/aviation-100-years
63. Steele J., Iliinsky N. Beautiful Visualization. Sebastopol, 2010. P. 331.
64. http://rambler-co.ru
65. http://fastcodesign.com
66. http://qz.com
67. Chang B.-W., Ungar D. Op. cit. P. 53.
68. Как правило, анимации, объявленные в CSS, используют видеоускорение и воспроизводятся более плавно, чем анимации, создаваемые с помощью Javascript.
69. Lewis P., Irish P. High Performance Animations // HTML5 Rocks. 2013. November, 7. – URL: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
70. http://i-d.vice.com
71. http://pitchfork.com/features/cover-story/reader/how-to-dress-well
72. http://aljazeera.net
73. См. также сайты саудовских изданий: Sayidaty. – URL: http://sayidaty.net; El Bilad. – URL: http://elbilad.net
74. http://video.vanityfair.com/watch/nixon-tapes-soviet-jews-its-none-of-our-business.
75. http://www.w-o-s.ru
76. Head V. UI Animation and UX: A Not-So-Secret Friendship // A List Apart. 2014. February, 11. № 390. – URL: http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship
77. http://neverunderdressed.com.
78. http://nautil.us/issue/13/symmetry/what-do-animals-see-in-a-mirror
79. http://gqmagazine.fr
80. Embers J. Flat UI and Forms // A List Apart. 2014. October, 15. № 384. − URL: http://alistapart.com/article/flat-ui-and-forms