The Elements of User Experience
Werkgroep 1
1
Week 2-6 Week 7 Week 8&9
College Hoofdstuk(ken) lezen ter voorbereiding
Werkgroep Oefening maken ter voorbereiding
Vragenuurtje (maandag 14 maart) Stuur vragen vooraf even op
Tentamen (donderdag 17 maart) Handgeschreven spiekbrief van één A4 Reader, colleges en werkgroepen
Elke week een gesprek Keuze maken uit de 3 cases Rooster wordt in lesweek 3 bekend gemaakt 1e Gesprek: presentatie, vragen en feedback 2e Gesprek: presentatie, vragen, feedback en beoordeling
2
Beoordeling TTeennttaam e n m e Tentamenn 90 minut D Deeeell 11
en ongeveer 2 0 open, inv meerkeuze ul, e n o n t ( w erpvragen 900dm uit(9 m nou nne))n er,iicn e lluettge OOppeenn reenam e s e ewnem e e rke uuitit rreeaadrekr,gerrokeepuuezznee vvrraaggeenn der, ccoolllleeggees en s w e werrkkggrrooeeppeen en n minimaal 55% van de PPaauuzzpeeunten
e ((3300 m miinnuutteenn))
TTeennttaam meenn Ontwerp 2 gesprekke D Deeeell 11
n voeren feedback v erwerken verz(o(9 r9 g0 d o m n 0 mtwiinenruu p to pna))pier tepen oOO pplo s s in e g n v e pen enn m o o r h e e e me rk t pr n uuitit rreeaader,erkeeuuzzeeovvbrrale ageem der, ccoolllleeggees engen s w weerrkkggrrooeeppeen en minimaal n 55% van de Pa punten
Paauuzzee ((3300 m miinnuutteenn))
Je eindcijfer is gemiddelde van de twee deelbeoordelingen. Voor voldoende moeten beide deelbeoordelingen voldoende zijn. Het tentamen kun je herkansen. Je ontwerp kun je met één gesprek aanvullen. 3
Welke van de volgende 10 applicaties, sites, producten heeft de beste user interface?
nu.nl
wikipedia
PhotoShop
facebook
Notepad++
twitter
Beargumenteer je keuze. Wees specifiek.
Google
pinautomaat
iPhone
Gmail
4
Elke gebruiker heeft een doel binnen context
Usability is de mate waarin gebruikers in hun omgeving met een product hun doelen effectief, efficiënt en naar tevredenheid kunnen bereiken. What makes a great user interface: aesthetics, clarity, consision, consistency, efficiency, familiarity, forgiveness, responsiveness (Dmitry Fadeyev - http://fadeyev.net) 5
UI Specificaties Vastleggen van je ontwerp. Voor jezelf voor overzicht en compleetheid. Voor anderen om te begrijpen wat je bedoelt.
6
SANNE 2003/04
De
uk
Gro
te o r
t
oo Gr
fd
o ho
ht
zic V ge
en
T
Monitor gez
Geen mond
icht
HVA button
Slijtplek
kig
Unif
e n ho e t ch
orm
Re
Co la
n ne e ho
Sc
lig h
t
© Mimi & Henk - 3 december 1971 Amsterdam 7
SANNE 2003/04
De
uk
Gro
te o r
t
oo Gr
fd
o ho
ht
zic V ge
en
T
Monitor gez
Geen mond
icht
HVA button
Slijtplek
kig
Unif
e n ho e t ch
orm
Re
Co la
n ne e ho
Sc
lig h
t
© Mimi & Henk - 3 december 1971 Amsterdam 7
Schermverloopdiagram - Sanne
8
Schermverloopdiagram Overzicht van de applicatie Inzicht in de uitzonderingen Schermen / Statussen / Views Relaties / Navigatie / Acties Schermtypes Legenda Compleet Eenduidig Overdraagbaar Project afhankelijk
9
A visual vocabulary for describing information architecture and interaction design - Jesse James Garrett (Adaptive Path)
http://www.jjg.net/ia/visvocab/ 10
“click”
search
search
search
website
11
rm e h Sc
search
search
search
Ac t ie
“click”
iet z e tj a W
website
je at W
ge br ui ke r
et do 11
search
no results hints
ca i og L /
>1 results
Altern An
search
atieve
two
ord
website
flow
!
“click”
#?
search
“click”
1 result
search
search
0 results
nt u p lis g? s a Be Vra
12
search
search
spell error? no results hints
no results hints
ja
nee
n tatusse S / s w Vie
Horen bij elkaar
spelfout?
search
“click”
#?
1 result
website
>1 results spelfout?
ja
nee search
spell error?
search
“click”
search
search
0 results
13
search
search
spell error? no results hints
no results hints
ja
nee
n tatusse S / s w Vie
Horen bij elkaar
spelfout?
search
“click”
#?
rch a se
1 result
website
>1 results spelfout?
ja
nee search
spell error?
search
“click”
search
search
0 results
14
search
search
spell error? no results hints
no results hints
ja
nee
n tatusse S / s w Vie
Horen bij elkaar
spelfout?
search
“click”
#?
rch a se
1 result
website
>1 results spelfout?
ja
nee search
spell error?
search
“click”
search
search
0 results
15
no results hints
ja
nee
Altern
nee search
spell error?
search
ord
!
t doe
ja
two
er uik br ge
spelfout?
flow
je Wat
An
atieve
website
t ie Ac
>1 results
search
“click”
nt u p lis ch ag ? s Be sear Vra
“click”
#?
Wa tj ez
ca i og L /
1 result
search
0 results
Horen bij elkaar
iet
spell error? no results hints
spelfout?
search
n tatusse S / s w Vie
search
Sche rm
search
16
search
#? >1 results
search
search
website
“click”
1 result
search
search
0 results
“click” (new window)
New
win dow
no results hints
17
search
New
win dow Ma g/k an oo kz o
no results hints
#?
search
“click”
new window
1 result
website
>1 results
search
“click”
search
search
0 results
18
Schermverloopdiagram - STL
19
20
met uitzonderingen en foutafhandeling
Schermverloopdiagram - STL
Schermverloopdiagram - Statussen / Details
niet ingelogd
ingelogd
``!
21
Schermverloopdiagram - Visual flow
22
Schermverloopdiagram - Visual flow
22
Schermverloopdiagram - All-in-1
23
Schermverloopdiagram - Pen en Papier
24
voor Windows
voor Mac
Microsoft Visio
OmniGraffle
www.surfspot.nl
www.omnigroup.com
25
Maak een schermverloopdiagram van HvA Webmail
Op papier in duo’s in 12 minuten. Wellicht meerdere iteraties.
Pages
Stack of Pages
Decision point
An area to identify a group
Relationship
Continuation point
Nb. Calender, Address Book en Options hoeven niet. Nb. De enige keer dat je bij HCI een laptop nodig hebt. 26
Maak een schermverloopdiagram van HvA Webmail
Schets van schermverloop HvA Webmail 27
HvA Webmail
Schermverloopdiagram Sanne 't Hooft 17 november 2010 Versie 3
Log in window
log out
log in
no
login ok?
help
(new window)
home
cancel subscribe subscribe
(new window)
Manage Folders
manage folders "folder link"
help
(new window)
get mail
yes
Subscribe dialog
Help window
main window mail folders
Inbox
Drafts
close
"open message"
Ongewenste mail
Sent
Trash
Search dialog
search
(new modeless window)
yes
mail comple te?
send
no reply / reply all (new window)
previous
Mail message
next
Compose message
forward
(new window)
forward inline (new window)
compose
(new window)
delete
move to...
(next message)
(next message)
attachments (new window)
add add addresses
to,cc,bcc (new window)
attach add
(new window)
page
area / group
Add Addresses dialog
Attachments dialog
continuation point
calender
address book
cancel
Add from address book dialog
options
decision point
connector / action
Versie 2 van schermverloop HvA Webmail 28
Concrete
Completion
Visual Design Surface Interface Design
Navigation Design
Information Design Information Architecture
time
Interaction Design
Skeleton
Functional Content Specification Requirements
Structure
Scope
User Needs Site Objectives Abstract
Strategy
Conception
29
Concrete
Media Design
Completion
Visual Design Surface Interface Design
Navigation Design
Information Design Information Architecture
time
Interaction Design
Skeleton
Functional Content Specification Requirements
UCD
Structure
Scope
User Needs
UCD
Site Objectives Abstract
Strategy
Conception
29
Concrete
Completion
Visual Design Surface Interface Design
Navigation Design
Information Design Information Architecture
time
Interaction Design
Skeleton
Functional Content Specification Requirements
Structure
Scope
User Needs Site Objectives Abstract
Strategy
Conception
29
30
Elke gebruiker heeft een doel binnen context
31
Ontwerp een ‘inlog-systeem’ voor kinderen die nog niet kunnen lezen
Een leerkracht gebruikt een COO-programma (computer ondersteund onderwijs) om kinderen te laten werken met geheugenspelletjes. Van elke sessie worden de resultaten vastgelegd. Hiervoor moet een kind ‘inloggen’ voordat de geheugenspelletjes gespeeld worden. Het gaat er om dat de kinderen zich identificeren en niet om fraude te voorkomen. Na afloop van het spel logt het systeem automatisch uit en kan een volgend kind inloggen. De gebruikers zijn kinderen van 4 en 5 jaar. In een klas zitten maximaal 20 kinderen. Biometrie, chips en webcamherkenning zijn te duur.
32
Ontwerp een ‘inlog-systeem’ voor kinderen die nog niet kunnen lezen
What? Space
What is the space like? Describe it (indoors / outdoors, public / private, quiet / noisy, calm / busy, etc.)
Actors
What are the names and relevant details of the people involved?
Activities
What (in general) are the actors doing and why?
Objects
What physical objects are present? (furniture, PC, papers, remote control, etc.)
Acts
What specific acts are the individuals doing?
Events
Is what you are observing part of a special event?
Goals
What are the actors trying to achieve by carrying out these specific acts?
Feelings
What is the mood of the individuals - how are they feeling?
Sayings
What are the actors saying?
Nb. Wees zo specifiek mogelijk: Welke cartoons kijken ze? Wat voor kleur heeft hun fiets? Uit welk boek leest de juf voor? Wat hebben ze op hun brood? Hoe heet hun moeder? ... bron: UCD, Charlie Muholland , HvA - IAM - P - blok 1
33
Ontwerp een ‘inlog-systeem’ voor kinderen die nog niet kunnen lezen
Maak schetsen / varianten en werk die uit: 1. Maak een schermverloop (navigatie). 2. Maak schermschetsen (details / interactie). 3. Denk na hoe met fouten om te gaan. 4. Werk je ontwerp uit op een flipovervel.
Het gaat er om dat de kinderen zich identificeren en niet om fraude te voorkomen. Na afloop van het spel logt het systeem automatisch uit en kan een volgend kind inloggen De gebruikers zijn kinderen van 4 en 5 jaar. In een klas zitten maximaal 20 kinderen. Nb. Benut de context van de kinderen en/of wellicht ook al de context van de spelletjes die volgen. 34
Elke gebruiker heeft een doel binnen context
35
Voor volgende week lezen
Hoofdstuk 1 The elements of User Exerience
Voor volgende week lezen
Hoofdstuk 2 Organizing the Interface Hoofdstuk 3 Getting There
36
