Proiectarea unei pagini de contact mai bune

O bună pagină de contact este esențială pentru menținerea relațiilor cu vizitatorii dvs. Fie că vorbim de eCommerce, reviste, site-uri personale, servicii online, utilizatorii vor căuta de obicei o pagină de contact ca prim mijloc de comunicare cu dvs. Destul de ciudat, mulți designeri web neglijează pagina de contact umilă, considerând chiar unul dintre aspectele cele mai puțin importante ale unui site web. Să punem acest drept.


Importanța unei bune pagini de contact

O pagină de contact este adesea ignorată. De câte ori ați vizitat un site web, doriți să vă contactați pentru a vă plânge de un produs sau serviciu sau pentru a pune o întrebare? Și cât de des te-ai luptat cu o formă de contact?

O bună pagină de contact poate beneficia de orice tip de afacere. Acesta poate îmbunătăți satisfacția clienților ajutând utilizatorii cu problemele lor. De asemenea, poate ajuta o afacere să-și îmbunătățească produsele și serviciile oferind o cale pentru feedback-ul valoros.

Alte canale pot fi limitate când vine vorba de feedback-ul utilizatorului. Televiziunea, radioul, revistele, ziarele ... toate sunt o formă de comunicare unidirecțională. Comunicarea online ar trebui să fie o stradă cu două sensuri; un dialog între o afacere și un vizitator. Ambele părți pot beneficia de aceasta, care este motivul pentru care o pagină de contact bună este esențială.


Destinație de plasare

Mai întâi primul pas: locația informațiilor de contact. Având cea mai bună pagină de contact din lume nu este bună dacă vizitatorii nu o pot găsi. Menținerea în minte a unor convenții de proiectare vă poate ajuta pe vizitatori.

În general, informațiile de contact pot fi găsite în două locuri:

Navigare primară este o locație ideală pentru un link de pagină de contact. Vizitatorii caută, de obicei, informații de contact în partea dreaptă a paginii deoarece sunt văzute ca un element de importanță secundară. Din acest motiv, veți vedea de obicei legătura paginii de contact ca unul dintre ultimele elemente din navigarea pe site.

De asemenea, este posibil să vedeți o sub-navigare mai mică în colțul din dreapta sus al ecranului. Aceasta este, de asemenea, o poziție valoroasă pentru pagina de contact. Spunând că plasarea unui link către pagina de contact dintr-un meniu derulant ar putea fi evitată, deoarece ar putea fi ușor trecută cu vederea.

Footerul este, de asemenea, o locație populară pentru informații de contact. Poate deține fie un link către pagina de contact:


Apple pune un link către pagina lor de contact în subsolul paginii

sau cele mai importante informații de contact în sine:


Hubspot afișează adresa și numărul de telefon în subsol

Anticiparea fluxului de vizitatori către o pagină de contact este dificilă, așadar plasarea unei legături în cel puțin două locații, așa cum se menționează, vă acoperă destul de bine.


Contactați pagina Essentials

Acum, că suntem încrezători că vizitatorii își pot găsi drumul către pagina de contact, este timpul să ne gândim la conținutul real. Să începem cu elementele de bază și să aruncăm o privire asupra informațiilor care ar trebui să fie prezente.

Adresă de e-mail / Formular de contact

O adresă de e-mail este cea mai ușoară modalitate de a contacta o afacere online. Alternativ, puteți utiliza un formular de contact care trimite un e-mail. Prin intermediul unui formular de contact aveți mai mult control asupra conținutului (câmpuri obligatorii) și poate preveni spamul. Mai multe despre formularele de contact mai târziu în acest articol.

Lea Verou afișează adresa de e-mail în text simplu, dar folosește o metodă șiretlică pentru a împiedica spambotul să o ia ...

Adresa

Întreprinderile cu un magazin de cărămidă și mortar nu ar trebui să uite să menționeze adresa lor. Dacă aveți mai multe magazine, este mai bine să creați o pagină separată pentru fiecare locație. Completați această pagină cu informații de contact specifice magazinului, orar de funcționare, indicații de conducere etc. Acest lucru nu este util numai pentru vizitatori, ci poate ajuta și site-ul dvs. pentru interogările de căutare locale.

Telefon

Afișarea unui număr de telefon transmite un sentiment de încredere. Este adesea văzut ca un semn că aceasta este o companie reală, care poate fi foarte utilă pentru magazinele online.

Social Media

O mulțime de site-uri web încep să adauge butoanele social media pe pagina lor de contact. Deși acest lucru probabil că nu va aduce beneficii fiecărui site, pentru unii vizitatori acesta poate fi o valoare adăugată reală. Mai ales că tot mai multe companii oferă asistență clienților prin intermediul Twitter-ului (uneori chiar și 24 de ore din 24).

Envato are un foarte activ canal de sprijin pentru Twitter @envato_support

In plus

Nu există o soluție "de o mărime potrivită" pentru o pagină de contact bună. Fiecare site sau o afacere necesită anumite elemente care ar putea fi redundante pe alte site-uri.

Există o mulțime de informații sau caracteristici suplimentare care pot fi utile pe o pagină de contact. Pentru magazinele de cărămidă și mortar poate fi o idee bună să menționezi orele de programare, de exemplu. Companiile mari ar putea să se leagă de funcția Live Chat și site-urile de eCommerce pot consolida încrederea utilizatorilor prin afișarea numărului lor de TVA.


Informații utile

Realizarea informațiilor de pe pagina dvs. de contact poate fi utilizată pentru a preveni o mulțime de frustrare a vizitatorilor.

Includeți informațiile dvs. de contact ca HTML text în loc de imagini. Acest lucru poate suna ca un nu-brainer, dar există o mulțime de site-uri care folosesc alte tehnici. Textul HTML poate fi copiat și lipit, făcând mai ușor vizitatorul să salveze datele dvs. de contact.

Un adresa de email ar trebui să utilizeze mailto legătură. Acest lucru permite vizitatorilor care dau clic pe el să trimită un e-mail fără să trebuiască să copiați adresa de e-mail de destinație și să deschideți un client de e-mail. O problemă poate apărea cu această tehnică, cu toate acestea, sub forma de roboți spam primirea de adrese de e-mail asociate cu un mailto: legătură. Prin urmare, vă recomandăm să vă gândiți mai întâi la obfuscarea adreselor de e-mail folosind un serviciu precum mailtoencoder.com.

Pe o notă asociată: numere de telefon ar trebui să fie și interactiv. Anul trecut, am postat un sfat rapid cu privire la modul de a face un număr de telefon clicabil. Datorită unei mici bucăți de cod, telefoanele inteligente pot recunoaște numerele de telefon, făcându-le să se poată calla. Acest lucru este foarte util pentru utilizatorii de telefonie mobilă.

Întreprinderile care se bazează în mare măsură pe magazinele lor de cărămidă și mortar pot beneficia foarte mult de un harta interactivă, permițând utilizatorilor să-și găsească rapid drumul spre punctul de vânzare. Afișarea adresei unui magazin este minunată, dar adăugarea unei hărți interactive este mai bună.

Datorită serviciului Hărți Google nu a fost niciodată mai ușor să încorporați această funcție utilă. Pur și simplu introduceți adresa dvs. în Google Maps și dați clic pe pictograma link-ului din bara laterală. Acolo veți găsi codul de încorporare.


Știați că vă puteți personaliza harta? Puteți modela culorile hărții, puteți adăuga marcaje personalizate ale hărților și puteți crea o legendă. Veți găsi mai multe informații despre developers.google.com. S-ar putea lua în considerare, de asemenea, servicii alternative, cum ar fi Mapbox destul de gustoase.



Nu uita motoarele de căutare

În calitate de vizitator, veți recunoaște instantaneu o adresă de pe o pagină de contact. Motoarele de căutare au totuși nevoie de ajutor pentru a recunoaște diferitele elemente.

Putem rezolva acest lucru folosind date structurate. Datele structurate sunt o formă de marcare HTML care oferă motoarelor de căutare mai multe informații despre semnificația subiacentă a conținutului.

Cum functioneazã? Să presupunem că avem o agenție de design web numită "Fine Design" care se află la 3102 Highway 98, Mexico Beach, FL. Microdata permite motoarelor de căutare să înțeleagă mai bine această adresă. Codul HTML va arăta cam așa:

 

Fine Design

3102 Autostradă 98 Plaja Mexic, FL

S-ar putea să doriți să faceți un pas mai departe și să înfășurați acest bloc într-un

element. Elementul de adresă ar trebui să fie utilizat numai pe adrese relevante pentru contextul site-ului, nu doar pe orice adresă veche pe care ați putea avea-o în conținutul dvs. Folosirea acestui element a cauzat dureri de cap pentru dezvoltatori de ani de zile, deci daca nu sunteti sigur, atunci nu va ingrijorati prea mult!

Asta e pentru adresa firmei. Cu toate acestea, putem utiliza și microdate pentru numărul de telefon și adresa de e-mail:

 Tel: 850-648-4200 Email: [email protected]

Datorită acestui motor de căutare de marcare știți că aceasta este adresa, numărul de telefon și adresa de e-mail a companiei "Fine Design". Informațiile implicite, ceea ce înseamnă că vizitatorii nu o pot vedea, dar sunt motoare de căutare foarte utile.

De asemenea, puteți lua în considerare utilizarea hCard microformat care permite cu ușurință salvarea datelor de contact pe diferite platforme. Citiți mai multe despre microformatele de pe html5doctor.com.


Formulare de contact

Majoritatea site-urilor web utilizează un formular de contact pe pagina lor de contact. Cu toate acestea, unele forme de contact sunt inutil de complicate și de utilizator neprietenoase.

Atât de simplu ar arăta o formă de contact, este de fapt o combinație a mai multor componente cruciale. Fiecare dintre aceste componente ar trebui să lucreze împreună pentru a oferi cea mai bună experiență a utilizatorului.

Câmpuri de introducere

Câmpurile de introducere, cum ar fi câmpurile de text, butoanele radio, casetele de selectare etc. permit utilizatorului să completeze informațiile necesare.

Vizitatorii site-ului au mai multe șanse să completeze formulare mai scurte deoarece acestea necesită mai puțin efort. Numărul de câmpuri de introducere este un act de echilibrare între experiența utilizatorului și nevoile afacerii. Hubspot a analizat peste 40.000 de formulare și a analizat efectul creșterii numărului de câmpuri de intrare. Testarea studiului lor constă în faptul că ar trebui să folosiți cât mai puține câmpuri de formate și să fiți deosebit de precaut cu zone de text mai sofisticate și casete selectate.

Ajutați vizitatorii să completeze aceste câmpuri indicând formatul corect. Numerele de telefon și datele pot fi dificile, în special pentru vizitatorii internaționali. Atributul de substituent HTML5 vă va ajuta aici.


Apoi, asigurați-vă că sunteți evidențiați câmpurile obligatorii (o convenție comună este de a utiliza un asterisc *). Declarația explicită a faptului că un câmp de intrare este necesar sau că câmpul este opțional reprezintă o modalitate sigură de a merge.

În cele din urmă, poate fi util să evidențiați câmpul activ. Acest lucru poate fi la fel de subtil sau atrăgător, după cum doriți.

Mai jos este un exemplu de formular de contact dintr-un tutorial de Jim Nielsen. El utilizează un asterisc roșu pentru câmpurile obligatorii, oferă unele sfaturi de formatare și subliniază domeniul activ.


Validarea formularului

Formularul validat în formular poate preveni, de asemenea, unele forme de contact cu dureri de cap. Este foarte frustrant să trebuiască să retrimiteți un formular din nou și din nou pentru că ați introdus date sau date greșite într-un format greșit. După cum am menționat mai devreme, cel mai bine este să ajuți vizitatorii afișând formatul dorit (de exemplu, date, număr de telefon ...).


Butoane

Nu puteți avea un formular de contact fără un buton de trimitere. Acest buton trebuie să fie în partea de jos a formularului. Utilizați "trimiteți mesajul" ca text de buton în loc de "trimiteți" pentru a reaminti clienților ce fac.

Un standard comun de la anii anteriori este acela de a include un buton "Resetare" sau "Formă clară". Nu te. oameni voi faceți clic accidental. Nu este nimic mai rău decât să scrieți un mesaj elaborat și să-l pierdeți din cauza unui buton de resetare.

Parere

Vizitatorul și-a completat informațiile de contact, a scris un mesaj și a apăsat butonul "trimite". Acum ce? A apărut mesajul sau nu?

Asigurați-vă vizitatorilor că mesajul a fost trimis cu succes prin afișarea unui mesaj de confirmare. Un e-mail de confirmare este, de asemenea, o opțiune.

Același sfat se aplică și pentru erori. Afișarea unei erori atunci când mesajul nu a fost trimis este o necesitate - poate împiedica o mulțime de discuții viitoare. Mesajul de eroare trebuie să fie ușor de utilizat, astfel încât să evitați afișarea unor coduri de eroare uimitoare.


Contactați pagina de proiectare

Există o mulțime de cerințe tehnice pentru proiectarea unei pagini de contact mai bune, dar să nu uităm unul dintre cele mai importante aspecte: stilul vizual.

Dacă utilizați un formular de contact, faceți câmpurile dvs. mari, prietenoase și entuziaști pentru a le completa. Spațiul alb și umplutura pot să ajungă departe.

Vizitatorii site-ului au adesea un model în formă de F atunci când răsfoiesc o pagină web, așa că țineți cont de acest lucru atunci când vă proiectați aspectul. Pentru formularele de contact este cel mai bine să stivăți toate câmpurile în poziție verticală, în loc să le plasați una lângă alta. Acest lucru reduce numărul de mișcări oculare pe care vizitatorii trebuie să le facă pentru a completa formularul.

O pagină de contact trebuie să se potrivească identității vizuale a restului site-ului. Un aspect consecvent este esențial. Aruncați o privire la această pagină de contact a "Să călătorim undeva", de exemplu, concepută sub forma unei cărți poștale.

Și ca în cazul majorității sarcinilor legate de designul web; creativitatea se plătește. Neil Patel și-a proiectat pagina de contact sub forma unui infographic, triplându-și solicitările de contact.


Exemple de Formular de Contact

Vorbind despre forme de contact bune, să aruncăm o privire la câteva exemple de inspirație (faceți clic pe fiecare imagine pentru a vizita site-ul respectiv):







Concluzie

Înainte de proiectarea paginii dvs. de contact, asigurați-vă că vizitatorii dvs. o pot găsi. Conectați-vă la acesta din navigarea sau subsolul dvs. principal. Rețineți că cei mai mulți oameni caută informații de contact în partea dreaptă a ecranului.

Gândiți-vă la informațiile care trebuie incluse. Abilitatea de a trimite un mesaj, fie prin intermediul unei adrese de e-mail sau al unui formular de contact, este esențială. O adresă și un număr de telefon pot fi, de asemenea, utile. Informațiile suplimentare, cum ar fi linkurile către profilurile mass-media sociale și orele de programare, pot fi utile pentru anumite companii.

Interactivitatea este, de asemenea, importantă. Folosește mailto atribut pentru adrese de e-mail (într-un mod confuz) și tel: atribut pentru numere de telefon (foarte util pentru vizitatorii mobili). O hartă interactivă, cum ar fi Google Maps, poate fi încorporată, dar luați în considerare consecințele de performanță ale acesteia.

Formularul de contactare a utilizării poate face sau întrerupe o pagină de contact. Începeți prin a cere doar cele mai importante informații. Afișarea formatului adecvat pentru câmpurile de introducere și utilizarea validării inline pot preveni o mulțime de dureri de cap. Nu uitați să afișați un mesaj de succes atunci când formularul este trimis.


Citirea în continuare

  • Form Design de la zero
  • Validarea formularelor CSS3 și HTML5
  • Un ghid pentru formularul de contact 7 pentru Wordpress
  • Reacționează, imagini Google Map Retinați