The Best User Experience is Consistent – Part 3: Visual vs. Functional Consistency
While company resources are often short and the willingness to invest in integration and consistency is limited, designers need to focus on both even more. Especially in times where users, a dynamic product landscape, and task development are span multiple products.
In the first part of this blog series, my goal was to raise awareness of the importance of consistency for design. Even though nobody really disputes that consistency is essential, it is still perceived to inhibit creativity and innovation, and this can become an issue when implementing consistency in an organization. In the second part, I gave a bit more background on the effects of consistency on design and on the underlying psychological processes. In this latest part, I want to talk about concrete aspects of design and how important they are for keeping consistency.
Managing Consistent Experiences in a Corporate Environment
Many designers in a corporate environment can’t afford to focus solely on the development of new products. They are also responsible for existing solutions, 3rdparty applications, and acquired products that all need to be integrated into one experience. As these products are often interconnected with various tasks, processes, and topic owners, the key question is: how can we spend the available resources wisely to achieve the best possible results?
- If you are a designer in an organization that developsown applications, keeping a large set of screens consistent without the right tools in place can be a huge effort. You can establish your own guidelines and tools to ensure that all new development has clear guidance. However, this will still requires you to invest in design work upfront and quality assurance later on.
- Establishing your own design guidelines is a huge investment in itself. So you might choose to make use of existing guidelines published by one of the vendors you are already using instead. For example, if you have already deployed several SAP products in your environment, you could make use of the comprehensive tools and guidelines we at SAP Design offer to our customers and partners (https://experience.sap.com/fiori-design-web/). This would not only foster consistency within your own product portfolio, but also with the products of your preferred vendor. Compatibility with these standards could then be a criterion for future requests for proposal or be even more relevant if using the guidelines also ensures compliance with international standards, e.g. for an inclusive designlike Web Content Accessibility Guidelines (WCAG).
- We can differentiate between various design layers. While we generally tend to think of the superficial consistency of colors and styles, there is also a deeper consistency layer where functions like search, certain procedures, and even the data itself are consistent. As most enterprise software is highly configurable, you could also focus on functional consistency by integrating certain functions across all products used in your environment. Typical candidates might be authentication and user-management, search, help, or navigation. This is a harder sell because the effect isn’t visible, but can be huge on productivity which I will outline later on.
Many corporations invest in integration layers, such as a portal or dedicated apps that provide custom solutions for specific tasks and processes. As a result, the reality is often a mix of the approaches outlined above. Let me briefly explain visual versus functional consistency and then look at each of these aspects in turn.
Visual vs. Functional Impact
In the second part of this blog series, I introduced four layers of design on which we can focus to achieve design consistency:
|Look and Feel||Controls||Floorplans||Common Functions|
|Visual and motion design. The physical and tangible part of the user interface.||The building blocks of the user interface, such as buttons or input fields. Every user interface is made from these modules.||Pages or page flows that are optimized to support certain tasks.||Functional features of the user interface that are used in several places or across all applications, such as search or navigation.|
These four layers represent different aspects of the user interface, spanning from the more superficial visual aspects (look and feel) to the deeper and less obvious functional aspects (common functions). Enhancing consistency on any of these layers will have a positive impact on the perception of the user interface, a fact that we can make conscious use of.
Figure shows how the improvements on the different layers can affect either visual or functional consistency in the user interface.
Focus on the Visual Impact
Applying the same look and feel gives your portfolio a consistent appearance and certainly has the highest immediate impact (see picture above). Using the same colors, fonts, shapes, and animations will create superficial harmony and consistency that can easily be perceived by anyone looking at the UIs.
In modern user interface technologies like HTML, the look is usually decoupled through CSS or theming tools. This means that it can easily be changed for a whole control library or technology stack. The feel part is often more complex and requires several changes to the underlying control implementation. However, the costs and efforts are relatively low and scale well if you use control libraries, even if you are using frameworks.
Focusing on the visual consistency can help to achieve broad coverage at relatively limited cost. As visual changes are easy to perceive, the effect on the perception clearly exceeds the effect you achieve if you take the same invest deeper down on a functional level.
On the other hand, visual consistency hides functional inconsistencies. If technologies and applications are inconsistent at a functional level, but can’t be distinguished because they have the same visual appearance, it is hard for users to predict the behavior of the application they are currently working with. Why does this application behave differently to the others? With this in mind, it might be helpful to allow visual distinctions between applications that function differently to make them more predictable.
Focus on the Functional Impact
Implementing common functions across different applications and technologies increases functional integration and consistency. If a search box behaves the same in every application, regardless of each applications look like, users have a tangible advantage. In case the user can even search across all applications for the same objects, this value multiplies.
Functional consistency can amplify the effect of process or data integration. This effect is even more pronounced for functions that have little to no visual representation, such as keyboard shortcuts or tab chains: if there is no visual indication for technical inconsistencies, these low-level interactions can easily be rendered as? unusable as users cannot predict the outcome of their actions upfront.
However, functional consistency does not depend on visual consistency as the mental model operates on conceptional structures and rules more than on visuals. Even if two applications look very different, there is a positive consistency effect because users can apply prior knowledge. This means that it’s better to introduce functional consistency without visual consistency to your users than the other way around.
Functional consistency is something users might only become aware of as they use the system. Ideally, they might not even be consciously aware of it, and just take it for granted. Consistency, especially at a functional level, is something that the average user only notices when it is not available. The effect is very minor and hidden. At the same time, functional consistency reaches deep into the technology and business logic, which means a greater investment that is often harder to sell.
While visual consistency is typically easier to achieve and has a larger effect on the user’s initial perception, it might be misleading and even harm the user experience if we don’t provide functional consistency, too. Implementing functional consistency without visual consistency has a positive effect on usability though, but you might have a hard time justifying the necessary investments if there is no obvious visual effect.
As a result, you will have to tackle the issue from both ends, using visual consistency to emphasize and highlight functional consistency. This way, you don’t mask inconsistencies that can cause the user to make mistakes. Instead, you enhance the coverage of functional consistency and communicate it clearly.
You might also want to make use of visual means to communicate local functional consistency within a certain technology stack. This allows users to differentiate and separate the mental models for the different stacks: this is the technology where things work this way, this is the technology where things work the other way.
Whatever strategy you pick, be aware of the different impacts of the layers and how they interact.