Nella prima parte di questa serie abbiamo introdotto al progetto che intendiamo realizzare e che chiameremo Photocloud, ed alcune delle tecnologie coinvolte; in questo appuntamento andremo molto più a fondo, definiremo infatti, tramite la tecnica dei Mockup, le user story da realizzare.
User story
Le user story rappresentano le funzionalità dell’applicazione, viste però dal punto di vista dell’utilizzatore. Sono un mezzo di comunicazione fra client, management e team di sviluppo, più che un catalogo preciso e rigoroso di specifiche da seguire alla lettera. Chi ha esperienza “reale” di realizzazione software sa bene che, a parte rari casi, è difficile che un progetto abbia sin dall’inizio (in alcuni casi, mai!) delle specifiche che siano allo stesso tempo complete, aggiornate, stabili. Quindi ben vengano le informali (ma dannatamente efficaci!) user story.
Prima di cominciare a scarabocchiare i nostri mockup, diamoci un’idea di cosa andremo a realizzare:
- foto gallery basata su PHP, MySql e Cloud Storage;
- codice HTML il più possibile aderente agli standard, visualizzabile anche su dispositivi mobili;
- interfaccia utente in gradevole e facile da usare;
- requisiti minimi per il server che la ospiterà.
Dopo un’accesa quanto fantomatica riunione con il cliente (che in questo caso siamo… noi stessi!) abbiamo raggiunto un accordo per realizzare una decina di user story, che ora vi presentiamo.
User story di tipo anonymous user
Queste user story si riferiscono al caso in cui l’utente dell’applicazione non abbia fatto login, quindi si tratterà della parte pubblica della nostra applicazione.
Avremo quindi per prima cosa una homepage:
In questa homepage abbiamo alcuni elementi interessanti:
- il menu di navigazione orizzontale ha tre link:
- Home: riporta su questa pagina iniziale;
- Collezioni: manda ad una pagina con l’elenco delle collezioni disponibili;
- Login: permette di accedere al form di login, per amministrare l’applicazione.
- abbiamo un carousel centrale, che mostra un’animazione delle ultime collezioni create; cliccando su una delle immagini rotanti del carousel andremo (come indicato dal post-it) sulla pagina di dettaglio della collezione.
Il menu ovviamente è un elemento comune che ci accompagnerà anche negli altri use case.
Questa è la pagina Collezioni, raggiungibile cliccando l’omonima voce sul menu di navigazione:
Ogni collezione ha una miniatura (in inglese thumbnail) per aiutarci a identificarla e per creare degli elenchi più gradevoli e facilmente usabili. Ricordiamo infatti che le immagini sono uno dei migliori “facilitatori” per l’utente, e che troppo testo spesso fa calare vistosamente il numero di visite ad un sito; senza contare che stiamo creando un’applicazione per gallerie fotografiche!
Ecco qui sotto la pagina che mostra il dettaglio collezione, raggiungibile cliccando sul carousel della homepage o su una delle miniature nella pagina Collezioni:
Come potete notare, il layout a griglia si ripete anche qui, l’unica differenza è che appena sotto il titolo abbiamo una descrizione della collezione, dove potremo inserire un piccolo racconto, le nostre impressioni o note di viaggio. Cliccando su una foto vogliamo che questa si apra con il classico effetto lightbox, per dare quel tocco di interattività e classe che rendono piacevole un album fotografico online.
Sviluppi
Nel prossimo appuntamento vedremo gli use casi di tipo amministrativo, e illustreremo alcune scelte di progetto.
Links
- definizione di Mockup (Wikipedia).