Dal wireframe alla pubblicazione – Sviluppo usabile di un sito parte 2
Questa è la continuazione dell’articolo pubblicato la settimana scorsa sempre qui su IWD.
Prototipo
Tutte le informazioni che abbiamo estrapolato dal flow andranno a creare l’ossatura di questo prototipo. Questo prototipo sarà navigabile in html e qui cercheremo di riproporre tutte le situazioni previste dagli scenari, impersonando di volta in volta i vari personaggi e andando a correggere (il flow o il prototipo a seconda dell’errore) ogni volta che incontreremo un ostacolo.
Abbiamo rilevato un errore nel flow iniziale, infatti ci siamo resi conto che gli studenti non capivano e cliccavano sul link “Materie” presente nel loro spazio della home, così l’abbiamo rimosso, e abbiamo creato una sezione di news separata per ogni categoria di utente, così da creare distinzioni nette nelle notizie. Abbiamo anche aggiunto le news dei genitori per le scuole medie. Avremo quindi questo nuovo flow e in base a questo dovremo ricreare un prototipo e testarlo nuovamente:
Questo schema va bene, quindi ora, dopo aver fatto approvare il prototipo, procederemo al passo successivo: il wireframing.
Wireframing
Il wireframe, diversamente dal prototipo, è molto più dettagliato e quindi avrà molti più dettagli su cui lavorare, sempre con i personaggi e gli scenari. Cosa molto importante: noi quando possibile cerchiamo di lavorare con i contenuti del sito a questa fase, di modo di fare il sito quanto più possibile adatto ai contenuti che andrà a ospitare. Un po’ come una scatola fatta su misura. La differenza col prototipo è che prima cercavamo di trovare errori nella progettazione quindi non ci interessava cosa conteneva il sito, ci servivano gli argomenti e le sezioni, trovando errori in quelle e nella struttura. Ora invece ci servono anche i contenuti di quelle sezioni, cosa conterranno, quindi video, testi o immagini. Molto importanti sono i testi, se sono già un’abbozzo di quelli definitivi sarebbe meglio, mentre per tutto il corredo multimediale possiamo pensarci anche dopo. Anche il wireframe va approvato dal cliente.
Sviluppo
In questa fase andremo a creare il codice di tutto il sito, rispettando la legge Stanca (obbligatoria in questo caso) e le wcag 2.0 se possibile, ovviamente rispettando anche il wireframe che abbiamo creato, stando molto attenti a non fare nessun cambiamento. So di studi molto prestigiosi che fanno pezzo html, pezzo linguaggio dinamico (tipo header html – header php), ma io preferisco fare tutto l’html, anche per via dei motivi legati al supporto css dei browser.
Una volta sviluppato il tutto faremo gli ultimi test, valideremo il codice e controlleremo l’accessibilità (con gli appositi strumenti e misurazioni) e l’usabilità (navigando il sito). Se incontriamo un errore di usabilità a questo stadio vuol dire che abbiamo commesso qualche errore nel prototipo, e, se vogliamo fare le cose fatte bene, dobbiamo ritornare al prototipo, modificare quello che abbiamo da modificare e tornare fino al passaggio dello sviluppo.
Per questo è molto importante la fase del prototipo, se scopriamo un errore a questo stadio, cioè lo sviluppo, sarà molto più dispendioso tornare indietro che non fare tutto bene da subito. Ancora oggi troppe persone fanno test d’usabilità a fine sito, cercando poi di mettere toppe alla meno peggio, compromettendo tutto il lavoro, e creando per forza di cose un prodotto che non è veramente usabile.
Rilascio e misurazione UX
Questa fase è altrettanto importante rispetto alle altre, perchè qui vedremo utenti veri che si confrontano col sito. E quindi grazie a siti come reinvigorate.net (in beta privata), analytics e crazyegg (versione base gratis), oppure script come ClickHeat possiamo “vedere” con le mappe di calore dove gli utenti si posizionano sul sito in maniera precisa, e in caso, migliorare o incrementare la potenza di quelle zone che sono le più viste.
Abbiamo anche un’altra risorsa, diretta, da sfruttare: gli utenti stessi. Possiamo chiedere pareri sul sito agli utenti tramite sondaggi oppure tramite richiesta di feedback, in modo da avere una voce imparziale sul sito e poter fare così gli accorgimenti necessari.
L'Autore
Architetto dell'Informazione presso uno società di webdesign, ho sviluppato nel tempo conoscenze in interaction design e user centered design che cerco di condividere con gli utenti di ItalianWebDesign.
Add to Google
15 Commenti
Interessante percorso di sviluppo. Giungo da poco su questo sito. Ora non vi perdo più. Comincia lo spulcio delle sezioni.
Buon lavoro
ahah ottimo Lthandius! un grazie quindi a Marco che con il suo articolo ci ha fatto conquistare un altro lettore
Non conoscevo Xmind e ora non vedo l’ora di usarlo
In generale un bell’articolo: chiaro, interessante e utile.
Da leggere tutto in un fiato
Complimenti per aver scritto qualcosa in italiano!
Non condivido pero’ il mettere la fase di prototyping prima del wireframing…
Beh, il wireframe è il risultato del prototipo, come faccio a invertirli?
Mi sa che abbiamo due diverse opinioni nella terminologia allora!
Prova a spiegarti, fa sempre bene il confronto =)
Sicuro!
Allora, il procedimento che io seguo di solito:
- field studies
- personas
- scenarios
- integrazione dei requisiti
- conceptual design (e’ qui che inserisco il wireframing e/o lo-fi sketches)
- mockup
- prototipo
- design finale / code
ti rimando poi al sito dell’azienda dove ho fatto il masterclass in User-Centered design
http://www.namahn.com/method
È molto simile, cambiano solo i nomi, nella sostanza credo siano identici o quasi
Potete indicarmi un sw free col quale realizzare prototipi? Un amico mi ha segnalato Axure ma è su licenza
Grazie
Balsamiq Mockups: non e’ free (costa cmq poco, 79$ per la licenza desktop), ma puoi usarlo in versione demo. http://www.balsamiq.com
Grazie della celere indicazione
questi articoli li farei leggere a quelle persone che dicno tu sai fare siti? a quanto me lo fai? ahhahaa poi vanno dal carrozziere gli riparano una scheggia nella portiera gli chiedono 200 euoro pagano e stanno zitti mha forse in italiaancora siamo molto indietro come mentalita ma questo è una altro discorso
[...] concorrenti e cerco di capire gli elementi che debbano essere presenti nel sito. Dopodichè vado di wireframe abbozzato su carta, e se l’impostazione mi piace comincio a guardarmi in giro nelle gallery [...]
io consiglio http://www.mockflow.com. è gratuito (in parte) ed è una web app con possibilità di collaborazione. fatto bene