Introduzione

Presentiamo in questo esempio un'applicazione particolarmente semplice, tralasciando alcune fasi fondamentali del processo UX come la Competitive Analysis e la User Research per soffermarci invece sugli step che contribuiscono direttamente a produrre deliverables importanti per l'implementazione.

Non sono inoltre presenti schermate e funzionalità di registrazione e autenticazione all'applicazione.

Le feature principali del nostro MVP sono essenzialmente due:

• gestione delle note (aggiunta, aggiornamento, eliminazione);
• ricerca delle note.

User Flows

Tramite la definizione degli User Flows vogliamo analizzare i comportamenti dell'utente in maniera predittiva.

Il flusso di aggiunta del primo task all'interno della nostra app potrebbe essere schematizzato come segue:

1. L'utente esegue per la prima volta l'accesso all'applicazione.
2. Dalla Home Page (Lista Note) tappa il pulsante per aggiungere una nuova nota e viene reindirizzato alla relativa pagina di creazione.
3. L'utente compila il form dell'aggiunta della nota, digitando un titolo e una descrizione e scegliendo una data.
4. L'utente viene reindirizzato alla Home Page dove la nuova nota è stata aggiunta alla lista.

Navigazione e contenuti

Dal flusso precedentemente descritto, senza avere ancora alcun riferimento grafico, possiamo già estrapolare alcune informazioni importanti riguardanti il nostro applicativo:

• Abbiamo identificato almeno due rotte: la Home Page che banalizzando stiamo facendo coincidere con la pagina di Index delle note e la pagina di creazione delle note.
• Stiamo ricavando alcune informazioni riguardo il nostro modello di nota, quali titolo, descrizione e data.
• Abbiamo alcune indicazioni riguardo ai componenti che dovranno essere inseriti in queste pagine: un pulsante di aggiunta, una lista, un form (che presenterà quindi diversi input).
• Tutta la fase pregressa di UX che in questo momento stiamo ignorando ci ha consentito di costruire il linguaggio e i termini che stiamo utilizzando nel flusso e che andremo ad utilizzare anche successivamente.

Wireframe Lo-Fi

Quello che solitamente viene fatto prima di disegnare un wireframe a bassa fedeltà è realizzare alcuni sketch (bozze) dell'applicazione, a mano o tramite software di disegno, sui quali vengono condotti i primi test di usabilità con utenti reali.

Dall'analisi UX abbiano estrapolato le 4 rotte della nostra applicazione (lista delle note, dettaglio della singola nota, pagina di creazione e pagina di modifica della nota) e organizzato le informazioni che devono mostrare, per ognuna di esse abbia realizzato la corrispondente schermata nel wireframe lo-fi.

Il componente delegato alla navigazione è una navbar (o toolbar), tramite la quale è possibile anche eseguire le azioni di contesto della pagina; tale scelta considerando il livello di fedeltà e i test che dovranno essere condotti in seguito potrebbe essere sottoposta a modifiche.

Indice Note

Lista

Viene mostrata la lista delle note inserite dall'utente e una barra di ricerca per sfruttare l'omonima funzionalità. Sulla navbar è presente il pulsante che consente di aggiungere una nuova nota.

Caricamento

Sopra lo stato di caricamento della lista delle note dove la Searchbar è disabilitata in attesa dei dati.

Nessun Elemento

Al primo utilizzo l'applicazione presenterà una lista vuota. Prevediamo in conformità alle Euristiche di Nielsen un placeholder per segnalare lo stato del sistema, andremo poi a disegnare le specifiche riguardo eventuali suggerimenti in seguito.

Nessun Risultato di Ricerca

Quando la ricerca della nota non restituisce risultati la lista mostra all'utente il feedback dell'operazione e il nuovo stato del sistema.

Dettaglio Nota

Default

Il dettaglio note presenta la descrizione espansa della nota e offre l'accesso alle funzionalità di modifica e eliminazione.

Conferma Eliminazione Nota

Nel caso di eliminazione prevediamo un feedback di conferma dell'azione per evitare che in seguito ad un click non voluto possano essere irreversibilmente persi i dati della nota.

Eliminazione Nota in Corso

Eliminazione nota in corso.

Nota Eliminata con Successo

A questo punto se l'operazione è stata eseguita con successo l'utente verrà reindirizzato alla pagina di Index e riceverà un feedback; per motivi di semplicità non prevediamo alcuna azione di reversibilità dell'operazione.

Errore Eliminazione Nota

In caso contrario rimarrà nella schermata attuale e sarà notificato dell'errore.

Creazione Nota

Default

Le pagine di creazione e modifica della nota mettono a disposizione il relativo form e la possibilità di salvare esplicitamente le informazioni inserite.

Nota Creata con Successo

In seguito al click su salva l'utente verrà reindirizzato alla Index e notificato riguardo l'avvenuto inserimento.

Errore Creazione Nota

In caso contrario rimarrà nella schermata attuale e sarà notificato dell'errore.

Modifica Nota

Default

Per quanto riguarda la pagina di modifica abbiamo scelto di non rendere editabile il campo titolo. Il flusso sul salvataggio rimane identico a quello presente nella pagina di creazione.