Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› Closing the Knowledge Gap with Intuitive Flat Designs

Closing the Knowledge Gap with Intuitive Flat Designs

by Jeremiah Still, Mary Still, Jarad Bell
6 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

For users to see flat designs as intuitive, designers need to help them cross the knowledge gap by using familiar representations.

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

post authorJeremiah Still

Jeremiah Still, Jeremiah Still earned a Ph.D. in Human-Computer Interaction from Iowa State University. Since that time, he helped create and direct the first Human Factors graduate program in Missouri. In recognition of his accomplishments with the graduate program, Jeremiah received the Liberal Arts and Sciences Council of Chairpersons award. Also, his scholarly work has appeared in top-tier journals, which resulted in recognition at the university level. 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. Jeremiah is currently an assistant professor at Old Dominion University in the Department of Psychology. He regularity contributes to the CyberSecurity Center and the Human Factors graduate program. He enjoys teaching the Human-Centered Design process at the graduate and undergraduate levels. Notably, his students are consistently competitive at international design competitions.

post authorMary Still

Mary Still, 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.

post authorJarad Bell

Jarad Bell, This user does not have bio yet.

Tweet
Share
Post
Share
Email
Print

Related Articles

How UX teams can provide key insights using technology adoption models

Article by Lawton Pybus
What Makes Users Adopt a New Feature or Tool?
  • The article explores the evolution of technology adoption theories, focusing on models like Diffusion of Innovations, TAM, TAM 2 and 3, UTAUT, and HMSAM, providing UX practitioners with tools to understand and enhance user behavior in product development.
Share:What Makes Users Adopt a New Feature or Tool?
6 min read

What do Architecture, Computer Science, Agile, and Design Systems have in common?

Article by Kevin Muldoon
A Pattern Language
  • The article explores Christopher Alexander’s impact on diverse fields, from architecture to software development, introducing the concept of design patterns and their influence on methodologies like Agile and the evolution of Design Systems.
Share:A Pattern Language
7 min read

Since personal computing’s inception in the 80s, we’ve shifted from command-line to graphical user interfaces. The recent advent of conversational AI has reversed the ‘locus of control’: computers can now understand and respond in natural language. It’s shaping the future of UX.

Article by Jurgen Gravestein
How Conversational AI Is Shaping The Future of UX 
  • The article discusses the transformative impact of conversational AI on UX design, emphasizing the need for user-centric approaches and the emerging societal changes driven by AI technology.
Share:How Conversational AI Is Shaping The Future of UX 
3 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and