UX Playbook: Teil 1 – home / landing page und menu & navigation

Seit einiger Zeit lautet die Devise für alle Webseitenbetreiber „Mobile First“. Damit ist gemeint, dass jede Seite optimal mit mobilen Endgeräten gelesen und bedient werden kann, da immer mehr Menschen nicht über ihren Computer, sondern mit dem Smartphone online sind. Somit gewinnt es enorm an Bedeutung, wie leicht händelbar eine Homepage auf einem vergleichsweise kleinen Bildschirm präsentiert wird. Das Google UX Playbook Healthcare gibt wichtige Hinweise dazu.

Hier, in dem ersten Teil der dreiteiligen Serie, werden neben der Home- und Landingpage auch die Navigation und Menüführung näher betrachtet.

home / landing page

Google empfiehlt folgende Punkte, die die Homepage und die Landing Page betreffen:

  1. klarer CTA (call-to-action) „above the fold“: Gestalten Sie den Text so, dass der Suchende den wichtigsten CTA auf Anhieb sieht und nicht erst herunterscrollen muss. Somit ist es sinnvoll, die Einleitungen eher knapp zu halten.
  2. individuelle CTAs: Halten Sie die CTAs nicht allgemein, wie etwa „Mehr erfahren“ oder „Hier klicken“, sondern ein wenig spezifischer, beispielsweise „Mehr zur Erkrankung“ oder „Jetzt den Test machen“.
  3. klarer „value prop“: Die USPs sollten (wenn vorhanden) gleich oben auf der Startseite verständlich und deutlich präsent sein. Das hilft dem User, sofort auf einem Blick zu sehen, worum es auf der Seite geht.
  4. keine Unterbrecherwerbung: Es gilt, Werbung (zum Beispiel Pop-Up-Werbung) und Werbebanner, die den kompletten Screen blockieren, zu vermeiden.
  5. kein automatischer Slider: Der Benutzer nimmt den Inhalt automatischer Slider weniger wahr, als wenn er selbst aus eigenen Stücken klicken muss. Zudem können zu viele Informationen den Webseitenbesucher überfordern und abschrecken. Konzentrieren Sie sich lieber auf einen Slider mit kurzen und prägnanten Inhalten und fordern Sie den Leser zum aktiven Klicken auf.
  6. Hauptziele der Webseite auf der Startseite: Die Conversionziele / Hauptziele sollen auf der Landing Page deutlich sichtbar sein. Je nachdem, was genau gewünscht wird und wichtig ist, kann zum Beispiel auf die Produktseite, den Bestellvorgang oder den Apothekenfinder verlinkt werden.
  7. Schriftgröße, Zeilenabstand, Stichpunkte: Besonders wichtig sind eine lesbare Schriftart und Schriftgröße (von Google werden 16 CSS-Pixel oder mehr angegeben). Gestalten Sie die Zeilenabstände locker, damit der Text nicht zu gestaucht wirkt. Außerdem unterstützen Stichpunkte die Übersichtlichkeit.

menu & navigation

Das Menü sollte vom User leicht zu navigieren sein, damit er den Aufbau versteht und sich gut darin zurechtfinden kann. Die nutzerfreundliche Gestaltung der Navigation ist ebenso essenziell.

Menü:
  1. Menüpunkte:
    • Gestalten Sie das Menü übersichtlich.
    • Die Menüpunkte sollten alle auf eine Seite passen, damit der User nicht scrollen muss.
    • Nehmen Sie eine klare Benennung des Menüs vor – am besten wörtlich (nicht nur durch das entsprechende Icon darstellen).
  2. Wichtige Funktionen:
    • Im Menü oder in der Headerleiste können Service-Hotlines integriert werden (zum Beispiel die eines Arztes oder Krankenhauses).
    • Falls das schnelle Auffinden des Ortes von Bedeutung ist, fügen Sie einen Location-Button ein.
  3. Sortierung der Menüpunkte:
    • Eine Anordnung nach Traffic-Volumen (bei Krankenhäusern und Arztseiten) ist empfehlenswert.
    • Sortieren Sie anschließend die Punkte in alphabetischer Reihenfolge.
Navigation:
  1. People don’t read, they skim:
    • 79 Prozent der User überfliegen den Text und lesen ihn nicht von oben nach unten und von links nach rechts.
    • Gelesen werden hauptsächlich die Überschriften.
    • Der Fokus sollte deshalb auf dem Wesentlichen liegen.
  2. Detaillierte Informationen:
    • Wichtige und umfangreiche Informationen sollten gut lesbar sein.
    • Verwenden Sie zur besseren Übersicht Aufzählungszeichen, Infoboxen und Fettungen.
    • Eine gute mobile Formatierung ist essenziell.
  3. Videos:
    • Verwenden Sie Videos, um User zu schulen (zum Beispiel wie man einen Arzt findet).
    • Ein 30-Sekunden-Video entspricht etwa einer halben Seite Text (je nach Abstand, Schriftart, …).
Interessant zu wissen: Die mobilen Endgeräte werden immer größer. Während im Jahr 2014 nur 7,5 Prozent der Smartphones 5,5 bis 6 Zoll hatten, waren es 2017 schon 43 Prozent. Und der Trend entwickelt sich immer weiter in diese Richtung. Somit ist die Bedienung dieser Geräte mit einer Hand schlecht umsetzbar, der User kommt beispielsweise mit seinem Daumen nicht mehr überall hin – es entstehen sogenannte „tote Ecken“ auf dem Bildschirm. Aus diesem Grund ist es wichtig, sich genau zu überlegen, wo man die wichtigen Informationen und vor allem die anklickbaren Elemente, wie beispielsweise Buttons, auf einer Webseite platziert.
Im nächsten Teil der Serie über das UX Playbook Healthcare von Google erfahren Sie mehr über search und location / doctor.