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

[ 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.

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.

Wireframe dell'app di esempio
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.

icona inizio

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.

icona passaggio

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.

icona passaggio

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.

icona passaggio

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.

icona passaggio

Risposta alle interazioni tramite mouse.

Usa le interazioni tramite mouse per le app che richiedono azioni di puntamento e clic di precisione.

icona passaggio

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.

icona passaggio

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.

icona passaggio

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.

icona passaggio

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.

icona passaggio

Guida introduttiva: Puntatori

Personalizza le interazioni con l'utente tramite gli eventi del puntatore.

icona passaggio

Guida introduttiva: Gesti e manipolazioni DOM

Personalizza le interazioni con l'utente tramite eventi DOM (Document Object Model).

icona passaggio

Guida introduttiva: Gesti statici

Guida introduttiva: Gesti di manipolazione

Personalizza le interazioni con l'utente tramite GestureRecognizer.

icona passaggio

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).

icona passaggio

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.

icona passaggio

Come rendere accessibili gli eventi di tocco.

Puoi rendere accessibili gli eventi di tocco associando gli eventi del puntatore a eventi clic del mouse.

icona passaggio

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

icona requisiti store

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.

icona fine

Ecco fatto. La tua implementazione dovrebbe essere simile a quella dell'esempio di interazioni con l'utente.

Non ti resta che goderti i risultati.

 

Vuoi saperne di più?

Pianificazione di app di Windows Store

Quale esperienza vuoi offrire ai tuoi utenti?

Progettare per l'accessibilità

Offri funzionalità e contenuti in grado di rispondere alle esigenze della più vasta gamma possibile di abilità, disabilità e preferenze degli utenti.

Progettare per fattori di forma diversi

Scopri altro sulla gestione dei diversi dispositivi, metodi di input e orientamenti dello schermo.

Indice delle linee guida per l'esperienza utente

Consulta l'elenco completo delle linee guida per l'esperienza utente.

Esempi

DOM

API di app di Windows Store