UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized...
Transcript of UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized...
![Page 1: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/1.jpg)
UX Responsiveness & AnimationsMaking your Application Come Alive
![Page 2: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/2.jpg)
UX Responsiveness & AnimationsMaking your Application Come Alive
![Page 3: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/3.jpg)
Setup
• Questions
• Different polls during the webinar
• Survey after the webinar
3
![Page 4: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/4.jpg)
UX Responsiveness & Animations
Speakers:
Henrik Goul – UX Specialist – Mjølner Informatics
Søren Mikkelsen – Account Manager - TouchGFX
![Page 5: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/5.jpg)
Introduction 5
• Mjølner Informatics & TouchGFX
• TouchGFX – STMicroelectronics
• Accelerated roadmap
• TouchGFX 4.10 soon
• The place for Embedded UI Development
• Enjoy!
![Page 6: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/6.jpg)
Learn more about Mjølner’s UI Concept here: www.mjolner.dk/en/user-interface-concept/
![Page 7: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/7.jpg)
What’s in it for you?
• Happier end-users
• Higher product success rate
• Lower need for product support
• Bridging gap between embedded developers & UI/UX designers
7
![Page 8: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/8.jpg)
Agenda
1. Creating a Responsive UI
2. The Importance of Feedback
3. Animations in TouchGFX
4. Animation Speed
+ Animation Examples
8
![Page 9: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/9.jpg)
1. Creating a Responsive UI
![Page 10: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/10.jpg)
Creating a Responsive UI (1/1)
• Applying physical domain knowledge to the digital embedded domain.
• Users want to know where to interact
• Users expect to be delighted with visual effects as they interact with the screen
• Users want to understand the context of the system as it is navigated
• Things to consider when making a UI feel responsive:
• Responsiveness
• Engagement
• Activity
10
![Page 11: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/11.jpg)
2. The Importance of Feedback
![Page 12: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/12.jpg)
2. The Importance of Feedback (1/2)
• For every single action, acknowledge the user instantly
• Was the action successful?
• Do I have to wait for a while?
• Appropriate user feedback is vital for good UI design
• Frequent or minor actions need modest feedback (button states, grey out unavailable
features)
• Rare or major actions need substantial feedback (progress indicator, error message)
12
![Page 13: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/13.jpg)
2. The Importance of Feedback (2/2)
• Feedback Speed
• Immediate feedback teaches the user cause-and-effect relationships in your application; I
press this button – I get a new screen. I adjust this slider - The volume changes.
• Too slow? Research shows that even 100 ms is noticeable and annoys the user.
• Delayed feedback diffuses the cause-and-effect relationship, and the user does not know
exactly why the result happened.
13
![Page 14: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/14.jpg)
3. Animations in TouchGFX
![Page 15: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/15.jpg)
3. Animations in TouchGFX (1/3)
• Two approaches to animation (very simplified):
1. Take advantage of ready-made TouchGFX widgets and transitions as they are
optimized for a lot of commonly used animations seen on modern Smart Phones
(Pro tip: TouchGFX widgets can customized as well)
2. Fully customizable animations that will set you apart from competition.
15
![Page 16: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/16.jpg)
3. Animations in TouchGFX (2/3)
• 1. TouchGFX widgets & transitions:
• Carousel menu
• Transitions
16
![Page 17: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/17.jpg)
3. Animations in TouchGFX (3/3)
• 2. Fully customizable animations:
• Custom logo animations
• Set apart from competition
• Requires some memory (to all images in the animation)
17
Image01 Image11
![Page 18: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/18.jpg)
4. Animation Speed
![Page 19: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/19.jpg)
4. Animation Speed
• First of all
• Keep it short and sweet – animations should compliment the user’s purpose interacting
with the UI, not take over the stage.
• Guidelines (simplified)
• Frequent or minor actions (instantly: no more than 50-80 ms animation)
• Rare or major actions (above 300-400 ms is an issue – if you need more time, consider
progress indication)
• Screen transitions (no more than 250-300 ms, or the UI will feel slow and sluggish)
19
![Page 20: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/20.jpg)
• Q&A after the webinar
• Upcoming webinars:
• EDT’s Smart Embedded Display Modules
• Embedded UI/UX Webinar
• The New TouchGFX 4.10
• Other suggestions?
• Try TouchGFX for free at www.TouchGFX.com
• Visit www.Mjolner.dk for more information or learn more about Mjølner’s
UI Concept here: www.Mjolner.dk/en/user-interface-concept/
![Page 21: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/21.jpg)
More information:
www. .com
www._ ____ .comOr learn more about Mjølner’s UI Concept here: https://mjolner.dk/en/user-interface-concept/
![Page 22: UX Responsiveness & Animationssw-center.st.com/touchgfx/TouchGFX/Webinar/Responsiveness...optimized for a lot of commonly used animations seen on modern Smart Phones (Pro tip: TouchGFX](https://reader033.fdocuments.us/reader033/viewer/2022041704/5e439fe644a8fb710412ec4f/html5/thumbnails/22.jpg)
Thank you for attending.
Hope to see you next time.