Prototipare in Axure RP
Che siano interfacce fisiche o virtuali, lo UX designer ha il compito di studiare al meglio l’interfaccia uomo-macchina. Come? Realizzando prototipi! Scopri perché farlo con Axure RP.
Tempo di lettura: 5 minuti
Skills Updated: Prototyping Tools
Che siano interfacce fisiche o virtuali, il ruolo dello UX designer è quello di studiare l’interfaccia uomo-macchina in modo tale che l’azione o la serie di azioni che l’utente deve fare per raggiungere il suo obiettivo sia chiara e comprensibile anche in ambienti complessi. Per questo motivo è importante che intervenga già nelle prime fasi della progettazione e che abbia gli elementi necessari per la realizzazione di un prototipo con cui cominciare a testare il prodotto.
Ecco quindi che il prototipo diventa molto rilevante per la buona riuscita di un progetto: accade infatti che la prima versione di un’idea non sia mai completa e funzionale al 100% e poterla testare prima di immetterla sul mercato è un enorme vantaggio.
I Prototipi
Un prototipo può interessare il prodotto per intero, per fare ordine all’interno di sistemi complessi, oppure può essere utile per isolare un’azione e studiarla separatamente, mettendola in relazione con le altre solo quando è chiaro il suo funzionamento.
Restringendo il campo alla interfacce digitali, sono tanti i software che permettono di realizzare dei prototipi ma, per testare le funzionalità lasciando l’interfaccia grafica in secondo piano, non si può non pensare ad Axure RP che si pone come uno strumento essenziale per uno UX designer.
Axure RP nel dettaglio
La forza di Axure RP sta nella sua possibilità di costruire prototipi con due livelli di complessità: uno base che permette di sviluppare prototipi statici e veloci, con bassa fedeltà al prodotto finale ma più attenzione alla semplificazione dei flussi; uno più avanzato, in cui l’interazione è alta e il prototipo risulta molto fedele al prodotto finito, anche graficamente.
Una panoramica dello spazio di lavoro
Appena aperto, l’interfaccia non è di immediata comprensione ma, una volta individuate le funzioni dei pannelli principali, si può subito cominciare a costruire il proprio prototipo.
- Lo spazio di lavoro centrale è una artboard indefinita la cui dimensione non si può impostare. I limiti del prototipo dovranno essere definiti o tramite le linee guida o disegnando un rettangolo per delimitare l’area di lavoro;
- Il pannello pages permette di gestire le pagine di lavoro create e può diventare molto utile nella costruzione dell’architettura del prototipo grazie alla possibilità di posizionare le pagine secondo una corretta gerarchia;
- La finestra libraries raccoglie tutti gli elementi grafici e interattivi già pronti che possono essere utilizzati nel prototipo e anche i widget per costruire eventualmente il diagramma di flusso per disegnare il flusso utenti;
- Il panel masters viene popolato dal designer con tutti gli elementi che possono essere utilizzati all’interno di più pagine e che possono essere inseriti con un semplice drag&drop;
- L’inspector page è diviso a sua volta in tre sotto-finestre: le properties, in cui impostare le interazioni del prototipo; le note per commentare il lavoro del team o scrivere appunti sullo sviluppo; lo style per personalizzare lo stile dei widget inseriti;
- La finestra di outiline page mostra tutti gli elementi inseriti nella pagina che si sta visualizzando in quel momento;
- La barra in alto contiene ulteriori elementi di personalizzazione e i tasti di preview e di condivisione del progetto.
Per capire meglio i due livelli con cui è possibile creare prototipi in Axure, mettiamo a confronto lo stesso form di registrazione realizzato in modo semplice con la sua versione più completa e complessa.
Disegniamo quindi un layout utilizzando gli elementi che Axure mette a disposizione nella sua libreria senza modificarne lo stile o intervenire sulle interazioni.
In viola è segnato il nome del widget utilizzato e al QUESTO LINK è possibile provare le interazioni.
Come si può vedere, la struttura della pagina è chiara per lavorare sulle funzionalità, per studiare il flusso utente e il posizionamento degli elementi, ma rimane scarna dal punto di vista grafico. Le interazioni utilizzate sono quelle di default che riproducono con facilità e con pochi passaggi le esigenze del form ma non sempre sono sufficienti per rappresentare sistemi più complessi.
Di seguito, lo stesso layout viene presentato con uno stile personalizzato per ogni elemento e con alcune interazioni che arricchiscono il prototipo e danno un’idea più precisa di come sarà il prodotto una volta terminato. QUI il link per poterlo provare.
Qualche consiglio
Oltre ad aver aggiunto alcuni elementi grafici, ci sono accorgimenti e soluzioni interessanti che si possono utilizzare per rendere il prototipo più realistico. Per velocizzare il lavoro, è consigliato l’uso degli stili del widget, simile agli stili di paragrafo in InDesign o ai simboli di Sketch.
Nella finestra dedicata, infatti, è possibile modificare tutte (o quasi) le proprietà degli elementi grafici e aggiungerne di nuove. Le eventuali modifiche verranno applicate su tutti gli oggetti che hanno lo stile assegnato, facendo risparmiare tantissimo tempo in caso di correzioni da fare.
Da notare l’uso di font diversi da quelli di sistema: lo Zilla Slab e il Lato, di Google web font.
Per far sì che questi font siano visibili anche a chi non li ha installati nel sistema, è necessario aggiungerli all’interno della finestra di impostazioni per la generazione del file html e inserire il link indicato da Google quando vengono selezionati.
Non sempre questo accorgimento funziona sui dispositivi mobili Apple ma verrà comunque visualizzato il carattere più simile a quello indicato.
Tornando al form di iscrizione, al pulsante Crea Account è stata aggiunta un’interazione che rende visibile un oggetto nascosto e che viene visualizzato come lightbox, con un layer scuro aggiunto automaticamente.
Un’importante miglioramento rispetto alla versione semplice sono i dynamic panel, oggetti che permettono di avere diversi stati di un elemento che possono variare a seconda di come vengono impostate le interazioni. L’esempio più semplice in questo caso è il check dell’accettazione in cui sono stati creati due stati, disattivo e attivo, che cambiano cliccandoci sopra.
Un uso più avanzato dei dynamic panel associato alle interazioni condizionate è quello usato per il dropbox in cui ad ogni voce, corrisponde uno stato diverso.
L’interazione viene impostata all’interno del pannello properties in cui si dice che, al click, bisogna effettuare un controllo sulla voce che è stata selezionata e cambiare lo stato del quadratino con quello corrispondente.
Questo è tra i casi più semplici di azioni condizionate ma Axure permette controlli su numeri, testi, visibilità degli elementi e tante altre variabili per simulare interazioni molto simili a quelle che un prodotto finito può avere.
Conclusioni
Abbiamo visto come con pochi passaggi sia possibile cominciare ad usare Axure per creare wireframe e studiare i flussi degli utenti senza complicare con la parte grafica ma anche come con pochi accorgimenti si possa raggiungere un risultato visivamente più gradevole e vicino al prodotto finito.
In generale è importante avere sempre in mente l’obiettivo per cui si sta costruendo il prototipo per scegliere il giusto strumento con cui realizzarlo e non lasciarsi prendere la mano con animazioni e interazioni che potrebbero sovraccaricare il file e renderlo di difficile fruizione.
Per approfondire le potenzialità di Axure RP, consiglio la loro pagina di training e di reference
Realizziamo qualcosa di straordinario insieme!
Siamo consulenti prima che partner, scrivici per sapere quale soluzione si adatta meglio alle tue esigenze. Potremo trovare insieme la soluzione migliore per dare vita ai tuoi progetti.
