Webinar: Embedded GUI Design
Webinar:
Embedded GUI Design
Webinar walk through
• Questions
• Polls
• Handouts
• Q&A during & after the webinar
Webinar
Embedded GUI Design
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
5 Fundamentals for Embedded GUI design
1. Context
2. Performance & Hardware
3. Rules & Recognizability
4. Consistency
5. Responsiveness & Animation
Embedded GUI design
1. Context
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
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”
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
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.
Embedded GUI design
2. Performance
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
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
Embedded GUI design
3. Rules & Recognizability
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.
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
Embedded GUI design
4. Consistency
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
4. Consistency - Tips
• Design for user expectations
• Be consistent in graphical design
• Be consistent in general navigation
• Make the UI predictable
Embedded GUI design
5. Responsiveness & Animation
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)
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)
TouchGFX Designer
Handout
• Tips & Tricks for Embedded GUI Design PDF
• 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
• 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
• Online after the webinar
• All unaswered questions will answered verbally or by writing
Q&A
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]