Proposta d`intervento

Transcript

Proposta d’intervento
sito:
All for music
autore:
Carlo Solimando
Indice
pag. 3
1. Analisi del primo documento ……………………………………………………………..
pag. 4
2. Intervista con stakeholders e utenti ……………………………………………………….
pag. 6
3. Tipologia d’intervento ……………………………………………………………………..
pag. 7
4. I personaggi del sistema ……………………………………………………………………
pag. 13
5. Architettura delle informazioni …………………………………………………………….
pag. 18
6. Design dell’interazione & Prototipo dell’interfaccia ………………………………………..
pag. 25
7. Valutazione tramite test ed eventuali cambiamenti necessari ……………………………….
8. Accenno alle tecnologie utilizzabili ………………………………………………………….
pag. 27
2
1) Analisi del primo documento
Come già detto nelle conclusioni del documento di analisi il sito necessita di una ristrutturazione
dell’architettura delle informazioni.
3
2) Intervista con stakeholders ed utenti
Per questa intervista sono stati contattati alcuni utenti probabili del sito (quindi musicisti e/o
appassionati di musica, …) a cui è stata sottoposta una intervista da compilare dopo aver
esplorato il sito. L’esplorazione del sito è avvenuta (al contrario dei test thinking aloud) in
maniera assistita: c’è stata una prima introduzione orale ai servizi offerti dal sito, seguita da una
fase di navigazione libera da parte dell’utente nella quale, quest’ultimo veniva incoraggiato a
fare domande (che ricevevano risposta) o a chiedere aiuto e, infine, una fase di discussione su
pareri generali riguardanti il sito analizzato. L’intervista sottoposta agli utenti, successivamente
all’esplorazione del sito, segue questo modello:
1. Nome:
2. Età:
3. Sesso:
4. Titolo di studio:
5. Universitario? Si - Facoltà?:
6. Lavori? Si - Che lavoro?:
7. Se lavori – quante ore al giorno? Ti rimane tempo libero?:
8. Se lavori – orari fissi o variabili? Lavori nel weekend?
9. Quali sono i tuoi interessi/hobby?:
10. Utilizzi internet? Quanto al giorno (o settimana o mese)?
11. Per quali scopi usi internet (lavoro e/o tempo libero e/o studio e/o altro)?
12. Usi il computer? A che livello (base – medio – esperto)?
13. Quali dei seguenti servizi web utilizzi (chat e/o blog e/o forum e/o e-commerce e/o social
network (face book, netto, myspace) e/o …)
14. Ti rechi mai in negozi di strumenti musicali?:
15. Quanto dista il più vicino negozio del genere dalla tua abitazione?:
16. Quale sito del genere hai mai visitato?:
17. Perché li hai visitati (es. “volevo comprare un amplificatore marshall da 100 Watt)?:
18. Quali prodotti in particolare ti interessano?:
19. Se dovessi fare un regalo del genere faresti un acquisto su internet?
20. Faresti l’acquisto sul sito in questione?:
21. Sai che molti di questi siti hanno una casella di ricerca per cercare i prodotti? La usi?:
22. Hai mai usato questa funzionalità per confrontare i prodotti?:
23. Suoni uno strumento musicale o sei un appassionato di musica?:
24. Utilizzi attrezzature musicali? Se si quali?:
25. Quante ore dedichi alla musica (suonata o ascoltata o altro…) a settimana (una stima)?:
26. Hai mai utilizzato software musicali? Se si quali?:
27. Quali mancanze hai riscontrato in questo sito, che invece hai trovato in siti del genere?
28. Quali mancanze hai riscontrato in questo sito, che invece hai trovato in siti, non del genere,
ma che avevano funzionalità simili (es. la fase di acquisto di un prodotto)?
29. Quali sono le funzionalità principali che credi bisognerebbe migliorare/aggiungere in questo
sito?
30. Una parola per descrivere questo sito:
4
Questa intervista è stata sottoposta a dieci utenti, con una fascia di età che va dai 18 ai 57 anni1,
di cui:
 2 erano dei gestori di pub che utilizzano (almeno 2 volte a settimana) impiantistica audio
per il locale, organizzando a volte anche serate di musica live;
 4 erano musicisti amatoriali, ma con una grande passione per la musica;
 2 erano musicisti professionisti;
 2 erano musicisti professionisti con competenze nell’editing dell’audio digitale.
Si avrebbe voluto sottoporre ad intervista anche i proprietari del negozio, ma non è stato
possibile in quanto: una volta non era presente il proprietario e altre due volte non poteva perché
c’era troppa gente e poco personale. Le visite in negozio non sono state comunque vane, in
quanto sono emersi altri dettagli sicuramente importanti per lo sviluppo del progetto:
 Esistono alcuni strumenti nel negozio che non sono presenti nel sito, come ad esempio:
violini, contrabbassi e amplificatori.
 Esistono scaffali di articoli non menzionati nel sito (libri, quaderni pentagrammati, ecc..)
Dall’analisi delle interviste sono emersi gli stessi problemi evidenziati nella fase di analisi del
sistema con in più qualche suggerimento per migliorare le funzionalità del sito. Schematizziamo
quanto emerso dalle interviste elencando i problemi comuni riscontrati dagli utenti:
a)
b)
c)
d)
e)
f)
g)
1
Il motore di ricerca del sito non funziona;
La grafica del sito lascia a desiderare;
Le sezioni del sito non sono organizzate in maniera adeguata;
Mancano le descrizioni di alcuni servizi offerti;
La fase di presentazione dei risultati delle ricerche deve essere migliorata;
La fase di acquisto non è chiara;
Il sito è stato descritto per la maggior parte delle volte: “inutile” e “distruttivo per
l’immagine del negozio”.
La fascia di età non è stata decisa a priori, ma è stata ricavata in base agli utenti che sono stati intervistati.
5
3) Tipologia d’intervento
La tipologia di intervento scelta segue il modello proposto da Alan Cooper e prende il nome di
Goal Oriented Design. Questo modello di processo si articola nelle seguenti fasi:
a) Ricerca: lo scopo generale di questa fase è quello di conoscere gli utenti, i vincoli del
problema e gli obiettivi di business.
b) Modellazione: lo scopo di questa fase è quello di modellare gli utenti, ovvero crearne
un’astrazione. Questi modelli di utente sono detti personaggi i quali hanno degli
obiettivi propri.
c) Definizione dei requisiti: questa fase ha lo scopo di definire di quali informazioni e
capacità hanno bisogno i personaggi per raggiungere i loro obiettivi. Per fare questo si
creano degli scenari di contesto dai quali si estraggono i requisiti
d) Definizione del design framework: in questa fase si definisce la struttura globale
dell’interfaccia utente e dei relativi comportamenti.
e) Raffinamento e sviluppo: in questa fase si traduce tutto il design framework in una
forma concreta, aggiungendo dettagli, fino ad arrivare ad una progettazione completa.
La fase di ricerca è stata coperta dal capitolo precedente, mentre le altre fasi verranno coperte
nei capitoli successivi dove andremo a definire dei personaggi, che inseriremo in degli scenari,
nei quali utilizzano una determinata interfaccia, la quale verrà poi raffinata e sviluppata.
6
4) I personaggi del sistema
Nome
Età
Sesso
Stato civile
Residenza
Passione
principale
Lavoro
Descrizione
Obiettivi
Scenario
d’uso
Paolo
55
M
Sposato
Bologna
FUORISTRADA
Barista
Paolo ha 55 anni, è sposato
con Giovanna e gestisce un
pub a Bologna da 20 anni.
Prima di prendere in
gestione il locale, Paolo ha
viaggiato in giro per il
mondo dove ha imparato il
mestiere del barista. Paolo
ha una vera passione per i
fuoristrada, infatti, (dopo
molti sacrifici) è riuscito ad
acquistarne 2: uno per se e
uno (più piccolo) per sua
moglie. Paolo fin da ragazzo ha sempre avuto una predilezione per il
canto, dote che gli ha permesso di pagarsi i primi viaggi andando a
cantare in giro per i locali. Paolo utilizza raramente il computer e quelle
rare volte lo fa se deve organizzare un viaggio o mandare qualche mail.
 Riuscire ad acquistare l’ultimo Land Rover Freelander
 Comprare delle casse per il suo locale
 Organizzare varie serate di musica live nel pub
Sta per arrivare l’inverno e Paolo vorrebbe organizzare una serie di
concerti live con cadenza settimanale, ma si accorge che una delle sue
casse non funziona e che forse il suo impianto di amplificazione non è
adeguato per ottenere una buona resa dagli strumenti musicali. Dopo
una notte di lavoro (chiusura del pub alle 2), Paolo si alza, prende la tua
tazza di the e decide di andare su internet per cercare qualche
informazione su come attrezzare il suo locale per queste serate. Un
amico gli ha parlato del sito allformusic e Paolo decide di dargli
un’occhiata. Paolo naviga il sito in cerca d’informazioni riguardanti
l’affitto e l’installazione di impiantistica per le sue serate: in particolare
cerca dei contatti e delle informazioni di massima riguardanti i prezzi.
7
Nome
Età
Sesso
Stato civile
Residenza
Passione
principale
Lavoro
Descrizione
Obiettivi
Scenario
d’uso
Giacomo (alias jacky)
17
M
Celibe
Torino
VIDEOGAMES
Studente
Giacomo ha 17 anni e vive a
Torino, dove frequenta il terzo
anno dell’istituto tecnico per
geometra. Giacomo ha una
passione
sfrenata
per
i
videogames sotto tutti i punti di
vista, infatti per l’università
vorrebbe
iscriversi
ad
informatica per creare un giorno
il suo gioco. Giacomo ha
imparato a suonare il basso da
quando aveva 12 anni ed è
diventato piuttosto bravo, appassionandosi alla musica jazz. Giacomo
utlizza molto il pc, anche a scuola, sta iniziando ad usare l’AutoCAD
che conosce per il 20% delle sue funzioni, sa utilizzare il word 2003 per
il 40% delle sue funzioni e utlizza spesso internet: MySpace, Facebook.
E-Bay, Msn, ecc…
 Creare un videogames
 Cercare informazioni sugli eventi musicali
 Cercare un amplificatore a buon prezzo per il basso
In uno dei tanti pomeriggi di noia Giacomo non ha voglia di studiarsi le
disequazioni di secondo grado… allora decide di mettersi a suonare, ma
il suo amplificatore leggendario (gli fu regalato da suo zio anni or sono)
esala l’ultimo respiro, quindi controlla nel suo salvadanaio e vede che ci
sono 100 euro: troppo pochi per un amplificatore nuovo... Un suo amico
su Facebook gli consiglia di controllare il sito allformusic, lui ci va e
cerca un amplificatore usato per il basso, cercando di risparmiare il più
possibile. Nella navigazione si accorge che nel sito ci sono anche
informazioni sull’organizzazione di eventi (dal momento che la grafica
del sito è abbastanza “jazz” per i suoi gusti) Giacomo cerca di prendere
informazioni anche sugli eventi.
8
Nome
Età
Sesso
Stato civile
Residenza
Passione
principale
Lavoro
Descrizione
Obiettivi
Scenari
d’uso
Luisa
28
F
Nubile
Roma
MUSICA
Musicista
Luisa è una ragazza di 28 anni
originaria della puglia. Si è diplomata
al conservatorio di foggia cinque anni
fa in flauto traverso. Dopo vari
concorsi è riuscita ad ottenere un posto
nell’orchestra della rai a roma, dove
vive attualmente. Luisa ama i film
romantici, la lettura e possiede una
collezione di borse. La sua passione
più grande è ovviamente la musica alla
quale dedica gran parte della sua vita.
Luisa ha poco tempo da dedicare
all’uso del computer e per questo si
dedica principalmente ad utilizzare
internet per vedere qualche bando di
concorso, le email, cercare qualche offerta di borse su E-Bay e
frequentare il forum “al femminile” dove scambia opinioni soprattutto
con sua cugina Clara che vive a Bologna e che va a trovare spesso.
 Entrare a far parte dell’orchestra della scala
 Cercare un buon artigiano per le riparazioni del suo flauto
Sta per aprirsi la stagione concertistica alla Rai e Luisa è appena tornata
dalla palestra quando si accorge del misfatto… Giorgia, la sua
coinquilina, nello spostare le varie cose vede il flauto e lo vorrebbe
provare, ma sa che Luisa sta per tornare, allora lo prende di corsa e nella
foga accade la tragedia: il flauto cade e si incrina una chiavetta…. Luisa
disperata e soprattutto “irritata” urla con Giorgia e non sa come fare…
L’indomani Luisa deve andare a trovare sua cugina a Bologna per il
weekend, quindi decide di cercare su internet qualche informazione
sulla riparazione degli strumenti, allora digita su Google: “strumenti
musicali bologna” e trova il sito allformusic: ci clicca sopra e naviga il
sito alla ricerca della sezione di riparazione fiati nella speranza di
trovare informazioni sul processo di lavorazione e qualche contatto
dell’artigiano.
9
Nome
Età
Sesso
Stato civile
Residenza
Passione
principale
Lavoro
Descrizione
Obiettivi
Scenario
d’uso
Mario
41
M
Sposato
Fermignagno (PU)
LASAGNE
Idraulico
Mario ha 41 anni, è sposato
con Franca con la quale ha una
figlia di 10 anni (Luigina); fa
l’idraulico da 25 anni a
Fermignano (nella provincia di
Pesaro e Urbino) e ha una
passione sfrenata per le
lasagne. Mario ha un diploma
di ragioneria ottenuto seguendo
le scuole serali della sua città e
dove ha imparato ad utilizzare
Excel per il 30% delle sue funzionalità ed ora lo utilizza per fare le sue
fatture ed organizzarsi il lavoro. Mario vorrebbe mandare Luigina da un
insegnante privato per farle imparare a suonare il pianoforte. Mario, per
la sua attività e a volte per svago, utilizza regolarmente internet:
pubblica i suoi annunci (dove si propone come idraulico) su siti come
Bakeka o Kijiji, cerca delle offerte di prodotti di termoidraulica a volte
anche su E-Bay e quando gli rimane tempo usa Messenger dove si
diverte a chattare con il suo caro amico Luigi che ora vive a Bologna.
 Mangiare più lasagne possibile
 Non far mancare niente alla famiglia
 Acquistare una tastiera usata, ma in buone condizioni spendendo
al massimo 200 euro
In una sessione di chat Luigi dice a Mario: “…sai oggi sono passato
davanti ad un negozio di strumenti musicali qui e ho visto che vendono
anche usato… ho visto che hanno pure un sito che è www.allformusic.it
vedi un po’ se trovi qualcosa per la Luigina..”. Mario finisce la sessione
di chat e prova a cercare qualche tastiera usata per la figlia… navigando
per il sito capisce che c’è ben poco nell’usato, allora cerca nel nuovo e
si focalizza sulle tastiere Casio che hanno un prezzo più accessibile,
Mario tenta di fare un acquisto con la carta di credito ma non ci riesce,
allora decide di chiamare il negozio per chiedere qualche informazione
sui metodi di pagamento e di spedizione.
10
Nome
Età
Sesso
Stato civile
Residenza
Passione
principale
Lavoro
Descrizione
Obiettivi
Scenario
d’uso
Nicolò
33
M
Celibe
Bentivoglio (BO)
CHITARRA
Concertista ed insegnate di chitarra
Nicolò ha 33 anni, è sigle ed è un
musicista professionista. Nicolò ha
iniziato lo studio della chitarra all’età di 8
anni e si è diplomato al conservatorio con
il massimo dei voti all’età di 17 anni. Per
seguire la passione per la musica ha
abbandonato gli studi delle scuole
superiori dopo il secondo anno di liceo.
Nicolò è una persona metodica, precisa e
si studia e si costruisce praticamente
tutto: l’amplificatore, il sito internet, si
autoproduce i dischi e perfino LA CHITARRA… Nicolò per le sue
varie attività ha imparato da qualche anno ad utilizzare il computer
utilizzando soprattutto il CUBASE SX3 (del quale conosce il 70% delle
funzioni), il Word 2000 (del quale conosce il 50% delle funzioni), il
Publisher 2000 (del quale conosce il 40% delle funzioni) e alcuni
programmi per la sintesi vocale. Nicolò utilizza internet
fondamentalmente per acquistare attrezzature musicali o per partecipare
ad un forum di liuteria.
 Insegnare al conservatorio
 Acquistare dei microfoni per le registrazioni
 Acquistare delle librerie sonore per l’editing
In una lezione delle tante, un allievo di Nicolò gli parla di questo
negozio grandissimo che ha visto in una visita a Bologna e gli dice che
li si può trovare di tutto… Nicolò incuriosito visita il sito alla ricerca di
qualche microfono nuovo che possa migliorare le sue registrazioni,
cercando descrizioni dettagliate, manuali tecnici che spieghino meglio la
componentistica dei microfoni ed immagini esaustive da poter
agevolmente stampare. Dal momento che in settimana andrà a Bologna,
Nicolò decide di prendere informazioni sull’indirizzo e gli orari di
apertura del negozio per andarci di persona.
 IL PERSONAGGIO PRINCIPALE
Il personaggio principale è sicuramente Nicolò, perché, dato il suo carattere, lui ha molte
esigenze che devono essere soddisfatte. Inoltre, in base alle varie intervite e test condotti si
è notato che i musicisti in genere tendono a rimanere fedeli quando trovano un venditore che
soddisfi le loro esigenze. Più in generale, quello che cerca in un sito Nicolò è la semplicità e
la chiarezza con un grado di dettaglio il più alto possibile. Quindi, se tutte le informazioni
saranno organizzate secondo uno schema familiare (seguendo anche la progettazione di altri
siti del genere), sicuramente tutti i personaggi resteranno soddisfatti del risultato finale.
11
 DEFINIZIONE DEI REQUISITI
Come si è visto i personaggi creati non hanno (ed in generale non dovrebbero avere)
particolari abilità nell’utilizzo degli strumenti informatici, anche perché (come in qualsiasi
sito di e-commerce) dovrebbero “solamente acquistare dei prodotti”. Per fare questo
passiamo ad elencare i requisiti che scaturiscono dall’analisi dei casi d’uso sopra citati:
 Tutti i servizi (sia quelli principali che quelli secondari) del sito devono essere
immediatamente visibili e rintracciabili, ad esempio: nel caso di Paolo
(installazione/affitto strumentazione), nel caso di Giacomo (organizzazione di
eventi), nel caso di Luisa (sezione riparazione fiati), nel caso di Mario (acquisto
prodotti usati, offerte) e nel caso di Nicolò (progettazione Home studio, acquisto
prodotti in genere).
 Strutturare l’organizzazione del sito secondo una logica funzionale che miri a
soddisfare gli obiettivi dell’utente in maniera semplice ed intuitiva, cioè organizzare
le sezioni del sito secondo una logica semantica e di utilizzo, ad esempio: mettere
vicine le categorie di strumenti musicali con le offerte e con l’usato; oppure mettere
vicini tutti i servizi extra del negozio (es. affitto strumentazione, riparazione fiati,
ecc…); rendere immediatamente disponibili i comandi per procedere all’acquisto di
un prodotto o per accedere alla sezione di aiuto del task in esecuzione.
 Fornire un motore di ricerca adeguato e che sia utile ad esempio: il motore di ricerca
dovrebbe (oltre a fornire un buon strumento di ricerca dei prodotti) fornire uno
strumento di ricerca per i contenuti del sito in genere. Per quanto riguarda i risultati
poi, dovrebbero essere organizzati secondo criteri che favoriscano il confronto e la
navigabilità.
 Aiutare l’utente nella navigazione, ad esempio: fornendo sistemi di navigazione
locali/globali e indicando in ogni momento i link visitati e quello corrente.
 Rendere disponibili tutte le informazioni necessarie ed in qualsiasi momento, ad
esempio: le informazioni molto importanti (come l’indirizzo, gli orari di apertura del
negozio, ecc…) dovrebbero essere sempre immediatamente reperibili; le
informazioni secondarie (come ad esempio le informazioni sul processo di
lavorazione nella riparazione fiati) dovrebbero essere comunque disponibili nel sito o
comunque ci dovrebbe essere almeno dei link di navigazione contestuale (come ad
esempio dei link al sito del produttore di uno strumento musicale).
12
5) Architettura delle informazioni
 CORREZIONE DEGLI ERRORI
Per definire l’architettura delle informazioni è necessario che vengano innanzitutto corretti
gli errori riscontrati nella fase di analisi2. Di seguito verranno fornite alcune indicazioni su
possibili soluzioni:
Errore 1: eliminare la finestra di pop-up che appare all’inizio magari spostando il contenuto
in un’altra sezione più appropriata.
Errore 2: eliminare le animazioni presenti nel sito (non sono necessarie ad esempio quelle
del titolo e quella di Sergio Tomassone)
Errore 3: Aggiungere la tagline “strumenti musicali bologna” al logo del sito mostrato in
home page e nelle altre pagine.
Errore 4: Cercare di eliminare le pagine lunghe, o perlomeno creare delle liste cliccabili ai
contenuti della pagina.
Errore 5: Cambiare la scelta dei colori e la visualizzazione dei menù, ad esempio sfondo
nero e testo bianco (per quanto riguarda i colori); impostare la visualizzazione verticale dei
menù e attivazione con un click del mouse.
Errore 6: riprogettare la scelta del formato dei link in maniera uniforme siano essi
immagini o testo. Nel caso di immagini scegliere delle posizioni e dimensioni appropriate.
Errore 7: eliminare il collegamento alla home page presente nella home page.
Errore 8: riprogettare il sito in modo che sia utilizzabile anche da altri browser
Errore 9: discriminare la disponibilità dei prodotti facendo uso di formalismi grafici (ad
esempio utilizzando uno smile se il prodotto è disponibile) non affidandosi ai colori ed
enfatizzare la posizione della legenda in maniera visibile.
Errore 10: migliorare la grafica, la visibilità e l’usabilità del box di ricerca.
Errore 11: modificare l’algoritmo di ricerca del sito.
Errore 12: nella presentazione dei risultati chiarire esattamente la possibilità di aggiungere
un prodotto al carrello, ad esempio con un pulsante “Aggiungi al carrello”
Errore 13: riallocare le categorie dei prodotti in modo che, ad esempio, i prodotti in offerta
siano distinti da quelli di catalogo e quelli usati.
Errore 14: migliorare la grafica del carrello, ad esempio aggiungendo un pulsante
“acquista”.
Errore 15: aggiungere formalismi grafici di disponibilità dei prodotti già in fase di
presentazione dei risultati di una ricerca ed eliminare la possibilità di aggiungere al carrello
prodotti non disponibili.
Errore 16: aggiungere le foto e soprattutto la descrizione di tutti i prodotti.
Errore 17: aggiungere un sistema di menù a “briciole di pane” in tutto il sito.
Errore 18: aggiungere una mappa del sito.
Errore 19: riscrivere la maggior parte del testo del sito facendo un uso adeguato del
grassetto, del maiuscolo e del sottolineato.
Errore 20: gestire meglio l’organizzazione del carrello, ad esempio:
 Eliminando la possibilità di aggiungere prodotti a 0,00 euro
 Eliminando il pulsante “svuota”
 Esplicitando meglio la funzione del pulsante “carrelli personali”
 Creando un carrello temporaneo che salvi le aggiunte fatte da un utente
non registrato.
2
Qui verranno solo richiamati gli errori, per una descrizione completa si veda il documento “ANALISI DEL
SISTEMA” paragrafo “1.e Rilevazione degli errori”
13
Errore 21: riprogettare il form di registrazione esplicitando in maniera chiara la grafica ed i
campi obbligatori; aggiungendo inoltre dei controlli su alcuni campi.
Errore 22: Eliminare i dati del bonifico dall’inizio della pagina e specificare meglio le
modalità di pagamento; inoltre modificare la grafica della pagina e tenere l’utente nello
stesso sito in tutte le fasi del pagamento.
Errore 23: specificare in maniera adeguata la descrizione dei prodotti in fase di
presentazione dei risultati, ad esempio: eliminando le diciture 0,00 € ed inserendo “TR”
(per trattative riservate) e specificando bene, con formalismi grafici, quali sono i prodotti
usati da quelli non usati (es. usando una “U” per i prodotti usati).
Errore 24: riprogettare l’organizzazione dei sistemi di navigazione3
Errore 25: eliminare il form di newsletter incorporandolo in quello di registrazione.
Errore 26: riprogettare il sito in modo che sia conforme alle direttive del W3C, un primo
passo potrebbe essere quello di aggiungere l’attributo ALT per le immagini.
 BLUEPRINT
Vediamo ora alcuni blueprint di un’architettura possibile che potrebbe migliorare l’usabilità
del sito e che sia in accordo con la soluzione degli errori appena visti.
LEGENDA:
In figura 1 viene mostrato il blueprint che si riferisce alla struttura principale del sito, cioè
quella presente sia in home page che in tutte le altre pagine. Come si può vedere4, rispetto
all’architettura iniziale sono state apportate delle modifiche:
 È stato eliminato il gruppo denominato “Utility”
3
Esempi di come riprogettare l’organizzazione delle sezioni del sito verranno mostrati più avanti nella discussione
quando verranno mostrati i wireframe.
4
Per un confronto tra i blueprint si faccia riferimento al documento “ANALISI DEL SISTEMA” paragrafo “2.b
Creazione della mappa dell’architettura esistente” – figura 7/ 8/ 9
14
 Tutte le categorie di prodotti strumentali (vecchio gruppo “menù”) sono state
raggruppate sotto la categoria “Prodotti Musicali”, alla quale sono state apportate
ulteriori modifiche:
o La categoria “batterie” è stata rinominata in “percussioni”, questo
perchè non sono presenti solo batterie nel gruppo, ma varia
strumentazione per le percussioni in genere.
Pagina
principale
MENU’
INFO
Mappa del
sito
Interfaccia di
login
Interfaccia di
ricerca
Prodotti
musicali
Home
Carrello
Modulo di
registrazione
Recupero/
modica dati
Modulo di
ricerca avanzata
Aiuto
Offerte
PRODOTTI MUSICALI
Usato
Pianoforti
Eventi
Percussioni
Condizioni di
vendita
Luci
Azienda
Partner
Tastiere P.D.
Progettazione
home studio
Str. a fiato
AZIENDA
Laboratorio
riparazione
fiati
Prod per dj
Sfw. Mus.
Chi siamo
Dove siamo
Installazione/
Affitto
strumentazione
Home rec.
Imp. Audio
Contatti
Orari di
apertura
Str. a corda
Manualistica
e cancelleria
Figura 1: blueprint della struttura principale del sito
15








o È stata aggiunta la categoria “strumenti a corda”, perché dopo la visita
al negozio si è scoperto che sono in vendita alcuni strumenti a corda.
Inoltre potrebbe essere la sezione giusta per rimandare al sito
gemellato di “Sergio Tommassone” per l’acquisto di altri strumenti a
corda non presenti in negozio.
o È stata aggiunta la categoria “Manualistica e cancelleria”, perché
dopo la visita al negozio si è scoperto che sono in vendita vari libri
sulla musica e vari pezzi di cancelleria (es. quaderni pentagrammati).
Le sezioni “Offerte”, “Usato”, “Eventi”, “Partner” (vecchio collegamento
“Links”), sono state spostate dal vecchio gruppo “Utility” al gruppo “Menù”.
Sono state spostate (nel gruppo “Menù”) le sezioni “Laboratorio riparazione
fiati”, “Progettazione home studio” e “Installazione/affitto strumentazione”.
È stato aggiunto il collegamento alla “mappa del sito” alla struttura del sito.
Sono stati eliminati i collegamenti “Negozio” (nel gruppo “Info”), “Info
Negozio” e “News Letter” (nel vecchio gruppo “Utility”).
I collegamenti “chi siamo”, “dove siamo” e “contatti” (del gruppo “Info”) sono
stati accorpati sotto il link “Azienda”, al quale è stato aggiunto il collegamento
“Orari di apertura”.
Il collegamento “Info Acquisti” è stato rinominato in “Condizioni di vendita”
Al gruppo “Info” sono stati aggiunti i collegamenti “Aiuto” e “Carrello”.
All’interfaccia di ricerca è stato aggiunto un modulo di ricerca avanzata.
In figura 2 vengono mostrati altri elementi che sono presenti solo in home page. Come si
può notare5, rispetto al blueprint originale, sono stati spostati quelli che erano i “Servizi
Extra del negozio” (es. “Laboratorio di riparazione fiati”) all’interno della struttura
principale del sito. Inoltre le “Pubblicità di varie marche” sono state spostate all’interno del
link “Partner” nella struttura principale del sito.
Pagina
principale
Questa settimana
in vetrina
Bollettino
news
Prodotti
Figura 2: blueprint degli altri elementi della home page
5
Per un confronto tra i blueprint si faccia riferimento al documento “ANALISI DEL SISTEMA” paragrafo “2.b
Creazione della mappa dell’architettura esistente” – figura 8
16
 WIREFRAME
In figura 3 viene mostrato il wireframe generale per specificare le varie sezioni del sito,
mentre in figura 4 viene mostrato un esempio di istanza del wireframe generale.
Branding e servizi stabili
Utente
Contesto
Ricerca
Menù
Multifunzione
Task
Informazioni extra
Figura 3: Wireframe generale
Home Azienda Carrello Condizioni Aiuto
di vendita
All for Music
STRUMENTI MUSICALI BOLOGNA
Sei in: Home  Offerte
Login:
Password:
Ricerca veloce:
Cerca
entra
Prodotti in Offerta
Ricerca Avanzata >>
Nuovo utente? 
Visualizza: 10 | 20 | 50 | 100 | 200 oggetti per pagina
Registrati
Pagina: Prima Prec. 3 di 7 Succ. Ultima
Hai dimenticato il login e/o
la password? 
Recupera i tuoi dati
Img. | Nome  | Cat. | Prezzo | Disp. | Sel. | Filt.

| Batteria A | OF
| 1.500 | E
+ LEGENDA Disponibilità:
- LEGENDA Prezzo:
o TR : Trattative Riservate
per informazioni clicca qui 
info
| O | 
+ LEGENDA Categoria:

| Batteria B | OF
| 1.500 |

| Batteria C | OF
| TR

| Batteria E | OF
| 1.500 |

| Batteria F | OF
| 1.500 | ND | O | 
Eventi

| Batteria G | OF
| 1.500 | E
|  | 
Partner

| Batteria H | OF
| TR
| E
| O | 

| Batteria I | OF
| 1.500 | E
| O | 
+ Prodotti Musicali
L
| O | 
| ND | O | 
Oggetto selezionato:
 Offerte
E
| O | 
Batteria G € 1.500
Usato
Visualizza dettaglio >>
Acquista
+ Contenuto Carrello
Progettazione
Home studio
+ Opzioni di ricerca
Laboratorio
Riparazione fiati
Installazione/
Affitto
Strumentazione
Aiuto per il confronto >>
All For Music s.r.l. – Via Pier de Crescenzi 4, A/B/D 40131 Bologna – Iscrizione Registro
Imprese REA 387515 – P. I. e C.F. 04332500372
Mappa del sito | Ultima modifica pagina: 25/10/09 16:01 | webmaster
Figura 4: un’istanza del wireframe generale
17
6) Design dell’interazione & Prototipo dell’interfaccia
Per definire il design dell’interazione bisogna astrarre un modello che descriva l’interazione.
Gli elementi di questo modello sono quindi: L’utente (U) che utilizza il sistema (S)
attraverso i canali di input/output (I/O), da cui scaturisce l’interazione fra i due. Nelle
sezioni 4 (i personaggi del sistema) e 5 (l’architettura delle informazioni) sono stati
descritti gli utenti ed il sistema in esame (in linea generale). Ora vedremo, invece, come
attraverso degli input possibili prodotti dagli utenti, il sistema reagisce producendo degli
output. Per fare questo faremo uso di vari wireframe per descrivere il funzionamento delle
parti del sistema, tenendo presente la strutturazione definita nelle figure 3 e 4 della sezione
precedente (sez. 5 l’architettura delle informazioni) e definendo, quindi, anche un prototipo
di interfaccia.
 Branding e servizi stabili:
 Logo: viene messo in evidenza il marchio dell’azienda a cui è stata aggiunta la
tagline “strumenti musicali bologna”. Il logo è cliccabile da tutte le pagine del sito
(tranne che nella home page) e riporta alla home page.
 Home: questo link ha la stessa funzionalità del Logo (ovviamente solo dal punto di
vista del funzionamento)
 Azienda (gruppo di link attivabile con un click del mouse, vedi fig. 5):
 Chi siamo: pagina contenente la storia dell’azienda
 Dove siamo: pagina contenente indicazioni su come arrivare al negozio ed
inoltre un frammento di Google Map
 Contatti: pagina contenente vari contatti del negozio
 Orari di apertura: pagina contenente gli orari di apertura del negozio
 Carrello: in questa pagina viene mostrato il carrello e ne viene spiegato brevemente
il funzionamento. Se un utente non è loggato viene creato un carrello temporaneo
che verrà incorporato nel carrello dell’utente dopo l’identificazione/registrazione.
 Condizioni di vendita: vengono esposte tutte le informazioni relative alle condizioni
di vendita come l’informativa sulla privacy, la garanzia, il diritto di recesso e il post
vendita.
 Aiuto: vengono fornite spiegazioni per l’utilizzo del sito in genere (ad esempio una
spiegazione passo passo per l’utilizzo del carrello con un esempio di acquisto di un
prodotto).
di vendita
All for Music
click
di vendita
All for Music
Chi siamo
Dove siamo
Contatti
Orari di apertura
Figura 5: attivazione gruppo link Azienda
 Contesto: vengono fornite informazioni sulla posizione attuale all’interno del sito
(rispetto a quella globale) tramite breadcrumbs.
18
 Utente: contiene tutte le informazioni necessarie per identificare l’utente al sistema o
viceversa. Quando l’utente è loggato (l’interfaccia cambia, vedi fig. 6), viene data la
possibilità di: modificare il profilo creato all’atto della registrazione al sito, visualizzare
lo storico di eventuali acquisti effettuati in passato e di cancellare il profilo nel caso il
cliente non voglia più utilizzare il sito.
Login:
Password:
Utente:
Carlo Solimando
click
entra
Storico Operazioni >>
Nuovo utente? 
Modifica Profilo >>
Registrati
Cancella Profilo >>
la password? 
Logout
Figura 6: descrizione area Utente (esempio di login)
di vendita
All for Music
Sei in: Home  Registrati
Login:
Password:
Ricerca veloce:
Cerca
entra
Nuovo utente? 
Registrati
Modulo di registrazione
Ricerca Avanzata >>
**Login:
**Password:
**Ripeti password:
**Privato?
- LEGENDA:
SI  NO 
la password? 
+ Prodotti Musicali
Offerte
**Nome e Cognome:
**Codice fiscale:
**Indirizzo:
**Provincia:
**C.A.P.:
**Indirizzo email:
Telefono:

Vuoi iscriverti alla NewsLetter?
SI  NO 
ESPORTA in PDF >>
STAMPA il modulo >>
Usato



** : i campi contrassegnati dai
due asterischi sono obbligatori.
Dopo aver inserito tutti i campi
sarà possibile terminare la
registrazione
e
stampare
(esportare) il modulo.
Accetti il trattamento dei dati
personali ?
+ Leggi il testo
SI  NO 
Termina registrazione
Figura 7: modulo di registrazione al sito
Rispetto alla sezione utente del sito in questione è stata migliorata l’interfaccia di
registrazione (alla quale è stata aggiunta la possibilità di iscriversi alla news letter) ed è
19
stata aggiunta l’interfaccia per il recupero dei dati di registrazione in caso di
smarrimento. Nel modulo di registrazione (vedi6 fig. 7), i pulsanti di “stampa modulo”
(“esporta in pdf”) e “termina registrazione” vengono attivati solo dopo che l’utente ha
completato l’inserimento di tutti i dati. Quando l’utente, infine, clicca sul pulsante
“termina registrazione” vengono fatti dei controlli sui campi per controllare siano
conformi (es. che il codice fiscale o l’indirizzo e-mail siano stati inseriti in un formato
corretto) e se tutto va bene si procede con la registrazione, altrimenti il sistema avverte
l’utente della non correttezza dei campi in questione e lo guida nella risoluzione del
problema (senza perdere i dati precedentemente inseriti).
 Menù: in quest’area sono elencati tutti i prodotti ed i servizi messi al disposizione del
sistema (vedi fig. 8). I prodotti sono organizzati per categoria e sono separati dagli altri
servizi. Il collegamento attivo viene segnalato con una freccia () e con il colore
diverso del link; non è possibile cliccarci sopra (a meno che non si tratti di un gruppo,
nel qual caso è possibile cliccare sul link, che ha il segno “+” o “–”, per
espandere/ridurre le voci del gruppo in questione).
 - Prodotti Musicali
+ Percussioni
+ Strumenti a fiato
+ Software musicali
+ Home recording
+ Impianti audio
Luci
Pianoforti
+ Prodotti per DJ
+ Tastiere &
Pianoforti digitali
+ Strumenti a croda
+ Manualistica &
Cancelleria
Offerte
Usato
Eventi
Partner
Progettazione
Home studio
Laboratorio
Riparazione fiati
Installazione/
Affitto
Strumentazione
Figura 8: area Menù
6
In figura le caselle “SI” – “NO” sono da intendersi scelte mutuamente esclusive, quindi, non selezionabili insieme.
20
 Ricerca: in quest’area viene data all’utente la possibilità di effettuare ricerche veloci in
tutto il sito oppure (selezionando l’interfaccia di ricerca avanzata, vedi fig. 9) di fare
delle ricerche più complesse (ad esempio per categorie di prodotti ecc…).
di vendita
All for Music
Sei in: Home  Ricerca avanzata
Login:
Password:
entra
Nuovo utente? 
Modulo di Ricerca avanzata
 Inserisci una o più parole chiave:
 Cerca nella descrizione dei prodotti
Suggerimenti per la
ricerca >>
Registrati
la password? 
 Sezione sito: Tutte le sezioni ||
 Includi eventuali sotto – sezioni
 Solo Prodotti Musicali
 Escludi le Offerte
 Escludi l’Usato
 Escludi i Prodotti Musicali
Ordina i risultati per:
 Nome
 Prezzo
 Disponibilità
 Ascendente
 Discendente
+ Prodotti Musicali
Offerte
 Marca:
Tutte le marche ||
Risultati per pagina:
10 ||
Usato
 Prezzo a partire da:
 Prezzo fino a:
0 ||
0 ||
Avvia la ricerca



Figura 9: modulo di ricerca avanzata
 Multifunzione: quest’area comprende il contenuto della pagina attiva, può riferirsi: alla
spiegazione di un servizio, alla visualizzazione di un elenco di prodotti (che sarà
ordinabile secondo vari criteri) o alla visualizzazione del carrello e successiva fase di
acquisto.
 Task: in quest’area vengono mostrate le operazioni atte a portare l’utente al
completamento del task in corso, quindi, al contenuto dell’area multifunzione.
 Informazioni extra: in quest’area vengono mostrate alcune informazioni sia riguardanti
l’azienda (ad esempio la partita iva o l’indirizzo), sia informazioni di supporto per il sito:
la mappa del sito, la data di ultima modifica della pagina e un contatto per il webmaster.
Vediamo ora qualche altro wireframe che rappresenti le parti più importanti del sito, cioè: la
home page (figura 10), la parte riguardante la descrizione di un prodotto (figura 11) ed il
carrello (figura 12).
21
Home Azienda Carrello Condizioni Aiuto
di vendita
All for Music
Link non
attivo
Sei in: Home
Login:
Password:
Ricerca veloce:
Cerca
entra
Nuovo utente? 
Registrati
la password? 
+ Prodotti Musicali
Offerte
Questa settimana in vetrina
Prodotti Musicali
Ricerca Avanzata >>
Img.
Nome
Prezzo
Vai





TASTIERA
YAMAHA
€ 2.000

TASTIERA
YAMAHA
€ 2.000

TASTIERA
YAMAHA
€ 2.000

Pomeriggio Lun-Mer e VenSab:
15:30 – 19:30
TASTIERA
YAMAHA
€ 2.000

Chiuso il Giovedi pomeriggio e
Domenica.
TASTIERA
YAMAHA
€ 2.000

- Orari di apertura:
Mattina Lun-Sab:
09:00 – 12:30
Usato
Bollettino News
Eventi
Partner
Progettazione
Home studio
Laboratorio
Riparazione fiati
Installazione/
Affitto
Strumentazione
Eventi
Img.
Cosa


Mostra casse
amplificate
FTB
Mostra casse
amplificate
FTB
Dove e
Quando
Presso la
nostra sede il
10/11/2009
Presso la
nostra sede il
10/11/2009
Vai


Pinco pallo live
ore 18.00 il 21/11/09

Uscita del nuovo disco
ore 16.00 il 02/12/09
Tributo al grande Zio
ore 11.00 il 29/11/09

Figura 10: wireframe della Home page
22
di vendita
All for Music
Sei in: Home  Offerte  Dettaglio
Login:
Password:
Ricerca veloce:
Cerca
Dettaglio prodotto
entra
Ricerca Avanzata >>
GALLERIA FOTOGRAFICA
Nuovo utente? 
Registrati
+ ESPORTA in PDF:
- STAMPA dettaglio:
 Solo la foto corrente
 Solo tutta la galleria
 Solo il testo
 Testo e foto corrente
 Testo e tutta la galleria
la password? 
+ Prodotti Musicali
Zoom
Img. 1 di 8
Stampa
Offerte
Usato
Eventi
 Descrizione:
Il clarinetto Selmer Basset Mod. 23 è uno
strumento bla bla bla…
Link al
produttore
Partner

Progettazione
Home studio
Accordatura
N° chiavi
Materiale chiavi
…….
Caratteristiche tecniche:
LA
22
Argento
……..
Laboratorio
Riparazione fiati
Installazione/
Affitto
Strumentazione
Acquista
Aggiungi al Carrello >>
+ Contenuto Carrello:
Figura 11: wireframe per la descrizione dei prodotti
23
Home Azienda Carrello Condizioni Aiuto
di vendita
All for Music
Sei in: Home  Carrello
Login:
Password:
Ricerca veloce:
Cerca
entra
Nuovo utente? 
Registrati
Carrello
Img.

Nome
Tastiera
Prezzo unitario
2.000
Q.ta
1

Tastiera
2.000
1

Tastiera
2.000
Elimina



1
Sub totale: € 6.000
la password? 
 Scegli il metodo di pagamento:
+ Prodotti Musicali
 Offerte
Usato
 Carta di credito
 Bonifico
 Contrassegno
 Pay Pal
 Carte prepagate
Progettazione
Home studio
Laboratorio
Riparazione fiati
Installazione/
Affitto
Strumentazione
Suggerimenti per l’utilizzo
del Carrello >>
Guida ai metodi di
pagamento >>
Guida ai metodi di
spedizione >>
Eventi
Partner
Ricerca Avanzata >>
+ ESPORTA in PDF:
 Scegli il metodo di spedizione:
 Corriere
Scegli il corriere 
 Pacco Postale
 Ritiro presso la sede
+ STAMPA Carrello:
Acquista
Totale: € 6.100
Figura 12: wireframe del carrello
24
7) Valutazione tramite test ed eventuali cambiamenti necessari
Questa fase di testing è stata condotta sottoponendo le immagini (da fig. 4 a fig. 12) del
prototipo creato e descrivendo a voce (qualora l’immagine non lo comprendesse) le risposte
agli input degli utenti. Gli utenti coinvolti per questa fase di test sono stati gli stessi che sono
stati interpellati per il testing nella fase di analisi del sistema7 a distanza di un mese.
I risultati dei test sono stati molto incoraggianti in quanto hanno evidenziato che molti dei
problemi riscontrati durante le varie fasi di questi documenti sono stati risolti. In particolare:







Tutti i servizi che il sistema mette a disposizione sono immediatamente (e sempre)
visibili e raggiungibili. Questo ha portato ad una riduzione drastica dei tempi di
esecuzione dei task (in alcuni casi anche di 10 volte inferiori).
Le sezioni del sito sono organizzate in maniera logica e funzionale permettendo
all’utente di capire cosa può (deve) fare in qualsiasi momento.
È sempre chiara e visibile all’utente la sua posizione all’interno del sito.
Si è cercato di fornire sempre una guida (anche sottoforma di legenda) al contenuto della
pagina corrente.
Si è cercato di definire una sezione di ricerca che sia il più possibile semplice, ma allo
stesso tempo il più possibile funzionale allo scopo.
La fase di acquisto di un prodotto (con l’utilizzo del carrello) è stata resa molto più
intuitiva.
La descrizione e la presentazione dei prodotti è stata resa molto più fluida, chiara e
uniforme.
Ulteriori miglioramenti sono sempre possibili (come in qualsiasi sistema) e gli ultimi test
eseguiti ne hanno suggeriti alcuni:
 Nella visualizzazione del carrello (vedi fig. 12) rendere la colonna “Quantità”
modificabile.
 Nella descrizione dei prodotti (soprattutto quelli elettronici) (vedi fig. 11) aggiungere un
link: o per scaricarne il manuale o al sito del produttore che permetta di scaricarne il
manuale.
 Nella presentazione dei prodotti (vedi fig. 4) eliminare l’opzione “filtra” (perché non
viene usata e anche perché confonde l’utente in quanto non è immediatamente chiaro il
suo funzionamento). Inoltre cambiare la visualizzazione della lista dei prodotti inserendo
una riga di descrizione per ogni prodotto (vedi esemplificazione in figura 13).
7
Per una descrizione completa degli utenti si veda il documento “ANALISI DEL SISTEMA” sezione “4) User testing
ed analisi degli obiettivi”
25
di vendita
All for Music
Sei in: Home  Offerte
Login:
Password:
Ricerca veloce:
Cerca
entra
Prodotti in Offerta
Ricerca Avanzata >>
Nuovo utente? 
Ordina per: Nome 
Registrati
la password? 
per informazioni clicca qui 

Il modello AX è composto
Tastiera
€ 300
yamaha AX da bla bla, bla bla. …>>
Cat.: Nuovo Disp.: Eccellente
Sel.: 

Il modello BX è composto
Tastiera
TR
yamaha BX da bla bla, bla bla. …>>
Cat.: Nuovo Disp.: Limitata
Sel.: 

Il modello CX è composto
Tastiera
€ 300
yamaha CX da bla bla, bla bla. …>>
Cat.: Usato Disp.: Eccellente
Sel.: 

Il modello DX è composto
Tastiera
€ 300
yamaha DX da bla bla, bla bla.
Cat.: Nuovo Disp.: Non disponibile
Sel.: 
Usato
Partner
Progettazione
Home studio
Laboratorio
Riparazione fiati
+ LEGENDA Disponibilità:
- LEGENDA Prezzo:
o TR : Trattative Riservate
+ Prodotti Musicali
Eventi
Prezzo
 Offerte
Categoria
Tastiera
Il modello RX è composto
RX da bla bla, bla bla. …>>
 yamaha
Cat.: Offerte Disp.: Eccellente
€ 300
info
+ LEGENDA Categoria:
Oggetto selezionato:
Tastiera Yamaha CX € 300
Visualizza dettaglio >>
Acquista
+ Contenuto Carrello
+ Opzioni di ricerca
Sel.: 
Aiuto per il confronto >>
Installazione/
Affitto
Strumentazione
Figura 13: nuova visualizzazione lista prodotti
26
8) Accenno alle tecnologie utilizzabili
Le tecnologie utilizzabili per migliorare il sito (anche in considerazione di quanto detto finora) sono
sicuramente sintetizzabili in tre punti principali:

Un motore di ricerca adatto che permetta anche la ricerca full-text.

Validare il codice prodotto mediante gli strumenti forniti online dal W3C per garantire
interoperabilità fra diversi browser/sistemi operativi

Per la parte di programmazione sarebbe sicuramente interessante utilizzare AJAX, ma
con qualche accorgimento necessario (a causa dei noti problemi di accessibilità dovuti
all’utilizzo di AJAX)8:
o utilizzo di “JavaScript non invasivo” (unobtrusive JavaScript): come sintesi di una
serie di buone pratiche di sviluppo, adottato da sviluppatori professionisti che fanno
del rispetto delle Raccomandazioni W3C e delle regole di accessibilità il fondamento
del proprio lavoro.
o Totale separazione tra “gli strati” che compongono un documento:
 comportamenti (javascript),
 presentazione (fogli di stile),
o struttura (linguaggi di marcatura),
 contenuti (testo, immagini, audio, video, ecc…).
L’idea è quella che gli strati superiori non possono esistere senza quelli inferiori, ma,
al contrario, gli strati inferiori sono invece autosufficienti e possono esistere senza
quelli superiori.
o In sintesi: seguire le linee guida elencate nei documenti:
 Roadmap for Accessible Rich Internet Applications (WAI-ARIA Roadmap) http://www.w3.org/TR/wai-aria-roadmap/
 Dynamic
Accessible
Web
Content
Roadmap
http://www.w3.org/WAI/PF/roadmap/DHTMLRoadmap040506.html
 Accessible
Rich
Internet
Applications
(WAI-ARIA)
1.0
http://www.w3.org/TR/wai-aria/
8
Considerazioni estrapolate dal sito http://accessibile.diodati.org/agc/, in particolare, cap. 11 – Garantire la diretta
a
accessibilità delle interfacce utente incorporate. Parte 1 : JavaScript e AJAX
27

Proposta d`intervento

Transcript

Documenti analoghi

zin strumenti musicali

con un sito internet tutto nuovo

Easy glut Fecola di patate 250 g-no prontuario

Menù intero 1

carrello elevatore manuale

Gussola, 12 settembre 2016 Alle famiglie degli alunni delle scuole

Convenzione Digitalpix.com

LIVE CHRISTIAN MUSIC

Cosa posso fare Acquistare libri, strumenti musicali e finanziare

GUIDA PRATICA CON IL CARRELLO ELEVATORE