5-Dall Analisi Al Progetto

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


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


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


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)


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



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)


(ESEMPIO: IL LINGUAGGIO DELLE ICONE)


Possono rappresentare:

funzioni da svolgere (es: stampa, cancella)

oggetti concreti o astratti ai quali applicare lefunzioni (es: un file, un paragrafo,)


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


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)


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


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


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


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


13/21

PROGETTAZIONE PERCOMPOSIZIONE

COMPOSIZIONE

Prodotti esistenti Nuovo prodotto ADATTARESOLUZIONIGENERALI A

CONTESTI SPECIFICIPER PROBLEMIRICORRENTI

Design pattern

(soluzione progettuale generale a

problema ricorrente)


ESEMPI


14/21


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


ESEMPIO: OVERVIEW DETAILS


15/21


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.


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


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?


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


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


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)


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?


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

Documents

5-Dall Analisi Al Progetto