Кирилл Голышев — Влияние анимации на UX в мобильных приложениях
•
2 likes•939 views
Рассказ Кирилла Голышева (Mail.Ru) об анимации в интерфейсах. Мы уже несколько раз поднимали эту тему и Кирилл еще раз прошелся по ее основным моментам -- истории, задачам, типам, особенностям восприятия.
Кирилл Голышев — Влияние анимации на UX в мобильных приложениях
- 1. Влияние анимации на UX в мобильных приложениях Кирилл Голышев
- 2. Немного истории Рекомендации Microsoft – кратчайший путь между двумя точками – оптимальная длительность анимации не более 200 мс
- 4. Анимация - это круто!
- 5. Анимация - это круто! Сенсорные интерфейсы Изменение способов взаимодействия Почему? – использование жестов – активное внедрение речи – использование движения Проблемы – уменьшение рабочей области – технические ограничения
- 6. Почему анимация влияет на UX? 1. Снижает когнитивные нагрузки на пользователя, так как изменения передаются эффективно. 2. Снижает количество визуального дизайна, что повышает восприятие информации. 3. Анимация добавляет характер программному обеспечению.
- 7. Комплексный подход к анимации может повысить удобство использования Где. Как. Зачем?
- 8. Где Определение технических требований и возможностей – платформа – оборудование – размер экрана
- 9. Как Определение метода взаимодействия с пользоватем – реалистичное – абстрактное
- 10. Зачем Определение своих задач и целей 1. Направление внимания 2. Улучшение ориентации пользователя 3. Удержание пользователя в «потоке» действия
- 11. Направление внимания Направление внимания помогает при изменении интерфейса. Это особенно актуальна для небольших элементов, которые появляются или исчезают.
- 12. Улучшение ориентации Анимация перехода между экранами наглядно показывает навигацию. Это передает смысл лучше, чем просто замена одного экрана с другом без анимации.
- 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