Proposta di intervento - unibo.itvitali.web.cs.unibo.it/viewfile/InterPC08/IO?rev=1... ·...

Proposta d’intervento

sito: All for music

autore: Carlo Solimando

2

Indice

1. Analisi del primo documento …………………………………………………………….. 2. Intervista con stakeholders e utenti ……………………………………………………….

3. Tipologia d’intervento ……………………………………………………………………..

4. I personaggi del sistema ……………………………………………………………………

5. Architettura delle informazioni …………………………………………………………….

6. Design dell’interazione & Prototipo dell’interfaccia ………………………………………..

7. Valutazione tramite test ed eventuali cambiamenti necessari ……………………………….

8. Accenno alle tecnologie utilizzabili ………………………………………………………….

pag. 3 pag. 4 pag. 6 pag. 7 pag. 13 pag. 18 pag. 25 pag. 27

3

1) Analisi del primo documento

Come già detto nelle conclusioni del documento di analisi il sito necessita di una ristrutturazione dell’architettura delle informazioni.

4

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:

5

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) Il motore di ricerca del sito non funziona; b) La grafica del sito lascia a desiderare; c) Le sezioni del sito non sono organizzate in maniera adeguata; d) Mancano le descrizioni di alcuni servizi offerti; e) La fase di presentazione dei risultati delle ricerche deve essere migliorata; f) La fase di acquisto non è chiara; g) Il sito è stato descritto per la maggior parte delle volte: “inutile” e “distruttivo per

l’immagine del negozio”.

1 La fascia di età non è stata decisa a priori, ma è stata ricavata in base agli utenti che sono stati intervistati.

6

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.

7

4) I personaggi del sistema

Nome Paolo Età 55 Sesso M Stato civile Sposato Residenza Bologna Passione principale

FUORISTRADA

Lavoro Barista Descrizione 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.

Obiettivi Riuscire ad acquistare l’ultimo Land Rover Freelander Comprare delle casse per il suo locale Organizzare varie serate di musica live nel pub

Scenario d’uso

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.

8

Nome Giacomo (alias jacky) Età 17 Sesso M Stato civile Celibe Residenza Torino Passione principale

VIDEOGAMES

Lavoro Studente Descrizione 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…

Obiettivi Creare un videogames Cercare informazioni sugli eventi musicali Cercare un amplificatore a buon prezzo per il basso

Scenario d’uso

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.

9

Nome Luisa Età 28 Sesso F Stato civile Nubile Residenza Roma Passione principale

MUSICA

Lavoro Musicista Descrizione 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.

Obiettivi Entrare a far parte dell’orchestra della scala Cercare un buon artigiano per le riparazioni del suo flauto

Scenari d’uso

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.

10

Nome Mario Età 41 Sesso M Stato civile Sposato Residenza Fermignagno (PU) Passione principale

LASAGNE

Lavoro Idraulico Descrizione 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.

Obiettivi Mangiare più lasagne possibile Non far mancare niente alla famiglia Acquistare una tastiera usata, ma in buone condizioni spendendo

al massimo 200 euro Scenario d’uso

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.

11

Nome Nicolò Età 33 Sesso M Stato civile Celibe Residenza Bentivoglio (BO) Passione principale

CHITARRA

Lavoro Concertista ed insegnate di chitarra Descrizione 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.

Obiettivi Insegnare al conservatorio Acquistare dei microfoni per le registrazioni Acquistare delle librerie sonore per l’editing

Scenario d’uso

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.

12

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).

13

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”

14

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

15

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.

Figura 1: blueprint della struttura principale del sito

Interfaccia di ricerca

Interfaccia di login

MENU’

Home

INFO

Pagina principale

Aiuto

Prodotti musicali

Offerte

Usato

Eventi

Progettazione home studio

Laboratorio riparazione fiati

Installazione/ Affitto strumentazione

Mappa del sito

Home rec. Imp. Audio

Luci

Prod per dj

Pianoforti

Sfw. Mus.

Str. a fiato Tastiere P.D.

PRODOTTI MUSICALI

Percussioni

Str. a corda Manualistica e cancelleria

Azienda

Carrello

Chi siamo

AZIENDA

Contatti

Orari di apertura

Dove siamo

Partner

Modulo di registrazione

Modulo di ricerca avanzata

Condizioni di vendita

Recupero/modica dati

16

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.

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

Figura 2: blueprint degli altri elementi della home page

Pagina principale

Prodotti

Questa settimana in vetrina

Bollettino news

17

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.

Figura 4: un’istanza del wireframe generale

Home Azienda Carrello Condizioni Aiuto di vendita

Figura 3: Wireframe generale

Branding e servizi stabili

Menù

Contesto Utente

Task Multifunzione

Informazioni extra

Ricerca

All for Music STRUMENTI MUSICALI BOLOGNA

Login: Password: Nuovo utente? Hai dimenticato il login e/o la password?

entra

Recupera i tuoi dati

+ Prodotti Musicali Offerte Usato Eventi Partner Progettazione Home studio Laboratorio Riparazione fiati Installazione/ Affitto Strumentazione

Ricerca veloce:

Ricerca Avanzata >>

Cerca

Sei in: Home Offerte

+ LEGENDA Disponibilità: - LEGENDA Prezzo: o TR : Trattative Riservate

per informazioni clicca qui + LEGENDA Categoria:

Oggetto selezionato: Batteria G € 1.500 Visualizza dettaglio >>

+ Contenuto Carrello + Opzioni di ricerca Aiuto per il confronto >>

Prodotti in Offerta Visualizza: 10 | 20 | 50 | 100 | 200 oggetti per pagina

Pagina: Prima Prec. 3 di 7 Succ. Ultima Img. | Nome | Cat. | Prezzo | Disp. | Sel. | Filt.

| Batteria A | OF | 1.500 | E | O |

| Batteria B | OF | 1.500 | L | O |

| Batteria C | OF | TR | ND | O |

| Batteria E | OF | 1.500 | E | O |

| Batteria F | OF | 1.500 | ND | O |

| Batteria G | OF | 1.500 | E | |

| Batteria H | OF | TR | E | O |

| Batteria I | OF | 1.500 | E | O |

Pagina: Prima Prec. 3 di 7 Succ. Ultima Visualizza: 10 | 20 | 50 | 100 | 200 oggetti per pagina

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

info

Registrati

Acquista

18

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).

Contesto: vengono fornite informazioni sulla posizione attuale all’interno del sito (rispetto a quella globale) tramite breadcrumbs.

Figura 5: attivazione gruppo link Azienda


Chi siamo Dove siamo Contatti Orari di apertura




click

19

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.

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 è


Figura 7: modulo di registrazione al sito

- LEGENDA: ** : i campi contrassegnati dai due asterischi sono obbligatori. Dopo aver inserito tutti i campi sarà possibile terminare la registrazione e stampare (esportare) il modulo. ESPORTA in PDF >> STAMPA il modulo >>

Figura 6: descrizione area Utente (esempio di login)


entra


Registrati

Utente: Carlo Solimando Storico Operazioni >> Modifica Profilo >> Cancella Profilo >>

Logout

click



entra


+ Prodotti Musicali Offerte Usato

Ricerca veloce:

Ricerca Avanzata >>

Cerca

Sei in: Home Registrati

Modulo di registrazione **Login: **Password: **Ripeti password: **Privato? **Nome e Cognome: **Codice fiscale: **Indirizzo: **Provincia: **C.A.P.: **Indirizzo email: Telefono: Vuoi iscriverti alla NewsLetter? Accetti il trattamento dei dati personali ? + Leggi il testo



Registrati

SI NO

SI NO

SI NO Termina registrazione

20

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).

6 In figura le caselle “SI” – “NO” sono da intendersi scelte mutuamente esclusive, quindi, non selezionabili insieme.

- 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ù

21

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…).

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).

Figura 9: modulo di ricerca avanzata

Modulo di Ricerca avanzata Inserisci una o più parole chiave:

Cerca nella descrizione dei prodotti

Sezione sito: Includi eventuali sotto – sezioni Solo Prodotti Musicali Escludi le Offerte Escludi l’Usato Escludi i Prodotti Musicali Marca: Prezzo a partire da: Prezzo fino a:


Suggerimenti per la ricerca >> Ordina i risultati per: Nome Prezzo Disponibilità Ascendente Discendente Risultati per pagina:



entra


+ Prodotti Musicali Offerte Usato

Avvia la ricerca

Sei in: Home Ricerca avanzata



Registrati Tutte le sezioni ||

Tutte le marche ||

0 || 0 ||

10 ||

22

Figura 10: wireframe della Home page

- Orari di apertura: Mattina Lun-Sab: 09:00 – 12:30 Pomeriggio Lun-Mer e Ven-Sab: 15:30 – 19:30 Chiuso il Giovedi pomeriggio e Domenica.




entra



Ricerca veloce:

Ricerca Avanzata >>

Cerca

Sei in: Home



Registrati

Questa settimana in vetrina

Prodotti Musicali Img. Nome Prezzo Vai

TASTIERA YAMAHA € 2.000





Eventi Img. Cosa Dove e

Quando Vai

Mostra casse amplificate FTB

Presso la nostra sede il 10/11/2009

Mostra casse amplificate FTB

Presso la nostra sede il 10/11/2009

Bollettino News

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

Link non attivo

23

Figura 11: wireframe per la descrizione dei prodotti

+ 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

Aggiungi al Carrello >> + Contenuto Carrello:




entra



Ricerca veloce:

Ricerca Avanzata >>

Cerca

Sei in: Home Offerte Dettaglio



Registrati

Dettaglio prodotto Descrizione: Il clarinetto Selmer Basset Mod. 23 è uno strumento bla bla bla… Caratteristiche tecniche: Accordatura LA N° chiavi 22 Materiale chiavi Argento ……. ……..

GALLERIA FOTOGRAFICA

Zoom Img. 1 di 8 Stampa

Link al produttore

Acquista

24

Figura 12: wireframe del carrello




entra



Ricerca veloce:

Ricerca Avanzata >>

Cerca

Sei in: Home Carrello

Suggerimenti per l’utilizzo del Carrello >> Guida ai metodi di pagamento >> Guida ai metodi di spedizione >> + ESPORTA in PDF: + STAMPA Carrello:

Carrello Img. Nome Prezzo unitario Q.ta Elimina

Tastiera 2.000 1 Tastiera 2.000 1 Tastiera 2.000 1

Sub totale: € 6.000 Scegli il metodo di pagamento: Carta di credito Bonifico Contrassegno Pay Pal Carte prepagate

Sub totale: € 6.000 Scegli il metodo di spedizione: Corriere Pacco Postale Ritiro presso la sede

Sub totale: € 6.100

Totale: € 6.100



Registrati

Scegli il corriere

Acquista

25

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”

26

+ LEGENDA Disponibilità: - LEGENDA Prezzo: o TR : Trattative Riservate

per informazioni clicca qui + LEGENDA Categoria:

Oggetto selezionato: Tastiera Yamaha CX € 300 Visualizza dettaglio >>

+ Contenuto Carrello + Opzioni di ricerca Aiuto per il confronto >>

Figura 13: nuova visualizzazione lista prodotti





entra


Ricerca veloce:

Ricerca Avanzata >>

Cerca

Sei in: Home Offerte

Prodotti in Offerta

Ordina per: Nome Categoria Prezzo Visualizza: 10 | 20 | 50 | 100 | 200 oggetti per pagina

Pagina: Prima Prec. 3 di 7 Succ. Ultima

Tastiera yamaha AX

Il modello AX è composto da bla bla, bla bla. …>> € 300

Cat.: Nuovo Disp.: Eccellente Sel.:

Tastiera yamaha BX

Il modello BX è composto da bla bla, bla bla. …>> TR

Cat.: Nuovo Disp.: Limitata Sel.:

Tastiera yamaha CX

Il modello CX è composto da bla bla, bla bla. …>> € 300

Cat.: Usato Disp.: Eccellente Sel.:

Tastiera yamaha DX

Il modello DX è composto da bla bla, bla bla. € 300

Cat.: Nuovo Disp.: Non disponibile Sel.:

Tastiera yamaha RX

Il modello RX è composto da bla bla, bla bla. …>> € 300

Cat.: Offerte Disp.: Eccellente Sel.: Pagina: Prima Prec. 3 di 7 Succ. Ultima Visualizza: 10 | 20 | 50 | 100 | 200 oggetti per pagina



info

Registrati

Acquista

27

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 accessibilità delle interfacce utente incorporate. Parte 1a: JavaScript e AJAX

Date post:	14-Jul-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

Proposta di intervento - unibo.itvitali.web.cs.unibo.it/viewfile/InterPC08/IO?rev=1... ·...

Documents