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 1B.
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 2B.
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 3B.
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.
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
