Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

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

  • Als Erste(r) kommentieren

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

  1. 1. Влияние анимации на UXв мобильных приложенияхКирилл Голышев
  2. 2. Немного историиРекомендации Microsoft– кратчайший путь между двумя точками– оптимальная длительность анимации не более 200 мс
  3. 3. Наши дниWindows 8
  4. 4. Анимация - это круто!
  5. 5. Анимация - это круто!Сенсорные интерфейсыИзменение способоввзаимодействияПочему?– использование жестов– активное внедрение речи– использование движенияПроблемы– уменьшение рабочей области– технические ограничения
  6. 6. Почему анимация влияетна UX?1. Снижает когнитивные нагрузки на пользователя, так какизменения передаются эффективно.2. Снижает количество визуального дизайна, чтоповышает восприятие информации.3. Анимация добавляет характер программномуобеспечению.
  7. 7. Комплексный подходк анимации может повыситьудобство использованияГде. Как. Зачем?
  8. 8. ГдеОпределение технических требований ивозможностей– платформа– оборудование– размер экрана
  9. 9. КакОпределение метода взаимодействия с пользоватем– реалистичное– абстрактное
  10. 10. ЗачемОпределение своих задач и целей1. Направление внимания2. Улучшение ориентации пользователя3. Удержание пользователя в «потоке» действия
  11. 11. Направление вниманияНаправление внимания помогает при изменении интерфейса.Это особенно актуальна для небольших элементов, которыепоявляются или исчезают.
  12. 12. Улучшение ориентацииАнимация перехода между экранами наглядно показываетнавигацию. Это передает смысл лучше, чем просто заменаодного экрана с другом без анимации.
  13. 13. Улучшение ориентации
  14. 14. Удержание в «потоке» действия1. Анимация может помочь в поддержании «потока»пользователя. Она помогает соединить элементы,которые без нее казались бы «разованными».
  15. 15. 2. Анимационные переходы могут быть использованы чтобыпользователь не почувствовал задержки при передачи данныхили ответа аппаратной части.
  16. 16. Разные типы анимациивоспринимаютсяпользователем поразному
  17. 17. FadeПользователь воспринимаеттранзакцию, как быструю, когдаизображение начинает быстроисчезать. Сама же скоростьугасания изображения не имеетзначения. Для пользователясамым важным является, какможно увидеть новый контент.Например, получить проблескнового изображения.
  18. 18. Progress barУвеличение скорости прогрессбара к концу загрузки,воспринимаетсяпользователем лучше, так какпоявляется ощущение, чтозагрузка близка к завершению.
  19. 19. ZoomЭффект масштабированияне влияет на восприятиескорости работыприложения. Тем не менее,движение имеет некотороевлияние на восприятие.
  20. 20. По материаламAnimations in User Interface Design: Essential Nutrient In-stead of Eye CandyJanuary 31st, 2010 by Markus WeberThe Science of AnimationJuly 29th, 2011 by Kai DellerAnimated UI Transitions and Perception of Time – a UserStudy on Animated Effects on a Mobile ScreenJussi Huhtala, Ari-Heikki Sarjanoja, Jani Mäntyjärvi, Minna Isomursu, JonnaHäkkiläNokia Research Center, Oulu, FinlandApril 10–15, 2010, Atlanta, GA, USA

×