Personalizzazione delle interazioni con l'utente, dall'inizio alla fine (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Dispositivi di input supportati dalle app di Windows Store

Puoi creare interazioni personalizzate intuitive e divertenti, ma allo stesso tempo efficienti e coerenti per tutti i dispositivi di input. Segui le linee guida, le procedure consigliate e gli esempi qui descritti per definire queste esperienze utente per la tua app di Windows Store.

Nota Ti consigliamo di usare le librerie di controlli della piattaforma (HTML e XAML), quando possibile. I controlli inclusi in queste librerie forniscono l'esperienza completa di interazione con l'utente in Windows 8.1, che include le interazioni standard, gli effetti fisici animati, il feedback visivo e l'accessibilità. Se non hai l'esigenza di supportare interazioni personalizzate, usa questi controlli predefiniti.

Le app di Windows Store possono elaborare l'input da svariate origini, inclusi tocco, touchpad, mouse, penna/stilo e tastiera. Queste app supportano anche l'elaborazione dell'input da un'ampia gamma di modalità dei dispositivi di input, ad esempio tastiera virtuale, rotellina del mouse e gomma per input penna. Mentre altre piattaforme sono progettate principalmente per l'input tocco, puoi creare il tipo di app di Windows Store che preferisci e senza vincoli: app di consumo, app di produttività, app ibride innovative per PC, laptop, tablet e praticamente per qualsiasi tipo di fattore di forma esistente.

Se hai bisogno di altre info sui controlli della piattaforma e i relativi comportamenti di interazione, vedi Interazioni con l'utente, dall'inizio alla fine (HTML).

Prerequisiti

Le linee guida, le attività e il codice di esempio qui descritti sono specifici per lo sviluppo di app di Windows Store con JavaScript. Per la versione specifica per le app di Windows Store create con C++, C# o Visual Basic, vedi Personalizzazione delle interazioni con l'utente (XAML).

Se non hai familiarità con lo sviluppo di app di Windows Store con JavaScript, ti consigliamo di leggere gli argomenti seguenti per scoprire di più sulle tecnologie descritte in questa guida.

Sviluppo di app di Windows Store con JavaScript

Migliora le tue conoscenze per ogni aspetto, dalla schermata Start al layout e i controlli dell'interfaccia utente, per le app di Windows Store scritte in JavaScript.
Creare la prima app di Windows Store in JavaScript

Come usare JavaScript con HTML5 e fogli di stile CSS (Cascading Style Sheets) per creare una semplice app di Windows Store.

Esempio di interazioni con l'utente

Oltre agli esempi e ai frammenti di codice inclusi negli argomenti indicati di seguito, faremo riferimento all'esempio di interazioni personalizzate con l'utente. Questo esempio mostra come usare e adattare le funzionalità e i concetti correlati alle interazioni nella tua app di Windows Store. L'esempio include i principi, le raccomandazioni e i dettagli di implementazione per controlli personalizzati, accessibilità dell'interfaccia utente e interazioni personalizzate. Con questo esempio potrai vedere come abbiamo messo in pratica le nostre linee guida.

Ecco una breve descrizione dell'esempio

In questo esempio creiamo un miscelatore di colori, in forma di un oggetto quadrato che accetta l'input diretto da touchscreen, touchpad, mouse, penna/stilo o tastiera. Questi dati vengono usati per specificare un colore RGB e un angolo di rotazione, che viene puoi convertito in un livello corrispondente di rosso, verde o blu.

Nell'esempio vengono dimostrate le funzionalità seguenti:

Controllo personalizzato
Supporto di personalizzazioni di base (HTML e XAML) dei comportamenti di interazione con l'utente
Rilevamento, riconoscimento ed elaborazione di gesti personalizzati

Ecco un diagramma wireframe che illustra a grandi linee il funzionamento dell'esempio e le funzionalità di interazione con l'utente implementate.

L'esempio contiene tre pagine (da sinistra a destra): una pagina iniziale, una seconda pagina con un controllo personalizzato che supporta la rotazione basata su DOM e una terza pagina con un controllo personalizzato che implementa funzionalità aggiuntive tramite le API GestureRecognizer Windows.UI.Input.

Di seguito proponiamo un semplice riepilogo strutturato delle attività per facilitarti la creazione di un'app conforme alle procedure consigliate per le interazioni con l'utente nelle app di Windows Store. Ogni attività include link a info corrispondenti nel centro per sviluppatori di app di Windows Store.

Se non hai familiarità con lo sviluppo di app di Windows Store o con le interazioni con l'utente, l'usabilità e l'accessibilità, troverai utile seguire ogni passaggio in ordine. Gli aspetti correlati dello sviluppo delle interazioni con l'utente sono raggruppati.

Pianificare la tua app

Prima di iniziare con la progettazione e lo sviluppo, è necessario pianificare l'app. Prenditi il tempo necessario per individuare le caratteristiche del tuo pubblico e le funzionalità e attività supportate dall'app.

Progetta l'interfaccia utente delle app di Windows Store principalmente per le interazioni tramite tocco. L'input tocco è intrinsecamente impreciso (e richiede un'area di input) rispetto agli altri tipi di input che offrono in genere una precisione a livello di pixel. I controlli ottimizzati per il tocco insieme a un set di API per le interazioni della piattaforma per l'elaborazione degli eventi basati su puntatore offrono funzionalità equivalenti per i diversi dispositivi con una quantità minima di codice aggiuntivo.

	Scegli il modello di navigazione più adatto alla tua app e al relativo contenuto. Per altre info, vedi Modelli di navigazione. Nell'esempio di interazioni con l'utente a supporto di questa esercitazione, iniziamo con il modello di navigazione semplice. Scarica il modello e sperimenta mentre segui questi passaggi oppure lanciati e usa il modello per avviare la progettazione e lo sviluppo della tua app.
	Interfaccia utente delle app di Windows Store, dall'inizio alla fine (HTML). Progetta e definisci il layout degli elementi e del contenuto dell'interfaccia utente, come la finestra dell'app, i riquadri a comparsa, le finestre di dialogo e le barre dell'app. Facciamo riferimento a linee guida, procedure consigliate ed esempi per aiutarti a sfruttare al meglio tutte le funzionalità per l'interfaccia utente di Windows 8.1 e a creare un'interfaccia utente che sia intuitiva e coerente con quella delle altre app di Windows Store.
	Risposta alle interazioni degli utenti. Impara a conoscere la piattaforma di interazione con l'utente, le origini di input (tocco, touchpad, mouse, penna/stilo e tastiera), le modalità (tastiera virtuale, rotellina del mouse, gomma per input penna e così via) e le interazioni supportati dalle app di Windows Store.
	Modalità di interazione degli utenti con i dispositivi tocco. Confronta le interazioni comuni e i gesti corrispondenti per riprodurle tramite tocco, touchpad, mouse e tastiera.

Dispositivi di input

Anche se è ottimizzata per l'input tocco, la piattaforma offre supporto completo per gli altri dispositivi di input qui elencati.

	Risposta alle interazioni tramite mouse. Usa le interazioni tramite mouse per le app che richiedono azioni di puntamento e clic di precisione.
	Risposta alle interazioni tramite tastiera. La tastiera è indispensabile per le persone con determinate disabilità o per gli utenti che semplicemente la considerano un modo più efficiente di interagire con un'app.
	Risposta alle interazioni con stilo e penna. Si può usare una penna o uno stilo come dispositivo di puntamento e di disegno. Questi dispositivi sono in genere associati alla funzionalità di input penna digitale.
	Risposta alle interazioni tramite touchpad. I dispositivi touchpad uniscono l'input multitocco con l'input di precisione dei dispositivi di puntamento, come il mouse. Grazie a questa combinazione, il touchpad è indicato sia per l'interfaccia utente di Windows 8.1 ottimizzata per il tocco, sia per le destinazioni di dimensioni minori delle app di produttività e dell'ambiente desktop.

Progettazione delle interazioni

Segui le linee guida per l'esperienza utente di Windows con creatività quando progetti le interazioni con l'utente. Scegli i dispositivi di input supportati dall'app e il modo in cui l'app risponde. Ottimizza l'esperienza utente su più dispositivi, supporta la gamma più ampia possibile di funzionalità e preferenze e attira il maggior numero possibile di clienti potenziali in Windows Store. In questo modo la tua app sarà più fruibile, portatile e accessibile.

Le linee guida per le interazioni con l'utente ti aiuteranno a offrire un'esperienza utente coinvolgente e Immersive coerente tra le diverse modalità di input:

Linee guida per interazioni utente comuni

Crea esperienze di interazione con l'utente con funzionalità coerenti per tutti i dispositivi.
Linee guida per il cross-slide

Supporta la selezione con il gesto scorrimento rapido e il trascinamento (spostamento) con il gesto scorrimento.
Linee guida per lo zoom ottico e il ridimensionamento

Lo zoom ottico consente agli utenti di ingrandire la visualizzazione del contenuto all'interno di un'area di contenuto (l'operazione viene eseguita sull'area di contenuto stessa), mentre il ridimensionamento consente di modificare la dimensione relativa di uno o più oggetti senza modificare la visualizzazione dell'area di contenuto (viene eseguito sugli oggetti all'interno dell'area).
Linee guida per la panoramica

Valuta in che modo la panoramica e lo scorrimento possono aiutare gli utenti a spostarsi all'interno di una singola visualizzazione, come la struttura di cartelle di un computer, una raccolta di documenti o un album di foto. Tieni anche conto di come gli utenti possono esplorare il contenuto che non rientra nel riquadro di visualizzazione, sia orizzontalmente che verticalmente.
Linee guida per la rotazione

Puoi ruotare gli oggetti tramite un movimento in direzione circolare (in senso orario o antiorario) tramite tocco o altri controlli dell'interfaccia utente per mouse, penna/stilo o tastiera.
Linee guida per lo zoom semantico

Puoi presentare e supportare la navigazione in set estesi di dati o contenuti correlati in una singola visualizzazione, ad esempio un album di foto, un elenco di app o una rubrica.
Linee guida per la selezione di testo e immagini

Predisponi l'interfaccia utente e le funzionalità per la selezione del contenuto.
Linee guida per la selezione della destinazione

Ottieni maggiore soddisfazione dagli utenti della tua app migliorando la precisione e l'affidabilità del tocco.
Linee guida per la risposta visiva

Aiuta gli utenti a capire la tua app, il sistema e il dispositivo di input, in modo che possano imparare e adattarsi. Per ottenere questi risultati puoi indicare l'esito positivo di un'interazione, migliorare la sensazione di controllo per gli utenti, incoraggiare le interazioni, comunicare lo stato del sistema e ridurre gli errori. La risposta visiva, nota anche visualizzazioni di contatto o interfaccia utente di feedback, indica se le interazioni con l'app vengono rilevate, interpretate e gestite come previsto.

Gestire le interazioni con l'utente

In questa sezione illustreremo le opzioni a tua disposizione per elaborare le interazioni con l'utente della tua app e rispondere alle interazioni. Esamineremo alcuni dei dettagli relativi all'interfaccia utente e alle funzionalità incluse nell'esempio di interazioni con l'utente.

	Guida introduttiva: Puntatori Personalizza le interazioni con l'utente tramite gli eventi del puntatore.
	Guida introduttiva: Gesti e manipolazioni DOM Personalizza le interazioni con l'utente tramite eventi DOM (Document Object Model).
	Guida introduttiva: Gesti statici Guida introduttiva: Gesti di manipolazione Personalizza le interazioni con l'utente tramite GestureRecognizer.
	Animazione dell'interfaccia utente Integra l'aspetto di Windows 8 nella tua app di Windows Store tramite la libreria di animazioni della piattaforma (per gli eventi del puntatore o i gesti scorrimento rapido) oppure personalizza le animazioni con transizioni, animazioni e trasformazioni CSS3 (Cascading Style Sheets, livello 3 (CSS3).
	Implementazione dell'accessibilità da tastiera. Per molti utenti con problemi di vista o movimento, la tastiera rappresenta il solo mezzo utile per esplorare l'interfaccia utente delle app e accedere alle funzionalità disponibili. Se l'app non offre funzioni adeguate di accesso da tastiera, questi utenti potrebbero avere difficoltà a usarla o non riuscire affatto.
	Come rendere accessibili gli eventi di tocco. Puoi rendere accessibili gli eventi di tocco associando gli eventi del puntatore a eventi clic del mouse.
	Test dell'accessibilità dell'applicazione. Usa gli strumenti di testing dell'accessibilità inclusi in Windows Software Development Kit (SDK) per Windows 8, Inspect e UI Accessibility Checker (AccChecker), utili per verificare l'accessibilità della tua app. Per poter dichiarare l'app accessibile in Windows Store, devi risolvere tutti gli errori con priorità 1 segnalati da AccChecker con le verifiche Web tramite ARIA (Accessible Rich Internet Applications) abilitate. Nota: Assistente vocale supporta un set di movimenti di tocco personalizzati (descritti in questo argomento) per l'esplorazione e la lettura del contenuto dell'app.

Operazioni finali

Certifica la tua app con il Kit di certificazione app Windows.

Esegui il Kit di certificazione app Windows per assicurarti che la tua app soddisfi i requisiti per Windows Store. Esegui queste verifiche ogni volta che aggiungi una funzionalità principale alla tua app.