Appunti di Interazione Uomo Macchina Principi di progettazione per il web I wireframe Luca Pulina 1 Introduzione Nell ambito della progettazione di siti web, i wireframe sono un insieme di documenti che mostrano la struttura, la gerarchia delle informazioni, la funzionalit e il contenuto. I wireframe sono un mezzo per documentare le caratteristiche di un prodotto, nonché la logica tecnica e aziendale contenuta in quelle caratteristiche, con un sottile strato di design visivo. I wireframe vengono utilizzati dai progettisti per capire e costruire il prodotto senza essere distratti dall aspetto implementativo. I wireframe hanno tipicamente tre aree principali: il wireframe stesso; le note di accompagnamento; le informazioni sui wireframe (i metadata). 2 Il wireframe Il wireframe (Figura 1) in senso proprio è una vista dettagliata di una parte specifica di un prodotto. I wireframe possono mostrare qualsiasi cosa: da una panoramica di un prodotto (il frontale di uno smartphone, ad esempio) alla documentazione dettagliata di una particolare funzionalità. I wireframe dovrebbero descrivere a grandi linee la forma di un prodotto. Questa è determinata da tre fattori: il contenuto; la funzionalità; Note tratte dai Cap. 5 del libro D. Saffer, Design dell interazione, Pearson. 1
Figura 1: Esempio di wireframe. 2
i mezzi con cui si accede ai due elementi di sopra (la navigazione). Quindi, il wireframe deve includere uno spazio per il contenuto e le funzioni per gli elementi atti a navigarle (pulsanti, menu, tasti, ecc.). Il contenuto qui inteso in senso lato: include quindi testo, filmati, immagini, animazioni, ecc. Il testo, a meno che non sia specificatamente noto (ad esempio, l etichetta di un pulsante) è in genere rappresentato nei wireframe da finto testo (Lorem ipsum dolor...) o con opportuna rappresentazione grafica (dipende dallo strumento utilizzato). Per funzionalità si intendono comandi pulsanti, cursori, caselle di input,... di una determinata funzione, così come anche il feedback che il prodotto fornisce a questi comandi. Un semplice modulo per un sito web, ad esempio, di solito consiste in etichette ( Inserisci il tuo nome ), caselle di testo (dove si inserisce il nome, ad esempio), radio button, checkbox, un pulsante Invia, un pulsante Annulla e messaggi di errore ( Ti sei dimenticato di inserire il nome ). Tutto ci deve essere documentato sul wireframe. Deve esserci anche il sistema di navigazione (link, menu, barre degli strumenti,...). Tutti i componenti dovrebbero apparire sul wireframe in un modo che ne evidenzi la posizione generale e l importanza. Qualsiasi cosa che non sia ovvia o etichettata deve avere una corrispondente annotazione. 3 Annotazioni Le annotazioni sono brevi note che descrivono elementi non ovvi sul wireframe. Se le persone che osservano il documento vogliono sapere il motivo della presenza di un pulsante, devono essere in grado di leggere l annotazione e capire non solo che cosa fa quel pulsante ma anche perché è lì. Un esempio di annotazione potrebbe essere Questo pulsante ferma il processo affinché gli utenti non debbano aspettare lunghi periodi. Il lettore conosce immediatamente la ragione per cui il pulsante è lì. Di seguito, una lista parziale di oggetti del wireframe che andrebbero annotati: Comandi: ciò che accade quando si preme un pulsante o si fa click su un link. Elementi condizionali: oggetti che cambiano in base al contesto. Ad esempio, in molti menu di applicazioni, alcuni elementi vengono sfumati in base a cosa sta facendo in quel momento. Qualsiasi cosa che, per motivi di spazio, non può essere mostrata nel wireframe stesso (ad esempio, tutti gli elementi di un menu lungo). 4 Metadati Ogni wireframe dovrebbe contenere informazione sul wireframe stesso: i metadati. I metadati più tipici sono i seguenti: 3
Nome del designer. Data di creazione/ultima modifica. Numero di versione. Cosa è cambiato rispetto all ultima versione. Documentazione correlata: qualsiasi documentazione correlata che sia rilevante per il wireframe, quali i requisiti coinvolti, specifiche tecniche, casi o scenari d uso. Si possono citare i documenti appropriati. Problemi irrisolti: ci sono dei problemi con il wireframe che devono ancora essere affrontati? Note generali. In Figura 2 è presente un esempio di wireframe, completo di metadati e annotazioni. 4
5 Figura 2: Esempio di wireframe con annotazioni e metadati (realizzato con Microsoft Visio.