Nell’articolo precedente abbiamo visto che il primo passo per una corretta progettazione UX di applicazioni di tipo gestionale sta nel conoscere l’utente e che, per farlo, occorre definire i documenti User Profile, User Stories e Business Model.
A questo punto non c’è che da affrontare il secondo ed ultimo passo: realizzare il prototipo dell’applicazione, il mockup. Chi viene dalla progettazione di applicazioni gestionali tradizionali può essere tentato di riproporre quello che già conosce: menu a n-livelli, griglie con decine di colonne, form interminabili.
Per cambiare modo di pensare, il passaggio più semplice è accettare la sfida della progettazione mobile-first. Se riusciamo a far entrare la nostra app in uno smartphone, allora di sicuro sarà utilizzabile anche da tablet e da desktop.
Spesso quando propongo questo approccio la risposta è: “Impossibile! il nostro sistema è troppo complicato per entrare in uno smartphone”. Ma se fosse davvero così, quali utenti sarebbero in grado di usarlo senza un corso di formazione completo?
Ho verificato che spesso il vero motivo di questa impossibilità sta nell’inadeguata comprensione del processo e dell’utente che deve compierlo. Quando questi fattori sono presenti, basta solo avere un set di template standard da applicare (ma ci arriveremo).
Per arrivare al mockup, il passaggio più importante è quello di realizzare il modello wireframe. In pratica si tratta di disegnare le varie videate dell’applicazione come dei rettangoli contenenti solo il nome e una breve descrizione del contenuto. Ogni videata deve poi essere collegata alle altre tramite frecce, in modo da definire chiaramente il percorso di navigazione.
Con questo modello è già possibile effettuare una prima verifica: si riprende in mano il documento User Stories e si controlla il comportamento dell’applicazione tramite il wireframe per verificare se l’esperienza utente sia accettabile. Ad esempio, se l’utente è alla fermata dell’autobus, non potremo chiedergli di passare fra dieci videate per concludere un processo.
Una volta che il wireframe è soddisfacente, occorre passare al mockup vero e proprio. A tal fine, per app di tipo gestionale, si possono utilizzare modelli abbastanza consolidati. Ad esempio, Ionic Framework contiene componenti già pronti per videate a schede, liste e form.
È per questa sua versatilità che lo abbiamo incluso in Instant Developer, così da renderne ancora più immediato l’utilizzo, anche solo per semplici mockup. Volete vedere una lista di videate standard? Aprite questa pagina e cliccate in giro.
L’ultimo consiglio, imprescindibile, è quello di cercare di imparare da chi ha già fatto ciò che state cercando di fare. Ci sono tantissime applicazioni da studiare e in questo modo sarà più facile capire cosa funziona e cosa no, semplicemente provandolo sulla propria pelle.
E se dopo aver realizzato il mockup avete ancora qualche dubbio, sono a vostra disposizione per darvi consigli più specifici. Scrivetemi!
