Presentazione progetto Magazzino Online Csia

TITOLO

Dossier di progetto

Progetto interdisciplinare di 3° semestre, proposta personale

di Alessandro Bianchi

Secondo anno, corso Grafica Digitale orientamento web 2011/2012

SSS_AA Scuola specializzata superiore d’arte applicata, Lugano

Alessandro Bianchi Dossier Progetto Magazzino 2 SSS_AA WEB 2011-2012 2

Indice IntroduzioneRACCOLTA DELLE INFORMAZIONI E ANALISIMandatoBrief e specifiche progettoPianificazione fasi progettualiBrain storming - Ipotesi definizione progettoSuddivisione lavori - punti d’analisiAnalisiIpotesi funzionalità nuovo sistemaConclusioni AnalisiFLOWCHART - DEFINIZIONE STRUTTURA DEL SITO E NAVIGAZIONEIntroduzione FlowchartFunzionalitàUse CaseFlowchartCard SortingCambiamenti della FlowchartWIREFRAME - DEFINIZIONE STRUTTURA DELLE PAGINEWireframe di bassa definizioneWireframe di media definizioneTest Usabilità - Wireframe di media definizioneWireframe di alta definizioneTest Usabilità - Wireframe di alta definizioneMOCKUP - DEFINIZIONE INTERFACCIA GRAFICADefinizione obbiettivi e caratteristicheMoodboardEvoluzione MockupLayout graficoTest usabilità MockupParticolarità della proposta graficaPROTOTIPAZIONEprogrammazione prototipoTest usabilità prototipoCONCLUSIONI PROGETTOconclusioni progetto

pag.4

pag.5pag.6pag.7pag.8pag.9

pag.10-35pag.36-38

pag.39

pag.41pag.42-43

pag.44pag.45

pag.46-47pag.48

pag.50-51pag.52pag.53pag.54pag.55

pag.57-58pag.59-61

pag.62pag.63-64pag.65-66

pag.67

pag.69pag.70-71

pag.73


IntroduzioneRACCOLTA DELLE INFORMAZIONI E ANALISIMandatoBrief e specifiche progettoPianificazione fasi progettualiBrain storming - Ipotesi definizione progettoSuddivisione lavori - punti d’analisiAnalisiIpotesi funzionalità nuovo sistemaConclusioni AnalisiFLOWCHART - DEFINIZIONE STRUTTURA DEL SITO E NAVIGAZIONEIntroduzione FlowchartFunzionalitàUse CaseFlowchartCard SortingCambiamenti della FlowchartWIREFRAME - DEFINIZIONE STRUTTURA DELLE PAGINEWireframe di bassa definizioneWireframe di media definizioneTest Usabilità - Wireframe di media definizioneWireframe di alta definizioneTest Usabilità - Wireframe di alta definizioneMOCKUP - DEFINIZIONE INTERFACCIA GRAFICADefinizione obbiettivi e caratteristicheMoodboardEvoluzione MockupLayout graficoTest usabilità MockupParticolarità della proposta graficaPROTOTIPAZIONEprogrammazione prototipoTest usabilità prototipoCONCLUSIONI PROGETTOconclusioni progetto

Introduzione

Come progetto interdisciplinare per il terzo semestre ci è stata affidata una tematica 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 sono uscite 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.


TITOLO


Mandato

Progettazione di un magazzino online che permetta di agevolare le funzioni del magazzino e snellire i tramiti fra personale e utenti (studenti, docenti,...). Un sito pratico, funzionale, con interfaccia semplice e buona usabilità per gli utenti. Definire il sistema per la gestione di dati: amministratori, utenti, ordini di materiale, addebito, ecc.


Brief e specifiche progettoDescrizione 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, non automatico), alla proposta di una soluzione online che permetta la gestione degli stocks in tempo reale così come la contabilità (accrediti+addebiti studen-ti), e un’economia di carta.

Descrizione bisogni Un sistema pratico, funzionale, informatizzato, che permetta di smettere di usare 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 del magazzino.

Scadenze Consegna 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.


Pianificazione fasi progettuali•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.


Brain-storming

Per iniziare è stato effettuato un brain storming, in cui ogni membro della classe 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 riguardato e revisionato: ciò che appariva inutile o non fattibile, è stato subito eliminato e sono 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 seguito sarebbe stata rivista. Responsabili: tutti. Prima definizione del progetto

Il nostro obiettivo è creare un sito per il magazzino del CSIA, dove gli studenti possano facilmente ordinare il materiale di cui abbisognano, riducendo i tempi di attesa per il ritiro delle merci; se possibile, vorremmo anche permettere allo studente di tenere d’occhio la situazione del proprio conto e dei propri ordini. Ci proponiamo anche di facilitare il lavoro al magazziniere velocizzando un processo che ora è cartaceo “computerizzandolo”; per il magazziniere sarà dunque più semplice e più rapido rinnovare lo stock e gestire il conto degli studenti.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.


Suddivisione lavoro - punti di analisiCSIAResponsabili: Alessandro e Samuel.Obiettivi: • Definire cosa è il CSIA;• Capire a cosa serve il magazzino del CSIA;• Identificare la struttura e il target del CSIA; • Definire le formazioni offerte dal CSIA;• Raccogliere informazioni sui servizi offerti dal CSIA: mensa, biblioteca, magazzino;• Conoscere il numero di studenti del CSIA.

MagazzinoResponsabili: Andrea, Mattia e Nelson.Obiettivi: • Sapere chi sono i fornitori della merce del magazzino del CSIA;• Individuare struttura, organigramma e gestione del magazzino del CSIA;• Raccogliere informazioni sulla gestione informatica, funzionamento del database, tipologia della struttura esistente, ruoli del magazziniere, funzio-namento conto/ID/tessera studente;• Analizzare il processo di compra-vendita del materiale per il magazzino del CSIA;• 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).

UtentiResponsabili: Isabel, Salvatore, Sonia.Obiettivi:• Definire le esigenze dell’utenza attraverso un sondaggio online e un sondaggio faccia-a-faccia. •Tipologie di utenti: studenti, docenti, magazziniere, amministrazione.

Punti da tenere in considerazione per i sondaggi: o Hai libero accesso a internet? o Fai acquisti via internet? o Fai acquisti al magazzino? o Sei disposto a passare a un metodo tramite web? o Insicurezze riguardo privacy. o Differenze tra allievi e docenti. o Bisogni dei docenti. o Controllo dei conti degli allievi.


Analisi - Il Csia

Il CSIAIl Centro scolastico per le industrie artistiche (CSIA) forma i professionisti nel settore delle arti applicate (decoratore-espositore, designer, disegnatore di arredamenti, grafico, pittore – pittore di scenari, tecnologo tessile (de-sign), tessitore-creatore di tessuti).Offre inoltre un curriculum di Liceo artistico (Maturità artistica di diritto can-tonale), un anno unico per l’ottenimento della Maturità professionale artisti-ca, nonché la Scuola Specializzata Superiore di Arte Applicata (animation, webdesign e industrial design) e il corso propedeutico.Il CSIA offre corsi regolari seguendo il calendario scolastico cantonale. La formazione avviene in aula e in laboratorio, e prevede l’integrazione di ma-terie teoriche con materie artistiche e pratiche. L’insegnamento è volto a svi-luppare una solida competenza di base, ad esercitare le capacità critiche e la sensibilità di coloro che scelgono quest’ambito di studio, a dare spazio alle abilità personali, integrandole in un contesto pratico e professionale.

Formazioni offerte:Creatore di tessuti:Chi esercita questa professione lavora generalmente in proprio oppure in laboratori artigianali. Quasi sempre è contemporaneamente ideatore, esecu-tore ed anche venditore del proprio prodotto.Allestisce un piano di lavoro in base ad una richiesta. La progettazione dei tessuti comprende, oltre all’elaborazione di schizzi e disegni, la ricerca di materiali, colori e intrecci appropriati attraverso vari procedimenti tecnici, in alcuni casi avvalendosi anche del computer. In seguito prepara il telaio per la realizzazione dei tessuti.Il tessitore e la tessitrice diplomati possiedono la completa padronanza di tutti i lavori preliminari come la creazione di un campionario, il calcolo e l’impiego dei materiali oltre alla realizzazione dei tessuti e alle rifiniture.

Decoratore 3D:In questo corso vengono formati i professionisti nell‘ambito della vetrinisti-ca, della comunicazione promozionale, degli allestimenti per punti vendita e stand. Si lavora per sviluppare una sensibilità espressiva finalizzata a valorizzare i diversi oggetti da porre in evidenza. Si unisce la conoscenza delle tecniche tradizionali alle applicazioni sul computer.

Designer:La professione si fonda sulla conoscenza delle tecniche artistiche, sul-la padronanza delle leggi della percezione e sulla conoscenza dell’essere umano. Il Designer (industriale) crea e defininisce i prodotti che l’industria realizza. Ne determina la migliore forma in relazione all’ergonomia e alla funzione. Conosce i materiali e le tecniche di lavorazione, nonché le tecni-che di progettazione tradizionali e avanzate.

Disegnatore (con orientamento architettura d’interni):È il collaboratore tecnico e creativo dell’architetto di interni o di un grup-po di lavoro attivo nel campo della pianificazione d’interni. Sviluppa proget-ti e elabora piani esecutivi e di dettaglio mediante programmi CAD, esegue schizzi, prospettive e fotorendering. Elabora l’allestimento di capitolati dei materiali e dell’opera, dirige i lavori di costruzione sul cantiere e presso gli artigiani. Realizza modelli di architettura d’interni.

Grafico:In questo corso si apprendono le basi della professione del grafico. Nel processo della comunicazione, il grafico è l’intermediario tra cliente e fruito-re; comunica messaggi attraverso manifesti, prospetti, marchi, logotipi, libri, ecc.La realizzazione di un prodotto grafico necessita di una somma di com-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.


Analisi - Il Csia

Pittore di scenari:L’arte abbinata alla professione. Le tecniche di pittura collegate alle scel-te applicative in ambito industriale e artistico. Padroneggia le tecniche di pittura (antiche e nuove) e le conoscenze professionali applicate nell’indu-stria, teatri, studi televisivi. Esegue lavori di decorazione murale ex-novo, conoscendo la peculiarità degli “stili decorativi storici”.

Tecnologo tessile (design):Il tecnologo tessile (design) è una figura importante nel campo della moda e dell’arredamento; è colui che progetta, che inventa il disegno su carta, in seguito stampato sul tessuto. Un’attenzione particolare viene data allo studio delle forme, dei fiori e dei colori, alfine di ottenere un prodotto com-mercialmente valido.

Liceo artistico:Il Liceo artistico ha come finalità prioritaria la preparazione per l’accesso alle Accademie di Belle Arti e alle Scuole Superiori d’Arte. Consente l’ammis-sione all’Accademia di architettura di Mendrisio (condizionata a un colloquio e a un esame di matematica), alla Facoltà di scienze della comunicazione di Lugano, alla Facoltà di Teologia di Lugano (con colloquio e iscrizione ai corsi di latino e greco) e al DACD-SUPSI. L’accesso ai Dipartimenti d’Arte Applicata delle Scuole Universitarie Professionali svizzere richiede, ge-neralmente, un anno di Corso propedeutico o un anno di stage. Obiettivi didattici: il Liceo artistico si prefigge di ricercare un equilibrio e un’interazio-ne tra formazione artistica tradizionale e sperimentazione, tra competenze manuali e progettualità, tra conoscenza storica e riflessione sul presen-te. Ogni anno vengono ammessi al massimo 24 allievi.

Corso per professionisti qualificati:Un intero anno dedicato a coloro che vogliono iniziare un percorso formativo superiore. Un anno di formazione per ampliare le proprie basi culturali e mettere in pratica le proprie capacità espressive.

Corso propedeutico:Il corso propedeutico è indirizzato ai possessori di una Maturità di tipo lice-ale che intendono iscriversi agli esami d’ammissione alle SUP negli indiriz-zi artistici.

Maturità professionale artistica:I percorsi formativi in maturità presso la SAA del CSIA prevedono:

• Maturità professionale artistica, di tipo additivo (4 anni)• Corso di maturità per professionisti qualificati (1 anno)

Il percorso di Maturità professionale artistica di tipo additivo permette agli allievi di seguire un programma di lezioni integrato, che unisce la formazio-ne professionale e le materie specifiche di maturità. Questo avviene per tutte le sezioni della scuola (vedi presentazione delle sezioni).Il corso di Maturità per professionisti qualificati porta gli allievi, in possesso di un titolo di AFC, al conseguimento della Maturità professionale artistica.

Corsi SSS_AA:

Corso professionale superiore di grafica digitale computer animation:Questo corso ha come finalità formare dei creatori SSS in grafica computer animation, il corso si basa su due anni, di cui uno in comune con il corso di web.Corso professionale superiore di grafica digitale web:Questo corso ha come finalità formare dei creatori SSS in grafica digitale web, il corso si basa su due anni, di cui uno in comune con il corso di ani-mation.Corso professionale superiore di technical industrial design:Questo corso ha come finalità formare dei creatori SSS in technical indu-strial design, il corso viene strutturato su due anni, comprensivi di tre mesi di stage.

Ubicazione interna – esternaIl centro scolastico per le industrie artistiche ha sede a lugano, in Via Bren-tani 18, l’edificio è formato da 3 piani principali, due interrati, e due torri sui lati, dove risiedono il più delle aule scolastiche, inoltre i corsi di ginnastica avvengono alle palestre delle scuole elementari.Il magazzino scolastico svolge le sue attività in due principali locazioni: il


Analisi - Interviste

Intervista con il vice direttore Denys GianoraIl magazzino viene gestito con il programma 4d Client, appoggiato al siste-ma operativo Mac.Con questo programma oltre al magazzino si gestiscono altre cose, come per esempio le valutazioni e le assenze scolastiche, la gestione della biblio-teca,..Il magazzino ha già una funzionalità operativa grazie al programma: per ogni articolo c’è una scheda, con fornitore, categorie di materiale, prezzo di acquisto e di vendita, conteggio del materiale che entra e esce.Oltre questo anche il vice direttore ammette che sarebbe interessante forni-re foto e descrizione materiale.I rivenditori che riforniscono il materiale sono una 50, ma devono essere riservati, non mostrati agli studenti, la Lepori e storni fornisce unicamente il 10% del materiale scolastico, come ad esempio gli scatoloni, le tavole da disegno tecnico,.. gli altri distributori sono quelli ufficiali, come Caran d’ache.I fornitori sono gestiti in 4d client anche per avere poi un idea di quello che pagano ad ognuno, anche per avere magari un rimborso…

Le fotocopie dei docenti vengono addebitate inizialmente ad un conto sezio-ne, alla fine dell’anno viene diviso fra gli studenti.La firma degli studenti serve per coprire l’ordine, nel caso del nostro pro-getto viene coperto da password + lettura tessera.

Intervista Federico Bernasconi, supporto informatico4D Client è un software che, supportato da una rete (un client o un server) permette a diversi utenti di collegarsi per gestire database, archivi, e quan-to’altro.All’interno del CSIA, questo software viene utilizzato per gestire l’archivia-zione delle schede dei docenti, degli studenti, così come le relative infor-mazioni; per l’inserimento delle valutazioni e delle assenze; per la gestione, distribuzione e vendita degli articoli del magazzino.

A causa della modalità di programmazione realizzata da Antonio Caso, in tutti i computer della scuola è stata mantenuto la versione 10 di 4D Client, in quanto le versioni successive non sarebbero supportate.Tramite SQL si può pensare di estendere le informazioni di questo database su una pagina web.Responsabile intervista: Alessandro.

Intervista Fiorenzo Rezzonico, magazziniereGeneralmente un articolo viene riassortito nel giro di una settimana, ma le tempistiche di consegna possono variare da ditta a ditta. Per esempio, la ditta che fornisce il materiale cartaceo impiega un solo giorno a rifornire il magazzino del CSIA. Il magazziniere ha diversi compiti, tra cui quello di verificare la disponibilità degli articoli e di occuparsi dell’ordinazione di quelli esauriti (tramite fax). Inoltre, si occupa anche di ordinare nuovi materiali e di distribuire il materiale di base a coloro che frequentano il primo anno scola-stico. Contemporaneamente esegue lavori di manutenzione, il controllo del-le pulizie, la distribuzione delle chiavi degli armadietti, e altro ancora, cosa che non gli permette di dedicarsi pienamente alla gestione del magazzino. Sarebbe quindi opportuno ingaggiare una persona che si occupi unicamen-te di esso: questo permetterebbe di avere un orario più esteso.I fogli delle ordinazioni eseguite dagli studenti vengono archiviati per un 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.La ricarica delle tessere delle fotocopie non è un compito del magazziniere; egli si occupa solo di registrare il pagamento sul database.La richiesta delle merci varia molto da periodo a periodo. Ad esempio, nel periodo di dicembre sono molto richiesti i plastici DAS, mentre poi la richie-sta cala. In linea di massima gli studenti che utilizzano di più il magazzino sono i decoratori e i pittori, mentre gli articoli più richiesti durante l’intero anno scolastico sono: fogli jawa, blocco offset, carta silvretta, matite. I libri sono richiesti solo all’inizio dell’anno.Responsabili intervista: Andrea e Mattia

Intervista del magazziniere riguardo all’utilizzo di 4D ClientIl magazziniere dichiara di aver un buon feeling con il programma 4D CLIENT. Inoltre il software ha un’interfaccia semplice ed intuitiva, che egli riesce 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 sistema


Analisi - Interviste

Intervista del magazziniere riguardo all’utilizzo di 4D ClientIl magazziniere dichiara di aver un buon feeling con il programma 4D CLIENT. Inoltre il software ha un’interfaccia semplice ed intuitiva, che egli riesce 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 sistema differente non avrebbe problemi. Nonostante la semplicità, il programma presenta diverse lacune: ad esempio, una volta effettuata una comanda c’è la possibilità di annullare l’ordine solamente uscendo dalla schermata e ritornando al punto di partenza. Inoltre, non c’è la possibilità di visionare le categorie degli oggetti, di dividere gli studenti in sezioni, e il sistema non avvisa in nessuno modo in caso di esaurimento della merce. L’unica perplessità esposta dal magazziniere riguardo alla nostra idea per il progetto riguarda la modalità di consegna e ritiro: il magazziniere è preoccu-pato del fatto che un allievo che ha comandato della merce non si presenti a ritirarla, occupando così spazio inutile in magazzino, in quanto il posto a disposizione è ridotto, e in caso di mancato ritiro e gran numero di comande potrebbero 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 uso attualmente. L’intero programma 4D Client è stato adattato alle esigenze della scuola. Se si volessero aggiungere ulteriori schede o funzioni, non ci sarebbero proble-mi, in quanto il software utilizza un metodo di composizione dei form simile ad Illustrator e Dreamweaver.Esiste la possibilità di estendere l’area di login a tutti gli studenti, dato che il software è già suddiviso in 3 aree( direzione, segreteria, magazzino).Responsabili intervista: Alessandro e Mattia.

Foto scattate durante l’intervista al magazziniere


Analisi - Sondaggi

Interviste fruitori del magazzino: Sondaggio quantitativo;

DocentiÈ stato effettuato un sondaggio online, al quale hanno partecipato 21 do-centi del CSIA di varie sezioni e anni.

Conclusioni:

È emerso che le conoscenze informatiche dei docenti sono di medio livello (62 %) e che utilizzano internet da circa mezz’ora a due ore (Meno di un’ora al giorno: 43 %, 1-2 ore al giorno: 38 %), soprattutto durante il periodo se-rale (54 %), accedendo specialmente da casa (81 %). Una buona fetta dei docenti (76 %) ha accesso a internet dalla propria sezione.

Abbiamo riscontrato che quasi tutti i docenti effettuano acquisti via internet (90 %).

Abbiamo appurato che per quanto riguarda l’acquisto di materiale in magaz-zino, vi sono due categorie di docenti: alcuni acquistano con regolarità una volta al mese (48 %), mentre gli altri non usifruiscono mai di questo servi-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 acquisti autonomamente (73 %).

Il sistema attuale d’acquisto del magazzino viene valutato buono (38 %). Chi 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 è scarsa e vi sono problemi d’acquisto soprattutto a inizio anno.

La proposta di realizzare un magazzino online è stata ritenuta utile da alcu-ni(62 %), mentre altri si sono dichiarati indifferenti (32 %).

StudentiÈ stato effettuato un sondaggio online, al quale hanno partecipato 41 studenti del CSIA di varie sezioni e anni. Purtroppo non si ha avuto alcun riscontro da parte dei Decoratori 3D (0 %), mentre il maggior numero di ri-sposte ci sono pervenute dal Liceo Artistico (27 %), dagli studenti di Grafica (17 %) e da quelli della SSS__AA (15 %).

Conclusioni:È emerso che le conoscenze informatiche degli studenti sono di medio li-vello (73 %) e che utilizzano internet da una a quattro ore (1-2 ore al giorno: 46 %, 3-4 ore al giorno: 37 %), soprattutto durante il periodo serale (69 %), accedendo specialmente da casa (100 %). Una buona fetta degli studenti (73 %) non ha accesso a internet dalla propria sezione.

Abbiamo riscontrato che quasi tutti i studenti non effettuano acquisti via internet (68 %).

Abbiamo appurato che la maggior parte degli studenti acquista con regola-rità una volta al mese (76 %). Il 62 % degli studenti si rivolge soprattutto al magazzino della scuola.

Il sistema attuale d’acquisto del magazzino viene valutato migliorabile (56 %) 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à di avere un controllo sul proprio conto e sui propri acquisti.

La proposta di realizzare un magazzino online è stata ritenuta utile dalla maggioranza degli studenti (63 %). Diversi si sono però lamentati del fatto che bisognerebbe però in ogni caso recarsi al magazzino per il ritiro della merce.


Analisi - Sondaggi

Sondaggio qualitativoÈ stato effettuato un sondaggio faccia-a-faccia, al quale hanno partecipato 10 studenti del CSIA (di un’età compresa tra i 16 e i 17 anni), appartenenti ad ogni sezione del CSIA, eccetto che nel caso dei Pittori di scenari, i quali si 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 li portavano 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 di materiali, che li portava a doversi rivolgere ad altri fornitori; la già citata (vedi sottocapitolo precedente) assenza della possibilità di controllare lo stato del proprio conto.

Nel caso dovessero acquistare il materiale tramite un magazzino online, gli studenti gradirebbero una navigazione per categorie (da macro a micro). In aggiunta troverebbero utile un sistema di ricerca con filtri, così come un ordine alfabetico del materiale e una fotografia rappresentativa da associare alle 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 acquistare o meno il materiale richiesto all’inizio dell’anno; un avviso quando il credito sul conto si sta per esaurire; avere la possibilità di vedere la giacenza del materiale per regolarsi durante sl’acquisto. È stata invece bocciata l’idea di suddividere i prodotti in base alla sezione dello studente, dopo che ha aver fatto 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 che esista la possibilità di avvisare del mancato ritiro dovuto ad una emergenza.


Analisi - Personas

Definizione pubblici di riferimento (personas)Dopo aver raccolto le informazioni ottenute tramite le varie interviste ed i sondaggi, abbiamo potuto estrapolare 4 personas di utenti tipici: 2 per gli studenti, 1 per il docente, 1 infine per il magazziniere.

Docente: Annibale• Nome: Annibale;

• Sezione: Decoratori 3D (Decoratori/espositori);• Materie: Disegno Tecnico;• Studenti: Secondo anno.• Età: 54 anni;• Livello informatico: medio;

• Sezione: Decoratori 3D (Decoratori/espositori);• Materie: Disegno Tecnico;• Studenti: Secondo anno.• Età: 54 anni;• Livello informatico: medio;

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


Analisi - Personas

Studenti: Virginia e Joaquin• Nome: Virginia;

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

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


Analisi - Personas

• Classe: Secondo anno, Grafica;• Età: 16;• 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.

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

• Nome: Joaquin;


Analisi - Personas

Magazziniere: 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.


Analisi - Workflow fruitori

workflow auspicabile: vedi allegatoworkflow attuale: vedi allegato


Analisi - Workflow software

Organigramma CSIA

contratto distributori addebito

segretariato

saldo bollettino

stampa foglio magazzino

VICE DIRETTORE

stampa fotocopie docenti

addebita sezione

magazziniere

controlla ID studente

controlla materiale

consegna materiale

addebita

ordina materiale

ordina materiale

Sistema carta studenti e bollettino magazzino

ORA

POSS

IBIL

ITÀ

CARTA STUDENTI

-BIBLIOTECA-FOTOCOPIE

-STAMPE (ricarica tramite magazzino)

FOGLIO MAGAZZINO

-BIBLIOTECA-MATERIALE MAGAZZINO-MENSA ?

-RICARICA BOLLETTINO+WEB

-MAGAZZINO MATERIALE-RICARICA CARTA STUDENTI

-RICARICA BOLLETTINO

Sistema carta studenti e bollettino magazzino: vedi allegatoSuddivisione compiti: vedi allegato



4D Client:estratto conto: vedi allegato4D Client: addebito merce: vedi allegato4D Client: addebito merce

Bollettino di consegna

Scansione lettore barcode utente

Conferma account utente

Lettura articolo su bollettino

Veri�ca articolo su catalogo stampato

Scansione barcode articolo da catalogo

Inserimento quantità

Conferma

Salva e chiudi

Iscrizione della data di registrazione dell’ addebito sul bollettino

Archiviazione bollettino

4D Client: estratto conto

Bollettino di consegnao tessera studente

Con�gurazione data 00.00.0000(data estratto conto attuale)

Veri�ca estratto conto

Stampa estratto conto


4D Client:estratto conto: vedi allegato


4D Client: Inserimento nuovo articolo: vedi allegato4D Client:giacenza magazzino: vedi allegato4D Client: giacenza magazzino

Selezione articolo da catalogo

Scansione barcode da articolo

Veri�ca quantità


4D Client: Inserimento nuovo articolo

Funzione nuovo articolo

Inserimento dati nuovo articolo

Salva e chiudi



Analisi - BenchmarkingDefinizione sistema di comparazionePrima di iniziare ad analizzare i vari siti concorrenti, abbiamo scelto un me-todo comune per valutare e comparare le pagine in modo oggettivo.Dato che il lavoro era diviso fra tre persone, questo sistema era decisamen-te importante, e ci avrebbe aiutato anche in un secondo tempo come con-trollo della qualità del nostro lavoro.

Abbiamo scelto queste tre caratteristiche principali:-Grafica-Navigabilità-Contenuti

La grafica è molto importante, poichè determina l’impressione che il sito trasmette nei primi istanti,. Inoltre, i vari siti visitati potrebbero darci spun-ti interessanti da riutilizzare in futuro, nella creazoine dell’interfaccia. La navigazione è altrettanto importante, in quanto soprattutto in un catalogo o negozio online essa si rivela spesso complicata e compromessa.Abbiamo infine i contenuti: solitamente in un online shop sono standard, tuttavia alcune piccole differenze o curiosità potrebbero integrate anche nel nostro progetto.

Le domande da porci per le varie categorie sono:

Grafica:-Organizzazione dei contenuti: L’impaginazione è corretta? È stata mante-nuta una giusta gerarchia? Gli elementi più visibili sono quelli effettivamente più importanti? Etc.Testi: È utilizzato un font adeguato? Il contrasto tra i colori di sfondo e dei caratteri è sufficiente? La giustezza non è troppo ampia, né stretta?Immagini: Com’è la qualità delle immagini, sia tecniche che espressive?Colori: Quali sono gli stili del sito? Come sono i contrasti tra i colori? Esiste una coerenza con il brand? Etc.Griglia: L’impaginazione è stata curata con una griglia? È stato usato un allineamento giusto, o ci sono elementi a sbalzo, che danno visivamente fastidio?

Navigazione:-Menu: Quanti menu ci sono? Come sono disposti? Quanti elementi hanno?-Complessità della procedura d’ordinazione: Quanti click bisogna fare per arrivare alla comanda di un prodotto? Sono necessarie informazioni partico-lari? Etc.

Contenuti:-Descrizione articolo: Ci sono tutte le informazioni? C’è qualcosa in più di 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.


Analisi - BenchmarkingRisultati dell’analisi

Link: http://www.officeprofi.ch/index.cfm?hid=GMPVAXTitolo: Garbani

Grafica: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, è praticamente identica.I test in linea di massima funzionano, sono bastoni leggibili, con una dimen-sione e un colore adatto, anche la tipografia è gestita abbastanza bene, fatta eccezione per la descrizione del materiale, che ha una giustezza troppo ampia.Le immagini sono di buona qualità, e solitamente l’oggetto viene fotografato su fondo bianco.I colori utilizzati sono dati dal brand, ossia il rosso, in varie tonalità, compreso di bianco e nero.

Navigazione:Il menù principale, nel quale cercare e navigare fra i prodotti, è difficilmente riconoscibile, è infatti un input box, mentre noi saremo tentati di cercare fra i menu a sinistra.Oltretutto le categorie di prodotti sono decisamente non evidenti per gli utenti non esperti.Se non altro il procedimento d’ordinazione è abbastanza semplice, scegli la categoria di prodotto, clicchi il prodotto indicato, ne ordini una data quantità, e il 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.


Analisi - BenchmarkingLink: http://www.amicucci.it/Titolo: amicucci

Grafica:La grafica di questo sito invece è molto gradevole e regolata: ha una griglia seguita in maniera ottimale, utilizza delle immagini rappresentative della categoria, 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 scelta che 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 questo ravviva anche l’atmosfera artistica.Le immagini in generale sono sempre di alta qualità, e questo potenzia maggiormente l’effetto d’insieme del sito.

Navigazione:Il tasto dolente è che il sito utilizza due specifici menu di navigazione, in alcune pagine persino tre o quattro, tuttavia solitamente questi sono inseriti in 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 di confermare 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

dettaglio come avviene l’acquisto, e una pagina di contatti, con i recapiti dei proprietari del negozio.I contenuti in generale sono completi, ritengo questo sito una buona base sia di contenuti, sia a livello grafico/di navigazione.


Analisi - BenchmarkingLink: http://www.atre.ch/services/eshop_atre/Scripts/home_ita.aspTitolo: ATRE

Grafica: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 tinte piatte, in altri sfumature, ogni tanto si adottano bordi arrotondati, altre volte no,…Le immagini, fatta eccezione per l’header hanno una buona qualità, il sito ha una prevalenza di colore blu, tuttavia per il menu dei prodotti son stati inseriti 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 la sezione chi siamo, Arredo e Igiene (informazioni su questi due loro servizi), azioni (presenti anche in homepage) e link, il secondo è diviso per le diverse categorie.L’ordine del materiale non è molto complesso, ma richiede comunque un paio di click e un utente.Tuttavia un errore di programmazione del menu dei prodotti rende difficile la navigazione, in quanto almeno su mac, cliccando su un prodotto, non ti porta alla pagina desiderata.

Contenuti:I contenuti sono più o meno tipici, ci sono i codici, i prezzi, la descrizione di base, e almeno una foto.

Oltre a questo come detto prima ci sono molte informazioni complementari, e i contatti in mostra in ogni pagina. Manca però una pagina su quello che riguarda la privacy e la restituzione merci.


Analisi - BenchmarkingLink: http://www.amazon.itTitolo: Amazon

Grafica:Amazon ha una griglia complicata, che si appoggia su una struttura liquida, che personalmente non mi piace, su schermi piccoli immagino che il sito sia 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 grafico parzialmente 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 coordinare l’immagine.

Navigazione:fatta eccezione per alcuni link vaganti sopra l’header, vi è solo un menu, che divide le categorie di prodotti in vendita su amazon.In homepage ci sono prodotti importanti o nuovi, o ancora prodotti che sono in azione, anche questo contribuisce ad una navigazione ottimale.Il processo di inserimento dell’articolo nel carrello è abbastanza veloce, in una serie di click, il processo infatti è ultimato, tuttavia per la comanda vi è un ulteriore procedura di una decina di passaggi, che sono anticipati da un login.Ogni articolo contiene anche i prodotti correlati, e questo fa continuare la visita al sito, come in un cerchio infinito.

Contenuti:I contenuti sono molto completi, infatti sono spesso redatti anche dagli utenti stessi, in una pagina possiamo ad esempio, i prezzi, i termini di spedizione, i

correlati, per i libri ad’esempio c’è una sinossi, i dettagli come la brossura,..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.È quindi un buon riferimento per i contenuti, anche se come detto, è suppor-tato dagli utenti, essi infatti possono aggiungere informazioni, commentare, persino inserire video.


Analisi - BenchmarkingLink: http://www.ebay.it/classicoTitolo: Ebay

Sito di eCommerce più utilizzato al mondo, offre aste ma anche acquisti immediati per moltissime categorie d’oggetti.

Grafica:Le pagine sono ben organizzate (la home è suddivisa in sezioni ben distinte in 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 sinistra un menu che permette di scremare i prodotti trovati in base alle proprie esigenze). 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 sono quasi del tutto assenti, dal momento che si preferisce una grafica semplice e leggibile, che si appoggia sul colore bianco. Viene utilizzata una griglia d’impaginazione, in maniera piuttosto efficace.

Navigazione:Il menu principale permette di navigare nei vari sottositi appartenenti ad Ebay. Esiste un ulteriore menu, composto dalle categorie fra le quali è pos-sibile scegliere a cosa si è interessati. Il menu per scremare i risultati appare sulla 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 semplice click su un pulsante, uno di cui uno per confermare l’acquisto, è possibile completare la transazione se si è già loggati nel sistema.

Contenuti:La descrizione dell’articolo è affidata all’inserzionista, perciò indipendente da eBay, che non è responsabile di descrizioni imprecise o parziali. Ebay

fornisce le categorie, ma non si preoccupa poi di effettuare un controllo su-gli oggetti inseriti, che può essere si trovino nella categoria sbagliata.Ebay fornisce informazioni sia sulla privacy, che sulla restituzione merci, che aiuto in caso di problemi.


Analisi - BenchmarkingLink: http://shop.goethe.de/shop/20081010001/c-4063.htm?tpt=goethe_en&ml=enTitolo: Goethe Institut Grafica: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. Il layout è diviso in tre parti principali, di cui il corpo e il menu sulla destra sono d’interesse, in quanto vediamo al centro le categorie attraverso le quali è possibile navigare e sulla destra viene mostrato il carrello, insieme con le informazioni. Le immagini hanno un principio di standardizzazione che prevede 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 e decorativi 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 quando aggiorniamo la pagina. Si possono aggiungere al carrello gli oggetti con un semplice click.

Contenuti:Le descrizioni dei prodotti sono esaustive. Esistono informazioni sulla resti-tuzione, ma non sulla privacy.


Analisi - BenchmarkingLink: http://www.lmv.gr.ch/shop/it/index.htmTitolo:Materiale didattico dei Grigioni Grafica:La grafica è post-datata, non è adeguata alla grafica odierna nonostante il sito 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 le categorie; 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 ricercare particolari libri. Servono due click per la procedura di acquisto: col primo si aggiunge al carrello, col secondo si conferma il pagamento se si è registrati.

Contenuti:La descrizione degli articoli è assente; come informazioni complementari troviamo istruzioni per broswer non più utilizzati


Analisi - 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 bianco e ciano. I contenuti sono ben organizzati; la griglia imposta la pagina in un grosso blocco, diviso in più punti. Le immagini sono di due tipi: per ogni schermata ed ogni link c’è un ‘personaggio’ raffigurato in diverse situazioni; lo stesso personaggio viene utilizzato come suggeritore per guidare l’utente nella procedura d’acquisto. Immagini vengono utilizzate anche come icone illustrative per le varie categorie, tutte situate nel corpo centrale, dove si svolgono la maggior parte delle operazioni sul sito.

Navigazione:L’utente viene guidato passo passo durante l’acquisto: cliccando sulla categoria si passa a scegliere tutte le caratteristiche dell’oggetto a cui si è interessati (peso, dimensioni, tipo di stampa...), con continui suggerimenti dati 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 per l’acquisto e le condizioni generali sono esposti nel sito, mancano invece i trattamenti per la privacy e sembra non sia possibile restituire i materiali.


Analisi - BenchmarkingLink: http://www.unidformazione.com/materiale-didattico.htmlTitolo: unidformazione

Grafica:- Organizzazione contenuti: interessante la scelta degli articoli con una lista divisa 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 fianco dell’articolo, bene in evidenza.- Immagini: immagine descrittiva dell’articolo (in questo caso il libro) sulla sinistra, 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 gli articoli. 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 descrizione articolo.-Informazioni complementari (privacy, restituzione merci): info mancante-Procedura d’ordinazione: semplice ed efficace.-Homepage: sufficientemente pulita e leggibile. Presenta però molti, troppe voci cliccabili che possono confondere l’utente meno ferrato.


Analisi - BenchmarkingLink: http://www.viking-direkt.ch/Titolo: viking-direkt

Grafica:-Organizzazione contenuti: menù diviso in cinque categorie, il sottomenu è un po saturo di elementi, ma probabilmente non avevano molta scelta vista l’abbondanza di articoli. -Testi: sufficientemente chiari, ottima la scelta del carattere che risulta chiaro e 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 destra più lunga. Navigazione:-Menù: il menu principale competo di logo a sinistra di ogni voce menu è sufficientemente chiaro e funzionale. Presente anche un form ben evidente per cercare gli articoli subito sotto il menù.-Complessità della procedura d’ordinazione: Pagina totale dell’articolo con prezzo, eventuali promozioni, periodo di attesa, comparazione prezzo e descrizione dettagliata articolo.

Contenuti:-Descrizione articolo: buona, pagina organizzata con titolo e descrizione articolo.-Informazioni complementari (privacy, restituzione merci): info restituzione merci mancante-Procedura d’ordinazione: semplice ed efficace, il riepilogo del nostro carrel-lo è in 3 passi.-Homepage: sufficientemente pulita e leggibile


Analisi - BenchmarkingLink: http://www.cplfabbrika.com/Titolo: cplfabbrika

Grafica:-Organizzazione contenuti: buona l’impaginazione con in home-page alcuni articoli 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. Inoltre il testo verde su sfondo bianco risulta poco leggibile.-Griglia: tutti gli elementi risultano bel allineati e non si risultano differenze tra 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” per cercare 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 descrizione articolo.-Informazioni complementari (privacy, restituzione merci): info mancante.-Procedura d’ordinazione: semplice ed efficace, al primo click, ben visibile l’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 al menù decisamente invadente e troppo condensato di link.


Ipotesi funzionalità nuovo sistemaIn seguito verranno presentate brevemente le funzionalità che, dopo aver-ne vagliato la fattibilità, potrebbero essere implementate nel sistema del magazzino online.

LoginOgni utente potrà accedere al sito soltanto dopo aver effettuato una log in utilizzando i dati d’accesso (nome utente e password) forniti dalla segre-teria. Questo sistema aggiunge un livello di sicurezza, in quanto permette il riconoscimento degli utenti e fa sì che nessuna persona esterna al CSIA possa usufruire di questo servizio. Nel caso degli studenti, i dati d’accesso verranno generati automaticamente nel momento in cui uno studente viene immatricolato (in concomitanza alla generazione del numero studente).

Scheda materialeOgni materiale avrà una propria scheda informativa, corredata da foto, de-scrizione, specifiche, lista di prodotti correlati, così come consigli sull’utilizzo. Gli utenti potranno inoltre assegnare una valutazione a ciascun materiale (per esempio tramite la popolare scala a “stelle”).

Ricerca materiale Il materiale verrà organizzato tramite l’uso di macro-categorie (integrate come voci di menu), ma verrà anche aggiunta la possibilità di una ricerca per ordine alfabetico, tramite un box di ricerca per parole chiave, così come una ricerca per filtri. Le macro-categorie equivalgono alle classi presentate nel capitolo successivo (Cap. 10). OrdinazioneAl momento dell’ordinazione, la giacenza sarà visibile per ogni materiale, permettendo allo studente di regolarsi nell’acquisto. Non gli sarà però possi-bile ordinare la quantità totale ancora in stock. Lo studente potrà modificare il proprio ordine prima di inviare la conferma definitiva, in quanto il processo di ordinazione prevede che vi sarà la pos-sibilità di riesaminare il materiale aggiunto al “carrello della spesa virtuale”

e, in caso, correggerne le quantità, così come togliere o aggiungere degli articoli. Ad ogni comanda, verrà inoltre assegnato un numero di ordinazione. Ritiro materiale Il ritiro del materiale avverrà durante gli orari di apertura del magazzino, che corrispondono ai turni comunicati allo studente una volta che avrà effettuato la comanda con successo. Il costo totale del materiale ordinato verrà ad-debitato automaticamente sul conto dello studente soltanto al momento del ritiro. A sua volta automatico, sarà l’aggiornamento della giacenza del relati-vo materiale (evitando così che sia lo stesso magazziniere a dover detrarre ogni volta il materiale appena ordinato). Gli orari di apertura del magazzino saranno anche consultabili in un’apposi-ta sezione del sito. Lo studente avrà un tempo massimo di ritiro (rispettando gli orari di aper-tura) entro il quale si dovr1a presentare al magazzino. In caso di mancato ritiro, dovrà pagare una penale. La situazione in cui uno studente non fosse in grado di ritirare per tempo il materiale, non è ancora stata precisata in maniera definitiva. La strategia attuale prevede che, (solo e soltanto) in caso di emergenza, lo studente abbia la possibilità di annullare il proprio ordine, accedendo al profilo utente. Questo sistema potrebbe però generare abusi, causando una congestione dello spazio nel magazzino, in quanto il magazziniere preparerà a priori il materiale che verrà ritirato in giornata. Un’alternativa potrebbe essere di far pagare in ogni caso la penale, o di addebitare la penale in un primo momento, ma dando allo studente un tempo massimo di (per esempio) 2 giorni per inoltrare un certificato medico alla segreteria, così da giustificare il mancato ritiro. In questo caso, la penale verrebbe stornata. Ad ogni modo, in caso di mancato ritiro, l’ordine scadrebbe automaticamen-te dopo il termine di ritiro, e lo studente dovrebbe rieffettuarlo.

Tutorial: verrà implementato un tuorial per l’uso del sito per agevolare studenti e docenti (dettagli ancora da definire).


Ipotesi indicizzazione materialeTest di validazioneDopo l’analisi principale abbiamo intervistato gli studenti di persona chie-dendogli una ipotetica navigazione in un magazzino online e sono emersi questi fattori riguardo la navigazione: Categorie (dalla macro alla micro); Ordine alfabetico; Ricerca con filtri; Fotografia del materiale.

Nel mentre, abbiamo mostrato una prima bozza della lista dei materiali che si possono trovare in un eventuale magazzino online. Da questa lista, ab-biamo chiesto loro di cancellare quelli che erano incomprensibili e/o vaghi. Grazie a questo siamo riusciti a sviluppare una lista più precisa implemen-tando le tipologie Categorie(dalla macro alla micro) e ordine alfabetico.

Il risultato è il seguente: Carta e Cartoncini CD-Rom e DVD-Rom Colle e Nastri adesivi; Colori Chiave armadietto Matite e Penne Mappette Pennelli Strumenti tecnici per disegno Legno e Metalli Libri Materiale fotografico Strumenti pulizia SSS_AA

Inoltre è stata sistemata anche la lista del materiale utilizzabile unicamente a livello di database.Questa lista sarà seguita unicamente dal magazziniere perchè comprende articoli di sua competenza che lo studente non può acquistare.

In questa lista sono state aggiunte due categorie: Carta e Cartoncini Cartucce CD-Rom e DVD-Rom Colle e Nastri adesivi; Colori Chiave armadietto Materiale Plotter Matite e Penne Mappette Pennelli Strumenti tecnici per disegno Legno e Metalli Libri Materiale fotografico Strumenti pulizia SSS_AA


Ipotesi indicizzazione materialeDurante la lezione di usabilità (22.09.2011) abbiamo realizzato tre ipotesi di Homepage 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 a fiancoB) 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 tutti l’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, con risultato che da A si prende in considerazione il menu laterale, i prezzi e la quantità mentre da C la barra con scritta la sottocategoria.


Conclusione Analisi

Fin dal primo briefing avevamo già le idee abbastanza chiare su quello che avremmo dovuto determinare, ricercare e imparare sulla tematica a noi affidata.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 elementi che non conoscevamo sono usciti allo scoperto già durante il primo giorno di 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 durante l’anno scorso: alcuni gruppi di lavoro erano riusciti a portare avanti il loro operato 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 alcune preziose interviste, come per esempio al vice direttore, ad Antonio Caso e al magazziniere stesso.I compiti venivano divisi in altrettanti gruppi di 2 o 3 persone, a dipendenza della difficoltà e dell’importanza dell’incarico. Ciononostante, operavamo come 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 livello di 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 consapevolezza di aver un quadro completo di ciò che avviene nel magazzino, i suoi punti deboli e i punti forti, e come possiamo valorizzarli.


TITOLO

FLOWCHART - DEFINIZIONE STRUTTURA DEL SITO E NAVIGAZIONE


Introduzione FlowchartCome prima cosa abbiamo iniziato con un brainstorming, finita la fase di analisi non sapevamo ancora che funzionalità, che avevamo ipotizzato, implementare, né il come farlo, con questo primo incontro si son definiti tutti i contenuti in modo primitivo, e il come si sarebbero rappresentati.È stato molto importante, poiché fino alla fase precedente ipotizzavamo tutto in modo astratto, ma, poiché, molti compagni non riuscivano a visualizzare queste applicazioni, è stato fondamentale trovare una coerenza generale.Abbiamo ragionato sui compiti e i bisogni di ogni singolo personaggio del contesto, gli studenti, i docenti, il magazziniere, la segreteria e persino 4d Client, 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 fuori del 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 utenti studenti e docenti.


FunzionalitàCome detto una delle prime cose che abbiam fatto è capire ogni entità del sito che bisogni e che compiti avranno.Ecco in seguito l’elenco delle funzioni che abbiamo studiato:

-Iscrizione: La segreteria assegna ID e conto al nuovo cliente, invia una po-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-co, e inserire la propria e-mail, questa è obbligatoria per determinate funzioni, come la newsletter,..

-Gestione Conto/Versamento: Gli utenti possono visualizzare lo storico degli acquisti, dei versamenti e il saldo del conto (che deve essere sempre visualizzato).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-greteria come ora, gestisce l’inserimento del conto, 4dclient invece registrerà gli storici e le variazioni del conto.

-Login: Accesso tramite ID, Email e Password

-Catalogo: Ordine autonomo, categorie micro macro, ricerca filtri, ordine alfabetico, immagini prodotto, descrizione, consigli d’uso, articoli correlati, disponibilità, prezzo, metti nel carrello/nella wishlist.Il magazziniere in più vede il codice, il materiale riservato, 4dclient invece deve ricordare la giacenza, i movimenti e i prezzi.

-Carrello: Elimina modifica, wishlist, conferma, scegli giorno di ritiro, penale se 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.

-Segnalazione materiale: Segnalazione fra studenti, autosegnalazione, Do-cente segnala materiale agli studenti, lista studenti per classi.

-Riassortimento merce: il magazziniere ha un avviso visuale quando il ma-teriale è in esaurimento(può impostare a che quantitativo il software lo avvisa)

-Ritorno merce: Materiale consegnato rotto, al momento del ritiro il cliente deve controllare, riconsegna materiale inutilizzato, minimo di 10 chf al prezzo singolo, nuovo, non utilizzato, in perfetto stato. Il magazziniere ha una scher-mata per risarcire il conto e aggiungere il materiale al database.

-Riassortimento: il magazziniere ha una schermata con form per ordinare, possibilità di stampa fax per ditte che non hanno email, registrazione ordini.

-Modalità di ritiro: Scelta il giorno del ritiro può passare solo quel giorno. Il magazziniere riceve gli ordini per la giornata, prepara il materiale, vede nu-mero per consegnare materiale a persona giusta.

-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

-Inserimento nuovo articolo: Il docente può segnalare un articolo da ag-giungere al catalogo (fornisce la descrizione), ha un form da compilare per la segnalazione, il magazziniere valuta l’inserimento, ordina, inserisce il nuovo materiale con dati forniti e il prezzo, pagina per inserimento materiale nel database.


Per quel che riguarda il carrello/wi-shlist abbiamo poi approfondito nel seguente modo:

Promemoria: Si tratta di un possi-bile passo precedente al carrello, il promemoria, o anche detto Wishlist (comune in alcuni e-commerce) viene usato per ricordarsi dei prodotti per un acquisto, è possibile dividerlo in liste, ad esempio per materiaCarrello: Il carrello è l’ultimo passo per l’acquisto, gli articoli possono essere inseriti e tolti, o spostati nel promemoria, da qui c’è il processo di conferma.


Use 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 che avevamo definito in precedenza.Questi spiegano i flussi in determinate applicazioni e funzioni fra l’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.


Flowchart

Finita la fase di ideazione dei contenuti e delle funzionalità, abbiamo iniziato a comporre 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 ordinarli dentro una flowchart ordinata in modo logico.Questa tuttavia è cambiata ancora molto nel proseguire del progetto, sebbe-ne le cinque principali voci di menu sono rimaste invariate.

-Catalogo: È la prima voce di menu, in quanto è la funzionalità principale che gli utenti sono interessati a visualizzare appena effettuato l’accesso, questo almeno per la maggior parte delle volte.Si divide in ordine per categorie o alfabetico, e si dirama man mano fino ad arrivare alla scheda finale del prodotto.

-Carrello: Il carrello è diviso in 3 pagine, le due successive sono la conferma dell’ordine.

-Promemoria: Questa sezione ci ha impegnato tanto per la scelta del nome, nella maggior parte degli online-shop viene chiamata promemoria, tuttavia nei test è stato confermato che pochi utenti conoscessero questa parola.Promemoria invece dava l’idea di quello che effettivamente è la funzione, quindi un promemoria di qualcosa da acquistare in seguito.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 trovare in 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, contiene più link a pagine che spiegano e aiutano la navigazione e la permanenza nel sito.

Potete quindi vedere la flowchart finale che abbiamo creato:

Homepage internaRisultati ricerca

Recupero Password

Categoria

Alfabetico

Sotto-categoria Scheda prodotto

Suggerisci prodotto

Filtro per lettera

Profilo

Wishlist

Conferma/ cancella ordine/

scelta giorno di ritiro

Riepilogo/Conferma

Carrello

Indicazioni

Gestioneaccount

Estrattoconto

LOGIN

ACCEDI FORMULARIO DATI ACCESSO

Primo accesso

2 SSS_AA DG - 12.10.2011STUDENTI / DOCENTI

sotto-sotto-categoria

-aggiungi al carrello-aumenta quantità-togli

-modi�ca nome utente-modi�ca password-modi�ca e-mail

(Tutorial, FAQ, Info restituzione merce, Info modalità di ritiro)

-rimuovi prodotto-rimetti il prodotto nella wishlist

Conferma e-mail

FLOWCHART MAGAZZINO ONLINE


Card Sorting

Rimaneva 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 ad una 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 capire come gli utenti associano le parole, o in questo caso le categorie.

Il card sorting è un metodo di classificazione usato spesso nello user-cente-red design per definire architettura informativa o schema di navigazione di un sito. È un metodo empirico che ha una tradizione molto lunga in campi diversi delle scienze sociali.

Per iniziare abbiamo definito delle categorie di prodotti a livello micro, ossia ad esempio carta, matite colorate, colle,…Abbiamo poi preso una decina di tester, di sezioni e età diverse, e li abbiamo fatto associare queste categorie.Nonostante piccole differenze è risultato subito chiaro il fatto che associavano questi in base alle funzionalità, all’uso che avevano di questi prodotti.Abbiamo quindi poi corretto il tiro per arrivare a sei macro categorie: Materiali e 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

PennelliMatiteColoriCarta e cartonciniStrumenti da disegnoMappette e cartellette

Disegno

Strumenti da lavoroLegno e metalliColle e nastri adesivi

Costruzione

Libri culturaliLibri storia dell’arteLibri professionaliAltri libri

Libri

Informatica Strumenti da pulizia

Selezione definitiva


ColoriMatiteColle e nastriStrumenti da disegnoStrumenti da lavoroPennelli

Legno e metalliMappette e cartelleCarta e cartoncini

Informatica

Libri

Strumenti per pulizia

Colle e nastriMappette e cartellettePennelliMatiteColoriCartaStrumenti da disegno

Caso 1: Studente Decoratori

Libri


Mappette e cartelleStrumenti da disegnoColle e nastri adesiviCarta e cartoncini

Informatica

Caso 3: Studente SSS_AA

PennelliColoriMatite

Libri

Legno e metalli

Strumenti da lavoroCarta e cartonciniLegno e metalliColle e nastri adesivi

PennelliStrumenti per puliziaColori

Informatica

Caso 4: Studente di design

Strumenti da disegnoMatiteColori

Libri

Mappette e cartelle

Strumenti da disegnoColoriPennelliMatiteCarta e cartoncini

Strumenti da lavoroLegno e metalliColle e nastri adesiviCartelle e Cartellette


Caso 5: Studente pittori

LibriSelezione definitiva


Cambiamenti della flowchart

Durante le fasi di lavoro son cambiati per lo più i nomi, per quel che riguarda la flowchart del sito, quello che era wishlist è diventato promemoria, stesso vale per indicazioni che è diventato informazioni.A parte questo è cambiato l’ordine del menu, che nella versione finale è cata-logo, profilo, informazioni, promemoria e carrello, per motivi che spiegherò nel capitolo mockup.L’ordine dei prodotti invece è mutato alla scoperta che i prodotti di pulizia non vengono più venduti, e quindi unendo materiale informatico e di fotografia (come è avvenuto più volte nel card sorting), siamo arrivate alle 4 categorie finali.

PennelliMatiteColoriCarta e cartonciniStrumenti da disegnoMappette e cartellette

Disegno

Strumenti da lavoroLegno e metalliColle e nastri adesivi

Costruzione

Libri culturaliLibri storia dell’arteLibri professionaliAltri libri

Libri


WIREFRAME - DEFINIZIONE STRUTTURA DELLE PAGINE


Wireframe di bassa definizione

Prima 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 sul fare delle prime proposte di layout manualmente.Avevo proposto di fare individualmente degli schizzi prima della struttura di 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 da subito disegnato schermate uguali l’uno all’altro, però in realtà con questo approccio abbiamo visto che in alcuni particolari, c’erano versioni discordi, e che quindi potevamo rimettere in discussione tutto, dovevamo rimettere in discussione tutto.

Abbiamo quindi iniziato a fare quello che dovevamo fare, motivare pezzo per pezzo quello che disegnavamo, in modo concreto, mentre fino a prima erano elementi inseriti “di pancia”, senza ragionarci a fondo.Probabilmente senza questa tabula rasa iniziale, saremo arrivati al termine del progetto con un layout che avevamo in realtà scelto in maniera casuale nelle bozze che avevamo fatto in fase di flowchart, e che non rispecchiavano le nostre idee, ecco quindi che si è rivelata un’idea utile e interessante, non dare 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 questa volta erano realmente definite nelle nostre teste, tanto che vedendo le bozze precedenti, quasi non le riconoscevamo.

È stata una fase molto importante, perché nel cuore della progettazione, abbiamo capito che tutto è discutibile, e niente è definito, nemmeno quelle bozze che avevamo elaborato, sarebbero diventate le interfacce finali.


Wireframe di media definizioneEra ora invece di creare una bozza a computer, bozza che si sarebbe poi tramutata nel prototipo interattivo per il primo test d’usabilità.Dopo una lunga ricerca abbiamo optato per il programma Wireframe Sketcher Studio, 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 realizzare le 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 con precisione 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 ben in evidenza-content: con già definito il menu, il reminder,…-footer: con orari d’apertura, Informazioni e link alla sezione informazioni


Test Usabilità - Wireframe di media definizioneUna volta terminati i wireframe ho avuto il compito di fare il prototipo interatti-vo.Ricevuti i png da tutte le schermate le ho mappate con dreamweaver, al fine di ottenere schermate cliccabili, anche se non del tutto interattive.

Si trattava poi di decidere le domande da fare ai vari tester, analizzando il sito e cercando di capire quali possano essere i problemi, o le parti difficili.Infine i task, o compiti, da eseguire per i tester erano:

-Come accederesti al sito?-Acquistare pennelli-Cerca informazioni sul sito-Verifica l’estratto conto-Aggiungi pennelli alla wishlist

Abbiamo analizzato una decina di persone, fra cui un docente, tutte le intervi-ste le trovate in allegato al dossier, nella cartella “Test_usabilità _media”.

Globalmente, le cose che abbiamo riscontrato in questo primo test sono:

-Come accederesti al sito?Non ci son stati grandi problemi, la maggior parte dei tester capiva che dove-va inserire nome,.. e poi cliccare accedi.C’è stato un caso di un utente che vedendo una X in alto a destra ha provato a cliccare, pensando fosse come un lightbox di una gallery che potesse chiu-dere, ma questo è più un errore del prototipo… Nella seconda schermata inoltre non si capiva che bisognava inserire email e la nuova password per conferma, ma pensavano che era ancora per iscriver-si.

-Acquista pennelliQuello che è il passaggio dalla homepage al carrello si è rivelato molto fun-zionale, in pochi secondi, in pochi click arrivavano al prodotto, alcuni magari prendendo la strada più lunga, come ad esempio entrando nella scheda

dell’articolo per mettere nel carrello, ma è un click in più accettabile.C’è stato solo un caso in cui un utente ha confuso il box della wishlist per qualcosa che interagisse con il carrello, ma è una cosa che abbiamo notato maggiormente nel secondo test, e solo li è stato modificato.Il processo del carrello invece è un problema, poiché in alcuni casi pensava-no che la prima schermata, fosse quella finale, fosse già la conferma, e non vedevano il bottone che concludeva la transazione.Problema che infatti si è riscontrato anche nel test successivo, e a cui nella fase di mockup ho poi rimediato.

-Cerca informazioni nel sitoEssendo una pagina statica non ha dato problemi nel test e neanche in quelli successivi, tuttavia alcuni utenti cercavano qualcosa chiamato informazioni e non indicazioni, e infatti è stato modificato.

-Verifica l’estratto contoAnche 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, in quanto altri facevano più fatica a trovarlo sotto profilo.

-Aggiungi i pennelli alla wishlistÈ stato il task più disastroso, pochi tester sapevano e capivano che cosa era-no le wishlist, e soprattutto che c’erano più promemoria.Capivano tuttavia poi come aggiungere dalla scheda prodotto i prodotti alla wishlist, tranne dalla schermata dei promemoria in cui il bottone aggiorna alla lista veniva scambiata per “aggiungi alla lista”, anche questo è stato poi confermato nel secondo test.

In generale questo test ci è servito come prima indicazione a cosa si doveva sistemare, prima della consegna avevamo ancora poco tempo, quel tanto che bastava per fare dei wireframe di alta qualità, che grazie a questo test aveva-mo la consapevolezza di consegnare in modo valido.

video del test in >allegati >test_usabilità_media


Wireframe 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 per tutti.Per i wireframe di alta definizione si è deciso di usare photoshop, perché ov-viamente permette una gestione dei pixel migliori del programma utilizzato in precedenza, 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 nella fase 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 muove nel sito, in seguito abbiamo usato questo prototipo per il test d’usabilità con mascaro.Ancora una volta quindi con dreamweaver, ho mappato le immagini, in modo da collegarle e farle diventare un sito abbastanza funzionante da poter essere usato nei test.


Test Usabilità - Wireframe di alta definizioneUn secondo test di usabilità si è svolto dopo la presentazione dei wireframe a consegna avvenuta, con il prototipo di alta definizione preparato.È stato importante ripetere questo test per vedere, prima di partire con la grafica, se la base, lo scheletro del sito funzionava abbastanza bene da con-tinuare.

Abbiamo ripetuto i task della scorsa volta, ed ecco i risultati:

-Accedi al sito:Come prima gli utenti non si aspettavano una seconda schermata d’accesso, ma capiscono facilmente che si tratta di una convalida

-Cosa vedi in homepage:la prima cosa che vedono sono le 6 aree dei prodotti

-Compra 3 pennelli:Nella maggior parte dei casi i tester prendevano la scorciatoia sotto la macro categoria, andando direttamente in pennelli, in quella schermata capiscono di dover aggiungere le quantità, tuttavia è successo di un utente che ha cliccato l’input di promemoria, per curiosità, o forse perché pensava fosse legato al carrello (infatti abbiamo poi invertito questi due strumenti).Convalidano quindi tutti l’acquisto tranquillamente, ma un utente ha espresso il desiderio di continuare a navigare fra i prodotti, invece di andare nel carrello appena cliccata l’icona.Nella seconda schermata del carrello si aspettavano un riepilogo, come una conferma.Un ultimo test ci ha confermato che gli utenti non pensavano dal wireframe che 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 non ci sono arrivati fino a che non li è stato spiegato.Tutti comunque sono poi riusciti ad aggiungere materiale alla lista, tranne un caso in cui al posto che premere il pulsante “Aggiungi materiale” ha premuto

“aggiorna la lista” pensando fosse un “aggiungi alla lista”, questo è quindi stato rimosso.

-Visualizza l’estratto conto:Non ci son stati particolari problemi, alcuni hanno trovato la pagina partendo da profilo, altri direttamente dal link sull’header

-Come ricaricare il conto:Anche qui non ci sono problemi, alcuni vanno nel link di menu informazioni, altri nel link sull’header “Ricarica il conto”.

Con questo test siamo anche riusciti a sistemare alcuni problemi a cui non avevamo trovato una soluzione nella precedente fase, questo perché non avevamo tempo, e non avevamo soprattutto potuto confermare le nostre ipotesi con un secondo test prima, tuttavia è stato utile fare un altro test, con tester che soprattutto non erano studenti csia.

video del test in >allegati >test_usabilità_alta


TITOLO

MOCKUP - DEFINIZIONE INTERFACCIA GRAFICA


Definizione obbiettivi e caratteristicheFin dal principio il concetto che associavo al magazzino è di creatività, di materiale e di artigianato, questo perché i lavori che vengono svolti con questi prodotti, 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 del 50mo del csia, intitolato “CSIA, 50 anni mille colori”.L’ultima cosa che volevo rendere con il sito è il fatto che doveva comunque rimanere pratico, cosa non facile, associato al concetto di poliedricità del csia.Quello che infatti in fase di mockup mi ha frenato inizialmente era proprio questo, dare un’impronta grafica creativa non è di per sé complicato, ma rendere ciò funzionale, in un sito che non doveva essere complicato ulterior-mente dalla grafica.


Definizione obbiettivi e caratteristiche


MoodboardLe prime moodboard son prese da internet, ne vedete una selezione, sono immagini che potete facilmente abbinare ai concetti che ho trovato in prece-denza, ma meno facilmente al prodotto finale, che ha subito ovviamente molti cambiamenti.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 Alberto Bianda, curatore della grafica dell’evento.

La premessa è che la grafica del csia è curata ma a pezzi, o meglio, ci sono frammenti 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 dei corsi, ci sono ovviamente il sito del csia e del liceo artistico, e infine quello che si sta creando, ossia queste immagini rivolte al 50mo.

L’idea di tutte queste immagini dell’evento è di usare il logo del csia (che diciamo è 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 mostrare disegni o immagini relative all’evento, nel mio caso invece, avrebbe dovuto mostrare probabilmente materiale.


Moodboard


Evoluzione 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 mio concetto.Lo sfondo, che di per sé è un elemento importante, trasmetterà il concetto di creatività 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 e seria, tuttavia scavando la superficie, o entrando nella scuola, si vede il vero cuore, la vera identità del csia.


Layout graficoCome spiegato ho voluto mostrare i due aspetti del csia dividendo sfondo e contenuto, lo sfondo infatti mostra un’immagine creativa, colorata, e il conte-nuto è invece più sobrio e professionale.

Header, content e footer sono con sfondo bianco, con un bordo scuro, per evitare problemi con lo sfondo del sito, e con dei margini fra loro, che danno un ritmo regolare.Nell’header il logo viene usato come nei flyer dei 50 anni, con l’aggiunta della voce “Magazzino Scolastico”.A destra invece c’è il box cerca, in grigio, in modo da non essere troppo inva-sivo (gli utenti sanno comunque dove cercare), i link ricarica il conto e Log out (con iconografie, per darli importanza, e il link stato del conto, dove il saldo attuale ha un bordo verde, che cliccato porta alla pagina estratto conto.

Il menu è costituito da bottoni blu, con una leggera sfumatura, ho scelto il blu come colore primario, per i link, perché è significativo di professionalità, 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 di un prodotto.I due colori oltretutto sono complementari

Come detto il menu ha una leggera sfumatura, che si inverte quando vai so-pra con il mouse, questa sfumatura oltre che a evidenziare, è inserito anche perché aumenta l’usabilità, migliorando l’affordance dei bottoni, oltretutto rende anche il sito più adatto ad un pubblico giovanile, che è quello a cui puntiamo.

Il footer è stato mantenuto come nei wireframe, come anche il font, avevamo scelto l’arial poiché il csia non ha un font utilizzato univocamente, ci sareb-be quello del cantone, il gill sans, che però, in confronto all’arial, non è così leggibile sul web.

Analizzo ora le schermate passo a passo, mostrando quello che ho cambiato.

Login: Nel login ho cambiato poco, in seguito al test di usabilità ho sistemato il testo all’entrata.

Catalogo: nella prima schermata vediamo il menu a tab, la voce selezionata è bianca con una traccia nera, questo per adattarsi allo standard, le altre voci hanno un gradient, come gli altri bottoni.

Le 4 categorie hanno una foto significativa, ho dato particolare importanza alle foto, tant’è che le prime lezioni assieme a Mattia, siamo andati a far delle foto, sia per la prima e seconda schermata, sia per gli articoli del magazzino.Siamo venuti a conoscenza che gli articoli di pulizia non vengono venduti, e così abbiamo tolto quella sezione e unito informatica e fotografia.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 fanno di questi prodotti, infatti vediamo ad esempio la foto per materiale da disegno, è un tavolo con del materiale, contestualizzato in un attività di disegno.

Infine i promemoria, che son stati stravolti dal wireframe, ho capito che una wishlist visuale, che inizia ad essere più usata, sarebbe stata più usata an-che nel nostro contesto, dove abbiamo utenti che lavorano molto con immagi-ni.I prodotti si dividono in liste, e tutto funziona come uno slider, tutte le imma-gini sono chiare, e si illuminano al passaggio del mouse, a questo appare anche una nuvoletta, che riporta le informazioni del prodotto.Cliccando sul nome della lista si va alla pagina di promemoria della lista, cliccando invece su un prodotto c’è un’ancora che porta al prodotto specifico all’interno del promemoria.Sono visualizzati un massimo di 9 prodotti( che immagini sia lo standard di quanto possa esser messo), oltre appare un icona con tre puntini, che vuol dire “c’è dell’altro”.La seconda pagina appare come la prima, e come nel wireframe non ho attuato grandi stravolgimenti, anche in questo caso le foto più significative aiutano l’utente nella scelta.Nella terza pagina, ossia la lista dei prodotto c’è stata una modifica dal test


Layout 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 del conto (cliccabile, poiché gli utenti sembravano cercare anche qui la seguente voce) 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 usare delle frecce al posto che i + per seguire il target, che usa sistema operativo mac.

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 togliere il 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’acquisto definitivo sono stati così modificati.Nel secondo lightbox d’acquisto appare anche un riassunto dell’acquisto, in modo da dare un ultimo avvertimento.Nella pagina principale del carrello ho inoltre aggiunto l’icona accanto al titolo, in questo modo gli utenti fanno facilmente la connessione fra l’icona del menu e questo, e ho aggiunto a destra la frase “per completare l’acquisto clicca su conferma” questo perché in alcuni test pensavano che l’acquisto era già ultimato in questa schermata, e inoltre, nel caso di una lista molto grande, è ovviamente utile.


Test Usabilità MockupTest Usabilità 07.12.2011

Analisi del test passo a passo:Task1: di cosa parla il sitoL’utente ha subito capito che si tratta del sito del magazzino csia, è stato agevolato da una frase introduttiva che ha letto perché evidenziata, magari un utente meno riflessivo, avrebbe letto solamente il logo e il form come ele-menti principali.

Non è un problema, come prima schermata l’importante è far capire che è il sito del magazzino scolastico, e questo è riuscito, la spiegazione delle funzio-nalità verrebbe comunque spiegata in seguito…

Task 2: Accedi al sitoAnche in questo caso l’utente si è preso il tempo di leggere tutto, e ha capito a cosa servivano le due schermate di iscrizione, il task quindi è risolto.

Task3:Acquista un foglio JawaPrima schermata:Come prima cosa l’utente ha visto Disegno, probabilmente aiutato dalla foto in cui erano presenti dei fogli, ha letto quindi le sotto-categorie, e inizialmente non ha visto carta e cartoncini, quindi ha detto, o clicco disegno, o lo cerco (indicando il cerca specifico per il catalogo, quindi anche qui ha compreso ap-pieno la funzionalità), ha dato una rilettura veloce alla pagina e mentre stava per cliccare disegno, ha trovato il link carta e cartoncini.Credo quindi che ha capito la pagina, ha capito che disegno (almeno la scrit-ta) sia un link, carta e cartoncini sia un link più veloce verso il suo obbiettivo e ha capito la differenza fra i due cerca.

Seconda schermata:Arrivato alla seconda schermata ha subito individuato il prodotto, senza pro-blemi, quindi per aggiungerlo al carrello avrebbe inserito la quantità, e cliccato il bottone del carrello, tutto questo processo l’ha completato nell’arco di pochi secondi e senza esitazione.

Terza schermata:Un problema che avevamo riscontrato nei wireframe, l’utente pensa che l’ac-quisto sia già completato, poi in seguito vede il conferma, e capisce che deve ancora confermare l’acquisto.

Per risolvere questo problema, intanto ho colorato di arancione tutti i bottoni 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 “per completare l’acquisto, clicca su conferma”.

Quarta e quinta schermata:Ha capito di dover selezionare il giorno, si è fermato a leggere il riepilogo, e ha in seguito confermato.Tutto come richiesto.

Alla fine si è sorpreso di essere tornato alla pagina iniziale, ma ha subito no-tato il reminder che li conferma l’acquisto.

Task4: aggiungere un prodotto al promemoriaHa guardato subito la pagina promemoria, e con una lista di esempio ha subi-to capito che si trattava delle wishlist.Inizialmente ha visto il bottone sposta nel carrello, ma questo perché non aveva capito il task, poi senza problemi ha visto aggiungi alla lista.In seguito ha specificato “magari si può trovare anche nella lista…” questo magari perché li è venuto in mente solo dopo che nella lista dei prodotti, c’era la possibilità di aggiungere ai promemoria.

Task5: Verifica il tuo saldo attualePrima che finissi di dire il task stava già cliccando su stato del conto nell’he-ader, questo perché penso si noti bene, e magari lo aveva già letto in prece-denza.Quando ha visto poi che non era cliccabile (errore del prototipo!) è andato senza indugio in profilo, li, stava ancora guardando stato del conto, in alto a


Test Usabilità Mockupdestra, poi, capendo che si trattava di un doppione, è tornato nel menu latera-le, dove ha cliccato estratto conto e ha completato il task.È stato importante da un errore del prototipo vedere che comunque è riuscito a cavarsela e a capire che si trovava sotto profilo.

Task6: come ricaricare il conto studenteTask fatto dalla pagina stessa di estratto conto, che ha risolto in breve tempo.

Task7: Trovare una guida del sitoL’utente ha guardato il menu, e a subito cliccato su informazioni

Task8: slideshow dei promemoriaUn problema che riscontravamo anche nei wireframe, l’utente non vede i promemoria come più liste, ma come un’unica lista, questo utente poi proba-bilmente abituato alle wishlist tradizionali, era ancora più attaccato a questa convinzione.Rispetto alla mia idea lui avrebbe cliccato le immagini per andare direttamen-te alla wishlist, probabilmente con un link ancora che avrebbe portato alla posizione 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 per andare al relativo prodotto.Non c’è alcun problema, almeno sono consapevole di dover cambiare questo collegamento.Ha capito invece subito l’icona dei tre puntini.Sinceramente mi ha sorpreso il fatto che ha capito l’icona dei tre puntini, non avendo probabilmente compreso che ci sono più liste, in ogni caso secondo me 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 fatto che ci possono essere più liste…Abbiamo messo in dubbio l’utilità di questa funzione, ma da ex studente la trovo utile proprio per la possibilità di, ad esempio, dividere i promemoria per materia, in modo di sapere quando acquistare,… è una cosa che in modo

grezzo facevamo anche noi, segnandoci le cose sull’agenda,…

Conclusioni: Questo terzo test mi è servito per capire se erano rimaste delle lacune nei wireframe, e cosa più importante, se i cambiamenti proposti da me, erano validi e funzionanti.Penso che la grafica in sé ha aiutato molto a capire quello che è la tematica del sito, e che le modifiche che devo porre, soprattutto nel carrello, siano atte a rendere ancora più ovvia la via agli utenti.Inoltre, visti alcuni problemi ancora con i promemoria penso che ci voglia una giusta guida all’inizio, poiché alcune funzionalità che abbiamo proposto non sono complicate, ma differiscono leggermente dagli standard che gli online shop propongono.

video del test in >allegati >test_usabilità_mockup


Particolarità della proposta graficaLe particolarità che ho pensato riguardano due campi:

-sfondo: lo sfondo come detto è usato come contenitore concettuale di quello che è il csia, o in questo caso quello che è il magazzino scolastico del csia, verranno quindi inserite foto di dettagli di materiale, potete vedere alcuni esempi.Dettagli di tessuti, carta, pigmenti, qualunque texture interessante non deve comunque andare in contrasto con il sito, ad esempio non deve essere troppo chiaro e luminoso, né troppo impegnativo da guardare.

-promemoria: Oltre ad aggiungere il link “cosa sono i promemoria?” nella relativa 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 su google, facebook o youtube, su questa funzione.Questo perché è un’applicazione ancora relativamente nuova, non conosciuta da tutti, e comunque, fatta su misura per questo sito.


TITOLO


Programmazione 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 lo slideshow del promemoria, elemento che non avevo ancora potuto analizzare approfonditamente.

Questo è stato un applicativo complicato da programmare, perché richiedeva l’utilizzo di jquery, in modo abbastanza personalizzato.Il resto del sito è stato relativamente semplice da programmare, anche se per alcune cose è stato comunque richiesto l’uso di javascript e jquery.Ho scelto di inserire lo slideshow nelle varie pagine con un iframe per non dovermi preoccupare in un secondo momento di eventuali aggiornamenti o correzioni 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 delle funzionalità.


Test 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 lo slideshow del promemoria, elemento che non avevo ancora potuto analizzare approfonditamente.



TITOLO


Conclusioni progettoIl sito presentato é una proposta che può risultare pronta alla realizzazione finale, e all’inserimento sul web.È infatti a mio parere una soluzione che permette e agevola lo svolgimento delle funzioni del magazzino, e, seppur ne abbiamo concretizzato solo una parte (la parte del sito che tocca gli utenti) ci sono i presupposti e i concetti che possa favorire anche il lavoro per il magazziniere, e l’amministrazione in generale.

Abbiamo quindi terminato ciò che il mandato richiedeva, anche qualcosa di più, 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 lavoro anche nella parte relativa al magazziniere e amministrazione del sistema, il servizio migliorerà ulteriormente.

Presentazione progetto Magazzino Online Csia

Documents

Transcript of Presentazione progetto Magazzino Online Csia