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

Беляев Александр Ашотович кандидат филологических наук, старший научный сотрудник кафедры фотожурналистики и технологий СМИ факультета журналистики МГУ имени М.В. Ломоносова, 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отношения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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