In the first part of the article on User Interface design, I wrote about its essential elements and practical principles applied in the design process.
The second part will answer the question about interface consistency and aesthetics.
User Interface design for various devices
It goes without saying that we live in a world of interfaces. We use them when we use laptops, mobile phones, and tablets but also watches, TVs, ATMs, and interactive information boards. They are increasingly an important component of household appliances, car dashboards, and our homes.
Designing interfaces for various devices is difficult because devices are not only different from each other but also differ within the same category. And the differences within one category can be huge. Frequently, part of the problem is the lack of standards. The best example is the TV remote control offered in at least a dozen variants.
What is even more important, devices are used to achieve different goals, and similar functionalities can be the source of significant differences.
Devices are used in various contexts and modes. For example, mobile devices are used primarily for microtasks. TVs mainly serve entertainment.
The differences between devices (particularly important from the UI design perspective) can be grouped into four categories:
- Technological (e.g., operating system, resolution, screen size, and tactility)
- Social (e.g., individual usage vs. collective usage)
- Usage (e.g., possible tasks, usage scenarios, and ways of interaction and navigation)
- Environmental (e.g., related to the device location)
All these issues pose a considerable challenge to interface designers.
For example, the distance from the screen, control tools, and screen size require a different way of thinking about the interface level of complexity.
And about its appearance, size, position, structuring, colors, and typography. And these are only the most fundamental problems.
However, designing graphical user interfaces for multiple devices is not just a matter of responsiveness. (The key principles of Responsive Web Design (RWD) have been covered in a separate article). The application interface design is also the issue of a given device's unique:
- Functionalities
- Reasons for use
- User Interface standards
- Compatibility with other devices
- Technology
- Manner of presentation
- Consistency of the interfaces in a given device within the "ecosystem of devices"
- Content continuity
As a consequence, different adaptation strategies are needed. In the article "User Interface Design Adaptation," Fabio Paterno distinguishes the five most typical ones. He breaks them down according to the criterion of the effect on the User Interface. These are:
- Conservation, e.g., by standard scaling of the User Interface components
- Rearrangement, e.g., by changing the layout
- Simplification/Magnification, e.g., the same UI components with modified presentation
- Increase (also called Progressive Enhancement)
- Reduction of Interface components (also called Graceful Degradation).
You can correctly assume that interface consistency is the most important issue for the user. User interface design must, first of all, be oriented toward solving this problem.
The UI Design that your business needs!
User Interface design principles: Interface Consistency
What is consistency? Why should interfaces be consistent? Consistency is using once-adopted solutions in an unmodified form in different contexts. Consistency:
- Minimizes cognitive load.
- Accelerates learning how to use the interface.
- Economizes the acquired knowledge; it can be reused.
- Minimizes the time and maximizes the sense of convenience and comfort.
A consistent interface is, first of all, an interface that is predictable and works in accordance with once-established patterns and principles. The interface consistency is primarily the consistency in terms of:
- Language (names)
- Visual appearance (aesthetics)
- Functions
Consistent terminology across the entire system allows you to avoid distractions, misinterpretations, and ultimately performing unintended tasks. Therefore, you should strive to:
- Assign one name to each function, task, process, etc.
- Use terminology that is as familiar, easy to understand, straightforward as possible, and already in use.
- Make the terminology appropriate to the tasks and goals.
- Avoid creating new terms, in particular, neologisms or abstract terms loosely connected to the essence of the function, task, or process designated by the term.
- Define names as precisely and understandably as possible.
- Use as natural language as possible.
- Universally apply once-adopted language and naming conventions in user manuals, promotional materials, and technical documentation.
Visual consistency, sometimes called style consistency, is the method of unifying and repeating the following adopted schemes:
- Color
- Iconographic
- Typographic
- Visual style (e.g., Flat Design)
- Proportions, dominant shapes, and formal arrangements
- The appearance of function, navigation, information, and warning components
Visual consistency should also be achieved by reference to the existing design standards. The design as a whole and as the sum of elements should be understandable and familiar to the users.
Wrongly interpreted originality and the departure from visual conventions and standards make the user perceive the interface as demanding and difficult. It significantly increases the time needed to achieve goals and perform tasks.
User habits and expectations based on them are vital. Placing the logo in the bottom right corner contributes very little. But it changes a lot in the reception of an application. The standard suggests putting the logo in the upper left corner. The same applies to search boxes, contact forms, and trustmark positions.
Similarly to linguistic, visual, and aesthetic issues, the functionalities should also work consistently and predictably. A change in the interface "behavior" and the difference in the results of similar actions in different locations within an application are perhaps the most shocking.
An interface working in a discontinuous and inconsistent manner is an interface that does not inspire confidence and raises the level of anxiety. It does not guarantee that you will achieve the intended results.
An interface whose components responsible for navigation and achieving goals operate inconsistently is perceived as frustrating and difficult. Usually, it is considered malfunctioning. The fewer surprises, the better the first user impression.
Remember that user expectations arise from using products in the same category. Standards, patterns, and conventions should be creatively developed rather than ignored.
A consistently developed interface primarily:
- Increases the application usability
- Improves the user experience
- Gives a sense of peace, order, harmony, and security
- Facilitates learning and operation
- Promotes the speed of achieving goals
- Responds to the users' needs
- Enhances the User Flow
The interface consistency is, in turn, promoted by answering the following questions:
- Does each component work and look the same in different contexts?
- Are the actions, appearance, and names in line with the expectations?
- Are all interface components labeled?
- Are the components separated from one another (individually and as groups) appropriately labeled to facilitate their identification?
- Are all graphic components of good quality, do not contain errors, and are displayed correctly regardless of the resolution, screen, and window size?
- To what extent the adopted solutions are easier/more difficult than the standard ones?
When analyzing and verifying interface consistency, you should also consider the following:
- Abbreviations of the names and terms used in user interactions
- Units of measurement
- Symbols (in particular in terms of their comprehensibility and cultural relevance)
- Layout and arrangement of components
- Consistency of text (style and tone)
Consistently designed applications provide their users with fast learning already with information about the type of functionality. In other words, when you know how the function for submitting a request for a proposal works, you can guess how it can / should work in the currently explored application. You expect that it will work in accordance with your previous experience.
Thanks to this, the operation mode of a specific function can quickly change from highly consciously controlled into semiautomatic and eventually automatic. An interface should be sufficiently consistent to minimize the learning time and make operation habitual.
Aesthetical Graphical User Interface (GUI) design
Finally, let’s consider the issue of interface aesthetics. Should it be visually attractive? Should it be aesthetically pleasing? Do the issues of attractiveness apply to interface design? The correct answer is yes, yes, and yes. And all this is due to the Aesthetic-Usability Effect.
In the article “The Aesthetic-Usability Effect,” the researchers from Nielsen Norman Group define this concept as the users’ tendency to perceive attractive products as more usable.
It is a general rule applicable to all human-created objects, not only digital products. Usually, devices and objects that are visually attractive and aesthetic are considered more effective than they actually are.
The users respond positively to aesthetic interface designs and are more tolerant of minor problems with their usability.
Therefore, when designing interfaces, you cannot neglect aesthetic considerations. Also, remember that an aesthetic design does not mean a subjectively visually attractive design. In practical terms, it instead means the application of the principles that make it harmonious, consistent, and clear. The way of organizing the components and assigning them graphical forms, proportions, distances, and relations promotes interface aesthetics.
The arrangement of components and establishing visual hierarchies allow you to control the users’ view and establish focal points. They promote clarity and help direct attention to the most important components from the usability perspective. It enables you to support finding the desired components in the process of page or application card scanning.
A clear visual hierarchy is promoted by establishing the sequence of components displayed. Each time, the same order and sequence should be maintained.
A hierarchy establishes order, reduces cognitive loads, and eliminates the sense of chaos, confusion and helplessness.
The most universal and effective methods to achieve this effect are, of course, the diversification of sizes and proportions, the use of perspective, color, light and contrast highlighting, and typography.
Each of the above issues is a topic for a separate article. Therefore, I will only mention the use of color, which significantly affects the interface availability. Most of us have the ability to distinguish all colors, but it is estimated that one man in ten and one woman in a hundred sees only a limited palette of colors.
For this reason, color cannot be the only way to convey information in an interface. It should be supplemented with verbal messages and/or icons and symbols. The interface aesthetics is also provided by a clear color contrast between the components.
Visual clarity is best achieved by grouping components and using abbreviations in the form of metaphors and symbols. The use of metaphors and symbols significantly accelerates and facilitates user-interface communication, but their selection should comply with the principle of maximum comprehensibility and familiarity.
In other words, if you choose to use metaphors, they must be well-known, accepted, and used in other contexts.
Interface design. Summary
- We live in a world of interfaces. We use them when using a variety of devices.
- The devices are used in different contexts and modes.
- A number of variables require a completely different way of thinking about the interface level of complexity.
- It is necessary to use adaptation strategies to adapt interfaces to different devices, functionalities, and contexts.
- Consistency is the consistent use of once-adopted solutions in an unchanged form in different contexts.
- Interface consistency is promoted by unification and design consistency in the layer of language, visual appearance, and functions.
- An interface working in a discontinuous and inconsistent manner is an interface that does not inspire confidence and raises the level of anxiety. It does not guarantee that you will achieve the intended results.
- The interface design standards, patterns, and conventions should be creatively developed rather than ignored.
- Due to the Aesthetic-Usability Effect, the interface design cannot disregard aesthetic considerations.
- The way of organizing the components and assigning them graphical forms, proportions, distances, and relations promotes interface aesthetics.
