E-Commerce Design Trends für 2013

Rückblickend war das Jahr 2012 vorrangig von einem Thema geprägt: Mobile und Tablet Commerce. Mit der steigenden Verbreitung von Tablets und Smartphones steigt auch die Besucherzahl in Onlineshops, die über die mobilen Geräte auf dem Shop landen. Shopbetreiber mussten sich mit Strategien für den mobilen Markt auseinandersetzen — Themen wie Responsive Design, HTML5-Apps oder native Apps standen auf der Agenda.Auch für 2013 wird die Thematik durch die weitere Verbreitung vor allem durch günstigere Geräte auf Android-Basis oder wie das iPad mini immer relevanter und damit auch ein wichtiger Einflussfaktor im Webdesign.Im Hinblick auf Design Trends spielen zwei Hersteller eine entscheidende Rolle. Beide Hersteller haben ein besonderes Augenmerk auf die Gestaltung des User Interface Ihrer Tablets gelegt und dieses anschließend teilweise oder ganz auf den Desktop übertragen. Dabei sind zwei Designstile entstanden, wie sie unterschiedlicher nicht sein könnten. Die Rede ist von Apples Designansatz "Skeuomorphism Design" und Microsofts "Modern UI" (ehemals Metro). Beide Stile zeigen inspirierende Designelemente auf, die sich als Trends im Webdesign niederschlagen werden.

Skeuomorphism Design

Skeuomorph bezeichnet bei Nutzeroberflächen von Programmen die Nachbildung von realen Gegenständen. Eines der bekanntesten Beispiele hierfür ist der Kalender. Mit der Umrandung im Lederstil inklusive virtueller Nähte, Reste von abgerissenen Zetteln und einem animierten Blättereffekt beim Monatswechsel soll das Design einen realen Kalender möglichst ähnlich nachbilden.

Design Trends 2013 - Skeuomorph

Die Kalender App von Apple (© Apple Inc.)

Der Trend reale Objekte nachzubilden stößt auf geteilte Meinung. Einerseits sehen die kleinen Details und Texturen warm und liebevoll aus und werden uns von daher auch im Webdesign noch häufiger begegnen. Andererseits kann man kritisieren, dass digitale Elemente wie z.B. Buttons sich nicht durch reale Gegenstände abbilden lassen.

Nachdem Jonathan Ive neben der Verantwortung für das Hardwaredesign nun auch die Verantwortung für das Softwaredesign übernommen hat, wird gemunkelt, dass Skeuomorph bei Apple nicht mehr so stark vorangetrieben wird und durch Ive's Verständnis von Industrial Design nach und nach glattgebügelt werden soll. Deshalb bleibt abzuwarten, wie lange uns dieser Trend erhalten bleibt.

Wichtige Merkmale des Skeuomorphism sind die Texturen, die ein natürliches Aussehen vermitteln, die kleinen Details, die Spaß beim Entdecken liefern und die Animationen, die das natürliche Verhalten widerspiegeln sollen.

Reales Vorbild

Wie beschrieben dient immer ein reales Objekt als Vorbild. Auch in Onlineshops können reale Objekte verwendet werden, um einzelne Funktionen abzubilden oder Elemente anzuordnen. Ein Regal könnte zum Beispiel auf der Kategorieseite als Raster dienen oder die Kleidung einfach mal auf eine Wäscheleine gehängt werden.

Design Trends 2013 - FlipFlop and Away

Der Shop "Flip Flop and Away" setzt bei den Produktbildern eine Polaroid-Optik ein, die dem Shop einen persönlichen Touch verleiht.

Design Trends 2013 - Dripping in Fat

Auf der E-Commerce Plattform "Dripping in Fat" werden T-Shirts nach realem Vorbild auf Kleiderbügel gehängt.

Textur

Die Textur ist ein wichtiger Bestandteil des Skeuomorph Design, da diese den Elementen ein natürliches Aussehen verleiht. Oberflächenstrukturen können dem Design eine Seele geben und strahlen dadurch Nähe und Wärme aus. Beim Skeuomorph Design sollte die Textur allerdings nicht einfach so frei gewählt werden, sondern sich viel mehr nach dem original Vorbild richten. Für ein Thermometer eine Glastextur zu nehmen macht also durchaus Sinn. Hierfür eine Ledertextur einzusetzen würde hingegen nicht dem Vorbild aus der realen Welt entsprechen.

Design Trends 2013 - Textur Gucci

Gucci verwendet im unteren Bereich eine Holztextur und eine vergoldete Ablagefläche.

Details

Wie heißt es so schön? Es sind die kleinen Dinge, die das Leben schöner machen. Kleine Details in Designs zu entdecken kann den Spaß am Design und damit auch den Spaß bei der Nutzung erhöhen. Doch gleichzeitig ist auch Vorsicht geboten. Die Überladung des Design mit zu vielen Details kann auch vom eigentlichen Inhalt zu stark ablenken. Deshalb sollten Details bedacht gewählt werden, damit die Liebe zum Detail vom Nutzer auch honoriert wird. Die kleinen Papierfetzen von abgerissenen Blättern im Apple Kalender lenkt zum Beispiel nicht vom eigentlichen Inhalt ab. Das Shopdesign von "Retro Boutique" hingegen ist so überladen mit Elementen und Details, so dass es schwer fällt die eigentlich wichtigen Inhalte schnell zu erfassen.

Design Trends 2013 - Details Retro

Der Shop "Retro Boutique" übertreibt es mit den Details. Die vielen Details erschweren es den eigentlichen Inhalt zu erfassen.

Design Trends 2013 - Details Drink Poster

Die Seite "Drink Poster" hat ein nettes Detail integriert. Der Dampf des Heißgetränks ist animiert. Dies lenkt nicht zu stark vom Inhalt ab, kann aber ein Lächeln auf das Gesicht des Betrachters zaubern.

Animation

Nicht nur das Aussehen soll sich an der realen Welt ausrichten, sondern auch das Verhalten. So sieht man beim Kalender sehr gut, dass ein Pagecurl-Effekt für das Umblättern der Monate verwendet wird. Das Kalenderblatt verschwindet also nicht einfach, sondern wird von einer Ecke nach oben weggezogen.

Dass man dies auch auf E-Commerce Portale anwenden kann, zeigt Heldenlounge ganz gut. Als kleiner Warenkorb im Kopfbereich wird eine eingerollte Papyrusrolle eingesetzt. Fährt man mit der Maus über diese, so rollt sich diese aus und der Inhalt des Warenkorbs wird gezeigt. Verlässt man mit der Maus den Bereich, so rollt sich die Rolle wieder zusammen.

Design Trends 2013 - Animation Heldenlounge

Links sieht man den eingerollten Warenkorb. Per Mouseover rollte sich die Papyrusrolle aus (rechts).

Modern UI

Einen gegensätzlichen Ansatz zu Apples Skeuomorph-Ansatz bildet das neue Windows 8. Microsoft hat mit Modern UI ein Bekenntnis zur digitalen Welt gewählt.

Kein Element im neuen Microsoft Design erinnert an ein reales Objekt. Die Designsprache ist durch und durch digital (Authentically Digital).

Design Trends 2013 - Modern UI

Startscreen von Windows 8 (© Microsoft)

In der Geschichte von Microsoft ist es tatsächlich das erste Mal, dass das Design eine wirklich tragende Rolle spielt. Auch wenn dieser Umstand eher einen wirtschaftlichen Hintergrund hat und das Thema Design noch nicht so stark in der Philosophie verankert ist wie bei Apple, hat Microsoft es aus meiner Sicht geschafft einen guten Designansatz zu entwickeln, der übergreifend auf allen Plattformen funktionieren kann – auch wenn die Umsetzung auf dem Desktop aktuell noch etwas hakelig zu sein scheint und noch nicht zu Ende gedacht wurde.

Die wichtigsten Merkmale des Modern UI sind der Aufbau der Oberfläche in ein Grid-System, die flache Gestaltung ohne Verläufe oder Schatten und die hervorstechende Typographie und minimalistische Iconographie.

Grid

Gridsysteme sind im Web schon recht weit verbreitet. Vor allem mit dem 960gs hat sich die Verwendung von Gridsystem rasant verbreitet. Aufgabe der nächsten Gridsysteme ist es das Grid für alle Plattformen und Größen flexibel anzupassen. Gridsysteme wie Skeleton und Golden Grid System haben sich diesem Ziel schon gewidmet. Ich denke das Grid von Microsoft hat durchaus Potenzial hier weitere Gridsysteme zu einem etwas weitergreifenden Layout zu inspirieren.

Design Trends 2013 - Grid Windows

Grid-System von Microsoft für Windows 8 (© Microsoft)

Design Trends 2013 - Grid Curioos

Bei dem Onlineshop "Curioos" ist die Ausrichtung nach einem Gridsystem sehr gut erkennbar.

Flache Gestaltung

Schon 2010 hat mein Kollege ein Plädoyer für flache Gestaltung ausgesprochen. Betrachtet man sich Onlineshops merkt man schon, dass Glossy-Effekte, große Schatten und Farbverläufe rückläufig sind. Dezente Schatten und Farbverläufe lassen sich zwar noch häufig antreffen, aber man sieht auch immer mehr Shops, die komplett darauf verzichten. Wichtig ist, dass dabei die Call-to-Action nicht untergeht. Schatten und Verlauf bei einem Button heben den Button hervor und signalisieren, dass dieses Element klickbar ist. Bei einer flachen Gestaltung sollte man Hilfsmittel wie Pfeile, Linkunterstreichung o.ä. verwenden, damit die Call-to-Action auch als klickbares Element erkannt wird.

Design Trends 2013 - Flat Design TUI

Die Designelemente auf tui.com kommen ohne Schatten und Verläufe aus.

Design Trends 2013 - Flat Design Vanmoof

Flache Gestaltung gepaart mit Minimalismus beim Shop von Vanmoof.

Typografie

Die Typografie spielt beim Windows-Design eine tragende Rolle. Auch wenn diese teilweise doch noch etwas flatterig wirkt, wird durch den Einsatz der leichten Schriften ein sehr modernes Bild vermittelt. Dadurch wirkt das Design wesentlich frischer und moderner als das Design von Apple, das schon etwas angestaubt erscheint. Mit dem richtigen Einsatz von Typografie kann man gezielt Stimmungen erzeugen - von hochwertig, traditionell bis hin zu modern, jung und frisch. Durch die Verbreitung von WebFonts können Designer auch auf ein wesentlich größeres Repertoire an Schriften zurückgreifen. Wichtig zu beachten ist, dass die Schrift in allen Browsern ordentlich gerendert wird und auf digitalen Geräten gut lesbar ist.

Design Trends 2013 - Typografie Les Galantes

Die Typografie ist ein tragendes Element im Onlineshop "Les Galantes".

Design Trends 2013 - Typografie Tinkering Monkey

Der Shop "Tinkering Monkey" setzt ebenfalls Akzente mit der Schrift.

Iconopraphie

Auch die minimalistischen Icons vermitteln ein frisches und modernes Auftreten. Während durch Apple hochauflösende detail- und farbreiche Icons in Mode kamen, ist vor allem bei Onlineshops ein Trend Richtung Minimalismus und Einfarbigkeit schon zu erkennen. Auf E-Commerce Portalen ist es wichtig, dass Elemente schnell erfasst werden können. Minimalistische Icons können häufig aufgrund der einfachen Formen relativ schnell erfasst werden, während bei der Entschlüsselung von detailreichen Icons mehr Zeit benötigt wird.

Design Trends 2013 - Iconographie Crumpler

Der Shop "Crumpler" setzt einfarbige Icons für die Kategorien ein.

Design Trends 2013 - Iconographie The Look

The Look unterstützt Funktionalitäten des Shops mit Icons, die den modernen Stil der Seite unterstreichen.

Design Trends 2013 - Iconographie Iconmonstr

Iconmonstr.com bietet eine große Auswahl an minimalistischen Icons.

Fazit zu den Design Trends für das Jahr 2013

Auch wenn ein UI-Design nicht eins zu eins auf Webseiten übertragbar ist, werden die Einflüsse der beiden Designstile auch im Web spürbar sein. Die Themen Mobile und Tablet Commerce sind in aller Munde und dieser Einfluss wird sich auch auf das Design von Websites auswirken und die Design Trends für das nächste Jahr prägen.

Apple und Microsoft werden hierbei den größten Einfluss ausüben, da beide zwei herausragende Stile entwickelt haben, die unterschiedlicher nicht sein könnten. Bei beiden kann man wirklich inspirierende Elemente entdecken, die sich durchaus positiv auf die Konversionsrate auswirken können. Wichtig ist es aber immer nicht blind einem Trend hinterher zu rennen, sondern abzuwägen, was zum Shop passt und den eigenen Stil unterstützt und zu testen, welche Elemente die Konversion steigern und welche der Konversion schaden.

  • Teilen
  • Send to Kindle
  • http://www.konversionskraft.de/?p=15107
Manuel Ressel Manuel Ressel ist Head of UX Design bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Manuel Ressel ist unentwegt auf der Suche nach einzigartigen Shop-Perlen und neuen Design Trends im E-Commerce und sammelt diese in dem E-Commerce Showcase conversiondesign.de. Folgen Sie ihm auf Twitter, Google+ oder Facebook.

Frage zum Artikel? Fragen Sie den Autor!


Please leave this field empty.

, , , ,

9 Reaktionen auf  “E-Commerce Design Trends für 2013”

Kommentare

  1. Jan Jan

    Modern UI so positiv dazustellen erscheint mir etwas fragwürdig. Gerade bei „auch wenn die Umsetzung auf dem Desktop aktuell noch etwas hakelig zu sein scheint“ muss ich deutlich widersprechen. Auf dem Desktop hat die Bedienung auch auf Grund der Gestaltung massive Probleme und auch auf mobilen Geräten wird das nicht ganz so reibungslos funktionieren, weil der eckige und vor allem der flache Stil den Benutzer weniger führen, als ihm viel mehr ein UI „vor den Latz knallen“. In der aktuellen Form wird sich das sicher nicht durchsetzen.

  2. Gründercoach Gründercoach

    Vielen Dank für den Interessanten Einblick in die Entwicklung der Design Stille. Lassen wir uns überraschen wohin die reise geht.

  3. Markus Markus

    Ich bin auch gespannt, ob der Microsoft Ansatz weitergeführt wird – oder wieder in der Versenkung verschwindet wie der XP Bubblegum Stil. Immerhin ist der Ansatz plattformübergreifend gedacht.

  4. Conversionvergleich Conversionvergleich

    den Trend hin zur Iconopraphie sehe ich auch immer mehr. Es gibt dem User sehr vielmehr Orientierung auf den ersten Blick. Interessant dabei ist ja, dass dieser Trend sehr aus dem Mobile Bereich kommt. Vielleicht haben sich die User auch daran schon gewöhnt. Ich kann diesen Trend nur begrüßen da die Orientierung wesentlich einfacher und die Userbility gefördert wird.

  5. Svitlana Svitlana

    Meines Erachtens, im Onlinehandel werden die Elemente der beiden Stile bei Webseiten verwendet, je nach Geschmack des Kunden und nach Konzept des Shops. Im Moment tendieren aber unsere Kunden dazu, ein möglich realistisches Aussehen des Webshops zu erfordern.

  6. Frank Frank

    Ich sehe auch einen Trend zur individuellen Konfiguration in Verbindung mit Shop im Home-Living-Bereich; Bsp.: Massmöbel

Trackbacks/Pingbacks

  1. […] es mit einem Merkzettel!A global and digital e-retail seasonDigital Marketing for Small BusinessesE-Commerce Design Trends für 2013Is it Finally Time for Tablet Commerce?Many Shades of Like in Brand-Consumer Engagement6 […]

Hinterlassen Sie einen Kommentar