Kontaktseiten: 7 Best Practices und ein Worst Case

Neue Kon­takte, Rück­fra­gen von Kun­den, Anfra­gen mög­li­cher Geschäfts­part­ner — Eure Kon­takt­seite ist der Dreh– und Angel­punkt in der Kun­den­kom­mu­ni­ka­tion. Lest hier, wie Ihr eine rich­tig gute Kon­takt­seite ent­wi­ckelt, von der Ihr genauso pro­fi­tiert wie Eure Besu­cher.

Stellt Euch vor, Ihr kommt zum ers­ten Mal zu einem neuen Arzt. Ein nicht beschil­der­tes Trep­pen­haus, reno­vie­rungs­be­dürf­tige Pra­xis­räume und eine gestresste Emp­fangs­mit­ar­bei­te­rin, die Euch zwi­schen zwei Tele­fo­na­ten einen Fra­ge­bo­gen in die Hand drückt. Möch­tet Ihr da nicht am liebs­ten flüch­ten?

Viele Kon­takt­sei­ten ähneln die­ser Arzt­pra­xis: unüber­sicht­lich, unmo­dern, unbe­quem und vol­ler For­mu­lar­fel­der. Was Nut­zer sich aber wün­schen, wenn sie eine Kon­takt­seite auf­ru­fen, ist ein ange­neh­mer Gesprächs­part­ner, der sie zügig zum Ziel bringt. Klappt das nicht, ver­dirbt das die Atmo­sphäre oder sorgt sogar für einen kom­plet­ten Abbruch. Keine Kon­ver­sion. Genau wie auf der Kon­takt­seite aus der Hölle.

Für Eilige: springt direkt zu den 7 Best Prac­tices

Die Kon­takt­seite aus der Hölle

Auf der Suche nach fri­schen Bei­spie­len für die­sen Bei­trag habe ich wild einige Stich­wör­ter bei Google ein­ge­ge­ben (“Steu­er­be­ra­ter Wetz­lar”, “Vor­werk Hüt­ten­berg”) und mir die Kon­takt­sei­ten ange­se­hen, die da so kamen. Es dau­erte nur ein paar Minu­ten und ich stieß auf das Bei­spiel von Deine Tier­welt, wo so ziem­lich alles schief geht, was schief­ge­hen kann. In der Summe strahlt Deine Tier­welt dann nur noch eine Nach­richt aus: “Geh’ bloß weg und ver­schone uns mit Dei­ner Nach­richt”.

Problem 1: Bei einer gängigen Fenstergröße ist keine Kontaktmöglichkeit erkennbar.
Pro­blem 1: Bei einer gän­gi­gen Fens­ter­größe ist kein Link zur Kon­takt­seite erkenn­bar.
Problem 2: Nur Besucher mit guter Sehkraft werden den Kontakt-Link in der Fußzeile finden. Er ersäuft optisch in vielen anderen Links.
Pro­blem 2: Nur Besu­cher mit guter Seh­kraft wer­den den Link zur Kon­takt­seite in der Fuß­zeile fin­den. Er ersäuft optisch in vie­len ande­ren Links.
Problem 3: Noch immer darf ich meine Nachricht nicht loswerden. Erst mal soll ich Deine Tierwelt einen Teil der Arbeit abnehmen, die Kommunikation nun mal verursacht.
Pro­blem 3: Noch immer darf ich meine Nach­richt nicht los­wer­den. Erst mal soll ich mein Inter­esse ein­ord­nen, damit Deine Tier­welt weni­ger Arbeit hat.
Problem 4: Gibts nicht gibts nicht. Nachdem ich die Frage beantwortet habe legt sich ein PopUp über die Seite. Werbung im Kontakt-Prozess. WTF?!
Pro­blem 4: Nach­dem ich die Frage beant­wor­tet habe legt sich ein PopUp über die Seite. Wer­bung im Kon­takt­pro­zess. WTF?!
Problem 5: Weiter geht das Quiz. Die Zahl der Fragen, die ich idealerweise beantworten soll, steht in keinem Verhältnis zum Nachrichtenfeld, das etwa die Größe einer Briefmarke hat. Und dann sind da noch die mediokre Überschrift und die hanebüchen platzierten Knöpfe.
Pro­blem 5: Wei­ter geht das Quiz. Die Zahl der Fra­gen, die ich idea­ler­weise beant­wor­ten soll, steht in kei­nem Ver­hält­nis zum Nach­rich­ten­feld, das etwa die Größe einer Brief­marke hat. Und dann sind da noch die medio­kre Über­schrift der Kon­takt­seite und die hane­bü­chen plat­zier­ten Knöpfe.

So ent­ste­hen schlechte Kon­takt­sei­ten

Ich weiß aus der Pra­xis, wie schlechte Kon­takt­sei­ten ent­ste­hen. Deine Tier­welt dürfte in Anfra­gen ertrin­ken, wie so viele besu­cher­starke Web­sites. Eine gefähr­li­che “Wir müs­sen uns gegen die Nach­rich­ten verteidigen”-Stimmung ent­steht. Am Ende wirkt auch ein Unter­neh­men mit lau­ter freund­li­chen Mit­ar­bei­tern wie ein kon­takt­scheuer Raff­zahn, den Kun­den nur stö­ren. Die Lösung liegt in der Opti­mie­rung des Antwort-​​Prozesses, zum Bei­spiel mit stich­wort­ba­sier­ter Zuord­nung der Anfra­gen, Mus­ter­tex­ten etc. Das ist bes­ser für Besu­cher und bes­ser für das Image.

Vor allem in klei­ne­ren und mitt­le­ren Unter­neh­men lie­gen die Ursa­chen wo anders. Da würde ich als ers­tes das feh­lende Gespür für stil­si­chere Online-​​Kommunikation nen­nen. Häu­fig ist es aber auch schlichte Gedan­ken­lo­sig­keit oder bei­des zusam­men. Das fol­gende Bei­spiel von Nicole Pie­tags Online-​​Shop, über das ich eben­falls zufäl­lig stol­perte, steht stell­ver­tre­tend für tau­sende ver­gleich­bar schlech­ter Online-​​Erlebnisse.

Nicole Pietags Kontaktseite verschreckt Besucher: zu viele Felder insgesamt, zu viele Pflichtfelder, ungünstig ausgerichtete Feld-Beschriftungen, lieblose Gestaltung, keine Informationen zu alternativen Kontaktwegen usw.
Nicole Pie­tags Kon­takt­seite ver­schreckt Besu­cher: zu viele Fel­der ins­ge­samt, zu viele Pflicht­fel­der, ungüns­tig aus­ge­rich­tete Feld-​​Beschriftungen, lieb­lose Gestal­tung, keine Infor­ma­tio­nen zu alter­na­ti­ven Kon­takt­we­gen usw.

7 Best Prac­tices für Kon­takt­sei­ten

Bleibt die Frage, wie die “opti­male” Kon­takt­seite denn nun aus­sieht. Logisch, dass es da kein Patent­re­zept gibt, aber sie­ben Best Prac­tices, die sich schon häu­fig bewährt haben.

1. Kon­takt­for­mu­lar inte­grie­ren

Für ein Kon­takt­for­mu­lar spre­chen viele Gründe. Ihr könnt damit

  • struk­tu­riert Infor­ma­tio­nen erfra­gen
  • die Ergeb­nisse per Mail ver­sen­den
  • die Ergeb­nisse in einer Daten­bank spei­chern
  • die Nut­zung per Web-​​Analytics ver­fol­gen
  • auf der Danke-​​Seite auf Leis­tun­gen, Social Media etc. auf­merk­sam machen

Das Kon­takt­for­mu­lar funk­tio­niert zudem immer, auch wenn Euer Besu­cher gerade nicht an sei­nem eige­nen PC sitzt und des­halb über kei­nen kor­rekt ein­ge­rich­te­ten E-​​Mail-​​Client ver­fügt.

Natür­lich gel­ten auch für ein Kon­takt­for­mu­lar Regeln. Dazu zäh­len ins­be­son­dere

  • die sofor­tige Sicht­bar­keit ohne scrol­len
  • die Beschrän­kung auf eine Min­dest­zahl an Fel­dern und Pflicht­fel­dern
  • eine über­sicht­li­che Gestal­tung (mit aus­rei­chend gro­ßem Nach­rich­ten­feld!)
  • Hilfe-​​Texte und aus­sa­ge­kräf­tige Feh­ler­mel­dun­gen

Krea­tiv dürft Ihr trotz­dem sein, wie das fol­gende Bei­spiel zeigt.

Wopata hat eine Art waagerecht liegendes Thermometer in Ihr Formular integriert. Darüber können Besucher ausdrücken, wie eilig sie es haben. Ein simples, spielerisches Element, das dem Formular Eigenständigkeit verschafft und den Erinnerungswert erhöht.
Wopata hat eine Art waa­ge­recht lie­gen­des Ther­mo­me­ter in Ihr For­mu­lar inte­griert. Dar­über kön­nen Besu­cher aus­drü­cken, wie eilig sie es haben. Ein sim­ples, spie­le­ri­sches Ele­ment, das dem For­mu­lar Eigen­stän­dig­keit ver­schafft und den Erin­ne­rungs­wert erhöht.

2. Rah­men­be­din­gun­gen erklä­ren

Ihr könnt dem Besu­cher Euer Kon­takt­for­mu­lar ein­fach um die Ohren hauen. Das hat etwa so viel Charme wie Post vom Finanz­amt. Ich habe sehr gute Erfah­run­gen mit einer text­li­chen Ein­lei­tung gemacht. Dort sagen wir dem Besu­cher, wer seine Nach­richt bei uns emp­fängt, mit wel­cher Ant­wort­zeit zu rech­nen ist und wie er sei­nen Ansprech­part­ner tele­fo­nisch errei­chen kann. Dabei geht es mir nicht nur darum, einen freund­li­chen Ein­stieg zu schaf­fen, son­dern auch um ganz sim­ple, prak­ti­sche Effekte. Wer weiß, dass seine Nach­richt womög­lich erst am nächs­ten Arbeits­tag beant­wor­tet wird, der ruft in eili­ge­ren Fäl­len an.

Der einleitende Text schafft die richtige Atmosphäre für die folgende Kommunikation. Insgesamt ist mir das Formular aber optisch zu nüchtern.
Der ein­lei­tende Text schafft die rich­tige Atmo­sphäre für die fol­gende Kom­mu­ni­ka­tion. Ins­ge­samt ist mir das For­mu­lar aber optisch zu nüch­tern.

3. Voll­stän­dige Kon­takt­da­ten zei­gen

Unter “Kon­takt” kann jeder etwas ande­res ver­ste­hen. Des­halb soll­tet Ihr neben dem Kon­takt­for­mu­lar auch die übri­gen Mög­lich­kei­ten auf Eurer Kon­takt­seite ver­öf­fent­li­chen:

  • Tele­fon
  • E-​​Mail
  • Adres­sen der Social-​​Media-​​Seiten
  • Post­an­schrift

4. Live-​​Chat anbie­ten

Plat­ziert einen Live-​​Chat auf Eurer Kon­takt­seite. Dar­über kön­nen Eure Besu­cher dann in Echt­zeit mit Euch kom­mu­ni­zie­ren, wenn das Tele­fo­nie­ren nicht mög­lich ist, zum Bei­spiel vom Arbeits­platz aus, in der Bahn oder wäh­rend ein Film läuft. Ihr erreicht sie, wäh­rend sie eine wich­tige Ent­schei­dung tref­fen. So belegte die Forrester-​​Studie “Making Proac­tive Chat Work” schon 2010: der Live-​​Chat ist für 44 Pro­zent der Online-​​Besteller eine der wich­tigs­ten Funk­tio­nen einer Web­site.

Schade, dass die Scheu vor dem Chat gerade in klei­nen Unter­neh­men immer noch sehr aus­ge­prägt ist. Das häu­figste Gegen­ar­gu­ment: “Wie sol­len wir das (auch noch) leis­ten?”. Dabei bie­ten zeit­ge­mäße Dienste, zum Bei­spiel Sna­p­En­gage, prak­ti­sche Funk­tio­nen, die den Chat sehr hand­lich machen. Erst wenn sich ein Mit­ar­bei­ter in die Chat-​​Software ein­loggt, erscheint der Chat auf der Web­site. Ein Mit­ar­bei­ter kann gleich­zei­tig meh­rere Chats beant­wor­ten und ein­zelne Chats bei kom­ple­xe­ren Anfra­gen an einen Kol­le­gen durch­rei­chen. Im ein­fachs­ten Fall ist eine Chat-​​Software inner­halb einer Stunde gemie­tet, kon­fi­gu­riert und in die Web­site inte­griert.

Mehr über Live-​​Chats lest Ihr in mei­nem Bei­trag Live-​​Chats auf Web­sites: 7 Fak­ten und eine Zugabe.

Live-Chats ermöglichen Kunden die Kontaktaufnahme per Chat und liefern so einen wichtigen Beitrag zum Gesamterfolg der Website.
Live-​​Chats ermög­li­chen Kun­den die Kon­takt­auf­nahme per Chat und lie­fern so einen wich­ti­gen Bei­trag zum Gesamt­er­folg der Web­site.

5. iMes­sa­ges, Whats­App und Skype anbie­ten

Denkt bei Eurer Kon­takt­seite unbe­dingt auch an neue, für Eure Besu­cher rele­vante Kom­mu­ni­ka­ti­ons­mög­lich­kei­ten. Weist dem ent­spre­chend zum Bei­spiel auf Eure WhatsApp-​​Nummer, Eure iMes­sa­ges– bezie­hungs­weise Google-​​Hangouts-​​Adressen hin. Ihr habt hier die Mög­lich­keit, bes­ser zu sein als Eure Mit­be­wer­ber, die von den neuen Mög­lich­kei­ten noch spär­lich Gebrauch machen.

Am Rande: Es gibt wenige Unter­neh­men, die den Kon­takt per Skype anbie­ten. Dabei lässt sich hier sogar mit Bild tele­fo­nie­ren und so ein noch per­sön­li­che­rer Kon­takt her­stel­len.

6. Nach­rich­ten ver­schlüs­selt über­tra­gen

Besu­cher tra­gen oft erstaun­lich pri­vate Infor­ma­tio­nen in Kon­takt­for­mu­lare ein. Respek­tiert das und ver­schlüs­selt die Über­tra­gung der Daten mit­tels einer https-​​Verbindung. Wenn Ihr die Nach­rich­ten abholt (per E-​​Mail, durch Zugriff auf die Nachrichten-​​Datenbank o.ä.), dann muss auch diese Ver­bin­dung ver­schlüs­selt sein, damit das Sinn ergibt.

7. Auf Capt­chas ver­zich­ten

Bekommt Ihr Spam? Bestimmt. Was machen dann die paar zusätz­li­chen Spam-​​Mails, die per Kon­takt­for­mu­lar ein­tru­deln? Genau – nichts! Also lasst den Blöd­sinn mit den Capt­chas! Diese Buchstaben-​​/​Zahlenkombinationen sind näm­lich nicht nur für Spam­mer schwer les­bar, son­dern auch für Eure Besu­cher. Es ist bes­ser, ein paar Spam-​​Nachrichten weg­zu­kli­cken, als auch nur eine ein­zige echte Nach­richt nicht zu erhal­ten, weil der Nut­zer das Capt­cha nicht ent­zif­fern konnte.

Wenn Ihr wirk­lich von Spam geflu­tet wer­det, dann macht fol­gen­des:

  • Lasst Euren Web-​​Entwickler ein ver­steck­tes Formular-​​Feld vom Typ E-​​Mail in Euer For­mu­lar ein­bauen. Nach­rich­ten, bei denen das ver­steckte Feld aus­ge­füllt wurde, stam­men von einem Spam­mer. So wer­det Ihr den meis­ten Unfug los.
  • Stellt Euren Besu­chern eine sim­ple Frage, um sie als Men­schen zu iden­ti­fi­zie­ren. Eine ein­fa­che Rechen­auf­gabe, “Wel­cher Wochen­tag ist über­mor­gen” o.ä. Dadurch ver­län­gert sich Euer For­mu­lar zwar auch, aber wenigs­tens kann jeder eine sol­che Frage beant­wor­ten.

Pra­xis­bei­spiele für Kon­takt­sei­ten und Kon­takt­for­mu­lare

Bei Taquiri nutzen wir gerne eine Variante dieses Kontaktformulars. Wählt der Besucher zwischen E-Mail und Telefon, verändert sich das zugehörige Eingabefeld.
Bei Taquiri nut­zen wir gerne eine Vari­ante die­ses Kon­takt­for­mu­lars. Wählt der Besu­cher zwi­schen E-​​Mail und Tele­fon, ver­än­dert sich das zuge­hö­rige Ein­ga­be­feld.
Für Onlinemieterservice.de habe ich dieses Formular konzipiert. Der Mieter kann sich durch Eingabe seiner Adresse identifizieren, wenn er seine Vertragsnummer nicht zur Hand hat. Achtet auf die Nachricht, bevor Ihr weiterlest.
Für Onlin​emie​ter​ser​vice​.de habe ich diese Kon­takt­seite kon­zi­piert. Der Mie­ter kann sich durch Ein­gabe sei­ner Adresse iden­ti­fi­zie­ren, wenn er seine Ver­trags­num­mer nicht zur Hand hat. Ach­tet auf die Nach­richt, bevor Ihr wei­ter­lest.
Beim Klick auf Senden wird die Nachricht mit einem Fragen-/Antworten-Katalog abgeglichen. Ist der Onlinemieterservice der Meinung, direkt weiterhelfen zu können, bietet er dem Besucher diese Zwischenseite an.
Beim Klick auf “Sen­den” wird die Nach­richt mit einem Fragen-​​/​Antworten-​​Katalog abge­gli­chen. Ist der Onlin­emie­ter­ser­vice der Mei­nung, direkt wei­ter­hel­fen zu kön­nen, bie­tet er dem Besu­cher diese Zwi­schen­seite an.
Ein Foto auf der Kontaktseite kann die Rücklaufquote nach meiner Erfahrung enorm erhöhen. Auch die übrigen Infos sind komplett vorhanden und sofort sichtbar.
Ein Foto auf der Kon­takt­seite kann die Rück­lauf­quote nach mei­ner Erfah­rung enorm erhö­hen. Auch die übri­gen Infos sind kom­plett vor­han­den und sofort sicht­bar.
Gym-Techn.de macht auf der Kontaktseite vieles richtig. Kontaktdaten bis hin zur Mobilfunknummer und ein Kontaktformular, das bei typischer Fenstergröße sichtbar ist. Der Kartenausschnitt erlaubt aber keine regionale Einordnung (Ah, bei Gießen) und benötigt einen anderen Zoom-Faktor. Auch die Schriftgröße ist zu gering.
Gym​-tech​.de macht auf der Kon­takt­seite vie­les rich­tig. Kon­takt­da­ten bis hin zur Mobil­funk­num­mer und ein Kon­takt­for­mu­lar, das bei typi­scher Fens­ter­größe sicht­bar ist. Der Kar­ten­aus­schnitt erlaubt aber keine regio­nale Ein­ord­nung (“Ah, bei Gie­ßen”) und benö­tigt einen ande­ren Zoom-​​Faktor. Auch die Schrift­größe ist zu gering.
Die Villa zur schönen Aussicht begeht einen klassischen Fehler. Das Formular dient zugleich als Kontaktformular wie auch zur Buchungsanfrage. Dadurch ist es für einfache Nachrichten zu komplex. Entwickelt für jede Aufgabe ein eigenes Formular.
Die Villa zur schö­nen Aus­sicht begeht einen klas­si­schen Feh­ler. Das For­mu­lar dient zugleich als Kon­takt­for­mu­lar wie auch zur Buchungs­an­frage. Dadurch ist es für ein­fa­che Nach­rich­ten zu kom­plex. Ent­wi­ckelt für jede Auf­gabe ein eige­nes For­mu­lar.

 

Bei­trags­bild: © Got­Credit

Schreibe einen Kom­men­tar

Deine E-​​Mail-​​Adresse wird nicht ver­öf­fent­licht. Erfor­der­li­che Fel­der sind mit * mar­kiert.