User:Sjp10 10/sandbox2

Electric light bulbs imitating the shape of candle flames

A skeuomorph (also spelled skiamorph, /ˈskjuːəˌmɔːrf, ˈskjuːoʊ-/) is a derivative object that retains ornamental design cues (attributes) from structures that were necessary in the original. Skeuomorphs are typically used to make something new feel familiar in an effort to speed understanding and acclimation. They employ elements that, while essential to the original object, serve no pragmatic purpose in the new system. Examples include pottery embellished with imitation rivets reminiscent of similar pots made of metal and a software calendar that imitates the appearance of binding on a paper desk calendar.

Definition and purpose

The term skeuomorph is compounded from the Greek skeuos (σκεῦος), meaning "container or tool", and morphḗ (μορφή), meaning "shape". It has been applied to material objects since 1890. With the advent of computer systems in the 1980s, skeuomorph is used to characterize the many "old fashioned" icons utilized in graphic user interfaces.

A similar alternative definition of skeuomorph is "a physical ornament or design on an object made to resemble another material or technique". This definition is broader in scope, as it can be applied to design elements that still serve the same function as they did in a previous design.

Skeuomorphs may be deliberately employed to make a new look more familiar and comfortable or may be the result of cultural influences and norms on the designer. They may be the artistic expression on the part of the designer. The usability researcher and academic Don Norman describes skeuomorphism in terms of cultural constraints: interactions with a system that are learned only through culture. Norman also popularized perceived affordances, where the user can tell what an object provides or does based on its appearance, which skeuomorphism can make easy.

The concept of skeuomorphism overlaps with other design concepts. Mimesis is an imitation, coming directly from the Greek word. Archetype is the original idea or model that is emulated, where the emulations can be skeuomorphic. Skeuomorphism is parallel to, but different from, path dependence in technology, where an element's functional behavior is maintained even when the original reasons for its design no longer exist.

Physical examples

Triglyph and guttae in the Doric order; traditionally seen as recreating in stone functional features of the wooden Greek temples that preceded them.

Many features of wooden buildings were repeated in stone by the Ancient Greeks when they transitioned from wood to masonry construction. Decorative stone features in the Doric order of classical architecture in Greek temples such as triglyphs, mutules, guttae, and modillions are supposed to be derived from true structural and functional features of the early wooden temples. The triglyph and guttae are seen as recreating, respectively, the carved beam-ends and six wooden pegs driven in to secure the beam in place.

Historically, high-status items such as the Minoans' elaborate and expensive silver cups were recreated for a wider market using pottery, a cheaper material. The exchange of shapes between metalwork and ceramics, often from the former to the latter, is near-constant in the history of the decorative arts. Sometimes pellets of clay are used to evoke the rivets of the metal originals.

There is also evidence of skeuomorphism in material transitions. Leather and pottery often carry over features from the wooden counterparts of previous generations. Clay pottery has also been found bearing rope-shaped protrusions, pointing to craftsmen seeking familiar shapes and processes while working with new materials. Another example is the tiny, non-functional handle on glass maple syrup bottles, which evoke stoneware jug handles. In this context, skeuomorphs exist as traits sought in other objects, either for their social desirability or psychological comforts.

In the modern era, cheaper plastic items often attempt to mimic more expensive wooden and metal products, though they are only skeuomorphic if new ornamentation references the original functionality, such as molded screw heads in molded plastic items. Another well-known skeuomorph is the plastic Adirondack chair. The lever on a mechanical slot machine, or "one-armed bandit", is a skeuomorphic throwback feature when it appears on a modern video slot machine, since it is no longer required to set physical mechanisms and gears into motion. Articles of clothing are also given skeuomorphic treatment; for example, faux buckles on certain strap shoes, such as Mary Janes for small children, which permit the retention of the original aesthetic.

Automotive design has historically been full of physical skeuomorphisms, such as the transformation from wooden framed and bodied early vehicles produced by coachworks to those which incorporated both functional wood and steel (referred to as "woodies") to, ultimately, simulated vinyl woodgrain cladding entirely for style by the 1960s. Other examples include thinly faux chrome-plated plastic components and imitation leather, gold, interior wood, pearl, or crystal jeweled elements. In The Design of Everyday Things, Don Norman notes that early automobiles were designed after horse-drawn carriages. Indeed, the early automobile design Horsey Horseless even included a wooden horse head on the front to try to minimize scaring the real animals. In the 1970s, opera windows and vinyl roofs on many luxury sedan cars similarly imitated carriage work from the horse and buggy era. As of 2019, most electric cars feature prominent front grilles, even though there is little need for intake of air to cool an absent internal combustion engine.

Virtual examples

Skeuomorph in user interface (hardware-like user interface) with emulating control knobs for manipulating digital audio in the Redstair GEARcompressor Audio Unit-Plugin

Many computer programs have a skeuomorphic graphical user interface that emulates the aesthetics of physical objects. Examples include a digital contact list resembling a Rolodex, and IBM's 1998 RealThings package. A more extreme example is found in some music synthesis and audio processing software packages, which closely emulate physical musical instruments and audio equipment complete with buttons and dials. On a smaller scale, the icons of GUIs may remain skeuomorphic representations of physical objects, such as an image of a physical paper folder to represent computer files in the desktop metaphor. This is even the case for items that are no longer directly applicable to the task they represent (such as a drawing of a floppy disk to represent "save").

Apple Inc., while under the direction of Steve Jobs, was known for its wide usage of skeuomorphic designs in various applications. This changed after Jobs's death when Scott Forstall, described as "the most vocal and high-ranking proponent of the visual design style favored by Mr. Jobs", resigned. Apple designer Jonathan Ive took over some of Forstall's responsibilities and had "made his distaste for the visual ornamentation in Apple's mobile software known within the company". With the announcement of iOS 7 at WWDC in 2013, Apple officially shifted from skeuomorphism to a more simplified design, thus beginning the so-called "death of skeuomorphism" at Apple. Skeuomorphism is a key component of Frutiger Aero, an Internet aesthetic derived from mid-2000s user interface designs.

Microsoft's shift from skeuomorphic design to flat design

Microsoft also shifted to a flat design approach. In 2012, Microsoft removed drop shadows, gradients, textures, and ornamentation. Windows 8 embraced a minimalist design that predominantly focused on different styles and sized tiles. This oversimplification received some initial backlash, making it less intuitive to follow. The number of tiles in the start menu did not noticeably improve the usability of the application and reduced the level of familiarity previously retained through skeuomorphic elements.

Other virtual skeuomorphs do not employ literal images of some physical object; but rather allude to ritual human heuristics or heuristic motifs, such as slider bars that emulate linear potentiometers and visual tabs that behave like physical tabbed file folders. Another example is the swiping hand gesture for turning the "pages" or screens of a tablet display.

Virtual skeuomorphs can also be auditory. The shutter-click sound emitted by most camera phones when taking a picture is an auditory skeuomorph. Another familiar example is the paper-crumpling sound when a document is trashed.

The connection between UX Design and Skeuomorphic Design

In the world of UX Design, skeuomorphs are supposed to enhance the functionality and intuitiveness of a user interface. Since the early 2010s, skeuomorphs have become popular in the digital design realm. Skeuomorphs leverage preexisting mental models which is an important concept in UX Design. A mental model is a user's view of a system through their lenses. Mental models are typically governed by the surrounding environment. The human brain creates expectations, predictions, and decisions. Compared to reality, the mental model adapts and a new belief is adopted. Mental models are important because they can change over time. Understanding mental models can generate user insights that can be applied to designing relatable and user-friendly experiences. To emulate the natural environment, designs that incorporate 3D elements with perceived texture, color, patterns, sounds, and even animations can add to the appeal. By designing an interface that fits most user's mental models, designers can understand user pain points, needs, and motivations on a deeper level, which translates to more user-friendly designs. Skeuomorphs provided a way to meet business needs with empathy and creativity.

In design

Pushbutton telephone with imitation rotary dial

Retrofuturism incorporates visual motifs from old predictions of the future, especially visions of electro-industrialism. Skeuomorphic design is frequently incorporated in retrowave or synthwave illustrations. Skeuomorphic design is closely linked with metamodernism.

Skeuomorphic design seems to be preferred by older recipient groups, often referred to as "digital immigrants", while "digital natives" tend to favor flat design over skeuomorphisms. However, younger people are still able to understand the signifiers that skeuomorphic design employs. A better user experience could be measured for each respective design philosophy among digital natives and immigrants.

Arguments in favor

An argument in favor of skeuomorphic design in digital devices is that signifiers to affordances help those familiar with the original item learn to use the digital version. Interaction paradigms for computer devices are culturally entrenched; proposals for change often spawn debate. Don Norman describes this process as a form of cultural heritage, and credits skeuomorphism with easing transitions to newer technology, stating that it "gives comfort and makes learning easier" until the newer devices no longer need to resemble their predecessors.

Compared to flat design, skeuomorphic design seems to facilitate a fast navigation through graphic user interfaces, because icons are more easily recognized and less abstract than their minimalistic counterparts found in flat design.

Emotional Appeal

Another advantage of skeuomorphic design is its emotional appeal. By leveraging familiarity, users are drawn back to their memories and experiences using a specific product. For example, the trash icon and the sound it makes when a file is dragged to trash resembles the sound of trash being thrown in the trash can. This emotional connection allows the user to connect stronger with the emotional appeal which can translate to heightened fondness for a product. Pathos is the primary emotional appeal that is embedded in multiple products to attract users. Since skeuomorphs typically reflect a memory or experience, the pathos appears to be strong and the need for supporting elements and functions is not as necessary.  

Arguments against

The arguments against virtual skeuomorphic design are that skeuomorphic interface elements are harder to operate and take up more screen space than standard interface elements, that this breaks operating system interface design standards, that it causes an inconsistent look and feel between applications, that skeuomorphic interface elements rarely incorporate numeric input or feedback for accurately setting a value, that many users may have no experience with the original device being emulated, that skeuomorphic design can increase cognitive load with visual noise that after a few uses gives little or no value to the user, that skeuomorphic design limits creativity by grounding the user experience to physical counterparts, and that skeuomorphic designs often do not accurately represent underlying system state or data types due to inappropriate mimesis. For example, an analog gauge interface may be read less precisely than a digital one.

Nielsen's 10 design heuristics

According to the Nielsen Norman Group, there are 10 heuristics that guide interaction design. Due to the free flowing nature of these principles, they are called heuristics instead of being labeled as specific design guidelines. Designers refer to these principles when thinking of structuring user flows and the display of a user interface. There are some design principles that are applicable to skeuomorphic design. They are listed below:

Consistency and Standards

When an individual reads a book, the book is in the shape of a rectangle. The title of the book is displayed in large font with the author's name at the bottom in fine text. When the individual opens the book, there lies a table of contents. Each page is numbered and there are certain margin spacings. At the end of the book, there is an author's notes section and perhaps a list of resources depending on the type of book. Now if the same individual picks up another book and sees none of the typical book elements, the user is left distraught and unsure how to read the book. This signifies the importance of consistency and standards. As a reader would expect all books to look and feel the same, users expect websites and apps to behave in a similar fashion. Maintaining this principle will improve learnability through internal and external consistency. Internal consistency is having an established design system as mentioned above. An example would be listing menu components in the same order (File, Edit, View, and so on).

Using similar colors across the platform to distinguish specific actions reduces cognitive load and helps the user become more familiar with the platform. External consistency refers to following common industry standards. An example of this is the homepage link. When a user sees a homepage link, the user knows the next action as a result of clicking on the homepage button. External consistency is another reason why designers keep up with design trends in order to observe what users are becoming familiar with and accommodate to their needs. Following consistency in general can lead to a greater brand image internally and externally. Adhering to branding guidelines can align the mission of a business with its image more accurately and professionally.

Recognizing, diagnosing, and recovering from errors

When a system functions in an ideal state, issues do not arise. However, what happens when there are errors? How are they prevented? How is the message conveyed? These are questions that designers think about when helping users to recognize, diagnose, and recover from errors. Here is the simple definition of an error message: A system-generated interruption to the user's workflow that informs the user of an incomplete, incompatible, or undesirable situation according to the system's implementation. Oftentimes, error messages may not be a focal point of design and can be overlooked over the pursuit of ideal design. Here are three key guidelines to keep in mind when designing for error messages:

• Errors should be displayed near the the error's source.
  • Utilizing the law of proximity allows users to quickly find the error and address it promptly. User's having to look for an error they may not even know about can be considered inefficient and lead to lower user retention. Placement of error messages in an accessible manner depends on the context of the error and the type of error message that needs to be displayed. For instance, if a user is adding a link to their profile and the link is invalid, the error message would hover around the user keyboard on a mobile app. This reduces the guesswork of having to figure out the error and trains the user how to encounter a similar error next time.
• Do not prematurely display errors.
  • Timing of errors is crucial for effective error messages. Displaying an error message too soon can interrupt a user's experience with a system. This can frustrate, annoy, and overwhelm the user with numerous messages popping up on their screen. Instead, introducing in-line errors slowly brings a potential error to a user's attention without stopping their interaction with the system. For instance, if a user is creating a new password and their password does not meet the password guidelines, a message displaying weak password would display as a user is typing their password, but would not stop them from typing out their password. As the user enters a password that aligns with the password requirements, the error message goes away and the password can be saved.
• Approach error messages with a positive tone and don't blame the user.
  • Tone can be seen in everyday interactions between humans and can impact the flow of a conversation. Similarly, tone in design also needs to be considered. Certain tones invoke certain responses and emotions from users, which they then use to associate with a product. Some examples of words to not use are invalid, illegal, and incorrect . Constructive criticism is shown to have more encouraging effects than negative feedback. Utilizing a non-judgmental or even an positive tone helps users not feel alienated and encourages users to continue to use the platform.

Aesthetic and minimalist design

Around one to two decades ago, the idea of an aesthetic user interface was different. What used to be considered innovative is now considered retro and clunky. Websites used to be filled with blocks of text. As technology evolved, a new wave of aesthetic and minimalist design standards have risen. Users value designs that are dynamic and interactive. User interfaces focus on less text and prioritize telling a story through images. The focus of aesthetic and minimalist design relies on grabbing the user's attention and adapting to evolving user's digital tastes.

• First impression is the last impression.
  • This is a quote that is oftentimes used, and it is proven to be quite true. On average, users make a first impression about a site in the 50 milliseconds after landing on it. This is before reading any content and understanding any functionality. Prioritizing a user's first interaction or visit of a page is at the forefront of designer's minds and influences the way that they shape the web/mobile user experience.
• Balance is key.
  • Including relevant information that is helpful to the user is considered to be more important than including information that may be unnecessary and unhelpful in the long run. However, not including enough information can obscure necessary elements. For instance, a simple search bar on a webpage with no description of the services available may lead the user to believe the site is not functional or is they may have landed on the wrong site. Maximizing utility and usability while minimizing noise displays the intended user experience as well as provide some breathing room for the user to navigate and understand the product.
• Universal patterns create positive connotations.
  • Leveraging patterns from nature helps convey meaning while maintaining aesthetics and minimalism. For instance, people tend to perceive landscapes with water basins and varied topography as beautiful, no matter what culture they come from. This also applies to vibrant or saturated colors, fireworks, and so on. The reason behind can be explained from human evolution. Different design elements convey different types of messages. For instance, a bright yellow color may resemble a banana, a symbol of food for humans. Human needs are characterized under the Maslow Hierarchy of Needs pyramid, with human biological needs at the base of the pyramid. Despite what culture a user is from, using a variety of bright colors and natural images can convey a positive aesthetic that is memorable for the user.

Violation of Nielsen's heuristics by skeuomorphic design

To understand the standard of modern-day design, Nielsen's 10 heuristics are commonly followed design principles to abide by. Skeuomorphs violate some of these design principles such as consistency and standards, recognizing, diagnosing, and recovering from errors, and aesthetic and minimalist design.

Skeuomorphic designs can have inconsistencies across multiple platforms. For instance, when a user opens an application on their mobile phone, the design elements can be structured a certain way to create a skeuomorphic effect and still create an intuitive user interface. However, if these design elements are drastically different on a desktop interface, the user may have a difficult time navigating through the desktop interface due to the lack of consistency between mobile and desktop platforms. To combat this, it is important to establish a design system with standard naming conventions, fonts, font sizes, button designs, color schemes, animations, and icon sets. A standardized design system will enforce consistency across all platforms and help designers understand the purpose behind each design element. Since a design system has a preset of design elements, designers have to justify their reason behind using certain elements. Backed by market research, this justification process improves clarity and focus while designing for users.

Helping users recognize, diagnose, and recover from errors is also another design principle skeuomorphic designs can blur. Error messages are typically designed to be plain and simple, such as bold, red text. Technical jargon is not advised and the error messages that are noticeable and recognizable are more receptive by users. Oftentimes with skeuomorphic designs, error messages can be overwhelming and difficult to read. This can lead to misclicks and frustrate the user by performing an an intended action they did not want to perform. By emulating the real-world environment closely, designs can be created to display complex error messages rather than following a more simple route. For instance, a banking app sends an error message to a user that a bank transfer is insufficient by referencing financial vernacular can be overwhelming and unhelpful to a user. Instead, providing a simple error that informs the user that their transfer was not completed and suggesting steps to resolve the issue would provide more actionable next steps for the user.

The transition to flat design has simplified the aesthetic of user interface design, an aspect skeuomorphic designs can struggle with if not implemented properly. Maintaining minimalism in content and visual design can reduce cognitive load and distraction. Working backward from the end results of the design and focusing on a goal can create clear intentions by performing less work. The 80/20 rule (Pareto Principle), states that 80% of outcomes come from 20% of results is a rule that forces designers to think practically and understand which aspects of the design matter the most to the user. To aid this, usability testing, analysis of KPIs, and user heatmaps provide evidence and confirm the design rationale behind designs and allow designers to iteratively design to create the best possible outcome.

Neomorphism

The culmination of skeuomorphism and flat design has led to a new concept called neomorphism. Some examples of neomorphic elements include buttons raised sharply from the surface through a drop shadow or a stroke. Other examples place skeuomorphic UI elements inside the background, creating a depth effect and an affordance at the same time. Colors also play a role in internal and external shadows and depth. Color can help enhance the visual effect of shadows and depth perception by modifying opacity and adding strokes. The three-dimensional form from skeuomorphism is retained along with the simplicity of flat design. Rounded corners are also another crucial component of neomorphism that can be inviting, soft, and visually appealing.

This upholds the "Aesthetic and Minimalist" design principle. By introducing depth, shadows, and other 3D effects, a user's first impression can be enhanced and intrigue their interest towards the platform. Round buttons are an example of a growing universal trend and an underlying human need. Round objects in real life are perceived to be more safe and usable as opposed to square cornered objects, which may not be as safe and usable.

Rounded corners can tie the design together and create seamless transitions between designs. This subtle mix of design styles allows neomorphic design to take advantage of intuitive and seamless user interface design. Understanding where neomorphic designs can be utilized can help businesses keep up with modern trends.

Impact of skeuomorphic designs on different age populations

In a recent study conducted by Xi and Wu, they were researching the difference in perception between minimalism and skeuomorphic design. They found a correlation between skeuomorph design and increased experienced difficulty. Most users found that flat designs were more usable. The researchers measured the different design styles based on difficulty to execute a specific task. It was noticed that age may be an influential factor. Older populations tend to not be familiar with different technologies and their decreased visual acuity and reduced cognitive function. After conducting another skeuomorphic icon study for individuals between the ages of 65-90, it was concluded that the degree of realism is positively correlated with both preference and understandability. Middle aged populations preferred a flat design whereas novice users and older users experienced more challenges using skeuomorph interfaces than flat interfaces.

The "recognizing, diagnosing, and recovering from errors" design principle may be a factor contributing to older users experiencing more challenges than younger users. The skeuomorphic style of error messages may hinder readability for older users and impede their ability to address an error. Therefore, this design principle is not correctly upheld by skeuomorphism. Flat design upholds this on the other hand, by focusing on simple language and a style that is intuitive and easy to address.

Younger populations tend to be more fond of flat design due to visual aesthetics, status, and positive emotions compared to skeuomorphic design. The researchers restate this preference to skeuominimalist designs, since familiarity and modern design appeals to the younger generation. Skeuomorphic designs have evolved according to different visual preferences for different populations.

Difference between skeuomorphic and flat design on human perceptuomotor processes

In a study by Sangyeon Kim and Sangwon Lee, skeuomorphism and flat design are not different at a perceptuomotor level. They ran two experiments for object-based correspondence and handle-orientation effect. Object-based correspondence is the effect to afford an action potentiated by an object's own properties. The handle-orientation effect is when the orientation of a graspable object corresponds to the responding hand. The researchers found that the reason for the differences between these two design styles previously was due to familiarity.

As flat design embraces a 2D approach compared to skeuomorphic design, which embraces a 3D approach. A 2D object is described to oversimplify elements for aesthetic reasons which leads to missing information in the process. This may explain why flat design can sometimes lead to higher cognitive loads. Another finding from both experiments was that a visual object on the screen may not be directly associated with the operation of the actual object in the real world. Therefore, real-world metaphors may not be as applicable as one may believe.

In terms of skeuomorphic design, this means that a false mapping between real and digital objects can be seen which can lead to confusion and mistakes. In essence, visual objects on the screen afford actions based on the own physical properties of the interface object, not its referent in the real world. If an icon is novel and unfamiliar to a user, no matter which design style is implemented, this can result in perceptuomotor ambiguity and decrease the usability of the interface. Designing icons and interfaces to accurately represent user interactions with a digital object explains why the growing trend in flat design over skeuomorphic design.

Gallery

• 
  Electric kettle in the form of a traditional stovetop kettle
• 
  1970s opera window and vinyl landau roof imitating horse and buggy design, in particular the landaulet
• 
  Digital keypad of an electronic safe, on a circular escutcheon mimicking a mechanical combination dial
• 
  Virtual skeuomorph­ic imitations of pieces of paper
• 
  A 1986 Dodge Caravan with simulated woodgrain meant to evoke the wooden body pieces of some older cars
• 
  Velcro straps on a pair of Mary Jane shoes worn by an American Girl doll; the buckles used on the straps are purely for aesthetic purposes.
• 
  A trackless train built to resemble a steam locomotive

See also

• Anachronism
• Facadism
• Flat design
• Human interface guidelines
• Intuition
• Spandrel
• Trompe-l'œil, 2D artwork using realistic optical illusions to simulate three dimensions
• Vestigiality

General references

• Flecker, M., "An Age of Intermateriality: Skeuomorphism and Intermateriality between the Late Republic and Early Empire", in: A. Haug – A. Hielscher – T. Lauritsen (Hrsg.), Materiality in Roman Art and Architecture: Aesthetics, Semantics and Function (Berlin 2021) 265–283 (Open Access).
• Freeth, C. M., & Taylor, T. F. (2001). Skeuomorphism in Scythia: Deference and Emulation, Olbia ta antichnii svit. Kiev: British Academy; Ukrainian Academy of Sciences. p. 150.

External links

• Moon, Jessica. "A Showcase of 50 Skeuomorphic Designs". Telepathy. Archived from the original on 2019-04-05. Retrieved 2019-04-05.
• flatisbad.com a selection of user experience studies on skeuomorphism maintained by Lomonosov Moscow State University, Laboratory of Work Psychology