Pulsanti nella storia e dimensioni ideali del touchscreen mobile
Ogni giorno abbiamo a che fare con un gran numero di oggetti, dispositivi e servizi, ciascuno dei quali richiede di essere trattato in qualche maniera particolare. La tecnologia cambia il modo di fare le cose, ma i bisogni fondamentali restano gli stessi. I progettisti devono produrre cose che soddisfino i bisogni della gente, in termini di funzioni d’uso e gratificazione emotiva. In altre parole, il design deve essere pensato come un’esperienza totale.
I pulsanti sono una parte cruciale della progettazione d’interfacce. Ottenere questo elemento andrà ben oltre verso una buona esperienza utente e un elegante design. Nella loro forma più semplice, i pulsanti sono link in stile speciale a cui vogliamo attirare l’attenzione. Possono collegarci ad altre pagine, completare un’azione come inviare un modulo o effettuare un acquisto. Sono spesso usati per le chiamate principali all’azione (CTA) che vogliamo che i nostri utenti completino.
Il pulsante è un elemento ordinario, quotidiano, del design dell’interazione. Anche se sembra un elemento dell’interfaccia utente parecchio semplice, il suo design è cambiato molto negli ultimi decenni, sempre basato sul riconoscimento e la chiarezza.
Breve cronologia dei pulsanti
Con l’avvento delle interfacce grafiche utente (GUI) sono arrivati gli elementi del pulsante. Raccogliamo nei primi anni ’90, quando iniziamo a vedere ciò che assomiglia a pulsanti su siti Web 1.0 e su interfacce come Windows 3.11 e versioni successive di Windows 95.
I pulsanti nei primi giorni del web erano spesso pulsanti GIF o grafici. Questi pulsanti contenevano grafici e trame lampeggianti. Al momento, molti contenuti web erano generati dagli utenti e non erano state sviluppate le migliori pratiche in termini di usabilità e convenienza.
I pulsanti del sistema operativo si basavano sull’aspetto di rilievo e ombra per distinguerli dal contesto circostante, poiché spesso erano dello stesso colore della finestra di dialogo o dell’interfaccia in cui erano posizionati.
Questo tipo di pulsante, lo skeuomorphic che faceva affidamento sul look sollevato e sul 3D per implicare che fosse un elemento cliccabile si riversava nel web. Ci sono ancora esempi del patrimonio di questo tipo di pulsante che possono essere trovati online oggi, in particolare quando sono in gioco sistemi di backend legacy.
L’evoluzione dello stile
Pulsante tridimensionale
Fin dai primi giorni, i pulsanti del sistema operativo facevano affidamento sull’aspetto di rilievo e ombra per distinguerli dal contesto circostante. Questa soluzione progettuale si basava sul semplice principio: l’utilizzo di un bordo, un gradiente e un’ombreggiatura. Fa risaltare l’elemento sullo sfondo e sul contenuto e questo lo rende facilmente identificabile come componente cliccabile.
La finestra di dialogo di Windows 95 utilizzava ombre e punti salienti per creare effetti 3D che venivano usati per aiutare gli utenti a interpretare la gerarchia visiva e capire quali elementi erano interattivi.
Pulsante Skeuomorphic
Nel design digitale, lo skeuomorphism è quando gli elementi dell’interfaccia utente sono fatti per assomigliare agli oggetti della vita reale, che si tratti di copiare una trama o di far apparire un pulsante come un pulsante reale.
I progetti Skeuomorphic hanno lo scopo di aiutare gli utenti a capire come utilizzare una nuova interfaccia consentendo loro di applicare alcune conoscenze preliminari sull’oggetto. La metafora della calcolatrice per esempio ha lo scopo di aiutare gli utenti a trasferire le conoscenze precedenti sui calcolatori fisici all’ambiente digitale.
Pulsante Design Piatto
A differenza del design precedente, il design piatto è stato visto come un modo per esplorare il mezzo digitale senza cercare di riprodurre l’aspetto del mondo fisico. Di conseguenza, ha rimosso gli spunti visivi con le mani pesanti che sono stati tradizionalmente usati per comunicare accessibilità agli utenti.
Quando tutto è piatto, come fanno gli utenti a sapere quali sono pulsanti?
Gli utenti hanno ancora bisogno di significanti visivi per sapere dove possono fare clic/toccare su una pagina: indizi percettibili che li aiutano a capire come utilizzare le interfacce. Pertanto, il colore è particolarmente importante nella progettazione piatta, perché quando si utilizzano pulsanti piatti, questi colori saranno uno degli identificatori principali che consentono all’utente di riconoscerli.
Pulsante quasi Piatto e Fluttuante
Il design quasi piatto era un’evoluzione del design originale (o ultra) piatto. Questo stile è per lo più piatto, ma utilizza ombre, luci e livelli sottili per creare profondità nell’interfaccia utente. Il linguaggio di Material Design di Google è un esempio di design quasi piatto con le giuste priorità e introduce un nuovo tipo di pulsanti: il pulsante di azione mobile (CTA).
Questi pulsanti sono sovrapposti all’interfaccia e attirano l’attenzione su azioni promosse o primarie. Fungono da pulsanti di call to action, usati per un’azione promossa, pensati per rappresentare una singola azione che gli utenti eseguono di più su quel particolare schermo. Mappe di Google è un ottimo esempio di FAB fatto bene. L’azione principale eseguita dagli utenti su Maps è di ottenere indicazioni stradali, quindi ha perfettamente senso per un FAB che fa proprio questo.
Pulsante Fantasma
Nel 2014, una delle tendenze dominanti del design che ha attraversato il mondo dell’interfaccia utente sono stati i pulsanti fantasma. I pulsanti Ghost sono quei pulsanti trasparenti e vuoti che hanno una forma di base, ad esempio rettangolare o rettangolare con angoli arrotondati. Sono generalmente contornati da una linea molto sottile, mentre la sezione interna è costituita da testo semplice.
L’origine del Ghost Button deriva dalla rivoluzione del design piatto e i pulsanti fantasma diventano trendy quando Apple ha rilasciato iOS 7. La forma rettangolare semplice in combinazione con il font pulito all’interno della cornice appare perfettamente all’interno dell’interfaccia utente.
I pollici arrivano solo fino a un certo punto
Mentre scrivo, la dimensione degli schermi degli smartphone va dai 3,5 ai 6 pollici. I nostri strumenti di progetto e importazione ci consentono di progettare le schermate senza che sia necessario conoscere la dimensione esatta o regolarsi in base a essa. Ciò che non varia automaticamente sono la mano umana e il pollice. Se volete progettare una schermata di utilizzo facile ed efficiente dovrete progettare in base al modo in cui si usano le mani, le dita e i pollici su uno schermo medio-piccolo.
Di norma si ritiene che utilizziamo gli smartphone con una sola mano: li teniamo con la mano dominante e usiamo il pollice dominante per toccare e navigare. A volte è vero, ma a volte usiamo anche la mano non dominante, e a volte teniamo il telefono in una mano e usiamo l’altra per digitare o toccare.
Magari avete visto dei diagrammi degli schermi degli smartphone che indicano zone raggiungibili dal pollice in modo “naturale”, zone raggiungibili “allungando” il pollice e altre indicate come “ahi”: queste sono fuori avanti, perché il pollice non può estendersi tanto. Quando non arriviamo con il pollice, cambiamo la posizione del telefono o usiamo due mani.
Linee guida della piattaforma mobile
Gli obiettivi touch più piccoli sono difficili da colpire per gli utenti rispetto a quelli più grandi. Durante la progettazione d’interfacce mobili, è meglio rendere grandi i tuoi obiettivi in modo che siano facili da toccare per gli utenti.
Esattamente quanto grande dovresti farli per dare la massima facilità d’uso alla maggior parte dei tuoi utenti?
- Le linee guida per l’interfaccia umana d’iPhone di Apple consigliano una dimensione minima di 44 pixel di larghezza e 44 pixel di altezza.
- La guida alla progettazione e all’interazione dell’interfaccia utente di Windows Phone di Microsoft suggerisce una dimensione target di tocco di 34 pixel con una dimensione minima di 26 pixel di destinazione al tocco.
- Le linee guida per gli sviluppatori di Nokia suggeriscono che la dimensione del target non dovrebbe essere inferiore a 1 cm x 1 cm quadrato o 28 x 28 pixel.
Sebbene queste linee guida forniscano una misura generale per i target tattili, non sono coerenti tra loro, né sono coerenti con le dimensioni reali del dito umano. In effetti, le loro dimensioni suggerite sono molto più piccole del dito medio, il che può portare a problemi di target tattile per gli utenti sui dispositivi mobili.
Larghezza media in pixel
L’uso del pollice tra gli utenti di dispositivi mobili è popolare. Alcuni utenti non avranno sempre due mani libere quando sono sul proprio dispositivo mobile. Molti preferiscono la comodità di usare solo una mano e il pollice. Gli utenti non dovrebbero passare da una mano a due mani o dal pollice al dito indice per colpire con precisione un bersaglio. La dimensione di un obiettivo non dovrebbe indurli a commettere errori di tocco.
Dito indice sul collegamento
Uno studio del MIT Touch Lab di Human Fingertips per indagare sulla Meccanica del Senso tattile ha rilevato che la larghezza media dell’indice è di 1,6–2 cm (16–20 mm) per la maggior parte degli adulti. Questo converte in 45–57 pixel, che è più ampio di quanto suggeriscono la maggior parte delle linee guida mobili.
Un target tattile di 45–57 pixel di larghezza consente al dito dell’utente di adattarsi perfettamente al target. I bordi del target sono visibili quando l’utente lo tocca. Ciò fornisce loro un chiaro riscontro visivo che stanno colpendo il bersaglio con precisione. Sono anche in grado di colpire e spostarsi verso i loro bersagli più velocemente grazie alle sue dimensioni maggiori.
Questo è coerente con la legge di Fitt, che dice:
“Il tempo per raggiungere un obiettivo è più lungo se l’obiettivo è più piccolo”.
Un piccolo obiettivo rallenta gli utenti perché devono prestare particolare attenzione a colpire l’obiettivo con precisione. Un obiettivo di dimensioni pari a un dito offre agli utenti abbastanza spazio per colpirlo senza doversi preoccupare dell’accuratezza.
Pollice sul collegamento
Ci sono molti utenti che usano il dito indice per toccare i target mobili. Ma ci sono altrettanti utenti che usano anche il loro pollice. La grande differenza con il pollice è che è più largo dell’indice. La larghezza media di un pollice adulto è di 2,5 cm che converte in 72 pixel.
Per gli utenti che usano i loro pollici, 72 pixel fa miracoli. Sono più facili e veloci da colpire perché consentono al pollice dell’utente di adattarsi comodamente all’interno del bersaglio. Questo rende i bordi visibili e facili da vedere da tutti gli angoli. Ciò significa che gli utenti non devono orientare il pollice fino alla punta per vederlo centrare il bersaglio. Né devono inclinare il pollice di lato per colpirlo, basta un tocco con il loro pollice per fare il trucco.
Un altro studio sul Touch Key Design per la selezione del target su un telefono cellulare ha anche rilevato che il numero di errori è diminuito all’aumentare delle dimensioni della chiave touch. Inoltre, è stato previsto che maggiore è la dimensione della chiave a sfioramento, maggiore è il tasso di successo e la convenienza.
Conclusioni
Abbiamo percorso una lunga strada da quei primi pulsanti grigi e dai pulsanti web iniziali animati e lampeggianti. La continua evoluzione è guidata dal mobile e dal web design visivamente più sofisticato, così come da grandi attori come Google che introducono linguaggi di design come il Material Design.
Ogni pulsante ha lo scopo d’indirizzare gli utenti a prendere l’azione che si desidera che facciano. Pensa al Web o all’app come a una conversazione avviata da un utente occupato. Il pulsante gioca un ruolo cruciale in questa conversazione: un’interazione fluida mantiene la conversazione fluente mentre i glitch, come l’impossibilità di trovare il pulsante, creano interruzioni e nel peggiore dei casi guasti.
