Kickoff

Diamo seguito al precedente articolo analizzando un caso d'uso di progettazione della navigazione di una web app.

WeCare permette a pazienti e medici di comunicare e scambiare informazioni relativamente alle cartelle cliniche. Quando il cliente ci ha contattato era già presente e in utilizzo una prima versione dell'app, che presentava tuttavia molte problematiche inerenti i flussi e la navigazione, risultando inoltre praticamente inutilizzabile da mobile. Ci è stato chiesto di analizzare a livello di esperienza utente e usabilità il prodotto e di riprogettarlo per l'implementazione di una nuova versione.

Navigation Drawer e Navbar

Uno dei primi problemi che balzavano subito all'occhio era l'inconsistenza e la poca chiarezza delle voci di menu, che erano presenti unicamente nella navbar sottoforma di icona, senza alcuna dicitura testuale, che appariva solo tramite tooltip sull'hover del mouse. Il drawer di navigazione era invece destinato a poche funzionalità, come le impostazioni e le notifiche, risultando davvero marginale.

Era impossibile durante i primi utilizzi riuscire a ricordare la corrispondenza tra l'icona e la relativa pagina. Inoltre dopo l'accesso ad alcune sezioni, sulla navbar venivano aggiunti ulteriori collegamenti aggiuntivi e addirittura azioni di contesto; essendo una navbar un pattern a livello globale ciò non sarebbe dovuto accadere. Inoltre l'aggiunta dinamica di azioni alle voci di menu, oltre che a destabilizzare l'utente, trasformava la barra di navigazione in una sorta di toolbar.

Quello che abbiamo fatto è stato piuttosto semplice: spostare tutta la navigazione principale sul drawer, aggiungendo il nome della pagina di fianco l'icona e lasciando solo alcune voci relative al profilo e alle impostazioni sulla navbar. Abbiamo poi creato un header nel layout della pagina in cui spostare tutte le azioni di contesto.

Livelli di navigazione e backstack

L'albero di navigazione era complesso e profondo, pieno di intrecci e pagine molte simili tra di loro che confondevano l'utente. Non erano presenti breadcrumbs sulla versione desktop né la possibilità di tornare indietro su quella mobile. Abbiamo uniformato i vari indici di sezione e consentito l'accessibilità ai livelli di navigazione secondaria esclusivamente da tali pagine.

Abbiamo poi eliminato le pagine di indice che per entità di riferimento, funzionalità e logica erano identiche tra loro ma differivano solo per il tipo di view delegato a renderizzare l'elenco di elementi; per fare ciò abbiamo aggiunto un'azione di switch della vista dell'elenco, che non portava più ad eseguire un redirect ma un re-rendering utilizzando gli stessi dati caricati in precedenza.

Navigazione interna

Quando l'app veniva utilizzata da un medico e questi accedeva al dettaglio di un paziente una delle richieste era quella di mostrare sempre con chiarezza le relative informazioni. I collegamenti ad alcune sottosezioni del paziente, come abbiamo detto prima, apparivano in forma mista sulla navbar e su una sorta di "barra del paziente"; abbiamo delegato questa barra unicamente a mostrare le info del paziente e a permettere alcune azioni su di esso, mentre è stata aggiunta una tabbar per l'accesso alle pagine interne.

Flussi esterni di navigazione

In ultimo, l'app presenta l'integrazione con alcuni servizi esterni per videoconferenze e i processi di firma digitale. Inoltre si interfaccia con alcuni software in utilizzo negli studi e negli ambulatori medici. Nel processo di ristrutturazione abbiamo cercato di rendere chiaro all'utente tramite nuove CTA e riferimenti grafici quali fossero le azioni che conducevano a flussi esterni all'app.