Wenn jemand auf deine Website geht, kann er viele verschiedene Gründe haben, sich deine Kontaktseite anzusehen, egal ob du ein Social-Media-Unternehmen bist, ein lokales Café oder freiberuflich arbeitest. Deshalb benötigt deine Kontaktseite das richtige Design, damit jeder, der deine Website besucht, das findet, wonach er oder sie sucht, Hilfe bekommt und ein angenehmes Erlebnis hat.

Die Leute könnten nach Jobangeboten suchen, sich über ein fehlerhaftes Produkt beschweren wollen, auf der Suche nach Support zu ihrem Kauf sein, deine Telefonnummer finden wollen oder die Absicht haben, dein Büro aufzusuchen. Diese Interaktionen sind wichtig, damit dein Unternehmen oder deine Organisation reibungslos läuft, da sie ein essenzielles Bindeglied zwischen dir und deiner Kundschaft sind. Eine gute Kontaktseite kann deiner Kundschaft einen bestimmten Mehrwert und ein nahtloses Erlebnis bieten.

illustration: Kontaktseitendesign mit einem Mann, der sich hinsetzt und auf dieses Telefon schaut
Illustration von OrangeCrush

Die 7 besten Designtipps für Kontaktseiten

  1. Die richtige Recherche
  2. Anbieten einer angemessenen Kontaktmöglichkeit
  3. Klare visuelle Elemente designen
  4. Für Barrierefreiheit sorgen
  5. Markeneinheitlichkeit
  6. Engagement erhöhen
  7. Transparent sein

1. Die richtige Recherche

Möglicherweise probierst du es bei der Erstellung der Kontaktseite deiner Website mit bestehenden Vorlagen. Daran ist auch nichts falsch. Die meisten Menschen übersehen allerdings die Tatsache, dass diese Vorlagen nicht unbedingt am besten für ihr Unternehmen funktionieren. Um eine Kontaktseite zu erhalten, die zu deinem Unternehmen passt, stelle dir folgende Fragen:

Welche Kontaktmöglichkeiten benötigt dein Unternehmen?

Nimm dir einen Moment, um zu verstehen, welche Besonderheiten und Angebote deine Website bietet und denke dann über die verschiedenen Wege nach, auf denen die Menschen versuchen könnten, dich zu kontaktieren. Ein Designer oder eine Designerin hat wahrscheinlich potenzielle Kundschaft, die einen Preis anfragt, wohingegen ein Krankenhaus davon ausgehen kann, von Menschen kontaktiert zu werden, die einen Termin buchen wollen.

Und wenn du viele Anfragen für verschiedene Abteilungen, zum Beispiel Sales, technischer Support oder Bewerbungen auf Stellenangebote bekommst, ist es praktisch, deine Kontaktseite so zu gestalten, dass die Anfragen direkt an die entsprechenden Abteilungen gesendet werden. Die Klarheit, die du erhältst, wenn du herausfindest, was das Design deiner Kontaktseite benötigt, wird dir dabei helfen, sie besser zu strukturieren.

flatiron kontaktseite: vereinbaren Sie eine Beratungsseite
Eine Website, die auf ihrer Kontaktseite Anfragen zu Beratungen erwartet. Via Flatiron Collective

Wer ist deine Kundschaft und wie wird sie dich bevorzugt kontaktieren wollen?

Deine Website kann alle möglichen Menschen anziehen und es ist gut, ihre vielfältigen Kulturen, Sprachen und Herkunftsorte zu kennen und dann zu versuchen, ihren Bedürfnissen gerecht zu werden. Du solltest unter anderem überlegen, welche Formen der Kontaktaufnahme in den unterschiedlichen Ländern beliebt sind, sowie die Unterstützung der Sprache und die Barrierefreiheit bedenken.

Kontaktseite Malaysische Anwaltskanzlei mit WhatsApp Chatbot
Ein WhatsApp Chatbot, der aufgrund der Beliebtheit von WhatsApp in der Region von einer malaysischen Rechtsanwaltskanzlei genutzt wird. Via Chern & Co.

2. Anbieten einer angemessenen Kontaktmöglichkeit

Das Design deiner Kontaktseite muss deinen Besuchern klar vermitteln, was sie tun müssen, um dich zu kontaktieren. Du kannst deiner Zielgruppe folgende Möglichkeiten bieten:

Klassische Kontaktmöglichkeiten

Eine Telefonnummer ermöglicht es den Leuten, dich telefonisch oder per SMS zu erreichen. Wenn du zusätzlich eine Adresse zur Verfügung stellst, erfahren sie zusätzlich, wo du sitzt, und du gibst ihnen die Möglichkeit, bei dir vorbeizuschauen, besonders wenn dein Unternehmen darauf angewiesen ist, dass die Kundschaft in deinen Laden oder dein Büro kommt, wie zum Beispiel bei einer Bäckerei, einem Spa oder einer Zahnarztpraxis. Eine zusätzliche Karte oder ein Link zu Google Maps macht es den Leuten noch einfacher, zu dir zu finden.

Kontaktseite von Sandwich mit der Adresse mit einer Karte und einem Foto des Gebäudes
Großartiges Beispiel einer Karte und Foto eines Gebäudes neben der Kontaktadresse für leichte Navigation. Via Sandwich

Digitale Kontaktmöglichkeiten auf deiner Website

Um den Leuten die Möglichkeit zu geben, dich auf deiner Website zu kontaktieren, kannst du dich auch für Chatbots entscheiden. Du kannst den Leuten die Möglichkeit geben, sich mit jemandem aus deinem Team oder einer künstlichen Intelligenz zu unterhalten. Du kannst auch ein Formular zur Verfügung stellen, in das man Details zur Anfrage schreiben kann. Diese eingebauten Kontaktmöglichkeiten können helfen, Spam-Mails zu reduzieren, einen Überblick über Anfragen zu behalten und Aufgaben innerhalb deines Teams zu delegieren.

example of a chat-box window
Mithilfe eines Chatbots für eine leichte Kontaktaufnahme sorgen. Via Bold360
 contact form of Friendly, a design studio
Einfaches Kontaktformular eines Designstudios. Via Friendly

Digitale Kontaktmöglichkeiten unter Verwendung anderer Plattformen

Manchmal wollen die Leute dich mittels einer Plattform kontaktieren, auf der sie regelmäßig sind oder die ihnen vertraut ist. Diese Kontaktmöglichkeiten beinhalten E-Mails, einschließlich deiner Social-Media-Links wie Instagram, Facebook, LinkedIn und sogar WhatsApp.

klare Wege für Kontaktmethoden
Verständliches Design einer Kontaktseite von velvetmade

3. Klare, visuelle Elemente designen

Wenn es mehrere Wege gibt, dich zu kontaktieren, kann es schnell unübersichtlich und schwierig werden, wenn sie alle an einem Ort zu finden sind. Dies kann die Leute verwirren und dazu führen, dass ihnen manche Informationen entgehen oder, schlimmer noch, sie die falsche Abteilung kontaktieren.

Es ist äußerst wichtig, dass das Design deiner Kontaktseite übersichtlich, benutzerfreundlich und barrierefrei ist. Ein sauberes visuelles Design spart den Leuten nicht nur Zeit, sondern steigert auch die Effizienz deines Unternehmens, indem Anfragen direkt bei den richtigen Abteilungen landen.

Kontaktseite und Beratungsseite nebeneinander mit klarer Unterteilung
Design einer Kontaktseite von bogdan o

Dasselbe gilt, wenn du mehrere Abteilungen hast. Es empfiehlt sich, ihre Informationen voneinander zu trennen, damit die Leute ihre Nachrichten an die richtige Abteilung schicken können. Selbst etwas so Simples wie Trennlinien und Abstand können viel dazu beitragen, dass die Leute die verschiedenen Bereiche optisch wahrnehmen.

Kontaktseite, auf der Benutzer aufgefordert werden, Anfragebereiche wie persönliches Banking, Aktionärsservices usw. auszuwählen.
Ein unkomplizierter Weg, um mehrere Abteilungen zu kontaktieren. Via National Australia Bank

4. Für Barrierefreiheit sorgen

Es ist wichtig, sich darüber bewusst zu sein, dass Menschen unterschiedliche Fähigkeiten haben. Dein Webdesign muss inklusiv sein und auf unterschiedliche Bedürfnisse ausgerichtet sein, um allen Menschen gleichermaßen Zugang zu bieten. Auf diese Weise ist nicht nur das Design deiner Kontaktseite ethisch korrekt, sondern du erreichst auch eine breitere Zielgruppe und erhöhst die Nutzerfreundlichkeit. Achte beim Designen deiner Kontaktseite auf folgenden Punkte, um für angemessene Barrierefreiheit zu sorgen:

Barrierefreie Formulare

Stelle sicher, dass die Formularfelder und anderen Elemente entsprechend ihrer Attribute und den ARIA-Richtlinien gekennzeichnet sind. Dadurch können Hilfsprogramme wie Screenreader die Formularsteuerung erkennen. Wenn du die Felder darüber hinaus mithilfe von Farbe hervorheben möchtest, solltest du zusätzliche Erkennungsmerkmale wie ein Symbol oder Muster hinzufügen, damit sie sich voneinander unterscheiden und für Farbenblinde zu erkennen sind. Vergiss nicht, auch die eingegebenen Informationen auf ihre Richtigkeit zu kontrollieren und die Möglichkeit zu bieten, Änderungen vorzunehmen, die eingegebenen Daten zu bestätigen, auf Fehler aufmerksam zu machen und Hilfestellung bei der Fehlerkorrektur zu gewährleisten.

Formularvalidierung auf einer Kontaktseite
Formularüberprüfung mithilfe von Farbe und Form des Feldes. Via Abercrombie & Fitch

Reduziere die kognitive Belastung

Wenn du Anleitungen dazu bereitstellst, wie ein komplexes Formular auszufüllen ist, und das so simpel wie möglich gestaltest, zeigst du, dass dir bewusst ist, dass nicht jeder über die Zeit oder Fähigkeit verfügt, komplizierte Anleitungen zu verstehen. Dies kann erreicht werden, indem längere Formulare in kleinere Abschnitte unterteilt und adaptive Formulare genutzt werden.

Formular vereinfacht durch Verwendung von Optionsfeldern
Ein komplexes Formular, das in mehrere Abschnitte unterteilt ist und Leitfragen enthält. Via TM

Visuelle Barrierefreiheit

Verwende für das Design deiner Kontaktseite eine kontrastreiche Farbpalette und sorge dafür, dass jedes Textelement gut lesbar ist. Es empfiehlt sich, die Textgröße, Schriftgröße und Farben auf deiner Website anzupassen.

Website mit Barrierefreiheitsfunktionen wie Schriftart, Größe und Farbe
Barrierefreiheit für User durch Optionen zur Änderungen der Schriftart, Schriftgröße und Farbe. Via Malaysia Open Data Portal

5. Markeneinheitlichkeit

Entwerfen deiner visuellen Marke

Deine Kontaktseite verbindet dich und dein Unternehmen mit allen, die deine Website besuchen, daher ist es wichtig, das Aussehen der Marke und ihre Werte einheitlich zu halten. Designvorlagen für deine Kontaktseiten passen in der Regel nicht zu deiner Marke. Bearbeite sie dahingehend, dass sie zu deiner Persönlichkeit passen, und bleibe außergewöhnlich!

Kontaktseite im Einklang mit der Markenästhetik
Gutes Beispiel dafür, wie du deine Markenästhetik in deine Kontaktseite einbringst. Von BrioRom

Entwicklung des Tonfalls

Die Art und Weise, wie du dich und deine Marke auf deiner Website präsentierst, sei es freundlich, professionell oder humorvoll, muss auf all deinen Seiten einheitlich sein, auch auf deiner Kontaktseite. Du solltest einladend und freundlich klingen, um die Menschen nicht einzuschüchtern. Vermeide Slang und lange Wörter.

Kontaktseite mit „Wenn Sie ein Arzt sind, um so zu tun, schreiben Sie uns“ darauf geschrieben
Tolles Beispiel für einen Tonfall, der die Markenpersönlichkeit widerspiegelt. Via Dogstudio

6. Engagement erhöhen

Habe keine Angst davor zu experimentieren und sei beim Design deiner Kontaktseite kreativ. Etwas Spaß lässt sie wärmer und einladender wirken. Persönliche Fotos, Illustrationen und Interaktivität können ebenfalls helfen, die Kontaktaufnahme über das Internet mit dir menschlicher zu gestalten.

Kontaktseite mit Foto des Personals
Kontaktseiten durch Bilder von Teammitgliedern menschlicher gestalten. Via Apple

Du kannst auch deine Chatbots freundlich und witzig gestalten, indem du ihnen eine Persönlichkeit verleihst und sie so ansprechender machst! Schau dir mal diesen bezaubernden Chatbot hier an.

Chatbot-Hund mit dem Namen Riley
Eine schräge Art, einem Chatbot Persönlichkeit zu verleihen. Via Noise

7. Sei transparent

Datenschutz

Vergiss nicht, dass die Leute Daten wie ihren Namen, ihre E-Mail-Adresse und manchmal sogar noch sensiblere Dinge wie ihre Kreditkarteninformationen hergeben, wenn sie dich kontaktieren. Auch wenn es notwendig ist, Daten zu Dokumentationszwecken und zur Problemlösung zu sammeln, muss dir bewusst sein, dass die User das Recht haben zu wissen, wie ihre Daten genutzt werden.

Es ist auch ein ethischer Grundsatz, transparent zu sein und nur die nötigsten Informationen zu sammeln! Meistens benötigst du eigentlich nur einen Namen und eine E-Mail-Adresse oder Telefonnummer. Dazu kannst du deine Datenschutzerklärung überall dort verlinken, wo du Daten sammelst.

Den Leuten zu versichern, dass sie von dir keinen Spam erhalten werden und du ihre Informationen nicht an Dritte verkaufst, wird sie dazu ermuntern, dir diese Informationen zu geben und Vertrauen aufbauen.

Datenschutzerklärung auf der Kontaktseite
Eine zusammengefasste, nutzerfreundliche Datenschutzerklärung, die angezeigt wird, bevor Daten gesammelt werden. Via SK-II

Antwortzeit

Transparent zu sein bedeutet auch, deiner Kundschaft klar zu vermitteln, wie lange du für eine Antwort benötigst. Dies nimmt ihr die Angst, nicht zügig genug von dir zu hören, verringert mehrere Anfragen von ein und derselben Person und baut Vertrauen zwischen deiner Kundschaft und deinem Unternehmen auf.

Kontaktseite mit geschätzter Antwortzeit
Beispiel dafür, die User wissen zu lassen, wie lange es potenziell dauern wird, bis man sich bei ihnen meldest. Via Michael Kors

Kontaktseiten, die es richtig machen

Telstra

Eine Kontaktseite, die auf Illustrationen und eine simple und klare optische Trennung zwischen Abteilungen setzt.

telstra’s Kontaktseite
Telstras Kontaktseite mit Illustrationen und voneinander getrennten Abteilungen. Via Telstra

Nestlé

Eine recht simple Kontaktseite mit einfachem Formular und transparenter Datenschutzerklärung.

Nestle’s Kontaktseite
Nestlés Kontaktseite mit mehreren Kontaktmöglichkeiten und einfachem Formular. Via Nestlé

Fishfingers

Ein super simples, mehrseitiges Formular mit einfacher Navigation, das es dir ermöglich, schnell und leicht Kontakt aufzunehmen.

Fishfinger’s Kontaktseite
Fishfingers Kontaktseite mit simplem, mehrseitigem Formular. Via Fishfinger

Gander

Eine weitere simple Kontaktseite, auf der Informationen klar angeordnet sind. Dies erleichtert es Usern, Informationen zu finden und sie zu kontaktieren.

Kontaktseite von Gander Design Shop
Saubere und klare Kontaktseite von Gander, einem Designstore. Via Gander

Fazit

Wenn du dich an diese 7 Designtipps für Kontaktseiten hältst, garantierst du deinen Usern ein außergewöhnliches, einprägsames Erlebnis, wenn sie deine Kontaktseite nutzen.

Nun ist es an der Zeit, das Design deiner bestehenden Kontaktseite zu evaluieren oder eine Kontaktseite zu erstellen, falls du noch keine hast! Und wenn du jemals Hilfe benötigst oder einfach keine Zeit hast, deine Kontaktseite zu designen, kannst du jederzeit unsere professionelle und talentierte Design-Community kontaktieren, um eine herausragende Kontaktseite zu erhalten.

Du möchtest das perfekte Design für deine Kontaktseite?
Dann arbeite mit unserer talentierten Design-Community.