Лого vc.ru

Для чего нужна анимация в интерфейсах и как она помогает пользователю

Для чего нужна анимация в интерфейсах и как она помогает пользователю

Олег Чулаков, арт-директор «Студии Олега Чулакова», рассказал в корпоративном блоге о влиянии анимации в интерфейсах на то, как пользователь воспринимает контент сайта или приложения.

Поделиться

Терминология

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

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

Пример. У банка есть форма подачи заявки на получение кредита. Полезное действие формы — отправка заявки в банк.

Интерфейс — связующее звено между человеком и продуктом. В этой статье мы не рассматриваем API. Интерфейс любого продукта в сфере mobile или digital содержит две визуальные и одну техническую составляющие:

  • Дизайн интерфейса — графическая составляющая, которая, в свою очередь, содержит множество элементов (кнопки, поля ввода, прочее).
  • Анимация интерфейса — динамическая составляющая.
  • Программирование — техническая составляющая.

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

Интерактивность — способность интерфейса реагировать на действия человека.

Юзабилити — степень удобности интерфейса или продукта при использовании человеком.

Важно понять, что наряду с дизайном, анимация напрямую влияет на удобство пользования интерфейсом.

Проблема

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

Вплоть до 2011 года во времена активного использования флеша при разработке сайтов, люди видели обилие ненужной, но иногда красивой анимации. Сайты практически превращались в видеоролики. Обилие анимации не помогало людям сориентироваться. Уровень интерактивности был высоким, юзабилити — низким. Бренды хотели произвести впечатление на людей, целью был wow-эффект.

В 2011 году флеш умер в веб- и мобильной разработке. А компании не успели перестроиться. Сегодня анимация должна применяться совершенно иначе. Но разработчики все еще скептически относятся к ней, отводя ей категорию украшательств, а не удобства пользователя. На самом деле анимация интерфейса сегодня — это неотъемлемая составляющая интерактивности продукта, его юзабилити.

Зачем нужна анимация интерфейса

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

Имитация реального мира как основа юзабилити

Кнопка — пример имитации реального объекта

Что такое кнопка в интерфейсе? Это элемент, активирующий полезное действие. Отправка заявки на получение кредита происходит при нажатии на соответствующую кнопку.

Одновременно с этим, кнопка — это отсыл к аналоговому. Вспомните свой телефон или магнитофон с кнопками. Кнопка — это один из первых способов, применяемых дизайнерами интерфейсов для привычной имитации взаимодействия с объектами реального мира.

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

Уход от скевоморфизма

Скевоморфизм — это направление в дизайне интерфейсов, целью которого является графическая имитация объектов реального мира.

Как можно говорить о пользе имитации физических объектов (а ниже мы будем говорить и о свойствах реального мира), если мы отказались от скевоморфизма? Почему он появился, и что с ним произошло?

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

Люди отказались от скевоморфизма, потому что такой подход к дизайну идет вразрез с основным принципом дизайна полезного действия — как можно меньше интерфейса. Меньше препятствий на пути к достижению полезного действия.

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

Базовые принципы имитации реального мира

Существует три базовых принципа.

1. Физическая модель

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

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

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

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

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

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

2. Контекст, связь

Связь между различными состояниями интерфейса способствует созданию иллюзии живого взаимодействия.

Пример. Вы решили почитать книгу перед сном. Обычную бумажную книгу. Что вы делаете, когда прочитали весь текст разворота? Скорее всего, вы берете и переворачиваете страницу. Процесс перелистывания — это пауза в чтении. Хорошо это или плохо? С позиции полезного действия книги — это плохо, с позиции человека — это привычно. Для дизайнера интерфейса «хорошо», зачастую, означает «удобно». Но полезное действие не отменяется, оно всегда на первом месте. Перелистывание страницы — это привычное действие, позволяющее видеть связь между страницами.

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

Мгновенное изменение состояния невозможно встретить в жизни.

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

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

Примеры связи в интерфейсах:

Раскрытие iOS-приложения из иконки.

Виден контекст, процесс привычен. Интерфейс «вырастает» из иконки и туда же «прячется» при клике на кнопку Home. Это хороший UX, который достигается анимацией интерфейса.

Иконка гамбургера с анимацией интерфейса и без

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

«Плитка работ»

Для просмотра работы человек тапает (кликает) по ней. Что дальше?

Фактически, два варианта:

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

3. Анимация, имитирующая живое взаимодействие

Одно из предназначений анимации интерфейса заключается в создании иллюзии взаимодействия с объектом реального мира.

Анимация как окно в реальный мир

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

Свойства реального мира

Анимация используется для имитации взаимодействий, с которыми вы сталкиваетесь в жизни. Речь идет о динамических характеристиках, таких как инерция, эластичность, вес и прочее.

Пример. Инерция прокрутки ленты любого популярного приложения.

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

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

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

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

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

Примеры грамотного использования анимации интерфейсов

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

Плавающие элементы интерфейса

Частный случай использования слоев — плавающие элементы. Вместе с анимацией создают имитацию физического объекта и оптимизируют пространство, что положительно влияет на юзабилити.

Подсказки и уведомления

Слои и анимация. Существует несколько способов применения.

  1. Демонстрация обновлений или получение сообщения.
  2. Привлечение внимания человека к какому-либо элементу.
  3. Пояснение нестандартной навигации.

Индикаторы загрузки — способ скоротать время

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

Анимация интерфейса — это не украшательство

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

Анимация интерфейса — это неотъемлемая составляющая юзабилити. То, что влияет на удобство пользователя.

Представим популярные приложения без анимации интерфейса

Заключение

Существует четыре типа компаний-разработчиков:

  1. Приложение или сайт создает команда технических специалистов (без экспертизы в дизайне). Получается продукт, которым неудобно пользоваться.
  2. Продукт создает дизайн-студия без технической экспертизы высокого уровня. Результатом является приложение, которое плохо работает.
  3. Самый распространенный тип среди известных агентств. В команде есть хорошие дизайнеры интерфейсов и технические специалисты, но нет экспертов в области анимации интерфейсов. Получается продукт, не доработанный с точки зрения интерактивности и удобства пользователя. При этом, статичные дизайн-макеты могут хорошо выглядеть, а приложение работать без ошибок.
  4. Сочетание экспертиз в области дизайна, технологий и анимации интерфейса. Только такое агентство способно создать приложение или сайт самого высокого уровня.

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Не стоит путать скевоморфи́зм и реализм!
Даже плоские кнопки все еще иммитируют кнопки из реального мира.

Когда в интерфейсах появтся элементы управления из парящего в воздухе аэрозоля тогда и пишите про уход от скевоморфизма.

Вот статья, в которой все ясно :) sachagreif.com/flat-pixels/

Красивый у ребят сайт. Не удобный, но очень красивый.
30 секунд на сайте студии (эпилептикам смотреть под наблюдением врача) - www.youtube.com/watch?v=GZLjiL6dVXg&feature=youtube_gdata_player

Анимацию и дизайн я бы заказал, явно большой опыт и хорошие специалисты, но только с жестко прописанным UX и анимациями в нем.

Сама стать была бы актуальной года 3 назад, может быть два, написано скучно, с трудом дочитал, т.к. повторяется одно и то же, затирая то полезное что в ней есть (а полезное в ней, конечно, есть).

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

Анимация это визуальная обратная связь интерфейса с пользователем, которая должна однозначно демонстрировать последствия того или иного действия.

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

Вот и вся статья

Удобный у них сайт, и инновационный.
Не забыли и про graceful degradation.
Анимаций много, но все к месту (свистит, но не пердит), и это круто, сайт студии так и должен выглядеть.
Своим клиентам они так делать точно не будут (если сами не попросят), так что все ок.
Фронтендеру нужно отдать должное, хорошо постарался.

Инновационный - да
Удобный - нет
Фронтэндер молодец - однозначно
Сайт студии должен выглядеть та - возможно

Спасибо за подробный развернутый ответ! Приятно, что люди продолжают тему и высказывают свое обоснованное мнение.

Почти со всем соглашусь, кроме неудобства сайта. Подробнее об аналитике писал в этом комментарии: siliconrus.com/2015/02/ui-animation/#comment69758

Походил по сайту. Поменял свое мнение:
Удобный - да
Смущает только главная, где все крутится и вертится, нет фокуса на ключевых элементах, внутри все потрясающе.

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

0

И чувак который работает в этой студии тут же прилез меня дислайкать. Да вы там взрослые люди, я так посмотрю :)

Дмитрий, а почему бы и нет? Каждый волен давать любое имя своему детищу.

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

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

Дмитрий, ваша основательность достойна лучшего применения. Статья не об этом :-)

Что-то я прям завис на сайте ) Очень прикольно .

очень полезная статья, спасибо

Сайт с картинками весит 5.03 мегабайт (текст и картинки, не считая видео) + зацикленные видео по 4-5 мегабайт на 9-10 секунд.
Не думали сделать оптимизацию? Я понимаю, что эра 3G модемов прошла, ну хотя бы сжатие с/без потерь (lossy/lossles)? Прикладываю пример.

Старались все максимально оптимизировать. Тут нужно, конечно, смотреть еще на качество получившихся картинок.

Спасибо, еще раз проверим позже.

Добрый день, на данный момент PNG, JPG и SVG перед публикацией проходят через PNGOUT, OptiPNG, SVGO и JpegOptim. То есть уже выполняется оптимизация без потерь.

Все CSS минифицированы, как и большая часть скриптов.

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

Сайт отлично открывается и через 3G - большая часть, указанных вами, 5 МБ, скачивается уже параллельно с просмотром сайта: происходит дозагрузка различных функций, таких как, например, меню сайта.

0

Уважаю студию Олега за старания, часть работ нравится. Однако, ряд «экспертиз» лично я ставлю для себя под большое сомнение. К написанному Олегом стоит прибавить, что разработчикам помимо знаний в дизайне, анимации и коде, также стоит прибавить и аналитические экспертизы (воронки, переходы, проценты отказов и возвращения на сайт). Сайт студии несомненно «прикольный», фронтэнд сильный. Однако, этого мало. Хочется ли возвращаться на сайт? Нет. Писали ли пользователи Олегу, что сайт неудобен? Писали. Что касается дизайна. Как говорил Олег, они сделали «первый в мире сайт-презентацию»:) Удалась ли презентация? Для себя считаю, что не удалась. Ставить текст на анимированные экраны с кучей другого текста считаю, мягко говоря, нецелесообразным, неудобным. В итоге такая «презентация» выглядит как каша.

Не хотел бы, чтобы мое мнение воспринялось как нападка или излишняя критика. Надеюсь, фидбэк будет полезен.

Алексей, фидбэк полезен, как мнение, безусловно. Спасибо!

Но я с ним не согласен. Сайт Студии — это презентация работ и демонстрация возможностей. Мы стремились сделать инновационный продукт.

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

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

Но любая критика полезна, за нее спасибо всем читателям! Мы создаем туду-листы и исправляем те моменты, которые считаем нужным.

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

0

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

Алексей, разные мнения бывают полезными для нас, я писал выше об этом. Но есть мнения отдельных людей, а есть аналитика гугла. Я больше доверяю цифрам.

0

Хочу похвалить Олега. Наблюдаю как за короткий промежуток времени о нем многие заговорили. А такими статьями Олег продает себя и услуги своей студии как эксперт. для спецов статья просто структурирует понятные и да, полезные, вещи. Но для клиента это глубинный анализ и ареал эксперта отрасли. За грамотный маркетинг однозначно +

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

0

извиняйте за опечатку)
angular.js

0

Воу-воу, палехчи. Ангуляр в этом сезоне уже хоронят.

Видимо вы вебтехнлолог?)
Ангуляр в данном случае как собирательный образ фреймворков. Да и собственно основная мысль — сделать более легкими скрипты.

0

Фронтендолог (: Я не смотрел в их код, но могу предположить, что все плохо.

И что, ангуляр?
Он сайты не ускоряет.

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

0

Гамбургер еще можно оставить, а вот логотип очень напрягает.

Действительно хорошая статья за долгое время! Спаси бо!

В последнее время замечаю, что многие стали использовать слово «экспертиза» как кальку с английского «expertise». Но ведь в русском языке это слово имеет своё, другое значение.

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Sasha Zivers

Ничего не заставит.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Sasha Zivers

Ну да, приравнивать жену к предментам, ок-ок. )

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Sasha Zivers

Господа, ну вы чо. Есть же известный эксперимент, когда создали условия, близкие к райским. И известно, чем он закончился.

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Artem Korsunov

Сайт написан на Laravel :)

«Омоймот» — сайт для подбора мотоциклов с блогами пользователей
0
Alexander Pershin
HTML Academy

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

Называя "обезъянками" других IT-специалистов вы показываете великолепнейший уровень дискусии, достойный только высококласснейших программистов, повелителей логики и алгоритмов.

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

Куда пойти учиться программисту: советы опытного тимлида, преподавателя и новичка
1
Показать еще