Suggerimenti per la progettazione di pulsanti: semplici, piccoli e di vitale importanza
Parliamo molto di dettagli nel design. È per una buona ragione. Prestare attenzione anche ai più piccoli dettagli può creare o distruggere un design.
Oggi approfondiremo uno di questi dettagli e vedremo come progettare i pulsanti su cui gli utenti vogliono fare clic (o toccare). Anche se i pulsanti potrebbero essere uno degli elementi più piccoli nel tuo design, sono uno dei più importanti. In quale altro modo comunicheresti le azioni a un utente? In quale altro modo fornirebbero informazioni in quel circuito di feedback?
Ripensaci per un momento a una delle grandi lamentele sulla progettazione piatta nelle prime fasi: gli utenti non sapevano cosa fosse e cosa non fosse interattivo nella progettazione. Da qui l'importanza di un ottimo design dei pulsanti.
Esplora risorse di progettazione
Dovrebbe apparire tangibile
Gli utenti dovrebbero vedere un pulsante nella progettazione e pensare che devono - um, vogliono - raggiungere e toccarlo. Sebbene sia possibile fare clic su quasi tutti i pulsanti delle dimensioni su uno schermo, le dimensioni e l'imbottitura attorno a un pulsante su un dispositivo touch sono fondamentali.
L'utente medio ha una dimensione della punta delle dita compresa tra 8 e 10 millimetri. Tenendo presente ciò, un target di 10 per 10 millimetri è una dimensione target iniziale eccezionale per i pulsanti sui dispositivi touch. (È leggermente più piccolo dei tasti standard sulla tastiera.)
Ci sono alcune cose di design che puoi fare per rendere un elemento anche tangibile.
- Un'ombra sottile può "sollevare" l'elemento dallo sfondo per renderlo un po 'più vicino all'utente.
- Una maggiore imbottitura attorno ai pulsanti li rende più facili da fare clic e aiuta l'utente a guidare l'elemento.
- Le azioni colorate al passaggio del mouse o attivano / disattivano possono mostrare agli utenti cosa stanno facendo in tempo reale e indicare un'azione.
Questioni di colore
Il colore dei pulsanti deve essere speciale durante la progettazione del sito Web. Questo è un buon posto per utilizzare un particolare colore di accento e usarlo solo per le azioni dei pulsanti.
Il colore dei pulsanti dovrebbe essere brillante e accattivante. C'è una ragione per cui così tanti disegni includono pulsanti gialli, blu o verdi. Sono facili da vedere e si distinguono dal resto del design. Per un pulsante che si distingue davvero, seleziona un colore che è una coppia complementare al colore principale nel design (opposti sulla ruota dei colori).
L'altro problema di colore è il marchio. Si desidera selezionare un colore pulsante che funzioni con la tavolozza dei colori e l'identità del marchio. Non importa quanto desideri che il colore di un pulsante si distingua nel design, dovrebbe funzionare, non contro, la tua combinazione di colori primaria.
Le dimensioni contano ancora di più
Rendilo grande!
I pulsanti hanno bisogno di un po 'di peso in modo che gli utenti siano immediatamente attratti da loro sullo schermo. La tendenza del pulsante fantasma - contorni senza colore di pulsante distinto - si concentrava su pulsanti di grandi dimensioni in termini di conteggio dei pixel ma mancava di peso visivo. In termini di dimensioni, un pulsante deve essere grande in entrambi i casi. (Questo è uno dei motivi per cui la tendenza è passata di moda.)
C'è un punto difficile, tuttavia, quando un pulsante passa dalla dimensione perfetta alla dimensione imbarazzante. Esattamente quando ciò accade dipende dalla scala di altri elementi di design, ma saprai con certezza quando ciò accadrà. Se il pulsante è tutto ciò che vedi nel design, è probabile che sia troppo grande.
Il posizionamento è la chiave
Dove nel design dovrebbe andare il pulsante? Esiste una posizione che contribuirà a generare clic più di altri?
Nella maggior parte dei casi, i pulsanti dovrebbero seguire il contenuto per cui sono stati progettati.
- Alla fine di un modulo
- A destra di un messaggio di invito all'azione
- Nella parte inferiore della pagina o dello schermo
- Centrato sotto un messaggio
Perché questi posizionamenti? Perché segue il percorso naturale dell'azione e il modo in cui gli utenti leggono e interagiscono con i siti Web.
Concentrarsi sul contrasto
Con tutti gli elementi di design, il contrasto è una considerazione importante. Ciò è vero per le tecniche utilizzate all'interno dell'elemento stesso, ma anche per la relazione tra l'elemento e la sua collocazione nel design e in quegli ambienti.
Ricorda di pensare alle seguenti tecniche in questo duplice ambiente:
- Colore
- Digitare peso e dimensioni
- Dimensione degli elementi
- Forma in relazione allo sfondo
- Trasparenza o animazione
- Ombre o graidents
- Spazi bianchi e imbottitura
Usa forme standard
Quando si tratta di pulsanti ci sono solo due forme che dovresti considerare:
- Circles. Il pulsante circolare è diventato popolare grazie ai concetti di Material Design e Material Lite. Con un'estetica simile, un pulsante rotondo funziona con il design e si adatta al modello dell'utente.
- Rettangoli. Questa forma predefinita dovrebbe essere la scelta giusta per tutti i pulsanti, a meno che non si stia utilizzando un cerchio nell'istanza sopra. È ciò che gli utenti sanno e sono abituati. La maggior parte dei rettangoli di pulsanti tendono ad essere almeno due volte più larghi dell'altezza (a volte tre o quattro volte più larghi). Gli utenti vedono questa forma e sanno immediatamente cosa fare. Mentre alcuni potrebbero sostenere i meriti degli angoli arrotondati rispetto agli angoli di 90 gradi, entrambi sono ugualmente appropriati in base al tuo stile di progettazione.
Dì agli utenti cosa fare
Ogni pulsante dovrebbe includere un'istruzione di testo che dice agli utenti esattamente cosa farà il pulsante. Volete mantenere la lingua breve e semplice e dovrebbe corrispondere al tono del resto del design del sito Web.
Quindi, mantieni la promessa. La prossima cosa che compare dovrebbe dire all'utente che sono arrivati alla destinazione prevista. Che si tratti di inviare un modulo, effettuare un acquisto o semplicemente passare a un altro collegamento, l'utente dovrebbe ottenere il risultato desiderato interagendo con il pulsante. (In caso contrario, assicurati che ci sia un errore indicato nel circuito di feedback per te in modo da sapere quali correzioni devono avvenire nella progettazione del sito Web.)
Esempi di messaggistica dei pulsanti includono:
- Clicca qui
- Crea un account ora
- Provalo gratuitamente
- Aggiungi al carrello
- Leggi di più
Dai ai pulsanti un'alta importanza visiva
La maggior parte dei progetti sono riempiti con piccoli elementi dell'interfaccia utente. Una trappola che accade è che il design di questi elementi viene spinto fino al completamento del progetto. E poi scegli un design per tutti gli elementi dell'interfaccia utente, con alcune piccole differenze.
Non rimanere bloccato in questa situazione pericolosa.
Nel design, i pulsanti dovrebbero apparire come solo pulsanti! Nient'altro nel design dovrebbe avere la stessa forma, colore e peso visivo di un pulsante. Devono essere diversi. Pensa a creare uno stile per i pulsanti più grande di qualsiasi altro elemento simile nel design o usa un colore accento che è solo per i pulsanti. Queste tecniche possono aiutare a rendere speciale un pulsante e enfatizzarne l'utilizzo.
Conclusione
Stai iniziando a ripensare alcune delle tue scelte di design dei pulsanti? Pensi di poter creare qualcosa che incoraggi meglio i clic?
Prova alcuni di questi suggerimenti mentre tieni d'occhio le analisi del tuo sito Web per vedere con precisione a quali cambiamenti di design risponde la tua base di utenti. Usa queste informazioni per aiutarti a creare pulsanti ancora più cliccabili per progetti futuri.
