19 января Олег Чулаков выступил на зимнем UX&UI интенсиве в Британской Высшей Школе Дизайна с лекцией «Анимация интерфейса».

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

Учебное заведение является членом союза British Design & Art Direction (D&AD), Международного совета ассоциаций по графическому дизайну ICOGRADA, Ассоциации Interior Educators и Международной ассоциации дизайнеров интерьера (International Interior Design Association).

Посмотреть все события Полный список наград

Ниже мы будем рассматривать только человеко-машинноевзаимодействие. «Общение» программ друг с другом не рассматриваем.

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

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

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

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

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

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

Анимация интерфейса — динамическая составляющая;

Программирование — техническая составляющая.

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

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

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

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

Проблема

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

2011

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

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

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

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

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

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

Отправить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

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

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

Другие примеры контекстной анимации в интерфейсах

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

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

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

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

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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