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:touchgfx-info@draupnergraphics.com