Рассказ Кирилла Голышева (Mail.Ru) об анимации в интерфейсах. Мы уже несколько раз поднимали эту тему и Кирилл еще раз прошелся по ее основным моментам -- истории, задачам, типам, особенностям восприятия.

1. Влияние анимации на UX
в мобильных приложениях
Кирилл Голышев

2. Немного истории
Рекомендации Microsoft
– кратчайший путь между двумя точками
– оптимальная длительность анимации не более 200 мс

3. Наши дни
Windows 8

4. Анимация - это круто!

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

6. Почему анимация влияет
на UX?
1. Снижает когнитивные нагрузки на пользователя, так как
изменения передаются эффективно.
2. Снижает количество визуального дизайна, что
повышает восприятие информации.
3. Анимация добавляет характер программному
обеспечению.

7. Комплексный подход
к анимации может повысить
удобство использования
Где. Как. Зачем?

8. Где
Определение технических требований и
возможностей
– платформа
– оборудование
– размер экрана

9. Как
Определение метода взаимодействия с пользоватем
– реалистичное
– абстрактное

10. Зачем
Определение своих задач и целей
1. Направление внимания
2. Улучшение ориентации пользователя
3. Удержание пользователя в «потоке» действия

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

12. Улучшение ориентации
Анимация перехода между экранами наглядно показывает
навигацию. Это передает смысл лучше, чем просто замена
одного экрана с другом без анимации.

13. Улучшение ориентации

14. Удержание в «потоке» действия
1. Анимация может помочь в поддержании «потока»
пользователя. Она помогает соединить элементы,
которые без нее казались бы «разованными».

15. 2. Анимационные переходы могут быть использованы чтобы
пользователь не почувствовал задержки при передачи данных
или ответа аппаратной части.

16. Разные типы анимации
воспринимаются
пользователем по
разному

17. Fade
Пользователь воспринимает
транзакцию, как быструю, когда
изображение начинает быстро
исчезать. Сама же скорость
угасания изображения не имеет
значения. Для пользователя
самым важным является, как
можно увидеть новый контент.
Например, получить проблеск
нового изображения.

18. Progress bar
Увеличение скорости прогресс
бара к концу загрузки,
воспринимается
пользователем лучше, так как
появляется ощущение, что
загрузка близка к завершению.

19. Zoom
Эффект масштабирования
не влияет на восприятие
скорости работы
приложения. Тем не менее,
движение имеет некоторое
влияние на восприятие.

20. По материалам
Animations in User Interface Design: Essential Nutrient In-
stead of Eye Candy
January 31st, 2010 by Markus Weber
The Science of Animation
July 29th, 2011 by Kai Deller
Animated UI Transitions and Perception of Time – a User
Study on Animated Effects on a Mobile Screen
Jussi Huhtala, Ari-Heikki Sarjanoja, Jani Mäntyjärvi, Minna Isomursu, Jonna
Häkkilä
Nokia Research Center, Oulu, Finland
April 10–15, 2010, Atlanta, GA, USA