The Art of Website UI Button Design: 10 Trends & Tips
L'ottimo design dei pulsanti è qualcosa a cui la maggior parte degli utenti del sito Web non pensa mai ... perché quando funziona bene è quasi invisibile. I pulsanti migliori sono facili da fare clic o toccare, hanno una funzione ovvia e aiutano gli utenti a interagire con il design senza pensare.
È una formula abbastanza semplice, ma può essere difficile da progettare se la lasci come ripensamento.
Oggi stiamo esaminando le tendenze nella progettazione dei pulsanti, oltre ad alcuni suggerimenti per aiutarti a progettare un pulsante dell'interfaccia utente su cui le persone fanno clic più e più volte. Dai una spinta al tuo design pulsante con questi suggerimenti, tendenze e idee per stimolare l'ispirazione.
Esplora risorse di progettazione
1. Keep It Simple
Tutto ritorna a questa frase classica nella teoria del design: Keep It Simple, Stupid (o Silly, se preferisci).
Il design del pulsante del sito Web non è diverso. Il design di un pulsante non deve essere eccessivamente complesso. Dovrebbe essere ovvio e funzionale. A volte altre tendenze del design possono ostacolare questo e ciò può influire sulle conversioni sul tuo sito Web.
Quindi, quando si tratta di progettare pulsanti, pensare in questo modo - e non pensarci troppo. Un pulsante dovrebbe apparire come un pulsante. È così semplice.
2. Fornire un sacco di contrasto
Quasi altrettanto importante di avere un pulsante identificabile è assicurarsi che sia facile da vedere.
Il motivo per cui gli stili dei pulsanti fantasma sopra le immagini tendono e si sbiadiscono rapidamente sono perché i pulsanti non avevano abbastanza contrasto per essere facilmente riconoscibili. Gli utenti non sono riusciti a trovarli immediatamente.
Non nascondere i pulsanti con scarso contrasto. Falli risaltare e grida con un sacco di colori e contrasto di spazio in modo che si distinguano dagli altri elementi sullo schermo. Lascia un sacco di imbottitura attorno ai pulsanti in modo che possano respirare.
Ciò semplifica la ricerca e l'identificazione dei pulsanti da parte degli utenti come elementi cliccabili, nonché rende fisicamente più semplice fare clic senza ottenere l'elemento sbagliato per errore.
3. Usa colore
Hai mai notato quanti pulsanti sono rossi o arancioni? È perché i colori vivaci attirano l'attenzione su questi elementi e incoraggiano l'azione.
L'uso del colore è anche una tecnica di design piuttosto trendy. Dai colori vivaci ai pulsanti con sfumature semplici, il colore potrebbe essere uno dei modi più semplici per aiutare le persone a interagire con il design.
4. Scrivi una microcopia che crea aspettative
Non commettere questo errore: un pulsante con su scritto "Fai clic qui". (Quanto è spam?)
La microcopia all'interno del design di un pulsante dovrebbe creare una chiara aspettativa di ciò che accadrà con un clic. Dì agli utenti cosa otterranno dopo. Potrebbe essere semplice come "Invia" per inserire dati o fare clic su un collegamento per "Ulteriori informazioni" o guardare un video. Indipendentemente da ciò che l'azione è, dire agli utenti nella microcopia.
Queste informazioni possono aiutare a creare fiducia con gli utenti e aumentare le conversioni con azioni / interazioni che gli utenti ritengono desiderabili.
5. Impegnarsi con Animazione sottile
Vi è una tendenza nella progettazione di pulsanti in cui i siti Web utilizzano due pulsanti affiancati. Uno è pieno, uno è uno stile fantasma. Entrambi includono un'animazione al passaggio del mouse che enfatizza ulteriormente due scelte cliccabili.
L'animazione può aiutare a richiamare l'attenzione sui pulsanti e persino a incoraggiare i clic. È diventato un modello utente comunemente accettato per includere un'animazione al passaggio del mouse sui pulsanti e fornisce un semplice spunto agli utenti che dovrebbero impegnarsi.
Non esagerare. I pulsanti vorticosi, rotanti e lampeggianti sono più fastidiosi che utili.
6. Fai abbastanza grande da toccare
I pulsanti dovrebbero includere un'area cliccabile (toccabile) che abbia un diametro di almeno 10 millimetri e che una più grande sia sempre OK. Questo consiglio proviene da uno studio del Touch Lab del MIT che sembrava dimensioni di un polpastrello in relazione ai dispositivi touch.
Mettiamolo in prospettiva. Il tasto tipico sulla tastiera di un computer fisico è di 15 millimetri per 15 millimetri. Questo è un buon obiettivo. (Basta non dimenticare di tenere conto delle diverse dimensioni dello schermo in modo che il pulsante non si perda su schermi di piccole dimensioni.)
Se è necessario utilizzare pulsanti più piccoli, prendere in considerazione l'aggiunta di un ampio raggio di clic. In questo modo se l'utente manca i pulsanti stessi, c'è abbastanza spazio attorno in modo che l'azione desiderata continui ancora. (I visitatori del tuo sito web ti ringrazieranno.)
7. Usa uno stile familiare
Esistono alcuni stili di pulsanti generali che tutti conoscono. Usane uno.
- Un pulsante rettangolare riempito con bordi quadrati e testo all'interno
- Un pulsante rettangolare riempito con bordi arrotondati e testo all'interno
- Un pulsante rettangolare riempito con un'ombra visibile (sopra)
- Un pulsante fantasma rettangolare
- Semplici pulsanti circolari, usati più comunemente nell'angolo in basso a destra per indicare supporto, aiuto o chat
8. Inserire in una posizione prevista
Non solo i pulsanti devono apparire e funzionare come previsto, ma devono anche trovarsi in un luogo che gli utenti li cercheranno.
- Per le home page, questo include il posizionamento dei pulsanti sotto un titolo principale o un blocco di testo. I pulsanti sono generalmente allineati a sinistra con il testo o al centro dello schermo.
- Per i moduli, i pulsanti vengono visualizzati dopo gli input. Alcuni moduli di input singoli allineano il pulsante sulla stessa riga a destra dell'input.
- I pulsanti CTA generali vengono visualizzati direttamente sotto il contenuto a cui fanno riferimento.
- I pulsanti per giocare o avviare un video o un gioco sono spesso al centro della schermata di anteprima.
- I pulsanti del carrello o e-commerce sono generalmente nell'angolo in alto a destra.
9. Non dimenticare il feedback
Il pulsante risponde all'interazione? Assicurati che ci sia un evidente ciclo di feedback incluso nel design dell'interfaccia del pulsante.
Fornire un segnale visivo o istruttivo che il pulsante ha fatto il suo lavoro. Alcuni pulsanti richiedono più lavoro di altri. I pulsanti che si collegano a un'altra pagina o sito Web, ad esempio, forniscono feedback sul funzionamento del pulsante se la nuova pagina viene caricata. Un pulsante di invio del modulo potrebbe fornire un messaggio di ringraziamento sullo schermo se le informazioni sono inviate correttamente.
10. Utilizzare i pulsanti intenzionalmente
Troppi pulsanti creano il caos.
Usa i pulsanti dove hanno senso. Non sovraccaricare il design con pulsanti ovunque. Gli utenti non avranno la chiara idea di dove e cosa è più importante fare clic.
Pulsanti di salvataggio da utilizzare con gli obiettivi del sito Web Dovrebbero guidare i visitatori verso gli elementi più importanti nella progettazione generale.
Conclusione
Un pulsante del sito Web è un elemento che converte l'invito all'azione in un risultato. Prenditi il tempo per pensare a questo design, dal colore alla funzione alla microcopia. Testa i design dei pulsanti per assicurarti di avere la versione più funzionale nell'interfaccia.
Se hai un pulsante che funziona, non cadere nella trappola delle tendenze e cambiare il design. Quando si tratta di pulsanti, la funzione dovrebbe essere la massima priorità.
