Share
Una buona pagina di contatto è essenziale per mantenere i rapporti con i tuoi visitatori. Sia che si parli di eCommerce, riviste, siti Web personali, servizi online, gli utenti di solito cercano una pagina di contatto come primo mezzo di comunicazione con te. Stranamente, molti web designer trascurano l'umile pagina di contatto, anche considerandolo uno degli aspetti meno importanti di un sito web. Diciamolo bene.
Una pagina di contatto è spesso trascurata. Quante volte hai visitato un sito web, vuoi metterti in contatto per lamentarti di un prodotto o servizio o porre una domanda? E quante volte hai lottato con un modulo di contatto?
Una buona pagina di contatto può beneficiare di qualsiasi tipo di attività. Può migliorare la soddisfazione del cliente aiutando gli utenti con i loro problemi. Può anche aiutare un'azienda a migliorare i suoi prodotti e servizi fornendo una via per un prezioso feedback.
Altri canali possono essere limitati quando si tratta di feedback degli utenti. Televisione, radio, riviste, giornali ... tutti sono una forma di comunicazione a senso unico. La comunicazione online dovrebbe essere una strada a doppio senso; un dialogo tra un'azienda e un visitatore. Entrambe le parti possono trarre vantaggio da questo, che è esattamente il motivo per cui una buona pagina di contatto è essenziale.
Primo passo prima: la posizione delle informazioni di contatto. Avere la migliore pagina di contatto del mondo non va bene se i visitatori non riescono a trovarlo. Tenere a mente alcune convenzioni di design può aiutare i tuoi visitatori.
In generale, le informazioni di contatto possono essere trovate in due punti:
Navigazione principale è una posizione ideale per un link di pagina di contatto. I visitatori di solito cercano informazioni di contatto sul lato destro di una pagina perché sono viste come un elemento di importanza secondaria. Per questo motivo vedrai comunemente il link della pagina di contatto come uno degli ultimi elementi nella navigazione del sito.
Potresti anche vedere una sub-navigazione più piccola nell'angolo in alto a destra dello schermo. Questa è anche una posizione preziosa per la pagina dei contatti. Detto questo, è meglio evitare di inserire un collegamento alla pagina dei contatti in un menu a discesa, in quanto potrebbe essere facilmente trascurato.
Il piè di pagina è anche una posizione popolare per le informazioni di contatto. Può contenere un collegamento alla pagina di contatto:
o le informazioni di contatto più importanti in sé:
Anticipare il flusso di visitatori verso una pagina di contatto è complicato, quindi il posizionamento di un link in almeno due posizioni come menzionato ti copre abbastanza bene.
Ora che siamo sicuri che i visitatori possano trovare la loro strada verso la pagina dei contatti, è tempo di pensare al contenuto reale. Iniziamo con le nozioni di base e daremo un'occhiata alle informazioni che dovrebbero essere presenti.
Un indirizzo email è il modo più semplice per contattare un'azienda online. In alternativa, puoi utilizzare un modulo di contatto che invia un'email. Tramite un modulo di contatto si ha un maggiore controllo sul contenuto (campi obbligatori) e si può prevenire lo spam. Ulteriori informazioni sui moduli di contatto più avanti in questo articolo.
Lea Verou mostra il suo indirizzo e-mail in testo normale, ma usa un metodo astuto per impedire agli spambot di raccoglierlo ... Le aziende con un negozio di mattoni non dovrebbero dimenticare di menzionare il loro indirizzo. Se hai più negozi, è meglio creare una pagina separata per ogni posizione. Riempi questa pagina con informazioni di contatto specifiche del negozio, orari di apertura, indicazioni stradali, ecc. Questo non è utile solo per i visitatori, ma può anche aiutare il tuo sito per le query di ricerca locali.
La visualizzazione di un numero di telefono trasmette un senso di fiducia. È spesso visto come un segno che questa è una vera azienda, che può essere davvero utile per i negozi online.
Molti siti Web stanno iniziando ad aggiungere pulsanti social media alla loro pagina di contatto. Sebbene questo probabilmente non avvantaggerà ogni sito, per alcuni visitatori può essere un vero valore aggiunto. Soprattutto perché sempre più aziende offrono assistenza clienti tramite Twitter (a volte anche 24 ore su 24, 7 giorni su 7).
Envato ha un canale di supporto Twitter molto attivo @envato_support Non esiste una soluzione "taglia unica" per una buona pagina di contatto. Ogni sito Web o azienda richiede determinati elementi che potrebbero essere ridondanti su altri siti.
Ci sono molte informazioni o funzioni extra che possono essere utili su una pagina di contatto. Per i negozi fisici, può essere una buona idea menzionare gli orari di apertura, ad esempio. Le grandi aziende potrebbero collegarsi alla loro funzione di chat dal vivo e i siti di e-commerce possono consolidare la fiducia degli utenti visualizzando il loro numero di partita IVA.
Rendere le informazioni sulla tua pagina di contatto utilizzabili può impedire un sacco di frustrazione dei visitatori.
Includi le tue informazioni di contatto come HTML testo invece di immagini. Questo può sembrare un gioco da ragazzi, ma ci sono molti siti web che usano altre tecniche. Il testo HTML può essere copiato e incollato, rendendo più semplice per il visitatore il salvataggio dei dati dei contatti.
Un indirizzo email dovrebbe usare il mailto collegamento. Ciò consente ai visitatori che fanno clic su di esso di inviare un'email senza dover prima copiare l'indirizzo email di destinazione e aprire un client di posta elettronica. Tuttavia, un problema può sorgere con questa tecnica, sotto forma di robot spam che raccolgono indirizzi e-mail associati a mailto: collegamento. Pertanto, si potrebbe voler pensare a prima offuscando gli indirizzi e-mail utilizzando un servizio come mailtoencoder.com.
Su una nota correlata: numeri di telefono dovrebbe anche essere interattivo L'anno scorso abbiamo pubblicato un suggerimento su come rendere un numero di telefono selezionabile. Grazie a un piccolo pezzo di codice, gli smartphone sono in grado di riconoscere i numeri di telefono, rendendoli richiamabili. Questo è davvero utile per gli utenti mobili.
Le aziende che fanno molto affidamento sui loro negozi fisici possono trarre grandi vantaggi da un mappa interattiva, consentendo agli utenti di trovare rapidamente la loro strada verso il punto di vendita. La visualizzazione dell'indirizzo di un negozio è ottima, ma l'aggiunta di una mappa interattiva è migliore.
Grazie a Google Maps non è mai stato così semplice incorporare questa utile funzionalità. Inserisci semplicemente il tuo indirizzo in Google Maps e fai clic sull'icona del link nella barra laterale. Lì troverai il codice di incorporamento.
Sapevi che puoi personalizzare la tua mappa? Puoi assegnare uno stile ai colori della mappa, aggiungere indicatori di mappa personalizzati e creare una legenda. Troverai ulteriori informazioni su developers.google.com. Potresti anche prendere in considerazione servizi alternativi come la Mapbox piuttosto gustosa.
Come visitatore, riconoscerai immediatamente un indirizzo su una pagina di contatto. I motori di ricerca, tuttavia, hanno bisogno di un po 'più di aiuto per riconoscere i vari elementi.
Possiamo risolvere questo problema utilizzando dati strutturati. I dati strutturati sono una forma di markup HTML che fornisce ai motori di ricerca maggiori informazioni sul significato sottostante del contenuto.
Come funziona? Diciamo che abbiamo un'agenzia di web design chiamata 'Fine Design' che si trova a 3102 Highway 98, Mexico Beach, FL. I microdati consentono ai motori di ricerca di comprendere meglio questo indirizzo. Il codice HTML sarà simile a questo:
Design raffinato
3102 Highway 98 Spiaggia del Messico, FL
Potresti voler fare un ulteriore passo avanti e avvolgere questo blocco in un elemento. L'elemento indirizzo dovrebbe essere utilizzato solo su indirizzi rilevanti per il contesto del sito, non semplicemente su qualsiasi vecchio indirizzo che potresti avere all'interno del tuo contenuto. L'utilizzo di questo elemento ha causato mal di testa agli sviluppatori per anni, quindi se non sei sicuro, non preoccuparti troppo!
Questo è tutto per l'indirizzo dell'azienda. Tuttavia, possiamo anche utilizzare i microdati per il numero di telefono e l'indirizzo email:
Tel: 850-648-4200 Email: [email protected]
Grazie a questo motore di ricerca markup sappiamo che questo è l'indirizzo, il numero di telefono e l'indirizzo e-mail della società 'Fine Design'. Sono informazioni implicite, il che significa che i visitatori non possono vederlo, ma sono motori di ricerca molto utili.
Si potrebbe anche considerare l'utilizzo del microformato hCard che consente facilmente il salvataggio dei dati di contatto su varie piattaforme. Maggiori informazioni sui microformati su html5doctor.com.
La maggior parte dei siti Web utilizza un modulo di contatto nella sua pagina di contatto. Tuttavia, alcuni moduli di contatto sono inutilmente complicati e ostili all'utente.
Semplice come potrebbe sembrare un modulo di contatto, è in realtà una combinazione di diversi componenti cruciali. Ognuno di questi componenti dovrebbe lavorare insieme per fornire la migliore esperienza utente.
I campi di input, come campi di testo, pulsanti di opzione, caselle di controllo, ecc. Consentono all'utente di inserire le informazioni necessarie.
I visitatori del sito hanno maggiori probabilità di compilare forme più brevi in quanto richiedono meno sforzo. Il numero di campi di input è un atto di bilanciamento tra l'esperienza dell'utente e le esigenze aziendali. Hubspot ha analizzato oltre 40.000 forme e ha esaminato l'effetto di un aumento del numero di campi di input. Il punto di partenza del loro studio è che dovresti usare il minor numero possibile di campi di forma ed essere particolarmente cauto con le aree di testo più sofisticate e selezionare le caselle.
Aiuta i tuoi visitatori a compilare questi campi indicando il formato corretto. I numeri di telefono e le date possono essere complicati, specialmente per i visitatori internazionali. L'attributo segnaposto HTML5 ti aiuterà qui.
Quindi, assicurati di te evidenzia i campi obbligatori (una convenzione comune è usare un asterisco *). Dichiarare esplicitamente che è richiesto un campo di input o che il campo è facoltativo è un modo sicuro per andare.
Infine, può essere utile evidenzia il campo attivo. Questo può essere sottile o accattivante come vuoi.
Di seguito è riportato un esempio di modulo di contatto da un tutorial di Jim Nielsen. Usa un asterisco rosso per i campi obbligatori, fornisce alcuni consigli sulla formattazione e mette in risalto il campo attivo.
La convalida del modulo in linea può anche prevenire alcuni mal di testa da modulo di contatto. È molto frustrante dover inviare di nuovo un modulo più e più volte perché hai inserito dati o dati errati in un formato errato. Come accennato in precedenza, è meglio aiutare i visitatori visualizzando il formato richiesto (ad es. Date, numero di telefono ...).
Non puoi avere un modulo di contatto senza un pulsante di invio. Questo pulsante dovrebbe essere nella parte inferiore del modulo. Usa "invia messaggio" come testo di un pulsante invece di "invia" per ricordare ai clienti cosa stanno facendo.
Uno standard comune di ieri è quello di includere un pulsante 'reset' o 'clear form'. Non farlo. Persone volontà cliccalo accidentalmente Non c'è niente di peggio che digitare un messaggio elaborato e perderlo a causa di un pulsante 'reset'.
Il visitatore ha inserito le informazioni di contatto, ha digitato un messaggio e premuto il pulsante "invia". Ora cosa? Il messaggio è passato o no?
Rassicurare i visitatori che il messaggio è stato inviato correttamente visualizzando un messaggio di conferma. Un'e-mail di conferma è anche un'opzione.
Lo stesso consiglio vale per gli errori. La visualizzazione di un errore quando il messaggio non è stato inviato è indispensabile: può impedire molte discussioni future. Il messaggio di errore dovrebbe essere facile da usare, quindi evitare di visualizzare codici di errore sorprendenti.
Ci sono molti requisiti tecnici per progettare una pagina di contatto migliore, ma non dimentichiamo uno degli aspetti più importanti: lo stile visivo.
Se stai usando un modulo di contatto, rendi i tuoi campi grandi, amichevoli e seducenti da riempire. Lo spazio bianco e l'imbottitura possono fare molta strada.
I visitatori del sito spesso seguono uno schema a forma di F quando navigano in una pagina Web, quindi tienilo a mente quando stai progettando il layout. Per i moduli di contatto è meglio impilare tutti i campi in verticale anziché posizionarli uno accanto all'altro. Questo riduce il numero di movimenti oculari che i visitatori devono effettuare per compilare il modulo.
Una pagina di contatto dovrebbe adattarsi all'identità visiva del resto del sito. Un aspetto coerente è la chiave. Dai un'occhiata a questa pagina di contatto di "Let's Travel Somewhere", ad esempio, progettata sotto forma di cartolina.
E come con la maggior parte delle attività relative al web design; la creatività paga. Neil Patel ha progettato la sua pagina di contatto sotto forma di infografica, triplicando le sue richieste di contatto.
Parlando di buoni moduli di contatto, diamo un'occhiata ad alcuni esempi di ispirazione (clicca su ogni immagine per visitare il rispettivo sito web):
Prima di progettare la tua pagina di contatto, assicurati che i tuoi visitatori possano trovarla. Collegati ad esso dalla tua navigazione principale o dal piè di pagina. Ricorda che la maggior parte delle persone cerca informazioni di contatto sul lato destro dello schermo.
Pensa alle informazioni che devono essere incluse. La possibilità di inviare un messaggio, tramite un indirizzo email o un modulo di contatto, è essenziale. Un indirizzo e un numero di telefono possono anche essere utili. Ulteriori informazioni come i link ai profili dei social media e gli orari di apertura potrebbero essere utili per determinate aziende.
L'interattività è anche importante. Utilizzare il mailto attributo per indirizzi email (in modo offuscato) e il tel: attributo per i numeri di telefono (molto utile per i visitatori mobili). È anche possibile incorporare una mappa interattiva come Google Maps, ma considerare le conseguenze sul rendimento di ciò.
L'usabilità del modulo di contatto può creare o distruggere una pagina di contatto. Inizia chiedendo solo le informazioni più essenziali. Mostrare il formato corretto per i campi di input e l'utilizzo della convalida in linea può impedire molti mal di testa. Non dimenticare di visualizzare un messaggio di successo quando viene inviato il modulo.
Accentsconagua