1.

1 See design as a fusion of form and

function, communicate it accordingly

1.2 Design is not an art but a craft

1.3 Expect detours and iterations

7.1 Plan and orchestrate the 2.1 Question your own knowledge
final steps and listen
1.4 Design machines as tools for people

7.2 Don’t mistake your HMI

1.5 Be inspired by good ideas of others 2.2 Identify different user types
for a coloring book

7.3 Don’t waste time with effects 1.6 Start early with your HMI design 2.3 Identify and prioritize use cases
that are just for show

2.4 Pay attention to context

7.4 Observe the fundamental
rules for icons
RETHINKING 2.5 Look for pain points
7.5 Orchestrate the rollout
HMI DESIGN

7.6 Think ahead 2.6 Use an idea space

STYLING AND UNDERSTANDING

FINISHING CONTEXT
1
7 2
6.1 Test your prototype with your users
3.1 Start with pen and paper
HMI
6.2 Define a target and
specific questions
6 DESIGN 3 3.2 Plan your HMI the way you
TESTING SKETCHING THE would plan a house
6.3 Focus on the most PROTOTYPES “BIG PICTURE”
important aspects
5 4 3.3 Sketch the essential screens first

6.4 Test your prototype on-site

3.4 Pay attention to the “light switches”

6.5 Follow a task-based and CONCEPTUALIZING DESIGNING

explorative testing strategy 3.5 Design three true alternatives
INTERACTION VISUALITY
6.6 Document the results in a concise
report to support the implementation 3.6 Discuss your designs
of the user feedback with others

4.1 Build a model; then build

5.1 Opt for a menu or a workflow the house
based on the context

4.2 Use modules, templates, and mock-ups

5.2 Design error messages that support
the user in resolving the issue
4.3 Avoid cluttered interfaces

5.3 Prevent user mistakes

4.4 Pay attention to alignment and spacing
wherever you can

4.5 Use a dashboard

5.4 Protect users from small clicks
with huge consequences
4.6 Don’t forget about analog buttons
and interactions
5.5 Forget manuals; help users
right away instead

5.6 Use animated content for added

value, not for its own sake

HMI design tips

The HMI design process
DFFA-Y10546-00-7600 -- Poster HMI Design Masterclass Tips

in 7 steps
siemens.com/hmi-design-masterclass
 The HMI design process in 7 steps
Steps Chapter Tips Chapter Tips

No matter how much your machine excels

See design as a fusion of form and Good design creates added value, supports in terms of performance, you have to be
1.1 operations, saves time, and reduces errors.
1.4 Design machines as tools for people able to operate it efficiently to make it
function, communicate it accordingly
productive.

Rethinking You can sum up the essence of good Collect and save good ideas so that you
1 1.2 Design is not an art but a craft design in a few rules and principles that 1.5 Be inspired by good ideas of others can adapt them for a new context at a
HMI design you can learn to use. later point in your project.

Designing is exploring: creating and HMI design doesn’t need a huge budget,
1.3 Expect detours and iterations discarding different solutions is part of 1.6 Start early with your HMI design but it needs some time – so start well
the process. before the machine is ready.

Avoid the pitfall of overestimating

The work environment impacts the design.
Question your own knowledge your own knowledge about users.
2.1 Asking specific questions and
2.4 Pay attention to context Physical and organizational aspects matter
and listen as much as devices.
listening to answers pays off.
Under-
Different users have different needs. Factors that are a pain for users have a
2 standing 2.2 Identify different user types A simple persona profile is sufficient to
document user requirements.
2.5 Look for pain points negative impact on productivity. Find
solutions for them with your HMI.

context To save ideas for later in the project, you

Use cases that have a high relevance and
need a place to collect them; this place
2.3 Identify and prioritize use cases frequency are assigned a matching high 2.6 Use an idea space should provide a clear structure and be
priority in the design phase.
visible.

The initial task is to create quick sketches of The work environment impacts the design.
3.1 Start with pen and paper first concepts. Working at the computer will 3.4 Pay attention to the “light switches” Physical and organizational aspects matter
tempt you to lose yourself in the details. as much as devices.

Sketching the Plan your HMI the way you would plan Condo or mansion? How many rooms and
You should explore several approaches that
3 3.2
a house
floors does the house need? Where do you 3.5 Design three true alternatives have different concepts and functionality.
“Big Picture” want the doors and other features?

Which functions have a high relevance and Getting feedback from an outside point
3.3 Sketch the essential screens first frequency? Where is the best place to put 3.6 Discuss your designs with others of view is important for assessing which
them? approach to follow in the detailed design.

Your first goal is to create a prototype that Aligning elements to optical guides and
you can test with users and that you can Pay attention to alignment and creating space around components,
4.1 Build a model; then build the house optimize. Then you can build your interfaces
4.4 text, and frames will improve the overall
spacing
for the screen. appearance of your design.

Designing Use modules, templates, and You can assemble a prototype very effi- A functional and visually well-designed
4 4.2
mock-ups
ciently with “prefab” components – styling 4.5 Use a dashboard dashboard is an easy way to create a “wow”
visuality will take place later. effect with users and is fun to work with.

When your interfaces get too crowded, Important standard interactions that need
sort functions according to priority and Don’t forget about analog buttons and to be accessible at all times can be imple-
4.3 Avoid cluttered interfaces group secondary functions in tabs or
4.6 mented as hardware buttons and switches
interactions
subscreens. to complement the touch interface.

Depending on the specific task, a

To prevent costly mistakes, be sure to ask
Opt for a menu or a workflow based well-sorted “functions shelf” (menu) or a Protect users from small clicks with
5.1 “functions process” (workflow) will work
5.4 for confirmation by including “Do you real-
on the context huge consequences ly want to…” pop-ups or an “Undo” button.
better for your users.
Conzep-
Good and bad error-handling routines
Design error messages that support Forget manuals; help users right away Small “Info” icons with contextual help in
5 tualizing 5.2
the user in resolving the issue
affect the performance of the machine –
and the image of its manufacturer.
5.5
instead the right place can save users a lot of time.

interaction
The design and labeling of input boxes will Animated content should always provide
Prevent user mistakes wherever Use animated content for added value,
5.3 help users work with your HMI without 5.6 additional, relevant information and be
you can making mistakes. not for its own sake functional and support users in their work.

As a designer, you are certain your HMI is On-site testing will help motivate users,
6.1 Test your prototype with your users absolutely brilliant. But what really matters 6.4 Test your prototype on-site and informal feedback like frowns and smiles
is what the users think of it. will help you identify issues in your HMI.

Testing Define a target and specific An efficient testing process focuses on

Follow a task-based and explorative First, watch users as they explore the HMI
6 6.2
questions
complex areas or functions that are critical 6.5
testing strategy
and then test whether they can handle the
prototypes or new. use cases successfully.

Test the most important use cases with Document the results in a concise Ask users to name 5 things that they like
five users in no more than one hour. This
6.3 Focus on the most important aspects should be sufficient to identify the bulk of
6.6 report to support the implemen- or dislike and the 3 top improvements they
tation of the user feedback would like to see in your HMI.
the issues in your HMI design.

Three topics have top priority: optimizing

Don’t mix icons with different styles: use
your HMI based on the results from the Observe the fundamental rules for
7.1 Plan and orchestrate the final steps testing, visual fine-tuning, and planning
7.4 either black-and-white or colored, planar or
icons outlined styles.
the rollout.

Styling and Don’t mistake your HMI for a

Keep these fundamental rules in mind:
shaded white as a background, low-key
Be sure to communicate the added value
of your HMI for users and the application,
7 7.2
coloring book colors for components, and bright colors
7.5 Orchestrate the rollout and design the marketing materials with
finishing for elements that need to stand out. the same care and quality as your HMI.

As a rule, 3D effects and color gradients Archive insights and assets that you can use
Don’t waste time with effects that are
7.3 seldom have merit, and they should be 7.6 Think ahead in future projects, such as user personas,
just for show used only when they do. basic designs and elements, and so on.

For additional resources and free downloads, please visit our website:
siemens.com/hmi-design-masterclass