6 Erfolgsfaktoren für Responsive Webdesign

Responsive Webdesign, Adaptive Design, Mobile First uvm.. Es gibt sehr viele Buzzwords, die sich alle um die Thematik mit den verschiedenen Devices drehen. Responsive Webdesign wird oft und gern als Wunderwaffe gegen so ziemlich alle Probleme zu einem überschaubaren Preis beworben. Doch ganz so einfach ist es leider nicht. Deshalb widmet sich der Artikel der Frage, welche Rolle Responsive Webdesign in der mobilen Strategie spielt und wie es sich device-übergreifend in den Alltag des Nutzers integrieren lässt.

Responsive Webdesign ist nur eine Technik

Ganz grundlegend: Responsive Webseiten (responsive = reaktionsfähig) basieren auf einem flexiblen, sogenanntem flüssigen Gestaltungsraster, das sich in Kombination mit Media Queries dynamisch an die jeweilige Auflösung anpasst. Media Queries sind dafür verantwortlich, dass ein Device richtig identifiziert wird.

Responsive Webdesign

Letztendlich handelt es sich also um eine Funktion, Content mit einem moderaten Aufwand dynamisch an die technischen Gegebenheiten der jeweiligen Devices anzupassen. Dies ist der größte Vorteil gegenüber einem rein adaptiven Webdesign, bei dem eine angepasste Variante (statisch, basierend auf Breakpoints) für jedes Device nötig ist.

Responsive Webdesign vs. Nutzungskontext

So schön sich dieser Ansatz auch liest, so sehr wird das Thema auch auf eine rein technische Ebene reduziert. Denn der Nutzer spielt hierbei erstmal nur eine untergeordnete Rolle, was sich in den meisten Fällen auch bei der Nutzung mit dem Smartphone zeigt.

Einen ersten Schritt in die richtige Richtung bietet „Mobile First“ als Denkansatz. Hierbei wird die Webseite ausgehend von der mobilen Variante konzipiert, was sich positiv auf die Usability auswirkt. Allerdings geht auch dieser Ansatz noch nicht weit genug.

Vielmehr sollte der Nutzer mit seinen Wünschen und Erwartungen im Mittelpunkt der Strategie stehen. Ganz neu ist dieser Ansatz nicht. So hat sich das Thema User Centered Design bereits in den 90ern durchgesetzt und etabliert.

Die mobilen Webseiten vieler Anbieter offenbaren jedoch, dass dieser Prozess scheinbar wenig Anwendung findet. Und das obwohl die mobile Optimierung seit dem 21. April diesen Jahres ein noch stärkerer Rankingfaktor geworden ist. Erläuterungen und Tipps zu Google’s Mobile Friendly Update finden Sie im Artikel Google mobile friendly Update – 47 Tipps für mehr mobile Conversions.

Potentiale erkennen und nutzen

Eine Webseite muss sich in den Alltag des Nutzers einbetten. Dabei spielt die technische Umsetzung für ihn keine große Rolle. Es muss also klar werden, dass Responsive Webdesign lediglich ein Hygienefaktor ist. Übertragen auf die ROI Pyramide befindet sich das Thema auf der untersten Stufe: Der Nutzer kann kaufen.

ROI Pyramide

An dem Punkt, an dem Seiten komplexer werden und der kognitive Aufwand für den Nutzer steigt, stößt Responsive Webdesign an seine Grenzen. Hier kann und sollte nun User Centered Design als Technik eingesetzt werden, um ein Bindeglied zu der wichtigen zweiten Ebene der ROI Pyramide zu schaffen.

Die folgenden 6 Faktoren können bei der mobilen Strategie helfen:

1. Zielgruppe: Wer nutzt die Seite eigentlich mit welchem Endgerät?

Aufschluss gibt hier ein Blick in die Zahlen des jeweiligen Web Analytics-Systems. Häufig zeigt sich bereits bei der Betrachtung des Mobile Funnels, ob ein Bruch in der Customer Journey stattfindet. (Schwachstellenanalyse auf quantitativer Ebene)

Mobile Funnel

2. Accessibility: Ist die Seite auf jedem Device ohne größere Einschränkungen nutzbar? 

Während die Optimierung für Desktop noch recht unproblematisch ist, so treten bei Smartphones und Tablets schnell die ersten Hürden auf. Neben zig unterschiedlichen Auflösungen hat jedes Device seine Eigenheiten bei der Bedienung. Ein nützlicher Indikator ist der Mobile Motivation Index als Werkzeug für eine gute Mobile User Experience.

Beispiel: Asos

ASOS schafft es, neben der guten Nutzerbarkeit auch die Bildwelten je nach Device anzupassen, so dass die Seite auch auf dem Smartphone zum Stöbern und Kaufen einlädt.

3. Content: Welche Inhalte gibt es auf der Seite & was erwarten die Nutzer?

Hier bietet sich ein Ist-/Soll-Abgleich in Form einer Analyse an. Wichtig: Desktop, Tablet & Mobile sind eigenständige Devices mit speziellen Eigenheiten und sollten daher separat betrachtet werden. Dabei sollten die Wünsche und Routinen des Nutzers im Vordergrund stehen.

Beispiel: Europcar

Ein gutes Beispiel stellen hier die verschiedenen Autovermieter dar. So rückt der Buchungsprozess als zentrales Element auf mobilen Endgeräten in den Fokus. Das Wunschfahrzeug kann so ohne großen Aufwand schnell und effizient gebucht werden. Im Gegensatz zur Desktopvariante werden ablenkende Elemente dabei auf ein Minimum reduziert.

4. Nutzungskontext: Welches Device wird wie genutzt?

Aufgrund ihrer Eigenheiten unterscheiden sich die Devices teilweise deutlich beim Nutzungsverhalten. Während Computer und Tablets tendentiell eher zum Recherchieren und Stöbern genutzt werden, stehen Einfachheit und Effizienz beim Smartphone in den meisten Fällen an oberster Stelle.

Beispiel: ADAC

ADAC denkt hier leider etwas komplizierter und konfrontiert seine Nutzer bei der Suche nach einer „ADAC Pannenhilfe“ auf dem Smartphone zunächst einmal mit einer umfangreichen Tarifübersicht. Fraglich ist, ob Nutzer sich nach einer Wagenpanne wirklich damit auseinandersetzen möchten.

5. Einfachheit & Effizienz: Können komplexe Elemente vereinfacht werden?

Gerade Formulare und / oder Buchungsstrecken können Nutzer auf mobilen Endgeräten vor eine große kognitive Herausforderung stellen. Sind diese Elemente nicht ohne Weiteres zu vereinfachen, so kann ein Medienwechsel in einigen Fällen sogar eine gute Alternative sein. Dieser kann zum Beispiel durch eine entsprechenden Call-to-Action eingeleitet werden, die dem Nutzer erlaubt, anzurufen und / oder seine Anfrage in Form einer E-Mail Erinnerung auf dem Computer zu erhalten.

Buchung: MSC und ERV

MSC arbeitet beispielsweise gezielt mit einem Medienwechsel, da das Formular sehr aufwändig ist und einen hohen kognitiven Aufwand darstellt. Anders sieht es bei der Reiseversicherung der ERV aus. Hier wird das Formular in einer vereinfachten Form dargestellt, die den Nutzer in wenigen Schritten zum Ziel leitet. Allerdings werden hier auch wesentlich weniger Details abgefragt.

6. Innovation: Können die Eigenheiten des Devices genutzt werden, um einen Mehrwert zu generieren?

Standortfreigabe, GPS,  Location-based Services und Co.: Smartphones bieten immer mehr Features, auf die man technisch zurückgreifen kann und die einen kontextbezogenen Mehrwert für Nutzer in der Customer Journey bieten können.

 

Mehrwerte bei MSC und Saturn

Positiv fällt hier auch wieder MSC auf. So bietet der Anbieter seinen Kunden auf dem Smartphone die Möglichkeit in einem virtuellen Rundgang Kabinen und Schiff zu erkunden. Dabei wird der Fokus stark auf eine emotionale Ebene gelenkt. Der Urlaub ist quasi zum Greifen nah.
Einen anderen Mehrwert bietet Saturn seinen Kunden. So können die Nutzer auf der mobilen Webseite gleich sehen, ob ein Artikel in der Filliale in ihrer Nähe verfügbar ist. Bei Bedarf kann auch gleich die passende Route (Anfahrt) berechnet werden.

Es gibt viele Herangehensweisen für eine nutzerorientierte mobile Strategie, zumal gerade die Thematik mit den Mehrwerten noch sehr viel Potential birgt und lange nicht ausgereizt ist. Wie man Mehrwerte für den Kunden schafft anstatt ihn mit Worthülsen zu überhäufen, lässt sich anhand des Einsatzes von MVP-Ketten schnell lernen.

Fazit

Betriebswirtschaftlich betrachtet ist Responsive Webdesign eine gute technische Lösung, um die verschiedenen Devices mit möglichst geringem Aufwand (Kosten) zu bedienen. Dabei werden jedoch lediglich Grundlagen geschaffen.

Sobald der Anteil der mobilen Nutzer auf Ihrer Seite jedoch an Bedeutung gewinnt, reicht diese rein technische Basis nicht mehr aus, da jedes Device seine Eigenheiten hat und anders genutzt wird.

Der Nutzer mit seinen Erwartungen, Wünschen und Routinen sollte nun in den Fokus rücken. Welche Elemente unterstützen ihn auf welchem Device bei seinem Kauf und welche können ihn davon abhalten. Verschiedene Modelle wie die 7 Ebenen der Konversion oder der Mobile Motivation Index bieten die Möglichkeit, Ihre Seite zu analysieren und zielgerichtet auf die Belange Ihrer Nutzer zu optimieren. Die Rahmenbedingungen einzelner Devices können dabei genutzt werden, um Mehrwerte zu generieren.

Letztendlich sollte eine mobile Strategie dabei auf quantitativen und qualitativen Faktoren beruhen, um auch den gewünschten betriebswirtschaftlichen Erfolg zu gewährleisten.

Welche Rolle spielt also der Nutzer in Ihrer mobilen Strategie?

  • Send to Kindle
  • http://kKrft.ly/rtG
Patrick Weisbecker Patrick Weisbecker ist Senior Conversion Consultant bei der Web Arts AG. Sein Schwerpunkt liegt auf der Entwicklung von Hypothesen und Konzepten, die auf verhaltenspsychologischen Triggern aus der Konsumforschung und des Neuromarketings aufbauen. Dabei legt er Wert auf eine ganzheitliche und crossmediale Betrachtungsweise. Bei Fragen können Sie Ihn gerne jederzeit auf Xing kontaktieren.

7 Reaktionen auf  “6 Erfolgsfaktoren für Responsive Webdesign”

Kommentare

  1. Michael Holste Michael Holste

    Des Weiteren, sollten aus meiner Sicht auch Micro Moments (https://www.thinkwithgoogle.com/micromoments/) in dem Artikel näher erläutert werden, da diese im zukünftigen Responsive Design eine immer wichtigere Rolle spielen werden. 61% der Nutzer wechseln auf eine andere Seite, wenn die aktuelle nicht mobile optimiert ist, 8 von 10 Entscheidern recherchieren mit mobilen Endgeräten Services & Produkte für ihr Unternehmen. Ein responsive design ist also auch mehr als relevant für Unternehmen im B2B Umfeld (http://proxation.de/blog/responsive-design-b2b-websites/) – Nicht nur B2C.

    cat.com (Baumaschinen) hat bspw. auch den Need im B2B erkannt und eine wirklich gute mobile experience geschaffen.

    Zudem ist auch wichtig zu erwähnen, dass auch bestehende Websites noch mobil optimiert werden können. Viele Shop-/Website-Betreiber gehen meist davon aus, dass ein kompletter Relaunch nötig ist.

  2. Patrick Patrick

    Momentan sind wir mitten in der Umstellung auf ein responsives Design. Es gilt wirklich viel zu durchdenken und zu beachten. Diese Anleitung wird bestimmt bei einer erfolgreichen Umsetzung helfen. Vielen Dank!

  3. Marco Bosse Marco Bosse

    Ich denke auch, dass eine neue Internetseite ohne „Responsive“ keinen Sinn mehr macht. Es kommt auf den mobilen Prozentsatz der Besucher an, ab dem man vielleicht sogar „Mobile Frist“ bei der Website-Planung berücksichtigen sollte/muss. Wobei es natürlich auch nicht auszuschließen ist, dass selbst bei wenigen mobilen Besuchern, nicht der eine mobile Besucher, der Entscheidende ist 🙂

  4. Marcus Marcus

    Das es immer noch Seiten gibt, die nicht mobile Fähig sind, ist mir ein Rätsel!? Aber echt schöne Anleitung, sollten sich einige mal zu Herzen nehmen

  5. Patrick Lemke Patrick Lemke

    Ich verstehe nicht wie manche Webseiten immer noch kein responsive Design haben können. Es gibt genügend gute Frameworks (z.B. Bootstrap), die es einem ermöglichen im Handumdrehen ein gutes responsive Design auf die Beine zu stellen. Dann freut sich nicht nur der User, sondern auch Google und oft ist dann auch das Design insgesamt besser.

  6. Sophie Sophie

    Ein sehr guter, aufschlussreicher Artikel mit vielen wichtigen Hinweisen! Gerade die Nutzerfreundlichkeit wird oft bei der Entwicklung eines Responsive Designs vernachlässigt. Es ist deshalb unglaublich wichtig, sich auch schon während der Entwicklung Feedback von den eigenen Nutzern einzuholen. Eben auch, um herauszufinden, was der Nutzer will und ob er das tatsächlich bekommt. Dieser Punkt sollte bei der Umstellung auf ein Responsive Design auf keinen Fall außer Acht gelassen werden.

  7. Markus Markus

    Interessanter Artikel. Vor allem das User Centered Design ist enorm wichtig. Je nach Zielgruppe können können zwei unterschiedliche Seiten entstehen.

Hinterlassen Sie einen Kommentar