Progettazione della migliore app possibile

Questo argomento ti aiuta a progettare un'app con un aspetto integrato nelle piattaforme Windows e Windows Phone. I principi e le strategie contenute in questo e in altri argomenti relativi al processo di progettazione sono fondamentali per fare in modo che la tua app si distingua da tutte quelle presenti nello Store. Seguendoli durante la fase di progettazione, potrai anche risolvere più facilmente gli eventuali problemi di usabilità rilevati durante l'iterazione. Una progettazione di qualità elevata favorisce un'esperienza cliente positiva e suscita recensioni positive, che sono indispensabili per permettere alla tua app di distinguersi da quelle della concorrenza.

Per informazioni sul brainstorming e sulla pianificazione, vedi Concettualizzazione dell'app.

Aspetti fondamentali del prototipo della progettazione

Progettare un prototipo significa riunire tutti i risultati del brainstorming emersi finora. In questa sezione imparerai a creare bozze dell'aspetto dell'app e a utilizzarle per testare gli elementi fondamentali della tua progettazione.

  La progettazione di un prototipo non solo favorisce la qualità, ma consente anche di risparmiare tempo ed evitare frustrazioni. Seguendo i suggerimenti di questa sezione, potrai ottenere una migliore progettazione per l'app in meno tempo.

Con Blend per Visual Studio puoi progettare rapidamente prototipi realistici. Con Blend puoi creare bozze e prototipi interattivi. I prototipi interattivi sono utili per le aree delle app che necessitano di un'interfaccia utente, un'animazione o una transizione personalizzata, per rendere l'esperienza comprensibile agli utenti. Questa interazione, spesso essenziale per il successo di un'app, consente agli utenti di "sentirla" durante il test dell'usabilità. Blend ti consente anche di creare progettazioni reali e funzionanti direttamente dai prototipi. Per leggere altro su Blend, visita la home page di Microsoft Expression.

PowerPoint Storyboarding, disponibile con Microsoft Visual Studio 2012, è un altro strumento che puoi usare per creare schizzi. Con questo strumento, puoi compilare uno storyboard da una raccolta di forme storyboard predefinite ed acquisire le interfacce utente esistenti. Per altre informazioni, vedi Creare uno storyboard di idee tramite PowerPoint.

Creazione di schizzi dai concetti

In questa sezione, imparerai a creare le bozze della tua app.

La prima fase della creazione di un prototipo di progettazione inizierà con matita e carta per passare rapidamente agli schizzi su un PC. Creare gli schizzi di un'app per un dispositivo mobile non è come farlo per il software desktop. Qui gli storyboard sono meno utili perché queste app hanno gerarchie di esplorazione più semplici e un ambito più stretto. La sfida con l'interfaccia utente mobile è presentare le operazioni e i dati in modo intuitivo e dinamico.

Se l'app prevede attività per esperti, crea i relativi storyboard uno per uno per assicurarti che vengano eseguite con pochi (e semplici) passaggi. Quella seguente è una serie di schizzi di prototipo di una generica app per ascoltare la radio in streaming.

1. Crea lo schizzo della schermata statica che gli utenti vedranno o useranno di più. La figura seguente, ad esempio, mostra i disegni preliminari dell'app per ascoltare la radio in streaming. Vedrai le bozze della schermata principale, delle categorie, della visualizzazione con le informazioni sull'artista e un elenco di stazioni preferite.

   

   Schermate principali

2. Se l'app mostrerà all'utente determinati stati transitori, crea uno schizzo di come appariranno. Nell'esempio, se stai compilando un'app lettore musicale, disegna una visualizzazione delle impostazioni e delle schermate iniziali.

   

   Alcuni stati

3. Crea gli schizzi dei controlli importanti che potresti personalizzare. Pensa a come i controlli personalizzati possano essere usati per semplificare la tassonomia delle schermate. Questa bozza mostra i controlli dettagliati per la riproduzione e una speciale visualizzazione orizzontale con i controlli.

   

   Controlli importanti

4. Ora puoi mettere insieme alcune schermate come sequenza di passaggi per eseguire un'attività. Pianifica i passaggi che serviranno agli utenti per completare importanti attività o operazioni. Disegna in ordine le schermate statiche che faranno parte di ogni passaggio di un'attività. La figura seguente mostra una bozza che traccia il flusso completo di un'operazione di ricerca fino alla visualizzazione delle informazioni sull'artista.

   

   Attività di ricerca comune

   Per realizzare questo passaggio, devi prima elencare tutte le attività che un utente eseguirebbe con la tua app: ad esempio, la ricerca di un genere musicale o l'aggiunta di una nuova stazione all'elenco dei preferiti. Quindi disegna una mappa per ogni attività identificata. Queste mappe mostrano i percorsi da una schermata all'altra necessari per eseguire una determinata attività.

5. Prova a delineare la relazione completa tra le schermate statiche in tutte le parti dell'app. Cerca di fare in modo che l'aspetto e il funzionamento delle schermate correlate siano tali da creare nell'utente una sensazione di progresso man mano che procede con un'attività. La figura seguente mostra una mappa completa dell'architettura delle informazioni di una semplice app per ascoltare la radio in streaming.

   

   Mappa master

   La mappa master è diversa dalla mappa delle attività. Nella mappa master statica, non mostri il flusso necessario per eseguire una determinata attività, ma solo le singole schermate e la relazione gerarchica tra di esse. Nell'esempio precedente, puoi vedere che dalla schermata principale puoi passare alle schermate dei preferiti, delle categorie e dei risultati della ricerca.

   Dopo aver appeso alcuni disegni alla parete, inizia a creare il prototipo aprendo un nuovo progetto un Blend per Visual Studio.

     Quando crei un prototipo con Blend, il relativo markup XAML viene scritto automaticamente in background. Questo ti consente di creare il layout e gli stili durante l'iterazione. Quegli artefatti avranno probabilmente una fedeltà più bassa, ma hanno lo stesso formato di quelli di un'app per la produzione e sono pertanto compatibili.

Identificazione delle aree principali per i prototipi o le bozze

È possibile creare rapidamente prototipi di app mobili selezionando specifiche di interesse. In genere non è necessario creare un prototipo di ogni aspetto dell'app con un livello di dettagli elevato. Scegli quelli più importanti o problematici e crea i relativi prototipi. In genere, un progettista deve dare la priorità a nuove tecnologie o funzioni o a ciò che si discosta dalla normale esperienza del team di sviluppo.

Per la maggior parte delle app, ciò significa creare le bozze delle attività o delle operazioni più importanti per l'utente. Considera le finalità che hai concepito per la tua app. Crea i relativi prototipi immaginando che si realizzino, passaggio per passaggio, e individua dove i controlli personalizzati possono ridurre i passaggi o comunque velocizzarli.

In generale, il passaggio di un'app dal Web o da un'altra piattaforma a Windows Phone richiede che le schermate dell'app contengano meno controlli e immagini e siano ordinate. Potrebbe essere anche necessario distribuire le attività in diverse schermate in una tassonomia sensata, mentre sul Web i controlli sono più probabilmente annidati in gruppi di grandi dimensioni. Considera se sia necessario ridimensionare le immagini, il contenuto o le fotografie che verranno presentate nella tua app. Assicurati di creare i prototipi con i controlli nativi e con meno controlli WebView possibili.

Decidi in anticipo quante iterazioni siano pratiche.

Decidere il livello di dettaglio dei prototipi

Per creare rapidamente i prototipi e passare alla compilazione, decidi quali elementi dell'app debbano essere prioritari durante l'iterazione. Ciò significa decidere quanto dovranno essere precisi i prototipi delle parti seguenti dell'app:

• Livello di dettaglio visivo

  Se la grafica e l'aspetto sono le priorità principali per le parti interessate a questa app, assicurati di creare una serie estremamente dettagliata di disegni delle funzionalità, delle funzioni, delle schermate o degli stati. Devi anche creare le bozze dei controlli personalizzati e dei loro stati.

    La creazione delle bozze dei controlli personalizzati o dei controlli utente in Blend per Visual Studio genererà il markup XAML che ti aiuterà a compilare i controlli produzione.

  Le bozze del dettaglio visivo devono includere:

  1. Stili e temi
  2. Schermata iniziale
  3. Riquadro dell'app

• Livello di dettaglio funzionale

  Le funzioni o le funzionalità sono il pezzo forte della tua app? In questo caso, potresti aver bisogno di compilare un prototipo interattivo e semifunzionale. Inizia con una schermata statica o un gruppo di schermate statiche e crea le interazioni tra di esse, una alla volta. Considera come semplificare le funzioni e ridurre i controlli o la necessità di input.

• Livello di dettaglio del contenuto

  Se le parti interessate alla tua app danno la priorità alla presentazione del contenuto, potresti dover decidere come creare i segnaposto più accurati possibili mentre compili l'interfaccia utente. Se il contenuto è un testo, crea le bozze delle progettazioni prestando particolare attenzione alla tipografia e usa il testo riempitivo, non i blocchi o altre astrazioni, per vedere dove andrà il contenuto.

  Se l'app presenterà contenuti multimediali visivi, potresti dover ricorrere nuovamente a carta e matita per il processo di creazione dei prototipi. Disegna schizzi dettagliati del contenuto dell'app, come apparirebbero durante la riproduzione, e includi nei disegni sia l'orientamento orizzontale che quello verticale. Considera la possibilità di personalizzare i controlli o di modificarne il layout quando cambia l'orientamento.

  Se prevedi di localizzare l'app, assicurati di lasciare lo spazio sufficiente per le lingue che lo richiedono e di prepararti ai problemi della globalizzazione. Ci sono altri riferimenti che puoi leggere per conoscere i problemi della localizzazione e della globalizzazione.

• Livello di dettaglio della personalizzazione

  Se stai compilando l'app a scopo commerciale e la personalizzazione è gestita, crea prototipi visivi completi e personalizzati con un'attenzione granulare al dettaglio. In questo modo il prodotto finale non si discosterà dai colori, i layout e i logo standard della società.

Coerenza nella personalizzazione

Gli elementi visivi personalizzati possono conferire a un'app qualità e originalità o permettere l'inserimento di informazioni sul marchio. Decidi in anticipo quali elementi visivi dell'app verranno personalizzati e pianifica tali elementi in base a tale decisione. Può essere difficile introdurre in seguito nel processo di progettazione dell'app grafica e logo personalizzati.

Temi, modelli, controlli e stili sono alcuni degli elementi che devi personalizzare.

Quando personalizzi gli elementi visivi in Windows Phone, segui queste linee guida:

• Preferisci la praticità d'uso al realismo.

  In generale, le app non devono avere controlli personalizzati che cercano di imitare la vita reale. Ad esempio, un'app radio non deve usare una manopola, un tasto o una serie di pulsanti per controllare la scelta della stazione. Deve invece usare un controllo dispositivo di scorrimento per regolare la frequenza, un pulsante Play/Pausa per accendere e spegnere la radio e un pulsante Preferiti per salvare le stazioni preimpostate.

  

  App radio FM

  Per agevolare l'uso pratico, è anche opportuno far dissolvere o rimuovere alcuni o tutti i controlli, la barra dell'app e la barra di stato quando l'app visualizza il contenuto o il gioco in visualizzazione a schermo intero.

• Preferisci la praticità d'uso al realismo.

  Per ottenere coerenza e affidabilità in un'app con i controlli personalizzati, assicurati che lo stile di progettazione sottostante dell'app sia tale che simboli, forme, parole e colori abbiano significati coerenti.

  Se hai intenzione di presentare gruppi di controlli personalizzati correlati che influiscono l'uno sull'altro, assicurati che tutte le possibili combinazioni di controlli abbiano senso e funzionino come previsto.

  Se pratico, traccia le potenziali interazioni tra controlli personalizzati per verificare che tutte le possibili operazioni siano sensate. Se ritieni che alcune combinazioni potrebbero confondere l'utente, usa una progettazione alternativa.

Test dell'usabilità

Ora che il tuo prototipo si va perfezionando, interrompi la progettazione e verifica di non esserti allontanato dai parametri della progettazione per Windows Phone. Verifica se il tuo dispositivo sta usando appieno la piattaforma e il sistema operativo, rispondendo alle domande seguenti.

Domande di verifica per il prototipo

• La progettazione dell'app mostra chiaramente come utilizza l'hardware Windows Phone?
• Sarà semplice eseguire le attività dell'app?
• L'app presenterà troppe informazioni o funzionalità? Forse troppo poche informazioni?
• L'app consentirà all'utente di eseguire attività o operazioni che troverà utili?
• Arrivi da un'altra piattaforma mobile? Gli utenti Windows Phone si aspetteranno meno tocchi, visualizzazioni più chiare, tipografia di grandi dimensioni e l'uso di contrasto e colore.
• Stai usando entrambi gli assi di scorrimento (assi X e Y) e gli orientamenti (verticale e orizzontale)? A seconda dello scopo dell'app, gli utenti potrebbero aspettarseli entrambi.
• È possibile utilizzare facilmente i controlli con le dita? Il testo dei controlli è leggibile?
• L'interfaccia utente fornisce feedback sul tocco e sullo stato?
• Hai tenuto in considerazione l'uso del pulsante Indietro dell'hardware?
• Usi il contenuto Web incorporato (e il controllo WebView) con moderazione?
• L'app dissolve la barra di stato, i controlli e la barra dell'app durante la riproduzione del contenuto a schermo intero?
• Usi i controlli Pivot e Hub in modo efficace e corretto?

Test degli elementi personalizzati dell'interfaccia utente

Dopo aver creato le bozze degli elementi personalizzati dell'interfaccia utente, assicurati di testarli personalmente. Se stai usando Blend per Visual Studio, puoi creare una bozza del comportamento di una pagina o di un controllo (con la funzionalità Comportamenti) oltre che degli elementi visivi.

Opinione degli utenti

Appena inizi a creare i prototipi, trova un gruppetto di persone affidabili tra i destinatari dell'app. Appena ti senti pronto, inizia a mostrare i prototipi ai tuoi utenti attendibili. Non spiegare loro come dovrebbero fare, ma aspetta e vedi se l'utente capisce facilmente che cosa fa la tua app e come funziona.

  In generale, per i primi test degli utenti usa le bozze con il dettaglio visivo, invece dei disegni wireframe. I disegni wireframe non creano una simulazione accurata dell'esperienza utente.

Parlare subito con i clienti

Se stai progettando un'app per lavoro, assicurati di testare le esigenze e le priorità dei responsabili e delle persone non esperte oltre che dei tuoi utenti di destinazione. Ad esempio, il software per la gestione di progetti deve essere utile per le persone che lavorano a un progetto, ma anche per i loro superiori che potrebbero voler usare la tua app per controllare lo stato di un progetto.

  Non cedere alle richieste degli utenti che vogliono sempre più funzionalità. Mentre il feedback di alcuni utenti ti può avvertire di gravi problemi dell'interfaccia utente, il feedback della maggior parte degli utenti in genere deve essere considerato nel suo insieme. Fai in modo che la tua app sia mirata ed essenziale. Ricorda che gli utenti sono spesso più bravi a spiegare quello che vogliono da un'app piuttosto che a dare suggerimenti specifici sull'interfaccia utente o su un'interazione.

Creare le bozze finali

A questo punto del processo di progettazione, la tua app deve già soddisfare le linee guida sull'usabilità delineate in precedenza. Quando valuti le bozze finali, procedi come segue:

1. Determina se il prototipo soddisfa le esigenze e gli standard a cui pensavi mentre raccoglievi le idee.
2. Quindi, decidi se le bozze soddisfano il livello di dettaglio richiesto dal processo di revisione finale dell'app. Ripensa al livello di dettaglio che hai stabilito per il tuo prototipo dopo aver letto Aspetti fondamentali del prototipo della progettazione.
3. Le bozze finali devono includere i livelli di dettaglio appropriati per:
   • Elementi visivi: la tipografia e il contenuto sono presentati in modo chiaro, leggibile e conciso? L'app è graficamente accattivante?
   • Elementi funzionali: lo scopo e il funzionamento delle attività è intuitivo? È chiaro che cosa fa l'app e come farla funzionare?
   • Elementi di controllo: tutti i controlli personalizzati funzionano in base a un linguaggio di progettazione interno coerente? La loro dimensione e spaziatura è tale da agevolare le operazioni di tocco?
   • Elementi di personalizzazione: hai riprodotto accuratamente colori e logo? Tutta la grafica è conforme alle clausole del copyright?
4. Verifica di aver conservato le interazioni tracciate durante la creazione dei prototipi. Controlla che l'aspetto e il flusso delle attività e delle operazioni più comuni e importanti siano quelli desiderati.
5. Una volta che le progettazioni sono finalizzate e la produzione può iniziare, puoi iniziare a preparare l'app in modo che risponda ai requisiti di progettazione per l'invio.

Argomenti correlati

Progettazione di risorse per Windows Phone