it-swarm.it

Dimensione minima del pulsante e spaziatura per un touchscreen

Per un touchscreen, come l'iPhone, qual è la dimensione più piccola di un pulsante con cui potresti cavartela?

E quanto da vicino potrebbero essere spinti insieme?

Ho un'app che avrà molti pulsanti su uno schermo e deve progettarla in modo che sia utilizzabile.

13
Mongus Pong

(Dato che sono un po 'pigro, inizierò ristampando la mia risposta da un thread su SO)

Recenti ricerche scientifiche hanno scoperto che:

[A] dimensione target di 9,2 mm per attività discrete [ovvero, attività di puntamento a target singolo ] e gli obiettivi di 9,6 mm per le attività seriali dovrebbero essere sufficientemente grandi per l'uso con il pollice con una sola mano su palmari touchscreen senza compromettere prestazioni e preferenze.

Citato da studio della dimensione target per l'uso con il pollice con una mano su dispositivi touchscreen piccoli (Parhi, Karlson e Bederson 2006). Altre fonti concordano su questa "regola vicina a 0,4 pollici" (ad esempio Progettazione di interfacce gestuali (Saffer 2008, p. 42)).

Data la densità di pixel dell'iPhone di 163 PPI (6.417px/mm), dovresti preferibilmente puntare non inferiore a 59px diagonale per qualsiasi bersaglio.

(Si noti che questo è verificato solo per uso del pollice con una sola mano.)


Se segui queste linee guida, la spaziatura può essere eliminata.

tl; dr? Tutto si riduce alla densità dei pixel.

10
jensgram

Fai riferimento a iPhone Human Interface Guidelines (quel link va alle linee guida per le app web) per i consigli di Apple. C'è un capitolo chiamato " Fornisci obiettivi di dimensioni delle punte delle dita " che probabilmente puoi usare per basare le tue decisioni.

Inoltre, non indovinare, prova. Prendi alcune persone con dita di dimensioni diverse (all'interno del tuo pubblico di destinazione) e fagli provare a premere pulsanti di dimensioni diverse in un prototipo. Questo ti insegnerà molto su cosa aspettarti.

Modifica: Guida alla progettazione e all'interazione dell'interfaccia utente di Microsoft per Windows Phone 7 dettagli "dimensioni minime del target di tocco" a pagina 4. Complessivamente questo la guida è eccellente e deve essere letta per i progettisti dell'interfaccia utente che lavorano all'interfaccia utente del touchscreen.

8
Rahul

Durante lo sviluppo di alcune Android ho dovuto testare l'area di tocco più piccola a cui l'utente può accedere facilmente e con precisione con un dito/tocco (eseguire azioni di clic e trascinamento).

I test sono stati effettuati su 3 Android: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse. I telefoni avevano schermi da 3,2 pollici ad eccezione di Pulse (che ha uno schermo da 3,5 pollici), tutti di essi con una risoluzione dello schermo di 320x480 pixel e una superficie dello schermo capacitiva.

Per farla breve, tutto ciò che era più piccolo di 20x20 pixel era inutilizzabile. Ricorda inoltre che dovrebbe esserci spazio attorno al pulsante (margine di 5 pixel).

2
Bojan Gavrovski

Molte linee guida UX ruotano attorno alla dimensione della punta del dito e queste linee guida variano nelle dimensioni e nella spaziatura consigliate. Le dimensioni delle punte delle dita non dovrebbero essere l'unico fattore nel determinare quali controlli di dimensioni minime e spaziatura dovrebbero essere.

Patch di contatto

Considera l'effettiva "patch di contatto" creata dal dito/pollice quando si contatta un touchscreen. È inoltre necessario considerare gli errori di giudizio compiuti dall'utente nel pensare di aver centrato visivamente il proprio tocco sul bersaglio, ma in effetti il ​​contatto effettivo con lo schermo potrebbe essere leggermente spostato su un lato.

Tipo di dispositivo

A causa dei modi in cui vengono tenuti diversi dispositivi e della differenza di distanza dall'utente (ad esempio, confrontare il telefono cellulare con un tablet, un telefono potrebbe essere tenuto più vicino), anche le dimensioni minime del tocco e la spaziatura possono variare. Si potrebbe probabilmente cavarsela con minimi minimi su un telefono perché sono tenuti più vicini allo spettatore e gli errori hanno meno probabilità di essere commessi. Per un dispositivo più grande come un tablet tenuto più lontano, potrebbe essere necessario aumentare le dimensioni minime per soddisfare una maggiore possibilità di errori.


C'è un ottimo articolo che parla di questo e altri fattori su UXmatters ( http://www.uxmatters.com/mt/archives/2013/03/common- idee sbagliate-su-touch.php ).

Snippet dall'articolo:

... solo una parte del dito o del pollice entra in contatto con lo schermo ... il cerotto di contatto varia in base alla pressione e all'angolazione

Le dimensioni fisiche contano , quindi tutte le buone linee guida sono in millimetri, pollici, punti dei tipografi o altre scale del mondo reale.

non è necessario aumentare le dimensioni del bersaglio visibile. Invece, puoi semplicemente aumentare le dimensioni dell'area cliccabile attorno a un link o pulsante

Design per aree target sia visive che tattili. Considera le aspettative degli utenti.

Taglie:

enter image description here

1
Dave Haigh

Proprio come un'aggiunta: il design del materiale di Google suggerisce un minimo di 7-10mm per la dimensione del target touch https://www.google.com/design/spec/search.html?q=Touch+target+size

0
Andi