German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)
Eine gute Kontaktseite ist wichtig, um die Beziehungen zu Ihren Besuchern zu finden. Unabhängig davon, ob es sich um E-Commerce, Magazine, persönliche Websites oder Onlinedienste handelt, suchen Benutzer normalerweise eine Kontaktseite als erstes Kommunikationsmittel mit Ihnen. Viele Webdesigner vernachlässigen die bescheidene Kontaktseite und betrachten sie sogar als einen der am wenigsten wichtigen Aspekte einer Website. Lassen Sie uns das korrigieren.
Die Bedeutung einer guten Kontaktseite
Eine Kontaktseite wird oft übersehen. Wie oft haben Sie eine Website besucht, möchten sich mit Ihnen in Verbindung setzen, um sich über ein Produkt oder eine Dienstleistung zu beschweren oder eine Frage zu stellen? Und wie oft haben Sie keinen Kontaktformular gefunden?
Eine gute Kontaktseite kann jeder Art von Geschäft zugutekommen. Es kann die Kundenzufriedenheit verbessern, indem es Benutzern bei ihren Problemen hilft. Es kann einem Unternehmen auch dabei helfen, seine Produkte und Dienstleistungen zu verbessern, indem es einen Weg für wertvolles Feedback bietet.
Andere Kanäle können eingeschränkt sein, wenn es um Benutzerfeedback geht. Fernsehen, Radio, Zeitschriften, Zeitungen... alles ist eine Form der einseitigen Kommunikation. Online-Kommunikation sollte eine Einbahnstraße sein. ein Dialog zwischen einem Unternehmen und einem Besucher. Davon können beide Parteien profitieren, weshalb eine gute Kontaktseite unerlässlich ist.
Platzierung
Erster Schritt zuerst: Der Ort Ihrer Kontaktinformationen. Die beste Kontaktseite der Welt zu haben, ist nicht gut, wenn Besucher sie nicht finden können. Wenn Sie einige Designkonventionen berücksichtigen, können Sie Ihren Besuchern helfen.
Im Allgemeinen finden Sie Kontaktinformationen an zwei Stellen:
Die primäre Navigation ist ein idealer Ort für einen Kontaktseitenlink. Besucher suchen normalerweise auf der rechten Seite einer Seite nach Kontaktinformationen, da diese als zweitrangiges Element angesehen werden. Aus diesem Grund wird der Link zur Kontaktseite häufig als eines der letzten Elemente in der Site-Navigation angezeigt.
Möglicherweise wird in der oberen rechten Ecke des Bildschirms auch eine kleinere Subnavigation angezeigt. Dies ist auch eine wertvolle Position für die Kontaktseite. Wenn Sie dies sagen, sollten Sie einen Link zur Kontaktseite in einem Dropdown-Menü am besten vermeiden, da dieser leicht übersehen werden kann.
Die Fußzeile ist auch ein beliebter Ort für Kontaktinformationen. Es kann entweder einen Link zur Kontaktseite enthalten:
oder die wichtigsten Kontaktinformationen selbst:
Das Vorwegnehmen des Besucherflusses zu einer Kontaktseite ist schwierig. Die Platzierung eines Links an mindestens zwei Stellen, wie erwähnt, deckt Sie also recht gut ab.
Kontaktseiten-Grundlagen
Jetzt, da wir zuversichtlich sind, dass Besucher den Weg zur Kontaktseite finden können, ist es Zeit, über den tatsächlichen Inhalt nachzudenken. Beginnen wir mit den Grundlagen und werfen einen Blick auf Informationen, die vorhanden sein sollten.
E-Mail-Adresse/Kontaktformular
Eine E-Mail-Adresse ist der einfachste Weg, um ein Unternehmen online zu kontaktieren. Alternativ können Sie ein Kontaktformular verwenden, das eine E-Mail sendet. Über ein Kontaktformular haben Sie mehr Kontrolle über den Inhalt (erforderliche Felder) und es kann Spam verhindern. Mehr zu Kontaktformularen weiter unten in diesem Artikel.
Adresse
Unternehmen mit einem stationären Geschäft sollten nicht vergessen, ihre Adresse anzugeben. Wenn Sie mehrere Geschäfte haben, erstellen Sie am besten für jeden Standort eine eigene Seite. Füllen Sie diese Seite mit geschäftsspezifischen Kontaktinformationen, Öffnungszeiten, Wegbeschreibungen usw. Dies ist nicht nur für Besucher nützlich, sondern kann Ihrer Website auch bei lokalen Suchanfragen helfen.
Telefon
Das Anzeigen einer Telefonnummer vermittelt ein Gefühl des Vertrauens. Es wird oft als Zeichen dafür gesehen, dass dies ein echtes Unternehmen ist, was für Online-Shops sehr hilfreich sein kann.
Sozialen Medien
Viele Websites beginnen, Social-Media-Schaltflächen zu ihrer Kontaktseite hinzuzufügen. Obwohl dies wahrscheinlich nicht jeder Website zugute kommt, kann es für einige Besucher ein echter Mehrwert sein. Zumal immer mehr Unternehmen Kundenunterstützung über Twitter anbieten (manchmal sogar rund um die Uhr).
Extras
Für eine gute Kontaktseite gibt es keine einheitliche Lösung. Für jede Website oder jedes Unternehmen sind bestimmte Elemente erforderlich, die auf anderen Websites möglicherweise redundant sind.
Auf einer Kontaktseite finden Sie zahlreiche zusätzliche Informationen oder Funktionen. Für stationäre Geschäfte kann es eine gute Idee sein, beispielsweise die Öffnungszeiten zu erwähnen. Große Unternehmen können auf ihre Live-Chat-Funktion verlinken, und E-Commerce-Websites können das Vertrauen der Benutzer durch Anzeige ihrer Umsatzsteuer-Identifikationsnummer festigen.
Verwendbare Informationen
Wenn Sie die Informationen auf Ihrer Kontaktseite verwenden, kann dies viel Frust bei den Besuchern verhindern.
Fügen Sie Ihre Kontaktinformationen als HTML-Text anstelle von Bildern ein. Dies mag ein Kinderspiel sein, aber es gibt viele Websites, die andere Techniken verwenden. HTML-Text kann kopiert und eingefügt werden, sodass der Besucher Ihre Kontaktdaten leichter speichern kann.
Eine E-Mail-Adresse sollte den Mailto-Link verwenden. Auf diese Weise können Besucher, die darauf klicken, eine E-Mail senden, ohne zuvor die Ziel-E-Mail-Adresse kopieren und einen E-Mail-Client öffnen zu müssen. Ein Problem bei dieser Technik kann jedoch in Form von Spam-Robotern auftreten, die E-Mail-Adressen abrufen, die einem mailto: -Link zugeordnet sind. Daher sollten Sie überlegen, ob Sie E-Mail-Adressen zuerst mit einem Dienst wie mailtoencoder.com verschleiern möchten.
In diesem Zusammenhang: Telefonnummern sollten auch interaktiv sein. Letztes Jahr haben wir einen kurzen Tipp veröffentlicht, wie Sie eine Telefonnummer anklickbar machen können. Dank eines kleinen Codes können Smartphones Telefonnummern erkennen und so anrufbar machen. Dies ist sehr praktisch für mobile Benutzer.
Unternehmen, die sich stark auf ihre stationären Geschäfte verlassen, können von einer interaktiven Karte in hohem Maße profitieren, sodass Benutzer schnell den Weg zur Verkaufsstelle finden. Das Anzeigen der Adresse eines Geschäfts ist großartig, das Hinzufügen einer interaktiven Karte ist jedoch besser.
Dank Google Maps war es nie einfacher, diese nützliche Funktion einzubetten. Geben Sie einfach Ihre Adresse in Google Maps ein und klicken Sie auf das Link-Symbol in der Seitenleiste. Dort finden Sie den Einbettungscode.
Wussten Sie, dass Sie Ihre Karte anpassen können? Sie können die Kartenfarben formatieren, benutzerdefinierte Kartenmarkierungen hinzufügen und eine Legende erstellen. Weitere Informationen finden Sie auf developer.google.com. Sie können auch alternative Dienste wie die eher schmackhafte Mapbox in Betracht ziehen.
Suchmaschinen nicht vergessen
Als Besucher erkennen Sie sofort eine Adresse auf einer Kontaktseite. Suchmaschinen benötigen jedoch etwas mehr Hilfe beim Erkennen der verschiedenen Elemente.
Wir können dies mithilfe strukturierter Daten lösen. Strukturierte Daten sind eine Form des HTML-Markups, mit dem Suchmaschinen mehr Informationen über die zugrunde liegende Bedeutung des Inhalts erhalten.
Wie funktioniert es? Nehmen wir an, wir haben eine Webdesign-Agentur namens "Fine Design" am 3102 Highway 98 in Mexico Beach, FL. Mit Mikrodaten können Suchmaschinen diese Adresse besser verstehen. Der HTML-Code sieht ungefähr so aus:
1 |
<div itemscope itemtype="http://schema.org/LocalBusiness"> |
2 |
<h2><span itemprop="name">Fine Design</span></h2> |
3 |
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> |
4 |
<span itemprop="streetAddress">3102 Highway 98</span> |
5 |
<span itemprop="addressLocality">Mexico Beach</span>, |
6 |
<span itemprop="addressRegion">FL</span> |
7 |
</div>
|
8 |
</div>
|
Möglicherweise möchten Sie noch einen Schritt weiter gehen und diesen Block in ein <address> -Element einschließen. Das Adresselement sollte nur für Adressen verwendet werden, die für den Kontext der Website relevant sind, nicht nur für alte Adressen, die Sie möglicherweise in Ihrem Inhalt haben. Die Verwendung dieses Elements hat Entwicklern jahrelang Kopfschmerzen bereitet. Wenn Sie sich also nicht sicher sind, machen Sie sich keine allzu großen Sorgen!
Das war's für die Firmenadresse. Wir können jedoch auch Mikrodaten für die Telefonnummer und E-Mail-Adresse verwenden:
1 |
Tel: <span itemprop="telephone">850-648-4200</span> |
2 |
Email: <a href="mailto:info@finedesign.com" itemprop="email">info@finedesign.com</a> |
Dank dieses Markups wissen Suchmaschinen, dass dies die Adresse, Telefonnummer und E-Mail-Adresse des Unternehmens „Fine Design“ ist. Es handelt sich um implizite Informationen, was bedeutet, dass Besucher sie nicht sehen können, aber es sind sehr nützliche Suchmaschinen.
Sie können auch das hCard-Mikroformat verwenden, mit dem Kontaktdaten auf verschiedenen Plattformen problemlos gespeichert werden können. Weitere Informationen zu Mikroformaten finden Sie auf html5doctor.com.
Kontaktformulare
Die meisten Websites verwenden ein Kontaktformular auf ihrer Kontaktseite. Einige Kontaktformulare sind jedoch unnötig kompliziert und benutzerunfreundlich.
So einfach ein Kontaktformular auch aussehen mag, es ist tatsächlich eine Kombination aus mehreren wichtigen Komponenten. Jede dieser Komponenten sollte zusammenarbeiten, um die beste Benutzererfahrung zu bieten.
Eingabefelder
Eingabefelder wie Textfelder, Optionsfelder, Kontrollkästchen usw. ermöglichen es dem Benutzer, die erforderlichen Informationen einzugeben.
Website-Besucher füllen mit größerer Wahrscheinlichkeit kürzere Formulare aus, da sie weniger Aufwand erfordern. Die Anzahl der Eingabefelder ist ein Balanceakt zwischen Benutzererfahrung und Geschäftsanforderungen. Hubspot analysierte über 40.000 Formulare und untersuchte die Auswirkungen einer Erhöhung der Anzahl der Eingabefelder. Das Ergebnis ihrer Studie ist, dass Sie so wenig Formularfelder wie möglich verwenden und bei komplexeren Textbereichen und Auswahlfeldern besonders vorsichtig sein sollten.
Helfen Sie Ihren Besuchern, diese Felder auszufüllen, indem Sie das richtige Format angeben. Telefonnummern und Daten können insbesondere für internationale Besucher schwierig sein. Das HTML5-Platzhalterattribut hilft Ihnen hier weiter.
Stellen Sie als Nächstes sicher, dass Sie die erforderlichen Felder markieren (eine übliche Konvention ist die Verwendung eines Sterns *). Die explizite Angabe, dass ein Eingabefeld erforderlich ist oder dass das Feld optional ist, ist ein sicherer Weg.
Schließlich kann es nützlich sein, das aktive Feld hervorzuheben. Dies kann so subtil oder affällig sein, wie Sie möchten.
Unten finden Sie ein Beispiel für ein Kontaktformular aus einem Tutorial von Jim Nielsen. Er verwendet ein rotes Sternchen für die erforderlichen Felder, gibt Formatierungshinweise und hebt das aktive Feld hervor.
Formularvalidierung
Die Inline-Formularüberprüfung kann auch Kopfschmerzen bei Kontaktformularen verhindern. Es ist sehr frustrierend, ein Formular immer wieder erneut senden zu müssen, weil Sie die falschen Daten oder Daten in einem falschen Format eingegeben haben. Wie bereits erwähnt, ist es am besten, den Besuchern zu helfen, indem Sie das erforderliche Format anzeigen (z. B. Datum, Telefonnummer...).
Tasten
Sie können kein Kontaktformular ohne eine Schaltfläch zum Senden haben. Diese Schaltfläche sollte sich am unteren Rand des Formulars befinden. Verwenden Sie "Nachricht senden" als Schaltflächentext anstelle von "Senden", um Kunden daran zu erinnern, was sie tun.
Ein gängiger Standard von gestern ist das Einfügen einer Schaltfläche zum Zurücksetzen oder Löschen von Formularen. Tu es nicht. Die Leute werden versehentlich darauf klicken. Es gibt nichts Schlimmeres, als eine ausführliche Nachricht einzugeben und sie aufgrund einer Schaltfläche zum Zurücksetzen zu verlieren.
Feedback
Der Besucher hat seine Kontaktinformationen eingegeben, eine Nachricht eingegeben und auf die Schaltfläche "Senden" geklickt. Was jetzt? Ist die Nachricht durchgekommen oder nicht?
Versichern Sie Ihren Besuchern, dass die Nachricht erfolgreich gesendet wurde, indem Sie eine Bestätigungsnachricht anzeigen. Eine Bestätigungs-E-Mail ist ebenfalls eine Option.
Der gleiche Hinweis gilt für Fehler. Das Anzeigen eines Fehlers, wenn die Nachricht nicht gesendet werden konnte, ist ein Muss - dies kann viele zukünftige Diskussionen verhindern. Die Fehlermeldung sollte benutzerfreundlich sein. Vermeiden Sie daher die Anzeige überraschender Fehlercodes.
Kontaktseitengestaltung
Es gibt viele technische Anforderungen für die Gestaltung einer besseren Kontaktseite, aber vergessen wir nicht einen der wichtigsten Aspekte: das visuelle Styling.
Wenn Sie ein Kontaktformular verwenden, machen Sie Ihre Felder groß, freundlich und verlockend zum Ausfüllen. Leerzeichen und Polster können einen langen Weg zurücklegen.
Website-Besucher folgen beim Durchsuchen einer Webseite häufig einem F-förmigen Muster. Denken Sie also beim Entwerfen Ihres Layouts daran. Bei Kontaktformularen ist es am besten, alle Felder vertikal zu stapeln, anstatt sie nebeneinander zu platzieren. Dies reduziert die Anzahl der Augenbewegungen, die Besucher ausführen müssen, um das Formular auszufüllen.
Eine Kontaktseite sollte zur visuellen Identität des restlichen Standorts passen. Ein einheitliches Erscheinungsbild ist der Schlüssel. Schauen Sie sich zum Beispiel diese Kontaktseite von "Lass uns irgendwohin reisen" an, die in Form einer Postkarte gestaltet ist.
Und wie bei den meisten Aufgaben im Zusammenhang mit Webdesign; Kreativität zahlt sich aus. Neil Patel gestaltete seine Kontaktseite in Form einer Infografik und verdreifachte seine Kontaktanfragen.
Beispiele für Kontaktformulare
Wenn wir über gute Kontaktformulare sprechen, werfen wir einen Blick auf einige Beispiele zur Inspiration (klicken Sie auf jedes Bild, um die jeweilige Website zu besuchen):
Schlussfolgerung
Stellen Sie vor dem Entwerfen Ihrer Kontaktseite sicher, dass Ihre Besucher sie finden können. Verknüpfen Sie es über Ihre Hauptnavigation oder Fußzeile. Denken Sie daran, dass die meisten Benutzer auf der rechten Seite des Bildschirms nach Kontaktinformationen suchn.
Denken Sie an die Informationen, die enthalten sein müssen. Die Möglichkeit, eine Nachricht entweder über eine E-Mail-Adresse oder ein Kontaktformular zu senden, ist unerlässlich. Eine Adresse und eine Telefonnummer können ebenfalls nützlich sein. Zusätzliche Informationen wie Links zu Social Media-Profilen und Öffnungszeiten können für bestimmte Unternehmen hilfreich sein.
Interaktivität ist ebenfalls wichtig. Verwenden Sie das Attribut mailto für E-Mail-Adressen (verschleiert) und das Attribut tel: für Telefonnummern (sehr nützlich für mobile Besucher). Eine interaktive Karte wie Google Maps kann ebenfalls einebettet werden. Berücksichtigen Sie jedoch die Auswirkungen auf die Leistung.
Die Benutzerfreundlichkeit des Kontaktformulars kann eine Kontaktseite erstellen oder beschädigen. Fragen Sie zunächst nur nach den wichtigsten Informationen. Das Anzeigen des richtigen Formats für Eingabefelder und die Verwendung der Inline-Validierung können viele Kopfschmerzen vermeiden. Vergessen Sie nicht, beim Senden des Formulars eine Erfolgsmeldung anzuzeigen.
Weiterführende Literatur
By
