Il flusso delle azioni che è possibile compiere all’interno di un sito o di un’app determina la struttura, l’aspetto e, in un certo senso, l’esistenza stessa del progetto. Riuscire a convogliare il comportamento degli utenti lungo percorsi studiati per aumentare la conversione rappresenta oggi una delle principali sfide per gli UI designer.
I pulsanti sono l’elemento su cui concentrare maggiormente l’attenzione nello studio dell’interfaccia; per questo esistono alcune regole che ormai fanno parte della grammatica di una buona progettazione grafica.
I pulsanti (o button) devono sembrare dei pulsanti. Può sembrare un’ovvietà, ma non lo è: creare pulsanti esteticamente interessanti ma lontani dall’immaginario comune risulta spesso controproducente, poiché difficilmente vengono percepiti come elementi interattivi. Un eccessivo eclettismo grafico può compromettere l’efficacia, soprattutto in termini di risultati ottenuti.
Il padding intorno alla label e le dimensioni complessive del pulsante aiutano l’utente nel processo di riconoscimento immediato. Le dimensioni ideali dipendono da parametri di buona usabilità: dovrebbero aggirarsi intorno ai 12 mm di diametro, misura standard dell’impronta di un singolo tap. Inoltre, i pulsanti dovrebbero svilupparsi orizzontalmente per essere individuati e utilizzati con maggiore facilità.
Anche il posizionamento è fondamentale: gli utenti cercano i pulsanti nei punti in cui sono abituati a trovarli. Una collocazione differente deve quindi essere ben giustificata e chiaramente segnalata dal punto di vista grafico.
Questo principio vale ancora di più per le coppie di pulsanti come “avanti” e “indietro”, “conferma” e “annulla”. Solitamente le azioni di conferma si trovano sulla destra, poiché il senso di lettura occidentale — da sinistra a destra — suggerisce un avanzamento del flusso di azione. Inoltre, sugli smartphone, utilizzati prevalentemente con la mano destra, questo posizionamento risulta più naturale e immediato.
Un uso corretto del colore determina la gerarchia delle azioni: il colore primario indica le azioni principali e quelle che il sito o l’applicazione intendono promuovere, mentre il colore secondario identifica le azioni alternative. La psicologia del colore aiuta inoltre a suggerire la pericolosità o la positività di un’azione, ma deve essere sempre valutata all’interno dell’intera palette cromatica utilizzata.
Le label devono essere chiare e didascaliche, ma il più concise possibile. Devono essere lette rapidamente e contribuire a migliorare l’esperienza complessiva dell’utente nella singola view.
I pulsanti che contengono le call to action principali devono essere immediatamente focalizzati. Per questo motivo è importante che i vettori compositivi della pagina convergano verso di essi, solitamente collocati nella parte centrale o superiore dell’interfaccia. Anche la dimensione di questi pulsanti deve essere maggiore rispetto agli altri, così da diventare quasi dei passaggi obbligati per l’utente.
La forma dei pulsanti è generalmente rettangolare o rettangolare con angoli arrotondati, a seconda dello stile adottato. Studi recenti suggeriscono l’uso di angoli arrotondati, poiché vengono percepiti più facilmente dall’occhio umano e valorizzano maggiormente la label centrata al loro interno.
È solitamente consentito l’utilizzo di forme particolari, come cerchi o triangoli, per azioni molto semplici, ad esempio il pulsante di chiusura o l’icona “+” per suggerire l’aggiunta di un elemento. Queste forme indicano azioni rapide e poco impegnative in termini di conversione. È invece sconsigliato utilizzarle per azioni principali, poiché il rischio di non essere riconosciute da tutti gli utenti è elevato. In casi specifici, tuttavia, l’uso di forme inusuali può essere giustificato, soprattutto quando il target è ben definito e preparato a un maggiore sforzo di lettura.
Negli ultimi anni lo skeuomorfismo ha progressivamente lasciato spazio al flat design, anche perché quest’ultimo tende a rimanere più attuale nel tempo. È però importante sottolineare che l’esperienza reale dell’utente resta l’elemento più rilevante: un uso corretto delle ombre per suggerire stati come hover, active o visited contribuisce a rafforzare l’interazione con i pulsanti.
Il flat design presenta inoltre un grande vantaggio: ripulisce il layout da elementi superflui e riduce le distrazioni, favorendo una maggiore esposizione dei contenuti. Meno decorazione, quindi, ma più concretezza e chiarezza funzionale.
Ultimo, ma non meno importante, è l’utilizzo appropriato delle icone. Queste rappresentano le cosiddette candy, vere e proprie aree di sosta per l’occhio dell’utente. Se utilizzate con equilibrio e intelligenza, le icone migliorano la comprensione delle azioni disponibili e fungono da punti di riferimento all’interno dell’architettura complessiva della pagina.
Negli anni ho realizzato numerose applicazioni di rilievo, grazie a un’esperienza maturata anche attraverso collaborazioni decennali con aziende leader del settore.
Un’identità visiva efficace nasce da metodo, cultura del progetto e visione strategica.
Ogni logo che realizzo è il risultato di un’analisi attenta del contesto, dei valori e degli obiettivi del brand, seguita da una ricerca formale e concettuale mirata. Il design diventa così uno strumento di sintesi: essenziale, riconoscibile e coerente nel tempo.
Scopri alcuni dei miei lavori.
