Share
Een goede contactpagina is essentieel voor het onderhouden van relaties met uw bezoekers. Of we het nu hebben over eCommerce, tijdschriften, persoonlijke websites of online diensten, gebruikers zullen meestal een contactpagina opzoeken als hun eerste communicatiemiddel met u. Vreemd genoeg verwaarlozen veel webontwerpers de bescheiden contactpagina, zelfs gezien het een van de minst belangrijke aspecten van een website is. Laten we dat goed maken.
Een contactpagina wordt vaak over het hoofd gezien. Hoe vaak bent u op een website geweest, had u contact willen opnemen om te klagen over een product of dienst of een vraag te stellen? En hoe vaak heb je worstelen met een contactformulier?
Een goede contactpagina kan ten goede komen aan elk type bedrijf. Het kan de klanttevredenheid verbeteren door gebruikers te helpen met hun problemen. Het kan ook een bedrijf helpen zijn producten en diensten te verbeteren door waardevolle feedback te geven.
Andere kanalen kunnen worden beperkt als het gaat om gebruikersfeedback. Televisie, radio, tijdschriften, kranten ... allemaal een vorm van eenrichtingsverkeer. Online communicatie moet een tweerichtingsverkeer zijn; een dialoog tussen een bedrijf en een bezoeker. Beide partijen kunnen hiervan profiteren, en dat is precies waarom een goede contactpagina essentieel is.
Eerste stap eerst: de locatie van uw contactgegevens. De beste contactpagina ter wereld hebben is niet goed als bezoekers deze niet kunnen vinden. Het bijhouden van enkele ontwerpconventies kan uw bezoekers helpen.
Over het algemeen kan contactinformatie op twee plaatsen worden gevonden:
Primaire navigatie is een ideale locatie voor een koppeling naar een contactpagina. Bezoekers zoeken meestal naar contactinformatie aan de rechterkant van een pagina omdat deze wordt gezien als een element van ondergeschikt belang. Om deze reden ziet u gewoonlijk de link naar de contactpagina als een van de laatste elementen binnen de navigatie van de site.
Mogelijk ziet u ook een kleinere subnavigatie in de rechterbovenhoek van het scherm. Dit is ook een waardevolle positie voor de contactpagina. Zeggen dat, het plaatsen van een link naar de contactpagina in een drop-down menu kan het best worden vermeden, omdat dit gemakkelijk over het hoofd zou kunnen worden gezien.
De voettekst is ook een populaire locatie voor contactinformatie. Het kan een link bevatten naar de contactpagina:
of de belangrijkste contactinformatie zelf:
Anticiperen op de bezoekersstroom naar een contactpagina is lastig, dus de plaatsing van een link op minstens twee locaties, zoals vermeld, dekt je vrij goed.
Nu we zeker weten dat bezoekers hun weg naar de contactpagina kunnen vinden, is het tijd om na te denken over de daadwerkelijke inhoud. Laten we beginnen met de basis en een kijkje nemen naar informatie die aanwezig zou moeten zijn.
Een e-mailadres is de gemakkelijkste manier om online contact op te nemen met een bedrijf. U kunt ook een contactformulier gebruiken dat een e-mail verzendt. Via een contactformulier heeft u meer controle over de inhoud (verplichte velden) en het kan spam voorkomen. Meer informatie over contactformulieren verderop in dit artikel.
Lea Verou toont haar e-mailadres in platte tekst, maar gebruikt een sluwe methode om te voorkomen dat spambots hem oppikken ... Bedrijven met een fysieke winkel moeten niet vergeten hun adres te vermelden. Als u meerdere winkels heeft, kunt u het best een afzonderlijke pagina voor elke locatie maken. Vul deze pagina met winkelspecifieke contactgegevens, openingstijden, routebeschrijvingen, etc. Dit is niet alleen handig voor bezoekers, maar kan uw site ook helpen bij lokale zoekopdrachten.
Een telefoonnummer weergeven geeft een gevoel van vertrouwen. Het wordt vaak gezien als een teken dat dit een echt bedrijf is, wat erg handig kan zijn voor online winkels.
Veel websites beginnen socialemediaknoppen toe te voegen aan hun contactpagina. Hoewel dit waarschijnlijk niet elke site ten goede komt, kan het voor sommige bezoekers een echte toegevoegde waarde zijn. Vooral omdat steeds meer bedrijven klantenondersteuning aanbieden via Twitter (soms zelfs 24/7).
Envato heeft een zeer actief Twitter-ondersteuningskanaal @envato_support Er is geen "one size fits all" -oplossing voor een goede contactpagina. Elke website of bedrijf vereist bepaalde elementen die mogelijk overbodig zijn op andere sites.
Er is veel extra informatie of functies die handig kunnen zijn op een contactpagina. Voor fysieke winkels kan het een goed idee zijn om bijvoorbeeld de openingstijden te vermelden. Grote bedrijven kunnen linken naar hun Live Chat-functie en eCommerce-sites kunnen het vertrouwen van gebruikers verstarren door hun btw-nummer te vermelden.
Het bruikbaar maken van de informatie op uw contactpagina kan veel bezoekersfrustratie voorkomen.
Vermeld uw contactgegevens als HTML tekst in plaats van afbeeldingen. Dit klinkt misschien als een goed idee, maar er zijn tal van websites die andere technieken gebruiken. HTML-tekst kan worden gekopieerd en geplakt, waardoor het voor de bezoeker gemakkelijker wordt om uw contactgegevens op te slaan.
Een e-mailadres zou het moeten gebruiken mailto link. Hiermee kunnen bezoekers die erop klikken een e-mail verzenden zonder eerst het bestemmings-e-mailadres te hoeven kopiëren en een e-mailclient te openen. Eén probleem kan echter met deze techniek ontstaan, in de vorm van spamrobots die e-mailadressen verzamelen die zijn geassocieerd met een mailto: link. Daarom kunt u overwegen om eerst e-mailadressen te versluieren met behulp van een service zoals mailtoencoder.com.
Op een gerelateerde opmerking: telefoonnummers moet ook interactief zijn. Vorig jaar hebben we een korte tip gegeven over hoe je een telefoonnummer klikbaar kunt maken. Dankzij een klein stukje code kunnen smartphones telefoonnummers herkennen, waardoor ze opvraagbaar zijn. Dit is echt handig voor mobiele gebruikers.
Bedrijven die sterk afhankelijk zijn van hun fysieke winkels kunnen veel baat hebben bij een interactieve kaart, waardoor gebruikers snel hun weg naar het verkooppunt kunnen vinden. Het weergeven van het adres van een winkel is geweldig, maar het toevoegen van een interactieve kaart is beter.
Dankzij Google Maps was het nog nooit zo eenvoudig om deze handige functie in te sluiten. Voer eenvoudig uw adres in Google Maps in en klik op het koppelingspictogram in de zijbalk. Daar vind je de insluitcode.
Wist je dat je je kaart kunt aanpassen? U kunt de kaartkleuren opmaken, aangepaste kaartmarkeringen toevoegen en een legenda maken. U vindt meer informatie over developers.google.com. U kunt ook andere diensten overwegen, zoals de nogal smakelijke Mapbox.
Als bezoeker herkent u onmiddellijk een adres op een contactpagina. Zoekmachines hebben echter een beetje meer hulp nodig bij het herkennen van de verschillende elementen.
We kunnen dit oplossen door gestructureerde gegevens te gebruiken. Gestructureerde gegevens zijn een vorm van HTML-markup waarmee zoekmachines meer informatie krijgen over de onderliggende betekenis van de inhoud.
Hoe werkt het? Laten we zeggen dat we een webontwerpbureau hebben genaamd 'Fine Design' dat zich bevindt op 3102 Highway 98, Mexico Beach, FL. Met Microdata kunnen zoekmachines dit adres beter begrijpen. De HTML-code ziet er ongeveer zo uit:
Fijn ontwerp
3102 Highway 98 Mexico-strand, FL
Misschien wil je nog een stap verder gaan en dit blok in een element. Het adreselement mag alleen worden gebruikt op adressen die relevant zijn voor de context van de site, niet alleen maar een oud adres dat u binnen uw inhoud kunt hebben. Het gebruik van dit element heeft jarenlang ontwikkelaarshoofdpijn veroorzaakt, dus als u niet zeker bent, hoeft u zich daar niet al te veel zorgen over te maken!
Dat is het voor het bedrijfsadres. We kunnen echter ook microdata gebruiken voor het telefoonnummer en e-mailadres:
Tel: 850-648-4200 E-mail: [email protected]
Dankzij deze markup weten zoekmachines dat dit het adres, telefoonnummer en e-mailadres van het bedrijf 'Fine Design' is. Het is impliciete informatie, wat betekent dat bezoekers het niet kunnen zien, maar het zijn zeer nuttige zoekmachines.
U zou ook kunnen overwegen om de hCard microformat waarmee gemakkelijk contactgegevens op verschillende platforms kunnen worden opgeslagen. Lees meer over microformats op html5doctor.com.
De meeste websites gebruiken een contactformulier op hun contactpagina. Sommige contactformulieren zijn echter onnodig ingewikkeld en gebruikersonvriendelijk.
Zo eenvoudig als een contactformulier eruit zou kunnen zien, het is eigenlijk een combinatie van verschillende cruciale componenten. Elk van deze componenten moet samenwerken om de beste gebruikerservaring te bieden.
In invoervelden, zoals tekstvelden, keuzerondjes, selectievakjes, enz., Kan de gebruiker de nodige informatie invullen.
Bezoekers van een site zullen meer geneigd zijn om in te vullen kortere vormen omdat ze minder inspanning vergen. Het aantal invoervelden is een evenwichtsoefening tussen gebruikerservaring en bedrijfsbehoeften. Hubspot analyseerde meer dan 40.000 formulieren en keek naar het effect van een toename van het aantal invoervelden. De conclusie van hun studie is dat je zo min mogelijk formuliervelden moet gebruiken en wees vooral voorzichtig met meer geavanceerde tekstgebieden en selectievakjes.
Help uw bezoekers om deze velden in te vullen door de juiste formaat. Telefoonnummers en datums kunnen lastig zijn, vooral voor internationale bezoekers. Het kenmerk HTML5-tijdelijke aanduiding helpt u hier.
Zorg er vervolgens voor dat je markeer vereiste velden (een gebruikelijke afspraak is om een asterisk * te gebruiken). Expliciet aangeven dat een invoerveld is vereist of dat het veld optioneel is, is een veilige manier om te gaan.
Eindelijk kan het nuttig zijn om markeer het actieve veld. Dit kan zo subtiel of zo opvallend zijn als u wilt.
Hieronder is een voorbeeld van een contactformulier uit een tutorial van Jim Nielsen. Hij gebruikt een rood sterretje voor verplichte velden, geeft een beetje formatteringsadvies en benadrukt het actieve veld.
Inline formuliervalidatie kan ook hoofdpijn in sommige contactvormen voorkomen. Het is erg frustrerend om een formulier steeds opnieuw opnieuw in te dienen omdat je de verkeerde gegevens of gegevens hebt ingevoerd in een verkeerd formaat. Zoals we eerder hebben vermeld, is het het beste om bezoekers te helpen door het vereiste formaat weer te geven (bijvoorbeeld datums, telefoonnummer ...).
U kunt geen contactformulier hebben zonder een verzendknop. Deze knop moet onderaan het formulier staan. Gebruik 'verzend bericht' als een knoptekst in plaats van 'verzenden' om klanten eraan te herinneren wat ze doen.
Een veelgebruikte standaard van weleer is om een 'reset'- of' clear form'-knop op te nemen. Niet doen. Mensen zullen klik er per ongeluk op. Er is niets erger dan een uitgebreid bericht te typen en het te verliezen vanwege een 'reset'-knop.
De bezoeker heeft zijn contactgegevens ingevuld, een bericht getypt en op de knop 'Verzenden' gedrukt. Wat nu? Is het bericht doorgekomen of niet?
Stel uw bezoekers gerust dat het bericht met succes is verzonden door een bevestigingsbericht weer te geven. Een bevestigingsmail is ook een optie.
Hetzelfde advies is van toepassing op fouten. Het weergeven van een fout wanneer het bericht niet kan worden verzonden, is een must. Het kan veel toekomstige discussies voorkomen. De foutmelding moet gebruiksvriendelijk zijn, dus vermijd het weergeven van schokkende foutcodes.
Er zijn veel technische vereisten voor het ontwerpen van een betere contactpagina, maar laten we een van de belangrijkste aspecten niet vergeten: visuele vormgeving.
Als u een contactformulier gebruikt, moet u uw velden groot, vriendelijk en uitnodigend maken om in te vullen. Witte ruimte en opvulling kunnen een lange weg banen.
Websitebezoekers volgen vaak een F-vormig patroon wanneer ze op een webpagina bladeren, dus houd hier rekening mee wanneer u uw lay-out ontwerpt. Voor contactformulieren is het het beste om alle velden verticaal te stapelen in plaats van ze naast elkaar te plaatsen. Dit vermindert het aantal oogbewegingen dat bezoekers moeten maken om het formulier in te vullen.
Een contactpagina moet passen bij de visuele identiteit van de rest van de site. Een consistent uiterlijk is essentieel. Kijk eens naar deze contactpagina van 'Let's Travel Somewhere', bijvoorbeeld in de vorm van een ansichtkaart.
En zoals met de meeste web-design gerelateerde taken; creativiteit loont. Neil Patel ontwierp zijn contactpagina in de vorm van een infographic en verdrievoudigde zijn contactaanvragen.
Praten over goede contactformulieren, laten we een paar voorbeelden bekijken voor inspiratie (klik op elke afbeelding om de respectieve website te bezoeken):
Voordat u uw contactpagina ontwerpt, moet u ervoor zorgen dat uw bezoekers deze kunnen vinden. Link ernaar vanuit uw hoofdnavigatie of voettekst. Vergeet niet dat de meeste mensen contactinformatie zoeken aan de rechterkant van het scherm.
Denk aan de informatie die moet worden opgenomen. De mogelijkheid om een bericht te verzenden, hetzij via een e-mailadres of via een contactformulier, is essentieel. Een adres en telefoonnummer kunnen ook nuttig zijn. Aanvullende informatie zoals links naar profielen van sociale media en openingstijden kunnen nuttig zijn voor bepaalde bedrijven.
Interactiviteit is ook belangrijk. Gebruik de mailto kenmerk voor e-mailadressen (op een versluierde manier) en de tel: kenmerk voor telefoonnummers (erg handig voor mobiele bezoekers). Een interactieve kaart zoals Google Maps kan ook worden ingesloten, maar houd rekening met de gevolgen voor de uitvoering hiervan.
De bruikbaarheid van contactformulieren kan een contactpagina maken of verbroken worden. Begin met alleen om de meest essentiële informatie te vragen. Het tonen van het juiste formaat voor invoervelden en het gebruik van inline-validatie kan veel hoofdpijn voorkomen. Vergeet niet om een succesbericht weer te geven wanneer het formulier is verzonden.
Accentsconagua