Dal wireframe alla pubblicazione – Sviluppo usabile di un sito parte 1
Ci sono tanti articoli in rete che spiegano come creare un sito, ma sono tutti più o meno incompleti oppure riguardano solamente il codice, quindi, in questo articolo ho cercato di affrontare la cosa in maniera completa, tralasciando il codice che tutti sappiamo scrivere, affrontando in maniera completa dinamiche come gli utenti e lo sviluppo usabile.
In questo esempio ho usato il sito di una scuola, quindi un sito medio-grande, con diverse sezioni dinamiche e diverse categorie di utenti.
Incontro e briefing col cliente
Per prima cosa andiamo a parlare col cliente, per capire cosa vuole dal sito, cosa vuole otterenere e quali sono i suoi visitatori abituali.
Nel nostro caso i visitatori abituali saranno studenti, genitori e professori, quindi il sito dovrà adattarsi a un target molto eterogeneo sia in senso di età del visitatore (e quindi con il conseguente gap tecnologico) sia di mentalità.
Il sito dovrà contenere le news e le comunicazioni della scuola, una sezione dedicata agli studenti e ai genitori e un forum. Ogni sezione sarà a sua volta divisa per genitori/studenti/professori. Il sito quindi è un grande contenitore di notizie più o meno aggiornate.
Questo è quello che abbiamo ricavato dal breve brief col cliente. Potremo sempre chiedere altre informazioni successivamente se ce ne sarà bisogno.
Sviluppo scenari & personaggi
Degli scenari e dei personaggi avevo già parlato precedentemente, quindi rimando a quel post per ogni chiarimento. Diciamo che cercheremo di prevedere più situazioni possibili, con 4 tipi di utenti: studente, genitore, insegnante, visitatore casuale.
Qualche scenario potrebbe essere:
- Studente X vuole sapere se il giorno 12 ci sarà o meno sciopero, quindi va sul sito a cercare informazioni a riguardo.
- Genitore Y sta cercando informazioni sulla scuola nella zona dove abita per vedere se iscrivere o meno il proprio figlio.
- Genitore Z vuole andarsi a leggere il verbale del consiglio d’istituto (o della classe del figlio) del giorno prima a cui non era potuto partecipare.
- Visitatore casuale capita sul sito e cerca di informarsi sulla scuola, i professori, dove sta, ecc..
Troppi personaggi, sebbene possano caratterizzare ancora meglio il sito, rendono lo sviluppo del sito incredibilmente dispendioso in termini di tempo e denaro. Di solito 4 o 5, basati sulle statistiche di accesso oppure presi da un sunto degli studenti, professori e genitori, sono un buon compromesso.
Flow
Il flow è portare in schema logico tutte le situazioni previste dagli scenari. Useremo Xmind per creare questo flow in modo che sia facilmente modificabile in ogni momento. Xmind è un programma ideale per gestire i flussi e gli schemi, ed è gratuito, quindi l’ideale da usare. Noi in studio lo usiamo dopo aver fatto lo stesso schema sulla lavagna, trasportandolo in digitale, per poi stamparlo e mostrarlo al cliente, che lo deve approvare in maniera scritta, in modo che poi non possa cambiare idea in futuro.
Avremo quindi questo schema, che, attenzione, non è da prendere come definitivo.
Nella prossima parte dell’articolo vedremo come passare al wireframe, allo sviluppo del sito e infine alla pubblicazione.
Post correlati
Trackbacks/Pingbacks
- Dal wireframe alla pubblicazione - Sviluppo usabile di un sito parte 2 | Italian webdesign - [...] è la continuazione dell’articolo pubblicato la settimana scorsa sempre qui su [...]
Lascia un commento
Istock photo
Sponsor Liquida
Sponsor e amici
I più commentati del mese
Consulenza legale
Oggi ti segnaliamo i seguenti link
Iscriviti alla newsletter!
Registrati al sito e al forum
Who's Online
Hai bisogno di un sito?
Lauryn.it, creatrice di Italianwebdesign, offre servizio professionale di webdesign, grafica, e-commerce, webmarketing, seo e posizionamento sui motori di ricerca.
Inoltre converte i tuoi layout grafici in xhtml e css e crea template per Wordpress personalizzati secondo esigenze di community, siti aziendali, blog professionali.
- Per informazioni: Lauryn.it
- Contatto email per preventivi gratuiti: info@lauryn.it
i miei complimenti marco, chiaro e semplice
Davvero molto utile, aspetto con ansia il prossimo.
PS: non conoscevo xmind, fantastico
Ottimo articolo! Davvero tanto di cappello!
In quest’articolo hai evidenziato come la fase di progettazione è fondamentale, realizzare uno schema logico completo ed esaustivo è un obbligo, è la colonna portante di un progetto vincente.
Per CMS e siti dinamici suggerisco analisi approfondita, la realizzazione di un modello E/R e la derivazione del modello logico per strutturare il database e dare il via al progetto.
ottimo approccio all’argomento… troppe volte si pensa che fare un sito sia solo “codificare” una bozza Psd.
ottimo articolo, questa fase è fondamentale: meglio partire col piede giusto piuttosto che correggere poi, col rischio in alcuni casi di dover fare tutto daccapo e che alla fine non si ottenga il giusto risultato.
La parte più difficile è il briefing col cliente, per quello ci vorrebbe un articolo a parte!
Del fatto che è meglio partire bene che correggere poi, viene spiegato bene nella seconda parte dell’articolo, in pubblicazione martedì prossimo =)
@Francesco: Xmind è una bomba, senza di lui prima dovevamo fare tutto tramite lavagna e poi buttarci su photoshop, con risultati che immagini in caso di modifica imprevista
@Ema: hai detto una cosa non giusta, giustissima: il database è altrettanto importante per non fare intoppare il sito
E grazie a tutti quanti per i complimenti =)
Prima di tutto, un saluto a tutti voi, dato che è la prima volta che scrivo qui e grazie per questo magnifico blog.
Venendo all’articolo, mi aggiungo ai complimenti, è davvero ben spiegato e utilissimo.
Di nuovo complimenti.
Ottimo articolo,ora aspetto il prossimo.
Un nostro collaboratore mi ha consigliato di leggere questo articolo. Complimentoni Marco!