Eine veraltete Designtechnik oder ist Skeuomorphismus immer noch relevant? In diesem Beitrag werfen wir einen Blick auf die Geschichte des Skeuomorphismus und darauf, warum er nach wie vor ein nützliches Werkzeug im UX-Design ist.
Skeuomorphismus war keine kurzlebige Modeerscheinung im Web-Design. Als die Skeuomorphie zum ersten Mal in Software-Benutzeroberflächen und später in Apps und auf Websites eingeführt wurde, diente sie einem praktischen Zweck.
Skeuomorphismus überbrückte die Kluft zwischen physischer und digitaler Welt.
Heute ist der Skeuomorphismus größtenteils durch flache und minimalistische Designtrends verdrängt worden. Nicht nur das, einige Designer haben ihn sogar für tot erklärt.
Aber warum ist der Skeuomorphismus so sehr in Verruf geraten?
Um zu verstehen, was mit dem Skeuomorphismus passiert ist und warum wir ihn nicht so schnell beiseite schieben sollten, werden wir untersuchen, was der Skeuomorphismus ist, was seine größten Stärken sind, inwiefern er heute relevant ist und vieles mehr. Darüber hinaus werden wir die besten Praktiken für die Verwendung von Skeuomorphismus im UX-Design diskutieren.
Inhaltsübersicht
- Was ist Skeuomorphismus?
- Die Geschichte des Skeuomorphismus
- Häufige Kritikpunkte und Nachteile von Skeuomorphismus im UX-Design
- Vorteile und Anwendungen von skeuomorphem Design heute
- Beispiele für Skeuomorphismus im UX-Design
- Ist Skeuomorphismus noch relevant?bild
- Skeuomorphismus: Bewährte Praktiken für UX-Design
Was ist Skeuomorphismus?
Skeuomorphismus ist eine Designtechnik, bei der UI-Elemente so aussehen und sich manchmal auch so verhalten wie ihre realen Gegenstücke. In einigen Fällen ist das skeuomorphe Objekt eines, das wir nicht mehr verwenden.
Der Begriff „skeuomorph“ leitet sich aus dem Griechischen ab:
skeuos (σκεῦος) = Behälter oder Werkzeug
morphḗ (μορφή) = Form
Der Begriff wurde von Dr. Henry Colley March im Jahr 1889 erfunden. Ursprünglich bezeichnete ein Skeuomorph ein physisches Objekt, das ornamentale Designs oder Merkmale aufwies, die nicht mehr relevant oder notwendig waren. So wie ein Tontopf, in den Formen eingeritzt wurden, damit er wie ein geflochtener Korb aussieht.
Ein gutes Beispiel für einen skeuomorphen Gegenstand, den wir heute alle kennen, ist der Impossible Whopper von Burger King:
Die Verbraucher wissen alle, wie ein Rindfleisch-Patty aussieht – insbesondere eines der flammgegrillten Patties von Burger King. Der Impossible-Patty enthält zwar kein Fleisch, sieht aber genauso aus wie ein Rindfleisch-Patty.
Warum tun Impossible und/oder Burger King das? Skeuomorphs sind unter anderem deshalb so nützlich, weil die Vertrautheit des Designs es den Menschen leicht macht, von der alten Art, Dinge zu tun, auf die neue Art umzusteigen.
Skeuomorphs können auch aus Nostalgiegründen nützlich sein. Zum Beispiel machen viele Fotohandys immer noch ein „Klick“-Geräusch, wenn jemand ein Foto macht, obwohl dieses Geräusch gar nicht nötig ist.
Skeuomorphs haben im Laufe der Jahre auch eine Rolle im digitalen Design gespielt. Auch wenn sie heute nicht mehr so häufig anzutreffen sind, kann man immer noch von Zeit zu Zeit einen Blick auf sie werfen.
Das Papierkorbsymbol im Mac-Dock ist zum Beispiel ein Skeuomorph:
Die meisten anderen Symbole sind flach und sehen eher wie digitale Logos als wie physische Objekte aus. Dies ist der größte Unterschied zwischen Skeuomorphismus und anderen digitalen Designtrends und -techniken.
Die Geschichte des Skeuomorphismus
Wann und wo genau haben wir Skeuomorphismus im UX-Design eingesetzt? Werfen wir einen Blick darauf:
Die erste Welle
In den Anfängen der Softwareentwicklung spielte die Skeuomorphie eine wichtige Rolle bei der Einführung von Benutzern in eine neue Arbeitsweise.
Nimm die Anwendungssuite von Microsoft. Es war nicht unbedingt der Akt des Schreibens, der Durchführung von Berechnungen oder der Erstellung von Präsentationen auf digitalem Wege, der ein Hindernis für Verbraucher, Fachleute und Studenten darstellte.
Es waren die anderen Funktionen, an die sie denken mussten, die vorher nicht wirklich relevant waren. Zum Beispiel das „Speichern“ ihrer Arbeit, das „Ausschneiden“ von Text oder das „Malen“ eines Formats.
Während dieses Video zeigt, wie die Symbolleiste von Microsoft Word heute aussieht, sehen wir immer noch Überbleibsel der skeuomorphen Symbole von Microsoft aus der Vergangenheit:
Microsoft hat für diese Hauptfunktionen keine unkenntlichen Symbole verwendet, da sie die Lernkurve der Benutzer nur verschlimmert hätten. Stattdessen wurden reale Objekte verwendet, die den Benutzern vertraut waren (z. B. die Diskette für „Speichern“, die Schere für „Ausschneiden“ und der Pinsel für „Formatieren“), und in Aktionsschaltflächen umgewandelt.
Die zweite Welle
Die nächste Welle des Skeuomorphismus fand in den späten 2000er und frühen 2010er Jahren statt. Das war ungefähr zu der Zeit, als der mobile Touchscreen an Bedeutung gewann und die Designer das Bedürfnis hatten, den Benutzern den Übergang von der alten zur neuen Technik zu erleichtern.
Apple war maßgeblich für den Aufstieg des Skeuomorphismus in dieser Zeit verantwortlich.
Im Jahr 2010 sah der Apple-Startbildschirm noch wie folgt aus:
Zum einen sahen die App-Symbole wie anklickbare Schaltflächen aus, die sich vom Hintergrund abhoben. Zweitens waren viele der App-Symbole skeuomorph gestaltet. Ein Beispiel:
- Kamera verwendete das Bild eines Kameraobjektivs.
- YouTube hatte eine Grafik eines alten Fernsehers
- Notizen war ein gelber juristischer Notizblock
Auch wenn es sich dabei nicht um die aufregendsten oder kreativsten Designs handelte, machten diese skeuomorphen Symbole die Apps und vor allem ihren Zweck für die Benutzer sofort erkennbar.
Apple war nicht das einzige Unternehmen, das Skeuomorphismus im UX-Design einsetzte. Er war auch nicht nur auf Smartphone-Bildschirmen zu finden. Sowohl Apps als auch Websites nutzten den Skeuomorphismus.
Im Jahr 2014 verwendete die Website von Artifact Coffee eine beliebte Form des Skeuomorphismus:
Das Herobild verwendet einen realistischen Hintergrund und interaktive physische Objekte. Das ist ein wirklich schönes skeuomorphes Design, das wahrscheinlich bei jedem Besucher der Website einen starken Eindruck hinterlassen wird.
Nach dem, was wir über die Verbraucher von heute wissen, ist diese Art von Skeuomorphismus jedoch im Hinblick auf das Benutzererlebnis nicht effizient. Deshalb ist es nicht verwunderlich, dass die Homepage von Artifact Coffee jetzt so aussieht:
Die meisten Designer haben sich Anfang bis Mitte der 2010er Jahre vom Skeuomorphismus abgewandt. Aber es gab nicht nur einen Designtrend, der ihn ablöste.
Die Skeuomorphismus-Backlash-Ära
Als Nächstes war das flache Design an der Reihe. Es war eine sehr extreme Reaktion auf den Realismus und die Nostalgie des Skeuomorphismus.
Obwohl es damals positiv aufgenommen wurde, dauerte es nicht lange, bis die Designer begannen, UX-bezogene Probleme zu bemerken. Ohne Ebenen oder deutlich anklickbare UI-Elemente waren flache Designs nämlich nicht so einfach zu bedienen.
Als Nächstes rückte das Material Design von Google ins Rampenlicht. Das Designsystem wurde zum Teil entwickelt, um einige der Probleme des flachen Designs in Bezug auf die Benutzerfreundlichkeit zu lösen. Dadurch, dass sich digitale Designs mehr wie Objekte (insbesondere Papier) in der realen Welt verhalten, konnten Designer das Vertrauen der Benutzer in die Klicks erhöhen.
Material hatte aber auch seine Schwächen. Vor allem das strenge Designsystem führte zu einer Flut von Google-Lookalikes bei Apps und Websites. Und weil alles gleich aussah, verloren Marken und die mit ihnen verbundenen Erfahrungen das, was sie so besonders machte.
Seitdem haben die Designer die Probleme mit Flat und Material mehr oder weniger in den Griff bekommen und verwenden nun eine Kombination aus beidem, das so genannte Flat Design 2.0. Es ist flach und bunt, aber mit UI-Elementen, die anklickbar aussehen.
Die dritte Welle
Während flache Benutzeroberflächen nun schon seit fast einem Jahrzehnt die Oberhand haben, ist der Skeuomorphismus immer noch in aller Munde.
Um 2020 herum wurde ein neuer Designtrend namens Neomorphismus bekannt. Stelle dir vor, du würdest Material Design mit Skeuomorphismus kombinieren.
Auf Websites ist dieser Trend noch nicht sehr verbreitet, aber beim Design von mobilen Anwendungen hat er sich durchgesetzt. Auf Dribbble kannst du eine Reihe von Beispielen dafür sehen:
Neomorphismus hat ein ganz eigenes Aussehen.
Im Gegensatz zum Skeuomorphismus, bei dem alltägliche Objekte verwendet werden, um wiedererkennbare Symbole und Schnittstellen zu entwerfen, tut der Neomorphismus dies nicht.
Stattdessen werden wiedererkennbare Schnittstellenelemente verwendet, die uns aus der physischen und digitalen Welt vertraut sind – wie Thermostatknöpfe, Fernbedienungen und Armaturenbrettknöpfe. Diese Elemente werden als erhabene oder vertiefte Elemente in das digitale Design integriert, wodurch die Benutzeroberfläche weicher und griffiger wirkt.
Wenn du sehen willst, wie das auf einer Website aussieht, schau dir das Design und die Funktionalität der Schaltflächen auf der Decimal-Website an:
Es handelt sich nicht nur um eine Animation, die die Farben der Schaltfläche umkehrt. Es sieht so aus, als ob die Schaltfläche gedrückt wird, wenn der Benutzer sie betätigt.
Allgemeine Kritikpunkte und Nachteile von Skeuomorphismus im UX-Design
Bevor wir uns weitere Beispiele ansehen, sollten wir einige der Gründe durchgehen, warum sich Designer so eifrig vom Skeuomorphismus ab- und dem minimalistischen Design zugewandt haben:
1. Skeuomorphe Hintergründe und Details lassen in der Regel wenig Platz für Weißraum und führen zu einer Überfrachtung der Benutzeroberfläche.
2. Veraltete Designs und Layouts können die Lesbarkeit, Navigation und Benutzerfreundlichkeit beeinträchtigen.
3. Die Benutzer brauchen nicht mehr alles erklärt zu bekommen, so dass skeuomorphes Design herablassend und unprofessionell wirken kann.
4. Skeuomorphes Design hat ein Verfallsdatum, insbesondere wenn es physische Geräte darstellt, die jüngere Generationen nicht mehr kennen.
5. Es ist sehr schwierig, skeuomorphes Design zu skalieren, da es sich um viele individuelle Details handelt.
6. Grafiken und Benutzeroberflächen, die mehr Details enthalten, sind in der Regel größer, was sich negativ auf die Ladegeschwindigkeit der Website auswirken kann.
Vorteile und Einsatzmöglichkeiten von skeuomorphem Design heute
Skeuomorphismus ist nicht nur schlecht. Hier sind einige Gründe, warum Designer sie auch heute noch verwenden:
1. Es gibt bestimmte skeuomorphe Symbole, die Teil unseres digitalen Lexikons geworden sind – wie der Einkaufswagen und der Mülleimer – und wir würden der UX schaden, wenn wir versuchen würden, sie zu ersetzen.
2. Ein skeuomorphes UI-Design im Retro-Stil kann sofort viel über die Persönlichkeit einer Marke aussagen und einen unbeschwerten Ton anschlagen.
3. Die Idee des Skeuomorphs gibt es schon seit über 100 Jahren und hat sich an die digitale Welt angepasst. Es gibt keinen Grund, warum wir den Skeuomorphismus nicht auch für unsere heutigen Bedürfnisse modernisieren können. Sehe dich nur den Neomorphismus an.
4. Skeuomorphismus kann auf sehr nischenorientierten Websites nützlich sein, bei denen die Lernkurve so weit wie möglich reduziert werden muss. Zum Beispiel Websites für ältere Menschen oder für Menschen, die eine zweite Sprache lernen.
5. Skeuomorphismus kann ein ernsthafter Wettbewerbsvorteil sein, wenn er einer Marke zu mehr Aufmerksamkeit verhilft als ihren Konkurrenten, die alle die gleiche Art von flachem Design verwenden.
6. Designer müssen Skeuomorphismus nicht nur für die Gestaltung von Schnittstellen verwenden. Du kannst sie auch zur Gestaltung von Interaktionen verwenden, die eine Website ansprechender und einprägsamer machen.
Beispiele für Skeuomorphismus im UX-Design
Neomorphismus ist nicht die einzige Art und Weise, in der Designer heute Skeuomorphismus verwenden. Werfen wir einen Blick auf einige Websites, die Skeuomorphismus auf unterschiedliche Weise nutzen:
Mr. Money Mustache
Mr. Money Mustache ist ein Blog zur finanziellen Unabhängigkeit mit einer Menge Persönlichkeit. Daher ist es keine Überraschung, dass der Designer mit Skeuomorphismus in Form eines Retro-Holzpaneel-Hintergrunds herumspielt.
Das Urban Village Projekt
Wenn jemand auf einer Webseite nach unten scrollt, weiß er normalerweise, was ihn erwartet. Mit einer skeuomorphistischen Variante wie der auf der Website des Urban Village Project können die Designer dem Scrollvorgang ein überraschendes Detail hinzufügen. Der Bildlauf führt den Besucher immer noch vertikal die Seite hinunter. Die einzelnen Blöcke bewegen sich jedoch wie eine Karte.
Bagigia
Die Bagigia-Website hat eine Reihe von skeuomorphen Elementen. Das erste, das dem Besucher auffallen wird, ist der Lederhintergrund in der Navigation. Das zweite ist der Reißverschluss am unteren Rand der Seite. Ob der Besucher nun die Maus benutzt, um ihn zu öffnen, oder ob er nach unten scrollt, es werden immer mehr Winkel und auch das Innere der Tasche sichtbar.
NestBloom
NestBloom ist ein interessantes Beispiel für Skeuomorphismus. Hier geht es weniger darum, interaktive Elemente so zu gestalten, dass sie wie ihre realen Gegenstücke aussehen, sondern vielmehr darum, die Interaktionen der Elemente so zu gestalten, dass sie sich wie diese verhalten. Wir sehen dies zweimal – beim Auspacken und beim Umrühren – und beide sollen den Benutzer erziehen und ansprechen.
Waffelhaus
Dies ist die Website der Waffle House-Kette. Während der größte Teil der Website mit Fotos der typischen Frühstücksgerichte bedeckt ist, enthält dieser Abschnitt ein bemerkenswertes Skeuomorph. Der Designer hätte auch einfach einen weißen Hintergrund verwenden können, aber die weiße Kachel schafft eine wiedererkennbare Atmosphäre für diese beliebte Einrichtung.
King Arthur Baking Company / Macy’s
Wenn wir an skeuomorphe Symbole denken, fallen uns sofort die App-Symbole ein, die wir auf unseren Smartphones sehen. Aber auch Website-Symbole können skeuomorph sein, ohne so weit mit dem Realismus zu gehen.
Nimm das Beispiel der King Arthur Baking Company. So sieht die Kopfzeile dieser E-Commerce-Website aus:
Das Einkaufswagen-Symbol ganz rechts auf dem Bildschirm sieht tatsächlich wie ein Einkaufswagen aus. Es mag zweidimensional sein und nicht jedes Detail ist ausgefüllt, aber es ist immer noch zu erkennen.
Vergleiche das mit dem Symbol des Einkaufswagens von Macy’s:
Macy’s verwendet ein benutzerdefiniertes Einkaufswagen-Symbol, was heutzutage gar nicht mehr so ungewöhnlich ist. Während Macy’s mit der Verwendung eines benutzerdefinierten Symbols auskommt, würden kleinere und neuere E-Commerce-Unternehmen eher von der Verwendung des besser erkennbaren skeuomorphen Symbols profitieren.
Ist Skeuomorphismus noch relevant?
Die Antwort auf diese Frage lautet „Ja, aber…“.
Es gibt genauso viele Kritikpunkte am Skeuomorphismus wie Vorteile. Viele dieser Kritiken wurden jedoch Anfang der 2010er Jahre geäußert, als flaches und minimalistisches Design begann, die Herrschaft des Skeuomorphismus im UX-Design zu überholen.
Wie jeder tragfähige Designtrend können Designer Skeuomorphismus immer noch verwenden. Der Schlüssel ist, ihn zu modernisieren.
Wir haben bereits einige Möglichkeiten gesehen, dies zu tun:
- Neomorphe Schaltflächen zum Anfassen
- Interaktive skeuomorphe Animationen
- Texturierte Produkthintergründe
- Navigations-Symbole
Und für Websites und Marken, die etwas ausgefallener sind, kann ein skeuomorpher Hintergrund der alten Schule nützlich sein, solange er sich in einem vernünftigen Rahmen bewegt.
Außerdem sollte man bedenken, dass sich die Technologie schnell verändert. Auch wenn wir keine große Hilfe brauchen, um Internetnutzer mit Smartphone-Touchscreens vertraut zu machen, weiß man nie, welche große Veränderung am Horizont auftaucht. Wenn die Zeit reif ist, wird es von Vorteil sein, sich an den Wert des Skeuomorphismus als Element des Instruktionsdesigns zu erinnern.
Skeuomorphie: Bewährte Praktiken für UX-Design
Wenn du darüber nachdenkst, Skeuomorphismus in dein Benutzererlebnis einzubauen, solltest du die folgenden Best Practices im Hinterkopf behalten:
1. Beginne mit gutem Design
Die Grundsätze des Website-Designs sollten die Grundlage für alles bilden, was du gestaltest. Damit eine Website effektiv ist, musst du verstehen, wie die Augen und der Verstand deiner Besucher das, was du geschaffen hast, interpretieren und angehen werden.
2. Halte dein skeuomorphes Design so einfach wie möglich
Einer der Hauptgründe für die Ablehnung des Skeuomorphismus ist die Komplexität, die er mit sich bringt. Indem du die Komplexität reduzierst (wie im Beispiel des Einkaufswagens), kannst du immer noch die Vorteile des Skeuomorphismus nutzen, ohne unter den Nachteilen zu leiden.
3. Sei geizig mit deinen Skeuomorphen
Mit einem gut getimten und gut gestalteten Skeuomorph kannst du bei den Besuchern deiner Website einen bleibenden Eindruck hinterlassen. Wenn du also nicht gerade eine Website für ein wirklich schrulliges oder Retro-Unternehmen gestaltest, solltest du mit Skeuomorphismus sparsam umgehen, um eine maximale Wirkung zu erzielen.
4. Verwende immer funktionierende
Nehme das Beispiel der Schaltfläche „Speichern“ in Microsoft Word. Eine YouGov-Studie ergab, dass fast zwei Drittel der Studenten nicht wissen, was eine Diskette ist. Wenn du ein veraltetes Objekt als digitales Skeuomorph verwendest, gefährdest du das Benutzererlebnis. Versuche stattdessen, sich an immer funktionierende
5. Lasse Skeuomorphs eine Funktion erfüllen
Wenn du nicht gerade eine Retro-Website entwirfst, werden dekorative Skeuomorphs höchstwahrscheinlich eine Ablenkung sein. Setze Skeuomorphismus stattdessen in den Bereichen deiner Website ein, in denen du ein hohes Maß an Engagement und Aktion erreichen willst.
Fazit
Es ist leicht, Skeuomorphismus als veraltete Designtechnik abzuschreiben, wenn wir auf sein früheres Leben in der Softwareentwicklung und im Design mobiler Anwendungen zurückblicken.
Aber Skeuomorphismus war kein sinnloser Trend aus der Vergangenheit. Er diente einem praktischen Zweck – dem Übergang der Nutzer von der physischen in die digitale Welt.
Auch wenn wir uns jetzt voll und ganz in der digitalen Welt verschanzt haben, werden wir immer einen Bedarf an Skeuomorphismus haben. Es ist vielleicht nicht die Hauptmethode, mit der wir Websites gestalten, aber es ist immer noch nützlich, wenn es richtig und strategisch eingesetzt wird.
Übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/skeuomorphism-ux-design/
