Slides Interaktionsdesign aktiviteter
Slides Interaktionsdesign aktiviteter
Slides Interaktionsdesign aktiviteter
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>Interaktionsdesign</strong>:<br />
Aktiviteter<br />
Udgangspunkt<br />
Identificer behov<br />
Etabler krav<br />
Generer<br />
design<br />
Evaluer<br />
design<br />
• Fire grundlæggende<br />
gg<br />
<strong>aktiviteter</strong> i<br />
interaktionsdesign<br />
• Grundbevægelse og<br />
sammenhænge mellem<br />
<strong>aktiviteter</strong>ne<br />
Byg interaktiv<br />
version<br />
Resultat:<br />
Endeligt<br />
produkt<br />
1
Vandfaldsmodellen<br />
• Kaldes også en life-<br />
cycle model<br />
• Hvad er ideen?<br />
• Udviklingsprocessen<br />
gennemløber et antal<br />
faser<br />
• Hver fase har et klart<br />
defineret produkt<br />
• Produktet af en fase<br />
valideres i forhold til<br />
bestemte kriterier<br />
• Produktet af en fase<br />
er udgangspunktet for<br />
den næste fase<br />
2
Spiralmodellen<br />
Important features:<br />
• Risiko analyse<br />
• Prototyping<br />
• Iterativ således ideer<br />
kan evalueres<br />
• Opfordrer til alternativer<br />
• God til store og<br />
komplekse systemer,<br />
men ikke til simple<br />
3
Star Lifecycle modellen<br />
• Foreslået af Hartson<br />
and Hix (1989)<br />
Karakteristika:<br />
• Evaluering er i centrum<br />
• Ingen specifik<br />
rækkefølge af <strong>aktiviteter</strong><br />
• Udledt af empiriske<br />
studier af designere af<br />
brugergrænseflader<br />
4
Prototyping<br />
• Brug af prototyper er et • Quick and dirty<br />
andet alternativ til<br />
vandfaldsmodellen<br />
• En prototype realiserer<br />
bestemte egenskaber ved<br />
et system<br />
• Brugerne kan arbejde og<br />
eksperimentere med den<br />
for at illustrere deres krav<br />
• Der findes forskellige<br />
former for prototyper<br />
• De bruges på forskellige<br />
tidspunkter i<br />
udviklingsprocessen<br />
Early implementation without prior analysis<br />
and design. Revised until the users are<br />
satisfied. Revisions become complicated<br />
and maintenance is very expensive.<br />
• Throw-away<br />
Development in order to enquire into and<br />
express requirements. Is often described as<br />
a ”running” requirements specification.<br />
• Design-driven<br />
An implementation of a design which is as<br />
close to the final systems as possible. Often<br />
used for technical experiments, e.g. with the<br />
technical platform.<br />
• Mock-up<br />
A cardboard or similar non-executable<br />
model of the system.<br />
• Evolutionary<br />
A modifiable, running model of part of a<br />
system. Is gradyally developed into the final<br />
version which becomes the system.<br />
5
User-Centered Design<br />
• Tre principper for UCD.<br />
• Tidlig fokus på brugere og opgaver<br />
• Brugerens opgaver og mål er drivkraft<br />
• Brugerens adfærd og brugskontekst studeres<br />
• Brugerens karakteristika beskrives<br />
• Brugeren konsulteres gennem hele processen<br />
• Alle beslutninger tages indenfor brugerens kontekst<br />
• Empirisk måling<br />
• Iterativ design<br />
6
Participatory Design:<br />
UTOPIA-projektet<br />
• UTOPIA project<br />
• Tools for graphical workers for page<br />
make-up and image processing.<br />
• Oppose the deskilling that occurred when<br />
computers were introduced.<br />
• Started describing requirements to a tool,<br />
but that was too abstract for the graphical<br />
workers.<br />
• Made mock-ups to simulate how the<br />
computerized system would work.<br />
• The mock-ups were made of cardboard<br />
boxes, overhead projectors and projector<br />
screens.<br />
• Simulation involved people performing the<br />
operations of the computer.<br />
• A prototype was developed from the<br />
experiences with the mock-ups.<br />
7
Participatory design og<br />
Contextual design<br />
• Den skandinaviske tradition<br />
• Grundide: involvere brugerne<br />
Eksempel: UTOPIA<br />
• Er det en god idé?<br />
• Contextual design er en moderne metode til<br />
involvering af brugerne<br />
8
Dagens program<br />
• Kognition og brugere<br />
• Interaktionsformer<br />
• Fire centrale spørgsmål i interaktionsdesign<br />
• Identificering af behov og etablering af krav<br />
• Generering af design og bygning af version<br />
• + øvelser<br />
9
<strong>Interaktionsdesign</strong>:<br />
Aktiviteter<br />
Udgangspunkt<br />
Identificer behov<br />
Etabler krav<br />
Generer<br />
design<br />
Evaluer<br />
design<br />
• Fire grundlæggende<br />
gg<br />
<strong>aktiviteter</strong> i<br />
interaktionsdesign<br />
• Grundbevægelse og<br />
sammenhænge mellem<br />
<strong>aktiviteter</strong>ne<br />
Byg interaktiv<br />
version<br />
Resultat:<br />
Endeligt<br />
produkt<br />
10
Øvelse : design sketching<br />
•What is design sketching?<br />
• A technique from architecture and industrial<br />
design<br />
• Useful for early conceptual design<br />
• Usually created using pen and paper<br />
• Relatively new in relation to interface design<br />
• Sketches are NOT prototypes<br />
11
Sketching indenfor arkitektur<br />
• (Fra “Utzon og den nye tradition”, 2004)<br />
12
Karakteristika ved sketching<br />
• Quick<br />
• Timely<br />
• Inexpensive<br />
• Plentiful<br />
• Clear vocabulary<br />
• Distinct Gesture<br />
• Constrained resolution<br />
• Appropriate degree of refinement<br />
• Ambiguity<br />
• Suggest & explore rather than confirm<br />
• Buxton B. (2004) What Sketches (and Prototypes) Are and Are Not.<br />
http://www.billbuxton.com/<br />
13
Sketches vs. prototyper<br />
Sketches<br />
Prototypes<br />
Invite<br />
Attend<br />
Suggest<br />
Describe<br />
Explore<br />
Refine<br />
Question<br />
Answer<br />
Propose<br />
Test<br />
Provoke<br />
o Resolve<br />
e<br />
Non committal<br />
Specific depiction<br />
• Buxton B. (2004) What Sketches (and Prototypes) Are and Are Not.<br />
http://www.billbuxton.com/<br />
14
Øvelse 1 – sketching<br />
• As a starting gp point, we want you to briefly recap on the idea for<br />
the travel booking website. We would then like you to:<br />
1. Produce a series of design sketches for your design idea showing<br />
different aspects of how you imagine it should look, how it should<br />
work, what it does, and how it is used. A good way to start is to<br />
spend 10 minutes on producing a few of design sketches each, and<br />
then present them to the others.<br />
2. Reflect on the design sketches and discuss which ideas you would<br />
like to move forward with. Then produce a few new sketches that<br />
reflect your combined ideas. Your new sketches should contain a<br />
few statements about the core idea of the envisioned design.<br />
15
<strong>Interaktionsdesign</strong>:<br />
Aktiviteter<br />
Udgangspunkt<br />
Identificer behov<br />
Etabler krav<br />
Generer<br />
design<br />
Evaluer<br />
design<br />
• Fire grundlæggende<br />
gg<br />
<strong>aktiviteter</strong> i<br />
interaktionsdesign<br />
• Grundbevægelse og<br />
sammenhænge mellem<br />
<strong>aktiviteter</strong>ne<br />
Byg interaktiv<br />
version<br />
Resultat:<br />
Endeligt<br />
produkt<br />
16
(2) paper prototyping<br />
• What is paper prototyping?<br />
• A method of brainstorming, designing, testing and communicating user<br />
interfaces<br />
• “Paper prototyping is a variation of usability testing where representative users<br />
perform realistic tasks by interacting with a paper version of the interface that is<br />
manipulated by a person “playing computer”, who doesn’t explain how the<br />
interface is intended to work” (Snyder 2003)<br />
• Example process<br />
• Determine some typical tasks that you expect the user to do<br />
• Make screen shots and/or hand-sketched versions of all the windows, menus,<br />
dialog boxes, pages, data, pop-up messages, and so on that are needed to<br />
perform those tasks<br />
• Conduct a usability test: bring in a representative person and ask this user to<br />
attempt the tasks by interacting with the prototype<br />
• Make modifications to the prototype<br />
17
Example paper prototype<br />
18
Making a paper prototype<br />
• Basic materials<br />
19
Backgrounds<br />
20
Removable tape and transparencies<br />
21
Small screen interfaces<br />
22
Interface widgets<br />
• With a little imagination, you can simulate almost anything<br />
Radio<br />
buttons and<br />
checkboxes<br />
Cursors<br />
Tabbed<br />
interface<br />
boxes<br />
Scrolling<br />
23
Drop-down lists<br />
24
Expandable lists<br />
25
Marcus: Principper for visuelt design<br />
• Vanskeligt at lave metode for – alternativ: designprincipper<br />
(eksempel i PRS, side 226-230 + 567-573)<br />
• Marcus har tre overordnede principper<br />
1. Organisér<br />
2. Økonomisér<br />
3. Kommunikér<br />
• For hvert princip i er der konkrete k anvisninger i for design<br />
• Anvisningerne kan bruges til at designe detaljerne i det enkelte<br />
vindue<br />
• En del af principperne udspringer af psykologiske arbejder med<br />
kognitionsteori (blandt andet gestaltlovene)<br />
26
Princip 1: Organisér<br />
• Begreber om dette princip<br />
p<br />
•Konsistens: elementer har samme repræsentation og adfærd overalt<br />
•Skærmlayout: strukturering af elementer forstået som deres placering<br />
på flade eller i rum<br />
•Relationer: visuel sammenhæng eller afstand mellem elementer<br />
•Navigering: lokalt i vindue mellem elementer; hvilken sekvens<br />
• Resultat: kaotisk eller velordnet skærm<br />
27
Konsistens<br />
• Intern konsistens: overhold samme • Virkelighedskonsistens: byg på<br />
regler og konventioner for alle<br />
det som gælder i virkeligheden<br />
elementer i et systems<br />
brugergrænseflade<br />
– enten generelt eller i<br />
systemets virkelighed (f.eks.<br />
multimedie)<br />
• Ekstern konsistens:overhold samme<br />
regler og konventioner som andre<br />
systemer inden for samme platform<br />
(f.eks. Mac) eller kultur (f.eks.<br />
grafikere)<br />
• Ikke-konsistens: overvej<br />
hvornår der ikke skal være<br />
konsistens<br />
28
Skærmlayout<br />
• Strukturering af elementer<br />
forstået som deres placering på<br />
flade eller i rum<br />
Tre strukturer:<br />
• Grupperet struktur<br />
Elementerne er grupperede inden<br />
for vinduet – efter relationer eller<br />
navigering<br />
• Standardstruktur<br />
Alle vinduer har samme struktur<br />
• Gitterstruktur (grid)<br />
To dimensioner, med højst 7+/-2<br />
elementer ee e e i hver dimension<br />
so<br />
29
Relationer<br />
• I forbindelse med organisering har vi behov for at forstå to ting:<br />
• Elementerne og deres egenskaber<br />
• Relationer mellem elementerne<br />
• Her kan teorier fra psykologien hjælpe os<br />
30
Tre brugbarheds-<br />
problemer<br />
• Problem 088:<br />
Trykker på<br />
Rapport-knappen<br />
for at sætte<br />
fanebladene<br />
• Problem 089: Tror<br />
at Skriv-knappens<br />
betydning hænger<br />
sammen med det<br />
menupunkt, der er<br />
valgt i menuen<br />
ovenfor<br />
• Problem 096: Tror<br />
at Rapportknappen<br />
giver<br />
adgang til<br />
patientens journal<br />
Eksempel: Tre problemer –<br />
forklaring?<br />
31
Navigering<br />
• Lokalt mellem elementer i et vindue:<br />
hvilken sekvens<br />
• Eksempel:<br />
Opgave 2, spørgsmål a<br />
Forklarer, hvordan hun vil løse opgaven. Hun<br />
går over i F8-billedet (Statusbilledet) og<br />
trykker på knappen Rapport.<br />
Sætter tiden til det tidspunkt, hvor hun har<br />
taget målingerne. Dette felt er nederst i<br />
vinduet, så hun bevæger sig ned og op i<br />
vinduet. Opdaterer hurtigt værdierne.<br />
• Teknikker:<br />
• Basis: normal læseretning<br />
• Hav et første fokuspunkt for brugerens<br />
opmærksomhed<br />
• Diriger opmærksomhed til vigtige<br />
sekundære eller perifere emner<br />
• Assister i navigering igennem vinduet<br />
32
Princip 2: Økonomisér<br />
• Begreber om dette princip: • Klarhed:<br />
• Enkelhed<br />
• Klarhed<br />
• Forskellighed<br />
• Fremhævelse<br />
• Enkelhed:<br />
• så få elementer som muligt<br />
• kun dem, der er nødvendige for<br />
effektiv kommunikation<br />
Komplekst kontra enkelt<br />
• Ingen tvetydig betydning<br />
af elementer<br />
Tvetydige – Klare<br />
33
Økonomisér (2)<br />
• Forskellighed:<br />
• Fremhævelse: gør de<br />
egenskaber som kan<br />
adskille relevante<br />
elementer fra de<br />
væsentlige elementer<br />
lette at opfatte og<br />
gemmer ikke væsentlig<br />
irrelevante<br />
information<br />
• For lille og for stor • For stærk og en<br />
forskel<br />
forbedret fremhævelse<br />
34
Princip 3: Kommunikér<br />
• Begreber om dette princip: p • Læselighed: Indholdet<br />
• Tydelighed (legibility) er til at forstå, herunder<br />
• Læselighed (readability)<br />
at det er let at<br />
• Typografi<br />
identificere og fortolke<br />
• Symbolisme<br />
• Flere perspektiver<br />
• Farve/tekstur<br />
• Tydelighed: de enkelte tegn,<br />
symboler og grafikelementer<br />
g<br />
adskille<br />
skal være lette at se og • Typografi: få og<br />
forskellige<br />
35
Kommunikér (2)<br />
• Symbolisme: Forståelige symboler<br />
• Flere perspektiver: personer forstår ofte ting forskelligt<br />
For eksempel et primært element samt noget yderligere information<br />
eller forskellige relationer, som et element indgår i<br />
• Farve og tekstur: meget komplekst – nogen retningslinier i artiklen<br />
36
Opsummering:<br />
Principper for visuelt design<br />
1. Organisér: 2. Økonomisér:<br />
• Konsistens:<br />
• Intern konsistens<br />
• Ekstern konsistens<br />
• Virkelighedskonsistens<br />
• Ikke-konsistens<br />
• Skærmlayout:<br />
• Gitterstruktur (grid)<br />
• Standardstruktur<br />
• Grupperet struktur<br />
• Relationer: gestaltlovene<br />
giver forståelse<br />
• Navigering: lokalt mellem<br />
elementer i et vindue<br />
• Enkelhed<br />
• Klarhed<br />
• Forskellighed<br />
•Fremhævelse<br />
3. Kommunikér:<br />
• Tydelighed (legibility)<br />
• Læselighed (readability)<br />
• Typografi<br />
• Symbolisme<br />
• Flere perspektiver<br />
• Farve/tekstur<br />
37
Øvelse 2 - paper prototyping<br />
Now that you have produced a design sketch, we would like you to go into more<br />
detail with its interface design and produce a simple hand-drawn d paper prototype<br />
t<br />
that extends the scope of your design sketch. Using the paper prototype you should<br />
be able to step through complete scenarios of use covering the most central<br />
envisioned functionality of your system.<br />
As a guideline, the paper prototype should include:<br />
1. The design of the most central screens of the system (if any…)<br />
2. The design of central elements on the screens (buttons, widgets etc.)<br />
3. Basic navigational structure between screens<br />
4. Intended user interaction<br />
The paper prototype should be capable of simulating the operation of the whole<br />
system.<br />
At the next seminar, you will be asked to present your paper prototype to the others<br />
using one of their members as “user”.<br />
38