Slides Interaktionsdesign aktiviteter

Interaktionsdesign:
Aktiviteter
Udgangspunkt
Identificer behov
Etabler krav
Generer
design
Evaluer
design
• Fire grundlæggende
gg
aktiviteter i
interaktionsdesign
• Grundbevægelse og
sammenhænge mellem
aktiviteterne
Byg interaktiv
version
Resultat:
Endeligt
produkt
1

Vandfaldsmodellen
• Kaldes også en life-
cycle model
• Hvad er ideen?
• Udviklingsprocessen
gennemløber et antal
faser
• Hver fase har et klart
defineret produkt
• Produktet af en fase
valideres i forhold til
bestemte kriterier
• Produktet af en fase
er udgangspunktet for
den næste fase
2

Spiralmodellen
Important features:
• Risiko analyse
• Prototyping
• Iterativ således ideer
kan evalueres
• Opfordrer til alternativer
• God til store og
komplekse systemer,
men ikke til simple
3

Star Lifecycle modellen
• Foreslået af Hartson
and Hix (1989)
Karakteristika:
• Evaluering er i centrum
• Ingen specifik
rækkefølge af aktiviteter
• Udledt af empiriske
studier af designere af
brugergrænseflader
4

Prototyping
• Brug af prototyper er et • Quick and dirty
andet alternativ til
vandfaldsmodellen
• En prototype realiserer
bestemte egenskaber ved
et system
• Brugerne kan arbejde og
eksperimentere med den
for at illustrere deres krav
• Der findes forskellige
former for prototyper
• De bruges på forskellige
tidspunkter i
udviklingsprocessen
Early implementation without prior analysis
and design. Revised until the users are
satisfied. Revisions become complicated
and maintenance is very expensive.
• Throw-away
Development in order to enquire into and
express requirements. Is often described as
a ”running” requirements specification.
• Design-driven
An implementation of a design which is as
close to the final systems as possible. Often
used for technical experiments, e.g. with the
technical platform.
• Mock-up
A cardboard or similar non-executable
model of the system.
• Evolutionary
A modifiable, running model of part of a
system. Is gradyally developed into the final
version which becomes the system.
5

User-Centered Design
• Tre principper for UCD.
• Tidlig fokus på brugere og opgaver
• Brugerens opgaver og mål er drivkraft
• Brugerens adfærd og brugskontekst studeres
• Brugerens karakteristika beskrives
• Brugeren konsulteres gennem hele processen
• Alle beslutninger tages indenfor brugerens kontekst
• Empirisk måling
• Iterativ design
6

Participatory Design:
UTOPIA-projektet
• UTOPIA project
• Tools for graphical workers for page
make-up and image processing.
• Oppose the deskilling that occurred when
computers were introduced.
• Started describing requirements to a tool,
but that was too abstract for the graphical
workers.
• Made mock-ups to simulate how the
computerized system would work.
• The mock-ups were made of cardboard
boxes, overhead projectors and projector
screens.
• Simulation involved people performing the
operations of the computer.
• A prototype was developed from the
experiences with the mock-ups.
7

Participatory design og
Contextual design
• Den skandinaviske tradition
• Grundide: involvere brugerne
Eksempel: UTOPIA
• Er det en god idé?
• Contextual design er en moderne metode til
involvering af brugerne
8

Dagens program
• Kognition og brugere
• Interaktionsformer
• Fire centrale spørgsmål i interaktionsdesign
• Identificering af behov og etablering af krav
• Generering af design og bygning af version
• + øvelser
9

Interaktionsdesign:
Aktiviteter
Udgangspunkt
Identificer behov
Etabler krav
Generer
design
Evaluer
design
• Fire grundlæggende
gg
aktiviteter i
interaktionsdesign
• Grundbevægelse og
sammenhænge mellem
aktiviteterne
Byg interaktiv
version
Resultat:
Endeligt
produkt
10

Øvelse : design sketching
•What is design sketching?
• A technique from architecture and industrial
design
• Useful for early conceptual design
• Usually created using pen and paper
• Relatively new in relation to interface design
• Sketches are NOT prototypes
11

Sketching indenfor arkitektur
• (Fra “Utzon og den nye tradition”, 2004)
12

Karakteristika ved sketching
• Quick
• Timely
• Inexpensive
• Plentiful
• Clear vocabulary
• Distinct Gesture
• Constrained resolution
• Appropriate degree of refinement
• Ambiguity
• Suggest & explore rather than confirm
• Buxton B. (2004) What Sketches (and Prototypes) Are and Are Not.
http://www.billbuxton.com/
13

Sketches vs. prototyper
Sketches
Prototypes
Invite
Attend
Suggest
Describe
Explore
Refine
Question
Answer
Propose
Test
Provoke
o Resolve
e
Non committal
Specific depiction
• Buxton B. (2004) What Sketches (and Prototypes) Are and Are Not.
http://www.billbuxton.com/
14

Øvelse 1 – sketching
• As a starting gp point, we want you to briefly recap on the idea for
the travel booking website. We would then like you to:
1. Produce a series of design sketches for your design idea showing
different aspects of how you imagine it should look, how it should
work, what it does, and how it is used. A good way to start is to
spend 10 minutes on producing a few of design sketches each, and
then present them to the others.
2. Reflect on the design sketches and discuss which ideas you would
like to move forward with. Then produce a few new sketches that
reflect your combined ideas. Your new sketches should contain a
few statements about the core idea of the envisioned design.
15

Interaktionsdesign:
Aktiviteter
Udgangspunkt
Identificer behov
Etabler krav
Generer
design
Evaluer
design
• Fire grundlæggende
gg
aktiviteter i
interaktionsdesign
• Grundbevægelse og
sammenhænge mellem
aktiviteterne
Byg interaktiv
version
Resultat:
Endeligt
produkt
16

(2) paper prototyping
• What is paper prototyping?
• A method of brainstorming, designing, testing and communicating user
interfaces
• “Paper prototyping is a variation of usability testing where representative users
perform realistic tasks by interacting with a paper version of the interface that is
manipulated by a person “playing computer”, who doesn’t explain how the
interface is intended to work” (Snyder 2003)
• Example process
• Determine some typical tasks that you expect the user to do
• Make screen shots and/or hand-sketched versions of all the windows, menus,
dialog boxes, pages, data, pop-up messages, and so on that are needed to
perform those tasks
• Conduct a usability test: bring in a representative person and ask this user to
attempt the tasks by interacting with the prototype
• Make modifications to the prototype
17

Example paper prototype
18

Making a paper prototype
• Basic materials
19

Backgrounds
20

Removable tape and transparencies
21

Small screen interfaces
22

Interface widgets
• With a little imagination, you can simulate almost anything
Radio
buttons and
checkboxes
Cursors
Tabbed
interface
boxes
Scrolling
23

Drop-down lists
24

Expandable lists
25

Marcus: Principper for visuelt design
• Vanskeligt at lave metode for – alternativ: designprincipper
(eksempel i PRS, side 226-230 + 567-573)
• Marcus har tre overordnede principper
1. Organisér
2. Økonomisér
3. Kommunikér
• For hvert princip i er der konkrete k anvisninger i for design
• Anvisningerne kan bruges til at designe detaljerne i det enkelte
vindue
• En del af principperne udspringer af psykologiske arbejder med
kognitionsteori (blandt andet gestaltlovene)
26

Princip 1: Organisér
• Begreber om dette princip
p
•Konsistens: elementer har samme repræsentation og adfærd overalt
•Skærmlayout: strukturering af elementer forstået som deres placering
på flade eller i rum
•Relationer: visuel sammenhæng eller afstand mellem elementer
•Navigering: lokalt i vindue mellem elementer; hvilken sekvens
• Resultat: kaotisk eller velordnet skærm
27

Konsistens
• Intern konsistens: overhold samme • Virkelighedskonsistens: byg på
regler og konventioner for alle
det som gælder i virkeligheden
elementer i et systems
brugergrænseflade
– enten generelt eller i
systemets virkelighed (f.eks.
multimedie)
• Ekstern konsistens:overhold samme
regler og konventioner som andre
systemer inden for samme platform
(f.eks. Mac) eller kultur (f.eks.
grafikere)
• Ikke-konsistens: overvej
hvornår der ikke skal være
konsistens
28

Skærmlayout
• Strukturering af elementer
forstået som deres placering på
flade eller i rum
Tre strukturer:
• Grupperet struktur
Elementerne er grupperede inden
for vinduet – efter relationer eller
navigering
• Standardstruktur
Alle vinduer har samme struktur
• Gitterstruktur (grid)
To dimensioner, med højst 7+/-2
elementer ee e e i hver dimension
so
29

Relationer
• I forbindelse med organisering har vi behov for at forstå to ting:
• Elementerne og deres egenskaber
• Relationer mellem elementerne
• Her kan teorier fra psykologien hjælpe os
30

Tre brugbarheds-
problemer
• Problem 088:
Trykker på
Rapport-knappen
for at sætte
fanebladene
• Problem 089: Tror
at Skriv-knappens
betydning hænger
sammen med det
menupunkt, der er
valgt i menuen
ovenfor
• Problem 096: Tror
at Rapportknappen
giver
adgang til
patientens journal
Eksempel: Tre problemer –
forklaring?
31

Navigering
• Lokalt mellem elementer i et vindue:
hvilken sekvens
• Eksempel:
Opgave 2, spørgsmål a
Forklarer, hvordan hun vil løse opgaven. Hun
går over i F8-billedet (Statusbilledet) og
trykker på knappen Rapport.
Sætter tiden til det tidspunkt, hvor hun har
taget målingerne. Dette felt er nederst i
vinduet, så hun bevæger sig ned og op i
vinduet. Opdaterer hurtigt værdierne.
• Teknikker:
• Basis: normal læseretning
• Hav et første fokuspunkt for brugerens
opmærksomhed
• Diriger opmærksomhed til vigtige
sekundære eller perifere emner
• Assister i navigering igennem vinduet
32

Princip 2: Økonomisér
• Begreber om dette princip: • Klarhed:
• Enkelhed
• Klarhed
• Forskellighed
• Fremhævelse
• Enkelhed:
• så få elementer som muligt
• kun dem, der er nødvendige for
effektiv kommunikation
Komplekst kontra enkelt
• Ingen tvetydig betydning
af elementer
Tvetydige – Klare
33

Økonomisér (2)
• Forskellighed:
• Fremhævelse: gør de
egenskaber som kan
adskille relevante
elementer fra de
væsentlige elementer
lette at opfatte og
gemmer ikke væsentlig
irrelevante
information
• For lille og for stor • For stærk og en
forskel
forbedret fremhævelse
34

Princip 3: Kommunikér
• Begreber om dette princip: p • Læselighed: Indholdet
• Tydelighed (legibility) er til at forstå, herunder
• Læselighed (readability)
at det er let at
• Typografi
identificere og fortolke
• Symbolisme
• Flere perspektiver
• Farve/tekstur
• Tydelighed: de enkelte tegn,
symboler og grafikelementer
g
adskille
skal være lette at se og • Typografi: få og
forskellige
35

Kommunikér (2)
• Symbolisme: Forståelige symboler
• Flere perspektiver: personer forstår ofte ting forskelligt
For eksempel et primært element samt noget yderligere information
eller forskellige relationer, som et element indgår i
• Farve og tekstur: meget komplekst – nogen retningslinier i artiklen
36

Opsummering:
Principper for visuelt design
1. Organisér: 2. Økonomisér:
• Konsistens:
• Intern konsistens
• Ekstern konsistens
• Virkelighedskonsistens
• Ikke-konsistens
• Skærmlayout:
• Gitterstruktur (grid)
• Standardstruktur
• Grupperet struktur
• Relationer: gestaltlovene
giver forståelse
• Navigering: lokalt mellem
elementer i et vindue
• Enkelhed
• Klarhed
• Forskellighed
•Fremhævelse
3. Kommunikér:
• Tydelighed (legibility)
• Læselighed (readability)
• Typografi
• Symbolisme
• Flere perspektiver
• Farve/tekstur
37

Øvelse 2 - paper prototyping
Now that you have produced a design sketch, we would like you to go into more
detail with its interface design and produce a simple hand-drawn d paper prototype
t
that extends the scope of your design sketch. Using the paper prototype you should
be able to step through complete scenarios of use covering the most central
envisioned functionality of your system.
As a guideline, the paper prototype should include:
1. The design of the most central screens of the system (if any…)
2. The design of central elements on the screens (buttons, widgets etc.)
3. Basic navigational structure between screens
4. Intended user interaction
The paper prototype should be capable of simulating the operation of the whole
system.
At the next seminar, you will be asked to present your paper prototype to the others
using one of their members as “user”.
38