Windows Dev Center

Linee guida per la selezione della destinazione

Questo argomento descrive l'utilizzo della geometria di contatto per la selezione della destinazione tramite tocco nella nuova interfaccia utente di Windows e offre linee guida relative all'esperienza utente, da prendere in considerazione quando si usano questi nuovi meccanismi di selezione della destinazione nelle app di Windows Store.

Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app, dall'inizio alla fine:  Interazione dell'utente: input tocco... e oltre

Panoramica della selezione della destinazione tramite la geometria di contatto

Per la selezione della destinazione tramite tocco in Windows 8 viene usata l'area di contatto completa di ogni dito rilevato da un digitalizzatore a tocco. Il set di dati di input più ampio e complesso restituito dal digitalizzatore viene usato per incrementare la precisione quando viene determinata la destinazione più probabile intesa dall'utente. Questo garantisce un'esperienza più soddisfacente per l'utente, migliorando la precisione e infondendo fiducia nelle interazioni tramite tocco.

Nelle sezioni seguenti troverai consigli utili per ottimizzare la tua applicazione per la selezione della destinazione tramite tocco.

Misure e ridimensionamento

Per mantenere la coerenza tra dimensioni dello schermo e densità in pixel diverse, tutte le dimensioni delle destinazioni vengono rappresentate in unità fisiche (millimetri). Per convertire le unità fisiche in pixel è possibile usare l'equazione di seguito:

Pixel = Densità in pixel × Misura

Nell'esempio seguente viene usata questa formula per calcolare la dimensione in pixel di una destinazione da 9 mm su uno schermo da 135 pixel per pollice (ppi) e un plateau di ridimensionamento 1x:

Pixel = 135 ppi × 9 mm

Pixel = 135 ppi × (0,03937 pollici per mm × 9 mm)

Pixel = 135 ppi × 0,35433 pollici

Pixel = 48 pixel

Il risultato deve essere adattato in base ai singoli plateau di ridimensionamento definiti dal sistema.

Soglie

Per determinare il risultato di un'interazione è possibile usare le soglie di distanza e di tempo.

Ad esempio, quando viene rilevata un'azione di tocco, viene registrato un tocco se l'oggetto viene trascinato a una distanza inferiore a 2,7 mm dal punto di tocco e il dito viene sollevato entro un massimo di 0,1 secondi dall'azione di tocco. Muovendo il dito oltre la soglia dei 2,7 mm, l'oggetto verrà trascinato e selezionato o spostato. Per altre informazioni, vedi Linee guida per lo scorrimento trasversale. A seconda dell'app, tenendo il dito premuto per più di 0,1 secondi il sistema eseguirà un'interazione autorivelante. Per altre informazioni, vedi Linee guida per il feedback visivo.

Dimensioni delle destinazioni

Non è possibile dare un'indicazione univoca in merito alle dimensioni o al posizionamento nell'app per le destinazioni. Le dimensioni e l'area di destinazione di un oggetto dipendono da vari fattori, tra cui lo scenario dell'esperienza utente e il contesto di interazione.

Lo schema seguente mostra che la dimensione della destinazione è in genere una combinazione tra dimensioni della destinazione visualizzata, dimensioni della destinazione effettiva e distanza tra la destinazione effettiva e altre potenziali destinazioni.

Schema che mostra le dimensioni consigliate per destinazione visualizzata, destinazione effettiva e margini.

La tabella seguente illustra le dimensioni minime e le dimensioni consigliate per tutti i componenti di una destinazione selezionabile tramite tocco.

Componente destinazioneDimensione minimaDimensioni consigliate
Margini 2 mmNon applicabile.
Dimensione destinazione visualizzata< 60% della dimensione effettiva90-100% della dimensione effettiva
Dimensione effettiva destinazione9 x 9 mm (48 x 48 pixel in dimensioni 1x)

Per gli elementi di dimensioni inferiori rispetto a quelle consigliate nelle linee guida per l'interfaccia utente, la distanza tra il centro di un elemento e il centro dell'altro elemento deve essere di almeno 9 mm.

Non applicabile
Dimensioni totali destinazione 11 x 11 mm (circa 60 pixel: tre unità griglia da 20 pixel in dimensioni 1x) 13,5 x 13,5 mm (72 x 72 pixel in dimensioni 1x)

Questo implica che le dimensioni combinate della destinazione effettiva e dei margini devono essere superiori alle rispettive dimensioni minime.

 

Queste indicazioni relative alle dimensioni delle destinazioni possono essere adattate allo specifico scenario di impiego. Ecco alcune delle considerazioni su cui si basano le indicazioni fornite:

  • Frequenza dei tocchi: per le destinazioni che vengono toccate di frequente o ripetutamente, provare a impostare dimensioni superiori rispetto a quelle minime,
  • Conseguenze degli errori: le destinazioni che in caso di tocco involontario hanno conseguenze gravi devono avere margini più ampi e devono essere posizionate più lontano dall'area di contenuto. Questo aspetto è particolarmente importante per le destinazioni che vengono toccate di frequente,
  • Posizione nell'area di contenuto
  • Fattore di forma e dimensioni dello schermo
  • Posizione delle dita
  • Visualizzazioni del tocco
  • Hardware e digitalizzatori a tocco

Assistenza nella selezione della destinazione

Windows offre assistenza nella selezione della destinazione per il supporto di scenari in cui i consigli relativi a dimensioni minime e margini qui illustrati non sono applicabili, ad esempio collegamenti ipertestuali in una pagina Web, controlli di calendario, elenchi a discesa e caselle combinate, oppure selezione di testo.

Questi miglioramenti alla piattaforma di selezione della destinazione e ai comportamenti dell'interfaccia utente interagiscono con il feedback visivo (interfaccia utente di rimozione delle ambiguità) per migliorare la precisione e il controllo da parte dell'utente. Per altre informazioni, vedi Linee guida per il feedback visivo.

Se un elemento selezionabile con il tocco deve essere di dimensioni inferiori rispetto a quelle consigliate, è possibile usare le tecniche illustrate di seguito per minimizzare i possibili problemi di selezione della destinazione.

Tethering

Il tethering consiste in un segnale visivo (un connettore da un punto di contatto al rettangolo di delimitazione di un oggetto) che indica all'utente che è connesso a un oggetto e sta interagendo con esso anche se non c'è stato un contatto di input diretto con tale oggetto. Questo può verificarsi quando:

  • È stato rilevato un contatto di tocco entro una determinata soglia di prossimità a un oggetto e tale oggetto è stato identificato come destinazione più probabile del contatto.
  • Un contatto di tocco è stato spostato da un oggetto, ma si trova ancora entro una determinata soglia di prossimità.

Questa funzionalità non viene esposta nell'app di Windows Store scritta con sviluppatori JavaScript.

Scrubbing

Lo scrubbing consiste nel toccare in qualsiasi punto all'interno di un campo di destinazioni e scorrere senza sollevare il dito fino alla destinazione desiderata per selezionarla. L'oggetto attivato sarà l'ultimo che è stato toccato quando l'utente ha sollevato il dito dallo schermo.

Segui queste linee guida per la progettazione di interazioni di scrubbing:

  • Lo scrubbing viene impiegato in combinazione con l'interfaccia utente di rimozione delle ambiguità. Per altre informazioni, vedi Linee guida per il feedback visivo.
  • La dimensione minima consigliata per una destinazione selezionabile tramite scrubbing è di 20 pixel (3,75 mm in dimensioni 1x).
  • Se eseguito su una superficie in cui è consentita la panoramica, ad esempio una pagina Web, lo scrubbing ha la precedenza.
  • Le destinazioni di scrubbing devono essere vicine tra loro.
  • Quando l'utente sposta il dito da una destinazione di scrubbing l'azione viene annullata.
  • Il tethering su una destinazione di scrubbing viene specificato se le azioni eseguite dalla destinazione sono di tipo non distruttivo, ad esempio gli spostamenti tra le date di un calendario.
  • Il tethering viene specificato in una sola direzione, in senso orizzontale o verticale.

Argomenti correlati

Informazioni concettuali
Linee guida per interazioni utente comuni
Progettazione delle interazioni tramite tocco
Esercitazione (app di Windows Store in JavaScript)
Guida introduttiva: Puntatori
Guida introduttiva: Gesti e manipolazioni DOM
Guida introduttiva: Gesti statici
Guida introduttiva: Gesti di manipolazione
Esercitazione (app di Windows Store in C#/VB/C++ e XAML)
Guida introduttiva: Input tocco
Guida introduttiva: Puntatori
Esercitazione (app di Windows Store Scritte in C++ e DirectX)
Risposta all'input tramite tocco (DirectX e C++)
Esempi (DOM)
Esempio di scorrimento, panoramica e zoom HTML
Input: Esempio di gesti istanziabili
Esempi (API di app di Windows Store)
Input: Esempio di manipolazioni e gesti (JavaScript)
Input: Esempio di gesti di Windows 8
Input: Esempio di eventi di input utente XAML
Esempio di scorrimento, panoramica e zoom con XAML
Esempi (DirectX)
Esempio di input tramite tocco DirectX
Input: Esempio di manipolazioni e gesti (C++)
Input: Esempio di testing di tocchi
Riferimenti
Windows.UI.Core
Windows.UI.Input
Windows.UI.Xaml.Input

 

 

Mostra:
© 2015 Microsoft