Der amerikanische Bildhauer Horatio Greenough benannte schon im 19. Jahrhundert mit dem Leitsatz “Form follows function” (“Die Form folgt der Funktion”), dass die Form – also im Fall einer Webseite “das Design” – der Funktion folgen sollte und nicht ein Design vorgibt, wie etwas auszusehen hat. Vielmehr sollte ein Design-Element eigenständig auf die Funktion rückschließen lassen. Dieser Leitsatz entspringt der Architektur und lässt sich perfekt auf den Webseitenaufbau anwenden. Der Bau eines Hauses beginnt mit dem Fundament, genauso braucht eine Webseite ein stabiles Fundament. Technologie-Umstellungen hinterlassen oft ihre Spuren auf der Webseite. Umgekehrt verbleiben aufgrund der Devise “never touch a running system” veraltete Bibliotheken im System. Wenn wir unsere Webseite mit einem Haus vergleichen, sollte man meinen, dass es jetzt schwierig ist, an diesem veralteten “Fundament” zu arbeiten, auf dem die Webseite steht. Das ist aber ein Irrglaube, denn Arbeiten am Fundament sind in der digitalen Welt viel einfacher als in der analogen. Daher ein Rat gleich zu Beginn: “Überarbeite das Fundament!” um deine Mobile Usability zu verbessern.

1. Öffne alle für dich verfügbaren Browser auf verschiedenen Betriebssystemen
   und Devices, und wirf einen Blick in das jeweilige Konsolenlog. Es werden
   Informationen gelistet, wie zum Beispiel Hinweise auf veraltete
   Technologien oder sogar kritische Fehler, die auf der Webseite bestehen.
   Häufig gibt es je nach Browser unterschiedliche Probleme. Ein Chrome-Browser
   kann sich z.B. auf einem Mac anders verhalten als auf einem Windows PC.
2. Als nächstes solltest du die Performance deiner Seite messen. Betrachte hierbei
   die Ladezeit deiner Webseite in den unterschiedlichen Browsern. Es gibt
   verschiedene Dienstleister für sogenannte Pagespeedtest, z.B. Google. Browser
   mit einer messbar längeren Ladezeit bieten dir ein gutes Indiz für notwendige
   Optimierungsmaßnahmen.
   
   Darüber hinaus starten wir in diesem Artikel mit einigen Quickwins für die
   mobile Darstellung deiner Webseite.

Das Smartphone hat sich vom Telefon zum vollständigen Office-Gerät gemausert. Und auch die Analytics-Zahlen zeigen uns immer mehr Relevanz der Mobile-Devices (Siehe Studie “Convergence Monitor 2022” von Kantar). Wie kommt es also zu folgenden Fehlern der mobilen Versionen von Webseiten? Und noch viel wichtiger: Können diese Probleme einfach verhindert bzw. behoben werden?

Ich möchte gerne vorwegnehmen, dass alle der folgenden Beispiele von mir privat gefunden und aufgenommen wurden. Keiner der hier vorgestellten Fälle wurde gesucht oder erzwungen. Lange war ein Leitsatz zur Webseite-Gestaltung “Mobile First”, doch folgende Beispiele zeigen, dass nicht jeder sich dieses Vorhaben zu Herzen nimmt.

Wo ist denn die Seite hin? – Mobile Usability muss geprüft werden

Ist auf deiner Webseite sicher auch so: Die mobile Zugriffsrate auf der Seite ist höher denn je, da jeder ständig und überall das Handy zur Hand hat und dies direkt an Ort und Stelle genutzt wird. Vermutlich nutzt deine Webseite auch ein Template, welches responsive ist, damit alle Inhalte auf kleinen Displays sinnvoll dargestellt werden. Dass man dabei eine Webseite auf einem Smartphone horizontal scrollen kann, sollte in den meisten Fällen jedoch nicht sein. Ungünstig, wenn das aus Versehen passiert und man die Orientierung verliert. Krampfhaft versucht man, die Seite wieder an die Stelle zurückzuschieben, an der man gerade eben noch etwas gelesen hat. Ein mobiles Gerät wird oft hochkant genutzt. Das führt unweigerlich dazu, Inhalte, die auf Desktop viel Platz haben, anders anzuordnen. So werden nebeneinander liegende Bilder in Slider gepackt, Texte brechen häufiger um und die ganze Nutzerführung ist eine andere. Ärgerlich, wenn es die Darstellung der Seite zerstört. “Uupppss, jetzt hab ich irgendwo geklickt, das wollte ich doch gar nicht.” oder “Ich wollte doch nur den Slider weiterswipen und nicht die ganze Seite.” – Kommt dir bekannt vor?

Ein Lösungsweg:
Der schnellste und einfachste Weg ist, alle Objekte abzuschneiden, die über die Seitenbreite herausragen können. Ein Main-Div oder gleich der Body bekommt einfach folgende CSS Attribute:

overflow-x: hidden;
width: 100vw;

Die Breite wird auf 100% der Device-Breite festgesetzt und alles, was auf der X-Achse übersteht, wird abgeschnitten. Um im letzten Beispiel den “Sortieren”-Button nicht zu verlieren, solltest du das überstehende Objekt ermitteln und es nicht links ausrichten, sondern an der rechten Kante. Wir empfehlen außerdem eine Qualitätskontrolle auf Devices mit verschiedenen Breiten. Der einfachste Weg dafür ist, die mobile Größe des Browsers zu simulieren. Dies können sämtliche Desktop-Browser von Haus aus. Wichtig ist zu erwähnen, dass es sich nur um eine Simulation handelt, daher ist das keine Alternative zur vollständigen Qualitätskontrolle auf nativen Geräten.

Zoom bei Auswahl oder Eingabe – UX Fehler die dir die Eingabe schwer machen

Viele mobile Browser nutzen eine automatische Zoom-Funktion, um z.B. das ausgewählte Eingabefeld stärker in den Fokus zu rücken. Ein ähnliches Verhalten sieht man auch, wenn man auf ein Objekt doppelt klickt. Das Verhalten wird jedoch seitens der Entwicklung oft nicht berücksichtigt, das heißt: Nur, weil das theoretisch möglich ist, muss man es nicht machen. Die Praxis zeigt uns, dass dieses Verhalten gang und gäbe ist. Der Zoom, der dadurch entsteht, ist aber weder von den Nutzer:innen noch den Webseiten-Anbietern beabsichtigt und kann einfach mit einem Pinch wieder auf den Ursprungszustand zurückgesetzt werden. Doch wäre es nicht viel schöner, wenn es gar nicht erst zu einem ungewollten Hineinzoomen in die Seite kommt?

Ein Lösungsweg:

Damit der Browser nicht eigenständig entscheidet, auf der Seite zu zoomen, können wir das unterbinden. Dazu ergänzt man einfach den Meta-Tag “Viewport” im Head der Seite um folgenden Parameter:

user-scalable=0

Dieser könnte dann so aussehen:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Nun verhält sich die Seite bei der Auswahl von Eingabefeldern wie erwartet:

Wo war ich noch gleich? – Negative User Experience und Orientierungsverlust

Im folgenden Beispiel treffen externe Werbe-Betreiber auf dynamische Werbe-Felder. Dass sich viele Newsseiten mit Werbung finanzieren, ist normal, doch sollte die Usability der Nutzer:innen nicht zu kurz kommen. Eine negative User Experience kann immer dafür sorgen, dass diese:r Nutzer:in nicht mehr wiederkehrt. Im folgenden Beispiel sieht man, dass die dort eingebundene Werbung die ganze Seite springen lässt. Die Werbung bleibt hier nicht statisch, sondern wechselt durch mehrere verschiedene Anzeigen durch. Und dann kommt es zu dem folgenden Verhalten: Die einzelnen Werbeanzeigen haben eine unterschiedliche Höhe, was zum dauerhaften Springen des Textes unterhalb der Werbeanzeige und damit zu einem Orientierungsverlust führt. Das Lesen des Artikels wird so nahezu unmöglich, da man immer wieder zur gelesenen Stelle hinscrollen muss, wenn man sie überhaupt wiederfindet.
Ein ähnliches Verhalten sieht man auch bei nachträglich hinzugeladenen Inhalten, diese haben den Vorteil, dass sie in der Höhe statisch bleiben und die Seite sich nur einmalig verschiebt.

Ein Lösungsweg:

Viele Elemente können sich während eines Seitenbesuchs verändern. Hierbei ist darauf zu achten, dass dies keine Auswirkungen auf den darauffolgenden Inhalt hat, sofern der Umbau des Inhalts nicht auf eine Interaktion des/der Benutzer:in zurückzuführen ist.
Mit einfachen CSS-Befehlen sollte man eine feste Höhe für die Box definieren, die mit Werbung gefüllt wird. Alternativ ist es möglich, für Inhalte, die nachgeladen werden, im Vorfeld über “min-height” einen Platz zu reservieren. Über “max-height” wird sichergestellt, dass sie eine bestimmte Größe nicht überschreiten.

min-height: ...
max-height: ...
height: ...

Warum einfach, wenn’s auch kompliziert geht? – Banner und Overlays die eine Conversion verhindern

Cookie Consent Layer sind zum Teil recht kompliziert und unverständlich. Im folgenden Beispiel ist der Button “Allem zustimmen” kaum klickbar, da eine Rabattaktion darüber liegt. Die Nutzer:innen sind daher gezwungen, nur die notwendigen Cookies zu akzeptieren.

Ein Lösungsweg:

Sämtliche Layer, Modals oder Infoboxen einer Webseite sollten freistehend sein (in CSS position: absolute oder fixed). Das bedeutet, im Gegensatz zur relativen Positionierung, dass sie sich nicht an dem Aufbau der Seite orientieren und daher auch keine Inhalte verschieben. In diesem Fall muss man festlegen, in welcher Reihenfolge die Inhalte dargestellt werden sollen. Die Reihenfolge des sogenannten “z-index” definiert, ob ein Objekt in den Hintergrund gelegt wird oder ob dieses vor anderen Objekten angezeigt wird. Ein höherer Wert steht für eine Position weiter im Vordergrund.
In unserem Beispiel sollte demnach der Cookie Consent Layer einen höheren Wert haben als die Rabatt-Lasche.

z-index: ...

Gutes UI Design und Abstände wirken hochwertig und professionell

Wer kennt es nicht: Der überfüllte Bus morgens auf dem Weg ins Büro. Das mag niemand. Auf Webseiten ist es wie im echten Leben: Man braucht Platz.

Das beginnt mit dem Abstand zum Rand der Seite. Der Text sollte dabei nicht abgeschnitten werden. Dieser Fehler rührt oft daher, dass für sämtliche Sprachen die gleiche Vorlage (Template) verwendet wird. Der englische Text “add to cart” ist kürzer als die deutsche Übersetzung “In den Warenkorb legen”.
Frameworks wie z.B. Bootstrap arbeiten beim Aufbau der Seitenstruktur mit “row” und “col”, also Reihen und Spalten. Um für sämtliche Variationen der Zusammensetzung flexibel zu sein, gehen “row”-Elemente oft horizontal ins Negative. Denn sie erwarten mindestens ein “Col”-Element, das dies wieder ausgleicht. 

Viel technisches Blabla, aber wenn dieser Standardaufbau nicht eingehalten wird, kommt es dazu, dass Inhalte unleserlich abgeschnitten werden, wie im ersten Beispiel zu sehen.

Ein Lösungsweg:
Der Tipp beim Template-Problem: Für sämtliche Seiten-Typen vorgefertigte Templates erstellen, insofern das im Content-Management-Tool bereits angelegt wurde.

Beim Problem mit aneinanderliegenden Elementen, wie hier die Buttons, empfehlen wir, ein Flex-Layout zu verwenden. Dies bietet tolle Flexibilität (wie schon der Name sagt), denn mit folgendem CSS-Layout kann es zu solchen Fehlern gar nicht erst kommen. Ein einfaches “gap” sorgt für einen stetigen Abstand zwischen allen Elementen, die sich in dieser Flexbox befinden.

display: flex;
justify-content: space-between;
gap: 10px;

Bei korrekter Verwendung des zuvor erwähnten “col”-Elements ist ein Abstand schon vordefiniert.

Zu große Finger? Keine Chance den Button zu klicken.

Viel Spaß beim Versuch, genau das kleine “X” zum Schließen zu treffen. Vermutlich wurde diese Box für die Desktop-Darstellung gebaut. Gelegentlich wird vergessen, Elemente für die Benutzbarkeit anderer Devices anzupassen. Das beginnt mit kleinen “Schließen”-Buttons wie in unserem Beispiel und geht hin bis zu komplexen Objekten, mit denen der/die Nutzer:in interagieren soll. Wer hier nun versucht, das Infofenster zu schließen, um den Inhalt dahinter zu lesen, klickt versehentlich und ungewollt auf den Hero-Shot dahinter und landet auf einer Unterseite.

Ein Lösungsweg:

Der offensichtliche Lösungsansatz für zu kleine Objekte ist, diese auf Smartphones größer darzustellen. Doch um nicht mit dem Design bzw. der CI zu brechen, kann die Interaktionsfläche größer sein als das Objekt selbst. Im unten dargestellten Beispiel hilft eine unsichtbare Fläche, die fast dreimal so groß ist wie das eigentliche “X”, Frustmomente zu reduzieren und die Nutzer:innen nicht in der Customer Journey zu unterbrechen.

Verstecken spielen kostet Conversions – Wichtige Elemente sollten im Viewport sichtbar sein

Die Höhe des Smartphones ist nicht gleichzusetzen mit der Höhe des Browsers auf einem mobilen Gerät. Ein im Desktop-Browser simulierter mobiler Browser sollte daher nicht ausschließlich zur Qualitätssicherung genutzt werden. Denn dann kann folgendes passieren: Im nativen mobilen Browser wird z.B. eine Tastatur eingeblendet, was im Desktop-Browser in mobiler Ansicht nicht der Fall ist. Hier zu sehen ist, dass die eigentliche Box der Webseite größer ist, es aber nicht möglich ist, zum Inhalt zu scrollen, weil er von der Tastatur überdeckt wird.

Schon beim Erstellen von Designs wird oft die Höhe des Bildschirms eines Smartphones genutzt. Doch dies stimmt selten mit dem überein, was Nutzer:innen beim Besuch der Seite mit dem Handy sehen. So wird ein Desktop-Browser mit der Bildschirmauflösung eines iPhone 12 Pro (oder Ähnlichem) vermutlich als Vorlage gedient haben. Wie man sieht, kann man Informationen wie die Produktbezeichnung und den Preis nicht “Above the Fold” sehen (Above the Fold = der Bereich der Webseite, der beim Seitenaufruf initial und ohne Scrollen zu sehen ist).

Ein Lösungsweg:

Keinen Desktop-Browser nutzen, um eine finale Qualitätssicherung der Seite vorzunehmen. Entwickler nutzen diese Simulation während der Programmierung, die Seite sollte aber immer noch einmal auf nativen Geräten kontrolliert werden. Tipp: Wenn du an einem Mac arbeitest, kannst du dir x-code von Apple kostenlos installieren. Dieses Paket enthält die App “Simulator”. Hier kannst du jedes gängige Apple-Smartphone und iPad als echte Simulation starten. Das kommt einem solchen Gerät zumindest sehr nah.
Zu finden unter: https://developer.apple.com/xcode/

Mein Tipp: Drucke dir diese Liste aus und gehe sie Schritt für Schritt für deine Webseite durch. Du wirst sofort Quickwins für mehr Nutzerfreundlichkeit und bessere Conversions sehen.

Fazit

Mit diesen wenigen Kniffen kann die mobile Seite so angepasst werden, dass die Nutzung intuitiv möglich ist und die Darstellung fehlerfrei ist. Templates, die ausführlich getestet wurden und in einem CMS (Content Management System) so gepflegt sind, dass auch Kollegen mit geringem technischen Hintergrund fehlerfreie Seiten aufbauen können, sparen Zeit bei der Qualitätssicherung und verhindern Frust bei den Kunden.