Che materia stai cercando?

Anteprima

ESTRATTO DOCUMENTO

Usabilità Poi qui!

Release 21

Prototyping

Sviluppare proposte alternative

Costruire versioni interattive

=

PROTOTYPING 22

Prototyping

Perché creare prototipi

Per avere un rapido feedback sul design.

• Per sperimentare design alternativi.

• Per eliminare i problemi prima di scrivere

• il codice.

Per tenere il design centrato sull’utente.

• 23

Prototyping

Tecniche

Paper sketches di interfacce utente

• Low-fidelity prototyping

• Uso di prototyping tools

• 24

Prototyping

Tecniche > Paper sketches di interfacce utente

Brainstorming

• Rende visibile il design.

– Permette di confrontare rapidamente idee diverse.

Design “in bozza”.

• Non serve coprire tutti i casi.

– Mostra gli esempi importanti.

Permette di mostrare diverse alternative al cliente.

Vantaggi Svantaggi

Supporta il Non si modifica facilmente.

– –

brainstorming, non Bisogna tradurlo

richiede la definizione di manualmente in forma

dettagli. elettronica.

Non richiede particolari Non interagisce con l’utente.

– –

abilità tecniche. 25

Prototyping

Tecniche > Paper sketches di interfacce utente

26

Prototyping

Tecniche > Paper sketches di interfacce utente

27

Prototyping

Tecniche > Paper sketches di interfacce utente

28

Prototyping

Tecniche > Paper sketches di interfacce utente

29

Prototyping

Tecniche > Paper sketches di interfacce utente

30

Prototyping

Tecniche > Paper sketches di interfacce utente

31

Prototyping

Tecniche > Paper sketches di interfacce utente

32

Prototyping

Fedeltà

La “fedeltà” si riferisce al livello di dettaglio:

Alta fedeltà (Hi-Fi): i prototipi assomigliano al

– prodotto finale.

Bassa fedeltà (Lo-Fi): sketch approssimato con molti

– dettagli mancanti. 33

Prototyping

Fedeltà > Lo-Fi 34

Prototyping

Fedeltà > Lo-Fi > Perché usarli?

I metodi tradizionali richiedono troppo tempo

• sketches -> prototype -> evaluate -> iterate

– sketches -> evaluate -> iterate

Gli sketch fungono da prototipi

• Il progettista interpreta il computer

– Gli altri membri del team osservano e registrano

Non sono richieste competenze tecniche

• Possono partecipare “non programmatori”

– 35

Prototyping

Fedeltà > Lo-Fi > Storyboard

Una “sceneggiatura” schematica dell’interazione:

Omette i dettagli.

– Si concentra sulle interazioni più importanti.

– 36

Prototyping

Fedeltà > Lo-Fi > Storyboard 37

Prototyping

Fedeltà > Lo-Fi > Materiali

Cartoncino bianco grande.

• Schede di cartoncino.

• Nastro adesivo, stick di colla, nastro per correzioni.

• Pennarelli colorati di varia dimensione.

• Lucidi per lavagna luminosa.

• Forbici e taglierine.

• 38

Prototyping

Fedeltà > Lo-Fi > Come fare 1

Fissate un tempo limite (non pensate troppo, costruite il

• prototipo!).

Create un pannello di cartoncino bianco che rappresenta lo

• schermo.

Disegnate i vari elementi della schermata su singole schede

• (qualsiasi cosa si muova, cambi, appaia/scompaia).

Predisponete la risposta del computer ad ogni azione dell’utente

• (es.: preparate tutti i menu aperti).

Fate diverse fotocopie dei vari oggetti.

• 39

Prototyping

Fedeltà > Lo-Fi > Come fare 2

Scegliete gli utenti.

• Definite la tipologia di utenti necessaria.

– Selezionateli mediante un questionario.

– Non usate amici e parenti (il prototipo li deve supportare).

Esercitatevi per evitare errori.

• 40

Prototyping

Fedeltà > Lo-Fi > Come fare 3

Minimo tre persone:

Facilitatore:

• l’unico che parla (da istruzioni, incoraggia commenti, non fa

– commenti).

Computer:

• conosce l’applicazione e la controlla, simulando le risposte.

– non fornisce mai spiegazioni.

Osservatori: prendono note.

Sessione tipica: 1 ora tutto compreso. 41

Prototyping

Fedeltà > Lo-Fi > Valutazione dei risultati

Riordinate le osservazioni:

• Che cosa era importante?

– Ci sono molti problemi correlati?

Riassumete i risultati su carta.

• Effettuate le modifiche al prototipo.

• Ripetete le prove.

• 42

Prototyping

Fedeltà > Lo-Fi > Vantaggi

Richiede solo poche ore.

• Non servono apparecchiature costose.

• Si possono provare molte alternative.

• Quasi tutte le interazioni possono essere simulate.

• 43

Scienze della Comunicazione

Carlo Maria Medaglia Strumenti per la progettazione

44

Wireframe Tool

Si tratta di programmi che aiutano la fase di

progettazione delle interfacce grafiche,

permettendo di disegnare in maniera rapida i

modelli dimostrativi di un’applicazione. Le

schermate vengono create attraverso uno

specifico ‘editor’ che utilizza gli strumenti tipo

per disegnare, integrandoli, solitamente, con

una libreria di oggetti preimpostati e

configurabili. - Denim

E’ un’applicazione scaricabile e utilizzabile off-line.

• Gratuito. Fa parte di un progetto di design per

l’interazione uomo-macchina dell’Università di

Washington.

Basilare. Utile per il primo approccio alla progettazione

• delle applicazioni.

Fondata sull’uso della matita (tipo Paint) con pochi ed

• essenziali strumenti. No library.

Grazie ad un zoom che va per livelli, rende l’idea del

• progetto totale (dalla mappa del sito sino al dettaglio

della pagina).

http://dub.washington.edu:2007/denim/

Funzionalità

Video dimostrativo

Funziona sia come add-on del browser Mozilla

• Firefox sia come applicazione stand-alone.

Gratuito. E’ un progetto open-source.

Ottimo per creare applicazioni per l’ambiente

• Windows e per mockup di siti web.

Si disegna utilizzando alcuni “stencil” da

• trascinare nell’area di disegno.

Permette di esportare i file in PNG, HTML e

• formati di Open Office.

http://www.evolus.vn/Pencil/

Funzionalità

Interfaccia tipo

(Progettando una pagina web)

A pagamento . Il trial è valido per 1 solo progetto con

• max 4 pagine. E’ utilizzabile on-line e, grazie ad un

desktop client, si può lavorare anche off-line.

Facile, intuitivo, veloce.

• Permette a più persone di collaborare su uno stesso

• lavoro in real-time, comunicando attraverso la chat.

E’ dotato di una library (c.d.Mockstore) molto ampia

• composta da template (per android, iphone, ipad, o

anche applicazioni per facebook) e da componenti

(bottoni, barre di menù, form per login, ecc..) sia

coerenti al template scelto sia generici.

http://www.mockflow.com/

Funzionalità

Funzionalità

Interfaccia tipo

(Utilizzando il template dell’iPad)

Video dimostrativo

(Come utilizzare il Mockstore)

Cacoo è un programma di prototyping online.

• Permette di creare diagrammi come mappe di siti,

• wire frames, diagrammi UML e di rete.

Permette di esportare il file in PNG e condividerlo.

• E’ gratuito ed ha un interfaccia user friendly.

• Più utenti possono modificare lo stesso schema in una

• collaborazione simultanea.

Dotato del programma di chat.

• http://cacoo.com/ Funzionalità

Interfaccia tipo

Interfaccia tipo

Video dimostrativo

Software completo a pagamento, sviluppato sulla

• piattaforma Adobe Air.

Strumenti di lavoro organizzati in categorie: ricerca

• facilitata e struttura intuitiva.

Possibilità di aggiungere nuove librerie che estendono i

• controlli esistenti.

Tre principali "frames" interfaccia utente:

• Applicazione Bar: contiene i menù dell’applicazione.

o UI Library: contiene i widget disponibili per l’uso.

o Area mockup.

o http://www.balsamiq.com/ Funzionalità


PAGINE

97

PESO

4.45 MB

AUTORE

Atreyu

PUBBLICATO

+1 anno fa


DESCRIZIONE DISPENSA

Questa lezione fa riferimento al Laboratorio sui nuovi contenuti online tenuto dai prof. Medaglia e Mallozzi, ed è abbinato al corso di Sistemi tecnologici e informazione online. Viene spiegato cosa è un software e il suo sviluppo secondo un modello a più fasi evolutive in cui è importante l'usabilità, cioè l'efficacia, efficienza e soddisfazione con cui specificati utenti possono raggiungere specificati obiettivi in particolari ambienti.


DETTAGLI
Corso di laurea: Corso di laurea magistrale in editoria multimediale e nuove professioni dell'informazione
SSD:
A.A.: 2010-2011

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher Atreyu di informazioni apprese con la frequenza delle lezioni di LABORATORIO SUI NUOVI CONTENUTI ONLINE e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università La Sapienza - Uniroma1 o del prof Medaglia Carlo.

Acquista con carta o conto PayPal

Scarica il file tutte le volte che vuoi

Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato

Recensioni
Ti è piaciuto questo appunto? Valutalo!

Altri appunti di Laboratorio sui nuovi contenuti online

Siti web - Design universale e accessibilità
Dispensa
Usabilità Web e tecniche
Dispensa
Usabilità, tecniche e fasi
Dispensa
Usabilità, contenuti e interazione
Dispensa