Mauerblümchen des Webdesigns
Warum du diese Website-Elemente zu Unrecht vernachlässigst

Clevere Webdesigner sehen in ihnen das Potenzial, die Konversions-Rate immens zu steigern – trotzdem werden Footer, die Kontakt- und die About-Seite immer noch häufig links liegen gelassen. Wir sagen: Verschwendete Chancen! In unserer zweiteiligen Artikelreihe erfährst du deshalb, wie du mit Konversionsoptimierung mehr aus diesen drei unterschätzten Elementen deiner Website machst.

Vorab Konversions-Ziele definieren: Was willst du mit deiner Website erreichen?

Bevor du mit der Optimierung loslegst, ist es wichtig, dass du genau definierst, was die Konversions-Ziele deiner Website sind.

„Konversion“ (Umwandlung) bedeutet, dass der Besucher einer Website eine gewünschte Aktion durchführt. Zum Beispiel: Er kontaktiert dich, registriert sich für einen Newsletter oder kauft ein Produkt – er wird also vom interessierten Besucher zu einem Interessenten und möglicherweise zu einem Kunden umgewandelt.

Eine gelungene Konversion ist erfolgt, wenn eine Zielgruppe sich im Sinne deiner Intention der Seite bedient.

Mach dir als ersten Schritt klar, was du überhaupt erreichen willst – und das so konkret wie möglich:

• Möchtest du beispielsweise lieber angerufen oder angeschrieben werden?
• Wie wichtig ist es für dich, dass die User deine Social-Media-Kanäle finden?
• Definiere und notiere dir deine Ziele und hierarchisiere sie.

Jetzt hast du eine gute Arbeitsgrundlage.

Webdesign-Mauerblümchen Nr. 1: Die Kontaktseite

Die Kontaktseite ist essentiell für deine Website, wenn zumindest eines deiner Konversions-Ziele ist, dass du kontaktiert werden möchtest – dies ist sicherlich dann der Fall, wenn du beispielsweise eine Dienstleistung anbietest.

Wenn Kontaktaufnahme gar nicht relevant für dich ist, sondern du es stattdessen darauf absiehst, dass deine Kunden ein Produkt erwerben, gelten diese Tipps nicht für dich, und du kannst gleich zum nächsten Punkt springen.

a.) Gestalte mit Liebe – und Call-To-Actions!

Deine Website präsentiert dich – deine Fähigkeiten, deine Dienstleistungen und Produkte. Einige Webmaster stecken daher viel Liebe in das Design ihres Webauftritts, sehen die Kontaktseite aber nicht als wesentlichen Bestandteil an.

So gähnt dich auf der sonst so wunderschön gestalteten Website nach dem Klick auf „Kontakt“ eine lieblose Seite an. Das ist verschenktes Potential!

Stattdessen solltest du deinem Gegenüber das Gefühl geben, dass du wirklich am Austausch mit ihm interessiert bist und ihm die Kontaktaufnahme so leicht wie möglich machst. Deine potenziellen Kunden müssen Vertrauen zu dir haben, bevor sie deine tatsächlichen Kunden werden.

Arbeite mit einem ansprechenden Handlungsaufruf und fasse eventuell in ein paar Sätzen knapp zusammen, warum dein Besucher bei dir an der richtigen Adresse ist.

Auch ein persönliches Foto von dir oder deinem Team kann an der Stelle passend sein.

b.) Integriere ein überschaubares Kontaktformular

Ein Kontaktformular mit dutzenden auszufüllenden Feldern, in dem Telefonnummer, Wohnanschrift, Wohnland, Geburtsdatum usw. angegeben werden müssen, sind – wer hätte es gedacht – nicht besonders beliebt. Diese umfangreichen Kontaktformulare verleiten statistisch belegt weniger Menschen zum Ausfüllen als überschaubare Kontaktformulare.

Doch welche Felder sind die unverzichtbaren für dein Kontaktformular? Das hängt von deinem Business und dem Ziel, das du mit deiner Website verfolgst ab.

Ein einfaches Kontaktformular kommt in der Regel mit drei bis vier Feldern aus:

• Name
• E-Mail-Adresse
• evtl. Betreff
• Kommentarfeld (hier tippt der Besucher seinen Text an dich ein)

Überlege dir, welche Informationen du von deinen Besuchern wirklich benötigst:

• Ziehst du es vor, per Mail in Kontakt zu treten? Dann spare dir ein „Telefonnummer“-Feld!
• Benötigst du wirklich die postalische Anschrift deiner Kunden?
• Und kann ein Feld, das du als „Nicht-Pflicht-Feld“ aufweist, vielleicht auch ganz raus?

Faustregel bei der Formulargestaltung: so kurz wie möglich.

Manchmal kann auch ein Auswahl-Feld Sinn machen, um bei der Kontaktaufnahmen gleich vorzusortieren, welcher deiner Dienstleistungen der Kunde in Anspruch nehmen möchte.

Zum Beispiel bietet unser Berliner Webdesign-Netzwerk neben einem Kontaktformular auch noch einen Projektplaner auf einer extra Seite an. So können wir ganz gezielt Informationen abrufen, um ein detailliertes Webdesign-Angebot zu erstellen. Eine zusätzliche, einfache Möglichkeit zur Kontaktaufnahme.

c.) Kontaktformular, E-Mail oder Anruf-Option? Überlasse dem User die Wahl!

Falls du auf mehreren Wegen kontaktiert werden kannst, biete diese auch deinen Kunden an.

Integriere nicht nur ein übersichtliches Kontaktformular, sondern hinterlege auch eine E-Mail-Adresse, denn die Besucher*innen haben unterschiedliche Präferenzen. Auch eine Telefonnummer kann sinnvoll sein.

Tipp: Verlinke Telefonnummer und E-Mail-Adresse, so dass die User dich mit einem Klick kontaktieren können. Hier die Befehle:

• +49 1234 567890:
  <a href=“tel:+491234567890″>+49 1234 567890</a>
• example@example.com:
  <a href=“mailto:example@example.anti“ aria-label=“{:?< KFi >2:=E@i6I2>A=6o6I2>A=6]4@>“ data-tld=“com“>example@example.com</a>
  

Wenn du einen Newsletter hast, macht es unter Umständen auch auf der Kontaktseite Sinn, auf diesen hinzuweisen und zum Eintragen aufzurufen.

d.) Sei kreativ bis zum letzten Button

Genauso wie du die optische Gestaltung deiner Kontaktseite nicht vernachlässigen solltest, darfst du auch gerne kreativ bei den Texten für Buttons und Kontaktfelder sein.

Wie wäre es mit einem „Ich bin dabei!“, „Ich will mehr wissen“ oder „Ja, will ich haben!“ anstatt „Absenden“ oder „Abonnieren“?

Wörter wie „Registrieren“ können mitunter abschreckend wirken; versuche sie zu ersetzen.

e.) Denke mobil und gestalte deine Kontaktseite responsive

Viele Menschen sind mittlerweile häufiger mit dem Handy im Internet unterwegs, als per Desktop.

Ein ansprechendes Design für die mobile Nutzung (responsive Design) ist daher mittlerweile unumgänglich, sofern du die mobilen Nutzer deiner Seite nicht sofort wieder davon jagen möchtest. Idealerweise designst du direkt mobile first.

Teste auch deine Kontaktseite mit Smartphones mit verschiedenen Betriebssystemen und Browsern auf Herz und Nieren, um eventuelle Darstellungsfehler und andere Bugs zu eliminieren.

f.) Dein Business ist local? Zeige es!

Wenn dein Business ortsgebunden ist, du zum Beispiel einen Laden oder eine Agentur in Berlin hast und regelmäßig Kunden bei dir vorbeikommen, dürfen natürlich auch die genaue Adresse, eine Standort-Karte sowie ggf. eine Anfahrtsbeschreibung nicht fehlen. Hierzu kannst du einfach einen Google-Maps- oder OpenStreetmap-Ausschnitt integrieren.

Zudem sind Adressangaben auch dann sinnvoll, wenn du „Local SEO“ betreibst, also deine Keywords für diesen Standort optimierst.

Webdesign-Mauerblümchen Nr. 2: Der Footer deiner Website

Der Footer wird im Webdesign oft vernachlässigt, da der Header-Bereich als das wichtigste Seitenelement gesehen und der User als „scrollfaul“ vermutet wird. User-Tests zeigen das Gegenteil.

Der Fußbereich deiner Website bietet dir die Möglichkeit, deinen Besuchern die wichtigsten Informationen deiner Website nochmal kurz und knackig aufzulisten und sie zum Weiterklicken zu animieren, bevor sie deine Website gegebenenfalls verlassen.

Hier sind unsere Tipps, wie du aus deinem Footer so viel wie möglich rausholen kannst:

a.) Platziere deine wichtigsten Inhalte (auch) im Footer

Wenn man bedenkt, dass alle User, die nicht vorher abspringen, tatsächlich am Ende jeder Seite den Footer zu sehen bekommen, erscheint dieser gleich wichtiger.

Außerdem: Hier entscheidet sich nun auch, ob der User die Website verlässt oder weiterklickt.

Erinnere dich also an dein Konversions-Ziel und nutze den Footer, um deine Besucher*innen zu einer Handlung aufzufordern.

Sei es durch ein knackiges Newsletter-Formular, welches dann auf jeder deiner Seiten sichtbar ist oder einen gut sichtbaren Button zu deiner Produkt- oder Dienstleistungsseite.

Auch können Trust-Elemente wie etwa Siegel oder Testimonials hier verlinkt werden, wenn diese auf jeder Seite zu sehen sein sollen.

b.) Sollte nicht fehlen: Der direkte Draht zu dir

Im Footer kannst du deine Besucher daran erinnern, dass sie dich kontaktieren können.

On nun via angezeigter E-Mail-Adresse, Telefonnummer, einem Link zu deiner Kontaktseite oder direkt über ein eingebettetes Formular – wie du inzwischen weißt, hängt dies wieder von deinen Konversions-Zielen ab.

Einen Link zu Kontakt im Footer zu platzieren hat sich mittlerweile so etabliert, dass viele Besucher*innen direkt im Footer danach suchen. Darauf solltest du also beim Design deines Footers definitiv nicht verzichten.

c.) Zeige, wo du sozial unterwegs bist

Da du vermutlich möglichst viele Menschen erreichen möchtest, bist du neben deiner Website sicherlich auch auf anderen Kanälen wie Facebook, Twitter oder Instagram vertreten.

Hübsche Social-Media-Icons im Footer weisen deine Besucher auf deine Präsenz im Social Web hin. Follower in sozialen Netzwerken erhöhen deine Reichweite und spielen deshalb oft eine wichtige Rolle für eine Website.

d.) Zur Entschlackung des Hauptmenüs: Platziere rechtliche Links im Footer

Inzwischen muss so gut wie jede in Deutschland angemeldete Website nach deutschem Recht über ein Impressum und eine Datenschutzerklärung verfügen.

Wenn du diese Seiten nicht im Hauptmenü – also im Headerbereich deiner Website – verlinken möchtest, kannst du diese Links einfach in den Footer integrieren.

e.) Behalte die Besucher*innen auf deiner Website

Beim Footer angekommen entscheiden Besuchende, ob sie auf deiner Website bleiben oder diese verlassen möchten.

• Haben sie die bisherigen Inhalte angesprochen?
• Erscheint ihnen dein Footer interessant genug für einen weiteren Klick?

Um Besucher*innen auf deiner Website zu behalten, kannst du neben Kontakt- und Call-To-Action-Elementen auch weitere Unterseiten deiner Website verlinken und so anregende Optionen zum Weiterklicken bieten.

• Besuchende sind mitunter neugierig und wollen eventuell mehr von dir erfahren. Warum also nicht deine „Über-mich“-Seite im Footer verlinken?
• Du betreibst auf deiner Website auch einen Blog? Dann kannst du diesen oder die wichtigsten oder aktuellsten Artikel ebenfalls im Footer verlinken.

Dabei ist es meist irrelevant, ob diese Seiten auch schon in deinem Headermenü verlinkt sind – doppelt hält besser!

f.) Keywords im Footer platzieren

Auch Keywords dürfen im Footer auftauchen. Das ist besonders effektiv, wenn du „Local SEO“ betreibst, also deine Keywords für einen bestimmten Standort optimierst.

So kannst du in einem kurzen Text zu deinen Kontaktdaten neben deiner Adresse deinen Service nochmal definieren.

Wenn eines deiner wichtigsten Keywords beispielsweise „Webdesign Agentur Berlin“ ist, dann könnte der Slogan im Footer lauten: „Ihre Webdesign-Agentur aus Berlin-Kreuzberg mit ♥“.

g.) Für den Komfort: Ein „Nach-Oben“-Button

Nützlich auf umfangreichen Seiten und bei längeren Blogeinträgen: Komme deinen Besucher*innen doch ein wenig entgegen und integriere einen Button, der nach einem Klick direkt zum Header deiner Website zurück scrollt.

Vor allem bei umfangreichen Websites mit viel Inhalt, Web-Shops oder langen Onpage-Seiten ist dieser Button fast schon ein Muss.

h.) Design des Footers: Keep it simple!

Wir haben dir jetzt viele Möglichkeiten näher gebracht, aber bitte bedenke auch: Dein Footer soll nicht überfordern.

Er soll wichtige Informationen auf den ersten Blick an deinen Besucher*innen vermitteln, und dies so überschaubar und userfreundlich wie möglich machen.

Für das Design deines Footers empfehlen wir dir deshalb:

• Ein Footer kommt am besten mit einem einfarbigen Hintergrund aus. Dabei sollte er sich vom Rest deiner Website absetzen.
• Die Fußzeile deiner Website sollte unbedingt auf jede deiner Seiten gleich aussehen. Alles andere verwirrt Besucher*innen deiner Website. Und das wollen wir beim Webdesign IMMER vermeiden.
• Halte ausreichend Abstand zwischen den Texten in deinem Footer. Besucher*innen soll wirklich auf den ersten Blick erkennen, welche Informationen du im Footer vermitteln möchtest. Oft bietet sich, je nach den Inhalten und der Art deiner Website ein Drei-Spalten-System mit Links plus Social-Buttons und/oder Kontaktformular an. Mehr als vier Spalten solltest du nicht in deinem Footer platzieren.
• Überprüfe auch auf mobilen Geräten, ob sich die Links in deinem Footer gut anklicken lassen.

Zielführendes, konversions-optimiertes Webdesign ist ein Prozess

Die goldene Regel bei allen Webdesign-Optimierungsmaßnahmen ist, dass du deine Website ausgiebig testen solltest. Hier und da ein Button weniger oder woanders platziert wirkt oft Wunder.

Bedenke dabei, dass eine hohe Besuchsfrequenz zwar meist eine notwendige, aber keine ausreichende Bedingung für erfolgreiche Konversion darstellt. Du musst die „richtigen“ User auf deine Website bringen, nämlich die, die deiner Zielgruppe entsprechen.

Experimentiere mit den Elementen deiner Website und analysiere zeitgleich deine Besucherzahlen sowie erfolgreiche Konversionen. So findest du nach und nach heraus, was am besten funktioniert.

Gibt es einen zweiten Teil der Mauerblümchen-Reihe? Vielleicht! Wir würden auf jeden Fall über DAS wichtigste Mauerblümchen des Webdesigns schreiben: die „Über-mich“-Seite. Connecte dich mit uns auf Facebook, um nichts zu verpassen.

Hast du weitere Tipps, die sich beim Design deiner Website bewährt haben? Fällt dir vielleicht sogar ein „Mauerblümchen“ ein, das wir bisher außen vor gelassen haben? Wir freuen uns wie immer auf dein Feedback!