The? Contattaci? la forma troppo spesso viene gettata come un ripensamento rapido piuttosto che un elemento che dà il tono alla comunicazione. Oggi daremo un'occhiata a diverse semplici tecniche che puoi utilizzare per portare i tuoi moduli di contatto da noiosi a brillanti.
Lungo la strada vedremo diversi esempi di fantastici moduli di contatto insieme a risorse su come ricreare l'effetto sul tuo sito.
1: Design It
Penseresti che questo sia ovvio, ma ho guardato un sacco di? Contattaci? pagine e moduli per preparare questo post e il 90% o più di essi hanno utilizzato i moduli dell'interfaccia utente del browser predefinito (bianco, angoli quadrati, noioso). Questo non è necessariamente un aspetto negativo, ma se stai cercando un modo per ravvivare la tua pagina di contatto, i campi del modulo sono un ottimo punto di partenza. Prova a cambiare il colore dei campi per abbinare meglio il tuo sito, arrotondando gli angoli o aggiungendo tratti come gli esempi sopra. Un po 'di stile è molto utile per dare alle tue forme un aspetto personalizzato.
Risorsa utile:
Se hai bisogno di aiuto, consulta questo post di 40 tutorial Web stile CSS per sviluppatori Web.
2: Give It Focus
Visita il sito qui sopra e inizia a compilare il modulo di contatto. Mentre lo fai, il sito si oscura in modo che il modulo di contatto sia l'unico oggetto della tua attenzione. Questo è un modo bellissimo per garantire che gli utenti non inizino a contattarti solo per distrarti da altri contenuti. È anche un ottimo modo per far dire ai tuoi visitatori? Ooooh?
Risorsa utile:
Fermati con Costruisci Internet per imparare come oscurare il contenuto con jQuery.
3: Make It Goofy
Se vuoi veramente incoraggiare gli utenti a contattarti, rendere l'ambiente intorno al modulo di contatto amichevole e invitante. Questo rende la tua azienda più accessibile e inconsciamente farà in modo che i tuoi visitatori si aspettino una risposta amichevole (assicurati di consegnarne uno!). Gli esempi sopra illustrati usano colori brillanti e illustrazioni sciocche per svolgere questo compito, ma sentitevi liberi di essere creativi con la tipografia, le icone o qualsiasi altra cosa a cui potete pensare per ridurre la tensione che qualcuno potrebbe provare nell'avvicinarvi con una domanda o un commento.
Risorsa utile:
Ecco alcuni personaggi fantastici e super economici di Graphic River per iniziare.
4: Dagli una mappa
Se il tuo sito è per un? Mattone e Malta? negozio o qualsiasi tipo di posizione fisica, l'integrazione di una mappa nella tua pagina di contatto è assolutamente necessaria in modo che i potenziali clienti possano effettivamente trovarti. Questo può essere semplice come una mappa illustrata stilizzata o completa come una mappa interattiva Google. Gli esempi sopra adottano l'approccio interattivo (a mio avviso, il modo migliore per andare), il secondo dei quali integra anche le indicazioni stradali personalizzate, visualizzate in cima alla mappa.
Risorsa utile:
Se hai bisogno di aiuto, controlla questo generatore di Google Maps gratuito per la tua home page.
5: Make It Smart
Per vedere cosa intendo con? Intelligente? visita i due esempi sopra. Il primo controlla che gli utenti del contenuto immettano nel campo per assicurarsi che sia corretto (cioè convalida del modulo). Ad esempio, se digiti? Joe? nel campo dell'indirizzo email, il modulo ti dice di inserire un indirizzo email valido. Il secondo esempio implementa semplicemente la forma che evidenzia in modo creativo. Mettendo in risalto il campo attuale dell'utente in modo grandioso, li aiuti a mantenere la concentrazione e la posizione nella forma. È un piccolo tocco di usabilità che può davvero aiutare chiunque possa avere difficoltà a vedere in quale campo si trova.
Risorse utili:
Non hai idea di come farti forme intelligenti? Ecco alcune risorse di convalida dei moduli tra cui puoi scegliere:
- Convalida del modulo davvero semplice
- Esercitazione: convalida del modulo con JavaScript
- Script di convalida del modulo gratuito (Apple Developer Connection)
6: Walk Itm Through It
Se ci sono informazioni specifiche richieste dall'utente, come requisiti di budget o aree di interesse, non contare sull'utente che lo include, anche se si rende esplicito che le informazioni devono essere presenti. Invece, usa le caselle di controllo, i pulsanti di opzione e i menu a discesa per assicurarti che non lo lascino fuori. Questi strumenti non solo aiutano gli utenti a ricordare tutto per includere, ma in generale rendono il processo di contatto molto più semplice, eliminando un sacco di lavoro di scrittura.
Risorse utili:
Dai un'occhiata a questo elenco completo di elementi dell'interfaccia utente suddivisi per browser e sistema operativo.
7: animalo
Entrambi i siti sopra usano un menu a discesa animato per il loro modulo di contatto. Posizionare questo menu direttamente nella home page facilita l'accesso ai visitatori senza dover cercare informazioni di contatto. L'aspetto del menu a discesa ti consente di svolgere questa attività senza aggiungere confusione alla tua home page. Si noti che il menu Blue Acorn in realtà spinge il contenuto del sito verso il basso mentre Fred Maya scorre sul contenuto esistente. Entrambi i metodi funzionano bene, ma preferisco il metodo Blue Acorn in quanto non ostruisce nulla ed è più facile da leggere senza la trasparenza.
Risorse utili:
Per ottenere un effetto simile sul tuo sito, consulta il tutorial di Noupe sulla creazione di menu a discesa sexy con jQuery e CSS.
8: Theme It
La mia risposta standard per tutte le cose creative: appena inventato un tema intelligente! Far sì che un'interfaccia rifletta qualcosa che le persone hanno già acquisito non solo può fornire grandi idee progettuali, ma può anche aumentare la tua usabilità (può anche diminuire la tua usabilità se non stai attento). L'esempio sopra utilizza un iPod touch come interfaccia per il modulo di contatto. Prova a pensare a qualcosa di unico per il tuo! Le possibilità includono qualsiasi cosa, da un post-it a un biglietto da visita.
9: renderlo colloquiale
L'esempio sopra è una delle idee più uniche che ho trovato. Una sorta di modulo di contatto simile Mad Libs, l'utente riceve poche frasi e chiede di riempire gli spazi vuoti.Questo assicura che tu ottenga le informazioni che desideri ma che sono presentate all'utente è un formato molto più amichevole di semplici vecchi campi con etichette. Certo è discutibilmente meno utilizzabile perché comporta più letture da parte dell'utente, ma ottiene una stella d'oro in allegria!
10: renderlo oversize
Un modo semplice per attirare l'attenzione dell'utente su tutto ciò che si progetta è renderlo molto più grande di quanto si aspetterebbe. Dopo aver usato un mucchio di moduli di contatto di dimensioni normali, quello sul sito sopra sembrava decisamente enorme. La sorpresa è stata piacevole anche se ho amato la sensazione oversize delle forme e del testo. Non sono esattamente sicuro del perché, ma per qualche motivo il grande si sente amichevole!
Conclusione
Ora dovresti essere pieno di nuove idee su come rendere il tuo contatto un punto di orgoglio. Vai avanti e crea fantastiche pagine di contatto e raccontaci di loro nei commenti qui sotto. Assicurati inoltre di farci sapere quale degli esempi precedenti è stato il tuo preferito insieme alle tue fantastiche idee su come migliorarle.