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 usare i comportamenti di interazione predefiniti dei controlli della piattaforma per app di Windows Store per offrire esperienze utente intuitive e interessanti, che siano anche 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.

I controlli della piattaforma sono in grado di gestire e rispondere all'input da svariate origini, inclusi tocco, touchpad, mouse, penna/stilo e tastiera. Questi controlli 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 altri sistemi operativi sono progettati principalmente per l'input tocco, Windows ti permette di creare il tipo di app che preferisci, indipendentemente dal dispositivo di input. Puoi creare app di consumo, app di produttività, app ibride innovative per PC, laptop, tablet e praticamente per qualsiasi tipo di fattore di forma esistente.

Con i controlli della piattaforma puoi supportare la più ampia gamma di funzionalità e preferenze, rendere la tua app il più possibile usabile, portabile e accessibile, oltre a conquistare il più esteso pubblico potenziale in Windows Store.

Se hai bisogno di altre informazioni sui comportamenti di interazione personalizzati, vedi Personalizzazione delle 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 Interazioni con l'utente, dall'inizio alla fine (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 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 panoramica e scorrimento, layout dei moduli, comportamenti della tastiera virtuale, 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 tramite il modulo e usa questi dati 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:

Attraversamento del modulo
Comportamenti di panoramica e scorrimento incorporati
Comportamenti della tastiera virtuale
Controlli della piattaforma e supporto delle interazioni con l'utente predefinite

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 due pagine (dall'alto in basso): una pagina iniziale e una seconda pagina con un modulo con vari controlli della piattaforma e il miscelatore di colori.

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.

Ti consigliamo di esaminare ogni passaggio se affronti per la prima volta lo sviluppo di app di Windows Store o se non hai familiarità con i vari aspetti correlati alle interazioni con l'utente, l'usabilità e l'accessibilità. 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.

Ti consigliamo di progettare l'interfaccia utente delle app di Windows 8.1 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 dell'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 informazioni, vedi Modelli di esplorazione. Nell'esempio di interazioni con l'utente a supporto di questa esercitazione, iniziamo con il modello di navigazione semplice di base. 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 e da Windows 8.
	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. Le interazioni tramite mouse sono particolarmente adatte alle applicazioni 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

In questa sezione esamineremo alcuni dei dettagli relativi all'interfaccia utente e alle funzionalità incluse nell'esempio di interazioni con l'utente.

Alcuni di questi dettagli potrebbero non essere applicabili alla tua app. Scegli quello che ti interessa.

	Linee guida per i layout dei moduli. Progetta moduli in grado di offrire un'esperienza di interazione di alto livello con scorrimento ridotto al minimo. Tieni conto del modo in cui l'utente compilerà il modulo, delle posizioni in cui potrebbe essere richiesto lo scorrimento e valuta come gestire l'aspetto della tastiera virtuale e le notifiche di errori in linea.
	Linee guida per l'input di testo Scegli il controllo più adatto e decidi quando usare un controllo per l'input di testo a riga singola o multiriga, tenendo conto di tutti i possibili pro e contro.
	Linee guida per la tastiera virtuale e il pannello per la grafia. Prevedi il supporto per l'immissione e la modifica del testo per fattori di forma che non includono una tastiera hardware o altri dispositivi di tipo tastiera. La tastiera virtuale compare quando l'utente tocca un campo di input modificabile e scompare quando il campo di input non è più attivo.
	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.
	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.

Gestire le interazioni con l'utente

In questa sezione vedremo le opzioni disponibili per elaborare le interazioni con l'utente e rispondere con la tua app, oltre a illustrare alcuni dettagli dell'interfaccia utente e delle funzionalità incluse nell'esempio delle interazioni con l'utente.

	Guida introduttiva: Aggiunta di controlli HTML e gestione di eventi La maggior parte delle app necessita di controlli, ad esempio pulsanti, caselle di controllo ed elenchi a discesa. Questo esempio include un modulo che contiene vari controlli che impostano le proprietà nel miscelatore di colori statico.
	Visualizzazione e modifica di testo Aggiungi controlli di input di testo in un'app di Windows Store.
	Tastiera virtuale Apertura e chiusura della tastiera virtuale.
	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 non riuscire a sfruttarne tutte le caratteristiche o non essere in grado di usarla affatto.

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.