Mobile Funnels: Was es heißt, wenn fast alle vom Handy kommen

Wenn dein Verkehr aus Meta- oder TikTok-Anzeigen kommt, sitzt die große Mehrheit deiner Besucher am Telefon. Die genaue Zahl hängt von Branche und Kanal ab, sie liegt aber selten unter zwei Dritteln und oft deutlich höher.

Prüf es für deinen Fall nach, bevor du daraus Schlüsse ziehst. Jede Auswertung zeigt dir die Geräteverteilung, und die eigene Zahl ist mehr wert als jede Faustregel.

Die Konsequenz ist trotzdem fast immer dieselbe: Du gestaltest für ein Gerät, das du beim Bauen nicht in der Hand hast.

Der Denkfehler

Die meisten bauen am großen Bildschirm und prüfen am Ende die Handy-Ansicht. Das ist die falsche Reihenfolge, und man merkt es den Seiten an.

Auf einem 27-Zoll-Monitor ist eine dreispaltige Sektion mit einem Hintergrundbild und vier Aufzählungspunkten übersichtlich. Auf einem Telefon werden daraus drei Blöcke untereinander, das Bild ist ein Streifen, und der Knopf steht nach zwei Bildschirmhöhen Scrollen.

Bau in der Handy-Ansicht und sieh dir die Desktop-Ansicht danach an. Was auf 390 Pixel Breite funktioniert, funktioniert fast immer auch auf 1440. Der umgekehrte Weg gilt nicht.

Was auf dem Telefon anders ist

Die Falz liegt woanders

Der sichtbare Bereich vor dem ersten Scrollen ist auf einem Telefon rund 390 mal 700 Pixel, abzüglich Browserleiste. Da hinein passen eine Überschrift, zwei Sätze und ein Knopf. Mehr nicht.

Alles, was den Klick auslösen soll, muss dort stehen. Ein Knopf, den man erst nach dem Scrollen sieht, wird von einem erheblichen Teil der Besucher nie gesehen.

Der Daumen bedient, nicht die Maus

Ein Finger trifft ungenauer als ein Mauszeiger, und er verdeckt die Stelle, auf die er zielt. Daraus folgen zwei Regeln:

Alles Antippbare ist mindestens 44 Pixel hoch. Das ist die Größe, ab der Bedienelemente zuverlässig getroffen werden.

Zwischen zwei Zielen liegt Abstand. Zwei Antwortkacheln direkt untereinander ohne Lücke führen zu Fehlklicks, und ein Fehlklick in einem Funnel bedeutet, dass jemand zurückgehen muss.

Wichtige Bedienelemente gehören außerdem in die untere Hälfte des Schirms, weil der Daumen dort hinreicht.

Tippen ist mühsam

Jedes Textfeld ist auf dem Telefon eine echte Hürde. Die Tastatur klappt auf, verdeckt die halbe Seite, und man tippt auf Glas.

Deshalb sind Antwortkacheln so viel besser als Freitext. Ein Tipp gegen zehn Sekunden Tippen ist ein großer Unterschied im Abschluss.

Wo du Felder brauchst, hilf dem Browser: Setz den richtigen Typ, damit für eine Telefonnummer der Ziffernblock erscheint und für eine E-Mail die Tastatur mit dem At-Zeichen. Erlaube das automatische Ausfüllen. Beides spart Sekunden, und Sekunden sind hier die Währung.

Ladezeit entscheidet mit

Auf dem Telefon kommt der Verkehr oft über Mobilfunk. Ein großes Hintergrundbild, das am Schreibtisch sofort da ist, braucht dort spürbar länger, und in dieser Zeit sieht der Besucher nichts.

Die größten Posten sind fast immer Bilder und Schriften. Ein Bild, das in voller Kameraauflösung hochgeladen wurde, ist schnell zwanzigmal so groß wie nötig. Schriften von einem fremden Server bedeuten eine zusätzliche Verbindung, bevor der erste Buchstabe erscheint.

Ein Video auf der Startseite darf niemals von selbst mit Ton starten. Wer sein Telefon im Zug in der Hand hat, ist weg, bevor er den Ton ausschalten kann.

Der Aufbau, der auf dem Telefon funktioniert

Eine Spalte. Immer. Nebeneinander funktioniert auf 390 Pixeln nicht.

Kurze Absätze. Drei Zeilen sind auf dem Telefon fünf. Was am Schreibtisch ein Absatz ist, wird unterwegs eine Wand.

Ein Ziel je Schirm. Eine Frage, eine Aussage, ein Knopf. Zwei gleichwertige Knöpfe nebeneinander sind auf dem Telefon eine Entscheidung zu viel.

Fortschritt zeigen. Wer weiß, dass noch zwei Fragen kommen, bricht seltener ab als jemand, der ins Ungewisse tippt. Das gilt allerdings nur, wenn die Angabe stimmt: Wenn dein Funnel verzweigt und manche Wege kürzer sind, ist eine feste Gesamtzahl eine Aussage, die für den gegangenen Weg nicht zutrifft.

Große Schrift. Was am Monitor gut lesbar wirkt, ist auf dem Telefon oft zu klein. Fließtext unter 16 Pixel ist unterwegs anstrengend, und anstrengend heißt weg.

Formulare auf dem Telefon

Das Formular ist die Stelle, an der auf dem Telefon am meisten verloren geht. Ein paar Dinge, die spürbar helfen:

Feldtypen richtig setzen. Für eine Telefonnummer soll der Ziffernblock erscheinen, für eine E-Mail die Tastatur mit At-Zeichen. Das ist eine Kleinigkeit im Markup und spart dem Nutzer jedes Mal Sekunden.

Automatisches Ausfüllen erlauben. Wenn das Feld korrekt benannt ist, bietet der Browser Name und Adresse an, und aus dreißig Sekunden Tippen wird ein Tipp.

Fehler sofort und freundlich. Ein Fehlerhinweis, der erst nach dem Absenden erscheint und die ganze Seite neu lädt, kostet viele. Besser ist ein Hinweis direkt am Feld, sobald man es verlässt.

Keine Pflichtfelder ohne Grund. Jedes Sternchen ist eine Hürde. Was du nicht sofort brauchst, fragst du im Gespräch.

Was auf dem Telefon oft übersehen wird

Die Adressleiste frisst Platz. Der sichtbare Bereich ist kleiner, als die Gerätehöhe vermuten lässt, und er ändert sich beim Scrollen. Elemente, die am unteren Rand kleben, können dadurch springen.

Die Tastatur verdeckt die Hälfte. Wenn ein Feld unten steht und die Tastatur aufklappt, sieht der Nutzer weder das Feld noch den Knopf. Prüf jeden Formularschritt mit offener Tastatur.

Quer ist auch ein Fall. Nicht häufig, aber es kommt vor. Ein Layout, das im Querformat auseinanderfällt, wirkt unfertig.

Dunkelmodus. Manche Geräte stellen Farben um. Wenn deine Seite dafür nichts vorsieht, sollte sie wenigstens nicht unlesbar werden.

Bilder und Videos

Bilder sind auf dem Telefon der größte Posten bei der Ladezeit und gleichzeitig das, was am meisten wirkt. Beides zusammen heißt: sorgfältig auswählen, wenige verwenden.

Ein Bild, das etwas zeigt. Ein Foto vom Team, vom Produkt, von der Arbeit. Ein Symbolbild aus einer Datenbank erkennt jeder als solches, und es kostet Vertrauen statt es aufzubauen.

Die richtige Größe. Ein Foto direkt aus der Kamera ist mehrere Megabyte groß. Auf einem Telefon reicht ein Bruchteil davon, ohne dass man einen Unterschied sieht. Wenn dein Werkzeug beim Hochladen nicht verkleinert, mach es vorher selbst.

Platz reservieren. Ein Bild ohne feste Abmessungen schiebt beim Nachladen alles darunter nach unten. Wer in diesem Moment auf einen Knopf tippen wollte, trifft etwas anderes. Das ist einer der ärgerlichsten Fehler, weil er wie Absicht wirkt.

Video nur, wenn es trägt. Ein Video auf der Startseite kann viel bringen, kostet aber Ladezeit und Aufmerksamkeit. Wenn es läuft, dann stumm und mit sichtbarem Hinweis auf den Ton.

Die Reihenfolge auf kleinen Schirmen

Am Schreibtisch sieht man mehrere Dinge gleichzeitig, auf dem Telefon nacheinander. Was oben steht, wird gesehen; was unten steht, oft nicht.

Daraus folgt eine einfache Regel: Das Wichtigste zuerst, und zwar in dieser Reihenfolge. Was ist das Angebot. Warum sollte ich es glauben. Was muss ich tun.

Alles andere, die Firmengeschichte, die Auszeichnungen, die ausführliche Methodenbeschreibung, gehört nach unten oder gar nicht auf diese Seite.

Ein praktischer Test: Streich gedanklich alles unterhalb des ersten Bildschirms. Verkauft die Seite immer noch? Wenn nicht, steht das Falsche oben.

Wie du es prüfst

Die Handy-Ansicht im Entwicklerwerkzeug ist ein guter Anfang und ersetzt nicht das Gerät. Sie zeigt nicht, wie sich die Bedienung mit dem Daumen anfühlt, wie lange es über Mobilfunk dauert und wie es bei Sonnenlicht aussieht.

Schick dir den Funnel selbst aufs Telefon und geh ihn durch, als wärst du der Kunde. Am besten unterwegs, nicht im WLAN. Die Stellen, an denen du selbst zögerst, sind genau die Stellen, an denen andere aussteigen.

Wenn du eine Vorlage als Ausgangspunkt nimmst, ist der mobile Aufbau schon entschieden. Unsere Vorlagen sind für das Telefon gebaut und lassen sich in der Vorschau direkt in der Handy-Ansicht durchklicken.