HMI – Don't hide anything
Article#: 00107
Date: 2024-11-15
Author: Radim
It is essential for users to always have access to machine status information and control and navigation elements, especially in situations when quick user action is required.
The design philosophy is simple: the less time spent searching for information, the more user-friendly and safer the system.
Techniques for a user-friendly HMI design with regard to the visibility of elements:
1. Establish a fixed layout with essential elements:
Use bars with buttons and machine status indicators that are available on every HMI page.
A quick glance should always reveal if the machine is on or off, if any alarms or warnings are present, what the current production phase is, etc.
2. Avoid dynamic or sliding menus:
Operators must always have an unobstructed view of the available functions, without critical functions or important information being hidden behind sliding panels or dynamic menus.
3. Avoid hiding or removing buttons based on permissions:
If buttons are inactive or inaccessible to a particular user, simply gray them out instead of hiding them.
This prevents confusion and helps users locate functions they know should be on the screen.
A good guideline is: all users can see all functions, but only authorized users can execute specific actions.
4. Keep button positions consistent across HMI pages:
Buttons with the same function should always be in the same location across different HMI pages, which minimizes errors and enhances usability.
5. Disable zooming for the entire HMI page:
Zooming can cause important information to be moved out of the screen.
Only allow the zoom for certain areas, e.g. for trend charts.
6. Avoid scroll bars for the entire HMI page:
The HMI pages should have a fixed layout from the top left to the bottom right.
Scrolling should only be used for tables with parameters or data, but not for the entire screen, so that no essential information is hidden.
7. Popup windows should not cover important information:
Popups should never cover key machine status information.
Ideally, allocate a fixed area for popups, where they won't overlap with controls or critical information.
And then the user should not be allowed to move the popup window.
8. Use visual indicators to 'navigate' users through the problem solving process:
Visual indicators ('eye catcher') help to attract the user's attention and show them the way to solve the problem.
© Radim-Automation, 2020–2025. All rights reserved.
Sharing of this article is permitted with proper attribution (link to the original page).
Related previous articles:
- HMI - back and forward navigation buttons
- HMI navigation
- HMI layout design
- HMI layout and correct display size
- 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
- Graphic designer
- Talk to operators
- Clear signals
- Design considerations for effective HMIS
- Modular software architecture
- Design machines with a focus on user's abilities and needs
- Collect all the requirements and sort them!
- Who will operate?
- Functional and intuitive HMI
- HMI and PLC applications should grow together
- More than just start and stop
- Safety first!
- Don't make it worse!
- What does the customer need?
- Don't disappoint your customer!
- Ask questions!
- Check the result!
- Keep it simple!
- Choose the right tool!
- Development is evolution
- Transparency and reliability
- From an idea to a consistent system
Related next articles:
Comment#: 00001
Date: 2024-11-15
User:
Excellent tips, liked #3.
Comment#: 00002
Date: 2025-01-09
User: Radim
The user of a graphical user interface (visualization) expects a fixed position of the elements on the screen, as he is used to. Therefore, it does not make sense to move or hide elements dynamically. Dynamically moving or hiding elements leads to confusion and a degradation of the user experience. This rule is based on the principles of user-centered design, which focuses on efficiency, predictability and simplicity.
Comment#: 00003
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?
Comment#: 00004
Date: 2025-02-22
User: Radim
If the arrangement of elements on the screen changes dynamically, this can lead to a “layout shift” effect, where the user accidentally clicks on something other than what they intended.
Therefore, I believe that the arrangement of elements on the screen should be fixed for the sake of usability and safety of the machine or system, rather than elements appearing and disappearing based on automatic logic.
Comment#: 00005
Date: 2025-02-23
User: Radim
When something (a part of the system) is deactivated, it is often useful to leave its parameters visible so that it is clear what settings it will have when it is reactivated. It can even be useful for the user to change the parameters before activation to avoid unexpected problems or inappropriate settings.
In a graphical user interface, for example, it is better to leave parameters available (even if they are grayed out or otherwise marked as inactive) than to hide them completely. This helps users to understand the current status and better plan the next steps.