Case study di progettazione: dalle app per siti Web alle app di Windows Runtime

La progettazione di siti Web è una procedura comune da qualche decennio. Windows 8 permette ai progettisti e agli sviluppatori di usare le tecnologie Web che conoscono meglio, ad esempio HTML5, fogli di stile di livello 3 (CSS3) e JavaScript, per creare app di Windows Store. Spiegheremo ora come esporre le funzionalità di un sito Web per trasformarlo in un'app di Windows Store di grande efficacia e mostreremo come fornire valore aggiunto, personalizzazione e intensità all'esperienza utente usando le funzionalità della piattaforma Windows 8.

Il nostro obiettivo è aiutare i progettisti e gli sviluppatori a reinventare i siti Web come app di Windows Store.

Per altre informazioni sulle potenzialità commerciali di Windows 8, vedi Vendita di app. Per maggiori informazioni sulle funzionalità usate per creare app di Windows Store, vedi la Guida al prodotto Windows 8 per sviluppatori.

Scaricare questo articolo: Per scaricare questo articolo, vedi Versione offline di questo articolo.

Il sito Web e l'app di gastronomia ambulante

Per questo articolo abbiamo scelto un sito Web di gastronomia ambulante che consente ai visitatori di cercare gli ambulanti che passano nella loro zona, tenersi aggiornati su tutte le ultime novità e scrivere recensioni sui servizi. Nel corso di questo case study orientato alla progettazione, forniremo suggerimenti su come reinventare la funzionalità centrale del sito Web e trasporla in un'app di Windows Store.

Ai fini della migrazione verso un'app di Windows Store, il nostro obiettivo era evidenziare le caratteristiche migliori del sito Web, mantenendo un livello di funzionalità centrale analogo a quello del sito. Abbiamo stabilito che l'app di Windows Store è più funzionale quando un utente deve trovare gli ambulanti presenti in zona. La figura seguente mostra l'anatomia dell'interfaccia utente del sito Web di gastronomia ambulante. Qui mostriamo come convertire i singoli componenti dell'interfaccia utente nella progettazione Microsoft.

1. Layout ed esplorazione
2. Comandi e azioni
3. Contratti: ricerca, condivisione e impostazioni
4. Tocco
5. Ridimensionamento e visualizzazioni
6. Notifiche

Layout ed esplorazione

Risalto al contenuto, non al riquadro

La maggior parte dei siti Web usa schemi consolidati per il layout. La progettazione della home page include un'interfaccia utente che supporta l'esplorazione (sia intestazione che piè di pagina), i componenti di utilità (accesso, ricerca) e l'accesso ad altri contenuti (blog e news). Questi elementi sono comuni nei siti Web, ma tendono a distogliere l'attenzione dell'utente dal vero obiettivo: trovare l'ambulante più vicino. Nel progettare l'app di Windows Store abbiamo rimosso gran parte dell'interfaccia utente e del contenuto, perché non direttamente correlati alla funzione principale dell'app.

Sito Web:

• Il sito Web si basa su un comune schema di layout a due colonne: a sinistra viene visualizzato il contenuto principale, a destra altri contenuti.
• Il punto focale del sito sono i negozi ambulanti, che occupano all'incirca un terzo della schermata.

App di Windows Store:

Tutto lo spazio nella pagina di destinazione è dedicato a ciò in cui l'app eccelle: trovare un negozio ambulante vicino.

Esempio: evidenziazione del contenuto nella home page del sito Web e nella schermata principale dell'app di Windows Store.

Sia il sito Web che l'app di Windows Store mostrano i negozi ambulanti e le categorie di gastronomia nelle rispettive pagine principali. A causa dei limiti di spazio del sito Web, ogni categoria di gastronomia è rappresentata da una sola immagine. Quando abbiamo progettato la schermata principale dell'app di Windows Store, abbiamo deciso di inserire in primo piano un numero maggiore di informazioni sui negozi ambulanti, in modo da fornire all'utente più contesto e creare un'interfaccia più attraente.

Sito Web: Ogni categoria di negozi ambulanti di gastronomia è rappresentata da una sola immagine. L'utente deve spostarsi in un'altra pagina per visualizzare altri negozi ambulanti della stessa categoria di gastronomia e quindi selezionarne uno per vedere i dettagli.	App di Windows Store: Ogni categoria è rappresentata da un gruppo di immagini, così gli utenti possono constatare rapidamente quali negozi ambulanti di una determinata categoria si trovano nella loro zona. Gli utenti possono selezionare un negozio ambulante direttamente dalla schermata principale.

 

Per informazioni su come scegliere il miglior modello di esplorazione per la tua app, vedi Modelli di esplorazione.

Per una dimostrazione pratica, vedi l'argomento Modello di esplorazione semplice incluso nella serie Funzionalità delle app dall'inizio alla fine.

Usare la manipolazione diretta per l'esplorazione

All'interno del sito Web, gli elementi per l'esplorazione si ripetono sia nella barra di spostamento in alto che nel piè di pagina. Gli elementi per l'esplorazione sono fissi e sempre in vista. Nell'app di Windows Store abbiamo progettato elementi per l'esplorazione che possono essere sia integrati direttamente nel contenuto, sia messi da parte finché un utente non li richiama.

Esempio: esplorazione di un negozio ambulante specifico nel sito Web e nell'app di Windows Store.

Sito Web: A. Un utente si sposta nella pagina separata di una categoria nel sito Web per visualizzare tutte le categorie di negozi ambulanti. B. L'utente seleziona quindi una categoria (nell'esempio: Barbecue food trucks) ed entra nella categoria. C. L'utente può finalmente scegliere un negozio ambulante dalla categoria selezionata.

App di Windows Store: A. La schermata principale include una pagina hub costituita da gruppi di contenuti: negozi ambulanti selezionati, negozi ambulanti in zona e visualizzazione per categoria. B. Con il tocco gli utenti possono eseguire una panoramica in una delle due direzioni, in modo da visualizzare le diverse categorie di negozi ambulanti direttamente nella schermata principale. C. Poiché ogni hub dà risalto a svariati negozi ambulanti della categoria, gli utenti possono toccarne uno per andare direttamente alla pagina di quel negozio ambulante, oppure toccare il testo dell'intestazione del gruppo della categoria (nell'esempio: Asian) per andare alla pagina della categoria.

 

Comandi e azioni

Tenere i comandi e le azioni dell'app nella barra dell'app

Spesso nei siti Web vengono usati comandi ad hoc che sono azioni dell'utente dipendenti dal contenuto. Nel nostro sito Web, ad esempio, in ogni pagina di un negozio ambulante è presente un link che gli utenti possono usare per caricare le foto del negozio ambulante. Queste azioni dipendono dal contesto e si ripetono in ogni pagina di ogni negozio ambulante.

Riprendendo il nostro approccio iniziale alla progettazione delle app di Windows Store (più risalto al contenuto che al riquadro), abbiamo inserito tutte le azioni contestuali nella barra dell'app, un controllo comune nel sistema. In più abbiamo posizionato i comandi più usati vicino ai bordi, per renderli facilmente raggiungibili. Adottando questi principi di progettazione, l'area di progettazione dell'app non è ingombra di controlli e gli utenti, indipendentemente dal punto dell'app in cui si trovano, possono toccare la barra dell'app nella parte superiore o inferiore dello schermo per vedere le azioni pertinenti. Tutte le app di Windows Store possono includere una barra dell'app con i comandi più comuni. Man mano che gli utenti acquisiscono familiarità con le interazioni della barra dell'app, l'usabilità dell'app aumenta e il sistema appare più coeso nel suo insieme.

Esempio: caricamento della foto di un negozio ambulante nel sito Web e nell'app di Windows Store.

Sito Web: Comandi ad hoc. Le azioni dell'utente dipendono dal contenuto.	App di Windows Store: La barra dell'app è nascosta per impostazione predefinita, così da creare un'esperienza Immersive per l'utente. L'utente può far scorrere rapidamente un dito dal bordo inferiore o superiore per accedere ad azioni contestuali. Le azioni disponibili cambiano in base alla posizione dell'utente all'interno dell'app o in base al contenuto selezionato.

 

Contratti

Il sito Web di gastronomia ambulante segue le convenzioni standard per le azioni globali, ad esempio la ricerca e le informazioni di accesso. Queste azioni sono visualizzate permanentemente nell'angolo superiore destro del sito. Quando abbiamo progettato l'app di Windows Store, non abbiamo voluto includere una nostra interfaccia utente per queste azioni globali. Abbiamo preferito usare le funzionalità incorporate nel sistema, che comprendono i contratti di tipo ricerca, condivisione e impostazioni. Poiché questi componenti dell'interfaccia utente non sono sempre visualizzati, il pannello Canvas dell'app è più pulito e c'è più spazio per il contenuto.

Usare il contratto Search per un'esperienza di ricerca centralizzata

Come nella maggioranza dei siti Web, anche in questo sito di gastronomia ambulante è presente una casella di ricerca in ogni pagina e la ricerca è limitata all'ambito del sito. Vale a dire che un utente deve accedere al sito Web per poter eseguire una ricerca.

Per la progettazione dell'esperienza di ricerca nelle app di Windows Store, abbiamo usato il contratto Ricerca, in modo che gli utenti possano cercare un buon camion senza dover aprire prima l'app. L'accesso alla ricerca consente all'utente di richiamare la funzionalità di ricerca da qualsiasi punto del sistema.

Esempio: ricerca di un negozio ambulante nel sito Web e nell'app di Windows Store.

Sito Web:

• La casella di ricerca è sempre visibile nel sito.
• Quando vengono visualizzati i risultati della ricerca, tutti i riquadri del sito Web sono ancora presenti.
• Gli utenti devono prima accedere al sito Web per poter cercare un negozio ambulante.

App di Windows Store:

• Gli utenti possono eseguire una ricerca da qualsiasi posizione all'interno dell'app, facendo scorrere rapidamente il dito sul bordo per visualizzare gli accessi e scegliere la ricerca. Puoi anche fornire una casella di ricerca in-app visualizzabile nella barra dell'app o nel canvas.
• L'app di gastronomia ambulante è selezionata per impostazione predefinita, dal momento che l'utente si trova all'interno dell'app. Non appena l'utente inizia a digitare le prime lettere, l'app propone suggerimenti nel riquadro della ricerca. Gli utenti possono quindi vedere rapidamente quali termini generano risultati. Dopo che l'utente avrà inviato la propria query (nell'esempio: barbecue truck), l'app mostrerà una visualizzazione dei risultati della ricerca.
• La visualizzazione dei risultati della ricerca è pulita e non contiene riquadri superflui. Se aggiungi una casella di ricerca, puoi controllare l'intera esperienza utente di ricerca.

Esempio: ricerca di un negozio di gastronomia ambulante dall'esterno dell'app (disponibile solo nell'app di Windows Store).

Oltre che dall'interno dell'app, gli utenti possono eseguire ricerche dall'esterno selezionando l'app di gastronomia ambulante come destinazione della ricerca. Nell'esempio seguente un utente sta cercando un negozio ambulante specializzato in carne alla griglia dalla schermata Start. L'utente tocca l'app di gastronomia ambulante nell'elenco delle app all'interno del riquadro di ricerca, avviando così la nostra app e completando la query di ricerca. Dal momento che abbiamo ottimizzato la nostra app di gastronomia ambulante in modo che trovi i negozi ambulanti più vicini, con un solo tocco l'utente può completare la sua ricerca e trovare i negozi ambulanti specializzati in carne alla griglia nella sua zona.

Usare il contratto Condivisione per raggiungere un maggior numero di destinazioni e persone

Nel sito Web di gastronomia ambulante gli utenti possono condividere informazioni su un particolare negozio ambulante usando l'e-mail, Facebook o Twitter. Le opzioni di condivisione sono spesso accessibili da diverse posizioni in un sito Web, accanto al contenuto condivisibile.

La condivisione assume una luce completamente nuova nella nostra app di Windows Store grazie al contratto Condivisione. Usando l'accesso alla condivisione incorporato nel sistema, non abbiamo più bisogno di disseminare in tutta l'app i pulsanti di condivisione. Gli utenti possono trovare le opzioni di condivisione sempre nella stessa posizione, indipendentemente dall'app che stanno usando in quel particolare momento. Questo cambiamento rappresenta un'importante semplificazione sia per la progettazione, sia per lo sviluppo, perché elimina la necessità di connettersi a ogni servizio che l'utente potrebbe voler usare. Dopo l'integrazione del contratto Condivisione, la nostra app è connessa con ogni app Windows che implementa lo stesso contratto. Non servono modifiche dell'interfaccia API per accedere ai servizi Web esterni.

Esempio: condivisione di una foto del negozio di gastronomia ambulante.

Sito Web: Ogni servizio di condivisione ha il proprio pulsante. I pulsanti di condivisione sono disseminati in tutto il sito Web.	App di Windows Store: Una posizione unica per tutte le opzioni di condivisione in tutte le app di Windows Store. Gli utenti possono richiamare l'accesso alla condivisione da qualsiasi posizione all'interno dell'app. Quando un utente sceglie un servizio di condivisione, l'app di destinazione può personalizzare il riquadro dell'interfaccia utente e il marchio.

 

Esempio: esame attento del riquadro di condivisione.

App di Windows Store:

• Tutte le app implementate come destinazioni di condivisione compaiono nell'elenco delle app, nel riquadro di condivisione. Ad esempio, Socialite, Tweet@Rama o Mail.
• Gli utenti possono condividere svariati tipi di contenuti supportati da un'app. Si possono condividere, ad esempio, link e foto o salvare informazioni in un'app per prendere appunti.
• Le destinazioni di condivisione più frequenti sono visualizzate all'inizio per aiutare gli utenti a completare il flusso di lavoro di condivisione più rapidamente.

Usare il riquadro delle impostazioni

Il sito Web di gastronomia ambulante include un insieme di funzioni di utilità (nell'esempio: About us, Sign-in, Contact info e Newsletters). Secondo i tradizionali schemi di progettazione Web, queste funzioni sono posizionate in aree specifiche della schermata affinché gli utenti possano trovarle facilmente. Sono tuttavia disseminate in diverse aree del sito. Le attività di configurazione e gestione non rappresentano i punti focali dell'app di Windows Store. L'uso del contratto impostazioni e di un singolo punto di ingresso permette agli utenti di non dover memorizzare queste funzioni che riguardano la gestione dell'app e di richiamarle facilmente solo al momento opportuno.

Esempio: impostazione di opzioni nel sito Web e nell'app di Windows Store.

Sito Web:

• Le funzioni di utilità About Us, Contact e Newsletter sono presenti in diverse aree del sito.

App di Windows Store:

A. Le opzioni da impostare si trovano tutte nella stessa posizione del riquadro delle impostazioni.

B. Gli utenti possono eseguire l'accesso da qualsiasi posizione dell'app, senza abbandonare il contesto corrente.

C. Gli utenti possono specificare quali tipi di notifica desiderano ricevere. Questa impostazione sostituisce la newsletter del sito e permette agli utenti di ricevere informazioni sempre aggiornate sull'app.

Usare selezione file per accedere ai file da varie posizioni

Il sito Web di gastronomia ambulante incoraggia gli utenti a caricare le foto dei negozi ambulanti che passano nella loro zona. Questa funzionalità può essere riprodotta facilmente in un'app di Windows Store usando selezione file. La finestra di dialogo a schermo intero selezione file consente agli utenti di accedere a file e cartelle presenti nel PC locale, nei dispositivi di archiviazione connessi o in altri computer connessi tramite un gruppo Home. Gli utenti possono accedere anche agli elementi di app che aderiscono al contratto di selezione file.

Esempio: caricamento di una foto del negozio di gastronomia ambulante dal file system locale.

App di Windows Store:

• L'utente tocca il pulsante di caricamento nella barra dell'app e si apre l'interfaccia utente di selezione file. Si tratta di una superficie di interfaccia utente che compare ogni volta che un utente tenta di accedere ai file.
• Facendo clic sull'intestazione, l'utente visualizza un riquadro a comparsa di tutti i percorsi dei file e si sposta in una cartella di file.
• L'utente seleziona varie foto da una cartella e, nell'angolo inferiore sinistro, vengono visualizzate le anteprime delle foto selezionate.

Tocco

Usare la panoramica orizzontale per il layout orizzontale

Sia la progettazione del sito Web che la progettazione dell'app di Windows Store tengono conto dell'interazione dell'utente dal punto di vista del metodo e dell'ergonomia. Il sito Web è progettato principalmente per l'interazione con il mouse, quindi il contenuto è disposto sulla pagina in senso verticale e gli utenti possono spostare il mouse per scorrere facilmente gli argomenti di loro interesse. L'app di Windows Store è progettata principalmente per il tocco, quindi il contenuto è disposto in senso orizzontale, secondo l'orientamento della maggioranza dei computer desktop e portatili. Il layout orizzontale ottimizza l'uso dello spazio sullo schermo. Per eseguire una panoramica orizzontale, è inoltre più pratico e naturale per gli utenti toccare un dispositivo con orientamento orizzontale che non scorrere in direzione verticale.

Esempio: esplorazione di contenuto nel sito Web e nella schermata principale dell'app di Windows Store.

Scorrere trasversalmente per selezionare gli oggetti

Nei siti Web è consuetudine usare le caselle di controllo accanto a più oggetti per indicare selezioni multiple. Con Windows 8 l'utente può scorrere rapidamente il dito su un oggetto, perpendicolarmente alla direzione della panoramica, per selezionare tale oggetto in un elenco o in una griglia. Quando gli oggetti sono selezionati, la barra dell'app può comparire automaticamente per mostrare i comandi correlati all'oggetto.

Esempio: selezione di più negozi di gastronomia ambulante nella schermata principale da aggiungere alla schermata Start.

Quando gli utenti scorrono rapidamente il dito su un negozio ambulante per selezionarlo, nella pagina di destinazione dell'app viene visualizzata una barra dell'app con un comando che consente di aggiungere il negozio ambulante selezionato ai Preferiti creando un segnalibro. Questa azione reversibile semplifica notevolmente l'operazione di selezione nelle app di Windows Store, lasciando agli utenti la massima libertà di esplorare l'app.

Avvicinare e allontanare le dita per lo zoom semantico

Avvicinando e allontanando le dita, gli utenti possono scorrere rapidamente un lungo elenco. La pagina di destinazione dell'app di Windows Store mostra un certo numero di gruppi (nell'esempio: Featured, Near me, Asian, Barbeque e Breakfast). Gli utenti possono eseguire una panoramica per visualizzare altri contenuti oppure, usando lo zoom semantico, possono passare direttamente a una sezione specifica. Quando si usa il controllo zoom semantico, avvicinando le dita si esegue lo zoom indietro per mostrare tutte insieme le sezioni che compongono la visualizzazione corrente. A questo punto gli utenti possono usare il tocco per andare rapidamente all'inizio, alla fine o a una sezione specifica nell'elenco. La visualizzazione ridotta può essere progettata dettagliatamente in modo tale da mostrare contenuti interessanti all'interno di ogni sezione oppure metainformazioni su una sezione specifica (ad esempio, il numero di negozi ambulanti per ogni categoria). Può essere usata per l'esplorazione al posto degli elementi di spostamento persistenti sul pannello Canvas dell'app.

Esempio: passaggio a una particolare categoria di negozio ambulante mediante lo zoom semantico.

Sito Web: L'utente deve spostarsi in una pagina separata per visualizzare tutte le categorie.	App di Windows Store: L'utente può applicare lo zoom semantico alla schermata principale per visualizzare facilmente tutte le categorie, senza uscire dalla schermata. Nella visualizzazione con zoom semantico ogni categoria è rappresentata da una sola immagine. Tutte le categorie sono accessibili dalla schermata principale, senza effettuare una panoramica per visualizzare un elenco completo.

 

Ridimensionamento

Progettare un layout che si adatta a diversi orientamenti e dimensioni dello schermo

Abbiamo progettato il layout del sito Web di gastronomia ambulante in modo flessibile, così da consentire il ridimensionamento in funzione del tipo di dispositivo, delle dimensioni dello schermo, della risoluzione e dell'orientamento. La progettazione fluida di un sito Web riflette la varietà di PC Windows 8 in commercio, che vanno dai tablet solo touchscreen ai portatili più grandi e ai PC desktop. Se vogliamo far presa sul più ampio numero di potenziali clienti, è fondamentale progettare la nostra app in modo che funzioni perfettamente su tutta la gamma di dispositivi che supportano le app di Windows Store.

Puoi applicare molti dei principi della progettazione dei siti Web allo sviluppo delle app di Windows Store. I modelli e i controlli incorporati consentono di passare rapidamente e facilmente da una visualizzazione orizzontale a una verticale e viceversa. Quando l'orientamento cambia da orizzontale a verticale, l'app visualizza un numero maggiore di negozi per ogni categoria di gastronomia. Analogamente, l'app visualizza un numero maggiore di negozi in ogni categoria di gastronomia quando è possibile sfruttare lo spazio aggiuntivo di un monitor ad altra risoluzione.

Esempio: sito Web di un negozio di gastronomia ambulante e app di Windows Store su diversi dispositivi.

Sito Web:

• Il sito Web di gastronomia ambulante corregge il layout e adatta il contenuto in modo dinamico per le diverse dimensioni dello schermo e i diversi fattori formato.

App di Windows Store:

• L'app di Windows Store nelle modalità verticale e orizzontale e su uno schermo ad alta risoluzione. Usiamo lo spazio in più per mostrare altri contenuti.

Usa la larghezza ridotta per coinvolgere più a lungo gli utenti

Windows 8 consente agli utenti di operare in multitasking posizionando più app affiancate sullo schermo. Se progetti la tua app in modo che funzioni bene a larghezze ridotte, potrai aumentare il tempo di permanenza dell'app sullo schermo e coinvolgere gli utenti per periodi più lunghi. Per un utente è facile modificare le dimensioni dell'app manipolando il divisore tra due app, quindi è importante mantenere il contesto durante i ridimensionamenti. Gli utenti non dovrebbero perdere lo stato dell'app a causa del ridimensionamento dell'app.

Per altre informazioni sul ridimensionamento, vedi Linee guida per le dimensioni delle finestre e il ridimensionamento in base allo schermo e Linee guida per il ridimensionamento dei layout alti e stretti.

Esempio: schermata principale dell'app di Windows Store in dimensioni ampie e ridotte.

• Sinistra: l'app per gastronomia ambulante in dimensioni ampie, che occupa la maggior parte dello schermo. L'utente può usare un'app meteo e un'app di astronomia ambulante affiancate.
• Destra: con l'app a larghezza ridotta, l'utente esegue una panoramica verticale per accedere ad altri contenuti perché è più comodo scorrere lungo il bordo più lungo. Si tratta di una cosa diversa rispetto alla panoramica orizzontale a schermo intero, anch'essa ottimizzata per la panoramica lungo il bordo più lungo.

Notifiche

Usare i riquadri per aggiornamenti persistenti e dinamici

Gli utenti del sito Web di gastronomia ambulante possono visitare il sito per leggere le notizie e i blog relativi ai nuovi negozi ambulanti che si trovano in zona o per sapere quali negozi ambulanti hanno cambiato zona. Nel sito Web gli utenti possono anche seguire gli annunci della categoria di gastronomia ambulante su Facebook e Twitter. Ma per fare tutto questo, devono visitare il sito Web e cercare le novità o iscriversi per ricevere gli aggiornamenti. In questo modo rischiano di venire a conoscenza delle novità quando è già troppo tardi.

Quando abbiamo trasposto questa funzionalità nella nostra app di Windows Store, abbiamo usato i riquadri e le notifiche di tipo avviso popup, in modo da fornire agli utenti informazioni sempre aggiornate e cucite su misura. I riquadri nella schermata Start sono il biglietto da visita di un'app di Windows Store. Sono progettati per trasmettere vitalità e per distribuire contenuti aggiornati e personalizzati all'utente, in modo da convincerlo a usare l'app e a sfruttarne pienamente i vantaggi. L'app continua a mostrare questi contenuti anche quando non è in esecuzione.

Sito Web:

• La sezione Latest news nel sito Web mostra l'ultima posizione di un negozio ambulante.
• Il blog nel sito Web riporta un elenco dei nuovi negozi ambulanti e formula ipotesi su quando passeranno in un determinato quartiere.

App di Windows Store:

• Il riquadro principale dell'app di gastronomia ambulante mostra quali negozi si trovano nelle vicinanze di un utente e per quanto tempo si tratterranno in zona. I riquadri possono essere aggiornati quando l'app non è in esecuzione: in questo modo gli utenti possono continuare a ricevere gli aggiornamenti tramite la schermata Start.
• Un utente può aggiungere, ad esempio, il negozio ambulante specializzato in cheeseburger come riquadro preferito nella schermata Start e ricevere notizie aggiornate su tale negozio. In questo modo gli utenti godono della massima libertà e possono personalizzare l'app in base ai propri gusti. I progettisti di app hanno a disposizione molti modelli e dimensioni di riquadri tra cui scegliere per semplificare l'implementazione.

Usare gli avvisi di tipo popup per notifiche temporanee importanti

Oltre alle notifiche tramite riquadro, puoi anche usare le notifiche di tipo avviso popup per segnalare gli eventi agli utenti in tempo reale. A differenza degli aggiornamenti dei riquadri, che sono passivi, le notifiche di tipo avviso popup nelle app di Windows Store sono aggiornamenti importanti che interrompono l'attività degli utenti. Vengono visualizzati nell'angolo superiore destro dello schermo e possono comparire in qualsiasi posizione del sistema. In genere è meglio richiedere esplicitamente agli utenti se vogliono abilitare o meno le notifiche la prima volta che eseguono l'app. Se lo ritieni opportuno, puoi mostrare le ultime notifiche di tipo avviso popup nei riquadri mentre sono ancora attuali.

Esempio: il negozio ambulante preferito di un utente ha cambiato posizione.

L'utente ha abilitato le notifiche di tipo avviso popup tramite il riquadro delle impostazioni perché vuole sapere quando il suo negozio ambulante preferito cambia posizione.

Conclusione

Quando crei un'app di Windows Store partendo da un sito Web esistente, chiediti sempre in che cosa eccelle la tua app. Non appena trovi la risposta, ottimizza la tua app di Windows Store per quel tipo di scenario. Ricordati sempre di dare risalto al contenuto più che al contenitore: usa i comandi predefiniti del sistema, come Condivisione, Ricerca e Impostazioni, per fornire l'accesso a funzionalità comuni con un meccanismo familiare e intuitivo. Nascondi i comandi quando non servono, usando i controlli dello zoom semantico e la barra dell'app. E usa generosamente i riquadri animati e le notifiche, di modo che gli utenti possano continuare a sfruttare pienamente il valore aggiunto della tua app, anche quando non è in esecuzione. Se farai tutto questo, realizzerai un'app di Windows Store che piacerà a tutti e che farà crescere il tuo business.

Informazioni sugli autori

Nicholas Huttema è Visual & Interaction Designer presso la società Plain Concepts. Ama lavorare con idee nuove e interfacce utente pulite. Nick ha studiato e mosso i primi passi nel mondo del lavoro nel Michigan, con la mansione di Print Designer. Successivamente ha aggiunto al suo curriculum la progettazione dell'esperienza utente, prestando servizio presso varie società nelle aree di Los Angeles e Seattle. Ha lavorato come progettista per Microsoft, Myspace, Amazon.com ed Herman Miller, tra gli altri. Trascorre il tempo libero all'aria aperta, va in vacanza in campeggio e pratica sport come il trekking e lo snowboard.

Qixing Zheng è User Experience Program Manager presso Microsoft. Fa parte del team che ha creato l'interfaccia utente di Windows 8 e fornisce assistenza ai progettisti che vogliono imparare tutto sulla progettazione Microsoft. La sua vera passione è aiutare gli altri a migliorare la propria esperienza utente sfruttando al meglio la tecnologia di tutti i giorni. Prima di entrare a far parte del team Windows, Qixing è stata la prima advisor per l'esperienza utente presso Microsoft Canada ed è stata invitata da molte università, community di progettisti e imprese a presentare la strategia Microsoft per quanto riguarda l'investimento nell'esperienza utente. Si è anche data molto da fare per trovare i progettisti più audaci e per raccogliere le storie più rappresentative della community.