5-dall analisi al progetto
Post on 11-Feb-2018
216 Views
Preview:
TRANSCRIPT
-
7/23/2019 5-Dall Analisi Al Progetto
1/21
Laurea in ITPS
Progettazione dell'Interazione conL'Utente
Valeria Carofiglioa.a. 2011-12
Dall'analisi alla soluzione diprogetto
StudiareChi sono gli utentiI loro compiti
Descrizionedi utenti ecompiti
Obbiettivo
Metodi
Prodotti
Brainstormdesigns
Valutazione
dei
tasks
Psicologia deglioggettiquotidiani
Coinvolgimentodellutente
Representazione &metafora
Interazionepartecipatoria
Taskscenariowalk-through
Prototipitestabili
Il progetto di interfacce come processo
Slide idea by Saul Greenberg
Progettazionedi sistemiorientati aicompiti
Designpartecipatorio
Progettoorientatoallutente
Metodi diprototipiz-zazione
low fidelity
Prototipi (usa egetta)
Raffinamentodel progetto
Progettodellevideate
Linee-guidainterfacce
Metodi diprototipiz-
zazione highfidelity
Testarelusabilit
Heuristicevaluation
Completamento progetto
VersioniAlpha/beta delsistema
Testsulcampo
-
7/23/2019 5-Dall Analisi Al Progetto
2/21
Progettare
funzionalit: Un buon progetto supporta i task degli utenti
aspetto: Un buon progetto dovrebbe essere piacevole dausare
Progettare anche creativit
Ci
che
esiste
Analisi/
Sintesi
Requisiti
Invenzione
Design
Concept
Prototi
pi
Valutazione
Produrre soluzioni di progettoProdurre soluzioni di progetto
Comprendere e specificare i
requisiti
-
7/23/2019 5-Dall Analisi Al Progetto
3/21
I processi dell'InvenzioneMIMESI: riprodurre, con tecnologie diverse, un prodotto
gi esistente che risolve il problemaIBRIDAZIONE: considerare due o pi prodotti esistenti,fondendone in qualche modo le caratteristiche funzionaliper ottenere un nuovo prodotto
USO DI METAFORE: trasferire nel progetto soluzioniadottate in altri domini applicativi
EVOLUZIONE: introdurre varianti migliorative ad unmodello (un prodotto concorrente, un prodottoesistente,...) noto
COMPOSIZIONE: estrarre una o pi caratteristiche dauno o pi prodotti esistenti
CREAZIONE PURA
PROGETTAZIONE PER MIMESI....(imitazione)
PRODO
TTO
ESISTE
NTE
NUOVO
PRODO
TTO
MIMESI
ES. oggetto esistente!oggetto virtuale identico
UTILE QUANDO LE AZIONICHE L'UTENTE COMPIE
SULL'OGGETTO REALE HANNOUN CORRISPETTIVO
NATURALE SULL'OGGETTOVIRTUALE
-
7/23/2019 5-Dall Analisi Al Progetto
4/21
....MAL RIUSCITA(imitazione)
PRODO
TTO
ESISTE
NTE
NUOVO
PRODO
TTO
MIMESI
ES. oggetto esistente!oggetto virtuale identico
LE AZIONI CHE L'UTENTE
COMPIE SULL'OGGETTOVIRTUALE SONO FORZATE
PRENDERE LA CORNETTA!DOPPIO CLIK
(due azioni completamentediverse)
DOVE SI COLLOCA LACORNETTA DOPO ILDOPPIO CLIK????
PROGETTAZIONE PER IBRIDAZIONE....
IBRIDAZIONE
Prodotti esistenti
Nuovo prodotto
I/O Brush MIT Media
Laboratory (file ryokai-
iobrush.mpeg)
-
7/23/2019 5-Dall Analisi Al Progetto
5/21
PROGETTAZIONE PER METAFORA....
METAFORA
Prodotti esistenti
Nuovo prodotto
DONATORE
RICEVENTE
DESCRIVEREQUALCOSA NEI
TERMINI DIQUALCOSALTRO
PROPRIETA'TRASFERITE DA
DONATOREA
RICEVENTE
ESEMPI:IL DESKTOP
IL MENULA FINESTRA
Il PORTALEIl CESTINO
....
Ricordano oggetti fisiciMa
Presentano anchepropriet caratteristiche
(VANTAGGI )
Rendere pi semplice lapprendimento di nuovisistemi
Aiutare gli utenti a capire meglio il modelloconcettuale sottostante
Rendere le applicazioni pi accessibili a utentidiversi
PROGETTAZIONE PER METAFORA....
-
7/23/2019 5-Dall Analisi Al Progetto
6/21
(SVANTAGGI )Infrangono le regole convenzionali e culturali
Es: Il cestinio sul desktop
Possono limitare il progettista nella concettualizzazionedel problema o nella sua immaginazione per la creazione dinuovi modelli concettuali
Possono essere in conflitto con i principi di design
Possono forzare lutente ad analizzare il sistema e acapirne il funzionamento solo in termini della metaforaparticolare sottostante
I progettisti possono inavvertitamente usare progetticattivi esistenti come metafora (trasferimento negativo)
PROGETTAZIONE PER METAFORA....
(ESEMPIO: IL LINGUAGGIO DELLE ICONE)
PROGETTAZIONE PER METAFORA....
Possono rappresentare:
funzioni da svolgere (es: stampa, cancella)
oggetti concreti o astratti ai quali applicare lefunzioni (es: un file, un paragrafo,)
-
7/23/2019 5-Dall Analisi Al Progetto
7/21
Rispetto alla funzione svolta
Possono essere:
interattive consentono allutente diinviare comandi allapplicazione
non interattive indicano lo stato dellapplicazione
(ESEMPIO: IL LINGUAGGIO DELLEICONE..continua)
Tipi di Icone
completate voi con altri esempi
http://www.guidebookgallery.org/icons/components
-
7/23/2019 5-Dall Analisi Al Progetto
8/21
Esempi di Indicatori di Stato
Sono immagini dinamiche
Possono associareinformazioni quantitativea quelle visive.
Icone Interattive
Le icone interattive definiscono il linguaggio attraverso il qualelUtente pu inviare comandi al Sistema.
Esempi:apri il documento salva cancella stampa
cancella il testo isolato metti in grassetto
colora la forma indicata cancella
Un comando si realizza associando un evento
( click,trascina,) ad un controllo (su un bottone)
-
7/23/2019 5-Dall Analisi Al Progetto
9/21
Criteri nella scelta delle icone
per somiglianza :il disegno associato allicona riproduce in modoschematico la categoria di oggettiche sintende rappresentare
per esempi:il disegno associato allicona riproduce in modoschematico uno degli oggettiappartenenti alla categoria che sintenderappresentare
simbolicheil disegno associato allicona riproduce in modo
simbolico la categoria di oggettiche sintende rappresentare
arbitrarie
Rappresentazione Iconica diFunzionalit
ICONE
-
7/23/2019 5-Dall Analisi Al Progetto
10/21
Rappresentazione Iconica di Oggetti:Oggetti concreti
Componenti del Calcolatore
ICONE
Rappresentazione iconica diOggetti:
Oggetti astratti
Cartella
Filepostscript
File di immagine Paint
File Word
File web
File con Attributi
Elementi dei grafi in Hugin
-
7/23/2019 5-Dall Analisi Al Progetto
11/21
Una Icona Pu Essere laCombinazione di Immagine e Label
Limmagine pu denotare la funzionee la label loggetto a cui la funzione applicata:
O viceversaApri un file-network
Stampa la Sezione Problemi
Una Icona Pu Denotaresia la Funzione che lOggetto
(Cambia la label)
Winzip:programma e file
GS-View:Programma e file
-
7/23/2019 5-Dall Analisi Al Progetto
12/21
Forma Esterna e Colore delle Icone
La forma esterna e il colore delle icone possono avereun significato. Ad esempio, come rappresenteresti:
nelle icone non interattive, lidea di:
pericolo o attenzione!
proibito o errore!
Nelle icone interattive, lidea di:
aiutami!
informami!
Di nuovo: scegli una metafora
PROGETTAZIONE PER EVOLUZIONE
VARIAZIONE
Prodotto esistente Nuovo prodottoLE VARIE VERSIONI
DI UN PRODOTTOCUI SONOAPPORTATEMIGLIORIE
-
7/23/2019 5-Dall Analisi Al Progetto
13/21
PROGETTAZIONE PERCOMPOSIZIONE
COMPOSIZIONE
Prodotti esistenti Nuovo prodotto ADATTARESOLUZIONIGENERALI A
CONTESTI SPECIFICIPER PROBLEMIRICORRENTI
Design pattern
(soluzione progettuale generale a
problema ricorrente)
PROGETTAZIONE PERCOMPOSIZIONE
ESEMPI
-
7/23/2019 5-Dall Analisi Al Progetto
14/21
PROGETTAZIONE PERCOMPOSIZIONE
ESEMPIO
Overview Plus Detail
Use when: You need to present a large amount of content - messages in a mailbox, sections of a
website, frames of a video - that is too big, complex, or dynamic to show in a simple linear form. You
want the user to see the overall structure of the content; you also want the user to traverse the content
at their own pace, in an order of their choosing.
Why: It's an age-old way of dealing with complexity: present a high-level view of what's going on, and
let the user "drill down" from that view into the details as they need to, keeping both levels visible for
quick iteration. Overview Plus Detail breaks up the content into comprehensible pieces, while
simultaneously revealing their interrelationships to the user. [...] the overview can serve as a "You are
here" sign. A user can tell at a glance where they are in the larger context. In the example above, the
scrollbar shows that the visible message is near the end of the mailbox.
How: The overview panel serves as a selectable index or map. Put it on one side of the page. When the
user selects an element in it, details about that element - text, images, data, controls, etc. - appear on
the other side. (Usually the overview panel is at the top or left.). [...] keeping both halves on the same
page or window is key. You could put the details into a separate window, but it's not as effective. You
want the user to be able to browse easily and fluidly through the UI, without waiting or messing around
with windows. In particular, you don't want the user to jump back and forth between two pages (though
it's usually necessary on tiny displays like PDAs; see One-Window Drilldown, which doesn't require
the use of two side-by-side panels).
PROGETTAZIONE PERCOMPOSIZIONE
ESEMPIO: OVERVIEW DETAILS
-
7/23/2019 5-Dall Analisi Al Progetto
15/21
PROGETTAZIONE PERCOMPOSIZIONE
VANTAGGI
- suggeriscono ai progettisti meno esperti le migliori pratiche adottate inambiti applicativi specifici;
- raccolgono, in forma pi o meno organica, lo stato della pratica corrente, ciolesperienza collettiva delle comunit di progetto nei vari ambiti;
- contribuiscono alla formazione di un linguaggio comune, facilitando lacomunicazione fra i professionisti della disciplina;
- riducono gli sprechi di tempo e risorse dovuti alla tentazione, come si dice, direinventare la ruota;
- facilitano lindividuazione delle soluzioni pi adatte al problema specifico,contribuendo cos a ridurre tempi e costi di progettazione e sviluppo;
- contribuiscono alla diffusione di standard di fatto ben sperimentati, conbenefici effetti sullusabilit dei sistemi.
PROGETTAZIONE PERCOMPOSIZIONE
RISORSE DISPONIBILI ONLINE
(dal polillo)
Analizza alcune collezioni dinteraction design pattern disponibili in rete, eidentifica quella che, a tuo
parere, pu essere pi utile nella progettazione di siti web
(puoi iniziare, per esempio, dalla collezione in http://ui-patterns.comcurata da
Anders Toxboe, che contiene anche una vasta raccolta di screenshotinteressanti,
o dai link presenti nella voce interaction design pattern di Wikipedia).Unaltra interessante raccolta la Yahoo! Design Patterns Library in
http://developer.yahoo.com/ypatterns/.
C.Crumlish E.Malone, curatori di questa libreria, lhanno poi sviluppata nel libroDesigning Social Interfaces OReilly, 2009, gi citato, che raccoglie pi di 100
pattern utilizzabili nella progettazione di siti web sociali
-
7/23/2019 5-Dall Analisi Al Progetto
16/21
ESERCIZIO(TRATTO DAL POLILLO)
In rete esistono numerosi interessanti musei storici delleinterfacce utente proposte nei prodotti software
a partire dai primi personal computer (per esempio, in
http://www.guidebookgallery.org,aggiornato fino al
2006).
Esamina uno di questi siti, e raccogli esempi dinterfacceinteressanti, classificandole sulla base dei procedimentiutilizzati nella loro progettazione, descritti in questocapitolo (mimesi, ibridazione, metafora, variazione ecomposizione)
06/04/12 Corso di IUM - 2005-2006 32
Partiamo da un Esempio
Un prodotto Microsoft per produrre immagini
(Paint)
Proviamo a fare il processo inverso:
quale task analysis c'e',
dietro linterfaccia di un prodotto commerciale?
-
7/23/2019 5-Dall Analisi Al Progetto
17/21
06/04/12 Corso di IUM - 2005-2006 33
Main Window di Paint Toolbar in alto:menu di
bottoni: task checonsentono di
manipolare il file-immagine, limmagine osue parti
Toolbar verticale:menudi icone:i task che
consentono dicostruire limmagine
Due Toolbar in basso:
tavolozza dei colori e
Barra di stato
Prendiamo lEsempio di Paint
Menu di bottoni(rappresenta i task che consentonodi manipolare il file-immagine)
Menu di icone(Casella deglistrumenti: rappresentai task che consentonodi costruire limmagine)
Tavolozza dei colori(per colorare
limmagine)eBarra di stato
Ognuno dei task principali organizzato
in una toolbar
-
7/23/2019 5-Dall Analisi Al Progetto
18/21
Organizzazione della Main Toolbar di Paint
File Modifica Visualizza
Nuovo Annulla Casella degli strumenti
Apri F Ripeti Tavolozza
Salva Taglia Barra di stato Salva con nome F Copia Barra degli strumenti di testo
--------- Incolla --------
Anteprima di Stampa F Cancella area selezionata Zoom
Imposta pagina F Seleziona tutto Visualizza bitmap
Stampa F ----------
Copia su operazioni sulla finestra di lavoro
operazioni sul file-immagine Incolla da
Immagine operazioni su parti dellimmagine Capovolgi/ruota
Allunga/inclina
Colori Inverti colori modifica colori Attributi
Cancella immagineoperazioni sulla propriet colori operazioni sullintera immagine
Ogni menu a tendina raggruppa i subtask del task rappresentato nel bottone
Gerarchia dei TaskAssociati alla Main Toolbar di Paint
Se il task semplice, esiste una sostanzialecorrispondenza fra gerarchia dei task e organizzazione
dei control nellinterfaccia
-
7/23/2019 5-Dall Analisi Al Progetto
19/21
06/04/12 Corso di IUM - 2005-2006 37
Oggetti e Funzioni in Paint
Oggetti:
La finestra di lavoro, con i suoi diversi control (part-of)
Il file Limmagine
Le diverse componenti dellimmagine formee testo(part-of)con i loro attributi (posizione, forma, colore, ...)
Funzioni:
visualizza, non visualizzare (per i control nella finestra di lavoro)
crea, apri, salva, stampa, invia (per i file)
modifica orientamento (capovolgi, ruota), forma (allunga,inclina), dimensioni (attributi) o colori dellimmagine
taglia, copia, incolla, cancella (per le componenti dellimmagine)
06/04/12 Corso di IUM - 2005-2006 38
Costruzione dellImmagine
Taglia
Cancella
Ingrandisci
Colora
Funzioni
Disegna per punti
Testo
Linee
Forme geometriche
Oggetti(componenti dellimmagine)
-
7/23/2019 5-Dall Analisi Al Progetto
20/21
Quale Logica, nel Progetto di Paint?
La metafora:il tavolo da disegno
(visibile soprattutto nella toolbar verticale)
I simboli: I task sono rappresentati con icone-oggetto:una gomma per cancellareuna lente dingrandimento per ingrandireun pennello per colorare
lorganizzazione dei simboli nello spazio:somiglianza nel significato!!vicinanza
Gettiamo le Basiper la Realizzazione dellInterfaccia
Il task che Paint permette di eseguire semplice. Tutti i task effettuabili sono rappresentati in ununica finestra di
lavoro. Il raggruppamento dei controlil in Toolbar riflette la logica di
classificazione dei task.
Ma, se il task pi complesso:
Come rappresentare ogni task? Come dividere i vari subtask tra le finestre e i toolbar?
Quali task rendere sempre eseguibili e quali, invece,associare ad una singola finestra?
-
7/23/2019 5-Dall Analisi Al Progetto
21/21
OsservazioneChe succede nelle nuove forme dinterazione?
a. Nei touch-screen
Le icone devono essere pi grandi
Il doppio click e il drag and drop funzionano male Lentrata da keyboard inagevole
a. Nelle applicazioni orientation-independent Il significato delle icone deve essere chiaro indipendentemente
dalla posizione dallaquale si guarda lo schermoa. Nelle applicazioni mobile Gli oggetti grafici devono essere ben visibili in condizioni di
illuminazione diverse
top related