Prototipi sofisticati: perché usare Axure

“Il design non è solo ciò che sembra e si sente. Il design è come funziona." - Steve Jobs

I prototipi si sono rivelati preziosi per prendere decisioni di progettazione migliori. In quanto artefatti, i prototipi sono uno dei risultati principali della progettazione e della prototipazione dell'esperienza utente e, come attività, sono al centro del processo di progettazione incentrato sull'utente. Un prototipo è una fusione di tutto il precedente lavoro di progettazione UX fuso in un unico prodotto visivo e funzionante che viene utilizzato per convalidare ipotesi e testare i progetti.

Sembra abbastanza facile, ma in un mondo saturo di un'abbondanza di strumenti di progettazione, scegliere lo strumento di prototipazione giusto non è un compito da poco che richiede un'attenta considerazione. I progettisti devono tenere conto dei costi, delle funzionalità, dell'integrazione con altri strumenti di progettazione, della curva di apprendimento, delle funzionalità di collaborazione e della piattaforma di riproduzione per la revisione e il test degli utenti.

A complicare le cose, molti nuovi arrivati ​​sono recentemente entrati in scena. Esistono strumenti solo online, ad esempio Figma, InVision, UXPin, Framer, Marvel, Principle, Origami e alcuni sono software desktop tradizionali come Sketch e Adobe XD con prototipazione integrata come estensione delle loro funzionalità. Tutti hanno i loro pro e contro, caratteristiche e integrazioni.

Ma il nuovo non è sempre meglio. Ci sono ancora alcuni vecchi cavalli da guerra sul campo di battaglia: Axure è uno di questi. Quando i designer vogliono fornire prototipi ricchi di funzionalità e dettagliati, Axure merita un altro sguardo. Axure è in circolazione da un po', anni prima che nascessero gli strumenti appena coniati sopra menzionati, e molti designer lo considerano il nonno degli strumenti di wireframe e prototipazione dotati di capacità profonde.

Perché usare Axure?

Al giorno d'oggi, per la maggior parte, i designer utilizzano strumenti di prototipazione basati su hotspot con i quali collegano gli schermi e forse aggiungono alcune transizioni dello schermo. Il problema è che questo metodo non include piccole interazioni che completano l'esperienza utente complessiva durante il test. Al contrario, Axure può facilmente gestire i dettagli sottili e le micro-interazioni che danno vita a un prototipo.

Per esplorare più a fondo come le persone interagirebbero con un progetto specifico, i progettisti possono costruire prototipi con logica delle condizioni, vari input dell'utente e animazioni dinamiche che rendono il prototipo più realistico. È un modo eccellente per ottenere preziose informazioni su cosa funziona e cosa no.

Anche dover saltare troppe applicazioni di progettazione non integrate presenta un problema di inefficienza. Il tipico flusso di lavoro di progettazione prevede che un designer crei interfacce utente in Sketch e crei prototipi in un altro strumento come InVision o Marvel. Successivamente, il design viene passato agli sviluppatori che utilizzano ancora un altro strumento, come Zeplin.

Axure è un'applicazione completamente integrata che elimina la necessità di utilizzare diversi strumenti di progettazione. Ad esempio, dopo aver creato flussi utente, mappe del percorso del cliente, personaggi, storyboard, mappe del sito, architettura delle informazioni e wireframe, i progettisti possono facilmente continuare a realizzare prototipi complessi, direttamente all'interno di Axure. Quando i designer passano i progetti agli sviluppatori, possono avere un'idea migliore di come qualcosa dovrebbe essere implementato e possono collaborare in modo più efficace con i product manager per stimare l'ambito e valutare la fattibilità tecnica.

Il più grande ostacolo alla fornitura di prodotti e servizi ben progettati è la mancanza di comprensione dei nostri utenti. Jared Spool, UIE (Ingegneria dell'interfaccia utente)

Simile ad altri strumenti di progettazione, Axure può essere prelevato rapidamente e utilizzato rapidamente. I widget integrati con cui costruire interazioni dinamiche che possono dare un senso anche ai non programmatori possono essere utilizzati immediatamente per interazioni impressionanti. I designer che desiderano approfondire e investire il tempo per apprendere l'applicazione possono creare siti Web e app complessi e realistici con interazioni complesse.

Esempi di prototipazione Axure nella vita reale

I progettisti hanno sempre poco tempo e devono dimostrare come funzionerebbero i flussi utente specifici nelle revisioni e testare i progetti dei prodotti in anticipo con gli utenti. Le capacità di base di Axure possono brillare in questi scenari perché i progettisti possono trasformare rapidamente le immagini di altri strumenti di progettazione in prototipi interattivi.

Nell'esempio di prodotto B2B riportato di seguito, una serie di schermate è stata esportata da OmniGraffle come PNG. Le immagini sono state ritagliate, mascherate e sovrapposte in Axure. Successivamente, sono stati aggiunti hotspot e componenti interattivi dalla libreria di widget Axure, come menu a discesa e campi modulo, per creare un prototipo ricco e funzionale. Le caratteristiche e le funzionalità del prodotto sono state quindi testate utilizzando test utente moderati e remoti, che hanno portato a rapide iterazioni di progettazione basate sul feedback degli utenti.

In un altro esempio, i team di progettazione e ingegneria sono stati in grado di trovare il modo migliore per progettare due widget particolarmente complicati per un prodotto B2B complesso. L'obiettivo era progettare filtri avanzati e un selettore di colonna personalizzato per una tabella ricca di dati che migliorasse l'usabilità ed fosse anche tecnicamente fattibile.

In questo scenario, da Sketch sono state esportate immagini di stati diversi e sono state aggiunte e animate interazioni rapide in Axure. Sono stati aggiunti componenti dell'interfaccia utente, come pulsanti e caselle di controllo, per dimostrare le interazioni e i loro effetti. I team hanno attraversato diverse iterazioni che sono state riviste e testate. Con altri strumenti di prototipazione, questo sforzo potrebbe aver richiesto molto più tempo.

Caratteristiche e vantaggi di Axure

Di recente ho lavorato in un'azienda che utilizzava solo prototipi da schermo a schermo di base creati con InVision e non aveva mai eseguito molti test sugli utenti. Per testare una caratteristica importante del prodotto in arrivo, mi è stato affidato il compito di creare un prototipo di prodotto dettagliato. È stato molto utile utilizzare questa nuova funzionalità e le parti interessate volevano farlo bene.

Mi ci sono voluti poco meno di due giorni per creare un prototipo dettagliato in Axure con stati diversi e molte micro-interazioni che dimostrassero come si sarebbe comportato il prodotto in diversi scenari. Come vantaggio inaspettato, sono emersi molti casi limite che il team di progettazione è stato in grado di affrontare.

Durante i test, abbiamo potuto vedere dove gli utenti hanno lottato con il design e perché , cosa che non sarebbe stata possibile con un prototipo meno dettagliato costruito con schermi statici. Di conseguenza, siamo stati in grado di affrontare rapidamente i problemi che abbiamo riscontrato.

Ho anche passato il prototipo agli sviluppatori per mostrare loro dove si trovavano i punti di interruzione del design reattivo, come dovevano apparire gli stati di messa a fuoco o di errore e come doveva funzionare la ricerca predittiva.

Quando gli sviluppatori front-end sono stati in grado di mettere le mani sul prototipo, anche la loro vita è stata molto più facile. Anche gli sviluppatori di back-end hanno apprezzato il prototipo perché hanno potuto vedere come avrebbe dovuto funzionare il prodotto finale.

Questo tipo di prototipazione rapida, test e implementazione di una nuova funzionalità di prodotto è stato molto più veloce di qualsiasi altro sviluppo di funzionalità che avevano coinvolto in precedenza e sono emersi meno problemi quando si è trattato della fase di controllo qualità.

Quando tutto è stato detto e fatto, tutti i membri del team hanno menzionato quanto fosse utile il prototipo dettagliato e hanno chiesto di eseguire questo tipo di processo di prototipazione più spesso. Il risultato è che creare, rivedere e testare un prototipo dettagliato può fare un'enorme differenza. L'intero team ha potuto vedere interazioni essenziali e complete che erano significative per gli utenti.

Axure ci consente di testare tutto, anche i casi d'uso più complessi. I nostri prototipi sembrano e si comportano come quelli reali. Julie, Laboratorio di esperienza utente

Caratteristiche e punti di forza di Axure

I progettisti non hanno bisogno di sapere come programmare per creare prototipi complessi, dinamici e ricchi di funzionalità in Axure. È possibile impostare interazioni sofisticate e complesse utilizzando il suo pannello Interazioni con semplici affermazioni "se questo, allora quello". Di seguito è riportato un elenco di alcune funzionalità aggiuntive di Axure:

Prototipazione di base e avanzata

• Widget integrati per wireframe e prototipazione veloci
• Un ambiente drag-and-drop
• Costruire prototipi basati su browser senza codifica
• Creazione di interazioni dalle risorse di Sketch
• Emulazione mobile e visualizzazione di dispositivi mobili
• Campi del modulo di lavoro che consentono l'input dell'utente
• Aggiunta di logica condizionale, variabili ed espressioni
• Utilizzo di contenuti dinamici e visualizzazioni adattive
• Aggiunta di effetti di animazione
• Visualizzazione offline del prototipo
• Librerie di widget personalizzate
• Integrazione e plugin di Adobe XD
• Condivisione di prototipi su Axure Cloud che possono essere visualizzati in un browser

Co-autore e collaborazione

• Axure RP e Axure Cloud consentono a più persone di lavorare allo stesso progetto contemporaneamente.

Beni condivisi

• Crea e condividi librerie di componenti interattivi e importa risorse da Sketch.

Consegna dello sviluppatore

• Pubblica progetti da RP e Sketch su Axure Cloud per redline automatiche più CSS e esportazione di immagini.

Documentazione e specifica

• Crea flussi di processo, smontaggi di prodotti e specifiche visive.

Mini case study di Axure Prototyping

Per mostrare le capacità di Axure che vanno oltre i semplici prototipi da schermo a schermo, ho creato alcune schermate con interazioni sottili per Zalando, un sito di eCommerce esistente. Una volta terminate, tutte queste sequenze prototipo sono state esportate in HTML e potevano essere riviste in un browser da chiunque, ovunque utilizzando Axure Cloud.

In primo luogo, ho creato alcune interazioni del sito dimostrando un mega menu, ricerca, scorrimento orizzontale tra i prodotti, preferiti e iscrizione a una newsletter.

In una pagina di elenco di prodotti, ho creato effetti al passaggio del mouse sulle miniature sotto l'immagine principale del prodotto per mostrare il prodotto in diversi colori (scambio di immagini al passaggio del mouse). Ho anche aggiunto di nuovo un prodotto preferito e un widget a discesa per filtrare la pagina dell'elenco dei prodotti impostando una fascia di prezzo.

Successivamente, allo stesso modo della schermata sopra, volevo dimostrare lo scambio di immagini di prodotti diverse quando si passa il mouse sopra le immagini in miniatura nella pagina dei dettagli di un prodotto. Ho anche aggiunto un'altra funzionalità al passaggio del mouse in modo che gli acquirenti possano vedere la descrizione del prodotto, le informazioni su taglia e vestibilità, consegna e recensioni. Infine, ho incorporato un selettore di taglia e aggiunto il prodotto al carrello.

Illustrando il seguente flusso utente, volevo mostrare come funzionerebbe la gestione di un carrello degli acquisti, ad esempio rimuovendo un prodotto dal carrello, utilizzando sottili diapositive, dissolvenze e animazioni di sostituzione degli elementi. Nessun codice è stato utilizzato per creare queste sottili micro-interazioni.

Ultimo ma non meno importante, volevo mostrare sottili trasformazioni dell'interfaccia utente nella schermata di accesso quando le persone inseriscono informazioni di accesso errate e quale messaggio di errore verrebbe visualizzato.

Queste sottili interazioni e trasformazioni dell'interfaccia utente sono utili quando si testano le funzionalità del prodotto perché designer e ricercatori sugli utenti possono condurre test utente più dettagliati e ottenere informazioni più approfondite sulle reazioni delle persone a un sito di e-commerce. Dimostrano un aspetto e una sensazione specifici e sofisticati che non sarebbero possibili o potrebbero rivelarsi molto difficili da creare con altri strumenti di prototipazione.

Sommario

Alla ricerca dei più recenti e migliori strumenti di wireframe e prototipazione, i designer a volte trascurano strumenti consolidati e capaci che hanno resistito alla prova del tempo.

I designer dovrebbero dare ad Axure un'altra occhiata. Grazie alla sua profondità, al set di funzionalità e alla flessibilità, Axure è uno strumento capace e robusto rispetto ad altre soluzioni e l'azienda continua ad aggiornarlo per mantenere la sua rilevanza come strumento di progettazione.

Una prova gratuita di Axure è disponibile per il download. I designer possono esportare interfacce utente da Sketch, importare in Axure e creare prototipi dall'aspetto realistico. Ci sono anche molti tutorial disponibili per ogni tipo di progetto (sul sito di YouTube e di Axure) e anche i widget Axure pronti per l'uso sono ampiamente disponibili per il download (gratuito ea pagamento).

• • •

Ulteriori letture sul blog di Toptal Design:

• Perfeziona il tuo processo di progettazione UX: una guida alla progettazione di prototipi
• I 10 risultati UX utilizzati dai migliori designer
• Miti UX: prototipazione, test utente e risultati UX
• Tutorial Framer: come creare fantastici prototipi interattivi
• Padroneggia il tuo mestiere con questi migliori strumenti UX