Unterwegs ist anders als Daheim - oder: warum die klassische Websites nicht für mobile Nutzer passt
Einflussfaktoren
Die Ausgestaltung mobiler Internetseiten wird im Wesentlichen von zwei Faktoren beeinflusst: der Situation, in der sie genutzt werden und durch die technischen Gegebenheiten des Mediums „Mobiles Internet“.
Wie jeder von sich selbst weiß, werden Websites des klassischen Internets im Normalfall im Büro, zu Hause oder mit dem Laptop sehr geplant an „Ersatzorten“ für den Schreibtisch genutzt.
Völlig anders aber das mobile Internet: es wird von 83 % der Nutzer in Zug, Bahn, Auto, Bahnhof oder Flughafen verwendet, zu 79 % am Urlaubsort, ebenfalls zu 79 % bei Freunden und Bekannten und zu 73 % in der Freizeit und beim Einkaufen.
Die Nutzung findet zudem viel spontaner und mit kürzerem Nutzungszeitraum statt. Aus solch unterschiedlichen Nutzungsszenarien resultieren unterschiedliche Ansprüche für Inhalt und Aufbau der jeweiligen Seiten. Die jeweils vorhandenen Bedürfnisse möglichst passgenau abzudecken ist dabei
das Ziel. Nur so kann der Konsument erfolgreich angesprochen werden.
Der zweite Faktor ist die völlig andere Technologie, die dem mobilen Internet zugrunde liegt. Zuerst fällt hier die Größe des Bildschirms ins Auge. Aber auch dessen Orientierung ist
eine völlig andere: Während die Geräte zur Nutzung des mobilen Internets fast immer im Hochformat
genutzt werden, sind PC-Monitore praktisch immer
im Querformat angelegt. Sie sind außerdem nicht nur Anzeigegeräte wie ein PC-Monitor – sehr oft stellen sie gleichzeitig Eingabegeräte in Form von Touchscreens dar.
Die dargestellten Daten müssen aber auch einen anderen Weg nehmen als im klassischen Internet: die Funkverbindung. Das bedeutet eine niedrigere und stark schwankende Übertragungsgeschwindigkeit – ein
Problem nicht nur beim Einsatz von Videos auf mobilen Internetseiten.
Und noch eine Besonderheit der Hardware gibt es: eine mobile Website kann den Standort des Betrachters abfragen und in die Informationsaufbereitung einbeziehen – die Tür zu völlig neuen Services, die auf klassischen Internetseiten gar nicht möglich sind.
Schließlich noch die Browsertechnologie: das von mobilen Browsern verwendete HTML ist zwar fast das Gleiche wie im klassischen Internet, aber schon bei dynamischen Seiten mit Javascript-Programmierungen kommen deutliche Unterschiede ebenso auf wie in Details der CSS-Interpretation.
Mobiles Layout
Alle oben aufgeführten Unterschiede von der Situation, in der sich der Nutzer befindet, bis hin
zu technologischen Details bedingen für mobile Internetseiten ein speziell angepasstes Layout.
Dies beginnt mit der Blickführung, die ein solches Layout leisten soll: es muss sich stärker auf das Hochformat einstellen. Die Links-Rechts-Blickführung
ist weitgehend unbedeutend.
Aber auch die Farbwahl ist nicht ohne Bedeutung: hier sollten die Farben etwas kräftiger und mit
stärkeren Kontrasten gewählt werden als im klassischen Internet. Denn mobiler Internetzugang
findet oft im Freien oder gar in der Sonne statt – und klare Farbausgestaltung erleichtert die Websitenutzung unter diesen Umständen deutlich.
Dazu kommen natürlich auch relativ große Schriften. Auch wenn diese dann mehr Platz auf dem kleinen Bildschirm benötigen: der Vorteil der leichten Lesbarkeit überwiegt deutlich.
Typische Internet-Layouts sind eher schlicht und arbeiten mit wenig filigranen Details. Sie würden auf kleinen Bildschirmen sowieso schlecht sichtbar sein, unnötigen Platz verschwenden oder durch die
benötigte Funkübertragung die Website unnötig verlangsamen. Außerdem kommt ein klares, schlichtes Design dem Bedarf nach schneller Bedienung der Website entgegen.
Relativ große Bedienelemente im Layout der mobilen Website haben aber noch einen anderen Grund als nur die Darstellung Touch-Bedienung der meisten Smartphones müssen diese auch mit relativ groben, großflächigen Navigationsinstrumenten genutzt werden können: den Fingern. Und während die Maus an sämtlichen PCs ein sehr zielgenaues Instrument darstellt, sind selbst sehr dünne Finger nur äußerst grob zu platzieren.
Informationsarchitektur
Geändert wird aber nicht nur das Layout der mobilen Webseiten im Vergleich zu klassischen Auftritten. Auch die grundlegende Auswahl der angebotenen Inhalte sowie die Navigation und Struktur der einzelnen Seiten – kurz: die Informationsarchitektur
einer Website – unterscheidet sich.
Wieder spielt hier die jeweilige Nutzungssituation des Website - Besuchers eine wichtige Rolle. Sie bestimmt, welche Inhalte analog zur klassischen Website angeboten werden und welche nur mobil oder nur im WWW zu finden sind. Oft werden Inhalte mobil gekürzt und aufs Wesentliche reduziert. Und auch die
Reihenfolge (= Wichtigkeit) auf der Website ändert sich beim Schritt Website zu mobiler Website.
Beispiel
Beispielhaft betrachten wir einmal den Buchhändler
Hugendubel. Die klassische Website bietet neben gezielten Suchfunktionen auch viele Anregungsmöglichkeiten. Von Buchwelten und -empfehlungen, einer grafisch aufwändig gestalteten Werbebühne bis zur Newsletter-Anmeldung ist eine vielfältige Beschäftigung mit Büchern möglich. Das passt auch zur Internetnutzung am PC: Nutzer sind meist länger im Internet, erwarten tiefe und reichhaltige Inhalte und surfen auch mal ohne konkretes Ziel - Sie „stöbern“ oder „bummeln“, wie es im Ladengeschäft heißen würde.
Anders im mobilen Internet: unterwegs ist das gezielte Suchen viel wichtiger. Es geht um ein in der aktuellen Situation wichtiges Buch oder Thema und die schnelle Information. Ob die Empfehlung der Freundin im Café, der spontane Gedanke an ein Buch im Bus oder die Anregung aus einer Zeitschrift beim Lesen auf der Parkbank – immer entsteht ein gezieltes Informations- oder gar Kaufbedürfnis.
Ganz zu Recht dominieren deshalb die Suchfunktionalitäten den mobilen Hugendubel-Auftritt. Volltext-Suchfeld und die zentralen Rubriken fallen auf dem Smartphone sofort auf
– auch wenn sich deren Reihenfolge sinnvollerweise verändert hat.
Sogar die Größenverhältnisse wurden an das mobile Medium angepasst: Ist im Web das Hugendubel-Logo noch etwa doppelt so hoch wie das
Suchfeld, hat es in der mobilen Version etwa die gleiche Höhe. Das Suchfeld erhält relativ mehr Gewicht. Außerdem wird das ganz oben zu findende Suchfeld in der mobilen Version nochmal ganz am Ende der Seite wiederholt – sehr sinnvoll für oft lange und aufwändig zu scrollende Seiten auf dem mobilen Gerät. Verzichtet wurde wohl u.a. aus Platzgründen – auch auf die Einschränkbarkeit der Suche auf einzelne Kategorien.
Die vielfältigen zum Stöbern geeigneten Elemente der klassischen Website sind fast völlig entfallen. Lediglich einige aktuelle Bücher werden mobil angepriesen. Konsequenterweise sind es die gleichen wie auf der klassischen Website – steht hierfür das Buchthema doch unabhängig vom Zugangsweg im Vordergrund.
Die Darstellung der Buchempfehlungen ist jedoch nicht exakt gleich und wurde an das mobile Medium angepasst: während im klassischen Web zu einem Buch die Abbildung, Buchtitel, Autor, eine Headline, ein kurzer werbender Satz und sogar noch ein Link auf weitere Bücher als Anregung zum Stöbern existiert, sind auf dem Smartphone nur Bild, Buchtitel und Preis präsent.
Was zu tun ist:
Wie beispielhaft an Hugendubel dargestellt, bietet eine mobile Internetseite also andere Inhalte in anderer Priorität und anderer Aufarbeitung als die klassische Website. Die Analyse potenzieller Nutzungssituationen Ihrer Website und Ihrer Produkte / Services steht daher noch vor dem eigentlichen Aufbau Ihrer mobilen Website.
Texte, Bilder und Videos
Eine optimale mobile Website unterschiedet sich aber neben dem Aufbau auch in den eigentlichen
Inhalten – selbst wenn es sich thematisch um die gleichen Inhalte halten sollte.
Wie jeder aus Erfahrung kennt, sind Texte auf dem Smartphone schwieriger zu lesen. Und längere Texte werden sehr unangenehm. Oft wird das Lesen von Texten mittendrin abgebrochen, wenn die Seite zu viele Zeichen enthält.
Die Konsequenz daraus ist ggf. die stärkere Nutzung der Hypertext-Funktionalität, also die Aufteilung des Textes in kleinere Informationseinheiten auf mehreren verlinkten Seiten.
In der Formulierung gilt dann umso mehr das „das Wichtigste zuerst“-Prinzip, um Websitebesuchern
auch dann die zentrale Information mitgeteilt zu haben, wenn Sie nur den Textanfang lesen.
Für Bilder gilt ebenso die Prämisse der Konzentration auf das Wichtigste. Mag ein Bild, auf
dem eine Menschengruppe und im Hintergrund noch etwas von der Umgebung zu sehen ist, im Internet einen guten Eindruck machen – im mobilen Internet ist aufgrund der Bildschirmgröße fast nichts mehr zu erkennen und damit das eigentlich Ziel des Bildes – die Informationsvermittlung auf einen
Blick – völlig verloren. Besser wäre für das mobile Internet ein Bildausschnitt, der sich auf die Personen beschränkt oder sogar Einzelbilder der Gesichter der Teilnehmer.
Das gleiche Prinzip gilt für Produktbilder: Zoom statt Umgebung, lieber zwei oder drei Detailbilder statt einem großen Übersichtsbild.
Zum Schluss noch eine Anmerkung zum Thema Video: Natürlich macht gerade die Multimedialität das mobilen Internets dieses Medium so interessant. Immer und überall Bewegtbild zur Verfügung stellen zu können, gedruckte Anzeigen z.B. mit QR-Codes um Videos zu erweitern oder den Nutzer auch in Werkstatt, Garten oder unterwegs Video-Anleitungen zu bieten, sind ein unschlagbarer Wert.
Beachtet werden muss aber die unter Umständen geringe Übertragungsleistung. Die guten Handynetze in Großstädten und in der Nähe der meisten Internetagenturen sind nicht der Standard! Und mobiles Internet wird technikbedingt automatisch
langsamer, wenn sich der Nutzer bewegt (Bus, Bahn,
Auto).
Verzichten Sie also auf große Intros, konzentrieren Sie sich auf die wesentlichen Informationen und halten Sie so den Videoclip möglichst kurz. Eine gute technische Komprimierung und eine spezielle Mobile-Version in etwas schlechterer Qualität und
deutlich geringerer Dateigröße tun ihr Übriges, um mit Videos auch mobile Websites um attraktive Elemente zu erweitern.
Zusammengefasst
Mobile Websites müssen von Grund auf neu durchdacht
werden. Die besondere Nutzungssituation und die vorhandene Technologie stellen dabei neben dem eigenen Produkt die Entscheidungsgrundlagen. Eine
angepasste Informationsarchitektur, ein geeignetes Mobile-Layout und die mit Blick auf die Smartphone-Nutzung gerichtete Aufarbeitung der Inhalte sind
dann der Weg zu einer erfolgreichen mobilen Website. Diese ist dann kein Ersatz zur klassischen
Website, sondern ergänzt diese ideal, bindet Kunden und gewinnt neue Kunden über das überall-verfügbar-Medium mobiles Internet.
---
Dieser Artikel ist auch erschienen als "eBriefing - der Beraterbrief für E-Commerce, Mobile Commerce und strategisches Onlinemarketing", Herausgeber und Autor Thomas Hörner
Die Ausgestaltung mobiler Internetseiten wird im Wesentlichen von zwei Faktoren beeinflusst: der Situation, in der sie genutzt werden und durch die technischen Gegebenheiten des Mediums „Mobiles Internet“.
Wie jeder von sich selbst weiß, werden Websites des klassischen Internets im Normalfall im Büro, zu Hause oder mit dem Laptop sehr geplant an „Ersatzorten“ für den Schreibtisch genutzt.
Völlig anders aber das mobile Internet: es wird von 83 % der Nutzer in Zug, Bahn, Auto, Bahnhof oder Flughafen verwendet, zu 79 % am Urlaubsort, ebenfalls zu 79 % bei Freunden und Bekannten und zu 73 % in der Freizeit und beim Einkaufen.
Die Nutzung findet zudem viel spontaner und mit kürzerem Nutzungszeitraum statt. Aus solch unterschiedlichen Nutzungsszenarien resultieren unterschiedliche Ansprüche für Inhalt und Aufbau der jeweiligen Seiten. Die jeweils vorhandenen Bedürfnisse möglichst passgenau abzudecken ist dabei
das Ziel. Nur so kann der Konsument erfolgreich angesprochen werden.
Der zweite Faktor ist die völlig andere Technologie, die dem mobilen Internet zugrunde liegt. Zuerst fällt hier die Größe des Bildschirms ins Auge. Aber auch dessen Orientierung ist
eine völlig andere: Während die Geräte zur Nutzung des mobilen Internets fast immer im Hochformat
genutzt werden, sind PC-Monitore praktisch immer
im Querformat angelegt. Sie sind außerdem nicht nur Anzeigegeräte wie ein PC-Monitor – sehr oft stellen sie gleichzeitig Eingabegeräte in Form von Touchscreens dar.
Die dargestellten Daten müssen aber auch einen anderen Weg nehmen als im klassischen Internet: die Funkverbindung. Das bedeutet eine niedrigere und stark schwankende Übertragungsgeschwindigkeit – ein
Problem nicht nur beim Einsatz von Videos auf mobilen Internetseiten.
Und noch eine Besonderheit der Hardware gibt es: eine mobile Website kann den Standort des Betrachters abfragen und in die Informationsaufbereitung einbeziehen – die Tür zu völlig neuen Services, die auf klassischen Internetseiten gar nicht möglich sind.
Schließlich noch die Browsertechnologie: das von mobilen Browsern verwendete HTML ist zwar fast das Gleiche wie im klassischen Internet, aber schon bei dynamischen Seiten mit Javascript-Programmierungen kommen deutliche Unterschiede ebenso auf wie in Details der CSS-Interpretation.
Mobiles Layout
Alle oben aufgeführten Unterschiede von der Situation, in der sich der Nutzer befindet, bis hin
zu technologischen Details bedingen für mobile Internetseiten ein speziell angepasstes Layout.
Dies beginnt mit der Blickführung, die ein solches Layout leisten soll: es muss sich stärker auf das Hochformat einstellen. Die Links-Rechts-Blickführung
ist weitgehend unbedeutend.
Aber auch die Farbwahl ist nicht ohne Bedeutung: hier sollten die Farben etwas kräftiger und mit
stärkeren Kontrasten gewählt werden als im klassischen Internet. Denn mobiler Internetzugang
findet oft im Freien oder gar in der Sonne statt – und klare Farbausgestaltung erleichtert die Websitenutzung unter diesen Umständen deutlich.
Dazu kommen natürlich auch relativ große Schriften. Auch wenn diese dann mehr Platz auf dem kleinen Bildschirm benötigen: der Vorteil der leichten Lesbarkeit überwiegt deutlich.
Typische Internet-Layouts sind eher schlicht und arbeiten mit wenig filigranen Details. Sie würden auf kleinen Bildschirmen sowieso schlecht sichtbar sein, unnötigen Platz verschwenden oder durch die
benötigte Funkübertragung die Website unnötig verlangsamen. Außerdem kommt ein klares, schlichtes Design dem Bedarf nach schneller Bedienung der Website entgegen.
Relativ große Bedienelemente im Layout der mobilen Website haben aber noch einen anderen Grund als nur die Darstellung Touch-Bedienung der meisten Smartphones müssen diese auch mit relativ groben, großflächigen Navigationsinstrumenten genutzt werden können: den Fingern. Und während die Maus an sämtlichen PCs ein sehr zielgenaues Instrument darstellt, sind selbst sehr dünne Finger nur äußerst grob zu platzieren.
Informationsarchitektur
Geändert wird aber nicht nur das Layout der mobilen Webseiten im Vergleich zu klassischen Auftritten. Auch die grundlegende Auswahl der angebotenen Inhalte sowie die Navigation und Struktur der einzelnen Seiten – kurz: die Informationsarchitektur
einer Website – unterscheidet sich.
Wieder spielt hier die jeweilige Nutzungssituation des Website - Besuchers eine wichtige Rolle. Sie bestimmt, welche Inhalte analog zur klassischen Website angeboten werden und welche nur mobil oder nur im WWW zu finden sind. Oft werden Inhalte mobil gekürzt und aufs Wesentliche reduziert. Und auch die
Reihenfolge (= Wichtigkeit) auf der Website ändert sich beim Schritt Website zu mobiler Website.
Beispiel
Beispielhaft betrachten wir einmal den Buchhändler
Hugendubel. Die klassische Website bietet neben gezielten Suchfunktionen auch viele Anregungsmöglichkeiten. Von Buchwelten und -empfehlungen, einer grafisch aufwändig gestalteten Werbebühne bis zur Newsletter-Anmeldung ist eine vielfältige Beschäftigung mit Büchern möglich. Das passt auch zur Internetnutzung am PC: Nutzer sind meist länger im Internet, erwarten tiefe und reichhaltige Inhalte und surfen auch mal ohne konkretes Ziel - Sie „stöbern“ oder „bummeln“, wie es im Ladengeschäft heißen würde.
Anders im mobilen Internet: unterwegs ist das gezielte Suchen viel wichtiger. Es geht um ein in der aktuellen Situation wichtiges Buch oder Thema und die schnelle Information. Ob die Empfehlung der Freundin im Café, der spontane Gedanke an ein Buch im Bus oder die Anregung aus einer Zeitschrift beim Lesen auf der Parkbank – immer entsteht ein gezieltes Informations- oder gar Kaufbedürfnis.
Ganz zu Recht dominieren deshalb die Suchfunktionalitäten den mobilen Hugendubel-Auftritt. Volltext-Suchfeld und die zentralen Rubriken fallen auf dem Smartphone sofort auf
– auch wenn sich deren Reihenfolge sinnvollerweise verändert hat.
Sogar die Größenverhältnisse wurden an das mobile Medium angepasst: Ist im Web das Hugendubel-Logo noch etwa doppelt so hoch wie das
Suchfeld, hat es in der mobilen Version etwa die gleiche Höhe. Das Suchfeld erhält relativ mehr Gewicht. Außerdem wird das ganz oben zu findende Suchfeld in der mobilen Version nochmal ganz am Ende der Seite wiederholt – sehr sinnvoll für oft lange und aufwändig zu scrollende Seiten auf dem mobilen Gerät. Verzichtet wurde wohl u.a. aus Platzgründen – auch auf die Einschränkbarkeit der Suche auf einzelne Kategorien.
Die vielfältigen zum Stöbern geeigneten Elemente der klassischen Website sind fast völlig entfallen. Lediglich einige aktuelle Bücher werden mobil angepriesen. Konsequenterweise sind es die gleichen wie auf der klassischen Website – steht hierfür das Buchthema doch unabhängig vom Zugangsweg im Vordergrund.
Die Darstellung der Buchempfehlungen ist jedoch nicht exakt gleich und wurde an das mobile Medium angepasst: während im klassischen Web zu einem Buch die Abbildung, Buchtitel, Autor, eine Headline, ein kurzer werbender Satz und sogar noch ein Link auf weitere Bücher als Anregung zum Stöbern existiert, sind auf dem Smartphone nur Bild, Buchtitel und Preis präsent.
Was zu tun ist:
Wie beispielhaft an Hugendubel dargestellt, bietet eine mobile Internetseite also andere Inhalte in anderer Priorität und anderer Aufarbeitung als die klassische Website. Die Analyse potenzieller Nutzungssituationen Ihrer Website und Ihrer Produkte / Services steht daher noch vor dem eigentlichen Aufbau Ihrer mobilen Website.
Texte, Bilder und Videos
Eine optimale mobile Website unterschiedet sich aber neben dem Aufbau auch in den eigentlichen
Inhalten – selbst wenn es sich thematisch um die gleichen Inhalte halten sollte.
Wie jeder aus Erfahrung kennt, sind Texte auf dem Smartphone schwieriger zu lesen. Und längere Texte werden sehr unangenehm. Oft wird das Lesen von Texten mittendrin abgebrochen, wenn die Seite zu viele Zeichen enthält.
Die Konsequenz daraus ist ggf. die stärkere Nutzung der Hypertext-Funktionalität, also die Aufteilung des Textes in kleinere Informationseinheiten auf mehreren verlinkten Seiten.
In der Formulierung gilt dann umso mehr das „das Wichtigste zuerst“-Prinzip, um Websitebesuchern
auch dann die zentrale Information mitgeteilt zu haben, wenn Sie nur den Textanfang lesen.
Für Bilder gilt ebenso die Prämisse der Konzentration auf das Wichtigste. Mag ein Bild, auf
dem eine Menschengruppe und im Hintergrund noch etwas von der Umgebung zu sehen ist, im Internet einen guten Eindruck machen – im mobilen Internet ist aufgrund der Bildschirmgröße fast nichts mehr zu erkennen und damit das eigentlich Ziel des Bildes – die Informationsvermittlung auf einen
Blick – völlig verloren. Besser wäre für das mobile Internet ein Bildausschnitt, der sich auf die Personen beschränkt oder sogar Einzelbilder der Gesichter der Teilnehmer.
Das gleiche Prinzip gilt für Produktbilder: Zoom statt Umgebung, lieber zwei oder drei Detailbilder statt einem großen Übersichtsbild.
Zum Schluss noch eine Anmerkung zum Thema Video: Natürlich macht gerade die Multimedialität das mobilen Internets dieses Medium so interessant. Immer und überall Bewegtbild zur Verfügung stellen zu können, gedruckte Anzeigen z.B. mit QR-Codes um Videos zu erweitern oder den Nutzer auch in Werkstatt, Garten oder unterwegs Video-Anleitungen zu bieten, sind ein unschlagbarer Wert.
Beachtet werden muss aber die unter Umständen geringe Übertragungsleistung. Die guten Handynetze in Großstädten und in der Nähe der meisten Internetagenturen sind nicht der Standard! Und mobiles Internet wird technikbedingt automatisch
langsamer, wenn sich der Nutzer bewegt (Bus, Bahn,
Auto).
Verzichten Sie also auf große Intros, konzentrieren Sie sich auf die wesentlichen Informationen und halten Sie so den Videoclip möglichst kurz. Eine gute technische Komprimierung und eine spezielle Mobile-Version in etwas schlechterer Qualität und
deutlich geringerer Dateigröße tun ihr Übriges, um mit Videos auch mobile Websites um attraktive Elemente zu erweitern.
Zusammengefasst
Mobile Websites müssen von Grund auf neu durchdacht
werden. Die besondere Nutzungssituation und die vorhandene Technologie stellen dabei neben dem eigenen Produkt die Entscheidungsgrundlagen. Eine
angepasste Informationsarchitektur, ein geeignetes Mobile-Layout und die mit Blick auf die Smartphone-Nutzung gerichtete Aufarbeitung der Inhalte sind
dann der Weg zu einer erfolgreichen mobilen Website. Diese ist dann kein Ersatz zur klassischen
Website, sondern ergänzt diese ideal, bindet Kunden und gewinnt neue Kunden über das überall-verfügbar-Medium mobiles Internet.
---
Dieser Artikel ist auch erschienen als "eBriefing - der Beraterbrief für E-Commerce, Mobile Commerce und strategisches Onlinemarketing", Herausgeber und Autor Thomas Hörner