Pulsanti_Arrotondati-Squadrati_BeFamily

Molte volte, sviluppando il mockup grafico di un sito web da presentare a un cliente, mi sono ritrovato di fronte a un bivio: «Dovrei scegliere di fare i pulsanti arrotondati o squadrati? Arrotondo appena appena gli angoli?
È vero che i pulsanti arrotondati garantiscono una migliore usabilità? Li usano tutti!»

Come decidere dunque le regole di utilizzo e l'aspetto dei pulsanti?

Sappiamo bene come la dimensione, un colore particolarmente luminoso e un'ombra influenzino i nostri comportamenti, rendano i pulsanti più o meno efficaci. Tuttavia, è difficile trovare il giusto equilibrio tra questi e altri elementi non interattivi presenti nella stessa interfaccia.

Caratteristiche_Pulsanti_BeFamily

 

 

Gli angoli arrotondati sono più facili da individuare?

Sì, gli angoli arrotondati sono più facili da individuare e più gradevoli alla vista.
Quando, ad esempio, allineiamo delle tab, ci risulta più facile contarle se queste hanno angoli arrotondati.

 

Rounded_BeFamily

 

Questo perché gli angoli arrotondati delle tab guidano i nostri occhi a riconoscere meglio le differenti schede, essendoci maggiore differenza tra loro. Viceversa, le tab più "spigolose" appaiono identiche e unite l'una all'altra, avendo così meno probabilità di attrarre la nostra attenzione.

In una griglia più fitta, gli angoli arrotondati funzionano ancora meglio.

Griglia_BeFamily

Ad esempio, all'interno della Dashboard di TurboTax, la sezione superiore che utilizza tab arrotondate è molto più accattivante se confrontata con la sezione sottostante che utilizza tab con angoli.

Dashboard_ TurboTax_BeFamily

 

 

Dovrei quindi utilizzare sempre pulsanti completamente arrotondati? No no no!

I pulsanti completamente arrotondati sono eccellenti nelle interfacce che hanno uno spazio adeguato.

Esaminiamo ad esempio Spotify: il posizionamento di pulsanti arrotondati ha molto successo nel guidare l'attenzione degli utenti sulle call to action.

Schermata 2019-01-31 alle 19.41.02

Dal momento che l'esperienza utente di Spotify è interamente dedicata alla riproduzione di musica, podcast e alla scoperta di playlist, l'interazione principale nell'app è immediata. In poche parole: se primi un pulsante succederà sempre qualcosa, senza che si aprano ulteriori menù e opzioni.

I pulsanti di riproduzione arrotondati sono estremamente distinguibili rispetto agli altri elementi (titoli e cover) incoraggiando così gli utenti a premere "Play".

Spotify_Mobile_BeFamily

 

Ma allora quand'è che i pulsanti completamente arrotondati NON funzionano?

Esistono alcuni casi in cui i pulsanti arrotondati possono causare grossi problemi di usabilità.

1. All'interno di alcune interfacce, i pulsanti completamente arrotondati possono sembrare dei tag.
Quando i pulsanti completamente arrotondati appaiono esattamente come i tag, gli utenti si confondono:
«Sto facendo clic su un pulsante o su filtro?»

2. I pulsanti completamente arrotondati non funzionano bene per mostrare più opzioni.
Un pulsante completamente arrotondato che include un'icona a forma di freccia verso il basso di solito è utilizzato per indicare che sono disponibili più opzioni. L'area di tocco efficace per attivare le opzioni però si adatta alle dimensioni dell'icona a forma di freccia.

Pulsante_Normale_BeFamily

È un'area abbastanza piccola da cliccare, non credi?

Area_Pulsante_CliccabileBeFamily

Se invece utilizziamo un pulsante con gli angoli leggermente arrotondati, ma comunque mantenendo una forma tendenzialmente rettangolare, potremmo eliminare la singola freccia e far si che il pulsante agisca come un pulsante a comparsa. Facendo clic su di esso, si visualizzeranno tutte le opzioni disponibili.

È decisamente più efficace.

Menu_Aperto_BeFamily

Apple, che insieme a Google sembra dettare standard in merito a UI e UX, scoraggia l'utilizzo di pulsanti arrotondati per mostrare più opzioni. I pulsanti completamente arrotondati vengono solitamente utilizzati per guidare l'utente o per indicare scelte univoche e precise.

 

I pulsanti completamente arrotondati non sono adatti a essere incolonnati.

Quando incolonniamo pulsanti completamente arrotondati, sembra che ci sia sempre qualcosa che non quadra. Se abbiamo ad esempio una tabella di dati con 10 righe e un pulsante su ogni riga, avremo 10 pulsanti arrotondati che, affiancati ai tag, si confonderebbero e si finirebbe con il far credere all'utente che sono tutti pulsanti di azione principali. Questo, per quanto esteticamente piacevole, creerebbe grandi difficoltà.
Non si saprebbe esattamente dove e cosa cliccare.

Pulsanti_Impilati_BeFamily

 

In casi come questo, l'alternativa potrebbe essere quella di utilizzare pulsanti come quelli nelle nuove notifiche iOS e macOS, che mostrano le opzioni solo al passaggio del mouse, riducendo quindi al minimo la presenza di pulsanti e permettendo agli utenti di rimanere concentrati sulla parte dell'app con cui stanno interagendo .

MacOS-iOS-Notification

 

 

La gradevole estetica degli angoli arrotondati

Gli angoli arrotondati ormai sembrano sinonimo di contemporaneità. Gli angoli arrotondati, infatti, comunicano un senso di semplicità, ottimismo e apertura.

Probabilmente questo spiega perché anche molti sistemi di progettazione grafica si stanno adattando ai pulsanti arrotondati.


Quindi?

Quindi non esiste "giusto" o "sbagliato" quando si discute in merito all'utilizzo di un aspetto arrotondato o squadrato per i propri pulsanti. La cosa importante è che il pulsante permetta sempre di comprendere nel più breve tempo possibile la sua funzione, incoraggiando gli utenti a interagire con l'app e riducendo in tutti i modi possibili eventuali distrazioni.

In sostanza, nessuna conversione = nessuna vittoria.