Interazioni tramite tocco

Questa sezione fornisce linee guida di progettazione per la creazione di esperienze personalizzate ottimizzate per il tocco nelle app di Windows.

Panoramica

Il tocco è una forma principale di input su Windows e sulle app di Windows che prevede l'uso di una o più dita (o contatti tocco). Questi contatti tocco, e il loro movimento, vengono interpretati come movimenti di tocco e manipolazioni che supportano una varietà di interazioni utente.

Sia Windows SDK che il Windows App SDK includono raccolte complete di controlli ottimizzati per il tocco che offrono esperienze affidabili e coerenti tra le app di Windows.

Usare queste linee guida per la creazione di controlli, esperienze e framework personalizzati per le app di Windows.

Principi di progettazione

Considerare quanto segue durante la progettazione dell'esperienza di tocco nell'app di Windows.

Ottimizzazione tocco

Le esperienze delle app di Windows devono apparire invitanti al tocco, consentire la manipolazione diretta e supportare interazioni meno precise. Prendere in considerazione i tasti di scelta rapida, inclusi i movimenti e l'integrazione della penna e della voce.

Coerenza tra gli stati

L'app deve avere un'esperienza coerente indipendentemente dal metodo di input o dallo stato in cui si trova l'utente. I cambiamenti dal comportamento tradizionale del desktop al comportamento del tablet (vedere Impostazioni consigliate per esperienze tablet migliori), nonché i cambiamenti di orientamento, non devono essere disorientanti, ma piuttosto impercettibili e sviluppati solo quando necessario. L'app deve rielaborare l'interfaccia utente in modi impercettibili per creare un'esperienza familiare e coerente che soddisfi gli utenti in ciò che devono fare.

Reattività

Le app e le interazioni devono fornire agli utenti commenti e suggerimenti in ogni fase (tocco, azione) di un'interazione usando animazioni che rispondono allo stato esistente di un utente, indicando le azioni possibili. Le animazioni dovrebbero inoltre mantenere una velocità di 60 fps per apparire omogenee e moderne.

Rispettare le convenzioni di tocco

Feedback responsivo

Il feedback visivo appropriato durante le interazioni con l'app consente agli utenti di riconoscere, apprendere e adattare il modo in cui le interazioni vengono interpretate sia dall'app che dalla piattaforma Windows. Fornire feedback immediato e continuo che sia evidente, comprensibile e non sovrastato dalle distrazioni in risposta al tocco dell'utente. Questo feedback immediato è il modo in cui gli utenti apprendono ed esplorano gli elementi interattivi dell'app.

• Il feedback deve essere immediato sul tocco e lo spostamento degli oggetti deve essere collegato al dito dell'utente.
• L'interfaccia utente deve rispondere ai movimenti assecondando velocità e movimenti dell'utente. Evitare di usare animazioni basate su fotogrammi chiave.
• Il feedback visivo deve comunicare i possibili risultati prima che l'utente avvii un'azione.

Procedura consigliata

Cosa non fare

Per ulteriori informazioni, vedere Linee guida per i feedback visuali e Movimento in Windows 11

Modelli di interazione touch

Rispettare questi modelli comuni di interazione e movimenti per offrire coerenza e prevedibilità all'esperienza.

Interazioni comuni

Esistono un set di comportamenti e gesti comuni di tocco con cui gli utenti hanno familiarità e si aspettano che funzionino in modo coerente in tutte le esperienze di Windows.

• Tocco per attivare o selezionare un elemento
• Pressione breve e trascinamento per spostare un oggetto
• Pressione per accedere a un menu di comandi secondari contestuali
• Scorrimento rapido (o trascinamento e rilascio) per i comandi contestuali
• Rotazione in senso orario o antiorario rispetto a un punto

Interazioni

Tocco

Scorrimento rapido (o trascinamento e rilascio)

Pressione breve e trascinamento

Rotazione

Pressione

Per ulteriori informazioni, vedere Linee guida per i feedback visuali e Movimento in Windows 11

Gesti

I movimenti riducono lo sforzo richiesto dagli utenti per spostarsi e agire sulle interazioni comuni. Se possibile, supportare l'interfaccia utente con i movimenti tramite tocco per semplificare la navigazione e l'azione degli utenti in un'app.

Se si passa da una visualizzazione all'altra, usare animazioni connesse in modo che gli stati nuovi e quelli esistenti siano entrambi visibili a metà trascinamento. Se interagiscono con l'interfaccia utente, gli elementi devono seguire lo spostamento dell'utente, fornire feedback e, al rilascio, reagire con azioni aggiuntive in base alle soglie riferimento per la posizione di trascinamento.

I movimenti devono anche essere interattivi con le sequenze e gli scorrimenti basati sull'inerzia e si trovano all'interno di un'ampia gamma di movimenti.

• Trascinare o scorrere per andare avanti e tornare indietro
• Trascinare per ignorare
• Trascinare verso il basso per aggiornare

Gesti

Trascinare o scorrere per andare avanti e tornare indietro

Trascinare verso il basso per aggiornare

Trascinare per ignorare

Per ulteriori informazioni, vedere Transizioni di pagina e Trascinare verso il basso per aggiornare.

Movimenti personalizzati

Usare movimenti personalizzati per portare i tasti di scelta rapida e i movimenti del trackpad più utilizzati all'interno di un'interazione tramite tocco. Facilitare l'individuabilità e la risposta tramite inviti dedicati con animazioni e stati di visualizzazione (ad esempio, il posizionamento di tre dita sullo schermo causa la riduzione delle finestre per il feedback visivo).

• Non eseguire l'override dei movimenti comuni perché ciò può causare confusione per gli utenti.
• Prendere in considerazione l'uso di movimenti con più dita per azioni personalizzate, ma tenere presente che il sistema ha riservato alcuni movimenti con più dita per il passaggio rapido tra app e desktop.
• Tenere presente che i movimenti personalizzati che hanno origine vicino ai bordi di uno schermo come movimenti del bordo sono riservati a comportamenti a livello di sistema operativo, che possono essere richiamati accidentalmente.

Evitare la navigazione accidentale

Se l'app o il gioco potrebbero comportare interazioni frequenti vicino ai bordi dello schermo, valutare la possibilità di presentare la propria esperienza in modalità Esclusiva a schermo intero (FSE) per evitare attivazioni accidentali dei riquadri a comparsa di sistema (gli utenti dovranno scorrere direttamente sulla scheda temporanea per eseguire il pull nel riquadro a comparsa del sistema associato).

Nota

Evitare di usarlo, a meno che non sia assolutamente necessario, perché rende più difficile per gli utenti uscire dall'app o usarlo in combinazione con altri utenti.

Esperienze della tastiera virtuale

La tastiera virtuale abilita l'inserimento di testo sui dispositivi che supportano il tocco. I controlli di input di testo dell'app Windows richiamano la tastiera virtuale per impostazione predefinita quando un utente tocca un campo di input modificabile.

Richiamare il tocco sul campo di testo

La tastiera virtuale dovrebbe essere visualizzata quando un utente tocca un campo di input di testo. Questa operazione funzionerà automaticamente usando le API di sistema per mostrare e nascondere la tastiera. Vedere Rispondere alla presenza della tastiera virtuale.

Usare controlli di input di testo standard

L'uso di controlli comuni offre un comportamento prevedibile e riduce al minimo le sorprese per gli utenti.

I controlli di testo che supportano Text Services Framework (TSF) offrono funzionalità di scrittura tramite forme (tastiera rapida).

Segnali della tastiera

Tenere conto di input, postura, segnali hardware che rendono la tastiera virtuale la modalità principale di input (la tastiera hardware viene scollegata, i punti di ingresso vengono richiamati con il tocco, chiaro intento dell'utente di digitare).

Riorganizzazione del flusso in modo appropriato

• Tenere presente che la tastiera può occupare fino al 50% dello spazio dello schermo su dispositivi più piccoli.
• Evitare di nascondere il campo di testo attivo con la tastiera virtuale.
• Se la tastiera virtuale nasconde il campo di testo attivo, scorrere il contenuto dell'app verso l'alto (con animazione) fino a quando il campo non è visibile.
• Se la tastiera virtuale nasconde il campo di testo attivo, ma il contenuto dell'app non può scorrere verso l'alto, provare a spostare il contenitore dell'app (con animazione).

Colpisci i bersagli

Assicurarsi i le destinazioni raggiunte siano comode e invitino a toccare. Se gli obiettivi raggiunti sono troppo piccoli o eccessivamente compattati, gli utenti devono essere più precisi, il che è difficile con il tocco e può portare a un'esperienza di scarso livello.

Tangibile

Definiamo toccabile uno spazio minimo di 40 x 40 epx, anche se l'oggetto visivo è più piccolo, o di 32 epx di altezza se la larghezza è di almeno 120 epx.

I nostri controlli comuni sono conformi a questo standard (sono ottimizzati sia per gli utenti del mouse che per il tocco).

Ottimizzazione tocco

Per un'interfaccia utente ottimizzata per il tocco, è consigliabile aumentare le dimensioni di destinazione a 44 x 44 epx con almeno 4 epx di spazio visibile tra le destinazioni.

È consigliabile usare due comportamenti predefiniti: sempre ottimizzato per il tocco o transizione in base ai segnali del dispositivo.

Quando un'app può essere ottimizzata per il tocco senza compromettere gli utenti del mouse, soprattutto se l'app viene usata principalmente con il tocco, allora ottimizzare sempre il tocco.

Se si esegue la transizione dell'interfaccia utente in base ai segnali del dispositivo per lo stato del dispositivo, fornire sempre esperienze coerenti tra gli stati.

Associare gli oggetti visivi alla destinazione tocco

È consigliabile aggiornare gli oggetti visivi quando le dimensioni della destinazione tocco cambiano. Ad esempio, se gli obiettivi raggiunti aumentano quando gli utenti accedono al comportamento su tablet, anche l'interfaccia utente che rappresenta gli obiettivi raggiunti deve aggiornarsi per aiutare gli utenti a comprendere la modifica dello stato e l'invito aggiornato. Per ulteriori informazioni, vedere Nozioni di base sulla progettazione del contenuto per le app di Windows, Linee guida per destinazioni con tocco, Dimensioni e densità del controllo.

Ottimizzazione verticale

Supportare i layout reattivi che rappresentano sia finestre alte che ampie per garantire che un'app sia ottimizzata per gli orientamenti orizzontale e verticale.

Ciò garantisce inoltre che le finestre dell'app visualizzino correttamente gli oggetti visivi principali dell'interfaccia utente negli scenari multitasking (app posizionate in modo affiancato con proporzioni verticali) indipendentemente dall'orientamento e dalle dimensioni dello schermo.