An einem normalen Nachmittag klickst Du auf Deiner Webseite ein paarmal — auf das Logo oben links, auf einen orangefarbenen „Termin buchen"-Knopf, auf einen unterstrichenen Verweis im Lauftext, auf einen Eintrag im Inhaltsverzeichnis. Vier Klicks, vier verschiedene Mechaniken. Und doch heißen die Elemente im Alltag oft alle „Button" oder „Link", einfach weil man sie anklicken kann.
In diesem Beitrag sortieren wir die vier Begriffe, die Dir täglich begegnen: CTA, Button, Link und Ankerlink. Drei Ebenen, ein Spezialfall. Am Ende weißt Du, welches Element wofür gut ist und wie Du jedes davon bewusst auf Deiner Seite einsetzt.
CTA — die Absicht hinter dem Klick
CTA steht für Call to Action, also Handlungsaufforderung. Gemeint ist eine Rolle, kein konkretes Bauteil: ein Element, das den Besucher zu einer konkreten Handlung bewegen soll. „Termin buchen", „Newsletter abonnieren", „Angebot anfordern" sind klassische CTAs.
Was den CTA zum CTA macht, ist die Absicht. Er kann als auffälliger Knopf erscheinen, als hervorgehobener Textlink, als Bildkachel, als Banner mit Telefonnummer. Die Form ist sekundär. Wichtig ist, dass der Besucher in genau einem Moment versteht, was passiert, wenn er klickt, und dass dieser Klick zu Deinem Geschäftsziel beiträgt.
Faustregel für die eigene Seite: pro Seite einen Haupt-CTA, der das wichtigste Ziel trägt. Sekundäre CTAs gehören weniger laut gestaltet, sonst konkurrieren sie mit dem Haupt-CTA und schwächen ihn. Ein CTA, der wie ein Knopf aussieht, ist häufig. Aber nicht jeder Knopf auf Deiner Seite ist auch ein CTA.
Button — die Form, die nach Bedienung aussieht
Ein Button ist die visuelle Auszeichnung „klickbares Bedienelement". Rechteck mit Rahmen oder Hintergrundfarbe, oft mit Schatten, bei guten Seiten auch mit einem Hover-Effekt, der bei der Maus-Berührung anspringt.
Technisch kann hinter einem Button entweder ein klassisches HTML-Button-Element stehen (typisch in Formularen, etwa der „Absenden"-Knopf am Ende des Kontaktformulars) oder ein Link, der nur wie ein Button aussieht. Für den Besucher ist das egal: Er sieht den Knopf und weiß, hier passiert etwas Wichtiges.
Buttons sind das stärkste visuelle Signal für Aktion. Genau deswegen sollten sie sparsam eingesetzt werden. Eine Seite mit fünf gleich auffälligen Buttons hat keinen einzigen mehr. Sie konkurrieren alle um die gleiche Aufmerksamkeit. Ein einziger gut platzierter Knopf, der die Hauptaktion trägt, wirkt stärker als drei mittelgroße in einer Reihe.
Link — der Mechanismus, der Wege legt
Ein Link führt von einem Punkt im Web zu einem anderen. Erkennungsmerkmale: meistens unterstrichen, in einer abweichenden Farbe gesetzt, beim Drüberfahren mit der Maus erscheint der Hand-Cursor.
Drei Hauptarten begegnen Dir auf Deiner Seite:
- Interner Link: führt zu einer anderen Seite Deiner Webseite. Beispiel: vom Blogartikel zu Deinem Kontaktformular.
- Externer Link: führt zu einer fremden Webseite. Üblich, ihn im neuen Tab zu öffnen, damit der Besucher auf Deiner Seite bleibt, wenn er den fremden Tab schließt.
- Spezial-Link:
mailto:öffnet das Mailprogramm mit fertig vorbereitetem Empfänger,tel:startet auf dem Smartphone direkt den Anruf. Praktisch für Kontaktblöcke.
Faustregel: Inline-Text-Links sind richtig für Querverweise im Lesefluss („mehr dazu im Webseite-Grundcheck"). Eigenständige Buttons sind richtig für klare Handlungsaufforderungen. Wer das vermischt, baut Lesetexte mit Knöpfen mitten im Satz oder Bedienelemente, die niemand findet.
Ankerlink — der Sprung innerhalb derselben Seite
Ein Ankerlink ist ein Link, dessen Ziel ein bestimmter Abschnitt derselben Seite ist. Erkennbar an der Raute (#) in der Adresse, etwa /leistungen/#preise. Der Browser scrollt beim Klick automatisch zur passenden Stelle.
Wenn Dir die Raute als URL-Bestandteil schon mal aufgefallen ist, hast Du sie vielleicht im Beitrag Was ist eine Webadresse kennengelernt. Dort sitzt sie am Ende der Adresse als technischer Bestandteil. Hier sehen wir, wofür sie auf der Bedien-Seite gut ist: für interne Sprünge.
Praktisch ist das vor allem auf langen Seiten. Ein Inhaltsverzeichnis am Anfang, das mit einem Klick zum jeweiligen Abschnitt springt. Eine FAQ-Übersicht, in der jede Frage zur Antwort weiterführt. Ein „nach oben"-Link am Seiten-Ende, der zurück zum Anfang trägt. Auf Glossaren und langen Erklärseiten ersetzt der Ankerlink das Scrollen.
Wann welches Element passt — eine Heuristik in vier Sätzen
Im Briefing-Gespräch mit Deiner Agentur oder beim Selbst-Anlegen einer Seite hilft eine kurze Zuordnung:
- Haupthandlung der Seite wie „Termin buchen" oder „Kontakt aufnehmen": CTA als Button, sichtbar ohne Scrollen.
- Querverweis im Fließtext wie „mehr dazu in unserem Beitrag X": Inline-Link.
- Liste von Unterseiten in Navigation oder Footer: Text-Links, keine Buttons.
- Sprung auf langer Seite wie FAQ, Inhaltsverzeichnis, Glossar: Ankerlink.
Hilfreiche Frage, wenn Du unsicher bist, ob ein Element ein Knopf oder ein Textlink werden soll: Geht es um eine Aktion (etwas auslösen), tendenziell Button. Geht es um Navigation (woandershin gehen), tendenziell Link. Die Trennung ist nicht immer messerscharf, aber sie führt in 80 Prozent der Fälle zur richtigen Form.
Worauf Du beim Anlegen achten solltest
Egal, welches Element Du baust: fünf Punkte machen den Unterschied zwischen ordentlich gebaut und frustrierend.
- Klare Beschriftung: „Termin buchen" trägt Bedeutung, „Hier klicken" nicht. Der Anker-Text sagt schon vor dem Klick, was passiert.
- Erkennbarkeit: Buttons müssen aussehen wie Buttons, Links wie Links. Bedienelemente als nackten Text zu bauen, ist häufiger Anfänger-Fehler. Niemand erkennt dann, dass dort etwas klickbar ist.
- Genug Klickfläche: auf dem Smartphone mindestens 44 × 44 Pixel pro Element. Das ist der Standard für barrierefreie Bedienung und sorgt dafür, dass auch dicke Daumen treffen.
- Hover- und Fokus-Zustand: Maus-Nutzer sehen am Hover-Effekt, dass sie den richtigen Punkt getroffen haben. Tastatur-Nutzer brauchen einen sichtbaren Fokus-Rahmen, um sich zu orientieren.
- Zielangabe bei externen Links: ein neuer Tab und ein kleines Symbol signalisieren dem Besucher, dass er gleich Deine Seite verlässt. Keine Überraschung im Adress-Verlauf.
Was Interaktionselemente mit SEO und Barrierefreiheit zu tun haben
Suchmaschinen lesen Anker-Texte mit. „Jetzt buchen" ist für Google bedeutungsärmer als „Termin für Webseiten-Beratung buchen". Der zweite Anker trägt die thematische Information mit, der erste nicht. Wer gute Anker-Texte schreibt, hilft Google beim Verstehen der Seite und gleichzeitig dem Leser bei der Entscheidung, ob er klicken will.
Screenreader, also die Vorlese-Programme für Menschen mit Sehbehinderung, lesen Links als eigene Liste vor. Ein Besucher springt durch diese Link-Liste, um sich auf einer Seite zu orientieren — wie eine schnelle Inhaltsübersicht. Wenn dort fünfmal „Hier klicken" hintereinander steht, ist die Liste wertlos. Saubere Beschriftungen sind also keine Stilfrage. Sie sind Voraussetzung dafür, dass Suchmaschine und Mensch Deine Seite verstehen.
Fazit
CTA bezeichnet die Absicht, Button die Form, Link den Mechanismus, Ankerlink den Spezialfall innerhalb der Seite. Wer diese vier Ebenen im Kopf hat, briefed klarer, entscheidet bewusster und führt seine Besucher dorthin, wo es weitergehen soll. Strategisch eingesetzt wirken Interaktionselemente leise und führen zuverlässig.