Was ist Skeuomorphismus im Webdesign?

Skeuomorphismus erfreute sich lange großer Beliebtheit im Webdesign und UX Design. Aber was genau ist Skeuomorphismus? Welche Rolle spielte es damals und heute im Design? In diesem Artikel zeige ich dir, was Skeuomorphismus ist, die Geschichte und welche Relevanz es heute noch im Design (speziell im UX Design) hat.

Was ist Skeuomorphismus?

Skeuomorphismus bezeichnet allgemein ein Objekt, das in seiner Gestaltung ein anderes Material oder Objekt imitiert.

Im Design ist es eine Gestaltungstechnik, die reale Materialien und Gegenstände digital nachbildet, um dem Nutzer den Sprung von der analogen zur digitalen Welt zu erleichtern.

Die englische Form des Wortes (skeuomorph) tauchte übrigens erstmals 1890 auf.

Der Begriff „skeuomorph“ leitet sich aus dem Griechischen ab:

• skeuos (σκεῦος) = Behälter oder Werkzeug
• morphḗ (μορφή) = Form

Als Beispiel für Skeuomorphismus kann z.B. der Papierkorb oder das Warenkorb Symbol dienen. Natürlich hat das Löschen einer Datei auf dem Computer nichts mit einem Papierkorb zu tun. Dennoch können wir diesen Vorgang aus der realen Welt.

Der Skeuomorphismus im Design sollte helfen, Funktionen besser zu verstehen (indem der Designer eine Metapher nutzt) und dem Nutzer den Einstieg durch bekannte Objekte (und Konzepte) zu erleichtern.

Skeuomorphismus ist mit dem verwandt, was der Umweltpsychologe James Gibson als „Affordances“ (im Deutschen Angebotscharakter) bezeichnet. Affordances bezeichnen die Handlungsmöglichkeiten von Objekten oder anderen Merkmalen mit der Umwelt. Zu den bekanntesten Beispielen für Affordances gehören Türgriffe und Druckknöpfe, deren physisches Design die Nutzer darüber informiert, dass sie gedreht oder gedrückt werden können.

Skeuomorphismus steht für Affordances in digitalen Benutzeroberflächen. Er entspricht unserer natürlichen Interpretation von Objekten – allerdings in einer digitalen Welt.

Die Geschichte des Skeuomorphismus

Phase 1: Skeuomorphismus schlägt die Brücke zur analogen Welt

Anfangs ging es um Skeuomorphismus auf der Meta-Ebene. So wurde Skeuomorphismus relevant, als Computer zu Verbraucherprodukten worden. Der Benutzer war kein lichtscheuer Informatiker mehr, der sich freute, ein textbasiertes Terminal benutzen zu können.

Der Verbraucher hatte mit Maschinencode nicht viel zu tun – und so wurden Schaltflächen und Menüs ins Leben gerufen. Grafische Oberflächen entstanden.

Um den Nutzern zu helfen, zu verstehen, wie sie mit diesen Oberflächen interagieren können, griffen die Designer auf Metaphern aus der realen Welt wie Skeuomorphismus zurück.

Denk an den Papierkorb auf deinem Desktop, an die Ordner, die deine Arbeit organisieren, und sogar an die Schreibtisch-Metapher selbst!

Viele Leute schreiben Apple zu, skeuomorphistisches Design auf die nächste Stufe gebracht zu haben. Apple gilt allgemein als Pionier der digitalen Benutzererfahrung, und Skeuomorphismus ist ein wichtiger Teil davon. Steve Jobs war ein Verfechter des Skeuomorphismus, um den Nutzern zu helfen, intuitiver mit Software und Computern zu interagieren. Ihm ist es zu verdanken, dass die Desktop-Metapher für die breite Masse eingeführt wurde. Realistisch aussehende Steuerelemente prägten nun jedes Programm – von iTunes bis zum Ringbuch-Kalender.

2. Phase: Designer wehren sich gegen die Flut an Skeuomorphismus

Skeuomorphismus erfreute sich so großer Beliebtheit, dass egal, ob Microsoft oder Apple, alle Softwarebereiche skeuomprohistisch designt worden. Es kam zum Overkill. Und so folgte Mitte der 2000er-Jahre eine Gegenreaktion.

Eines der Hauptargumente gegen den Skeuomorphismus war, dass er nicht die effizienteste und effektivste Art ist, Informationen zu vermitteln. Eine iPad-Benutzeroberfläche in den 2010er-Jahren nutzte eine anschauliche Illustration eines Bücherregals mit echten Buchcovern, um E-Books zum Leben zu erwecken.

Die visuelle Metapher funktionierte zwar, aber sie beeinträchtigte sowohl die Lesbarkeit der Buchtitel als auch die Anzahl der Bücher, die auf den Bildschirm passten.

Die Gegner des skeuomorphistischen Designs argumentierten, dass sich dieser Kompromiss nicht lohne, weil die Nutzer kein realistisches Bücherregal mit Büchern mehr bräuchten, um zu verstehen, wie man ein E-Book anklickt.

3. Phase: Flat Design wird geboren

In den letzten 10–12 Jahren hat sich ein weniger realitätsnaher Designansatz gebildet: das Flat Design.

Beim Flat Design werden Objekte, Schatten und andere naturgetreue Elemente durch zweidimensionale Formen und Buttons ersetzt. Nix mit Farbverlauf oder fotorealistischen Strukturen.

Befürworter des Flat Designs argumentieren, dass es ein effizienteres, einfacheres und eleganteres Interface-Design ermöglicht. Flat Design basiert auf einem klassischen Rastersystem, das flache Benutzeroberflächen übersichtlich und schön machen kann.

Das Flat Design kann jedoch zu Problemen bei der Benutzerfreundlichkeit führen. Die Nielsen Norman Group, ein führendes Unternehmen in der Usability-Forschung, hat Untersuchungen durchgeführt. Diese zeigen, dass Benutzer manchmal Schwierigkeiten haben, sich auf Oberflächen zurechtzufinden, die nur flach gestaltet sind. Der Nutzer muss erst nach klickbaren Elementen suchen.

Das führt dazu, dass die Nutzer mit der Maus über den ganzen Bildschirm fahren und darauf achten, wann sich der Cursor in eine Hand verwandelt. Wenn du also auf Effizienz Wert legst, brauchst du wahrscheinlich eine Kombination aus flachem und skeumorphistischem Design.

4. Phase: Material Design

In letzter Zeit wurde zu einem Mittelweg zurückgefunden: ein weitgehend flaches Design mit einigen realistischen Elementen, die dem Nutzer bei Bedarf helfen. Die NNGroup empfiehlt, dass du, wenn du ein flaches Design verwendest, einige minimale realistische Elemente einbauen solltest. Schatten können etwa den Nutzern helfen, herauszufinden, wann ein Element „vor“ einem anderen steht und Interaktivität suggerieren.

Skeuomorphismus spielt in der Material Design-Landschaft ebenfalls eine wichtige Rolle, aber ist nicht mehr so wichtig wie früher. Als Designer solltest du klug und strategisch vorgehen, wenn du Skeuomorphismus einsetzen willst.

5. Phase: Neomorphismus – Skeuomorphismus meets Flat Design

Flat Design ist ja gut und schön. Im Alltag des Webdesigners haben sich aber auch hier einige Fallstricke ergeben. So werden Buttons zum Beispiel (ohne Verlauf) nicht immer richtig vom Nutzer erkannt. Auch einige andere Elemente, mit denen man interagieren kann, sind schwer in einer flachen Welt darzustellen.

Deshalb wurde um das Jahr 2020 ein neuer Designtrend geboren. Der Neomorphismus vereint Flat Design mit realistischem Design. Flächen und Schatten treffen aufeinander. Auf Webseiten ist das eher zunehmend zu sehen. Bei mobilen Anwendungen ist der Neomorphismus schon häufiger anzutreffen.

Vorteile des Skeuomorphismus

Auch wenn Skeuomorphismus unter Webdesignern mittlerweile verpönt ist, kann es in manchen Situationen hilfreich sein. Erfahre hier mehr über die Vorteile von Skeuomorphismus:

• Einige skeuomorphismistischen Symbole sind mittlerweile in den gesellschaftlichen Kontext übergegangen. So kann das Diskettensymbol, der Mülleimer und auch der Einkaufswagen schnell und klar kommunizieren, um welche Funktion es sich handelt.
• Mittlerweile ist Skeuomorphismus ausgestorben. Deshalb kann es ein Alleinstellungsmerkmal deines Webdesigns sein. Achte jedoch darauf, dass du nicht die Fehler machst, die am Anfang des Skeuomorphismus gemacht wurden. Wie immer gilt: Weniger ist mehr.
• Skeuomorphismus ist wesentlich persönlicher und wärmer als das kalte Flat Design.
• Das Wort (und die Idee) des Skeuomorphismus gibt es schon über 100 Jahre. Es ist nichts falsch am Skeuomorphismus. In bestimmten Situation bietet es sich sogar an.
• Falls deine Zielgruppe aus der älteren Generation besteht, kann Skeuomorphismus hilfreich sein. Somit erhalten ältere Benutzer schneller Zugang zu Funktionen und Bedienung.

Nachteile des Skeuomorphismus

Skeuomorphismus ist out. Und das sage ich nicht nur im Hinblick auf Trendy-Designs – auch die Funktion von Skeuomorphismus ist schnell an die Grenzen gekommen. Hier also die Skeuomorphismus Nachteile:

• Skeuomorphismus ist extrem illustrativ und lässt daher kaum Platz für Weißraum. Das führt zu überfrachteten Benutzeroberflächen. Außerdem ist es schwer, mit dieser Designströmung interaktive oder wichtige Elemente zu betonen.
• Lesbarkeit und Navigation leiden manchmal unter den zusätzlich benötigten Gestaltungselementen des Skeuomorphismus.
• Einige Objekte sind nicht mehr allgemein bekannt (die Diskette als Symbol zum Speichern) – die Millennials sollten dieses Objekt gar nicht zuordnen können.
• Durch die Verwendung von Grafiken als Gestaltungsmittel der Benutzeroberflächen wird auch die Ladezeit erhöht – dies ist ein Nachteil bei Websites und natürlich auch in der Softwareentwicklung.
• Einige nachgebildete Objekte limitieren die Möglichkeiten weitere digitale Funktionalitäten unterzubringen.
• Skeuomorphismus kommt an seine Grenzen, wenn es kein analoges Gegenstück zur digitalen Anwendungen/Website/App gibt.

Ist Skeuomorphismus heute noch relevant?

Es ist schon witzig, wie trendorientiert Webdesigner sind. Meiner Meinung nach hatte Skeuomorphismus eine Daseinsberechtigung. Allerdings hat man es völlig übertrieben (zum Beispiel Apples E-Book-Bibliothek) und es dann über gehabt.

Allerdings ist der Ansatz bekanntes aus der Offline-Welt in die digitale Welt zu übertragen nicht falsch. Du solltest es nur nicht übertreiben. Rückblickend war das flache Flat Design auch kein Usability Oberhammer. Interaktionselemente konnten nicht richtig ausgezeichnet werden.

Du solltest darauf achten, dass deine Designs immer im Gleichgewicht sind. Nutz deinen Kopf, um gutes UX Design zu erstellen. Falls dann eben ein Verlauf notwendig ist, um einen Button als Interaktionselement zu kennzeichnen – dann nutze eben einen Verlauf.

Und falls du eben Skeuomorphismus benötigst, um eine Funktion klar zu kommunizieren, dann solltest du es verwenden. Achte doch darauf, dass die Form immer der Funktion folgt und die Gestaltung nicht die Nutzerführung und Aufmerksamkeit behindert.

Ich denke, beim Skeuomorphismus kann man das alte Sprichwort „weniger ist mehr“ gut anwenden.