Presentazione progetto Magazzino Online Csia
Upcoming SlideShare
Loading in...5
×
 

Presentazione progetto Magazzino Online Csia

on

  • 1,853 views

 

Statistics

Views

Total Views
1,853
Views on SlideShare
1,853
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Presentazione progetto Magazzino Online Csia Presentazione progetto Magazzino Online Csia Presentation Transcript

  • TITOLODossier di progettoProgetto interdisciplinare di 3° semestre, proposta personaledi Alessandro BianchiSecondo anno, corso Grafica Digitale orientamento web 2011/2012SSS_AA Scuola specializzata superiore d’arte applicata, Lugano
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 2Indice pag.4 Introduzione RACCOLTA DELLE INFORMAZIONI E ANALISI pag.5 Mandato pag.6 Brief e specifiche progetto pag.7 Pianificazione fasi progettuali pag.8 Brain storming - Ipotesi definizione progetto pag.9 Suddivisione lavori - punti d’analisi pag.10-35 Analisi pag.36-38 Ipotesi funzionalità nuovo sistema pag.39 Conclusioni Analisi FLOWCHART - DEFINIZIONE STRUTTURA DEL SITO E NAVIGAZIONE pag.41 Introduzione Flowchart pag.42-43 Funzionalità pag.44 Use Case pag.45 Flowchart pag.46-47 Card Sorting pag.48 Cambiamenti della Flowchart WIREFRAME - DEFINIZIONE STRUTTURA DELLE PAGINE pag.50-51 Wireframe di bassa definizione pag.52 Wireframe di media definizione pag.53 Test Usabilità - Wireframe di media definizione pag.54 Wireframe di alta definizione pag.55 Test Usabilità - Wireframe di alta definizione MOCKUP - DEFINIZIONE INTERFACCIA GRAFICA pag.57-58 Definizione obbiettivi e caratteristiche pag.59-61 Moodboard pag.62 Evoluzione Mockup pag.63-64 Layout grafico pag.65-66 Test usabilità Mockup pag.67 Particolarità della proposta grafica PROTOTIPAZIONE pag.69 programmazione prototipo pag.70-71 Test usabilità prototipo CONCLUSIONI PROGETTO pag.73 conclusioni progetto
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 3IntroduzioneCome progetto interdisciplinare per il terzo semestre ci è stata affidata unatematica che avevamo già “toccato” con il sito web del liceo artistico, il prece-dente anno: progettare un sito web per il magazzino del csia.Abbiamo deciso di affrontare questo progetto in gruppo, e già dall’inizio sonouscite delle buone idee su quello che dovevamo e potevamo fare.La fase di analisi ci ha permesso di consolidare delle considerazioni che ave-vamo già fatto in precedenza. View slide
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 4TITOLO View slide
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 5MandatoProgettazione di un magazzino online che permetta di agevolare le funzionidel magazzino e snellire i tramiti fra personale e utenti (studenti, docenti,...).Un sito pratico, funzionale, con interfaccia semplice e buona usabilità per gliutenti. Definire il sistema per la gestione di dati: amministratori, utenti, ordinidi materiale, addebito, ecc.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 6Brief e specificheprogettoDescrizione del progettoAcquisizione e verifica di competenze: dall’analisi della soluzione attuale(formulario di ordine cartaceo portato al magazziniere, consegna del materia-le richiesto e aggiornamento informatico degli stocks e dei conti studenti, nonautomatico), alla proposta di una soluzione online che permetta la gestionedegli stocks in tempo reale così come la contabilità (accrediti+addebiti studen-ti), e un’economia di carta.Descrizione bisogniUn sistema pratico, funzionale, informatizzato, che permetta di smettere diusare il formulario cartaceo.Con una buona usabilità per gli utenti, sia amministrativi, sia fruitori.Riuscire a recuperare i dati già utilizzati, aggiornare gli stocks in tempo reale,aggiornare i conti studenti in tempo reale.Il nuovo sistema non deve complicare il workflow attuale della gestione delmagazzino.ScadenzeConsegna dossier di presentazione della proposta1: 30 settembre 2011Consegna struttura del sito e report di usabilità: 14 ottobre 2011Consegna dossier proposta definitiva + prototipo sito: 13 gennaio 2012.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 7Pianificazione fasiprogettuali•Definizione progetto: 31 agosto-8 settembre: o Avviamento progetto: 31 agosto; o Definizione indice tematiche d’analisi: 2-8 settembre. •Definizione dei gruppi di lavoro e ruoli: 7 settttembre;•Analisi delle tematiche individuate: 9-30 settembre: o Verfica sistema per sviluppare il sito (indagine con Database): 20 settembre; o Controllo status temi sottoanalisi: 21 settembre; o Verifica strategia analisi (con Usabilità): 22 settembre; o Report d’analisi: 23-30 settembre. •Definizione struttura del sito e navigazione: 5-14 ottobre: o Test usabilità sulla struttura proposta: 6 ottobre; o Revisione usabilità della struttura proposta: 13 ottobre.•Definizione struttura delle pagine: 19 ottobre-11 novembre;•Definizione interfaccia grafica: 28 ottobre-16 dicembre;•Revisione/recupero o impostazione prototipazione: 16-18 novembre;•Prototipazione sito: 23 novembre-11 gennaio;•Produzione dossier accompagnamento: 7 dicembre-11gennaio;•Termine di consegna: 13 gennaio.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 8Brain-stormingPer iniziare è stato effettuato un brain storming, in cui ogni membro dellaclasse poteva liberamente esprimere termini, concetti e ipotesi relative al pro-getto. Tutto é stato annotato, dando luogo ad una serie di possibili funzionalitàche, previa verifica di fattibilità e utilità, si sarebbero potute includere nel sito,così come aspetti da approfondire e considerare.In un secondo momento, l’ intero output del brainstorming è stato riguardatoe revisionato: ciò che appariva inutile o non fattibile, è stato subito eliminato esono stati conservati soltanto gli spunti davvero interessanti.Un altro risultato del brainstorming è stata la prima definizione del progetto,che descrive gli obiettivi che ci siamo prefissati e il modo in cui vorremmo rag-giungerli, inclusa una definizione preliminare delle tempistiche, che in seguitosarebbe stata rivista.Responsabili: tutti.Prima definizione del progettoIl nostro obiettivo è creare un sito per il magazzino del CSIA, dove gli studentipossano facilmente ordinare il materiale di cui abbisognano, riducendo i tempidi attesa per il ritiro delle merci; se possibile, vorremmo anche permettere allostudente di tenere d’occhio la situazione del proprio conto e dei propri ordini.Ci proponiamo anche di facilitare il lavoro al magazziniere velocizzando unprocesso che ora è cartaceo “computerizzandolo”; per il magazziniere saràdunque più semplice e più rapido rinnovare lo stock e gestire il conto deglistudenti.Una volta terminata la fase di analisi la definizione sovrastante potrebbe subi-re migliorie e cambiamenti; in base alle conclusioni, si potranno anche indivi-duare obiettivi che ora non sono stati presi in considerazione.Responsabili: Andrea e Isabel.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 9Suddivisione lavoro -punti di analisiCSIA UtentiResponsabili: Alessandro e Samuel. Responsabili: Isabel, Salvatore, Sonia.Obiettivi: Obiettivi:• Definire cosa è il CSIA; • Definire le esigenze dell’utenza attraverso un sondaggio online e • Capire a cosa serve il magazzino del CSIA; un sondaggio faccia-a-faccia.• Identificare la struttura e il target del CSIA; •Tipologie di utenti: studenti, docenti, magazziniere, amministrazione.• Definire le formazioni offerte dal CSIA;• Raccogliere informazioni sui servizi offerti dal CSIA: mensa, biblioteca, Punti da tenere in considerazione per i sondaggi:magazzino; o Hai libero accesso a internet?• Conoscere il numero di studenti del CSIA. o Fai acquisti via internet? o Fai acquisti al magazzino?Magazzino o Sei disposto a passare a un metodo tramite web?Responsabili: Andrea, Mattia e Nelson. o Insicurezze riguardo privacy.Obiettivi: o Differenze tra allievi e docenti.• Sapere chi sono i fornitori della merce del magazzino del CSIA; o Bisogni dei docenti.• Individuare struttura, organigramma e gestione del magazzino del CSIA; o Controllo dei conti degli allievi.• Raccogliere informazioni sulla gestione informatica, funzionamento deldatabase, tipologia della struttura esistente, ruoli del magazziniere, funzio-namento conto/ID/tessera studente;• Analizzare il processo di compra-vendita del materiale per il magazzino delCSIA;• Individuare i servizi/bisogni del magazzino del CSIA;• Definire la tipologia del materiale del magazzino del CSIA;• Definire gli attori coinvolti nel servizio del magazzino del CSIA (docenti, studenti, magazziniere);• Definire la struttura e la logistica del magazzino del CSIA;• Ottenere i recapiti del magazziniere (mail e telefono).
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 10Analisi - Il CsiaIl CSIA Decoratore 3D:Il Centro scolastico per le industrie artistiche (CSIA) forma i professionisti In questo corso vengono formati i professionisti nell‘ambito della vetrinisti-nel settore delle arti applicate (decoratore-espositore, designer, disegnatore
 ca,
della comunicazione promozionale, degli allestimenti per punti venditadi arredamenti, grafico, pittore – pittore di scenari, tecnologo tessile (de- e
 stand. Si lavora per sviluppare una sensibilità espressiva finalizzata asign),
tessitore-creatore di tessuti). valorizzare i diversi oggetti da porre in evidenza. Si unisce la conoscenzaOffre inoltre un curriculum di Liceo artistico (Maturità artistica di diritto
 can- delle tecniche tradizionali alle applicazioni sul computer.tonale), un anno unico per l’ottenimento della Maturità professionale artisti-ca, nonché la Scuola Specializzata Superiore di Arte Applicata (animation, Designer:webdesign e industrial design) e il corso propedeutico. La professione si fonda sulla conoscenza delle tecniche artistiche, sul-Il CSIA offre corsi regolari seguendo il calendario scolastico cantonale. La
 la
padronanza delle leggi della percezione e sulla conoscenza dell’essereformazione avviene in aula e in laboratorio, e prevede l’integrazione di ma- umano. 
Il Designer (industriale) crea e defininisce i prodotti che l’industriaterie teoriche con materie artistiche e pratiche. L’insegnamento è volto a svi- realizza.
 Ne determina la migliore forma in relazione all’ergonomia e allaluppare una solida competenza di base, ad esercitare le capacità critiche 
e funzione.
 Conosce i materiali e le tecniche di lavorazione, nonché le tecni-la sensibilità di coloro che scelgono quest’ambito di studio, a dare spazio che di progettazione tradizionali e avanzate.alle abilità personali, integrandole in un contesto pratico e professionale. Disegnatore (con orientamento architettura d’interni):Formazioni offerte: È il collaboratore tecnico e creativo dell’architetto di interni o di un grup-Creatore di tessuti: po 
di lavoro attivo nel campo della pianificazione d’interni.
 Sviluppa proget-Chi esercita questa professione lavora generalmente in proprio oppure in ti e elabora piani esecutivi e di dettaglio mediante programmi
 CAD, eseguelaboratori artigianali.
Quasi sempre è contemporaneamente ideatore, esecu- schizzi, prospettive e fotorendering. 
Elabora l’allestimento di capitolati deitore ed anche venditore
 del proprio prodotto. materiali e dell’opera, dirige i lavori di
costruzione sul cantiere e presso gliAllestisce un piano di lavoro in base ad una richiesta. La progettazione dei
 artigiani. 
Realizza modelli di architettura d’interni.tessuti comprende, oltre all’elaborazione di schizzi e disegni, la ricerca dimateriali, colori e intrecci appropriati attraverso vari procedimenti tecnici, in Grafico:alcuni casi avvalendosi anche del computer.
In seguito prepara il telaio per In questo corso si apprendono le basi della professione del grafico.
 Nella realizzazione dei tessuti. processo della comunicazione, il grafico è l’intermediario tra cliente e 
fruito-Il tessitore e la tessitrice diplomati possiedono la completa padronanza re; comunica messaggi attraverso manifesti, prospetti, marchi, logotipi,
 libri,di
tutti i lavori preliminari come la creazione di un campionario, il calcolo e ecc.La realizzazione di un prodotto grafico necessita di una somma di com-l’impiego dei materiali oltre alla realizzazione dei tessuti e alle rifiniture. petenze 
in diversi settori: conoscenze professionali, tecniche di stampa, informatica,
comunicazione visiva, teoria del colore, storia dell’arte, disegno professionale, 
illustrazione, fotografia.
 Dopo il diploma sono aperte varie possibilità di specializzazione in scuole e
 corsi superiori.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 11Analisi - Il CsiaPittore di scenari: Corso propedeutico:L’arte abbinata alla professione. Le tecniche di pittura collegate alle scel- Il corso propedeutico è indirizzato ai possessori di una Maturità di tipo lice-te
applicative in ambito industriale e artistico.
 Padroneggia le tecniche di ale
 che intendono iscriversi agli esami d’ammissione alle SUP negli indiriz-pittura (antiche e nuove) e le conoscenze professionali applicate nell’indu- zi
artistici.stria, teatri, studi televisivi. 
Esegue lavori di decorazione murale ex-novo,conoscendo la peculiarità degli
“stili decorativi storici”. Maturità professionale artistica: I percorsi formativi in maturità presso la SAA del CSIA prevedono:Tecnologo tessile (design):Il tecnologo tessile (design) è una figura importante nel campo della moda
 • Maturità professionale artistica, di tipo additivo (4 anni)e dell’arredamento; è colui che progetta, che inventa il disegno su carta, • Corso di maturità per professionisti qualificati (1 anno)in
 seguito stampato sul tessuto. 
Un’attenzione particolare viene data allostudio delle forme, dei fiori e dei
colori, alfine di ottenere un prodotto com- Il percorso di Maturità professionale artistica di tipo additivo permette agli
mercialmente valido. allievi di seguire un programma di lezioni integrato, che unisce la formazio- ne
 professionale e le materie specifiche di maturità.
 Questo avviene perLiceo artistico: tutte le sezioni della scuola (vedi presentazione delle 
sezioni).Il Liceo artistico ha come finalità prioritaria la preparazione per l’accesso alle
 Il corso di Maturità per professionisti qualificati porta gli allievi, in possesso
Accademie di Belle Arti e alle Scuole Superiori d’Arte.
 Consente l’ammis- di un titolo di AFC, al conseguimento della Maturità professionale artistica.sione all’Accademia di architettura di Mendrisio (condizionata a un colloquioe a un esame di matematica), alla Facoltà di scienze della comunicazione Corsi SSS_AA:di Lugano, alla Facoltà di Teologia di Lugano (con colloquio e iscrizione aicorsi di latino e greco) e al DACD-SUPSI. 
L’accesso ai Dipartimenti d’Arte Corso professionale superiore di grafica digitale computer animation:Applicata delle Scuole Universitarie 
Professionali svizzere richiede, ge- Questo corso ha come finalità formare dei creatori SSS in grafica computerneralmente, un anno di Corso propedeutico
 o un anno di stage.
Obiettivi animation, il corso si basa su due anni, di cui uno in comune con il corso dididattici: il Liceo artistico si prefigge di ricercare un equilibrio e
 un’interazio- web.ne tra formazione artistica tradizionale e sperimentazione, tra
 competenze Corso professionale superiore di grafica digitale web:manuali e progettualità, tra conoscenza storica e riflessione sul
 presen- Questo corso ha come finalità formare dei creatori SSS in grafica digitalete.
Ogni anno vengono ammessi al massimo 24 allievi. web, il corso si basa su due anni, di cui uno in comune con il corso di ani- mation.Corso per professionisti qualificati: Corso professionale superiore di technical industrial design:Un intero anno dedicato a coloro che vogliono iniziare un percorso formativo
 Questo corso ha come finalità formare dei creatori SSS in technical indu-superiore. Un anno di formazione per ampliare le proprie basi culturali
 e strial design, il corso viene strutturato su due anni, comprensivi di tre mesimettere in pratica le proprie capacità espressive. di stage.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 12Analisi - IntervisteIntervista con il vice direttore Denys Gianora A causa della modalità di programmazione realizzata da Antonio Caso, inIl magazzino viene gestito con il programma 4d Client, appoggiato al siste- tutti i computer della scuola è stata mantenuto la versione 10 di 4D Client, inma operativo Mac. quanto le versioni successive non sarebbero supportate.Con questo programma oltre al magazzino si gestiscono altre cose, come Tramite SQL si può pensare di estendere le informazioni di questo databaseper esempio le valutazioni e le assenze scolastiche, la gestione della biblio- su una pagina web.teca,.. Responsabile intervista: Alessandro.Il magazzino ha già una funzionalità operativa grazie al programma: perogni articolo c’è una scheda, con fornitore, categorie di materiale, prezzo di Intervista Fiorenzo Rezzonico, magazziniereacquisto e di vendita, conteggio del materiale che entra e esce. Generalmente un articolo viene riassortito nel giro di una settimana, maOltre questo anche il vice direttore ammette che sarebbe interessante forni- le tempistiche di consegna possono variare da ditta a ditta. Per esempio,re foto e descrizione materiale. la ditta che fornisce il materiale cartaceo impiega un solo giorno a rifornireI rivenditori che riforniscono il materiale sono una 50, ma devono essere il magazzino del CSIA. Il magazziniere ha diversi compiti, tra cui quello diriservati, non mostrati agli studenti, la Lepori e storni fornisce unicamente verificare la disponibilità degli articoli e di occuparsi dell’ordinazione di quelliil 10% del materiale scolastico, come ad esempio gli scatoloni, le tavole da esauriti (tramite fax). Inoltre, si occupa anche di ordinare nuovi materiali e didisegno tecnico,.. gli altri distributori sono quelli ufficiali, come Caran d’ache. distribuire il materiale di base a coloro che frequentano il primo anno scola-I fornitori sono gestiti in 4d client anche per avere poi un idea di quello che stico. Contemporaneamente esegue lavori di manutenzione, il controllo del-pagano ad ognuno, anche per avere magari un rimborso… le pulizie, la distribuzione delle chiavi degli armadietti, e altro ancora, cosa che non gli permette di dedicarsi pienamente alla gestione del magazzino.Le fotocopie dei docenti vengono addebitate inizialmente ad un conto sezio- Sarebbe quindi opportuno ingaggiare una persona che si occupi unicamen-ne, alla fine dell’anno viene diviso fra gli studenti. te di esso: questo permetterebbe di avere un orario più esteso.La firma degli studenti serve per coprire l’ordine, nel caso del nostro pro- I fogli delle ordinazioni eseguite dagli studenti vengono archiviati per ungetto viene coperto da password + lettura tessera. anno, di modo che nel caso vi fossero stati errori da parte del magazziniere o dello studente durante la fase di ordinazione o di interazione con il data- base, si possa avere un riscontro cartaceo sicuro.Intervista Federico Bernasconi, supporto informatico La ricarica delle tessere delle fotocopie non è un compito del magazziniere;4D Client è un software che, supportato da una rete (un client o un server) egli si occupa solo di registrare il pagamento sul database.permette a diversi utenti di collegarsi per gestire database, archivi, e quan- La richiesta delle merci varia molto da periodo a periodo. Ad esempio, nelto’altro. periodo di dicembre sono molto richiesti i plastici DAS, mentre poi la richie-All’interno del CSIA, questo software viene utilizzato per gestire l’archivia- sta cala. In linea di massima gli studenti che utilizzano di più il magazzinozione delle schede dei docenti, degli studenti, così come le relative infor- sono i decoratori e i pittori, mentre gli articoli più richiesti durante l’interomazioni; per l’inserimento delle valutazioni e delle assenze; per la gestione, anno scolastico sono: fogli jawa, blocco offset, carta silvretta, matite. I libridistribuzione e vendita degli articoli del magazzino. sono richiesti solo all’inizio dell’anno. Responsabili intervista: Andrea e Mattia
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 13Analisi - IntervisteIntervista del magazziniere riguardo all’utilizzo di 4D Client Foto scattate durante l’intervista al magazziniereIl magazziniere dichiara di aver un buon feeling con il programma 4DCLIENT. Inoltre il software ha un’interfaccia semplice ed intuitiva, che egliriesce ad utilizzare nonostante non abbia una solida base di nozione infor-matiche. Sono solo due anni che questo software viene utilizzato, e il ma-gazziniere ha confermato che in caso di necessità di passare ad un sistemadifferente non avrebbe problemi. Nonostante la semplicità, il programmapresenta diverse lacune: ad esempio, una volta effettuata una comandac’è la possibilità di annullare l’ordine solamente uscendo dalla schermatae ritornando al punto di partenza. Inoltre, non c’è la possibilità di visionarele categorie degli oggetti, di dividere gli studenti in sezioni, e il sistema nonavvisa in nessuno modo in caso di esaurimento della merce. L’unica perplessità esposta dal magazziniere riguardo alla nostra idea per ilprogetto riguarda la modalità di consegna e ritiro: il magazziniere è preoccu-pato del fatto che un allievo che ha comandato della merce non si presentia ritirarla, occupando così spazio inutile in magazzino, in quanto il posto adisposizione è ridotto, e in caso di mancato ritiro e gran numero di comandepotrebbero esserci dei problemi logistici.Responsabili intervista: Alessandro, Andrea, Mattia e Nelson.Intervista Antonio Caso, creatore sistema 4Dclient per la gestio-ne del magazzinoPer quanto riguarda la segreteria e la Direzione, 4D Client verrà prossima-mente sostituito con un software che verrà assegnato dal Cantone. Riguar-do alla gestione del magazzino, verrà invece mantenuto il software in usoattualmente.L’intero programma 4D Client è stato adattato alle esigenze della scuola. Sesi volessero aggiungere ulteriori schede o funzioni, non ci sarebbero proble-mi, in quanto il software utilizza un metodo di composizione dei form similead Illustrator e Dreamweaver.Esiste la possibilità di estendere l’area di login a tutti gli studenti, dato che ilsoftware è già suddiviso in 3 aree( direzione, segreteria, magazzino).Responsabili intervista: Alessandro e Mattia.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 14Analisi - SondaggiInterviste fruitori del magazzino: Sondaggio quantitativo; Studenti È stato effettuato un sondaggio online, al quale hanno partecipato 41Docenti studenti del CSIA di varie sezioni e anni. Purtroppo non si ha avuto alcunÈ stato effettuato un sondaggio online, al quale hanno partecipato 21 do- riscontro da parte dei Decoratori 3D (0 %), mentre il maggior numero di ri-centi del CSIA di varie sezioni e anni. sposte ci sono pervenute dal Liceo Artistico (27 %), dagli studenti di Grafica (17 %) e da quelli della SSS__AA (15 %).Conclusioni: Conclusioni:È emerso che le conoscenze informatiche dei docenti sono di medio livello È emerso che le conoscenze informatiche degli studenti sono di medio li-(62 %) e che utilizzano internet da circa mezz’ora a due ore (Meno di un’ora vello (73 %) e che utilizzano internet da una a quattro ore (1-2 ore al giorno:al giorno: 43 %, 1-2 ore al giorno: 38 %), soprattutto durante il periodo se- 46 %, 3-4 ore al giorno: 37 %), soprattutto durante il periodo serale (69 %),rale (54 %), accedendo specialmente da casa (81 %). Una buona fetta dei accedendo specialmente da casa (100 %). Una buona fetta degli studentidocenti (76 %) ha accesso a internet dalla propria sezione. (73 %) non ha accesso a internet dalla propria sezione.Abbiamo riscontrato che quasi tutti i docenti effettuano acquisti via internet Abbiamo riscontrato che quasi tutti i studenti non effettuano acquisti via(90 %). internet (68 %).Abbiamo appurato che per quanto riguarda l’acquisto di materiale in magaz- Abbiamo appurato che la maggior parte degli studenti acquista con regola-zino, vi sono due categorie di docenti: alcuni acquistano con regolarità una rità una volta al mese (76 %). Il 62 % degli studenti si rivolge soprattutto alvolta al mese (48 %), mentre gli altri non usifruiscono mai di questo servi- magazzino della scuola.zio(52 %). Il 32 % dei docenti acquistano presso il magazzino della scuola,il 34 % si rivolge adi negozi specializzati. Quasi tutti i docenti effettuano gli Il sistema attuale d’acquisto del magazzino viene valutato migliorabile (56acquisti autonomamente (73 %). %) a causa dei tempi d’attesa troppo lunghi, che spesso causano la perdita della pausa; degli orari d’apertura troppo ridotti; l’assenza della possibilità diIl sistema attuale d’acquisto del magazzino viene valutato buono (38 %). Chi avere un controllo sul proprio conto e sui propri acquisti.l’ha giudicato migliorabile (61 %) si è lamentato del fatto che i tempi d’atte-sa sono troppo lunghi, gli orari d’apertura sono troppo ridotti, l’efficienza è La proposta di realizzare un magazzino online è stata ritenuta utile dallascarsa e vi sono problemi d’acquisto soprattutto a inizio anno. maggioranza degli studenti (63 %). Diversi si sono però lamentati del fatto che bisognerebbe però in ogni caso recarsi al magazzino per il ritiro dellaLa proposta di realizzare un magazzino online è stata ritenuta utile da alcu- merce.ni(62 %), mentre altri si sono dichiarati indifferenti (32 %).
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 15Analisi - SondaggiSondaggio qualitativoÈ stato effettuato un sondaggio faccia-a-faccia, al quale hanno partecipato10 studenti del CSIA (di un’età compresa tra i 16 e i 17 anni), appartenentiad ogni sezione del CSIA, eccetto che nel caso dei Pittori di scenari, i qualisi sono rifiutati di partecipare.Conclusioni:Il magazzino è stato giudicato pratico, ma gli studenti si sono nuovamente(vedi sottocapitolo precedente) lamentati dei lunghi tempi d’attesa, che liportavano alla perdita della pausa. Altri problemi citati sono stati gli alti prez-zi del materiale; l’assenza di un listino prezzi ben visibile; la mancanza dimateriali, che li portava a doversi rivolgere ad altri fornitori; la già citata (vedisottocapitolo precedente) assenza della possibilità di controllare lo stato delproprio conto.Nel caso dovessero acquistare il materiale tramite un magazzino online, glistudenti gradirebbero una navigazione per categorie (da macro a micro).In aggiunta troverebbero utile un sistema di ricerca con filtri, così come unordine alfabetico del materiale e una fotografia rappresentativa da associarealle varie categorie.Le funzionalità giudicate utili sono le seguenti: avere la possibilità di richie-dere uno storico degli acquisti; poter restituire il materiale intatto appena ac-quistato in caso di mancato utilizzo; la possibilità di scegliere se acquistareo meno il materiale richiesto all’inizio dell’anno; un avviso quando il creditosul conto si sta per esaurire; avere la possibilità di vedere la giacenza delmateriale per regolarsi durante sl’acquisto. È stata invece bocciata l’idea disuddividere i prodotti in base alla sezione dello studente, dopo che ha averfatto la login.L’idea di istituire una penale in caso di mancato ritiro, è stata accolta una-nimamente, a patto che il termine di ritiro della merce sia ragionevole e cheesista la possibilità di avvisare del mancato ritiro dovuto ad una emergenza.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 16Analisi - PersonasDefinizione pubblici di riferimento (personas)Dopo aver raccolto le informazioni ottenute tramite le varie interviste ed i • Sezione: Decoratori 3D (Decoratori/espositori);sondaggi, abbiamo potuto estrapolare 4 personas di utenti tipici: 2 per gli • Materie: Disegno Tecnico;studenti, 1 per il docente, 1 infine per il magazziniere. • Studenti: Secondo anno. • Età: 54 anni;Docente: Annibale • Livello informatico: medio;• Nome: Annibale; • Elenco bisogni: o Comprare velocemente il materiale per sè e per la classe; o Ritiro merce rapido; o Trovare tutto il materiale necessario nello stock del magazzino. • Obiettivi (goal): o Avere la possibilità di acquistare il materiale senza tempi d’attesa; o Avere la possibilità di ritirare il materiale in ogni momento della giornata; o Non doversi rivolgere ad altri fornitori. • Compiti (task): o Ordinare tramite il magazzino online; o Consultare gli orari di apertura del magazzino; o Consultare la disponibilità del materiale.• Sezione: Decoratori 3D (Decoratori/espositori);• Materie: Disegno Tecnico;• Studenti: Secondo anno.• Età: 54 anni;• Livello informatico: medio;
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 17Analisi - PersonasStudenti: Virginia e Joaquin• Nome: Virginia; • Obiettivi (goal): o Tenere sotto controllo il credito; o Potersi informare sul materiale in stock; o Sapere quando un articolo è esaurito; • Compiti (task): o Guardare lo stato del proprio account utente; o Leggere la descrizione del materiale; o Consultare la disponibilità del materiale.• Classe: Terzo anno, liceo artistico;• Età: 18;• Livello informatico: Medio.• Elenco bisogni: o Voglio avere un magazzino accessibile in tutti i momenti; o Voglio tenere sotto controllo il mio conto studente; o Voglio un magazziniere più cortese; o Vorrei un magazzino più fornito per non dover andare a comprare altrove ciò che manca; o Ricevere una notifica del materiale ad uso ricorrente ; o Ricevere una notifica al quasi esaurimento del credito.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 18Analisi - Personas• Nome: Joaquin; • Elenco bisogni: o Voglio avere un magazzino accessibile in tutti i momenti; o Voglio tenere sotto controllo il mio conto studente; o Voglio un magazziniere più cortese; o Vorrei un magazzino più fornito per non dover andare a comprare altrove ciò che manca; o Ricevere una notifica del materiale ad uso ricorrente ; o Ricevere una notifica al quasi esaurimento del credito. • Obiettivi (goal): o Avere la possibilità di ritirare il materiale in ogni momento della gior nata; o Non dovermi rivolgere ad altri fornitori e vedere se il materiale è disponibile; o Voglio tenere sotto controllo gli acquisti effettuati. • Compiti (task): o Consultare gli orari di apertura del magazzino; o Guardare l’inventario del magazzino; o Guardare lo storico degli acquisti.• Classe: Secondo anno, Grafica;• Età: 16;• Livello informatico: Medio.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 19Analisi - PersonasMagazziniere: Ubaldo • Nome: Ubaldo; • Incarichi: gestione il magazzino; preparazione del materiale per gli studenti del primo anno, per i corsi preparatori e gli esami; manutenzione; controllo delle pulizie; distribuzione delle chiavi degli armadietti ; • Età: 56; • Livello informatico: basso. • Elenco bisogni: o Voglio avere più tempo da dedicare al magazzino; o Voglio potere gestire il magazzino in maniera semplice e rapida; o Voglio esser avvisato quando una merce è prossima all’esaurimento; o Voglio poter annullare facilmente un ordine. • Obiettivi (goal): o Poter gestire gli ordini in maniera rapida e con poche operazioni; o Poter vedere rapidamente quali materiali sono prossimi all’esaurimento. • Compiti (task): o Utilizzare e compilare le schede per registrare i nuovi materiali; o Guardare gli ordini del giorno; o Consultare i materiali prossimi all’esaurimento ed effettuare la comanda.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 20Analisi - Workflowfruitori workflow attuale: vedi allegato workflow auspicabile: vedi allegato
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 21Analisi - Workflowsoftware Suddivisione compiti: vedi allegato Sistema carta studenti e bollettino magazzino: vedi allegato Organigramma CSIA Sistema carta studenti e bollettino magazzino VICE DIRETTORE CARTA STUDENTI FOGLIO MAGAZZINO contratto distributori addebito -BIBLIOTECA -MAGAZZINO MATERIALE -FOTOCOPIE -RICARICA CARTA STUDENTI segretariato magazziniere -STAMPE (ricarica tramite magazzino) -RICARICA BOLLETTINO saldo bollettino controlla ID studente ORA stampa foglio magazzino controlla materiale ordina materiale stampa fotocopie docenti consegna materiale -BIBLIOTECA -MATERIALE MAGAZZINO addebita sezione addebita -MENSA ? POSSIBILITÀ -RICARICA BOLLETTINO ordina materiale +WEB
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 22Analisi - Workflowsoftware 4D Client: addebito merce 4D Client: addebito merce: vedi allegato 4D Client: estratto conto 4D Client:estratto conto: vedi allegato Bollettino di consegna Scansione lettore barcode utente Bollettino di consegna o tessera studente Conferma account utente Lettura articolo su bollettino Configurazione data 00.00.0000 (data estratto conto attuale) Verifica articolo su catalogo stampato Scansione barcode articolo da catalogo Verifica estratto conto Inserimento quantità Conferma Stampa estratto conto Salva e chiudi Iscrizione della data di registrazione dell’ addebito sul bollettino Archiviazione bollettino
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 23Analisi - Workflowsoftware 4D Client: giacenza magazzino 4D Client: Inserimento nuovo articolo 4D Client:giacenza magazzino: vedi allegato 4D Client: Inserimento nuovo articolo: vedi allegato Selezione articolo da catalogo Funzione nuovo articolo Scansione barcode da articolo Inserimento dati nuovo articolo Verifica quantità Salva e chiudi
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 24Analisi -BenchmarkingDefinizione sistema di comparazione Grafica:Prima di iniziare ad analizzare i vari siti concorrenti, abbiamo scelto un me- -Organizzazione dei contenuti: L’impaginazione è corretta? È stata mante-todo comune per valutare e comparare le pagine in modo oggettivo. nuta una giusta gerarchia? Gli elementi più visibili sono quelli effettivamenteDato che il lavoro era diviso fra tre persone, questo sistema era decisamen- più importanti? Etc.te importante, e ci avrebbe aiutato anche in un secondo tempo come con- Testi: È utilizzato un font adeguato? Il contrasto tra i colori di sfondo e deitrollo della qualità del nostro lavoro. caratteri è sufficiente? La giustezza non è troppo ampia, né stretta? Immagini: Com’è la qualità delle immagini, sia tecniche che espressive?Abbiamo scelto queste tre caratteristiche principali: Colori: Quali sono gli stili del sito? Come sono i contrasti tra i colori? Esiste-Grafica una coerenza con il brand? Etc.-Navigabilità Griglia: L’impaginazione è stata curata con una griglia? È stato usato un-Contenuti allineamento giusto, o ci sono elementi a sbalzo, che danno visivamente fastidio?La grafica è molto importante, poichè determina l’impressione che il sitotrasmette nei primi istanti,. Inoltre, i vari siti visitati potrebbero darci spun- Navigazione:ti interessanti da riutilizzare in futuro, nella creazoine dell’interfaccia. La -Menu: Quanti menu ci sono? Come sono disposti? Quanti elementi hanno?navigazione è altrettanto importante, in quanto soprattutto in un catalogo o -Complessità della procedura d’ordinazione: Quanti click bisogna fare pernegozio online essa si rivela spesso complicata e compromessa. arrivare alla comanda di un prodotto? Sono necessarie informazioni partico-Abbiamo infine i contenuti: solitamente in un online shop sono standard, lari? Etc.tuttavia alcune piccole differenze o curiosità potrebbero integrate anche nelnostro progetto. Contenuti: -Descrizione articolo: Ci sono tutte le informazioni? C’è qualcosa in più diLe domande da porci per le varie categorie sono: interessante? È stata inserita almeno una foto? -Informazioni complementari: Esiste una pagina di “About”, di contatti, infor- mazioni sulle spedizioni, sulla privacy, ...? -Homepage: Quanti e quali contenuti ci sono sulla homepage? È presente, per esempio, una galleria di prodotti recenti o in offerta? Etc.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 25Analisi -BenchmarkingRisultati dell’analisiLink: http://www.officeprofi.ch/index.cfm?hid=GMPVAXTitolo: GarbaniGrafica:L’impaginazione dei contenuti segue una griglia rigida ma molto banale,ricorda una classica tabella da database, inoltre da l’idea di essere un tem-plate precompilato, infatti ad esempio l’online shop della steg, è praticamenteidentica.I test in linea di massima funzionano, sono bastoni leggibili, con una dimen-sione e un colore adatto, anche la tipografia è gestita abbastanza bene, fattaeccezione per la descrizione del materiale, che ha una giustezza troppo ampia.Le immagini sono di buona qualità, e solitamente l’oggetto viene fotografato sufondo bianco.I colori utilizzati sono dati dal brand, ossia il rosso, in varie tonalità, compresodi bianco e nero.Navigazione:Il menù principale, nel quale cercare e navigare fra i prodotti, è difficilmentericonoscibile, è infatti un input box, mentre noi saremo tentati di cercare fra imenu a sinistra.Oltretutto le categorie di prodotti sono decisamente non evidenti per gli utentinon esperti.Se non altro il procedimento d’ordinazione è abbastanza semplice, scegli lacategoria di prodotto, clicchi il prodotto indicato, ne ordini una data quantità, eil carrello appare nella stessa pagina in un’area a destra.Contenuti:La descrizione dell’articolo è completa, ha parecchie informazioni complemen-tari, come il materiale, le dimensioni, il peso,..C’è la possibilità di cambiare lingua e ci sono pure informazioni complementari.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 26Analisi -BenchmarkingLink: http://www.amicucci.it/ dettaglio come avviene l’acquisto, e una pagina di contatti, con i recapiti deiTitolo: amicucci proprietari del negozio. I contenuti in generale sono completi, ritengo questo sito una buona baseGrafica: sia di contenuti, sia a livello grafico/di navigazione.La grafica di questo sito invece è molto gradevole e regolata: ha una grigliaseguita in maniera ottimale, utilizza delle immagini rappresentative dellacategoria, che sono di buona qualità sia tecnica che estetica.I testi nella homepage hanno un giusto equilibrio di dimensione, colore,..nelle pagine specifiche la tipografia è sempre buona, tuttavia c’è una sceltache non apprezzo, l’uso delle scritte in maiuscolo per la pagina di articolo,con uno sfondo grigino, che fa pensare ad un errore.Come in molti altri siti le categorie sono divise anche per colore, e questoravviva anche l’atmosfera artistica.Le immagini in generale sono sempre di alta qualità, e questo potenziamaggiormente l’effetto d’insieme del sito.Navigazione:Il tasto dolente è che il sito utilizza due specifici menu di navigazione, inalcune pagine persino tre o quattro, tuttavia solitamente questi sono inseritiin modo da far capire la loro funzione.Ad esempio il menu in cima, parla genericamente del negozio, ed è elabora-to facendolo collegare al header.La complessità nel raggiungere l’ordine è eccessivo: selezionata la catego-ria, devi cliccare l’articolo, quindi il carrello, li ti chiede in un’altra pagina diconfermare l’ordine, poi di inserire i dati cliente, e li ci fermiamo ovviamente,il che vuol dire che come niente, devi fare almeno una decina di click.Contenuti:La descrizione del materiale fornita non è a mio parere abbastanza detta-gliata, tuttavia la presenza di una moltitudine di foto,vi pone rimedio.Ci sono informazioni generali sul negozio, e questo ne aumenta la sicurez-za, ci invoglia maggiormente ad ordinare sapendo che c’è un negozio fisico.Inoltre c’è anche una pagina “acquisti sicuri”, una pagina che spiega nel
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 27Analisi -BenchmarkingLink: http://www.atre.ch/services/eshop_atre/Scripts/home_ita.asp Oltre a questo come detto prima ci sono molte informazioni complementari,Titolo: ATRE e i contatti in mostra in ogni pagina. Manca però una pagina su quello che riguarda la privacy e la restituzioneGrafica: merci.Il sito in generale segue una griglia rigida, che segue abbastanza scrupolo-samente, a 4 colonne.I testi si leggono bene, hanno un buon rapporto di luminosità con lo sfondo,tuttavia sembrano avere tutti la stessa dimensione, e questo non da un valo-re di gerarchia sufficiente.L’immagine non è coordinata alla perfezione, in certi casi si usano tintepiatte, in altri sfumature, ogni tanto si adottano bordi arrotondati, altre volteno,…Le immagini, fatta eccezione per l’header hanno una buona qualità, il sitoha una prevalenza di colore blu, tuttavia per il menu dei prodotti son statiinseriti dei piccoli quadratini colorati.L’inserimento di alcuni dettagli gialli purtroppo non impreziosisce la compo-sizione, come anche altre cose (ad esempio l’inserimento di un box “radio-fiumeticino on air”, che non rientra nella tematica ed è fuorviante.Navigazione:Son presenti due menu, uno generico e un catalogo prodotti, il primo ha lasezione chi siamo, Arredo e Igiene (informazioni su questi due loro servizi),azioni (presenti anche in homepage) e link, il secondo è diviso per le diversecategorie.L’ordine del materiale non è molto complesso, ma richiede comunque unpaio di click e un utente.Tuttavia un errore di programmazione del menu dei prodotti rende difficilela navigazione, in quanto almeno su mac, cliccando su un prodotto, non tiporta alla pagina desiderata.Contenuti:I contenuti sono più o meno tipici, ci sono i codici, i prezzi, la descrizione dibase, e almeno una foto.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 28Analisi -BenchmarkingLink: http://www.amazon.it correlati, per i libri ad’esempio c’è una sinossi, i dettagli come la brossura,..Titolo: Amazon Di informazioni complementari ne è pieno il sito, nel footer infatti ci sono molte informazioni su amazon, aiuti, servizi complementari, c’è pure una guida per i nuovi utenti, direttamente nell’header del sito.Grafica: È quindi un buon riferimento per i contenuti, anche se come detto, è suppor-Amazon ha una griglia complicata, che si appoggia su una struttura liquida, tato dagli utenti, essi infatti possono aggiungere informazioni, commentare,che personalmente non mi piace, su schermi piccoli immagino che il sito sia persino inserire video.compresso e poco equilibrato come lo vedo sul mio monitor.La grafica in generale è buona, il blu e l’arancio si combinano bene, eviden-ziando contenuti importanti.I testi sono utilizzati correttamente, hanno una giusta gerarchia e sono sem-pre inseriti su uno sfondo adeguato.Tuttavia nell’area cronologia recente viene utilizzato un linguaggio graficoparzialmente diverso dal resto del sito, utilizza infatti sfumature,..Una cosa che non mi convince è che in alcune aree la grafica è molto ela-borata, mentre che in altre povera, e questo non contribuisce a coordinarel’immagine.Navigazione:fatta eccezione per alcuni link vaganti sopra l’header, vi è solo un menu, chedivide le categorie di prodotti in vendita su amazon.In homepage ci sono prodotti importanti o nuovi, o ancora prodotti che sonoin azione, anche questo contribuisce ad una navigazione ottimale.Il processo di inserimento dell’articolo nel carrello è abbastanza veloce, inuna serie di click, il processo infatti è ultimato, tuttavia per la comanda vi èun ulteriore procedura di una decina di passaggi, che sono anticipati da unlogin.Ogni articolo contiene anche i prodotti correlati, e questo fa continuare lavisita al sito, come in un cerchio infinito.Contenuti:I contenuti sono molto completi, infatti sono spesso redatti anche dagli utentistessi, in una pagina possiamo ad esempio, i prezzi, i termini di spedizione, i
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 29Analisi -BenchmarkingLink: http://www.ebay.it/classico fornisce le categorie, ma non si preoccupa poi di effettuare un controllo su-Titolo: Ebay gli oggetti inseriti, che può essere si trovino nella categoria sbagliata. Ebay fornisce informazioni sia sulla privacy, che sulla restituzione merci,Sito di eCommerce più utilizzato al mondo, offre aste ma anche acquisti che aiuto in caso di problemi.immediati per moltissime categorie d’oggetti.Grafica:Le pagine sono ben organizzate (la home è suddivisa in sezioni ben distintein header, menu, il corpo che si sviluppa in due spazi poi ulteriormente divi-si; nella pagina che permette di visualizzare gli oggetti in vendita, si manten-gono header e menu, sulla destra appare una lista di oggetti, sulla sinistraun menu che permette di scremare i prodotti trovati in base alle proprieesigenze). I testi sono bene organizzati, web-safe, delle giuste dimensioni;si riesce a distinguere perfettamente fra testi, descrizioni, informazioni ag-giuntive, link. Le immagini sono gestite dagli utenti che inseriscono le iscri-zioni quindi non c’è omogeneità o standardizzazione. I colori del layout sonoquasi del tutto assenti, dal momento che si preferisce una grafica semplicee leggibile, che si appoggia sul colore bianco. Viene utilizzata una grigliad’impaginazione, in maniera piuttosto efficace.Navigazione:Il menu principale permette di navigare nei vari sottositi appartenenti adEbay. Esiste un ulteriore menu, composto dalle categorie fra le quali è pos-sibile scegliere a cosa si è interessati. Il menu per scremare i risultati apparesulla sinistra solo nelle pagine contenenti liste di oggetti in vendita. Occupia-moci del procedimento d’ordinazione per quanto riguarda gli oggetti “Com-pra subito”, cioè quelli che non vengono messi all’asta. Con due sempliceclick su un pulsante, uno di cui uno per confermare l’acquisto, è possibilecompletare la transazione se si è già loggati nel sistema.Contenuti:La descrizione dell’articolo è affidata all’inserzionista, perciò indipendenteda eBay, che non è responsabile di descrizioni imprecise o parziali. Ebay
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 30Analisi -BenchmarkingLink: http://shop.goethe.de/shop/20081010001/c-4063.htm?tpt=goethe_en&ml=enTitolo: Goethe InstitutGrafica:La grafica è semplice e gradevole; il menu è posizionato in alto, ma essen-do relativo alla navigazione su tutto il sito ci è inutile per il nostro scopo. Illayout è diviso in tre parti principali, di cui il corpo e il menu sulla destrasono d’interesse, in quanto vediamo al centro le categorie attraverso le qualiè possibile navigare e sulla destra viene mostrato il carrello, insieme conle informazioni. Le immagini hanno un principio di standardizzazione cheprevede vengano racchiuse in box di 150 px. Il colore che lega tutti gli ele-menti nel sito è uno solo, e si tratta del blu; per gli elementi non selezionati edecorativi si usa il grigio. Il sito utilizza un sistema di griglia ed è ordinato.Navigazione:Navigando fra le varie categorie sulla sinistra appare un’ulteriore categoriz-zazione che ci permette di scremare ulteriormente i materiali nel corpo cen-trale. Sulla destra il carrello si aggiorna mostrandoci cosa contiene quandoaggiorniamo la pagina. Si possono aggiungere al carrello gli oggetti con unsemplice click.Contenuti:Le descrizioni dei prodotti sono esaustive. Esistono informazioni sulla resti-tuzione, ma non sulla privacy.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 31Analisi -BenchmarkingLink: http://www.lmv.gr.ch/shop/it/index.htmTitolo:Materiale didattico dei GrigioniGrafica:La grafica è post-datata, non è adeguata alla grafica odierna nonostante ilsito sembri aggiornato. I testi tuttavia sono ben formattati. I colori sono for-se troppo accesi. Si fa fatica a distinguere i link dal testo. Ogni libro vendutoè raffigurato dalla propria fotografia ma non c’è una politica di standardizza-zione.Navigazione:nella parte superiore è possibile sceglìere la lingua, mentre sulla sinistra lecategorie; cliccando su una categoria si apre una pagina attraverso la qualeè possibile scremare ancora di più la ricerca (sebbene molte delle possibili-tà conducano a vicoli ciechi). Con il menu sulla destra è possibile ricercareparticolari libri. Servono due click per la procedura di acquisto: col primo siaggiunge al carrello, col secondo si conferma il pagamento se si è registrati.Contenuti:La descrizione degli articoli è assente; come informazioni complementaritroviamo istruzioni per broswer non più utilizzati
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 32Analisi -BenchmarkingLink: http://www.flyerline.com/en/home.htmlTitolo: FlyerlineNon si tratta di un sito eCommerce: offre servizio di stampa su larga scala,ma è interessante per alcune procedure che utilizza.Grafica:La grafica è accattivante: vengono utilizzati tre colori di base, verde biancoe ciano. I contenuti sono ben organizzati; la griglia imposta la pagina in ungrosso blocco, diviso in più punti. Le immagini sono di due tipi: per ognischermata ed ogni link c’è un ‘personaggio’ raffigurato in diverse situazioni;lo stesso personaggio viene utilizzato come suggeritore per guidare l’utentenella procedura d’acquisto. Immagini vengono utilizzate anche come iconeillustrative per le varie categorie, tutte situate nel corpo centrale, dove sisvolgono la maggior parte delle operazioni sul sito.Navigazione:L’utente viene guidato passo passo durante l’acquisto: cliccando sullacategoria si passa a scegliere tutte le caratteristiche dell’oggetto a cui si èinteressati (peso, dimensioni, tipo di stampa...), con continui suggerimentidati dalla mascotte. Questa procedura può essere lunga, ma sicuramente èa prova di utenti inesperti e non permette errori.Contenuti:Gli articoli sono autodescritti dalla procedura per l’ordinazione; i termini perl’acquisto e le condizioni generali sono esposti nel sito, mancano invece itrattamenti per la privacy e sembra non sia possibile restituire i materiali.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 33Analisi -BenchmarkingLink: http://www.unidformazione.com/materiale-didattico.htmlTitolo: unidformazioneGrafica:- Organizzazione contenuti: interessante la scelta degli articoli con una listadivisa in base all’area d’interesse (es. medicina, odontoiatria e veterinaria).- Testi: sufficientemente chiari, sono divisi in: titolo articolo, prezzo di listino(e relativo sconto %), editore e tasto “acquistalo subito” in rosso a fiancodell’articolo, bene in evidenza.- Immagini: immagine descrittiva dell’articolo (in questo caso il libro) sullasinistra, tutte della medesima dimensione.- Colori: poco leggibili, troppo verde con testo giallo, ciò compromette un po’la lettura- Griglia: allineamenti corretti e semplici e CSS implementato bene, funzio-na bene su tutti i browser Navigazione:-Menù: il menu principale competo di logo a sinistra di ogni voce menu èsufficientemente chiaro e funzionale. Presente anche un form per cercare gliarticoli. Il menù principale comprende: test d’ammissione, chi siamo, sedi,promozioni, iscrizione, contatti.-Complessità della procedura d’ordinazione: 1click su acquista subito -> Pa-gina totale dell’articolo con prezzo, eventuali promozioni, periodo di attesa,e descrizione dettagliata articolo.Contenuti:-Descrizione articolo: buona, pagina organizzata con titolo e descrizionearticolo.-Informazioni complementari (privacy, restituzione merci): info mancante-Procedura d’ordinazione: semplice ed efficace.-Homepage: sufficientemente pulita e leggibile. Presenta però molti, troppevoci cliccabili che possono confondere l’utente meno ferrato.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 34Analisi -BenchmarkingLink: http://www.viking-direkt.ch/Titolo: viking-direktGrafica:-Organizzazione contenuti: menù diviso in cinque categorie, il sottomenu èun po saturo di elementi, ma probabilmente non avevano molta scelta vistal’abbondanza di articoli.-Testi: sufficientemente chiari, ottima la scelta del carattere che risulta chiaroe leggibile-Immagini: immagine descrittiva dell’articolo (breve), prezzo (ben in eviden-za), quantità (con riserva in magazzino).-Colori: molto chiari e puliti; colori blù per i menù e bianco per lo sfondo.-Griglia: ordinata e leggibile; sono cinque colonne se si conta quella destrapiù lunga. Navigazione:-Menù: il menu principale competo di logo a sinistra di ogni voce menu èsufficientemente chiaro e funzionale. Presente anche un form ben evidenteper cercare gli articoli subito sotto il menù.-Complessità della procedura d’ordinazione: Pagina totale dell’articolo conprezzo, eventuali promozioni, periodo di attesa, comparazione prezzo edescrizione dettagliata articolo.Contenuti:-Descrizione articolo: buona, pagina organizzata con titolo e descrizionearticolo.-Informazioni complementari (privacy, restituzione merci): info restituzionemerci mancante-Procedura d’ordinazione: semplice ed efficace, il riepilogo del nostro carrel-lo è in 3 passi.-Homepage: sufficientemente pulita e leggibile
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 35Analisi -BenchmarkingLink: http://www.cplfabbrika.com/Titolo: cplfabbrikaGrafica:-Organizzazione contenuti: buona l’impaginazione con in home-page alcuniarticoli di punta. -Testi: I testi sono semplici e chiari e il tutto risulta di facile e comoda lettu-ra, un punto negativo è il menù un po’ invadente e fitto d’informazioni.-Immagini: immagine descrittiva dell’articolo con prezzo e prezzo scontato.-Colori: il grigio per i font e il bianco per gli sfondi sono una buona scelta,tuttavia può compromettere leggermente la lettura di alcuni contenuti. Inoltreil testo verde su sfondo bianco risulta poco leggibile.-Griglia: tutti gli elementi risultano bel allineati e non si risultano differenzetra i vari browser.Navigazione:-Menù: il menu principale competo di logo a sinistra di ogni voce menu èsufficientemente chiaro e funzionale. Presente anche un “form input” percercare gli articoli.-Complessità della procedura d’ordinazione: 1click su acquista subito -> Pa-gina totale dell’articolo con prezzo, eventuali promozioni, periodo di attesa,e descrizione dettagliata articolo.Contenuti:-Descrizione articolo: buona, pagina organizzata con titolo e descrizionearticolo.-Informazioni complementari (privacy, restituzione merci): info mancante.-Procedura d’ordinazione: semplice ed efficace, al primo click, ben visibilel’articolo selezionato; descrizione, relativi link ai principali social network,prezzo + iva, informazioni sul prodotto, segnalazione del prodotto a un ami-co, disponibilità magazzino, tempi di consegna, quantità e infine aggiungi. -Homepage: sufficientemente pulita e leggibile, una nota negativa va almenù decisamente invadente e troppo condensato di link.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 36Ipotesi funzionalitànuovo sistemaIn seguito verranno presentate brevemente le funzionalità che, dopo aver- e, in caso, correggerne le quantità, così come togliere o aggiungere degline vagliato la fattibilità, potrebbero essere implementate nel sistema del articoli.magazzino online. Ad ogni comanda, verrà inoltre assegnato un numero di ordinazione. Ritiro materialeLogin Il ritiro del materiale avverrà durante gli orari di apertura del magazzino, cheOgni utente potrà accedere al sito soltanto dopo aver effettuato una log in corrispondono ai turni comunicati allo studente una volta che avrà effettuatoutilizzando i dati d’accesso (nome utente e password) forniti dalla segre- la comanda con successo. Il costo totale del materiale ordinato verrà ad-teria. Questo sistema aggiunge un livello di sicurezza, in quanto permette debitato automaticamente sul conto dello studente soltanto al momento delil riconoscimento degli utenti e fa sì che nessuna persona esterna al CSIA ritiro. A sua volta automatico, sarà l’aggiornamento della giacenza del relati-possa usufruire di questo servizio. Nel caso degli studenti, i dati d’accesso vo materiale (evitando così che sia lo stesso magazziniere a dover detrarreverranno generati automaticamente nel momento in cui uno studente viene ogni volta il materiale appena ordinato).immatricolato (in concomitanza alla generazione del numero studente). Gli orari di apertura del magazzino saranno anche consultabili in un’apposi- ta sezione del sito.Scheda materiale Lo studente avrà un tempo massimo di ritiro (rispettando gli orari di aper-Ogni materiale avrà una propria scheda informativa, corredata da foto, de- tura) entro il quale si dovr1a presentare al magazzino. In caso di mancatoscrizione, specifiche, lista di prodotti correlati, così come consigli sull’utilizzo. ritiro, dovrà pagare una penale.Gli utenti potranno inoltre assegnare una valutazione a ciascun materiale La situazione in cui uno studente non fosse in grado di ritirare per tempo il(per esempio tramite la popolare scala a “stelle”). materiale, non è ancora stata precisata in maniera definitiva. La strategia attuale prevede che, (solo e soltanto) in caso di emergenza, lo studenteRicerca materiale abbia la possibilità di annullare il proprio ordine, accedendo al profilo utente.Il materiale verrà organizzato tramite l’uso di macro-categorie (integrate Questo sistema potrebbe però generare abusi, causando una congestionecome voci di menu), ma verrà anche aggiunta la possibilità di una ricerca dello spazio nel magazzino, in quanto il magazziniere preparerà a prioriper ordine alfabetico, tramite un box di ricerca per parole chiave, così come il materiale che verrà ritirato in giornata. Un’alternativa potrebbe essereuna ricerca per filtri. Le macro-categorie equivalgono alle classi presentate di far pagare in ogni caso la penale, o di addebitare la penale in un primonel capitolo successivo (Cap. 10). momento, ma dando allo studente un tempo massimo di (per esempio) 2 giorni per inoltrare un certificato medico alla segreteria, così da giustificare ilOrdinazione mancato ritiro. In questo caso, la penale verrebbe stornata.Al momento dell’ordinazione, la giacenza sarà visibile per ogni materiale, Ad ogni modo, in caso di mancato ritiro, l’ordine scadrebbe automaticamen-permettendo allo studente di regolarsi nell’acquisto. Non gli sarà però possi- te dopo il termine di ritiro, e lo studente dovrebbe rieffettuarlo.bile ordinare la quantità totale ancora in stock.Lo studente potrà modificare il proprio ordine prima di inviare la conferma Tutorial:definitiva, in quanto il processo di ordinazione prevede che vi sarà la pos- verrà implementato un tuorial per l’uso del sito per agevolare studenti esibilità di riesaminare il materiale aggiunto al “carrello della spesa virtuale” docenti (dettagli ancora da definire).
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 37Ipotesi indicizzazionematerialeTest di validazione Inoltre è stata sistemata anche la lista del materiale utilizzabile unicamenteDopo l’analisi principale abbiamo intervistato gli studenti di persona chie- a livello di database.dendogli una ipotetica navigazione in un magazzino online e sono emersi Questa lista sarà seguita unicamente dal magazziniere perchè comprendequesti fattori riguardo la navigazione: articoli di sua competenza che lo studente non può acquistare. Categorie (dalla macro alla micro); In questa lista sono state aggiunte due categorie: Ordine alfabetico; Ricerca con filtri; Carta e Cartoncini Fotografia del materiale. Cartucce CD-Rom e DVD-RomNel mentre, abbiamo mostrato una prima bozza della lista dei materiali che Colle e Nastri adesivi;si possono trovare in un eventuale magazzino online. Da questa lista, ab- Coloribiamo chiesto loro di cancellare quelli che erano incomprensibili e/o vaghi. Chiave armadiettoGrazie a questo siamo riusciti a sviluppare una lista più precisa implemen- Materiale Plottertando le tipologie Categorie(dalla macro alla micro) e ordine alfabetico. Matite e Penne MappetteIl risultato è il seguente: Pennelli Strumenti tecnici per disegno Carta e Cartoncini Legno e Metalli CD-Rom e DVD-Rom Libri Colle e Nastri adesivi; Materiale fotografico Colori Strumenti pulizia Chiave armadietto SSS_AA Matite e Penne Mappette Pennelli Strumenti tecnici per disegno Legno e Metalli Libri Materiale fotografico Strumenti pulizia SSS_AA
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 38Ipotesi indicizzazionematerialeDurante la lezione di usabilità (22.09.2011) abbiamo realizzato tre ipotesi diHomepage in base a quello che abbiamo tratto dai questionari.Le tre ipotesi sono le seguenti:A) Homepage che tratta le macro-micro categorie e l’ordine alfabetico afiancoB) Homepage con visualizzazione delle foto dei prodottiC) Homepage con le categorie dei prodotti poste in alto e sotto le foto.Durante questo test, immedesimandoci come utente abbiamo scelto tuttil’opzione B perchè risultava la più accessibile, diretta ed usabile.Dopo questa scelta, a livello di ipotesi, abbiamo pensato come poter ren-derla ancora più efficente traendo spunto dalle altre proposte A e C, conrisultato che da A si prende in considerazione il menu laterale, i prezzi e laquantità mentre da C la barra con scritta la sottocategoria.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 39Conclusione AnalisiFin dal primo briefing avevamo già le idee abbastanza chiare su quello cheavremmo dovuto determinare, ricercare e imparare sulla tematica a noiaffidata.Alcuni materiali di riferimento che riguardavano il magazzino e il CSIA, era-no già stati in parte raccolti o redatti l’anno scorso; tuttavia alcuni elementiche non conoscevamo sono usciti allo scoperto già durante il primo giornodi analisi, come ad esempio l’uso del programma 4D Client e i vari workflow,che sono stati anche un elemento portante della nostra ricerca.Le difficoltà riscontrate sono simili a quelle che si erano presentate durantel’anno scorso: alcuni gruppi di lavoro erano riusciti a portare avanti il lorooperato più velocemente e facilmente rispetto ad altri che, facendo di meno,avevano finito per rallentare il lavoro.Rispetto all’anno scorso, l’amministrazione è stata decisamente più di-sponibile a darci informazioni, tanto che abbiamo potuto sostenere alcunepreziose interviste, come per esempio al vice direttore, ad Antonio Caso e almagazziniere stesso.I compiti venivano divisi in altrettanti gruppi di 2 o 3 persone, a dipendenzadella difficoltà e dell’importanza dell’incarico. Ciononostante, operavamocome un gruppo coordinato e compatto.La gestione del progetto si è rivelata molto proficua, in quanto siamo riusci-ti a raccogliere tutte le informazioni indispensabili al proseguimento, cosìcome informazioni e idee complementari per cominciare a definire i conte-nuti del sito.Nella prossima fase inizieremo a definire un primo prototipo del sito, a livellodi funzionalità, di contenuti e di interazione sia con l’utente che con il ma-gazziniere, e daremo il via a questa seconda fase con la consapevolezzadi aver un quadro completo di ciò che avviene nel magazzino, i suoi puntideboli e i punti forti, e come possiamo valorizzarli.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 40TITOLO
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 41Introduzione FlowchartCome prima cosa abbiamo iniziato con un brainstorming, finita la fase dianalisi non sapevamo ancora che funzionalità, che avevamo ipotizzato,implementare, né il come farlo, con questo primo incontro si son definiti tuttii contenuti in modo primitivo, e il come si sarebbero rappresentati.È stato molto importante, poiché fino alla fase precedente ipotizzavamo tuttoin modo astratto, ma, poiché, molti compagni non riuscivano a visualizzarequeste applicazioni, è stato fondamentale trovare una coerenza generale.Abbiamo ragionato sui compiti e i bisogni di ogni singolo personaggio delcontesto, gli studenti, i docenti, il magazziniere, la segreteria e persino 4dClient, come entità.Gran parte del tempo è stata persa cercando di capire come questo data-base avrebbe dovuto interagire con il nostro sistema, anche qui c’erano opi-nioni divergenti, tuttavia si è poi capito che si trattava di una cosa al di fuoridel brief, del compito, e delle tempistiche, implementare sia il lato operativo,sia l’interfaccia per gli utenti.Questo è stato definitivamente accettato solo durante la presentazione fina-le, dove ci è stato detto di seguire unicamente le funzionalità per gli utentistudenti e docenti.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 42FunzionalitàCome detto una delle prime cose che abbiam fatto è capire ogni entità del -Segnalazione materiale: Segnalazione fra studenti, autosegnalazione, Do-sito che bisogni e che compiti avranno. cente segnala materiale agli studenti, lista studenti per classi.Ecco in seguito l’elenco delle funzioni che abbiamo studiato: -Riassortimento merce: il magazziniere ha un avviso visuale quando il ma--Iscrizione: La segreteria assegna ID e conto al nuovo cliente, invia una po- teriale è in esaurimento(può impostare a che quantitativo il software lo avvisa)lizza di versamento e una lettera in cui vi è l’ID e la password.All’iscrizione l’utente deve cambiare la password, che inizialmente è numeri- -Ritorno merce: Materiale consegnato rotto, al momento del ritiro il clienteco, e inserire la propria e-mail, questa è obbligatoria per determinate funzioni, deve controllare, riconsegna materiale inutilizzato, minimo di 10 chf al prezzocome la newsletter,.. singolo, nuovo, non utilizzato, in perfetto stato. Il magazziniere ha una scher- mata per risarcire il conto e aggiungere il materiale al database.-Gestione Conto/Versamento: Gli utenti possono visualizzare lo storicodegli acquisti, dei versamenti e il saldo del conto (che deve essere sempre -Riassortimento: il magazziniere ha una schermata con form per ordinare,visualizzato). possibilità di stampa fax per ditte che non hanno email, registrazione ordini.Possono versare come ora tramite la polizza di versamento o tramite e-banking, il magazziniere non ha più accesso al conto studente, invece la se- -Modalità di ritiro: Scelta il giorno del ritiro può passare solo quel giorno. Ilgreteria come ora, gestisce l’inserimento del conto, 4dclient invece registrerà magazziniere riceve gli ordini per la giornata, prepara il materiale, vede nu-gli storici e le variazioni del conto. mero per consegnare materiale a persona giusta.-Login: Accesso tramite ID, Email e Password -Profilo: L’utente ne necessita per gestire i dati utente( cambio email e pas- sword), vedere lo storico ordini, l’estratto/stato conto- storico versamenti-Catalogo: Ordine autonomo, categorie micro macro, ricerca filtri, ordinealfabetico, immagini prodotto, descrizione, consigli d’uso, articoli correlati, -Inserimento nuovo articolo: Il docente può segnalare un articolo da ag-disponibilità, prezzo, metti nel carrello/nella wishlist. giungere al catalogo (fornisce la descrizione), ha un form da compilare per laIl magazziniere in più vede il codice, il materiale riservato, 4dclient invece segnalazione, il magazziniere valuta l’inserimento, ordina, inserisce il nuovodeve ricordare la giacenza, i movimenti e i prezzi. materiale con dati forniti e il prezzo, pagina per inserimento materiale nel database.-Carrello: Elimina modifica, wishlist, conferma, scegli giorno di ritiro, penalese non passi.-Ritiro materiale: Studente va in magazzino, consegna tessera, lettura co-manda, conferma pagamento, consegna materiale.Il magazziniere al passaggio della tessera legge la comanda e convalida l’or-dine, si ipotizza che al mattino prepari il materiale in appositi box per agevola-re la comanda.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 43Per quel che riguarda il carrello/wi-shlist abbiamo poi approfondito nelseguente modo:Promemoria: Si tratta di un possi-bile passo precedente al carrello, ilpromemoria, o anche detto Wishlist(comune in alcuni e-commerce) vieneusato per ricordarsi dei prodotti perun acquisto, è possibile dividerlo inliste, ad esempio per materiaCarrello: Il carrello è l’ultimo passoper l’acquisto, gli articoli possonoessere inseriti e tolti, o spostati nelpromemoria, da qui c’è il processo diconferma.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 44Use caseFinito il processo di ideazione dei contenuti, Gonella ci ha consigliato di crea-re degli usercase, che sono in breve le spiegazioni più concrete di quello cheavevamo definito in precedenza.Questi spiegano i flussi in determinate applicazioni e funzioni fral’utente(cliente) e l’amministratore, ad’esempio.Si trattava di riempire delle schede che si ripetevano per i vari compiti, e spie-ano in maniera più dettagliata quello che ho spiegato in precedenza.Mostro quindi un’esempio di questi usecase.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 45FlowchartFinita la fase di ideazione dei contenuti e delle funzionalità, abbiamo iniziato acomporre questi in modo da comporre la nostra flowchart.Questa fase non è stata molto complicata, in quanto i contenuti e le funzio-nalità di per sé si auto-ordinavano, è stato invece più complicato nominarli e LOGIN Recupero Password FLOWCHART MAGAZZINO ONLINEordinarli dentro una flowchart ordinata in modo logico. STUDENTI / DOCENTI 2 SSS_AA DG - 12.10.2011Questa tuttavia è cambiata ancora molto nel proseguire del progetto, sebbe-ne le cinque principali voci di menu sono rimaste invariate. ACCEDI Primo accesso FORMULARIO DATI ACCESSO-Catalogo: È la prima voce di menu, in quanto è la funzionalità principale chegli utenti sono interessati a visualizzare appena effettuato l’accesso, questo Suggerisci prodottoalmeno per la maggior parte delle volte. Risultati ricerca Homepage interna Categoria Sotto-categoria sotto-sotto- categoria Scheda prodottoSi divide in ordine per categorie o alfabetico, e si dirama man mano fino adarrivare alla scheda finale del prodotto. Filtro per Alfabetico lettera Carrello -rimuovi prodotto-Carrello: Il carrello è diviso in 3 pagine, le due successive sono la conferma -rimetti il prodotto nella wishlist Confermadell’ordine. Conferma/ Riepilogo/ cancella ordine/ Conferma e-mail scelta giorno di ritiro Wishlist -aggiungi al carrello-Promemoria: Questa sezione ci ha impegnato tanto per la scelta del nome, -aumenta quantità -togli Gestione -modifica nome utentenella maggior parte degli online-shop viene chiamata promemoria, tuttavia nei Profilo account -modifica password -modifica e-mailtest è stato confermato che pochi utenti conoscessero questa parola. Estratto contoPromemoria invece dava l’idea di quello che effettivamente è la funzione, Indicazioni (Tutorial, FAQ, Info restituzione merce, Infoquindi un promemoria di qualcosa da acquistare in seguito. modalità di ritiro)L’alternativa era lista dei desideri, che era più simile al significato di wishlist,ma gli utenti lo potevano vedere anche come un “che prodotto vorresti trovarein magazzino, che ora non c’è?”.-Profilo: La pagina di profilo si ramifica in estratto conto e gestisci il profilo-Indicazioni: Cambiato poi in Informazioni, più intuitivo per gli utenti, contienepiù link a pagine che spiegano e aiutano la navigazione e la permanenza nelsito.Potete quindi vedere la flowchart finale che abbiamo creato:
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 46Card SortingRimaneva da fare un’unica cosa, che avevamo rimandato fino ad allora: ordi-nare le categorie e i prodotti del catalogo.Iniziando a buttar giù idee ci siamo presto reso conto che non arrivavamo aduna soluzione, ognuno di noi vedeva le cose in modo abbastanza differente,abbiamo quindi deciso di lasciare agli utenti, l’ardua sentenza.Abbiamo preparato un card sorting, un test d’usabilità che serve per capirecome gli utenti associano le parole, o in questo caso le categorie. Disegno Costruzione Libri Pennelli Strumenti da lavoro Libri culturaliIl card sorting è un metodo di classificazione usato spesso nello user-cente- Matite Legno e metalli Libri storia dell’artered design per definire architettura informativa o schema di navigazione di un Colori Colle e nastri adesivi Libri professionalisito. È un metodo empirico che ha una tradizione molto lunga in campi diversi Carta e cartoncini Altri libridelle scienze sociali. Strumenti da disegno Mappette e cartellettePer iniziare abbiamo definito delle categorie di prodotti a livello micro, ossiaad esempio carta, matite colorate, colle,…Abbiamo poi preso una decina di tester, di sezioni e età diverse, e li abbiamofatto associare queste categorie. Informatica Strumenti da puliziaNonostante piccole differenze è risultato subito chiaro il fatto che associavanoquesti in base alle funzionalità, all’uso che avevano di questi prodotti.Abbiamo quindi poi corretto il tiro per arrivare a sei macro categorie: Materiali Selezione definitivae strumenti da disegno, Materiali e strumenti da costruzione, Informatica,Fotografia, Libri, Strumenti da pulizia.Ecco in seguito alcuni esempi di test, e l’esempio finale
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 47 Colle e nastri Mappette e cartellette Pennelli Libri Matite Colori Carta Strumenti da disegno Strumenti per pulizia Strumenti da lavoro Pennelli Informatica Carta e cartoncini Strumenti per pulizia Legno e metalli Colori Libri Colle e nastri adesivi Caso 1: Studente Decoratori Strumenti da disegno Matite Colori Mappette e cartelle Colori Legno e metalli Informatica Matite Mappette e cartelle Colle e nastri Carta e cartoncini Libri Strumenti da disegno Strumenti da lavoro Pennelli Caso 4: Studente di design Strumenti per pulizia Strumenti da disegno Strumenti da lavoro Strumenti per pulizia Colori Legno e metalli Pennelli Colle e nastri adesivi Cartelle e Cartellette Libri Matite Carta e cartoncini Mappette e cartelle Informatica Strumenti da disegno Colle e nastri adesivi Libri Carta e cartoncini Pennelli Legno e metalli Colori Caso 5: Studente pittori Matite Caso 3: Studente SSS_AA
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 48Cambiamenti della flowchart Disegno CostruzioneDurante le fasi di lavoro son cambiati per lo più i nomi, per quel che riguarda Pennelli Strumenti da lavorola flowchart del sito, quello che era wishlist è diventato promemoria, stesso Matite Legno e metallivale per indicazioni che è diventato informazioni. Colori Colle e nastri adesiviA parte questo è cambiato l’ordine del menu, che nella versione finale è cata- Carta e cartoncinilogo, profilo, informazioni, promemoria e carrello, per motivi che spiegherò nel Strumenti da disegnocapitolo mockup. Mappette e cartelletteL’ordine dei prodotti invece è mutato alla scoperta che i prodotti di pulizia nonvengono più venduti, e quindi unendo materiale informatico e di fotografia(come è avvenuto più volte nel card sorting), siamo arrivate alle 4 categoriefinali. Libri Libri culturali Libri storia dell’arte Libri professionali Altri libri
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 49
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 50Wireframe di bassa definizionePrima di definire dei wireframe a computer, cosa che in realtà si era già ini-ziato a fare in fase di flowchart, in modo molto primitivo, ho puntato molto sulfare delle prime proposte di layout manualmente.Avevo proposto di fare individualmente degli schizzi prima della strutturadi base, e poi di ogni pagina(almeno per tematica), schizzi di pochi minuti,bozze, che avrebbero dato uno sguardo su quello che ognuno di noi si imma-ginava.Alcuni si erano inizialmente rivelati contrari, pensando che avremmo fin dasubito disegnato schermate uguali l’uno all’altro, però in realtà con questoapproccio abbiamo visto che in alcuni particolari, c’erano versioni discordi,e che quindi potevamo rimettere in discussione tutto, dovevamo rimettere indiscussione tutto.Abbiamo quindi iniziato a fare quello che dovevamo fare, motivare pezzo perpezzo quello che disegnavamo, in modo concreto, mentre fino a prima eranoelementi inseriti “di pancia”, senza ragionarci a fondo.Probabilmente senza questa tabula rasa iniziale, saremo arrivati al terminedel progetto con un layout che avevamo in realtà scelto in maniera casualenelle bozze che avevamo fatto in fase di flowchart, e che non rispecchiavanole nostre idee, ecco quindi che si è rivelata un’idea utile e interessante, nondare per scontato che quello che era già stato fatto, funzionasse realmente.Guardando tutte le proposte, analizzando quello che andava e non andava,siamo arrivati a definire degli schizzi comuni per le varie interfacce, e questavolta erano realmente definite nelle nostre teste, tanto che vedendo le bozzeprecedenti, quasi non le riconoscevamo.È stata una fase molto importante, perché nel cuore della progettazione,abbiamo capito che tutto è discutibile, e niente è definito, nemmeno quellebozze che avevamo elaborato, sarebbero diventate le interfacce finali.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 51
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 52Wireframe di media definizioneEra ora invece di creare una bozza a computer, bozza che si sarebbe poitramutata nel prototipo interattivo per il primo test d’usabilità.Dopo una lunga ricerca abbiamo optato per il programma Wireframe SketcherStudio, poiché gratuito e ricco di elementi per il web.Oltretutto aveva il pregio di essere compatibile fra i vari sistemi operativi.Abbiamo definita la base del layout, che poi ci siamo scambiati per realizzarele varie pagine partendo dalla bozza.Questa fase è stata importante, poiché le bozze disegnate erano in realtàpoco precise, e abbastanza astratte, ancora, qui si iniziava a definire conprecisione gli elementi.Finite le pagine ci siamo ritrovati per vedere di uniformare tutto, e di corregge-re eventualmente quello che già notavamo non funzionare.Il layout era così suddiviso:-header: con logo a sinistra , a destra il box cerca e il link stato del conto benin evidenza-content: con già definito il menu, il reminder,…-footer: con orari d’apertura, Informazioni e link alla sezione informazioni
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 53Test Usabilità - Wireframe di media definizioneUna volta terminati i wireframe ho avuto il compito di fare il prototipo interatti- dell’articolo per mettere nel carrello, ma è un click in più accettabile.vo. C’è stato solo un caso in cui un utente ha confuso il box della wishlist perRicevuti i png da tutte le schermate le ho mappate con dreamweaver, al fine qualcosa che interagisse con il carrello, ma è una cosa che abbiamo notatodi ottenere schermate cliccabili, anche se non del tutto interattive. maggiormente nel secondo test, e solo li è stato modificato. Il processo del carrello invece è un problema, poiché in alcuni casi pensava-Si trattava poi di decidere le domande da fare ai vari tester, analizzando il sito no che la prima schermata, fosse quella finale, fosse già la conferma, e none cercando di capire quali possano essere i problemi, o le parti difficili. vedevano il bottone che concludeva la transazione.Infine i task, o compiti, da eseguire per i tester erano: Problema che infatti si è riscontrato anche nel test successivo, e a cui nella fase di mockup ho poi rimediato.-Come accederesti al sito?-Acquistare pennelli -Cerca informazioni nel sito-Cerca informazioni sul sito Essendo una pagina statica non ha dato problemi nel test e neanche in quelli-Verifica l’estratto conto successivi, tuttavia alcuni utenti cercavano qualcosa chiamato informazioni e-Aggiungi pennelli alla wishlist non indicazioni, e infatti è stato modificato.Abbiamo analizzato una decina di persone, fra cui un docente, tutte le intervi- -Verifica l’estratto contoste le trovate in allegato al dossier, nella cartella “Test_usabilità _media”. Anche qui non ci sono grandi problemi, molti utenti cliccavano su stato del conto in alto nell’header per arrivarci, e si è rivelata una scelta azzeccata, inGlobalmente, le cose che abbiamo riscontrato in questo primo test sono: quanto altri facevano più fatica a trovarlo sotto profilo.-Come accederesti al sito? -Aggiungi i pennelli alla wishlistNon ci son stati grandi problemi, la maggior parte dei tester capiva che dove- È stato il task più disastroso, pochi tester sapevano e capivano che cosa era-va inserire nome,.. e poi cliccare accedi. no le wishlist, e soprattutto che c’erano più promemoria.C’è stato un caso di un utente che vedendo una X in alto a destra ha provato Capivano tuttavia poi come aggiungere dalla scheda prodotto i prodotti allaa cliccare, pensando fosse come un lightbox di una gallery che potesse chiu- wishlist, tranne dalla schermata dei promemoria in cui il bottone aggiornadere, ma questo è più un errore del prototipo… alla lista veniva scambiata per “aggiungi alla lista”, anche questo è stato poiNella seconda schermata inoltre non si capiva che bisognava inserire email e confermato nel secondo test.la nuova password per conferma, ma pensavano che era ancora per iscriver-si. In generale questo test ci è servito come prima indicazione a cosa si doveva sistemare, prima della consegna avevamo ancora poco tempo, quel tanto che-Acquista pennelli bastava per fare dei wireframe di alta qualità, che grazie a questo test aveva-Quello che è il passaggio dalla homepage al carrello si è rivelato molto fun- mo la consapevolezza di consegnare in modo valido.zionale, in pochi secondi, in pochi click arrivavano al prodotto, alcuni magariprendendo la strada più lunga, come ad esempio entrando nella scheda video del test in >allegati >test_usabilità_media
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 54Wireframe di alta definizioneTerminato il test abbiamo corretto ogni errore e dubbio sui file di media defi-nizione, quindi abbiamo ancora una volta, definito una schermata di base pertutti.Per i wireframe di alta definizione si è deciso di usare photoshop, perché ov-viamente permette una gestione dei pixel migliori del programma utilizzato inprecedenza, e perché avremmo poi potuto usare quei file nella fase di grafica,come base per la nostra proposta.Definiti gli elementi principali, abbiamo costruito le varie pagine come nellafase precedente, e finalmente si vedeva qualcosa che si avvicinava al prodot-to finale, qualcosa appunto, ad alta fedeltà.Per la consegna volevamo portare un prototipo interattivo, da mostrare du-rante la presentazione, in modo da dare ancora un’idea di come ci si muovenel sito, in seguito abbiamo usato questo prototipo per il test d’usabilità conmascaro.Ancora una volta quindi con dreamweaver, ho mappato le immagini, in mododa collegarle e farle diventare un sito abbastanza funzionante da poter essereusato nei test.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 55Test Usabilità - Wireframe di alta definizioneUn secondo test di usabilità si è svolto dopo la presentazione dei wireframe a “aggiorna la lista” pensando fosse un “aggiungi alla lista”, questo è quindiconsegna avvenuta, con il prototipo di alta definizione preparato. stato rimosso.È stato importante ripetere questo test per vedere, prima di partire con lagrafica, se la base, lo scheletro del sito funzionava abbastanza bene da con- -Visualizza l’estratto conto:tinuare. Non ci son stati particolari problemi, alcuni hanno trovato la pagina partendo da profilo, altri direttamente dal link sull’headerAbbiamo ripetuto i task della scorsa volta, ed ecco i risultati: -Come ricaricare il conto:-Accedi al sito: Anche qui non ci sono problemi, alcuni vanno nel link di menu informazioni,Come prima gli utenti non si aspettavano una seconda schermata d’accesso, altri nel link sull’header “Ricarica il conto”.ma capiscono facilmente che si tratta di una convalida Con questo test siamo anche riusciti a sistemare alcuni problemi a cui non-Cosa vedi in homepage: avevamo trovato una soluzione nella precedente fase, questo perché nonla prima cosa che vedono sono le 6 aree dei prodotti avevamo tempo, e non avevamo soprattutto potuto confermare le nostre ipotesi con un secondo test prima, tuttavia è stato utile fare un altro test, con-Compra 3 pennelli: tester che soprattutto non erano studenti csia.Nella maggior parte dei casi i tester prendevano la scorciatoia sotto la macrocategoria, andando direttamente in pennelli, in quella schermata capiscono didover aggiungere le quantità, tuttavia è successo di un utente che ha cliccato video del test in >allegati >test_usabilità_altal’input di promemoria, per curiosità, o forse perché pensava fosse legato alcarrello (infatti abbiamo poi invertito questi due strumenti).Convalidano quindi tutti l’acquisto tranquillamente, ma un utente ha espressoil desiderio di continuare a navigare fra i prodotti, invece di andare nel carrelloappena cliccata l’icona.Nella seconda schermata del carrello si aspettavano un riepilogo, come unaconferma.Un ultimo test ci ha confermato che gli utenti non pensavano dal wireframeche la scritta Disegno, ad esempio, o l’immagine sia cliccabile.-Aggiungi articolo al promemoria:Come nel precedente test alcuni non sapevano cosa era il promemoria, e nonci sono arrivati fino a che non li è stato spiegato.Tutti comunque sono poi riusciti ad aggiungere materiale alla lista, tranne uncaso in cui al posto che premere il pulsante “Aggiungi materiale” ha premuto
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 56TITOLO
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 57Definizione obbiettivi e caratteristicheFin dal principio il concetto che associavo al magazzino è di creatività, dimateriale e di artigianato, questo perché i lavori che vengono svolti con questiprodotti, sono appunto progetti scolastici che seguono questi tre aggettivi.Ovviamente ho indagato sulla realtà del csia, che non ha un brand ben defi-nito, questo perché come istituzione scolastica segue le regole del cantone,tuttavia un certo movimento iconografico e visivo sta nascendo in vista del50mo del csia, intitolato “CSIA, 50 anni mille colori”.L’ultima cosa che volevo rendere con il sito è il fatto che doveva comunquerimanere pratico, cosa non facile, associato al concetto di poliedricità del csia.Quello che infatti in fase di mockup mi ha frenato inizialmente era proprioquesto, dare un’impronta grafica creativa non è di per sé complicato, marendere ciò funzionale, in un sito che non doveva essere complicato ulterior-mente dalla grafica.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 58Definizione obbiettivi e caratteristiche
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 59MoodboardLe prime moodboard son prese da internet, ne vedete una selezione, sonoimmagini che potete facilmente abbinare ai concetti che ho trovato in prece-denza, ma meno facilmente al prodotto finale, che ha subito ovviamente molticambiamenti.In una seconda fase ho trovato molte idee grafiche dai loghi e dai flyer dell’e-vento “Csia, 50 anni mille colori”, di cui ho avuto modo di parlarne con AlbertoBianda, curatore della grafica dell’evento.La premessa è che la grafica del csia è curata ma a pezzi, o meglio, ci sonoframmenti di identità che ogni tanto si combinano, e ogni tanto no: C’è il logo,creato da Max Huber, la segnaletica interna della scuola, volantini e flyer deicorsi, ci sono ovviamente il sito del csia e del liceo artistico, e infine quelloche si sta creando, ossia queste immagini rivolte al 50mo.L’idea di tutte queste immagini dell’evento è di usare il logo del csia (chediciamo è l’identità più solida) come contenitore per una o più immagini,colori, forme, questo perché anche il csia a sua volta é un contenitore,contiene più corsi, dalle sezioni, al liceo artistico, alla SSS_AA,…Nel caso dei flyer, ad esempio, questo contenitore è usato per mostraredisegni o immagini relative all’evento, nel mio caso invece, avrebbe dovutomostrare probabilmente materiale.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 60Moodboard
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 61Moodboard
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 62Evoluzione MockupNelle prime versioni tentavo di applicare il concetto di creativo su tutto il sito,usando molti colori, tracce che ricordavano il segno della matita,…Questo si rivelò presto molto pesante, decisi quindi di rivedere in parte il mioconcetto.Lo sfondo, che di per sé è un elemento importante, trasmetterà il concetto dicreatività e artigianato, mentre che il contenuto sarà in parte formale.Questo perché anche il csia è così, vista da fuori è un istituzione, formale,professionale, anche diciamo come edificio, da un’idea molto quadrata eseria, tuttavia scavando la superficie, o entrando nella scuola, si vede il verocuore, la vera identità del csia.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 63Layout graficoCome spiegato ho voluto mostrare i due aspetti del csia dividendo sfondo e Login: Nel login ho cambiato poco, in seguito al test di usabilità ho sistematocontenuto, lo sfondo infatti mostra un’immagine creativa, colorata, e il conte- il testo all’entrata.nuto è invece più sobrio e professionale. Catalogo: nella prima schermata vediamo il menu a tab, la voce selezionataHeader, content e footer sono con sfondo bianco, con un bordo scuro, per è bianca con una traccia nera, questo per adattarsi allo standard, le altre vocievitare problemi con lo sfondo del sito, e con dei margini fra loro, che danno hanno un gradient, come gli altri bottoni.un ritmo regolare.Nell’header il logo viene usato come nei flyer dei 50 anni, con l’aggiunta della Le 4 categorie hanno una foto significativa, ho dato particolare importanzavoce “Magazzino Scolastico”. alle foto, tant’è che le prime lezioni assieme a Mattia, siamo andati a far delleA destra invece c’è il box cerca, in grigio, in modo da non essere troppo inva- foto, sia per la prima e seconda schermata, sia per gli articoli del magazzino.sivo (gli utenti sanno comunque dove cercare), i link ricarica il conto e Log out Siamo venuti a conoscenza che gli articoli di pulizia non vengono venduti, e(con iconografie, per darli importanza, e il link stato del conto, dove il saldo così abbiamo tolto quella sezione e unito informatica e fotografia.attuale ha un bordo verde, che cliccato porta alla pagina estratto conto. Queste prime foto son state fatte in base alla funzione, poiché gli utenti nel card sorting avevano ordinato queste categorie proprio per l’utilizzo che fannoIl menu è costituito da bottoni blu, con una leggera sfumatura, ho scelto il di questi prodotti, infatti vediamo ad esempio la foto per materiale da disegno,blu come colore primario, per i link, perché è significativo di professionalità, è un tavolo con del materiale, contestualizzato in un attività di disegno.sicurezza, calma, ed è un colore molto rilassante per il web, mentre che l’a-rancione come colore utilizzato per ogni bottone che porta all’acquisto Infine i promemoria, che son stati stravolti dal wireframe, ho capito che unadi un prodotto. wishlist visuale, che inizia ad essere più usata, sarebbe stata più usata an-I due colori oltretutto sono complementari che nel nostro contesto, dove abbiamo utenti che lavorano molto con immagi- ni.Come detto il menu ha una leggera sfumatura, che si inverte quando vai so- I prodotti si dividono in liste, e tutto funziona come uno slider, tutte le imma-pra con il mouse, questa sfumatura oltre che a evidenziare, è inserito anche gini sono chiare, e si illuminano al passaggio del mouse, a questo appareperché aumenta l’usabilità, migliorando l’affordance dei bottoni, oltretutto anche una nuvoletta, che riporta le informazioni del prodotto.rende anche il sito più adatto ad un pubblico giovanile, che è quello a cui Cliccando sul nome della lista si va alla pagina di promemoria della lista,puntiamo. cliccando invece su un prodotto c’è un’ancora che porta al prodotto specifico all’interno del promemoria.Il footer è stato mantenuto come nei wireframe, come anche il font, avevamo Sono visualizzati un massimo di 9 prodotti( che immagini sia lo standard discelto l’arial poiché il csia non ha un font utilizzato univocamente, ci sareb- quanto possa esser messo), oltre appare un icona con tre puntini, che vuolbe quello del cantone, il gill sans, che però, in confronto all’arial, non è così dire “c’è dell’altro”.leggibile sul web. La seconda pagina appare come la prima, e come nel wireframe non ho attuato grandi stravolgimenti, anche in questo caso le foto più significativeAnalizzo ora le schermate passo a passo, mostrando quello che ho cambiato. aiutano l’utente nella scelta. Nella terza pagina, ossia la lista dei prodotto c’è stata una modifica dal test
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 64Layout graficod’usabilità, dove l’input promemoria è stato spostato in fondo.Questo accorgimento è stato mantenuto anche nella scheda prodotto.Nella pagina di profilo, rispetto ai wireframe ho aggiunto la voce Stato delconto (cliccabile, poiché gli utenti sembravano cercare anche qui la seguentevoce) e il link come caricare il conto studente.Nell’estratto conto ho inserito una tabella di cui l’intestazione ha il colore prin-cipale del sito, e scendendo ha una gradazione al 50%, ho preferito poi usaredelle frecce al posto che i + per seguire il target, che usa sistema operativomac.Tutte le schermate di informazioni son state adattate, ma non stravolte, ovvia-mente, essendo testo statico.Nella pagina del promemoria in seguito al test d’usabilità ho deciso di togliereil pulsante aggiorna lista, ho inoltre inserito il link “cosa sono i promemo-ria?” accanto al titolo dei promemoria.Nel carrello come detto i pulsanti che invitano al acquisto sono aran-cione, perché è un colore “call to action”, quindi i bottoni fino all’acquistodefinitivo sono stati così modificati.Nel secondo lightbox d’acquisto appare anche un riassunto dell’acquisto, inmodo da dare un ultimo avvertimento.Nella pagina principale del carrello ho inoltre aggiunto l’icona accanto altitolo, in questo modo gli utenti fanno facilmente la connessione fra l’iconadel menu e questo, e ho aggiunto a destra la frase “per completare l’acquistoclicca su conferma” questo perché in alcuni test pensavano che l’acquisto eragià ultimato in questa schermata, e inoltre, nel caso di una lista molto grande,è ovviamente utile.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 65Test Usabilità MockupTest Usabilità 07.12.2011 Terza schermata:Analisi del test passo a passo: Un problema che avevamo riscontrato nei wireframe, l’utente pensa che l’ac-Task1: di cosa parla il sito quisto sia già completato, poi in seguito vede il conferma, e capisce che deveL’utente ha subito capito che si tratta del sito del magazzino csia, è stato ancora confermare l’acquisto.agevolato da una frase introduttiva che ha letto perché evidenziata, magari unutente meno riflessivo, avrebbe letto solamente il logo e il form come ele- Per risolvere questo problema, intanto ho colorato di arancione tutti i bottonimenti principali. che portano al completamento del percorso, in modo da riportare mentalmen- te al carrello e all’azione di comprare, e infine ho aggiunto una scritta “perNon è un problema, come prima schermata l’importante è far capire che è il completare l’acquisto, clicca su conferma”.sito del magazzino scolastico, e questo è riuscito, la spiegazione delle funzio-nalità verrebbe comunque spiegata in seguito… Quarta e quinta schermata: Ha capito di dover selezionare il giorno, si è fermato a leggere il riepilogo, eTask 2: Accedi al sito ha in seguito confermato.Anche in questo caso l’utente si è preso il tempo di leggere tutto, e ha capito Tutto come richiesto.a cosa servivano le due schermate di iscrizione, il task quindi è risolto. Alla fine si è sorpreso di essere tornato alla pagina iniziale, ma ha subito no-Task3:Acquista un foglio Jawa tato il reminder che li conferma l’acquisto.Prima schermata:Come prima cosa l’utente ha visto Disegno, probabilmente aiutato dalla foto Task4: aggiungere un prodotto al promemoriain cui erano presenti dei fogli, ha letto quindi le sotto-categorie, e inizialmente Ha guardato subito la pagina promemoria, e con una lista di esempio ha subi-non ha visto carta e cartoncini, quindi ha detto, o clicco disegno, o lo cerco to capito che si trattava delle wishlist.(indicando il cerca specifico per il catalogo, quindi anche qui ha compreso ap- Inizialmente ha visto il bottone sposta nel carrello, ma questo perché nonpieno la funzionalità), ha dato una rilettura veloce alla pagina e mentre stava aveva capito il task, poi senza problemi ha visto aggiungi alla lista.per cliccare disegno, ha trovato il link carta e cartoncini. In seguito ha specificato “magari si può trovare anche nella lista…” questoCredo quindi che ha capito la pagina, ha capito che disegno (almeno la scrit- magari perché li è venuto in mente solo dopo che nella lista dei prodotti, c’erata) sia un link, carta e cartoncini sia un link più veloce verso il suo obbiettivo e la possibilità di aggiungere ai promemoria.ha capito la differenza fra i due cerca. Task5: Verifica il tuo saldo attualeSeconda schermata: Prima che finissi di dire il task stava già cliccando su stato del conto nell’he-Arrivato alla seconda schermata ha subito individuato il prodotto, senza pro- ader, questo perché penso si noti bene, e magari lo aveva già letto in prece-blemi, quindi per aggiungerlo al carrello avrebbe inserito la quantità, e cliccato denza.il bottone del carrello, tutto questo processo l’ha completato nell’arco di pochi Quando ha visto poi che non era cliccabile (errore del prototipo!) è andatosecondi e senza esitazione. senza indugio in profilo, li, stava ancora guardando stato del conto, in alto a
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 66Test Usabilità Mockupdestra, poi, capendo che si trattava di un doppione, è tornato nel menu latera- grezzo facevamo anche noi, segnandoci le cose sull’agenda,…le, dove ha cliccato estratto conto e ha completato il task.È stato importante da un errore del prototipo vedere che comunque è riuscito Conclusioni: Questo terzo test mi è servito per capire se erano rimaste dellea cavarsela e a capire che si trovava sotto profilo. lacune nei wireframe, e cosa più importante, se i cambiamenti proposti da me, erano validi e funzionanti.Task6: come ricaricare il conto studente Penso che la grafica in sé ha aiutato molto a capire quello che è la tematicaTask fatto dalla pagina stessa di estratto conto, che ha risolto in breve tempo. del sito, e che le modifiche che devo porre, soprattutto nel carrello, siano atte a rendere ancora più ovvia la via agli utenti.Task7: Trovare una guida del sito Inoltre, visti alcuni problemi ancora con i promemoria penso che ci voglia unaL’utente ha guardato il menu, e a subito cliccato su informazioni giusta guida all’inizio, poiché alcune funzionalità che abbiamo proposto non sono complicate, ma differiscono leggermente dagli standard che gli onlineTask8: slideshow dei promemoria shop propongono.Un problema che riscontravamo anche nei wireframe, l’utente non vede ipromemoria come più liste, ma come un’unica lista, questo utente poi proba- video del test in >allegati >test_usabilità_mockupbilmente abituato alle wishlist tradizionali, era ancora più attaccato a questaconvinzione.Rispetto alla mia idea lui avrebbe cliccato le immagini per andare direttamen-te alla wishlist, probabilmente con un link ancora che avrebbe portato allaposizione in cui quel prodotto si trovava nella lista, piuttosto che, come pen-savo io, cliccare sulla scritta per andare alla lista, e cliccare sull’immagine perandare al relativo prodotto.Non c’è alcun problema, almeno sono consapevole di dover cambiare questocollegamento.Ha capito invece subito l’icona dei tre puntini.Sinceramente mi ha sorpreso il fatto che ha capito l’icona dei tre puntini, nonavendo probabilmente compreso che ci sono più liste, in ogni caso secondome questo problema lo si deve risolvere con una guida al primo accesso.Come fa ad esempio youtube, o facebook quando aggiungono una funzionali-tà, anche noi al primo accesso nella slideshow dove ora appaiono i promemo-ria ci dovrebbe essere una spiegazione di cosa sono i promemoria, e del fattoche ci possono essere più liste…Abbiamo messo in dubbio l’utilità di questa funzione, ma da ex studente latrovo utile proprio per la possibilità di, ad esempio, dividere i promemoria permateria, in modo di sapere quando acquistare,… è una cosa che in modo
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 67Particolarità della proposta graficaLe particolarità che ho pensato riguardano due campi:-sfondo: lo sfondo come detto è usato come contenitore concettuale di quelloche è il csia, o in questo caso quello che è il magazzino scolastico del csia,verranno quindi inserite foto di dettagli di materiale, potete vedere alcuniesempi.Dettagli di tessuti, carta, pigmenti, qualunque texture interessante non devecomunque andare in contrasto con il sito, ad esempio non deve essere troppochiaro e luminoso, né troppo impegnativo da guardare.-promemoria: Oltre ad aggiungere il link “cosa sono i promemoria?” nellarelativa pagina, e ovviamente creare una pagina di istruzioni, al primo acces-so ho pensato di mettere al posto delle liste, nello slideshow (liste che ovvia-mente ancora non ci sono) una guida, una spiegazione come viene fatto sugoogle, facebook o youtube, su questa funzione.Questo perché è un’applicazione ancora relativamente nuova, non conosciutada tutti, e comunque, fatta su misura per questo sito.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 68TITOLO
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 69Programmazione prototipoIn fase di prototipazione ho potuto capire in modo più dettagliato come l’u-tente andrebbe a muoversi sul sito, soprattutto per quel che riguarda loslideshow del promemoria, elemento che non avevo ancora potuto analizzareapprofonditamente.Questo è stato un applicativo complicato da programmare, perché richiedeval’utilizzo di jquery, in modo abbastanza personalizzato.Il resto del sito è stato relativamente semplice da programmare, anche se peralcune cose è stato comunque richiesto l’uso di javascript e jquery.Ho scelto di inserire lo slideshow nelle varie pagine con un iframe per nondovermi preoccupare in un secondo momento di eventuali aggiornamenti ocorrezioni nel file del promemoria.In generale la programmazione del prototipo non mi ha dato grandi problemi,mi hanno invece permesso di ragionare sul “affordance” del progetto e dellefunzionalità.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 70Test UsabilitàIn fase di prototipazione ho potuto capire in modo più dettagliato come l’u-tente andrebbe a muoversi sul sito, soprattutto per quel che riguarda loslideshow del promemoria, elemento che non avevo ancora potuto analizzareapprofonditamente.Questo è stato un applicativo complicato da programmare, perché richiedeval’utilizzo di jquery, in modo abbastanza personalizzato.Il resto del sito è stato relativamente semplice da programmare, anche se peralcune cose è stato comunque richiesto l’uso di javascript e jquery.Ho scelto di inserire lo slideshow nelle varie pagine con un iframe per nondovermi preoccupare in un secondo momento di eventuali aggiornamenti ocorrezioni nel file del promemoria.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 71Test UsabilitàIn fase di prototipazione ho potuto capire in modo più dettagliato come l’u-tente andrebbe a muoversi sul sito, soprattutto per quel che riguarda loslideshow del promemoria, elemento che non avevo ancora potuto analizzareapprofonditamente.Questo è stato un applicativo complicato da programmare, perché richiedeval’utilizzo di jquery, in modo abbastanza personalizzato.Il resto del sito è stato relativamente semplice da programmare, anche se peralcune cose è stato comunque richiesto l’uso di javascript e jquery.Ho scelto di inserire lo slideshow nelle varie pagine con un iframe per nondovermi preoccupare in un secondo momento di eventuali aggiornamenti ocorrezioni nel file del promemoria.
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 72TITOLO
  • Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 73Conclusioni progettoIl sito presentato é una proposta che può risultare pronta alla realizzazionefinale, e all’inserimento sul web.È infatti a mio parere una soluzione che permette e agevola lo svolgimentodelle funzioni del magazzino, e, seppur ne abbiamo concretizzato solo unaparte (la parte del sito che tocca gli utenti) ci sono i presupposti e i concettiche possa favorire anche il lavoro per il magazziniere, e l’amministrazione ingenerale.Abbiamo quindi terminato ciò che il mandato richiedeva, anche qualcosa dipiù, ma manca ancora la definizione dell’interfaccia che il magazziniere trove-rà per svolgere i suoi compiti.I vari test di usabilità che abbiamo fatto, dimostrano che il sito funziona ed éintuitivo e di facile e veloce navigazione, che si arriva velocemente al prodot-to, e al suo acquisto, e quindi c’é un miglioramento in tempistiche e qualitàdel servizio, rispetto al metodo di acquisto che c’é ora, con un buon lavoroanche nella parte relativa al magazziniere e amministrazione del sistema, ilservizio migliorerà ulteriormente.