Inhaltsverzeichnis<\/h4>\n\n\n\n- Was ist Skeuomorphismus?<\/a><\/li>
- Die Geschichte des Skeuomorphismus<\/a><\/li>
- H\u00e4ufige Kritikpunkte und Nachteile des Skeuomorphismus im UX-Design<\/a><\/li>
- Vorteile und Anwendungen des skeuomorphischen Designs heute<\/a><\/li>
- Beispiele f\u00fcr Skeuomorphismus im UX-Design<\/a><\/li>
- Ist Skeuomorphismus noch relevant?<\/a><\/li>
- Skeuomorphismus: Beste Praktiken f\u00fcr UX-Design<\/a><\/li><\/ul>\n<\/div><\/div>\n\n
Was ist Skeuomorphismus?<\/h2>\n\n
Skeuomorphismus ist eine Designtechnik, bei der UI-Elemente wie ihre realen Gegenst\u00fccke aussehen und manchmal auch funktionieren. In manchen F\u00e4llen handelt es sich bei dem skeuomorphen Objekt um eines, das wir nicht mehr verwenden.<\/p>\n\n
Der Begriff „Skeuomorph“ leitet sich aus dem Griechischen ab: <\/p>\n\n
skeuos (\u03c3\u03ba\u03b5\u1fe6\u03bf\u03c2<\/em>) = Beh\u00e4lter oder Werkzeug<\/p>\n\nmorph\u1e17 (\u03bc\u03bf\u03c1\u03c6\u03ae<\/em>) = Form<\/p>\n\nEr wurde 1889 von Dr. Henry Colley March erfunden. Urspr\u00fcnglich bezog sich ein Skeuomorph auf ein physisches Objekt, das ornamentale Designs oder Merkmale aufwies, die nicht mehr relevant oder notwendig waren. Wie ein Tontopf, in den Formen eingeritzt wurden, um ihn wie einen geflochtenen Korb aussehen zu lassen.<\/p>\n\n
Ein gutes Beispiel f\u00fcr einen Skeuomorph, mit dem wir heute alle vertraut sind, ist der Impossible Whopper von Burger King<\/a>: <\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2021\/11\/1-burger-king-impossible-whopper-skeuomorph.png\")
<\/figure>\n\nVerbraucher sind alle mit dem Aussehen eines Rindfleisch-Patties vertraut \u2014 insbesondere mit einem der flammengebratenen Patties von Burger King. Das Impossible Patty sieht, obwohl es kein Fleisch enth\u00e4lt, genau wie ein Rindfleisch-Patty aus. <\/p>\n\n
Warum machen Impossible und\/oder Burger King das? Ein Teil des Grundes, warum Skeuomorphe n\u00fctzlich sind, ist, dass die Vertrautheit im Design es den Menschen erleichtert, vom alten Weg der Dinge zum neuen \u00fcberzugehen. <\/p>\n\n
Skeuomorphe k\u00f6nnen auch aus Nostalgiegr\u00fcnden n\u00fctzlich sein. Zum Beispiel machen viele Kamerahandys immer noch ein „Klick“-Ger\u00e4usch, wenn jemand ein Foto aufnimmt, obwohl es keinen Bedarf f\u00fcr diesen Ton gibt.<\/p>\n\n
Skeuomorphe haben im Laufe der Jahre auch eine Rolle im digitalen Design gespielt. Obwohl sie heute nicht mehr so weit verbreitet sind, kann man sie immer noch gelegentlich erkennen. <\/p>\n\n
Zum Beispiel ist das Papierkorb-Symbol im Mac-Dock ein Skeuomorph: <\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2021\/11\/2-mac-desktop-icons-skeuomorphism.png\")
<\/figure>\n\nDie meisten anderen Symbole sind flach und \u00e4hneln eher digitalen Logos als physischen Objekten. Dies ist der gr\u00f6\u00dfte Unterschied zwischen Skeuomorphismus und anderen digitalen Designtrends<\/a> und -techniken. <\/p>\n\nDie Geschichte des Skeuomorphismus<\/h2>\n\n
Wann und wo genau haben wir Skeuomorphismus im UX-Design eingesetzt? Lassen Sie uns einen Blick darauf werfen: <\/p>\n\n
Die erste Welle<\/h3>\n\n
In den Anf\u00e4ngen der Softwareentwicklung spielte Skeuomorphismus eine wichtige Rolle bei der Einf\u00fchrung der Benutzer in eine neue Arbeitsweise. <\/p>\n\n
Betrachten wir Microsofts Anwendungssuite<\/a>. Es war nicht unbedingt der Akt des Schreibens, des Durchf\u00fchrens von Berechnungen oder des Erstellens von Pr\u00e4sentationen digital<\/em>, der ein Hindernis f\u00fcr Verbraucher, Fachleute und Studenten darstellte. <\/p>\n\nEs waren die anderen Funktionen, \u00fcber die sie nachdenken mussten, die zuvor nicht wirklich relevant waren. Wie zum Beispiel ihre Arbeit zu „Speichern“, Text zu „Ausschneiden“ oder ein Format zu „Malen“. <\/p>\n\n
W\u00e4hrend dieses Video<\/a> zeigt, wie die Microsoft Word-Symbolleiste heute aussieht, sehen wir immer noch \u00dcberreste von Microsofts skeuomorphen Symbolen der Vergangenheit: <\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2021\/11\/3-microsoft-word-toolbar-icons.png\")
<\/figure>\n\nMicrosoft verwendete keine unerkennbaren Symbole f\u00fcr diese Hauptfunktionen, da dies die Lernkurve der Benutzer nur verschlechtert h\u00e4tte. Stattdessen nahm es reale Objekte, mit denen die Benutzer vertraut waren (z.B. die Diskette f\u00fcr „Speichern“, die Schere f\u00fcr „Ausschneiden“ und den Pinsel f\u00fcr „Formatmaler“) und verwandelte sie in Aktionsschaltfl\u00e4chen. <\/p>\n\n
Die zweite Welle<\/h3>\n\n
Das n\u00e4chste Mal machte Skeuomorphismus Ende der 2000er und Anfang der 2010er Jahre gro\u00dfen Eindruck. Dies war ungef\u00e4hr zu der Zeit, als der mobile Touchscreen an Bedeutung gewann und Designer den Bedarf hatten, den \u00dcbergang der Benutzer vom Alten zum Neuen zu erleichtern. <\/p>\n\n
Apple<\/a> war diesmal gr\u00f6\u00dftenteils f\u00fcr den Aufstieg des Skeuomorphismus verantwortlich. <\/p>\n\nIm Jahr 2010 sah der Apple-Startbildschirm so aus: <\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2021\/11\/4-apple-device-from-2010.png\")
<\/figure>\n\nZun\u00e4chst sahen die App-Symbole wie klickbare Schaltfl\u00e4chen aus, die aus dem Hintergrund hervorstechen. Zweitens waren viele der App-Symbol-Designs von Natur aus skeuomorph. Zum Beispiel:<\/p>\n\n
- Camera<\/strong> verwendete ein Bild eines Kameraobjektivs<\/li>
- YouTube<\/strong> hatte eine Grafik eines alten Fernsehers<\/li>
- Notes<\/strong> war ein gelber Notizblock<\/li><\/ul>\n\n
Auch wenn es nicht die aufregendsten oder kreativsten Designs waren, machten diese skeuomorphen Symbole die Apps und, wichtiger noch, ihre Zwecke f\u00fcr die Benutzer sofort erkennbar. <\/p>\n\n
Apple war nicht das einzige Unternehmen, das Skeuomorphismus im UX-Design einsetzte. Es war auch nicht nur auf Smartphone-Bildschirmen pr\u00e4sent. Apps und Websites gleicherma\u00dfen adoptierten Skeuomorphismus. <\/p>\n\n
Im Jahr 2014 verwendete die Website von Artifact Coffee<\/a> eine beliebte Form des Skeuomorphismus: <\/p>\n\n
Was ist Skeuomorphismus?<\/h2>\n\n
Skeuomorphismus ist eine Designtechnik, bei der UI-Elemente wie ihre realen Gegenst\u00fccke aussehen und manchmal auch funktionieren. In manchen F\u00e4llen handelt es sich bei dem skeuomorphen Objekt um eines, das wir nicht mehr verwenden.<\/p>\n\n
Der Begriff „Skeuomorph“ leitet sich aus dem Griechischen ab: <\/p>\n\n
skeuos (\u03c3\u03ba\u03b5\u1fe6\u03bf\u03c2<\/em>) = Beh\u00e4lter oder Werkzeug<\/p>\n\n morph\u1e17 (\u03bc\u03bf\u03c1\u03c6\u03ae<\/em>) = Form<\/p>\n\n Er wurde 1889 von Dr. Henry Colley March erfunden. Urspr\u00fcnglich bezog sich ein Skeuomorph auf ein physisches Objekt, das ornamentale Designs oder Merkmale aufwies, die nicht mehr relevant oder notwendig waren. Wie ein Tontopf, in den Formen eingeritzt wurden, um ihn wie einen geflochtenen Korb aussehen zu lassen.<\/p>\n\n Ein gutes Beispiel f\u00fcr einen Skeuomorph, mit dem wir heute alle vertraut sind, ist der Impossible Whopper von Burger King<\/a>: <\/p>\n\n Verbraucher sind alle mit dem Aussehen eines Rindfleisch-Patties vertraut \u2014 insbesondere mit einem der flammengebratenen Patties von Burger King. Das Impossible Patty sieht, obwohl es kein Fleisch enth\u00e4lt, genau wie ein Rindfleisch-Patty aus. <\/p>\n\n Warum machen Impossible und\/oder Burger King das? Ein Teil des Grundes, warum Skeuomorphe n\u00fctzlich sind, ist, dass die Vertrautheit im Design es den Menschen erleichtert, vom alten Weg der Dinge zum neuen \u00fcberzugehen. <\/p>\n\n Skeuomorphe k\u00f6nnen auch aus Nostalgiegr\u00fcnden n\u00fctzlich sein. Zum Beispiel machen viele Kamerahandys immer noch ein „Klick“-Ger\u00e4usch, wenn jemand ein Foto aufnimmt, obwohl es keinen Bedarf f\u00fcr diesen Ton gibt.<\/p>\n\n Skeuomorphe haben im Laufe der Jahre auch eine Rolle im digitalen Design gespielt. Obwohl sie heute nicht mehr so weit verbreitet sind, kann man sie immer noch gelegentlich erkennen. <\/p>\n\n Zum Beispiel ist das Papierkorb-Symbol im Mac-Dock ein Skeuomorph: <\/p>\n\n Die meisten anderen Symbole sind flach und \u00e4hneln eher digitalen Logos als physischen Objekten. Dies ist der gr\u00f6\u00dfte Unterschied zwischen Skeuomorphismus und anderen digitalen Designtrends<\/a> und -techniken. <\/p>\n\n Wann und wo genau haben wir Skeuomorphismus im UX-Design eingesetzt? Lassen Sie uns einen Blick darauf werfen: <\/p>\n\n In den Anf\u00e4ngen der Softwareentwicklung spielte Skeuomorphismus eine wichtige Rolle bei der Einf\u00fchrung der Benutzer in eine neue Arbeitsweise. <\/p>\n\n Betrachten wir Microsofts Anwendungssuite<\/a>. Es war nicht unbedingt der Akt des Schreibens, des Durchf\u00fchrens von Berechnungen oder des Erstellens von Pr\u00e4sentationen digital<\/em>, der ein Hindernis f\u00fcr Verbraucher, Fachleute und Studenten darstellte. <\/p>\n\n Es waren die anderen Funktionen, \u00fcber die sie nachdenken mussten, die zuvor nicht wirklich relevant waren. Wie zum Beispiel ihre Arbeit zu „Speichern“, Text zu „Ausschneiden“ oder ein Format zu „Malen“. <\/p>\n\n W\u00e4hrend dieses Video<\/a> zeigt, wie die Microsoft Word-Symbolleiste heute aussieht, sehen wir immer noch \u00dcberreste von Microsofts skeuomorphen Symbolen der Vergangenheit: <\/p>\n\n Microsoft verwendete keine unerkennbaren Symbole f\u00fcr diese Hauptfunktionen, da dies die Lernkurve der Benutzer nur verschlechtert h\u00e4tte. Stattdessen nahm es reale Objekte, mit denen die Benutzer vertraut waren (z.B. die Diskette f\u00fcr „Speichern“, die Schere f\u00fcr „Ausschneiden“ und den Pinsel f\u00fcr „Formatmaler“) und verwandelte sie in Aktionsschaltfl\u00e4chen. <\/p>\n\n Das n\u00e4chste Mal machte Skeuomorphismus Ende der 2000er und Anfang der 2010er Jahre gro\u00dfen Eindruck. Dies war ungef\u00e4hr zu der Zeit, als der mobile Touchscreen an Bedeutung gewann und Designer den Bedarf hatten, den \u00dcbergang der Benutzer vom Alten zum Neuen zu erleichtern. <\/p>\n\n Apple<\/a> war diesmal gr\u00f6\u00dftenteils f\u00fcr den Aufstieg des Skeuomorphismus verantwortlich. <\/p>\n\n Im Jahr 2010 sah der Apple-Startbildschirm so aus: <\/p>\n\n Zun\u00e4chst sahen die App-Symbole wie klickbare Schaltfl\u00e4chen aus, die aus dem Hintergrund hervorstechen. Zweitens waren viele der App-Symbol-Designs von Natur aus skeuomorph. Zum Beispiel:<\/p>\n\n Auch wenn es nicht die aufregendsten oder kreativsten Designs waren, machten diese skeuomorphen Symbole die Apps und, wichtiger noch, ihre Zwecke f\u00fcr die Benutzer sofort erkennbar. <\/p>\n\n Apple war nicht das einzige Unternehmen, das Skeuomorphismus im UX-Design einsetzte. Es war auch nicht nur auf Smartphone-Bildschirmen pr\u00e4sent. Apps und Websites gleicherma\u00dfen adoptierten Skeuomorphismus. <\/p>\n\n Im Jahr 2014 verwendete die Website von Artifact Coffee<\/a> eine beliebte Form des Skeuomorphismus: <\/p>\n\n<\/figure>\n\n<\/figure>\n\nDie Geschichte des Skeuomorphismus<\/h2>\n\n
Die erste Welle<\/h3>\n\n
<\/figure>\n\nDie zweite Welle<\/h3>\n\n
<\/figure>\n\n