Prüfpunkt cta-above-the-foldBedienflächen und erster Bildschirm
Warum gehört die wichtigste Schaltfläche in den ersten Bildschirm?
Die wichtigste Schaltfläche gehört in den ersten Bildschirm, weil Besucher dort ohne Scrollen handeln können — anfragen, anrufen, buchen. Wer den nächsten Schritt erst suchen muss, springt häufiger ab. Der Prüfservice prüft im Smartphone-Profil mit 390 Pixeln Breite, ob im sichtbaren Bereich eine Handlungsaufforderung steht, die sich klar vom Fließtext abhebt.
Eine Handlungsaufforderung führt Besucher zum nächsten Schritt
Eine Handlungsaufforderung — englisch „Call to Action“ — ist die Schaltfläche, die den Besucher vom Lesen ins Handeln bringt: „Termin buchen“, „Angebot anfordern“, „Jetzt anrufen“. Für ein Unternehmen ist sie der Moment, in dem aus einem Besucher ein Interessent wird. Auf dem Handy ist der sichtbare Ausschnitt klein; steht die Schaltfläche erst weiter unten, sehen viele Besucher sie gar nicht. Der erste Bildschirm sollte deshalb beides enthalten: eine kurze Antwort, worum es geht, und den Weg zum nächsten Schritt. Beide zusammen machen aus dem Seitenanfang eine vollständige Einladung statt einer bloßen Begrüßung.
So erkennt der Prüfservice die Schaltfläche
Die Prüfung sucht im sichtbaren Bereich nach einem anklickbaren Element, das sich sichtbar vom Fließtext abhebt: mit eigener Hintergrundfläche oder einem Rahmen, mit spürbarem Innenabstand und in ausreichender Größe, um als Ziel zu dienen. Diese Erkennung ist bewusst strukturell und kommt ohne Wortlisten aus — sie funktioniert in jeder Branche, egal ob der Knopf „Tisch reservieren“, „Beratung anfragen“ oder „Prüfung starten“ heißt. Ein blasser Textlink in einer Fußnote zählt dagegen nicht, denn er lädt nicht zum Handeln ein. Gemessen wird zweimal; das Fehlen wird nur gemeldet, wenn beide Durchläufe keine Handlungsaufforderung finden.
So gestalten Sie eine gut sichtbare Handlungsaufforderung
Eine wirksame Schaltfläche hebt sich farblich vom Rest der Seite ab, hat genug Innenabstand, um bequem getippt zu werden, und trägt eine Beschriftung, die den nächsten Schritt benennt. „Kontakt“ ist verständlich, „Kostenloses Erstgespräch vereinbaren“ sagt zusätzlich, was den Besucher erwartet. Eine einzige klare Schaltfläche wirkt dabei stärker als fünf konkurrierende: Wer alles anbietet, empfiehlt nichts. Platzieren Sie die Fläche so, dass sie auf dem Handy ohne Scrollen erreichbar ist, und prüfen Sie das am echten Gerät — der Prüfbericht legt dafür ein Bildschirmfoto des ersten Handy-Bildschirms bei.
So gehen Sie es an
- Öffnen Sie Ihre Startseite auf dem Handy und prüfen Sie, ob eine Schaltfläche für den nächsten Schritt ohne Scrollen sichtbar ist.
- Formulieren Sie die Beschriftung als konkreten Schritt, etwa „Angebot anfordern“ statt „Mehr erfahren“.
- Lassen Sie die Schaltfläche farblich vom Hintergrund abheben und geben Sie ihr großzügigen Innenabstand.
- Beschränken Sie den ersten Bildschirm auf eine Haupt-Handlungsaufforderung, damit die Entscheidung leichtfällt.
Weiter im Prüfbereich Responsive
- Wie prüft man ein einzelnes Element auf allen Bildschirmgrößen?Der Prüfservice misst ein einzelnes Element gezielt auf Smartphone, Tablet und Desktop: sichtbar, vollständig im Bild und gut bedienbar.
- Auf welchen Bildschirmgrößen sollte eine Website getestet werden?Auf vier Profilen: 390, 768, 1440 und 1920 Pixel Breite — jeweils als echtes Gerät im Browser nachgebildet.
- Wie zuverlässig sind automatische Website-Prüfungen?Verlässlich wird eine automatische Prüfung durch Wiederholung: Jeder Befund wird zweimal erhoben, gemeldet wird nur, was beide Messungen sehen.
- Wie groß muss Text auf dem Smartphone mindestens sein?Fließtext unter 12 px ist am Telefon ohne Zoom unleserlich. Was der Prüfbereich Responsive misst, welche Ausnahmen gelten und wie Sie die Schriftgrößen korrigieren.
Dieser Prüfpunkt gehört zum Prüfbereich Responsive; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Intel Free Press, CC BY 2.0
