INTRODUZIONEALL’INGEGNERIADELLAUSABILITA’

RobertoPolilloUniversitàdegliStudidiMilanoBicocca‐DISCO

HumanComputerInteracHonMeeHngsPula,19seLembre2008

Programma

UnaintroduzioneaiconceQealletecnicheperlaprogeLazione/sviluppodisistemiinteraQviusabili:1.  ProgeLazionecentratasull’utente2.  ModellidiprogeLazioneesviluppo3.  RequisiH4.  ProtoHpi5.  Valutazioni6.  Conclusioni

1.ProgeLazionecentratasull’utente

PROGETTAREvsREALIZZARE

•  PROGETTARE(dallat.proicere,geLareavanH;ininglese:“todesign”)

“immaginare,idearequalcosaestudiareilmododiaLuarla”

ciòcheesisteciòchevogliamocheesista

“Visione”

Bisogni,desideri

ConoscenzadellasituazioneaLuale

“Descrizione”dellasituazionedesiderata

PROGETTAREvsREALIZZARE(segue)

•  REALIZZARE(dallat.res,realtà) “rendererealequalcosa,aLuandolapraHcamente” ciòchevogliamocheesistaciòcheesiste

MetodiestrumenH

“Descrizione”dellasituazionedesiderata

Situazionedesiderata

ProgeLaresistemiusabilirichiedeundras.cocambiamentodiparadigmarispeLoall’approcciotradizionale

L’approcciotradizionale

L’approcciotradizionale

Cichiediamoqualifunzioniilsistemadevefornirealsuoutente,leprogeQamoelerealizziamo

(“SYSTEM‐CENTEREDDESIGN”)

Ilnuovoapproccio

CichiediamoqualisonolecaraLerisHchedell’utente,isuoibisogni,ilcontestod’usoeicasid’usoprincipalidelsistema

(“USER‐CENTEREDDESIGN”)

…eprogeQamoilsistemadiconseguenza,partendocioèdall’interazionecheessodeveavereconilsuoutente.E’unapprocciocompletamentediverso!

“INTERACTION DESIGN”

Ilnuovoapproccio

Esempio:ilmiosistemaHIFI

Telecomandouniversale

ANALISIDELL’UTENTE:io(….)ANALISIDEIBISOGNI:Moltospesso:•  Vedereiltelegiornaledelle20,30•  Vedereiprogrammisatellitarialle21Spesso:•  AscoltareCDaudiomentrelavoroalcomputerAvolte:•  AscoltareCDaudioQuasimai:•  VederevideocasseLe

Esempio:UCDdelmiosistemaHI‐FI(segue)

Esempio:UCDdelmiosistemaHI‐FI(segue)ANALISIDELCONTESTO:

TV

TV

DIVANO

SISTEMAHIFI

MIASCRIVANIA

PRANZO

Esempio:UCDdelmiosistemaHI‐FI(segue)

ANALISIDEICASID’USO:Casid’usoprincipali:•  Accenderelatelevisionesatellitareconuncanaleeunvolume

didefault,eregolarla(daltavolodapranzoedaldivano)•  AccendereilplayerCDecontrollarelariproduzione

(dallascrivania)•  AccendereilplayerDVDecontrollarelariproduzione

(daldivano)•  SpegneretuLoAltricasid’uso:•  …<inrealtànoncisono>

Esempio:ilmiosistemaHI‐FI(segue)ANALISIDELCONTESTO

TV

TV

DIVANO

SISTEMAHIFI

MIASCRIVANIA

PRANZO

Azionetelecomando

LIVELLIDIMATURITÀDELLAPROGETTAZIONE•  PRIMOLIVELLO:

IlprodoLofunziona

•  SECONDOLIVELLO(System‐centereddesign):

IlprodoLoforniscelefunzionirichieste

•  TERZOLIVELLO(User‐centereddesign): IlprodoLoèfaciledaimparareedausare

•  QUARTOLIVELLO:

IlprodoLoè“invisibile”durantel’uso

UnprodoLo“invisibile”

InteracHondesign:qualeinterazione?

UHlizzatore

OggeLointeraQvo

InterazionecogniHva

Interazionefisica

Interdisciplinarietàdell’InteracHonDesign

•  Ergonomia(studial’interazioneconglistrumenHdilavoro)

•  Psicologia(studiaiprocessimentalidell’uomo)•  LinguisHca(nestudiaillinguaggio)•  Sociologia(nestudiaicomportamenHsociali)•  MarkeHng(studiaifenomenidimercato)

•  InformaHca(studialepossibilitàdeicomputer)

L’ingegneriadell’usabilità

LadisciplinachesioccupadeimetodiedelletecnichechepermeLanodispecificare,raggiungereeverificaregliobieQvidiusabilitànellaprogeLazioneesviluppodeisistemiinteraQvi

Variapprocci,maaspeQchiavecomuni:–  modellodisviluppoiteraHvoperprotoHpisuccessivi

–  coinvolgimentodell’utentedurantetuLoilprocesso

–  inserimentodi“usabilityengineer”nelteamdisviluppo

–  definizionedimetricheeeffeLuazionedimisurediusabilità

2.ModellidiprogeLazioneesviluppo

IlmodellotradizionalediprogeLazioneesviluppo

RequisiM

AnalisieprogeQazione

Realizzazione

Test

Rilascio

Modello“acascata”:dopounadecisione,nonsitornaindietro

- Verifica (make the things right) - Convalida (make the right thing)

Modellotradizionale:proecontroPRO:•  fasilogichebendefinite•  ognifaseforniscegliinputallafasesuccessiva•  possibilitàdimeLerecheck‐pointfraunafaseel’altra(“milestones”)•  processo(apparentemente)bencontrollabileCONTRO:•  ilsistemaprodoLosivedesoloallafine,epuònonessere

soddisfacente•  ilmodelloèconceLualmentesbagliato,enonfunziona:

–  nellapraHca,spessosirivelanecessariomodificareledecisionigiàpresenellefasiprecedenH,erifarelavorogiàfaLo(complessitàdelsistema,mutateesigenze,problemievidenziaHdall’uso)

–  nellapraHca,ilprocessovaquindispessofuoricontrollo(allungamentodeitempidisviluppo,aumentodeicosH)

IlmodellocorreLo(iteraHvo)

ProgeQazioneesviluppoperprotoMpisuccessivi

Prototi- pazione

Test Proget- tazione

Inizio

Rilascio

Requisiti

NOTABENE:ancheirequisiHevolvono

duranteilprocesso!

Ilciclocompito‐artefaLo

Artefatto

Compito

Fa nascere Modifica

InpraHca,tuQiprocessicorronoinparallelo,siapureconenfasidiversanellevariefasi:

“UnifiedSopwareDevelopmentProcess”,Jacobson,Booch,Rumbaugh

tempo

RequisiM

ProgeQazione

ProtoMpazione

Test

Rilascio

sforzo

iterazione

1

iterazione

2

iterazione

3

iterazione

4

iterazione

5

iterazione

6

iteratzion

e7

iterazione

8

tempo

RequisiM

ProgeQazione

ProtoMpazione

Test

Rilascio

Progettazione e sviluppo per prototipi successivi

PRO: •  Il prodotto si vede, anche se in modo parziale, fin dall’inizio e

viene perfezionato in modo incrementale •  le scelte effettuate possono essere sperimentate subito e si

possono scartare quelle sbagliate •  è il modello concettualmente corretto per la realizzazione di

sistemi complessi CONTRO: •  difficoltà di stima dei costi a preventivo •  si rischia di far divergere il processo, per troppe richieste di

modifiche •  la fluidità delle specifiche rende più difficile la comunicazione fra

le persone coinvolte

Human‐centreddesignprocesssecondolaISO13407

Identifica le necessità per la progettazione

centrata sull’utente

Comprendi e specifica il

contesto d’uso

Specifica i requisiti dell’utente e

dell’organizzazione Valuta il progetto rispetto ai requisiti

Produci soluzioni di progetto

il sistema soddisfa i requisiti dell’utente e dell’organizzazione

3.RequisiH

Prototi- pazione

Test Proget- tazione

Inizio

Rilascio

Requisiti

ChecosasonoirequisiHdiprodoLo

DallaHno“requisitus”,richiesto

IrequisiHdiprodoLo(ingl.:productrequirements)sonoleproprietàrichiestealprodoLo

•  VengonodisolitoraccolHperiscriLoinundocumentostruLurato,cheforniscel’inputalleaQvitàdiprogeLazione

•  VengonoraccolHaLraversoanalisicondoLeconvariemetodologie

 

LadefinizionedeirequisiHSi articola in tre momenti fondamentali:

Linee guida

Requisiti

ORGANIZZAZIONE (Stesura dei

requisiti)

REVISIONE E APPROVAZIONE

A]vitàdiprogeQazioneesviluppo

ESPLORAZIONE Richieste del committente

Interviste con gli stakeholder

Analisi della concorrenza

[Analisi del prodotto da sostituire]

Appunti e materiale vario

DefinizionedeirequisiH:temiprincipali

•  Analisidell’utente:aqualiutenHèdesHnatoilprodoLo?•  Analisideibisogni:qualisonolenecessitàditaliutenH?•  Analisidelcontesto:qualesaràilcontestod’usodel

prodoLo?•  Analisideicasid’uso:inqualimodiidiversiutenH

interagirannoconilprodoLo?•  Analisidellaconcorrenza:qualisonoipunHdiforzaedi

debolezzarispeLoaiprodoQconcorrenH?

Profilidiapprendimento

ProdoLoorientatoall’utenteabituale

ProdoLoorientatoall’utenteoccasionale

Casid’uso Uncasod’usoèuninsiemediinterazionifinalizzateauno

scopo,fral’utente(opiùutenH)eilprodoLo

Esempioperunsitodie‐commerce:–  Ricerca prodotto –  Ordina prodotto –  Visualizza dati utente –  Inserisci prodotto –  Modifica prodotto

Uncasod’usopuòesserecompostodauninsiemedicompiH(task)ciascunodeiqualisaràasuavoltacompostodauninsiemediazionielementari Casod’uso→compiM→azioni

Diagrammideicasid’uso

Ricerca prodotto

Ordina prodotto

Visualizza dati utente

Inserisci prodotto

Modifica prodotto

Sistema bancario

Utente

Gestore del negozio

Acquista prodotto

Scenario principale: 1.  Il cliente naviga nel catalogo e seleziona gli articoli da acquistare 2.  Il cliente si avvia alla cassa (check out) 3.  Il cliente fornisce le informazioni relative alla spedizione (indirizzo; scelta fra consegna in

giornata o entro 3 giorni) 4.  Il sistema presenta un prospetto con il conto totale, comprese le spese di spedizione 5.  Il cliente riempie un modulo con le informazioni sulla carta di credito 6.  Il sistema autorizza l’acquisto 7.  Il sistema conferma immediatamente la vendita 8.  Il sistema invia al cliente una email di conferma

Scenari alternativi:

3a. Il cliente è abituale: 1. Il sistema visualizza le preferenze memorizzate riguardanti le spedizioni, il

pagamento e la fattura 2. Il cliente può accettera il default o ridefinire le preferenze, in questo caso ritorna

al passo 6 dello scenario principale 6a. Il sistema non autorizza l’acquisto con carta di credito: 1. Il cliente può inserire nuovamente le informazioni e riprovare oppure annullare l’acquisto

Descrizionediuncasod’uso:esempio

Esempio:progeLodiuncontenitoreperacquaminerale

UtenM:•  A.Genericoconsumatorediacquaminerale•  B.TrasportatoridiconfezionimulHpleBisogni:•  TrasportoestoccaggiopiùefficienHContestod’uso:•  A.Acquistoinsupermercatooinnegozio•  A.Conservazioneinfrigorifero•  A.Consumointavola•  B.TrasportoaipunHdivenditainfurgoniCasid’uso:•  A‐B.TrasportomanualediconfezionemulHpla•  A.EstrazionedelcontenitoresingolodallaconfezionemulHpla•  A.Trasportomanualedicontenitoresingolo•  A.Stoccaggio/estrazionenel/dalfrigorifero•  A.Aperturaechiusuradelcontenitore•  A.Mescitanelbicchiere•  A.SchiacciamentoverHcaleperdismissione

Contenitoreperacquaminerale:unapossibileproposta

E.Attaianese, Il controllo dell’usabilità per il design del packaging di prodotti di consumo, VII Congresso della Società Italiana di Ergonomia, Firenze, 2001

DefinizionedeirequisiH:tecnichediesplorazione

• Osservazionisulcampoestudietnografici• Intervisteindividuali• QuesHonari• Focusgroup• SuggerimenHspontaneidegliutenH

• Analisidellaconcorrenza

Analisidellaconcorrenza:obieQvi

•  Individuarele“praHchemigliori”delseLore•  IndividuareipunHdiforzaedidebolezzadeiprodoQconcorrenH

•  CaraLerizzareilnostroprodoLoinrapportoadessi:– checosalocontraddisHngue?– checosaglidàvalore?

RequisiHimpliciHescenarid’uso

Scenarid’uso:storieimmaginariema.pichediusodelsistemadapartedipersonefi:zie,maconcrete,che“me=onoinscena”bisogni,contes.emodalitàd’uso.pichedelsistemadaproge=are(“personae”)

Unoscenariod’usobenfaLo:– dàconcretezzaagliutenH,chealtrimenHrischierebberodiesseresempliciruoliastraQ

– evitacheiprogeQsHsiidenHfichinocongliutenHHpicidelsistema

– puòmeLereinevidenzanumerosirequisiHimpliciH,chealtrimenHsarebberoinespressi

Personae:esempi

Personae:esempi

Scenarid’uso:esempio

ProgeLazionediunsistemadiprenotazioneviawebperunalbergodiprimacategoriadiCatania.

Persona:Luigièuningegneredi35anni,sposato,chelavorapressounasocietàedile.Èabituatoaviaggiarespesso,siainItaliacheall’estero,perlavoroopervacanza,eatraLarsibene.NonèperòmaistatoinSicilia.

Scenariod’uso:LuigideveandareaCataniaperlavoro.DesideraprenotareunacamerainunalbergodiprimacategoriavicinoallafilialediCataniadellasuaazienda,chesitrovaincentro,adunpassodaPiazzadelDuomo.PuòpagaresoloconunacartaAmericanExpressintestataallasuasocietà,perchéquestaèlapoliHcaaziendale.StaràaCataniaduenoQ,forsetre.Preferiscealberghimoderni,edesideraunacameradoppiaperusosingolo.”

Scenarid’uso:esempio(segue)

Loscenariocontienemoltirequisitiimpliciti.Infatti,peraccontentareLuigi,ilsitodovrebbe:

-visualizzaresullamappadiCataniaglialberghidiprimacategoria;

-mostrarelamappainmodocheinomidellestradedelcentrosianobenleggibili(perchéLuigidevetrovarePiazzadelDuomo,enonconoscelacittà);

-mostraredellefotografiedell’albergo(Luigipreferiscealberghimoderni);

-permetterediprenotarecameredoppieadusosingolo; -accettarecarteAmericanExpress; -nonaddebitaresubitol’interoimportodelsoggiorno(Luigidovràprobabilmenteprenotaretrenotti,eriservarsidiliberareinseguitolacameraperlaterzanotte).

Scenarid’uso:suggerimenH

•  Devono“meLereinscena”situazionidiusoHpichedelprodoLo

•  PossonoessererealizzaHcontecnichediverse(tesH/immagini/video)

•  Devonoesserecomplete,indicandolemoHvazionieleconseguenzedell’usodelprodoLonellaparHcolaresituazione

•  NondevonoconteneredeLagliirrilevanHalloscopo•  NontuLelestorieverehannounlietofine!

→ScenariposiHviescenarinegaHvi

Scenarid’uso:esempi

Esempidiscenarid’usoperdevicemobili,realizzaHconsemplicivideo:

hLp://www.youtube.com/watch?v=lJLI4Aw897U

hLp://www.youtube.com/watch?v=htW‐uOAqz8s

Struttura del documento dei requisiti: un esempio

1.Sommario2.GeneralitàObieQvigeneralidelprodoLoUtenHacuièdesHnato,bisogniecontesHd’usoScenarid’usoHpiciPosizionamentocompeHHvo3.Casid’usoDiagrammadeicasid’usoDescrizionedeisingolicasid’usoeanalisideicompiH4.AltrirequisiM<lastruLuradiquestapartedipendedalHpodiprodoLo>5.AppendiciAnalisidellaconcorrenzaGlossario

4.ProtoHpi

Prototi- pazione

Test Proget- tazione

Inizio

Rilascio

Requisiti

Checos’èunprotoHpo

Proto‐typos:“primomodello”

“UnarappresentazionediunprodoLoodiunsistema,odiunasuaparte,che,sebbeneinqualchemodolimitata,puòessereusataascopodivalutazione”(ISO13407)

EsempioPrototipo di cartone di iPhone

Basedellaclassificazione

TipodiprotoMpo CaraQerisMche

Scopo Ruolo ServonoavalutareilruolodelprodoLonellavitadelsuoutente

Look&feel ServonoavalutarelemodalitàdiinterazionefrautenteeprodoLo

Implementazione ServonoavalutareaspeQtecnicirelaHviallaimplementazionedelprodoLo

Modalitàd’uso

StaHci SonorappresentazionistaHchedelprodoLo(es.storyboard,diagrammidivarioHpo)

Dinamici Sonorappresentazionidinamiche(manoninteraQve)delprodoLo,es.:video

InteraQvi PermeLonoaliutenHdieffeLuareproved’usodelprodoLo,anchesesemplificateeapprossimate

Completezza Altafedeltà “assomiglia”intuQgliaspeQalprodoLofinale

Bassafedeltà “assomiglia”allalontanaalprodoLofinale

Orizzontale ForniscetuLelefunzionidelprodoLofinale,ancheseinversionelimitata

VerHcale Forniscesoloalcunefunzioni,realizzateindeLaglio

Durata UsaegeLa Nonvieneconservatodopol’uso

EvoluHvo Realizzatoconlatecnologiafinale,vienefaLoevolverefinoalprodoLofinale

Esempio

Ruolo

Implementazione

look&feel

P1

P2

ProtoHpiinteraQvi

SonoipiùuHliperleaQvitàdiconvalida

ALenzione:

•  l’interaQvitànonpuòesseredescriLa,deveessere“vissuta”…

•  …manonnecessariamentedeveessererealizzatadauncomputer

LatecnicadelmagodiOz

IprotoHpiiniziali

•  SonomoltouHlinelleprimefasidelprogeLo,peresplorareevalutarediversesoluzionipossibili,acosHcontenuH

•  SonomoltospessodelHpo“usaegeLa”,realizzaHacosHmoltobassi,contecnologiesemplici,Hpicamente:– ProtoHpidicarta– ProtoHpiPowerPoint

L’interfacciavienedisegnataabassafedeltàsucartoncinimobili…

ProtoHpidicarta

…chevengonousaHpereffeLuareunasimulazione“manuale”delsistema,conutenH‐cavia…

Utente

“Computer”

Osservatori

ProtoHpodicarta(II)

…dopodichèl’interfacciasicorregge,esiriprova…

Video

•  ProtoHpidicarta: hLp://it.youtube.com/watch?v=GrV2SZuRPv0

•  ProtoHpidicartaescenarid’uso:un’applicazioneperPDAperincontrareamiciall’UniversitàhLp://it.youtube.com/watch?v=c4‐A‐9hGn0U

ProtoHpidicarta

VANTAGGI:

•  Velocitàebassocostodirealizzazione•  PermeLonodiprovarel’interazioneinmodosemplice

•  BassocostodellemodificheSVANTAGGI:

•  L’interazioneèlentaequindiinnaturale,perchésimulata

•  FedeltàmoltobassapergliaspeQdilayoutgrafico

ProtoHpiipertestuali SchermatecliccabilipermeLonodi“navigare”nell’interfaccia,simulandol’interazione

Esempi:PowerPoint,Hypercard(inqualchecaso:HTML,[Flash])

ProtoHpiPowerPoint

•  OgnischermataèunaslidePowerPoint

•  Suognischermatavengonorealizzateareesensibili,conlinkadaltreslide:cliccandosudiesse,l’utente“naviga”nell’interfaccia

VANTAGGI:•  Facilidarealizzareedamodificare

•  GliaspeQgraficipossonoesseredefiniH“abbastanza”beneSVANTAGGI:

•  Modellodiinterazionelimitato(“point&click”)•  LimiHpraHciallacomplessitàdell’ipertesto(oltreun

cenHnaiodislidediventapocogesHbile)

SuggerimenH

E’beneevitarestrumenHdiprotoHpazioneche:–  ponganodifficoltàtecnichenellarealizzazione(devopensarealprotoHpo,nonallostrumento)

– possanoinfluenzare,conleloropeculiarità,ildesigndelsistemaprotoHpato(“questononriescoafarlo,quindicambioildesign”)

Unasoluzionespessomoltovalida:

ProtoHpodicartapoiprotoHpoPowerPoint

Login Benvenuto nel sistema di controllo degli elettrodomestici.

Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password.

NOME UTENTE

PASSWORD

OK

michele

********

HELP

Esempio

Login Benvenuto nel sistema di controllo degli elettrodomestici.

Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password.

NOME UTENTE

PASSWORD

OK

michele

********

HELP

HELP

Elettrodomestici Seleziona uno dei link o delle icone sottostanti per accedere alle funzionalità:

Torna al menù principale

Lavatrice

Frigorifero

Lavastoviglie

Esempio(segue)

Lavatrice

HELP

generale

Programma di lavaggio delicato a bassa temperatura in corso…

Avvia

Esecuzione lavoro (interrotto)

10% completato… (in pausa)

Riprendi

dettagli

Torna al menù elettrodomestici

1

Esempio(segue)

HELP

Lavatrice dettagli generale

Produttore: Ariston

Modello: Lavasciuga 2000

Installata il 18/07/2002.

Driver aggiornato al 16/10/2002.

Ore di funzionamento: 92.

Interventi tecnici: nessuno.

Media interventi: non disponibile.

Torna al menù elettrodomestici

2

Esempio(segue)

Progettazione e sviluppo per prototipi successivi

•  Non basta condividere la filosofia, bisogna specificare quali prototipi, quando e perché, per evitare che il progetto sfugga di mano

•  Bisogna partire da un modello del processo specifico per la classe di sistemi in esame

7

Pubblicazione

6 Redazione

dei contenuti

1 Definizione dei requisiti

3 Web design

Visual design 4

5 Sviluppo del sito

2 Avviamento del progetto

Esempio: una “road-map” per i siti web (da R.Polillo, Plasmare il web, Apogeo, 2006)

Vedi: R.Polillo, Plasmare il web, Apogeo 2006

7

Pubblicazione

6 Redazione

dei contenuti

1 Definizione dei requisiti

3 Web design

Visual design 4

5 Sviluppo del sito

2 Avviamento del progetto

Prototipo di navigazione

Prototipo di comunicazione

Prototipo funzionale

Prototipo editoriale

Sito finale

Esempio: una “road-map” per i siti web

7

Pubblicazione

6 Redazione

dei contenuti

1 Definizione dei requisiti

3 Web design

Visual design 4

5 Sviluppo del sito

2 Avviamento del progetto

Prototipo di navigazione

Prototipo di comunicazione

Prototipo funzionale

Prototipo editoriale

Sito finale

•  Tutti navigabili

•  sottoposti ad attività di verifica e validazione specifiche

•  Consolidamento progressivo

Esempio: una “road-map” per i siti web

7

Pubblicazione

6 Redazione

dei contenuti

1 Definizione dei requisiti

3 Web design

Visual design 4

5 Sviluppo del sito

2 Avviamento del progetto

Prototipo di navigazione

Prototipo di comunicazione

Prototipo funzionale

Prototipo editoriale

Sito finale

•  Wireframe B/N

•  HTML

•  Usa e getta

•  Navigazione, IA, “gabbia logica”

Esempio: una “road-map” per i siti web

7

Pubblicazione

6 Redazione

dei contenuti

1 Definizione dei requisiti

3 Web design

Visual design 4

5 Sviluppo del sito

2 Avviamento del progetto

Prototipo di navigazione

Prototipo di comunicazione

Prototipo funzionale

Prototipo editoriale

Sito finale

•  Grafica finale

•  No contenuti

•  Comunicazione, (accessibilità, usabilità della navigazione)

Esempio: una “road-map” per i siti web

7

Pubblicazione

6 Redazione

dei contenuti

1 Definizione dei requisiti

3 Web design

Visual design 4

5 Sviluppo del sito

2 Avviamento del progetto

Prototipo di navigazione

Prototipo di comunicazione

Prototipo funzionale

Prototipo editoriale

Sito finale

•  Funzioni interattive

•  No contenuti

•  Funzionalità (adeguatezza, usabilità, accessibilità)

Esempio: una “road-map” per i siti web

7

Pubblicazione

6 Redazione

dei contenuti

1 Definizione dei requisiti

3 Web design

Visual design 4

5 Sviluppo del sito

2 Avviamento del progetto

Prototipo di navigazione

Prototipo di comunicazione

Prototipo funzionale

Prototipo editoriale

Sito finale

•  Contenuti

•  Qualità contenuti, accessibilità e usabilità complessiva

Esempio: una “road-map” per i siti web

7

Pubblicazione

6 Redazione

dei contenuti

1 Definizione dei requisiti

3 Web design

Visual design 4

5 Sviluppo del sito

2 Avviamento del progetto

Prototipo di navigazione

Prototipo di comunicazione

Prototipo funzionale

Prototipo editoriale

Sito finale

•  Collaudo finale sul sistema di produzione

Esempio: una “road-map” per i siti web

5.Valutazioni

Prototi- pazione

Test Proget- tazione

Inizio

Rilascio

Requisiti

- Verifica (make the things right) - Convalida (make the right thing)

Tecnichedivalutazionedellausabilità

Sipossonodividereinduegrandicategorie:

•  AnalisidellausabilitàdelsistemaeffeLuaHdaesperH,senzacoinvolgerel’utente(“ispezioni”)–  WalkthroughcogniHvi

–  ValutazionieurisMche–  …

•  ValutazioniconlapartecipazionedegliutenH–  Testdiusabilità–  Interrogazioni–  …

ValutazionibasatesueurisHche

•  IlsistemavieneesaminatoverificandoneconsistemaHcitàlaconformitàaspecifiche“eurisHche”,correlateaprincipielineeguidageneralmenteacceLaH

•  SipreferisconoeurisHchecosHtuitedapochiprincipimoltogenerali,piuLostochelineeguidadeLagliate,didifficileuHlizzo

Esempio:leeurisHchediNielsen

J.Nielsen(1994)haindicatoleseguenH10eurisHche(moltogenerali),pervalutarelausabilitàdiunsistema:

1.  Visibilitàdellostatodelsistema2.  Corrispondenzafrailmondorealeeilsistema3.  LibertàecontrollodapartedegliutenH4.  Consistenzaestandard5.  Prevenzionedeglierrori6.  RiconoscerepiuLostochericordare7.  Flessibilitàedefficienzad’uso8.  DesignminimalistaedesteHco9.  AiutaregliutenHariconoscereglierrori,diagnosHcarliecorreggerli10.  Guidaedocumentazione

(VediJ.Nielsen,HowtoconductaHeurisHcEvaluaHon,inhLp://www.useit.com/papers/heurisHc/heurisHc_evaluaHon.html)

ValutazionibasatesueurisHche:aspeQ

•  Pococostose(“discountusability”)•  Valutatoridiversitendonoatrovareproblemidiversi(un

valutatorenonbasta)

•  TipicamentecisipuòaspeLareche5valutatoriscopranoidueterzideiproblemidiusabilità(Nielsen)

•  IrisultaHsonotantomiglioriquantopiùivalutatorisonoesperH(conoscenzadeiproblemidiusabilitàdellaspecificaapplicazione)

Sullacartafunziona,ma...…poibisognaprovare!

Testdiusabilità UtenHcampioneusanoilsistemainunambientecontrollato,soLoosservazionedapartediesperHdiusabilitàcheraccolgonodaHsenzainterferire,poilianalizzanoetraggonoconclusioni

Osservatore Osservato

Tipiditestdiusabilità

•  TestdicompitoAgliutenHvienechiestodisvolgerecompiHspecifici,chepermeLanodiesercitarelefunzionalitàprincipalidelsistema

•  TestdiscenarioAgliutenHvieneindicatounobieQvodaraggiungereaLraversounaseriedicompiHelementari,senzaindicarliesplicitamente:l’utentedovràquindiimpostareunapropriastrategiadiazioni

Esempio:testdicompitoperunsitodie‐commerce

•  Task1: Registrarsi•  Task2: VerificaresesipuòpagareconVisae

qualèl’importominimoperunordine•  Task3: Verificarequalisonoitempidiconsegna•  Task4: AcquistareunascatoleLada500grdi tonnosoL’olio•  Task5: Cercaresevendonoconfezionidi sciroppodiacero•  Task6: VerificarelostatodegliordinieffeLuaH•  Task7: Verificareseesistonooffertespecialidi pasta

Esempio:testdiscenarioperunsitodie‐commerce

Domaniserahaidueamiciacena,manonhaitempodiandarealsupermercato.Decidiquindidifarelaspesaon‐line,pagandoconlatuaVisa.CollegaHalsitoeordinagliingredienHperunacenaveloceepococostosa,masimpaHca.

Testdiusabilità:logisHcaDuefilosofie:

•  Organizzazioneinformale(bassocosto)

•  Usabilitylab(cosHalH):

>>

Usabilitylab

TesHngroomObservaMon

room

Telecamera

Microfono

Tester

SchermoconSofwareScreenRecording

Organizzazioneinformale

Thinkingaloud

E’unatecnicaperlaqualesichiedeall’utentedisvolgereuncompito,e,contemporaneamente,diesprimereadaltavoceciòacuistapensando:

– checosastacercandodifare– checosavedesulloschermo

– comepensadidoverproseguire– qualidubbiedifficoltàstaprovando

Comesiorganizzauntestdiusabilità

Trefasi:

1.  Preparazionedeltest2. Esecuzionedeltest

3.  AnalisideirisultaMeraccomandazioni

1.Preparazionedeltest

•  DefinizionedegliobieQvieHpodeltest,edellemisuredaraccogliere,es.:–  iltemporichiestodaundeterminatocompito

–  lapercentualedicompiHportaHatermineconsuccesso–  lasoddisfazionedell’utente

•  DefinizionedelnumeroedellaHpologiadegliutenHcampione

•  DefinizionedeicompiHe/oscenarid’uso•  IndividuazionedegliutenHcampione•  Preparazionedeimaterialiedell’ambientediprova>>

Successrate:esempio

Successrate:(9+(4*0.5))/24=46%

successfultrials

parHallysuccessful

totaltrials

Testdiusabilità:quanHutenH?

DipendedagliobieQvideltestedallacomplessitàdelsistema

Check‐upinformalediunsitosemplice:

‐5‐7utenH‐5‐7compiHciascuno(20‐40minuHperciascunutente)

Valutazioneapprofonditadiunsitocomplesso:

‐10‐15utenH‐1–1,5hperciascunutente

Esempio:perunsitoweb,Hpicamente

LaregoladiNielsen(perisiHweb)

•  Dopoilquintoutente,sprechereteilvostrotempoosservandopiùvolteglistessirisultaH,senzaimpararemoltodinuovo

•  Dopoavereosservato5utenH,eliminateiproblemiindividuaH,eprovatedinuovocon5utenH

(JakobNielsen)

•  PeròquestaregolainformaleèstatamoltocriHcata

2.Esecuzionedeltest

•  SpiegazioneagliutenH(compiHscriQ,problemadellostressdaesame,privacy)

•  Conduzionedeltestosservazioneeregistrazionedellorocomportamento,senzainterferire SI’: achecosastaipensando?con.nuaa parlare,tentaancora NO: perchèhaicliccatolì?

•  IntervistaagliutenH(dopo)

3.AnalisideirisultaH

•  AnalisideLagliatadeidaHraccolH

•  IndividuazioneedelencazionedeisingoliproblemiindividuaH,perareefunzionalieperlivellidipriorità Priorità1:IntervenHindispensabilieurgenH

Priorità2:IntervenHnecessarimamenourgenH Priorità3:IntervenHauspicabili

•  Stesuradelleraccomandazionifinali

AnalisirisultaHdiuntestdiusabilità:esempio

(Registrazioneutenteinunsitodie‐commerce)

Raccomandazionifinali:esempio

7.Conclusioni

Uncompletocambiodiparadigmanell’ingegneria

System‐centereddesign

User‐centereddesign

InteracHondesign

Non va considerato ovvio: ha motivazioni e conseguenze “epocali”

MoHvazioni•  Complessitàcrescentedellatecnologiaedellefunzioni

cheessaoffreachilausa•  Pervasivitàe“inevitabilità”dellatecnologianelmondo

dioggi•  Chinonlapuòononlasausareviene“tagliato

fuori”(digitaldivide)•  Necessitàdisemplificarnel’uHlizzoedirenderla

accessibileatuQ(universaldesign)•  Necessitàdicomprendereruoliepossibilitàdella

tecnologiapermigliorarelaqualitàdellavita

Conseguenze

•  SuiprocessidiprogeLazioneesviluppoleproved’usodiventanounacomponentedellea:vitàdiproge=azione

•  Suiteamdisvilupponecessariamentemul.‐disciplinari

•  SullaformazionedeiprogeQsHnonpiùadorientamentoesclusivamentetecnico

polillo@disco.unimib.itwww.rpolillo.it