Ecco una domanda che mi è stata posta molto tempo fa, quando ho iniziato come UI designer, e da tempo cercavo il perché e il come!
Oggi troviamo pulsanti di diverse dimensioni, colori e stili sulle interfacce.
La forma dei pulsanti non è sfuggita alla personalizzazione di un sito o di un'applicazione.
Quando navighiamo, in realtà non ci poniamo la domanda sulla forma che può avere un pulsante, purché funzioni e ci indirizzi alla pagina o all'azione che desideriamo.
Eppure, è una proprietà che ha molto potere e può dare tono e personalità a una carta.
Condivido oggi con voi le chiavi per definire quale raggio di confine ha adottato in base al messaggio portato dal vostro servizio/prodotto.
Raggio di confine, kesako?
Prima di andare oltre, definiamo insieme cos'è il raggio di confine.
È una proprietà in CSS che permette di definire l'angolo degli angoli di un elemento.
- Ogni angolo può essere definito in modo diverso per creare una forma irregolare oppure ogni angolo può avere lo stesso valore.
- Troviamo il raggio di confine su diversi elementi di un'interfaccia: uno sfondo, una scheda, un pulsante, ecc.
La scelta del raggio di confine avrà un forte impatto sulla sensazione generale dell'interfaccia. È quindi importante comprendere le proprietà che ciascuna offre.
# 1 Raggio a 0px
L'opzione classica che porta serietà e stabilità a un'interfaccia.
Quando un marchio lo utilizza, vuole darti un senso di sicurezza e mostrarti la professionalità del suo servizio o prodotto.
Questi pulsanti si trovano ad angolo retto sui siti ministeriali e di e-commerce.
- Siti dipartimentali: impegno, serietà
- Siti e-commerce: pagamento sicuroLa forma geometrica mantiene gli elementi allineati e organizzati per mantenere un equilibrio tra tutti. Questo equilibrio dà fiducia all'utente.
#2 Raggio a 3 – 4px
L'opzione più comunemente vista e innocua quando si tratta di progettazione dell'interfaccia utente.
Permette infatti di avere uno spirito professionale ma senza essere severi.
La leggerezza del raggio di confine permette di essere più vicini agli utenti e di fornire quella che viene definita un'atmosfera user-friendly.
Cancelliamo i lati angolari per creare piccole curve che porteranno flessibilità mantenendo l'equilibrio tra i diversi elementi.
Questa è un'opzione che troverai in molti tipi di siti.
#3 Raggio a 6 – 12px
Possiamo dire che questa opzione è insolita ma la troviamo sempre di più nelle carte grafiche dei siti legati alle nuove tecnologie.
È raro e considerato innovativo sebbene sia pericoloso da usare.
In effetti, a differenza delle opzioni precedenti, può essere scomodo sia per l'utente che per il designer dell'interfaccia utente!
- Per un utente, può essere percepito come infantile o come un difetto di sviluppo.
- Per un UI designer può creare squilibri e incoerenze in un'interfaccia, quindi bisogna stare attenti al suo utilizzo ma non metterla da parte per tutti i buoni motivi citati!
# 4 Angoli completamente arrotondati
Per aggirare tutte le opzioni, dobbiamo citare anche l'opzione di arrotondamento completo: il pulsante rotondo!
Questa opzione è molto comune nelle interfacce perché crea un'atmosfera intuitiva e creativa.
L'occhio è naturalmente attratto dalle curve e questo facilita la lettura e il rilevamento dei pulsanti con angoli arrotondati.
Infatti, su un'interfaccia, circondata da linee rette e strutture parallele, il pulsante arrotondato risalterà e verrà evidenziato graficamente.
Il punto negativo di questa materializzazione è la complessità di utilizzarla su tutti i componenti. Funziona molto bene per i pulsanti, ma dovrebbe essere messo da parte per i campi modulo, ad esempio.
Dovrebbe quindi essere usato con parsimonia e in combinazione con una delle altre opzioni per controbilanciare.
Questa opzione è utilizzata per molti tipi di siti per tutti questi vantaggi e per la dinamica che porta.
Tanto che spesso si trova in elementi di comunicazione come il pulsante “Play” di un video o i pulsanti di condivisione dei social network.
# In conclusione
Quindi non esiste una risposta giusta o sbagliata quando si tratta di selezionare il raggio di confine all'interno dell'interfaccia.
L'obiettivo che devi avere in mente è mantenere la coerenza nelle tue scelte in modo da avere coerenza durante tutto il corso (coerenza d'insieme, carta, marchio e strategia grafica).
Questa coerenza grafica darà un tono particolare alle tue interfacce per evidenziare il tuo messaggio e il tuo prodotto o servizio.
Fonte immagine: https://undraw.co/illustrazioni
Alexa CUELLAR UX-UI Designer @UX-Republic
