HMI layout and correct display size
Article#: 00103
Date: 2024-10-22
Author: Radim
Before we start designing the layout for our visualization, it is important to have a clear idea of how much information we want to display and which graphic elements should be used to display this information.
It's also crucial to consider the purpose of the visualization and how complex the system or the part of the system that we want to visualize is.
The correct display size is not just about aesthetics but, more importantly, about functionality and ergonomics.
So, what needs to be considered when choosing the right display size?
Displayed text:
The text on the display must be large enough to be easily readable (even for older people with weaker eyesight).
Buttons:
In the case of a touchscreen display, the buttons must be large enough to be easily pressed with a finger.
Additionally, there should be enough space between buttons to avoid accidental pressing of adjacent ones.
Grouping of information:
Certain information must be displayed together on the same screen.
The operator should not have to constantly switch between different screens to compare data or get an overview of multiple related parameters.
Use of graphical elements:
Graphical elements, such as images or graphs, help to improve clarity and the overall comprehension of the visualization.
Therefore, it is important to allocate enough space for these visual elements.
Logical division and clarity:
The screen should not feel cluttered or overwhelming.
Adequate space between logical blocks serves as an effective separator.
Although SVG (Scalable Vector Graphics) technology makes it possible to create visualizations that adapt to different screen sizes and resolutions, it is better to design the layout for a specific size and resolution of the display on which the visualization will be used.
The idea of a universal layout for all screens leads to undesirable compromises when displaying on screens that are either smaller or larger or have a different format than the screen for which the layout was optimally designed.
From the start of development, it's beneficial to know which specific display model the visualization will be shown on because developing and testing on the actual device provides invaluable insights.
This way, you can evaluate how user-friendly the device is, how it responds to touch, its performance, color accuracy, and whether it is bright enough for the intended operating conditions.
© Radim-Automation, 2020–2025. All rights reserved.
Sharing of this article is permitted with proper attribution (link to the original page).
Related previous articles:
- Choosing an HMI display
- HMI is not a web page
- HMI - Don't overdo it with complex design
- HMI - Have a consistent style
- High Performance HMI
- Dream of a platform-independent PLC program
- Graphic designer
- Talk to operators
- Clear signals
- Design considerations for effective HMIS
- Modular software architecture
- Hardware concept
- A good concept = Complete set of suitable solutions
- Are there also any disadvantages?
- Think critically!
- Design machines with a focus on user's abilities and needs
- Learn from your journey!
- Project leader
- Why do automation projects fail?
- Collect all the requirements and sort them!
- Who will operate?
- Functional and intuitive HMI
- HMI and PLC applications should grow together
- Do you really want to start with this?
- I can see what you can not see
- More than just start and stop
- Safety first!
- Do the right things and do them right!
- Don't make it worse!
- Industrial evolution - Listen to your customers and follow new trends!
- Have an expert on hand!
- Ask questions!
- Focus on target!
- Check the result!
- Success is not a matter of coincidence
- Transparency and reliability
- From an idea to a consistent system
Related next articles:
- HMI layout design
- HMI navigation
- HMI - back and forward navigation buttons
- HMI – Don’t hide anything
- HMI - annoying pop-up windows
- What makes an HMI intuitive?
Comment#: 00001
Date: 2025-02-18
User: Radim
Why is the hamburger menu not ideal for industrial visualization?
Recently, the hamburger menu has become increasingly common in industrial HMI systems. While this element is widely used in mobile and web applications, it may not be the best choice for industrial visualization.
The main drawback is that it hides important control elements (buttons) and requires an extra click. Users first have to open the menu before selecting the desired function. This reduces efficiency and can be a problem, especially in environments where speed and clarity are crucial.
A better solution is a fixed toolbar with the key control elements (buttons). It provides immediate access to essential functions, improves user orientation, and reduces the time needed to perform an action. Of course, this should be considered already at the beginning of the project - especially when choosing a sufficiently large display that allows a clear arrangement of the control elements on the screen.
Do you use a hamburger menu in your HMI systems, or do you prefer fixed toolbar with the most important buttons?