Come realizzare un prototipo responsive in Axure [Tutorial]
Tempo di lettura stimato: 7 - 12 minuti
Il Responsive Web Design è l’approccio più utilizzato oggi per creare pagine che si adattano automaticamente al dispositivo che le carica e richiede un modo nuovo di progettare il contenuto. In questo tutorial viene mostrato un piccolo accorgimento per realizzare un prototipo responsive con Axure in modo veloce ed efficace.
(Skip to English Version)
Uno dei principali strumenti di rappresentazione dell’interaction designer è il wireframe: disegno a fil di ferro utilizzati per descrivere un layout fatto di contenuto e funzioni. In genere è disegnato su carta, con matite e pennarelli, oppure in versione digitale utilizzando appositi applicativi: l’equivalente di un disegno di progetto per l’architetto, o l’ingegnere, che deve spiegare ai costruttori come deve essere realizzato un edificio.
Al fine di simulare l’interazione, è importante affiancare al wireframe un prototipo interattivo, per presentare concetti chiave al committente, per istruire il team di sviluppo, per eseguire test con gruppi di utenti.
Nel tutorial che segue viene spiegata una tecnica con la quale è possibile creare un prototipo responsive con Axure1, uno strumento di prototipazione rapida per il web design.
Axure non integra nativamente una funzione per creare prototipi responsive. Questo tutorial permette di aggirare questo limite, utilizzando una combinazione di tecniche.
L’obiettivo è che il prototipo mostri un layout differente a seconda della dimensione dello schermo, esattamente come farebbe il sito responsive.
La prima fase consiste nel creare un pannello dinamico intermittente2 che è usato come una sentinella per intercettare la dimensione dello schermo, mediante la presenza o meno di un altro pannello dinamico al di sotto di esso.
Sulla pagina del prototipo, al di sotto della sentinella, si posizionano tanti pannelli dinamici quanti sono i layout che si intendono mostrare. Quando la sentinella entra in contatto con uno dei pannelli dinamici, lo accende.
In questo modo, trascinando il bordo della finestra del browser o semplicemente modificando la risoluzione del device o usando device diversi, il prototipo mostra sempre il layout corretto per quella dimensione.
Inspector: ovvero la tecnica dello Scrollspy o Crazy Flicker
Occorre quindi dapprima creare il pannello dinamico sentinella, nell’esempio chiamato Inspector, al quale associare le azioni utili per farlo lampeggiare ad intermittenza.
Nella prima immagine sono mostrate le condizioni OnShow che permettono al pannello di accendersi e spegnersi:
Le condizioni sull’evento OnShow
Per renderlo intermittente occorre mostrarlo (Show inspector) sull’evento OnPageLoad:
Le condizioni sull’evento OnPageLoad
In questo modo si ottiene un pannello che lampeggia con un intervallo di 250ms (per cambiare questo tempo bisogna intervenire sull’evento OnShow modificando il valore dell’azione Wait).
Il passo successivo è posizionare il pannello in modo fisso rispetto alla viewport del browser utilizzando la funzione Pin to browser di Axure. In questo modo, riducendo o allargando la viewport del browser, l’Inspector rimane sempre aderente al bordo.
Il menu pin to browser di Axure
Nella finestra delle opzioni è possibile scegliere dove posizionare il pannello. Ai fini del tutorial occorre posizionarlo in alto a destra in modo tale da farlo scorrere insieme al bordo destro della finestra del browser.
Le opzioni del menu pin to browser
Infine, è necessario associare le azioni che permettono l’accensione delle diverse risoluzioni sull’evento OnHide dell’Inspector (perché OnShow è già utilizzato per l’intermittenza) in modo da farlo interagire con altri panelli dinamici che vengono intercettati durante il ridimensionamento del browser.
Le condizioni sull’evento OnHide
L’immagine sopra mostra le azioni associate all’evento OnHide, utilizzate per visualizzare un rettangolo verde che indica su quale pannello si trova l’Inspector.
Per approfondire la tecnica dell’Inspector è possibile visualizzare3 la prima demo del tutorial.
Dynamic panel per le diverse risoluzioni
La tecnica descritta in precedenza può essere utilizzata per simulare layout con effetti di parallasse o scroll-spy – ovvero mostrare o nascondere contenuti durante lo scorrimento della pagina – ma in questo tutorial ci limitiamo ad usarla per la creazione del prototipo web responsive.
È necessario quindi creare alcuni pannelli dinamici con le diverse versioni del layout da mostrare a secondo del dispositivo che caricherà la pagina.
Le condizioni sugli eventi che gestiscono le diverse risoluzioni del layout
Nell’esempio sono stati creati 4 pannelli dinamici — che rappresentano i breakpoint dei dispositivi per cui verrà realizzato il prototipo — delle seguenti dimensioni:
- 320px, smartphone verticale
- 480px, smartphone orizzontale
- 768px, tablet verticale
- 1024px, tablet orizzontale e desktop
Ovviamente è possibile creare altri breakpoint per simulare dispositivi diversi, ma quelle qui utilizzate sono le dimensioni più comuni.
Il risultato finale è mostrato nella seconda demo.
iframe e pagine per prototipi indipendenti
La tecnica precedente è efficace per creare prototipi di pagine chiave di un progetto complesso.
Per prototipi che contengono molte pagine e che hanno molti contenuti, la tecnica precedente è piuttosto complessa da gestire, perché richiede di disegnare tutte le pagine all’interno dei quattro pannelli dinamici.
La soluzione è utilizzare alcuni iframe all’interno dei pannelli dinamici, per rendere indipendente dai contenuti il contenitore.
Il pannello Sitemap di Axure
Nella prima pagina chiamata Responsive framework (il nostro contenitore) risiede tutta la logica, precedentemente descritta, utilizzata per caricare in base al dispositivo richiedente la versione dei contenuti più adatta.
Ciascun pannello dinamico contiene un iframe che carica la prima pagina della struttura
Il risultato finale è visibile nella terza demo.
Di seguito è possibile inoltre scaricare il file di Axure con il framework responsive completo e pronto per essere riutilizzato.
➜ Download Axure Responsive Web Design Prototype [456KB]
Considerazioni finali
Utilizzare uno strumento come Axure per realizzare un prototipo responsive consente ai designer di concentrarsi sul disegno dell’interazione ed evitare di occupare troppo tempo a fare il debug di un codice che molto probabilmente non verrebbe riutilizzato dal team di sviluppo.
La tecnica descritta in questo tutorial, se da un lato consente di creare un prototipo responsive in modo veloce e senza toccare una riga di codice HTML, dall’altro obbliga il designer a creare diverse versioni dei contenuti per ogni dispositivo preso in considerazione.
Disegnare l’intero sito, moltiplicato per ciascuna risoluzione presa in esame, compromette l’obiettivo iniziale di un prototipo responsive realizzato velocemente.
Il suggerimento è quindi di valutare attentamente — e per ogni progetto — quali sono le pagine chiave per le quali è necessario disegnare un prototipo responsive.
Approfondimenti
(1) Axure è un tool per creare rapidamente prototipi interattivi di siti o applicazioni web. ↩
(2) Create a Flickering or flashing widget to detect scrolling or browser width (Scrollspy, Crazy Flicker) ↩
(3) Per testare il prototipo senza ridimensionare la viewport del browser è possibile utilizzare il Responsive Web Design Bookmarklet ↩
Come prova di virtuosismo nello spingere Axure oltre i suoi limiti abituali è notevole; complimenti! Ma in pratica non vale lo sforzo; si fa prima a usare uno dei tanti responsive frameworks / boilerplates esistenti. Resta da vedere se future versioni di Axure sapranno adattarsi allo stato attuale del web design.
si fa prima a scrivere in html e css….
Costruire un sito direttamente in html e css è un po’ come costruire una casa partendo da una catasta di mattoni su un prato. E’ possibile, ma difficilmente il risultato eguaglia quello ottenuto attraverso un buon processo di progettazione: analisi, concept, approfondimento, prototipo, particolari.
La prototipazione di tipo responsivo permette ai designer il pieno controllo del processo progettuale e delle interazioni con il cliente e il team, prima di impegnare budget prezioso nel lavoro degli sviluppatori.
Well done! This is a really good post and the best implementation of ScrollSpy I’ve seen in an Axure prototype.
I agree with some of the other commenters that this approach will take longer than prototyping a standard 1024×768 but I still think there are benefits to doing it in Axure over straight HTML, especially if you are testing a number of different designs.
I’m still hoping to see if Axure release some RWD functionality, but until they do I’ll be using this method.
Thanks Jamie
As soon as possible, I will translate the article in English for non italian user. BTW I also hope that Axure will developed a sort of function to quickly prototype RWD.