Webinar: Embedded GUI Design -...
Transcript of Webinar: Embedded GUI Design -...
![Page 1: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/1.jpg)
Webinar:
Embedded GUI Design
![Page 2: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/2.jpg)
Webinar walk through
• Questions
• Polls
• Handouts
• Q&A during & after the webinar
![Page 3: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/3.jpg)
Webinar
Embedded GUI Design
![Page 4: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/4.jpg)
Today’s webinar team
• Henrik Goul – User Experience Designer
• Jørgen Mygind – Business Development Manager
• Kim Jönsson – User Interface Designer
• Søren Mikkelsen – Account Manager
![Page 5: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/5.jpg)
5 Fundamentals for Embedded GUI design
1. Context
2. Performance & Hardware
3. Rules & Recognizability
4. Consistency
5. Responsiveness & Animation
![Page 6: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/6.jpg)
Embedded GUI design
1. Context
![Page 7: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/7.jpg)
1. Context
• ”Who are the users and what are their needs?”
• Not only a consideration for the UX Designer
• ”Who are we building this for?” Alignment across team gives better results
![Page 8: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/8.jpg)
1. Context
362 companies participated
95% say they are customer focused
80% say they deliver a superior experience
8% of customers agree that the companies deliver superior experiences
www.bainn.com: ”Closing the delivery gap”
![Page 9: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/9.jpg)
1. Context
• Define your users, e.g. children, elderly, low-/high levelof technical knowledge, etc.
• Moveable product or fixed on wall?
• Industrial setting or private use?
• Size of texts and buttons
![Page 10: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/10.jpg)
1. Context - Tips
• Keep focus on your end-users throughout development
• Talk to your users, test your ideas and receive feedback
• Kick-off a project with user research and/or a workshop to gather domain knowledge and apply it on the UI youare designing.
![Page 11: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/11.jpg)
Embedded GUI design
2. Performance
![Page 12: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/12.jpg)
2. Perfomance
• Consider performance options early
• Low-cost hardware can deliver high quality experiences
• Know the limits of hardware, and play to its’ strenghts
• Usually multiple solutions – TouchGFX is flexible
• Color possibilities on display
![Page 13: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/13.jpg)
2. Perfomance - Tips
• Avoid disappointment – check colors in display
• Work closely with developers to identify options on hardware and in TouchGFX
• Evaluate performance as you go – find alternative solutions when needed
• Performance should be tested on hardware, not the PC Simulator
![Page 14: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/14.jpg)
Embedded GUI design
3. Rules & Recognizability
![Page 15: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/15.jpg)
3. Rules & Recognizability
• Smartphones define rules for touch screen navigation
• Most people use smartphones everyday – this forms ourexpectations to touch screens.
• Consider well-established conventions (X in top-right etc.)
• Visual hierarchy enables you to guide the user in the UI.
![Page 16: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/16.jpg)
3. Rules & Recognizability - Tips
• Get inspired by smart phone UI design
• Check if you are following rules – break them only if reallyneeded
• Take advantage of strong visual hierarchy, to guide the user and make the UI recognizable
![Page 17: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/17.jpg)
Embedded GUI design
4. Consistency
![Page 18: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/18.jpg)
4. Consistency
• Be consistent with your choices in the UI.
• Minimize learning in the UI for the user, before he cantake full advantage of your product
• The goal of the user is not to navigate the UI – it is to solve a task.
• Subconcious clues in visual design
![Page 19: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/19.jpg)
4. Consistency - Tips
• Design for user expectations
• Be consistent in graphical design
• Be consistent in general navigation
• Make the UI predictable
![Page 20: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/20.jpg)
Embedded GUI design
5. Responsiveness & Animation
![Page 21: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/21.jpg)
5. Responsiveness & Animation
• Humans are communicative creatures – we needfeedback for our actions
• Responsiveness is vital for delivering a good userexperience.
• Animations on smartphone vs. embedded UI
Most sold mobile phone 2005(13 years ago)
![Page 22: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/22.jpg)
5. Responsiveness & Animation - Tips
• Provide feedback (pressed state on buttons, messageson changes, etc.)
• Avoid user frustration - Let the user know that UI interactions have an effect
• Animations are important, but beware – current trends might not last 5-10 years
Most sold mobile phone 2005(13 years ago)
![Page 23: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/23.jpg)
TouchGFX Designer
![Page 24: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/24.jpg)
Handout
• Tips & Tricks for Embedded GUI Design PDF
![Page 25: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/25.jpg)
• Free evaluation version of TouchGFX:
https://touchgfx.com/try-touchgfx/evaluation/
• Visit our TouchGFX Help Center – Community and Knowledge Base with articles, videos,
examples etc.:
https://touchgfx.zendesk.com/hc/en-us
• Previous and upcoming webinars and presentations:
https://touchgfx.com/touchgfx-webinars/
Useful links
![Page 26: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/26.jpg)
• June 28th: Hardware Integration
• September 12th: Topic TBD
• Selecting the Right Display – More information to come
• Smart Embedded Display Modules from EDT – More information to come
• Any suggestions?
Webinars to come
![Page 27: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/27.jpg)
• Online after the webinar
• All unaswered questions will answered verbally or by writing
Q&A
![Page 28: Webinar: Embedded GUI Design - STMicroelectronicssw-center.st.com/.../Webinar/EmbeddedGuiDesign/TouchGFXEmbeddedGUIDesignSlides.pdfWebinar: Embedded GUI Design . Webinar walk through](https://reader035.fdocuments.us/reader035/viewer/2022070721/5ee1e6c8ad6a402d666c9b4e/html5/thumbnails/28.jpg)
Draupner Graphics A/S │ Finlandsgade 10 – DK 8200 Aarhus N │ Phone: +45 70 27 43 43 │ Copyright ® 2014
Thank Youfor Attending This Webinar
For more information, visit:www. .com
Questions:[email protected]