Il flusso delle azioni che si possono compiere in un sito/app determinano la struttura, l’aspetto e in un certo senso l’esistenza stessa del progetto; riuscire a convogliare il comportamento degli utenti secondo dei percorsi studiati per una maggiore conversione è la nuova sfida per gli UI designers.
I pulsanti devono essere l’elemento su cui concentrarsi maggiormente nello studio del design, ecco perché ci sono delle regole che ormai fanno parte della grammatica di una buona progettazione grafica.
I pulsanti (o buttons) devono sembrare dei pulsanti; sembra una banalità ovvia ma non lo è, infatti risulta controproducente creare dei pulsanti magari belli ma fuori dall’immaginario comune, difficilmente percepibili come pulsanti. Il troppo eclettismo grafico è controproducente, sopratutto se si parla in termini di risultati ottenuti.
Il padding introno alla label e le dimensioni stesse dei pulsanti aiutano l’utente in questo processo di riconoscimento immediato. Le dimensioni ideali inoltre dipendono da dei parametri di buona usabilità, dovrebbero essere intorno ai 12mm di diametro, misure standard dell’impronta di un singolo tap; i pulsanti devono essere, inoltre, estesi orizzontalmente per essere individuati e utilizzati con facilità.
Anche il posizionamento è importante; gli utenti cercheranno i pulsanti dove solitamente vengono inseriti, una collocazione differente dovrà essere giustificata e ben indicata graficamente.
Questo vale ancora di più per le coppie di pulsanti come “avanti” e “indietro”, “conferma” e “annulla” etc..
Solitamente le azioni di conferma, soprattutto nelle coppie di pulsanti si trovano sulla destra, questo per essere incentivate dal senso di lettura occidentale che va da sinistra a destra, suggerendo un proseguimento del flusso di azione. Inoltre anche sugli smartphone, maggiormente utilizzati con la mano destra, questo posizionamento ne facilita e ne suggerisce l’utilizzo.
L’utilizzo giusto dei colori determinano la gerarchia delle azioni, il colore primario indica le azioni principali e quelle che devono essere promosse dal sito/applicazione, il colore secondario le azioni alternative. La psicologia dei colori inoltre serve per suggerire la pericolosità o la positività di una azione, ma questa lavora nel complesso, quindi considerando l’intera gamma cromatica utilizzata.
Le label devono essere chiare e didascaliche ma con meno parole possibili, questo perché esse devono essere lette velocemente e devono completare l’user experience della view.
I pulsanti con le call to action principali devono essere focalizzate immediatamente, per questo in esse devono confluire i vettori compositivi della pagina, che solitamente si riversano verso il centro in alto. Anche la dimensione per questa tipologia di pulsante deve essere maggiore rispetto alle altre per diventare quasi dei passaggi d’obbligo per l’utente.
La forma dei pulsanti è solitamente rettangolare o rettangolare ma con gli angoli arrotondati a seconda dello stile utilizzato. Recenti studi suggeriscono l’uso di questi ultimi perché focalizzati meglio dall’occhio umano e perché accentuano il significato della label centrata all’interno.
Solitamente è concesso l’uso di forme particolare come il cerchio o il triangolo per azioni molto semplici come il pulsante per l’uscita o la chiusura di un’area, e il “+” per suggerire l’aggiunta di un elemento; queste forme indicano azioni veloci e poco compromettenti ai fini della conversione del sito/app. Bisogna stare attenti, invece, a utilizzarle in azioni principali, in quanto il rischio di non essere riconosciute da tutti è alto. Per alcuni design particolari tuttavia l’utilizzo di forme inusuali è concesso, ma in questo caso il target di utenza è ben circoscritto e il navigatore è comunque già preparato psicologicamente a un maggiore sforzo di lettura.
Negli ultimi anni lo scheumorfismo sta lasciando il posto al flat design, proprio perché nel tempo quest’ultimo rimane sempre e comunque attuale. Bisogna però sottolineare che l’esperienza reale dell’utente è la più importante e predominante nella psiche; questo vuol dire che un buon utilizzo delle ombre per suggerire gli stati di hover, active, visited etc. aiutano e rafforzano l’utilizzo dei pulsanti.
La grafica flat ha, però, un altro vantaggio enorme; infatti questa ripulisce il layout da elementi inutili di distrazione a vantaggio di una maggiore esposizione del contenuto, ovvero meno bellezza ma più concretezza e chiarezza delle funzionalità.
Ultimo, ma non meno importante, è l’utilizzo appropriato delle icone; queste costituiscono le cosiddette candy, ovvero delle vere e proprie aree di sosta per i nostri occhi; se utilizzate con parsimonia e in modo intelligente, le icone aiuteranno la comprensione delle azioni disponibili e funzioneranno da richiamo nell’architettura complessiva della pagina.
Il nostro studio grafico ha realizzato diverse importanti app, con la nostra esperienza, derivata anche da percorsi decennali intrapresi con altre aziende leader del settore, riusciamo a ottenere il massimo risultato con il minimo sforzo da parte dell’utente.
Guarda qualche esempio dei nostri lavori.
