Design is the Solution – From Visual Clarity to Clarity in the Mind

By Gerd Waloszek, SAP User Experience, SAP AG – December 7, 2010

In 2009, SAP introduced a marketing campaign that promoted the concepts of "clear enterprises" and "clarity." The campaign was tailored to the changes in the business world caused by the financial crisis and to the resulting business needs. The campaign's slogan "driving clarity and transparency into your business." The two aspects clarity and transparency were meant to support the following goals:

  • Clarity to refocus business strategies and streamline operational execution
  • Transparency to demonstrate accountability to key stakeholders and to protect the company's brand and reputation

SAP asked the rhetorical question of how customers can realize these goals so that they "can understand risks, formulate smart business strategies, and take actions that align with those strategies." Not surprisingly, its answer focused on explaining to potential customers how the SAP portfolio, comprised of software and services, enables clear enterprises. Details about this campaign can be found in a brochure titled Success in the New Economic Reality on the company Website at sap.com.

Interestingly, neither SAP's marketing campaign nor its brochure made any mention of one team in its organization whose job it is to strive for clarity, albeit at a different level: SAP User Experience (SAP UX). SAP UX strives to improve clarity at the level of SAP's software applications themselves. Meanwhile, the "clarity" campaign has been replaced by the "Run better" campaign. Nevertheless, the need for clarity and transparency still exists. Therefore, I would like to use this article to approach clarity from a UI design point of view, as SAP UX does. One aspect I want to discuss is the broadening of the ISO definition of clarity into a concept that includes users' minds. Thus, in the end, SAP UX's goals may not be too far removed from what SAP's clarity campaign addressed, and I also arrive at an interesting conclusion.

 

Back to the Basics

I will start by looking at a subject that most designers probably find unattractive: the ISO standards, which lay down the basic legal requirements for user-oriented software applications. Recently, the concept of usability has been extended. Along with the two primary aims of effectiveness and efficiency, it now includes the aim of satisfaction, which comprises many aspects of what we call "user experience" today (ISO 9241-11):

Figure 1: The "ISO pyramid" consists of top-level usability principles (ISO 9241-11), dialog principles (ISO 9241-110), and characteristics of presented information (ISO 9241-12)

The classic requirements for human-computer dialog have been reformulated in the "dialog principles" of ISO 9241-110, which replaces the older standard ISO 9241-10. They are positioned between the overall "concept of usability" (ISO 9291-11) and the low-level "characteristics of presented information" (ISO 9241-12), which are at the bottom of the "ISO pyramid." The lower levels are the foundation for the higher levels and are therefore prerequisites of usability. For example, ISO standard 9241-12 requires that the presentation of visual information should enable the user to perform perceptual tasks effectively, efficiently, and with satisfaction, which summarizes the top-level usability concept. To achieve this goal, designers have to accommodate the following characteristics of presented information:

  • Clarity: The information content is conveyed quickly and accurately.
  • Discriminability: The displayed information can be distinguished accurately.
  • Conciseness: Users are given only the information necessary to accomplish the task.
  • Consistency: The same information is presented in the same way throughout the application, according to the user's expectation.
  • Detectability: Users' attention is directed towards the information required.
  • Legibility: Information is easy to read.
  • Comprehensibility: Meaning is clearly understandable, unambiguous, interpretable, and recognizable.

As the list above shows, the ISO standards treat clarity as a low-level concept, which is to say as a characteristic of presented information. In my opinion, this definition of clarity is too narrow and unnecessarily excludes aspects that would contribute to a broader concept of clarity in a UI design context. I would rather subsume all of the information presentation characteristics under a broader "clarity" label and replace the current term "clarity" with "clear arrangement." Such a broader definition would also be more in line with our everyday concept of clarity. But this would only be a first step, as the following paragraph shows.

 

Extending the Concept of Clarity

In a next step, I would like to go beyond visual characteristics and include mental entities such as mental states and models in the concept as well. This would allow us to refer to a "clarity of mind," and, depending on the context, also to a "clarity of mental or conceptual models." Cognitive psychology tells us that people create naive theories, called mental models, that help them understand and explain the behavior of physical devices and electronic devices, software applications, physical phenomena, and so on. For the purposes of this article and in the context of software applications, "clarity of mental models" would mean that the models "convey quickly and accurately" (in accordance with the ISO definition of clarity above) how users have to interact with software applications. However, the term "accurately" needs to be taken with a grain of salt. Mental models are simplified, primitive models, not true accounts of the inner workings of what they are modeling. Thus, "accurately" would mean that users are able to use the applications – in the language of the ISO standards – effectively and, hopefully, also efficiently.

When looking at the dialogue principles as defined in ISO standards 9241-110, I immediately find three items that easily fit the broader concept of clarity:

  • "Self-descriptiveness" is primarily related to the process of creating mental models from what the application communicates
  • "Conformity to user expectations" is related to already existing mental models and how they fit the current dialog/application context
  • "Suitability to learning" is related to how easily users can create new mental models; it differs from "self-descriptiveness" by regarding factors such as consistence, which allow users to deduce rules from what they observe

I would like to add one more line of reasoning to support my inclusion of mental aspects in the concept of clarity. When users interact with the computer, they use two information sources: the computer screen and the brain (or memory). Our senses, mostly our eyes, create the link between the two. According to Colin Ware (2008), human perception and memory are much more closely connected than researchers had assumed in the past. In the modern view of perception and memory, the external world is regarded as an extension to our minds, which direct attention to the environment as needed, for example, to specific information on the screen. The process of connecting the world with the brain is called "active vision" or "visual thinking" and is primarily concerned with the allocation of attention. The illusion of a stable environment is maintained by the so-called "cognitive thread": According to Ward, it represents "the sequence of concepts that are held actively in visual and verbal working memories, together with the links between them, where those working memories can roughly be regarded as processes of attention." By the way, Ward equates the cognitive thread with what we usually call consciousness. As human perception and human mind are closely coupled, I conclude that visual and mental clarity are also closely connected and should be subsumed in a common definition.

 

Clarity through Design

The next step in our endeavor is to apply our extended concept of clarity to UI design. The legal requirements, as they are formulated in the ISO standards, can be checked for fulfillment but are not readily applicable to practical UI design work. Therefore, I shall change perspective and approach clarity from a practical, that is, a UI design, point of view. But note: UI design is not a monolithic activity – it has several facets such as visual design, information design, and interaction design. (If you think you have seen these categories before, you are right – I listed them when I investigated how we can improve human performance at the computer.)

The table below provides examples of how various UI design aspects can contribute to clarity:

  Visual Design Information Design Interaction Design
Design Aspects

Arrangement of Screen Elements

  • Use a clear layout of screen elements
  • Group related information on the screen clearly and separate distinct information clearly

Terminology

  • Use appropriate (user- and task-oriented) terminology
  • Use consistent terminology
  • Check spelling and grammar
  • Use only well-established abbreviations or, better, none at all; use tooltips to explain abbreviations

Memory

  • Use recognition instead of recall: Provide choices (menus, dropdown lists, selection controls), complete user entries, let users browse instead of search (depends on context), etc.
  • Use the correct controls, use controls correctly
  • Obey (UI design) standards

Characteristics of Screen Elements

  • Ensure that text is readable and graphical elements are discernable
  • Make sure that icons are distinctive

Information

  • Orientation: Tell users what can be done on a screen (purpose), use meaningful screen and group titles
  • Amount of information: Use screen space to provide the information needed (Ward: Outside world extends our memory, including Post-it® notes around the computer monitor), do not provide information that users do not need in the current usage context
  • Information delivery: Provide additional information request – use progressive disclosure, tooltips, etc.

Control

  • Put the user in control
  • Prevent errors (or at least allow users to recover from errors)
  • Provide system feedback (expected waiting times, errors, process status, position within a multi-step task, etc.)

Overall Visual Characteristics

  • Use color, lighting effects, animation, etc. properly
  • Check suitability for users with color deficiencies

Information Architecture

  • Global: Navigation between screens
  • Local: Navigation within screens

User Types

  • Provide shortcuts for experts
  • Support beginners and casual users if they are the primary users
ISO Requirements

Characteristics of information presentation: Clarity, discriminability, detectability, legibility, consistency

Self-descriptiveness, Suitability for learning

Characteristics of information presentation: conciseness, consistency, comprehensibility

 Conformity with users expectations, suitability for the task, controllability, error tolerance

Table 1: Examples of how UI design can contribute to clarity

The table is intended to provide a first impression of the idea, and not a complete list of design options. For most of the items, it should be evident how they support clarity. For other items, this may not be the case at first glance, so I will add a few comments:

  • Recognition versus recall: This is a cornerstone of graphical UIs, but how does it improve clarity? Replacing recall with recognition relieves users from having to search their memories and generate concepts (and thus being impeded or even disoriented by this process). This allows them to devote more mental capacity to the task at hand and to orientation aspects.
  • Correct use of controls and use of correct controls: Designers should not baffle users by implementing controls "creatively" and thus, not conforming to the users' expectations. Confusion is the exact opposite of clarity.
  • Orientation: Being "oriented" is an inherent human need and a prerequisite for a clear mental state. Disoriented users are confused, and not in a clear mental state.
  • User control: Why does putting the user in control improve clarity? Psychologists observed that people remember actions better which they initiate and perform themselves ("doing effect"). Thus, being active and in control, instead of reacting passively to system prompts, keeps users oriented and promotes a clear mental state.

You may may be expecting to find mental models in this overview, but I have not included them. This is due to the granularity at which I considered the different UI design aspects. Mental models are used when processes such as user tasks. In the table above, the "user control" item may come closest to processes and models: For example, people tend to create "superstitious theories" of system behavior that they do not understand, particularly when errors occur. However, such "theories" contribute to confusion, not to clarity...

 

Information Visualization

Having looked at UI design in general, I will now turn briefly to a multi-disciplinary research direction that includes members of the HCI community and is also covered on the SAP Design Guild Website: information visualization. Many of the tools in SAP's portfolio that are geared toward clarity include information visualization techniques.

Information visualization has to be distinguished from scientific visualization. They differ in the following aspects:

  • Information visualization deals with the presentation of abstract phenomena, with discrete variables, such as gender.
  • Scientific visualization covers the presentation of physical objects and processes (often in three dimensions, that is, in physical space) and typically with continuous variables, such as temperature.

Ground-breaking work in information visualization has been carried out at research institutions such as XEROX Parc (Stuart Card, Ramano Rao, ...), the HCIL at the University of Maryland (Ben Shneiderman, Ben Bedersen, ...), and the Imperial College of Science, Technology and Medicine, UK (Robert Spence) and presented at HCI and visualization conferences. Several commercial spin-offs like Inxight (now part of SAP BusinessObjects) and Spotfire (now part of TIBCO) have made these new techniques available to a wider public.

Examples of information visualization include the presentation of complex data structures such as trees and networks, and innovative presentation techniques such as brushing, rapid visual search, and direct manipulation of large data sets in real-time. In a recent presentation at SAP Labs, Palo Alto, Ben Shneiderman told the anecdote that his team's work had once been criticized because the same results could also be achieved by programming a number of SQL statements. While this is true in principle, the critiques overlooked one important aspect: The ability to manipulate and inspect huge data sets in real-time makes the difference, because it allows users to gain insight and clarity immediately.

For more information about information visualization see Links on Visualization and Visualization – New Controls and Applications on this Website.

 

Digression: Clarity Between Simplicity and Complexity

Finally, I would like to digress to a clarity-related topic that Nathan Shedroff discusses in his book Design is the Problem: simplicity versus clarity. Often, companies remove features and performance criteria from a product to make it simpler and thus, hopefully, easier to use. Shedroff does not find this a bad strategy in itself. However, simplifying products also bears the risk that they may become less effective because they are no longer suited to the complex reality in which we would use them. Shedroff acknowledges that our world is complex. Therefore, most useful devices and tools are complex too, and should indicate this clearly. Clarity is required, irrespective of whether a product is simple or complex. Good design can cope with complexity and achieve clarity: "Clarity relies on the prioritization of cognitive models and features that are most important, while downplaying those that are less critical. This can be done through careful arrangement of elements in the visual, auditory, temporal, and other sensorial dimensions." Here, Shedroff meets with Donald Norman, who wrote the article Simplicity is not the Answer and just recently the book Living with Complexity. In both of them, Norman points out that complexity is an ingredient of our world and enriches it. Any interesting product mirrors this and has an inherent complexity. Careful design is the key to dealing with complexity (in his article, Norman discusses the three design approaches modularization, mapping, and conceptual models): "It's not complexity that's the problem, it's bad design. Bad design complicates things unnecessarily and confuses us. Good design can tame complexity."

To sum up, to use products effectively we need clarity, but trying to achieve this by simplifying products is, although a widely-used marketing strategy, most often an illusion. Ineffective and uninteresting products are the result. Modifying the title of Shedroff's book, I can conclude: "Design is the solution" to the problem of achieving clarity and avoiding confusion – which returns us to the bread-and-butter work of SAP User Experience.

 

Final Word

This article was not intended as an exhaustive coverage of the concept of clarity in the UI design field. It was inspired by SAP's "clarity" marketing campaign and shows that there are many ways of approaching clarity: from the ISO standards, from a UI design perspective, from information visualization, and from more general questions such as the role of clarity in the trade-off between simplicity and complexity. There are probably many more paths to clarity in the UI design field, and thus room for further articles about this subject. In the end, I have come to the conclusion that good design is the solution to achieving clarity and fighting confusion.

 

References

  • SAP brochure Success in the New Economic Reality (PDF)
  • SAP "Run Better" campaign site
  • SAP BusinessObjects
  • Spotfire (TIBCO)
  • ISO Standard 9241: Ergonomic requirements for office work with visual display terminals (VDTs)
    • Part 11: Guidance on usability
    • Part 12: Presentation of information
    • Part 110: Dialogue principles (supersedes Part 10)
  • Donald A. Norman (2008). Simplicity is not the Answer. Interactions, Sep-Oct 2008, p. 45-46 • Version on Norman's Website
  • Donald A. Norman (2010). Living with Complexity. The MIT Press • ISBN-10: 0262014866, ISBN-13: 978-0262014861 • Review in preparation
  • Nathan Shedroff (2009). Design Is the Problem. Rosenfeld Media • ISBN: 1-933820-00-4 (Paperback + PDF), ISBN: 1-933820-01-2 (2 PDF editions) • Review
  • Colin Ware (2008). Visual Thinking: For Design. Morgan Kaufmann. ISBN-10: 0123708966, ISBN-13: 978-0123708960 • Review

 

To top top