UX per developer in pillole - PT 3

Le conoscenze e i tool di maggior rilievo per un dev

# User Persona & User Stories

Sono deliverables del processo UX che risultano estremamente utili lato sviluppo, sia front-end che back-end. A partire da questi possono essere estrapolati vari dettagli tecnici riguardanti ad esempio i ruoli, la definizione delle entità e delle relazioni all'interno di un database, il controllo dell'accesso (ACL) alle pagine di un sito o a determinate funzionalità.

# User Flows

Gli User Flows permettono agli sviluppatori di avere una panoramica estremamente chiara del comportamento dell'utente all'interno dell'applicazione e di amplificare le capacità relative a scelte tecniche o progettuali. Ragionando in maniera predittiva e immedesimandosi nell'utente si riesce a velocizzare il lavoro di coding in generale oltre che a prevenire una grande quantità di bug anche molto subdoli che spesso vengono scovati solo in seguito al rilascio dell'applicazione.

Uno strumento spesso sottovalutato sono invece i wireflow, che uniscono informazioni visive tipiche di un wireframe o di un prototipo al flusso. Presentano il vantaggio di guidare direttamente lo sviluppatore nella feature descritta, senza lasciargli alcun compito di comprensione a livello di interfaccia grafica o interazione. Possono essere prodotti sia a basso che ad alta fedeltà.

# Labeling

La creazione di un linguaggio comune tra cliente ed utente e tra designer e sviluppatore è essenziale sotto molteplici aspetti.

La partecipazione alla scelta delle convenzioni e del naming da utilizzare all'interno dell'applicazione dona coerenza e consistenza al software, sia per come viene percepito dall'utente sia per quanto riguarda la comprensione della documentazione e del codice all'interno del team stesso.

Il labeling ci assicura che la navigazione e le gerarchie all’interno del prodotto abbiano “senso”, che gli utenti riescano ad accedere all’informazione che desiderano in maniera rapida.

Una corretta etichettatura, costruita sulla base di un glossario, fa si che i termini che utilizziamo all’interno della nostra applicazione siano corretti e non diano adito a “cattive impressioni” da parte degli utenti.

Da un punto di vista strettamente tecnico invece vogliamo che la scelta di un nome per un determinato componente o pagina venga propagata dal wireframe al codice front-end senza eccezioni, che si abbia la coscienza di cosa quel termine significa all'interno del nostro contesto; ciò favorisce la leggibilità del progetto e previene bug e incompresioni dovuti ad un cattivo utilizzo dei nomi.

La progettazione delle corrette gerarchie di navigazione è cruciale in termini di usabilità dell'applicazione. La navigazione deve risultare:

  • Semplice - stabilire i punti di accesso e rendere le pagine principali facilmente raggiungibili fa si che si evitino gerarchie complesse.
  • Predittiva - l'utilizzo di pattern già conosciuti all’utente fa in modo che si possa orientare all’interno dell’applicazione anche senza esperienza pregressa.
  • Consistente - difficilmente un’applicazione opera in un unico contesto e su un’unica entità. Definire una gerarchia di navigazione comune evita la duplicazione di pagine o componenti e aiuta a estrapolare i corretti template.

Per la comprensione delle gerarchie di navigazione abbiamo a disposizione vari strumenti.

  • Una sitemap mostra le sezioni, la struttura della nostra applicazione senza informazioni tecniche specifiche, solo un titolo e i contenuti a cui consente di accedere. Non devono essere presenti informazioni troppo dettagliate circa i livelli di navigazione.
  • L'IA diagram ci permette di distinguere a colpo d'occhio ogni sezione e schermata della nostra applicazione e a identificare le giuste pagine e rotte all'interno del progetto.

Risorse e approfondimenti