Skeuomorphic and Native Design

Applying the design concept to technological paradigm shifts.

Author

Gden Ngiam
July 23, 2024

What is skeumorphic?

Skeuomorphism is a concept frequently applied in graphical user interface design, referring to interface elements that imitate real-world objects in both their appearance and the way users interact with them.

Chris Dixon, a prominent venture capitalist and tech thinker, borrows the terms "skeuomorphic" and "non-skeuomorphic" to describe two different design approaches, particularly in technology paradigm shifts

Skeuomorphic Era

Major technology waves usually have two eras: the skeuomorphic era and the native era. In the skeuomorphic era, design thinking is largely adapted from older domains. For example, the early web was mainly digital adaptations of pre-internet activities like letter writing and mail-order shopping.

Concept

In the early stages of new technology, designers often draw heavily from existing, familiar designs to make the transition easier for users. This is known as skeuomorphic design.

Early Web Examples

  • Letter Writing: Email was designed to look and function like traditional mail systems, using terms like "inbox," "outbox," and "attachments."

  • Mail-Order Shopping: Early e-commerce websites mimicked the layout and functionality of mail-order catalogs, with pages of products that users could browse and purchase online.

Familiarity

The main goal in this era is to make new technology feel less intimidating by making it look and operate like familiar real-world objects and activities.

Historical Analogies

  • Gutenberg’s First Prints: When Johannes Gutenberg invented the printing press, his first printed books were designed to look like handwritten manuscripts. This was because people were accustomed to handwritten books, and the familiar appearance helped them accept the new printed versions.

  • Horseless Carriages: Early automobiles were called "horseless carriages" because they were designed to resemble horse-drawn carriages. This made the new technology more acceptable to people who were used to carriages.

Native Design: Transcending Constraints and Maximizing Functionality

In the era of digital technology, native design has emerged as a powerful approach that aims to make new technology less intimidating and more familiar. By drawing inspiration from historical analogies and breaking free from artificial constraints, native design maximizes creativity, innovation, functionality, and usefulness.

Transcending Artificial Constraints:

  • Breaking Free from Physical Mimicry: Native design moves beyond the need to imitate physical objects or older forms of media, opening up new possibilities unique to digital platforms.

  • Exploring New Possibilities: Designers can explore new interaction models, such as gesture controls, voice commands, augmented reality, and virtual reality.

Maximizing Creativity and Innovation:

  • Encouraging New Ideas: Native design encourages designers to think outside the box and develop novel features and functionalities that enhance user experience.

  • Pioneering New Interactions: Designers can implement new interaction models specifically designed for digital devices.

Maximizing Functionality and Usefulness:

  • Optimized for Digital Strengths: Native design prioritizes the strengths of digital devices, creating efficient and user-friendly interfaces with faster load times, smoother interactions, and intuitive navigation.

  • Dynamic and Interactive Elements: Native design leverages the dynamic capabilities of digital technology to provide real-time updates, interactive content, and seamless multimedia integration.

  • Tailored to User Needs: Native design is responsive, adaptive, and accessible, ensuring a consistent user experience across platforms and inclusivity for a wider range of users.

Examples of Native Design Advantages:

  • Social Media Platforms: Platforms like Instagram and Snapchat utilize native design to provide user-friendly interfaces that are easy to navigate and interact with, leveraging touch gestures and mobile capabilities.

  • E-commerce Websites: Online shopping platforms like Amazon and ASOS employ native design to create immersive and interactive shopping experiences, with features like product carousels, zoom functionality, and customer reviews.

  • Mobile Apps: Native apps like Google Maps and Uber are designed specifically for mobile devices, providing seamless integration with device features like GPS, camera, and notifications.

Case study of Skeuomorphic vs Non Skeuomorphic Design in Video Platforms

  • Traditional Approach: Early video platforms followed a skeuomorphic approach by mimicking the structure of traditional media distribution. These platforms typically hosted licensed content from major content providers, much like TV networks.

  • Characteristics:

    • Licensed Content: The platforms primarily showcased movies, TV shows, and professionally produced content that viewers were accustomed to seeing on television or in theaters.

    • Limited User Interaction: User interaction was minimal, with viewers mostly consuming content passively, much like watching TV.

    • Hulu (2007): Launched as a joint venture by major media companies, Hulu focused on streaming licensed TV shows and movies. Its business model was similar to traditional TV networks, offering content that users were already familiar with.

Native Approach by YouTube:

  • Empowering Individual Creators: YouTube embraced a native design philosophy, leveraging the internet's unique capabilities to empower individual creators and facilitate user-generated content.

  • Characteristics:

    • User-Generated Content: YouTube allowed anyone to upload and share videos, creating a diverse and expansive library of content generated by users worldwide.

    • Interactive and Community-Driven: YouTube encouraged interaction through comments, likes, shares, and subscriptions, fostering a sense of community and engagement unique to the platform.

Impact and Innovations:

  • Lower Barriers to Entry: By providing a platform for anyone to share their content, YouTube democratized content creation and distribution.

  • New Content Formats: YouTube's native approach led to new content formats and genres, such as vlogs, tutorials, and gaming videos.

  • Monetization and Partnerships: YouTube introduced monetization options for creators, such as the YouTube Partner Program (2007), incentivizing high-quality, consistent content creation.

Comparative Analysis:

Skeuomorphic Platforms (e.g., Hulu, Early Netflix):

  • Content Source: Relied heavily on licensed content from established media companies.

  • User Interaction: Minimal interaction, focused on passive consumption of professionally produced content.

  • Design Philosophy: Modeled after traditional media distribution methods, aiming to replicate the TV or cinema experience online.

Native Platform (YouTube):

  • Content Source: Encouraged user-generated content, creating a diverse and eclectic mix of videos from individual creators.

  • User Interaction: High level of interaction with features like comments, likes, shares, and subscriptions, fostering community engagement.

  • Design Philosophy: Embraced the unique capabilities of the internet, creating a platform fundamentally different from traditional media and optimized for digital interaction and creativity.

YouTube's native design approach transcended the artificial constraints of skeuomorphic video platforms by fully leveraging the internet's capabilities. This paradigm shift empowered individual creators, fostered innovation, and maximized the function and usefulness of the platform. By embracing user-generated content and interactive community features, YouTube set a new standard for digital media, demonstrating the superiority of native design in unlocking the full potential of technology.