The theory behind visual design

styleguide1At DNV GL, some of our most powerful software products began their lives as simple, everyday tools created by our engineers to assist with their work. Over time, some of these tools fall by the wayside, but many prove their usefulness and are adopted by the team, growing in sophistication and capability. As the renewable energy industry has grown, demand for good software tools has risen and in response we’ve been offering our very best software for others to use, too.

When we commercialise a software product, I’m usually approached to help. Teams who’ve worked with me before want advice on research and usability, but those new to UX sometimes ask only for styling and branding.  The product’s creators, experts in the field of renewable energy, don’t always realise that customers might have difficulty understanding and using their design, which was originally made for their own use. At this point, it’s important that I can explain to my colleagues the risks of not getting it right, and how UX will help the product become a success. In particular, I often need to explain the hidden depths of visual design, and how the appearance of the UI – which many assume to be all about style and marketing – is both functional and essential.

Mental model is a term used in psychology to describe the picture we have in our head of how something works. In the case of new software, it describes our expectations of the product experience, and determines how we interpret the information we are presented with once we begin interacting. A user’s mental model is largely formed by relevant past experiences, often with similar products. On the other hand, the conceptual model is a term describing how the product is actually used – it’s architecture, controls, how information is organised and what terms and labels are applied – and it is presented to the user via the on-screen interface.

If the conceptual model matches the user’s mental model well, then they will find the product intuitive to use. If not, they will likely struggle and find the experience frustrating. When learning to use a new piece of software, customers are adapting their mental model; this should be as smooth as possible else they will find the experience frustrating. When a product is designed by an expert, he or she defines the conceptual model according to the way he or she understands the subject matter. With a commercial application, many of the user base will not share the expert’s expertise, and as such may have a differing mental model. The trouble is particularly apparent when users are students or juniors in the industry.

At DNV GL, we must design our software to make this match, or else we limit a good user experience to only a small group of experts, whilst others face a struggle. Getting the right conceptual model means understanding as much as possible about our customers, which is where user research helps us so much. We also need a good UI design to make things clear, and the visual side of my work is vital in doing this effectively.

Why does the look and feel matter for a technical product? For all of us, the emotional, instinctive part of the brain has a huge impact on our decision marking, and most of the mental processing happens unconsciously. Even in the design of engineering software such as DNV GL’s, the images, colours and language used on screen will trigger an instant emotional response and affect the experience users have.

In psychology, the gestalt theory goes a long way towards describing how our brains organise visual information. The concept of gestalt is that the mind understands external stimuli first as a whole, rather than as a sum of individual parts. For example when viewing a website, we will scan quickly and in seconds determine how we feel about it, what it does and what we understand of its conceptual model, without needing to consider every label and button. Another key concept for UX designers is prägnanz, which says that we mentally file away our experiences in a manner that is regular, symmetric and simple. Therefore, a UI that is also regular, symmetric and simple is easier to comprehend and more intuitive to use.

Gestalt goes into detail on the complex way in which proximity, symmetry and similarity of digital objects affect our understanding of them. For example, when items on screen are close together, they are believed to belong together. We also group things intuitively when they appear similar to each other, which is why navigation menus make sense. Consistency in visual design is important as users will expect similar behaviour from similar-looking controls, and will grow frustrated if this is not the case. A good design uses these patterns to help us understand instinctively, highlighting important information and clustering similar information.

Colour can also be used in UI design to provide a sensory experience, as it elicits an involuntary emotional response in everybody. Colours on screen should be selected carefully to assist in the message you want to convey to customers. For example, warm colours such as yellow and orange tend to evoke feelings of happiness and comfort, whilst cool tones such as grey and blue stir up emotions associated with authority, reliability and trust. As DNV GL produces high-performance engineering tools, we can reinforce the message of reliability and precision of our products through cool tones.

Visual contrast is used to highlight important information and help people understand more at a glance. Again, consistency is key as we will intuitively group similar looking objects and incorporate them into our mental models. Applying colour and form correctly is a matter of balancing both functional and emotional factors.

In summary…

  • Good usability is about matching mental and conceptual models as closely as possible. The smaller the gap, the less learning required.
  • Gestalt: people quickly scan and comprehend things as a whole, before looking at the individual parts.
  • Prägnanz: order, structure and simplicity in a layout will make a design easier to grasp.
  • Intelligent use of grouping and symmetry will help users naturally understand similar meaning and function in objects.
  • Considered use of colour, balancing contrast for functional and tone for emotional communication can convey a great deal.
  • Consistency across the entire user experience makes all of the above more effective.

The principles above describe the way we all naturally process visual information. Most UX /UI designers understand these intuitively, and with a solid understanding of user needs, can create a well-balanced design with good usability. Whilst these points are really a simplification of how the mind works, they do begin to explain the hidden depths to visual design, and the subtle, instinctive ways in which a product’s appearance affects user experiences.