Packaging & Filling Systems GUI — UX Design Guidance
Discover the best UX design practices from our benchmarking of packaging & filling systems.
Creative Navy has meticulously analysed leading packaging and filling system solutions, uncovering key design patterns to inform the creation of intuitive GUIs.
These systems play a crucial role in various industries, ranging from the food and beverage sectors to cosmetics, household products and even pharmaceuticals. The systems responsible for these operations need to be developed with the highest rigour, to maintain quality and avoid safety hazards.
As with any type of software, the user needs to be able to efficiently use it, without error. The interface is the point of contact between the user and the machine, as a result, the UX design needs to be done well.
While the reasons for having a well-designed GUI are easy to understand, many pieces seem to be lacking in this department. Efficiency, safety, onboarding, adaptability and monitoring are all directly impacted by poor UX — this needs to be fixed.
At Creative Navy we specialise in embedded GUI design of all sorts, offering solutions to industries across many diverse sectors, including packaging & filling systems. Our team of researchers have carefully benchmarked the most popular solutions available on the market, to pinpoint some of the common design patterns and to offer helpful guidance in creating packaging & filling systems’ GUIs.
Human error is minimised with efficient UX.
Production is boosted by well-designed GUIs.
The insight gathered through this in-depth research is beneficial both for experienced designers looking to improve their work and even for beginners who want to tackle the UX design work of this challenging niche sector.
Dashboards UX Benchmarking
Krones Connected HMI
The dashboard presents itself with a clean aesthetic:
- The use of white space is quite generous, allowing for easier readability of the different elements onscreen.
- There are a few visual aids present on the dashboard — graphs and illustrations. These give a better perspective to the user regarding the state of the machine.
- KPI (Key performance indicators) and parameters are displayed clearly — Production Counter, Min and Max time, Availability etc. This allows the operator to gain a full understanding of the system all on one single screen.
KOCH easyControl
This dashboard has a visible grid layout, showcasing important production parameters, with good visual hierarchy and a lot of spacing between different elements.
- Similar to the Krones dashboard, these visual aids are a key part of the design.
- The speed indicator uses a circular gauge chart that is colour-coded in order to represent optimal and suboptimal speeds.
- By designing the interface as such, the operator has access to all relevant information and references at a quick glance.
SIG Cruiser — SIG NEO
The SIG NEO dashboard interface has a slick design. There is quite a large amount of information displayed — this is done using a number of smart data visualisation tools, such as charts, graphs and illustrations.
- The beverage carton visual is eye-catching. It is positioned right in the middle of the screen and could be considered a clever way of allowing operators to quickly make changes regarding setup elements (such as top forming, filling, bottom temperature and closure).
- The output indicator uses two arrows to indicate the production number. A longer green arrow represents the good packages while the smaller red one signifies the bad package.
Fogg Filler
The Fogg dashboard is not as visually appealing as some other previous examples.
- In terms of the design, there is an array of buttons present on the dashboard but little information about production status or settings.
- As a non-expert user, it would be very hard to determine what each button does. The only ones which could be easily understood are found on the left-hand side — these have familiar labels.
- This lack of information directly translates to cumbersome operations and increased difficulty in learning the interface.
- Visual representations of certain functions are only visible when the user navigates through a few layers of the interface. These visuals are, however, never present at a whole system level — this is not found within the other GUIs benchmarked.
Dashboard Customisability
A feature that seems to be present in most modern HMI designs is customisable dashboards.
- This is a very beneficial feature as it increases user efficiency while aiding in the overseeing of different kinds of parameters and settings. In short, the ability to customise the dashboard gives the user more control.
- Such flexibility has a significant impact on the user experience.
Krones Connected HMI
Krones has a second screen on the dashboard view. This is a dedicated view for operator-specific widgets.
- Each operator can pick their preferred widgets and position them freely wherever they desire on the screen. This level of customisability allows for a much more efficient workflow, as different users can have different presets which enable them to work better.
KOCH easyControl
KOCH easyControl offers an array of optional widgets which can be selected and added to the dashboard depending on the operator’s needs.
- This enhances the user experience, allowing each user to set up their own dashboard in a way that suits their workflow best.
Product change
Krones Connected HMI
On the Krones HMI, changing the product type is done simply by dragging the item from the list below to the designated area (on top).
- Including a “Frequently produced” tab alongside an “All types” one comes across as a smart way of decreasing search time.
- It’s a very easy and intuitive process which in turn decreases training time for new staff to operate the machine.
Fogg Filler
For the Fogg interface, we have a bottle size selection from the home screen, which given its large button size, appears to be the main action.
- After tapping the button, a modal window opens with a list selection for different bottle options.
- The options do not display any descriptive information regarding the size or any other key parameters, which is a major downside.
KOCH easyControl
There are a couple of ways to reach the format management screen.
- One being from the main menu, and the other from the top bar.
- In the Format Manager window, the left side displays a list of available formats, with the currently selected format highlighted or indicated in some way.
- On the right side, there are format details and information regarding the product, as well as actions such as “Activate”, “Discard” and “Save”.
- An interesting feature of the KOCH interface is the “Compare values” action.
- This allows for a quick comparison of parameters between different products and make adjustments on the spot.
- Simply tapping the arrow button on the “Copy” column will take the value from the basic format and set it to the comparative format.
- The parameters that were changed by the operator will have an asterisc icon next to them to indicate which items have changed.
- Increasing production management efficiency is facilitated through this approach, offering operators a straightforward experience.
Timeline
Krones Connected HMI
On the top of the Home screen, below the status bar, we see a task timeline covering the whole width of the display.
- Upon a closer look, there is a clear point which shows the present moment (as well as the different future tasks).
- Each task type seems to have a specific icon represented on the timeline, as well as the name and exact time of the specific event.
- We can conclude that this timeline is very much future-focused and it fails to display past events or tasks.
- Once the timeline gets to a specific task, a popup message will appear on the top of the screen notifying the user.
- There is also another task-specific icon popup inside the timeline section.
KOCH easyControl
The Production Trend window shows a timeline of past events or states of the production process.
- We see a legend on the top with 4 distinct states: Production, Setup, Pause/Stop and Error, with a corresponding colour for each state.
- On the timeline section, there are icons for Pause and Error.
- A clear timestamp for these events as we saw in the Krones example is nowhere to be seen.
SIG Cruiser — SIG NEO
Although there isn’t a timeline on the SIG NEO interface, we still see the current and next task/recipe.
- The recipe changes after the target quantity is reached for the current production.
- For each recipe, the target quantity is displayed, along with the user who loaded the current recipe and timestamp, as well as the last person who modified the current recipe and timestamp.
Assembly navigation
Many systems offer an overview of a bigger section of the production line.
- These allow the operator easier management of the different processes which in turn result in fewer and shorter downtime.
KOCH easyControl
- This packaging solution from KOCH shows a detailed 3D model of the entire process, with all the machines and assembly lines working together to achieve the end goal.
- The user can change the orientation of the model from a dropdown, from which the user can select “rear view”, “front view” and “top view”.
- Double tapping on a section would focus the model on the selected section, displaying information and details on a component level.
Pester Pac — Tangius 4.0
Similarly, Pester Pac’s software shows a detailed 3D model of the entire system.
- A distinctive feature of this view is its capability to enable the operator to drag the model freely, thereby allowing for complete 360° rotation in every direction.
- Tapping on a section would focus the model on that particular area of the system, allowing quick changes to different component parameters.
- To get back to the main overview, the user has to tap on the image in the bottom right corner.
General recommendations
- When presenting a significant amount of data, achieving a strong visual hierarchy is essential for clarity and readability. Ensure you guide the user’s gaze by employing contrasting font sizes and ample spacing between elements to facilitate easier parsing of the information by the operator.
- We saw multiple instances of great usage of visual representations of data, with graphs, charts and illustrations. To give more context for a particular parameter, these are great tools to have in your arsenal.
- Touch interactions are the norm, so be sure you make them as easy as possible. We have found great examples, such as the drag and drop for production item change, dragging 3D models to have a 360° view and so on.
- Identify the key functions and make them as smooth as possible, like in the example of KOCH and their product comparison with a quick and easy way to modify product values.
Check out some more of our comprehensive guides:
The Ultimate Guide to Web Wizard Design
HR Software Design Guidance
User Area Design Guidance
The Ultimate Guide to Browser Extensions Design
