EN 
DE Fundamentals for UI developers
Authors: Jürgen Messerer, Patrick Labud, bbv Software Services AG
Contribution – Embedded Software Engineering Congress 2015
In the age of smartphones and tablets, even in industrial settings, increasing emphasis is being placed on visually appealing and user-friendly interfaces. To ensure customer acceptance of the user interface (UI), several factors must be considered. But how can this be achieved without a UI/UX expert? This article demonstrates how to prevent user stumbling blocks and shows how to design an efficient and intuitive user interface.
introduction
Topics like usability and user experience are not modern inventions. People recognized early on that a system's functionality could be optimized through user experience. A good example of this is the newspaper. Since its invention in the 16th century, the newspaper has undergone numerous changes and adaptations until it became what we know today. The format, in particular, but also the design, of the newspaper has been and continues to be constantly developed.
User interface development follows a very similar process. Two of the people who significantly shaped the development process are Ben Shneiderman, who in 1986... „8 golden rules of interface design“ wrote it down, and Jakob Nielsen, who in 1994 developed a heuristic for checking usability.
The 8 golden rules of interface design
Although the principles are not complete and are limited, through adaptation and extension they help a developer to get started more easily in UI design.
- Strive for consistency:
In similar situations, the action sequences should always be consistent, e.g., the position of a cancel button, layout, color, font, etc. - Ensure universal usability:
Identifying the needs of different users. Users may vary in age, experience, and any disabilities. The system or program should be quick and easy for every user to operate. For example, shortcuts can be provided for experts, and help can be offered for inexperienced users. - Provide informative feedback:
Sufficient feedback on running functions or the system status must always be guaranteed. - Design self-contained dialogues:
The aim is to make the user aware of when an action, function, or sequence of commands is initiated and when it is completed. For example, a shop website guides the user from selecting the product to paying for the goods. The process ends with a confirmation page, after which the transaction is complete. - Offer simple error handling:
The user should not despair if an error occurs. If possible, understandable information about potential causes should be provided. It is very important to offer a way to return to normal system or program operation. - Allow the simple reversal of actions:
The user should be given the option to undo actions taken. - Convey a sense of control:
The user should always feel in control of the system or program. In short, the user acts, and the system reacts – not the other way around. - Relieve the burden on short-term memory:
It should be avoided that the user has to remember too much information in order to, for example, perform subsequent actions on a later page. As a guideline, a person can reliably remember five to seven different pieces of information.
Heuristic for checking usability
Also very useful for UI development is the heuristic that Jakob Nielsen wrote down in 1994:
Visibility of system status
Sufficient feedback on running functions or the system status must always be provided.
Link between the system and the real world
It is helpful to develop corresponding conceptual models based on an analogy from the real world. This makes the functionality much easier for the user to understand or even predict.
User control and freedom
The user should always feel in control. However, the user should not be given unlimited freedom, as this could overwhelm them and lead to mistakes.
Consistency and standards
One should always ensure appropriate internal and external consistency. Furthermore, except in specific exceptional cases, existing standards must always be taken into account.
Error prevention
Potential sources of error should be eliminated early on. The user must also receive sufficient instructions to avoid making mistakes.
Recognition before consideration
Before the user has to think about how to accomplish a function or where to find it, they should be able to recognize it directly from the interface.
Flexibility and efficiency of use
This refers to the necessary balance between shortcuts for experts and detailed assistance for beginners.
Aesthetic and minimalist design
A design should always be aesthetically pleasing, yet minimalist, to avoid unnecessary confusion and loss of overview.
User help and support for errors
Error messages must be clear and understandable. They must describe the problem and a possible solution.
Help and documentation
While it's generally better to operate a system without documentation, sometimes it's necessary to provide help and documentation. This should be easy to search and should outline the steps to solving a problem.
Layout design
With the 8 golden rules and the heuristics of Jakob Nielsen, a developer has good prerequisites to design a user interface in such a way that it is understood and easy to use by the user.
The division of the screen into columns and rows is also important. Almost all UI frameworks, regardless of the language, offer a so-called grid layout. Properties such as margin and spacing can then be set within this layout. Two basic approaches have become established for layout division: All heights and widths are assumed to be multiples of either five units or four units, where pixels, points, em, or other units can be used.
If the division into units of 5 is selected, then only an even-numbered column division can be used. Odd divisions, such as three columns, are not possible. For this reason, it is recommended to choose everything based on units of four. This allows for both even and odd column divisions (see Figure 1)., PDF).
Layouts
Previously, applications were mostly developed with a rigid layout fixed for a specific screen size. Due to the increasing variety of different display sizes and resolutions, the problem gradually arose that the application had to be recompiled for each newly selected screen (see Figure 2)., PDF).
To address this problem, in addition to fixed layouts, two mechanisms for creating variable layouts are commonly used. The following layouts or designs are distinguished:
- Static/Fixed:
The layout is fixed to a specific display size. It is very easy to implement, but on the other hand, it requires manual adjustment for each additional display size.
- Fluid/Liquid:
The layout adapts to the screen size in both width and height. Elements are either enlarged or reduced. This type of design works well for screens with only slight differences in size. However, with significant screen differences, the elements become overstretched. In such cases, the application must be manually adjusted in the code.
- Responsive:
The layout adapts to the screen size here as well. However, it's not just the size of the elements that changes, but also the arrangement of the content within those elements. Additionally, elements are shown or hidden, or moved to a menu. Implementing and testing such a layout is significantly more complex than with other types. In return, the application dynamically and continuously adapts to any desired screen size.
Summary
Increasingly, customers in the industrial sector are requesting user interfaces similar to those found on smartphones. These interfaces must be efficient and effective to operate in order to satisfy customers.
By using the „8 golden rules of interface design“ and taking into account the 10 heuristics of Jakob Nielsen, a software developer can protect himself from some pitfalls of UI development.
Bibliography and list of sources
https://www.cs.umd.edu/users/ben/goldenrules.html
https://www.nngroup.com/articles/ten-usability-heuristics/
Responsive Design Example: https://www.liquidapsive.com/
Implementation – our training & coaching
Do you want to bring yourself up to date with the latest technology?
Then find out more here MircoConsult offers training courses/seminars/workshops and individual coaching on the topic of implementation/embedded and real-time software development.
Training & coaching on the other topics in our portfolio can be found here. here.
Implementation – Expertise
Valuable expertise in the field of implementation/embedded and real-time software development is available. here Available for you to download free of charge.
You can find expertise on other topics in our portfolio here. here.
