Parliamo molto dei 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 analizzeremo i modi per progettare pulsanti che gli utenti desiderano fare clic (o toccare). Anche se i pulsanti potrebbero essere uno degli elementi più piccoli del 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 ciclo di feedback?
Ripensare per un momento a una delle grandi lamentele relative al design piatto nelle fasi iniziali: gli utenti non sapevano cosa fosse e cosa non fosse interattivo nel design. Quindi, l'importanza della progettazione di grandi pulsanti.
Dovrebbe sembrare tangibile
Gli utenti dovrebbero vedere un pulsante nel design e pensare di aver bisogno di - um, vogliono - raggiungere e toccarlo. Mentre quasi un pulsante di qualsiasi dimensione è cliccabile su uno schermo, la dimensione e il riempimento attorno a un pulsante su un dispositivo touch è vitale.
L'utente medio ha una dimensione del dito compresa tra 8 e 10 millimetri. Con questo in mente un obiettivo di 10 x 10 millimetri è una grande dimensione di destinazione iniziale per i pulsanti su dispositivi touch. (È leggermente più piccolo dei tasti standard sulla tastiera.)
Ci sono alcune cose progettuali che puoi fare per rendere anche un elemento tangibile.
- Un'ombra sottile può "sollevare"? l'elemento fuori dallo sfondo per farlo sentire un po 'più vicino all'utente.
- L'aumento del riempimento attorno ai pulsanti li rende più facili da fare clic e aiuta a guidare l'utente verso l'elemento.
- Le azioni colorate di passaggio del mouse o di commutazione possono mostrare agli utenti cosa stanno facendo in tempo reale e indicare l'azione.
Questioni di colore
Il colore del pulsante deve essere speciale in tutto il design del sito web. Questo è un buon posto per utilizzare un particolare colore di accento e usarlo solo per le azioni dei pulsanti.
Il colore del pulsante dovrebbe essere luminoso e accattivante. C'è un motivo per cui così tanti design includono pulsanti gialli, blu o verdi. Sono facili da vedere e si distinguono dal resto del design. Per un pulsante che spicca davvero, seleziona un colore che è una coppia complementare al colore principale nel disegno (opposti sulla ruota dei colori).
L'altra preoccupazione per il colore è la marca. Si desidera selezionare un colore pulsante che funzioni con la tavolozza dei colori e l'identità del marchio. Indipendentemente da quanto desideri che il colore di un pulsante si distingua nella progettazione, dovrebbe funzionare con - non contro - la tua combinazione di colori primaria.
Le dimensioni contano ancora di più
Rendilo grande!
I pulsanti hanno bisogno di un certo numero di elementi in modo che gli utenti vengano immediatamente visualizzati sullo schermo. La tendenza del pulsante fantasma: i contorni senza il colore del pulsante distinto, focalizzati su pulsanti grandi in termini di numero di pixel, ma senza 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, però, quando un pulsante passa dall'essere perfettamente dimensionato a imbarazzante sovradimensionato. Esattamente quando ciò accade dipende dalla scala di altri elementi di design, ma saprai per certo quando accade. Se il pulsante è tutto ciò che vedi nel design, è probabile che sia troppo grande.
Il posizionamento è la chiave
Dove dovrebbe andare il pulsante nel design? C'è una posizione che ti aiuterà a generare clic più di altri?
Nella maggior parte dei casi, i pulsanti dovrebbero seguire il contenuto che sono progettati per completare.
- 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 naturale percorso di 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. Questo è 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 quelli circostanti.
Ricordati 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 incidenti
- Spazio bianco e imbottitura
Usa forme standard
Quando si tratta di pulsanti ci sono solo due forme da considerare:
- Circles. Il pulsante circolare è diventato popolare grazie ai concetti Material Design e Material Lite. Con qualsiasi estetica simile, un pulsante rotondo funziona con il design e si adatta al modello dell'utente.
- Rettangoli. Questa forma predefinita dovrebbe essere il tuo go-to per tutti i pulsanti, a meno che tu non stia usando un cerchio nell'istanza sopra. È ciò che gli utenti conoscono e sono abituati. La maggior parte dei rettangoli di pulsanti tende ad essere larga almeno il doppio dell'altezza (a volte tre o quattro volte più larga). Gli utenti vedono questa forma e sanno immediatamente cosa fare. Mentre alcuni potrebbero argomentare il merito 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 indica agli utenti esattamente cosa farà il pulsante. Vuoi mantenere la lingua breve e semplice e dovrebbe corrispondere al tono del resto del design del sito web.
Quindi, mantenga quella promessa. La prossima cosa che si apre 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 link, l'utente dovrebbe ottenere il risultato desiderato dall'interazione con il pulsante. (In caso contrario, assicurati che vi sia un errore indicato nel ciclo di feedback per te in modo da sapere quali correzioni devono accadere nel design del sito web.)
Esempi di messaggistica di pulsanti includono:
- Clicca qui
- Crea un account ora
- Provalo gratis
- Aggiungi al carrello
- Leggi di più
Dai ai pulsanti un'alta importanza visiva
La maggior parte dei progetti sono pieni di piccoli elementi dell'interfaccia utente.Una trappola che si verifica è che il design di questi elementi viene spinto fino a quando il progetto è quasi completato. Quindi scegli un design per tutti gli elementi dell'interfaccia utente, con alcune piccole differenze.
Non rimanere bloccato in questa situazione pericolosa.
Nel disegno dovrebbero apparire i pulsanti 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 utilizza un colore accento che è solo per i pulsanti. Queste tecniche possono contribuire a rendere un pulsante un aspetto speciale e sottolineare il suo 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 tenendo d'occhio l'analisi del tuo sito web per vedere con precisione a quali modifiche del design risponde la tua base di utenti. Utilizza queste informazioni per aiutarti a creare pulsanti ancora più cliccabili per i progetti futuri.