Design im Wandel – Porsche und Audi jetzt flat und responsive

Das Jahr 2013 ist vorbei und bescherte uns einige interessante Relaunches in der Automobilbranche: Ende des Jahres ging die neue Website von Porsche an den Start und Audi kam ihnen bereits im Juli zuvor. Laut einer CapGemini-Studie beginnen 94% aller Autokäufe mit der Informationsbeschaffung im Internet. Somit spielen die Internetpräsenzen der Marken eine immer größere Rolle, und gerade im Premiumsegment ist es wichtig, dort das gewünschte Markenimage zu transportieren. Somit ist es nicht verwunderlich, dass Porsche und Audi für frischen Wind sorgen möchten. Dabei setzen beide Hersteller voll auf die zwei großen Trends im Webdesign, über die auch schon mein Kollege Martin Beschnitt in seiner Vorschau auf 2014 berichtete – die minimalistische Ästhetik des Flat Design und das Prinzip der Geräteunabhängigkeit durch Responsive Design.

Dynamische Anpassung von 320 bis 1600px Bildschirmbreite bei Porsche

Die neue porsche.de zeigt sich im komplett fluiden Design, welches sich von 320px Seitenbreite für Smartphones bis 1600px für FullHD-Monitore durchgängig anpasst (siehe Abb. 1). Das ist absolut vorbildlich, da die Seite so nicht nur für einzelne, spezifische Geräte optimiert ist, sondern die gesamte Bandbreite an existierenden und zukünftigen Bildschirmen unterstützt.

Die technischen Daten des Porsche Boxter S bei 320px Seitenbreite

Abb 1.1: Die technischen Daten des Porsche Boxter S bei 320px Seitenbreite

Die technischen Daten des Porsche Boxter S bei 1600px Seitenbreite

Abb 1.2: Die technischen Daten des Porsche Boxter S bei 1600px Seitenbreite

Leider leistet sich Porsche einen handwerklichen Fauxpas: Die teils riesigen Bilder werden immer in voller Auflösung geladen, einige davon kommen auf 150KB und mehr. Die Startseite bringt so mit insgesamt 1,7MB die Datenleitung zum Glühen. Bei der mobilen Nutzung ohne WLAN ist die Hochgeschwindigkeits-Flatrate schnell aufgebraucht, mit langsameren Verbindungen braucht man es quasi gar nicht erst probieren. Das ist so nicht akzeptabel, Porsche muss hier unbedingt nachbessern.

Auch die neue audi.de ist responsive, allerdings nur in geringerem Maße. Die Seitenbreite passt sich zwischen 980px und 1400px an. Für Smartphones dagegen wird eine eigene mobile Website ausgeliefert. Diese ließ leider auf den ersten Blick sehr zu wünschen übrig – ich habe mich innerhalb weniger Schritte komplett verirrt. So ganz erschließt sich mir nicht, warum die Gelegenheit verpasst wurde, mit dem Relaunch direkt beide Websites zu vereinen. Noch unverständlicher wirkt es, wenn man sich einmal Audi USA anschaut – dort gibt es bereits eine voll responsive Website.

Minimalistisches Flat Design bei beiden Herstellern im Vormarsch

Beide Hersteller, Porsche (siehe Abb. 2) und Audi (siehe Abb. 3), setzen im Vergleich zur Vorgängerseite auf ein deutlich reduzierteres Design. Kaum noch Schatten und 3D-Effekte sind zu finden, dagegen dominieren klare Farbflächen ohne Schnörkel. Die Farbgebung ist generell heller geworden mit viel Weiß und Grau. Die einzelnen Seitenteile sind großzügig dimensioniert und durch viel Weißraum klar strukturiert. Dies trägt zu einer insgesamt moderner wirkenden Anmutung bei.

Die Startseite von Porsche vor dem Relaunch

Abb 2.1: Die Startseite von Porsche vor dem Relaunch

Die Startseite von Porsche nach dem Relaunch

Abb 2.2: Die Startseite von Porsche nach dem Relaunch

Diese minimalistische Ästhetik ist Kennzeichen des so genannten Flat Design, welches seit Windows Phone, Windows 8 und inzwischen auch iOS7 in aller Munde ist. Hieran haben sich offensichtlich auch Porsche und Audi orientiert. Der Vorteil von Flat Design liegt vor allem in der Reduktion von unnötigem „Chrome“ und damit einer Konzentration auf das Wesentliche – den Inhalt. Gleichzeitig besitzen interaktive Elemente durch fehlende visuelle Hinweise eine geringe „Affordance“. Dies berichtet auch Jakob Nielsen von Usability-Tests mit Windows 8, in denen den Probanden nicht immer klar war, was sie anklicken können.

Die Startseite von Audi vor dem Relaunch

Abb 3.1: Die Startseite von Audi vor dem Relaunch

Die Startseite von Audi nach dem Relaunch

Abb 3.2: Die Startseite von Audi nach dem Relaunch

 

Neuartiger, tief in die Website integrierter Konfigurator bei Audi

Konfiguratoren finden sich inzwischen auf jeder Herstellerseite. Zuvor waren sie jedoch stets eigenständige Teile der Website, die losgelöst von der Informationsbeschaffung zu einem Modell existierten. Häufig öffnete sich der Konfigurator in einem eigenen Fenster, wie dies auch bei Porsche weiterhin der Fall ist.

Abb. 4: Eine Detailseite zum Audi A5 mit innovativ integriertem Konfigurator

Abb. 4: Eine Detailseite zum Audi A5 mit innovativ integriertem Konfigurator

Audi dagegen geht hier mit dem Relaunch einen neuen Weg: Der Konfigurator ist tief in die Website integriert; Informationen zum Modell und die Konfiguration des eigenen Autos verschmelzen quasi zu einer Einheit. Dies ist eine schöne Lösung, die die Informationssuche und den Prozess des Autokaufs der Nutzer deutlich besser unterstützt. Sie können stöbern und dabei dabei quasi automatisch ihren eigenen Wagen zusammen, was zum Ausprobieren geradezu einlädt. Auch aus Conversionsicht ist dies vorteilhaft: Schon nach kurzer Zeit und ohne großen Extraaufwand sieht man seinen eigenen Wagen in der immer präsenten Konfigurationsansicht vor sich (siehe Abb. 4). Die Hürde zu einer Anfrage beim Händler dürfte so wesentlich geringer sein.

 

Fazit: Die Konkurrenz muss nachziehen

Porsche und Audi haben insgesamt gute und interessante Relaunches vorgelegt, an deren Details noch geschliffen werden sollte. Nichts desto trotz sind sie ein gewaltiger Schritt nach vorn, mit dem sich die beiden Premiumhersteller von der Konkurrenz deutlich absetzen können. Die Website von Mercedes-Benz etwa sieht im direkten Vergleich sehr gedrungen und altbacken aus. Vielleicht sollten sie dort einmal einen Blick über den großen Teich werfen – ihre Kollegen in den USA sind bereits im voll responsiven Gewand unterwegs.

Es liegt also nun an den anderen Herstellern, besonders Mercedes-Benz und BMW als Konkurrenten im deutschen Premiumsegment, im Web aufzuholen. Eine veraltet wirkende, nicht auf allen Geräten darstellbare Seite können sie sich nicht für längere Zeit leisten – sonst färbt die Wahrnehmung der Internetpräsenz durch die Nutzer auf die Marke insgesamt und ihre Fahrzeuge ab.

Zum Projekt „Design im Wandel“:

eResult verfolgt und dokumentiert bereits seit mehreren Jahren die Entwicklung des Webdesigns von 50 verschiedenen Branchen, unter anderem auch von 15 Automobilherstellern. Die dokumentierten Screenshots werden regelmäßig ausgewertet und Erkenntnisse hier im Usabilityblog vorgestellt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *