UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 1297 August 27, 2014

Closing the Knowledge Gap with Intuitive Flat Designs

Much of the debate surrounding skeuomorphic versus flat design has focused on the theoretical strengths and weaknesses of natural versus artificial representations. The focus is primarily on design style. In this article, we propose that style does not produce good or bad design in and of itself. Whether we communicate with users through a skeuomorphic or flat design style, the design needs to be intuitive, and both styles can deliver an intuitive user experience if users are implicitly guided to appropriate actions.

Each interaction we experience with a product induces a small change in our long-term memory. For example, when you first see a hyperlink, you don’t know if it is clickable. But, after a few hundred interactions you directly associate an underlined or different colored word with a click action. The experience of using a hyperlink seems direct and clear; knowledge is applied and processed automatically. When direct connections like this exist between long-term memory and interface design, intuitive interactions—such as cultural conventions—emerge. This occurs even though these conventional interactions are not perceptually mapped within real-world environments. The intuitiveness of the interaction is determined primarily by the level of familiarity that the user has with the design interaction.

Skeuomorphic designs are intended to build upon users’ previous real-world experiences, by mapping real-world object properties onto digital objects (e.g., the desktop folder). Specifically, skeuomorphic design attempts to target the familiarity of real world objects to decrease the required learning curve for users. Ironically, familiarity with these real world objects can sometimes mislead users. For example, natural object properties do not hold true in a virtual environment (e.g., the visual size of a folder is unrelated to the number of objects within it) and can be violated to create super abilities (e.g., a file can be stored within multiple folders locations).

Interfaces contain arbitrary mappings between visual features and function. Depending on their complexity, these mappings require varying amounts of cognitive effort to learn. Often our goal as designers is to reduce the amount of effort our interfaces require. Graphical user interfaces can be very complex because of the wide vary of tasks they support. Thus, with skeuomorphic elements, designers were attempting to communicate potential interactions in a direct and clear fashion by depending on their users’ previous experience.

Clear and direct experiences are usually described as being intuitive. According to Raskin (1994), familiarity with a design produces intuitive interactions. That is intuition emerges when pre-existing knowledge can be applied to the current situation with minimal effort. Therefore, it seems that a prerequisite for an intuitive interaction is having had experience with that interaction type in the past. Similarly, Spool (2005) suggests that creating an intuitive experience is about reducing the distance between users’ current knowledge and required knowledge of the system for effective interactions. He refers to the distance between current knowledge and needed system knowledge as a knowledge gap.

Users may see flat designs as intuitive, but designers need to help users cross the knowledge gap

Whenever we reduce naturally occurring design features we risk creating a knowledge gap. Flat design does just that by dropping realistic details like shadows and textures (the iPad’s bookshelf). If done correctly, user experience remains unaffected, but it can be difficult to know which of these features are playing a critical role. To avoid creating a gap we must only remove irrelevant details because if we remove too many of the visual properties necessary for long-term memory retrieval, the interaction will become unfamiliar. When an interaction is unfamiliar, cognitive workload remains high as our system attempts to develop new connections to cross the knowledge gap. This effortful process represents part of the cost associated with the introduction of any new interface. Therefore, we need to put ourselves in the user’s shoes. If a system update requires users to learn how to bridge the knowledge gap, an explicit benefit ought to be associated with this cost. No one enjoys having to resolve arbitrary interactions given similar outcomes.

Flat designers often have to create new design patterns, which comes at a major cost. Not only is it labor-intensive to create design patterns, it's labor-intensive to conduct the additional empirical testing that is required to verify that the design bridges the knowledge gap. Because flat design is newer than skeuomorphic design, it is at a disadvantage in this regard. Skeuomorphic design has more mature design patterns. Users are familiar with this design style, through thousands of interaction experiences, within the real-world and virtual environments. The following example illustrates how skeuomorphic designs might be used to produce more familiar flat designs. Each icon in Figure 1 is an example of the “share” design representation.

Figure 1a

Figure 1A.

Figure 1b

Figure 1B.

Figure 1c

Figure 1C.

The skeuomorphic designs in Figure 1 connect “share” with the average user’s knowledge (e.g., A. offering, B. connected, C. multiple people associated). Many users already have experience interacting with these representations.

The function of the flat design icons in Figure 2 are less clear to the average user. First, each of these icons, although intended to represent “share,” look very similar to other icons that have different functions: Icon A resembles the icon to forward information, icon B resembles the icon for USB, and icon C resembles the icon for refresh. Figure 2a

Figure 2A.

Figure 2b

Figure 2B.

Figure 2c

Figure 2C.

From a designer’s perspective the icons make sense; for instance, the circles in icons B and C are ties to network nodes. But, the average person may not know what a network node is. This lack of understanding creates a knowledge gap. We could bridge that gap by requiring users to learn a new convention or we could create a design that builds on previous knowledge.

We recommend the following flat versions of the traditional representation for sharing. Icons A, B, and C are, essentially, flat versions of skeuomorphic icons, but we’re not suggesting that all flat design be relegated to simple versions of skeuomorphic designs.

Figure 3a

Figure 3A.

Figure 3b

Figure 3B.

Figure 3c

Figure 3C.

Our focus is not on the style, but the intuitiveness of the interaction. For instance, the visuals associated with these first three examples suggest that the icon is associated with sharing files, but it is not clear if it is appropriate for sharing links. In addition, folders are quickly becoming less common within the real world making the connection between the icon and function less obvious to users. Another example of this is the 3.5 diskette icon used for saving information. Considering these factors, we suggest icon D as it displays familiar features and actions while remaining independent of content. Sharing information is not a new concept to users and should not be treated that way. Users have formed associations between the action of sharing and visual features, so let’s take advantage of that knowledge.

Figure 3d

Figure 3D.

Flat design is a young style, which will develop its own design patterns, and users will learn ways to overcome unusual interactions (if they are motivated). Over time, users may see flat designs as intuitive, but designers need to help users cross the knowledge gap by using familiar representations. As designers we ought to be more concerned with how effectively our designs connect with users’ conventional knowledge then with the particular design style. If a flat or skeuomorphic design connects with user knowledge, great! If not, we need to help them.

This is achieved by either making the interaction familiar or by providing additional training. Without either familiarity or training, our user experience will not be considered intuitive. We must look beyond style type and attempt to determine the merit of a design based on the user's current understanding.

 

Image of stacked folders courtesy Shutterstock

ABOUT THE AUTHOR(S)

User Profile

Jeremiah is the principle investigator of the Psychology of Design (PoD) Laboratory. His team completes research at the intersection of product design and cognitive psychology. The PoD lab is currently investigating three lines of research revolving around: improving intuitive design, facilitating usable Cyber Security, and making complex interfaces easier to search.

User Profile

Mary Still is a cognitive psychologist with broad interests in mental representations, attentional guidance, and research methodology. At the intersection of these areas is her interest in understanding the factors that contribute to intuitive interactions. Mary earned her PhD in Cognitive Psychology at Iowa State University and teaches at San José State University. When she is not in the classroom, she enjoys designing new experiments, cycling, and hiking.

User Profile

Jarad Bell is a user experience design researcher in the San Francisco bay area and M.S. Human Factors Engineering candidate.

Add new comment

Comments

3
2

Whay are these icon examples so HUGE in the article? #uxfail

1
4

This whol article leads into a "recommendation" based on slight altering skeumorphic icons into flat icons...?Where are the metrics to support the transition? Hundreds of people have done analysis on this and you missed the most critical factor of icon recognition: labels.

It has been tested time and time again for the last decade - icons trigger memory for quicker recognition and less cognitive load, but the element of learning them is always an underlying challenge. Thus, using icons + labels together tests better a majority of the time and should always be considered.Most importantly, these things should be tested to make sure they work.

Not a great article, in my opinion.

3
4

^lots of typos up there... the key point is that testing was not mentioned at all, nor were labels. intuition varies across audiences, and icons vary across interfaces. Unless you are attempting to create a global icon standard, your recommendations based on "more intuitive icons" are just a broad, sweeping assumption based on your personal experience. And that is bad UX design.

2
2

Some great points here, but I'd appreciate some clariifcation of the use of the term 'skeuomorphism'. To my underdstanding, a skeuomorph is a non-functiopnal reference back to a previous technology. That is, it is there for the purpose of decoration or familiarity but is not functional. (http://dictionary.reference.com/browse/skeuomorph) I would consider a woodgrain bookshelf or leather stitching on a calendar to be skeuomoprphs.

On the other hand, the icons you are referring to are functional and there contents are intended to indicate the function. I would describe them as metaphors, not skeuomorphs.

Splitting hairs? Probably.

 

3
3

Operationally defining skeuomorphism does appear to be difficult given ongoing discussions. So, we are going to avoid that thought process at the moment.

 

Our cognitive system is continuously presented with an overwhelming amount of data – fundamentally due to working memory limitations.  So, it automatically preforms dimensional reduction to manage the overload. Impressively, it creates usable representations to support ongoing task goals. But, how does our system select the “correct” representation from a very large array of alternatives? It depends on attention to visual details to fire up a familiar pattern of activation. Although there has been a lot of research on the features that attract attention and support recognition memory, we still do not fully understand what features are vital in making up mental representations for images. It is quite possible that these decorative features that make something feel familiar are essential features used for recognition and thereby essential for an intuitive interaction. In some cases these details provide the interaction a unique context which helps resolve ambiguity. So, ‘non-functional’ visual details maybe very important for crossing the ‘knowledge gap’.  

3
2

"Exploration" should be added to "familiarity & training".  In fact, in interaction design, unfamiliar micro-interactions are, indeed, more about exploration.  The user may invoke a tooltip or menu list to figure out how a specific button functions.

I think flat design is particularly important today due to the information density that exists with mobile devices.  The cleaner and more distinct an icon or affordance, the more valuable it is -- regardless of how intuitive it is at first.  A new language through flat design is being constructed because of this need.

Context and personas aside, as long as the user can explore and learn relatively quickly the semantics of a flat design element -- and it is used consistently between applications -- that is all that really matters.  The allowed period of learnability of a design is also dependent on the nature and context of the application as well.

Note: some of the examples of skeumorphic iconography that was presented above (even your solution) could be misinterpreted by the uninitiated. 

 

3
3

We agree exploration ought to be under training. But, this starts to draw attention to learnability of new interactions within a system.  Our goal with this article was to highlight visual representations that clearly and directly communicate meaning.  We believe that directness is a critical component of the intuitive construct.

If you have to consciously search, requiring limited working memory resources, to determine what an icon does. Then, it isn’t intuitive, you still need further learning to occur to bridge the knowledge gap.  

I believe flat design is a reflection of new design constraints like screen size. I agree it does play an important role. However, learning a new language is a cognitively painstaking process. Hopefully, the new flat design representations will build on, map onto, our previous knowledge. Cognitive psychologist usually refer to this as positive transfer and it demands less limited cognitive resources. Remember, most of us have spent decades developing our current UX language. We ought to build on this solid foundation of implicit understanding.

 

I agree that our proposed solution isn’t always going to be the best. Especially, if testing the icon with users already trained on the new share icons. However, how about those of us with little flat design familiarity?  Which is currently the larger portion of the population?  It sounds like we need to start gathering data.

1
3

I completely agree with your intentions, Jeremiah.  The more intuitive the flat design, the better.  And if a designer can create a flat icon, for example, to be recognized 100% of the time -- fantastic!  However, I think it is acceptable for certain global design elements (if used consistently) to be refreshed into a more abstract and distinct form -- losing some of that 'positive transfer'.  I believe the proposed design above will still not be recognized by a lot of users.  What's more, I don't think this particular icon will scale well when smaller (as much as the now well-known "node" icon). 

Changing visual language like this must be done carefully and sparingly, however, or else it may be overwhelming.  Again, I agree with your concerns.  In fact, beyond the OS "system" level of design, it is a very risky practice for designers who care about usability. 

Learnability tolerance is something that should also be considered, however.  In the case of the share icon, this is a design that will be consistent throughout all applications because it is a global design element.  It also allows for exploration because a menu is invoked.  Furthermore, the design itelf, as mentioned, scales well and is very distinct.  All in all, it is a design that will be immediately recognized by a user after a short amount of time.

The usability sacrifice made for certain abstracted flat design elments, in other words, is well worth it IMO.

 

4
2

An interesting article, and I agree with most of the thrust of it. Flat design is not a  "new" visual language, (although the term "flat design may be) but a return to tried and tested tenenents of information design, signage design, and the original GUI icons design work of the Xerox PARC labs, so wonderful brought to life by original Apple Macintosh icon designer Susan Kare, who had to invented a whole new, consistent visual language. Looking at the big picture, skeuomorphism will be seen as the aberrant style, a blip in the process where icons were made "more realistic" because we could, not because we should. Flat design is simply a return to more rigourous thinking…  

7
10

Figure 2b is used as a sharing icon on android devices, now used by more and more devices/ apploications e.g bbc news. Knowlage gap that!

15
8

Norman’s seven stages of action is a general theory of human interface interactions. I think you could say unfamiliar icons make it harder to cross the execution gulf. For example, you want to share a link on your phone with a friend, but can’t find a familiar looking share icon. However, I don’t believe the evaluation gulf relates to our discussion. It focuses on feedback and interpretation following an interface interaction.

 

I think Hutchins, Hollan, and Norman (1986) work on the ‘directness’ concept fits better with our discussion. They claim directness is supported by two components: distance between the system and user knowledge and the feeling of direct engagement the user has with the system. This explanation is similar to that provided by Spool (2005).  

12
12

your concept of "knowledge gap" seems to be very close to the concepts of Norman called "execution gap" and "evaluation gap" of rhe theory of action.