Nach oben

Vertikal Responsive: Wieso Websites in der Höhe flexibel sein sollen

Elemente, die sich im sofort sichtbaren Bereich einer Website befinden, erzielen höhere Klick-Raten und Conversions. Trotzdem passen sich die wenigsten Websites an die Höhe des Bildschirms an. Websites vertikal responsive zu machen, wäre aber genau so einfach möglich, wie sie in der Breite anzupassen.

Die Höhe als knappe Ressource

Die meisten Websites sind heute responsive umgesetzt und kommen auf einem Smartphone anders daher als auf dem Laptop. Vielfach beschränkt sich die Anpassungsfähigkeit aber auf die Seitenbreite. Unsere Geräte sind aber auch unterschiedlich hoch, und bei den heute gängigen breitformatigen 16:9 Screens und oftmals nicht ganz geöffneten Browserfenstern ist die Höhe die knappere Ressource als die Breite. Dem wird aber noch viel zu selten Rechnung getragen.

40% der nicht-Mobile-Screens sind weniger als 1000 Pixel hoch.

Über 40% der Desktop-, Laptop- und Tablet-Screens sind weniger als 1000px hoch, über 80% maximal 1200px. (Daten vom September 2015 von einer grösseren Schweizer Website, Total 1.8 Mio. Sessions)

Scrollen geht zwar einfach ...

Scrollen ist nur noch selten ein Bedien-Problem. Auf Touchscreens, Trackpads und mit der Scrollrad-Maus geht Scrollen sehr leicht von der Hand und man sieht nur noch selten User am kleinen Scrollbalken am Bildschirmrand verzweifeln. Wieso sollen Websites also vertikal responsive sein? Wenn ein Inhalt oder ein Element unten aus der Seite rausfällt, dann können die User scrollen und tun dies in den meisten Fällen auch. Aber nicht immer.

... aber der Bildschirmrand beeinflusst die Conversion

Elemente wie z.B. ein «In den Warenkorb»-Button unterhalb des Page-Folds werden eindeutig weniger oft angeklickt als wenn sie direkt sichtbar sind. Das bestätigen Auswertungen des Klick-Verhaltens und Conversion-Messungen (siehe z.B. «Das Pagefold-Manifesto»).

Scrollen scheint also doch ein Problem zu sein. Und zwar, wenn die Nutzer gar nicht auf die Idee kommen, dass sie scrollen müssten, um den ganzen Seiteninhalt zu sehen. Das ist bei eher linearem Inhalt wie z.B. einem Blog-Artikel kein Problem, weil dort die Erwartungshaltung klar vorhanden ist, dass der Text auch unten am Seitenende weitergeht. Bei einer Produktseite in einem Shop ist je nachdem, wo die Seite genau abgeschnitten wird, aber nicht unbedingt klar, dass weiter unten noch etwas kommt.

«Users do scroll, but only if what’s above the fold is promising enough. What is visible on the page without requiring any action is what encourages us to scroll.»

Amy Schade, Nielsen Norman Group

Übersicht über nicht Sichtbares

Scrollen zu müssen, um alle Inhalte einer Seite zu sehen, kann ausserdem beim Verstehen des Inhalts stören. Zum Beispiel auf Übersichtsseiten, die uns vermitteln wollen, was es in einem Bereich einer Website alles zu finden ist. Es fällt leichter, sich den Überblick zu verschaffen und eine Entscheidung für einen bestimmten Unterbereich zu fällen, wenn wir alle angebotenen Inhalte direkt nebeneinander sehen.

Website der Stadt Bülach zum Thema Bildung auf der nur 6 Inhaltsteaser oberhalb des Pagefolds sichtbar sind.
Auf der Übersichtsseite zum Thema Bildung der Stadt Bülach sieht man auf einem Laptop nur 6 Teaser, ...

Die Übersichtsseite der Stadt Bülach könnte z.B. so gestaltet werden, dass auf einem breitformatigen Bildschirm mit wenig Höhe in den Kacheln der Erklärungstext ausgeblendet wird und dadurch alle Kacheln direkt sichtbar werden.

Der Screenshot zeigt Webseite der Stadt Bülach zum Thema Bildung, die für Laptops mit weniger hohem Bildschirm optimiert ist und auf der alle 13 Inhaltsteaser direkt sichtbar sind.
... in einer höhen-optimierten Variante erhält der User direkt den Überblick über alle 13 Inhaltsteaser des Bereichs.

Fazit: Vertical Responsive Design für Kernseiten

Scrollen stellt für die Nutzer zwar kein Bedien-Problem mehr dar und geht einfach von der Hand. Dennoch gibt es Fälle, für die sich vertikal responsives Design lohnt. Insbesondere bei Conversion-relevanten Interaktionselmenten wie Kaufen- oder Weiter-Buttons sowie Inhalten von Übersichtsseiten ist vertikal responsives Design eine elegante Lösung, um den Inhalt für unterschiedliche Bildschirmgrössen (und insbesondere Bildschirmhöhen) optimal darzustellen. Im nächsten Beitrag erklären wir Vertikal Responsive: Wie es gemacht wird.

 

Nachtrag 2017

Eine gute Ergänzung zum Artikel ist der Beitrag Do responsive sites have to be so tall on mobile?

Kommentare

Kommentar schreiben

Schreibe einen Kommentar

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