Non preoccuparti dellordine dei pulsanti in unapplicazione web, fallo invece

(4 giugno 2019)

Quindi stai progettando unapplicazione web. Quale dovrebbe essere lordine del tuo bottone? Ecco alcune linee guida per decidere quale dovrebbe essere lordine dei pulsanti. E oltre a questi casi non importa, se segui quanto riportato di seguito.

Per cominciare, siamo tutti sulla stessa pagina, classifichiamo i pulsanti come primari e secondari. Nella maggior parte dei contesti, le azioni principali sono azioni positive come Salva o Invia e le azioni secondarie sono azioni negative come Annulla o Elimina.

Segui le linee guida della piattaforma

Se stai creando un desktop o unapplicazione mobile, la risposta allordine dei pulsanti è semplice: segui le linee guida della piattaforma.

Per un PC, questo significa azione primaria seguita da azione secondaria.

Per un Mac, questo significa unazione secondaria seguita da unazione principale.

Per Android, significa anche azione secondaria seguita da azione primaria.

È stato facile. Ma quale ordine di pulsanti scegli per unapplicazione web?

Ordine di pulsanti per applicazioni web

Se stai progettando unapplicazione web che fornisce un servizio per gli utenti di una singola piattaforma , è un gioco da ragazzi: segui di nuovo la convenzione di quella piattaforma.

In caso contrario, le cose si complicano un po . Gli utenti utilizzano desktop, tablet e telefoni cellulari. Puoi avere utenti PC che usano iPhone o Android e puoi avere utenti Mac che … beh, probabilmente usano iPhone più che Android. Sì, la quota di mercato per iOS, Android e OSX su Windows è attualmente di circa 60-40, ma ciò non significa che si ottimizzi per il 60% degli utenti e non per il restante 40%. Perché non ottimizzare per il 100% dei tuoi utenti?

Lordine dei pulsanti non ha importanza se lo fai invece: pulsanti a contrasto di forma e dimensione

Puoi ottimizzare per un 100% di gli utenti non concentrandosi affatto sullordine dei pulsanti. Puoi andare avanti e scegliere effettivamente lordine che preferisci. Concentrati invece sul contrasto visivo non solo attraverso la dimensione del colore, ma anche di forma e dimensione.

Quando lazione principale è un pulsante normale e lazione secondaria è testo (la sottolineatura è facoltativa ma nella mia esperienza di vendita di questo stile ai proprietari di prodotti mi sembra migliore), riesci a creare efficacemente un contrasto sufficiente per consentire agli utenti di notare facilmente la differenza tra i pulsanti primari e secondari.

Non lo fanno. t confondersi a differenza dei normali pulsanti che hanno entrambi la stessa forma e dimensione e si differenziano solo per colore. Di seguito sono riportati esempi di entrambi gli ordini, entrambi ugualmente efficaci nel consentire agli utenti di distinguere tra azioni primarie e secondarie.

Come trasformare i pulsanti normali in pulsanti a contrasto di forma e dimensione

Se disponi di un sistema di progettazione, aggiorna i pulsanti dellapplicazione primaria e secondaria dai pulsanti normali (a condizione che siano posizionati uno accanto allaltro e non a poli separati) per modellare e dimensionare i pulsanti a contrasto non è affatto difficile. Dovrebbe anche essere una vendita facile al proprietario del prodotto o al consiglio del sistema di progettazione aziendale perché possono essere aggiornati senza doversi preoccupare del posizionamento. Lo stesso vale per laggiornamento del suo CSS se stai creando un web. Potresti praticamente sostituire i pulsanti nel tuo sistema da pulsanti normali a pulsanti a contrasto di forma e dimensione senza doversi preoccupare di nulla.

  1. Supponiamo che una di queste coppie sia i tuoi pulsanti originali.

2. Cambia il colore del testo per il pulsante secondario.

3. Spostali uno accanto allaltro in modo che si tocchino.

3. Rimuovi la forma dello sfondo per il pulsante secondario

4. Facoltativamente, anche se consigliato; sottolinea il testo del pulsante secondario.

Grazie per aver letto.

Sentiti libero di metterti in contatto o rimanere in contatto su LinkedIn e Twitter .

Leggi di più su UX, scarica risorse UX e ottieni fantastici preventivi che puoi utilizzare nel tuo lavoro quotidiano UX su Cone Trees – User Research & Design e UX Quotes .

E se e questo articolo ti è di aiuto, batti le mani! 👏

Crediti immagine

Originariamente pubblicato su https://www.conetrees.com il 4 giugno 2019.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *