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.

flow1

Nella prossima parte dell’articolo vedremo come passare al wireframe, allo sviluppo del sito e infine alla pubblicazione.