A Summary of the

HMI Design Masterclass

Oliver Gerstheimer
SIEMENS
Oliver Gerstheimer, SIEMENS
 Unit 1: Rethinking HMI Design
Tip
See design as a fusion of form and
1
function, communicate it accordingly
2 Design is not an art but a craft
3 Expect detours and iterations
4 Design machines as tools for people
5 Be inspired by good ideas of others
6 Start early with your HMI design
Comment
Good design creates added value, supports operations, saves time,
and reduces errors.
You can sum up the essence of good design in a few rules and
principles that you can learn to use.
Designing is exploring: creating and discarding different solutions is
part of the process.
No matter how much your machine excels in terms of
performance, you have to be able to operate it efficiently to make
it productive.
Collect and save good ideas so that you can adapt them for a new
context at a later point in your project.
HMI design doesn’t need a huge budget, but it needs some time –
so start well before the machine is ready.
 Unit 2: Understanding Context
Tip
Question your own knowledge and
1
listen
2 Identify different user types
3 Identify and prioritize use cases
4 Pay attention to context
5 Look for pain points
6 Use an idea space
Comment
Avoid the pitfall of overestimating your own knowledge about
users. Asking specific questions and listening to answers pays off.
Different users have different needs. A simple persona profile is
sufficient to document user requirements.
Use cases that have a high relevance and frequency are assigned a
matching high priority in the design phase.
The work environment impacts the design. Physical and
organizational aspects matter as much as devices.
Factors that are a pain for users have a negative impact on
productivity. Find solutions for them with your HMI.
To save ideas for later in the project, you
need a place to collect them; this place should provide a clear
structure and be visible.
Unit 2: Context Checklist
 Unit 3: Sketching the “Big Picture”
Tip Comment

The initial task is to create quick sketches of first concepts. Working

1 Start with pen and paper
at the computer will tempt you to lose yourself in the details.
Plan your HMI the way you would plan a Condo or mansion? How many rooms and floors does the house
2
house need? Where do you want the doors and other features?
Which functions have a high relevance and frequency? Where is
3 Sketch the essential screens first
the best place to put them?
The work environment impacts the design. Physical and
4 Pay attention to the “light switches”
organizational aspects matter as much as devices.
You should explore several approaches that have different concepts
5 Design three true alternatives
and functionality.
Getting feedback from an outside point of view is important for
6 Discuss your designs with others
assessing which approach to follow in the detailed design.
 Unit 4: Designing Visuality
Tip
1 Build a model; then build the house
2 Use modules, templates, and mock-ups
3 Avoid cluttered interfaces
4 Pay attention to alignment and spacing
5 Use a dashboard
Don’t forget about analog buttons and
6 times can be implemented as hardware buttons and switches to
interactions
Comment
Your first goal is to create a prototype that you can test with users
and that you can optimize. Then you can build your interfaces for
the screen.
You can assemble a prototype very efficiently with “prefab”
components – styling will take place later.
When your interfaces get too crowded, sort functions according to
priority and group secondary functions in tabs or subscreens.
Aligning elements to optical guides and creating space around
components, text, and frames will improve the overall appearance
of your design.
A functional and visually well-designed dashboard is an easy way to
create a “wow” effect with users and is fun to work with.
Important standard interactions that need to be accessible at all
complement the touch interface.
 Unit 5: Conceptualizing Interaction
Tip Comment

Depending on the specific task, a well-sorted “functions shelf”

Opt for a menu or a workflow based on
1 (menu) or a “functions process” (workflow) will work better for
the context
your users.
Design error messages that support the Good and bad error-handling routines affect the performance of
2
user in resolving the issue the machine – and the image of its manufacturer.
The design and labeling of input boxes will help users work with
3 Prevent user mistakes wherever you can
your HMI without making mistakes.
Protect users from small clicks with To prevent costly mistakes, be sure to ask for confirmation by
4
huge consequences including “Do you really want to...” pop-ups or an “Undo” button.
Forget manuals; help users right away Small “Info” icons with contextual help in the right place can save
5
instead users a lot of time.
Use animated content for added value, Animated content should always provide additional, relevant
6
not for its own sake information and be functional and support users in their work.
 Unit 6: Testing Prototypes
Tip
1 Test your prototype with your users
2 Define a target and specific questions
3 Focus on the most important aspects
4 Test your prototype on-site
Follow a task-based and explorative
5
testing strategy
Document the results in a concise
6 report to support the implementation of
the user feedback
Comment
As a designer, you are certain your HMI is absolutely brilliant. But
what really matters is what the users think of it.
An efficient testing process focuses on complex areas or functions
that are critical or new.
Test the most important use cases with five users in no more than
one hour. This should be sufficient to identify the bulk of the issues
in your HMI design.
On-site testing will help motivate users,
and informal feedback like frowns and smiles will help you identify
issues in your HMI.
First, watch users as they explore the HMI and then test whether
they can handle the use cases successfully.
Ask users to name 5 things that they like or dislike and the 3 top
improvements they would like to see in your HMI.
Unit 6: Collecting Feedback
 Unit 7: Styling and Finishing
Tip Comment

1 Plan and orchestrate the final steps
Don’t mistake your HMI for a coloring
2 shaded white as a background, low-key colors for components, and
book
Don’t waste time with effects that are
3
just for show
Observe the fundamental rules for
4
icons
5 Orchestrate the rollout
6 Think ahead
Three topics have top priority: optimizing your HMI based on the
results from the testing, visual fine-tuning, and planning the rollout.
Keep these fundamental rules in mind:
bright colors for elements that need to stand out.
As a rule, 3D effects and color gradients seldom have merit, and they
should be used only when they do.
Don’t mix icons with different styles: use either black-and-white or
colored, planar or outlined styles.
Be sure to communicate the added value of your HMI for users and
the application, and design the marketing materials with the same
care and quality as your HMI.
Archive insights and assets that you can use
in future projects, such as user personas, basic designs and elements,
and so on. Which functions have a high relevance and so on.
 References
• https://new.siemens.com/global/en/products/automation/simatic-
hmi/design-masterclass.html
• https://new.siemens.com/global/en/products/automation/simatic-
hmi/hmi-design-masterclass-unit7-
nx01.html?elqTrackId=01af77cff3de4780806f628fe6ba04cc&elq=6b8
52d4527094b95840ba6d69c3fc840&elqaid=18199&elqat=1&elqCam
paignId=8755#Unit7