????? 1 : interaction design basic ??????????????????????????

1
????? 1 interaction design basic???????????????
???????????
2
??????????????????????????

• design
• the design process
• users
• scenarios
• navigation
• iteration and prototypes

3
Design?

• ???????????????????????????????????????????
• goals - purpose
• constraints
• trade-offs

4
for HumanComputer Interaction

• understand computers
• understand people
• and their interaction

5
To err is human

• accident reports ..
• industrial accident, hospital mistake
• blames human error
• human error is normal
• ??????????????????????????
• so design for it!

6
????????????????
what iswanted
analysis
design
implement and deploy
prototype
7
???????

• requirements
• Analysis
• design
• iteration and prototyping
• implementation and deployment

8
????????????????????????????????

• limited time
• usability?
• a perfect system is badly designed
• too good ? too much effort in design

?
?
9
user focus

• ?????????? user
• ????????? user
• ????????????

10
???????????????

• ??????????????
• ?????????????????????????????????????????????
• ?????? user
• ????????????
• ????????????

11
cultural probes

• ??????????????????
• sometimes hard
• ??????
• ???????
• ???????????????
• ????????????
• ???????? user ???????????????????????????????

12
navigation design

• local structure single screen
• global structure whole site

13
?????

• widget choice
• menus, buttons etc.
• screen design
• application navigation design
• environment
• other apps, O/S

14
the web

• widget choice
• screen design
• navigation design
• environment

• elements and tags
• lta href...gt
• page design
• site structure
• the web, browser,external links

15
physical devices

• widget choice
• screen design
• navigation design
• environment

• controls
• buttons, knobs, dials
• physical layout
• modes of device
• the real world

16
think about structure

• local
• looking from this screen out
• global
• structure of site, movement between screens

17
four golden rules

• knowing where you are
• knowing what you can do
• knowing where you are going
• or what will happen
• knowing where youve been
• or what youve done

18
where you are

• shows path through web site hierarchy

19
global

• between screens
• within the application

20
hierarchical diagrams
21
hierarchical diagrams ctd.

• ????????????????????????
• ????????????????????????
• ???????????????????????????????

22
navigating hierarchies

• ?????????????????????????????????
• ??????????????????????????????????????????????
• ??????????????????????????????????????????????????
  ?????????

23
network diagrams

• show different paths through system

24
network diagrams ctd.

• ??????????????????????????????????????????
• ????????????????????????????????????????
• ??????????????????????????????? (branch)
  ??????????? (loop)
• ??????????????????????????????????????????

25
screen design and layout

• ??????????????????
• ??????????? ??????????????? ????????????????
• ????????????
• ??????????????????

26
????????????????????????

• grouping of items ????????????????????????????????
  ?????
• order of items ??????????????????
• decoration - fonts, boxes etc. ?????????
• alignment of items ?????????
• white space between items

27
grouping and structure (ctd.)

• Order
• Administrative information
• Billing details
• Delivery details
• Order information
• Order line 1
• Order line 2

28
grouping and structure
29
order of groups and items

• ??????????????????????????????????????????????????
  ???????????????
• ?????????????????????????????????
• ???????????????????
• ?????????????????????????? UI ??????????
• ??????
• ????????????????????????????? ?????????????
  ??????????????????? ???...

30
decoration

• ??????????????????????????????
• ??????????????????????????? Heading
• ?????????????????????!!

31
alignment - text

• ?????????????????????? (English and European)
  
• ? ????????????????????????

??????????? ?????????????
Willy Wonka and the Chocolate Factory Winston
Churchill - A Biography Wizard of Oz Xena -
Warrior Princess
Willy Wonka and the Chocolate Factory Winston
Churchill - A Biography Wizard of Oz Xena -
Warrior Princess
?????????????????
32
alignment - names

• ??????????????????????????????????????????

?
?
Alan Dix Janet Finlay Gregory Abowd Russell Beale
Dix , Alan Finlay, Janet Abowd, Gregory Beale,
Russell
?
Alan Dix Janet Finlay Gregory
Abowd Russell Beale
33
alignment - numbers

• ?????????????????????????
• ?????????????????????!
• ????.?.???????????????????????
• ?????????

532.56179.3256.3171573.94810353.142497.6256
34
alignment - numbers

• visually
• long number big number
• align decimal points
• or right align integers

627.865 1.005763 382.583 2502.56 432.935 2.0
175 652.87 56.34
35
multiple columns

• ??????????????????????????????????????????????????
  ????????????

sherbert 75toffee 120chocolate 35fruit
gums 27coconut dreams 85
36
multiple columns - 2

• ????????????

37
multiple columns - 3

• ?????????????????????????

sherbert 75toffee 120chocolate 35fruit
gums 27coconut dreams 85
38
multiple columns - 4

• ????????????????????????????????
  ??????????????????
• ???????????????? ??????????
• ??????????????????????????????????????????

sherbert 75 toffee 120 chocolate 35 fruit
gums 27 coconut dreams 85
39
White space

• ????????????????????????????????????
  ???????????????????????????????????
• ????????????????????????????????
  ?????????????????????????????

Use of space
A
D
B
C
F
E
(i) Space to separate
(ii) Space to structure
(iii) Space to highlight
40
physical controls

• ??????????? grouping of items

41
physical controls

• grouping of items
• ????????????????

42
physical controls

• grouping of items
• order of items
• ?????????
• ????????????????????????????
• ?????????????????????????????????????????

43
physical controls

• grouping of items
• order of items
• decoration
• ????????????
• centered text in buttons? easy to scan ?

? ?????????????? ?
44
physical controls

• grouping of items
• order of items
• decoration
• alignment
• ?????????????????
• gaps to aid grouping

45
user action and control

• ??????????
• ????????????????
• ?????????????????????????????????????????????

46
entering information

• forms, dialogue boxes
• presentation data input
• similar layout issues
• alignment - N.B. different label lengths
• logical layout
• groupings
• natural order for entering information
• top-bottom, left-right (depending on culture)
• set tab order for keyboard entry

?
?
47
knowing what to do

• ????????????????? (active) ???????????????????????
  ??????????? (Passive)
• ?????????????
• ???????????????????
• ??????????????????????????????????
• e.g. ???? underlined links
• ????????? label ??? icon
• ????????????????????????????
• ??? bold ???????????????????????????????

48
appropriate appearance

• ???????????????????
• ????????????????????????????????
• ?????????????? 3D

49
presenting information

• ????????????????????????????????
• ????????????? (which column, numeric alphabetic)
• ????????????????????????????
• ???????????????????????????? scatter graph ????
  histogram
• ????????????????????????????????
• ???????????????????????
• ??????????????????????????????????
• ?????????????????????????????????????????????
• ?????????????????

size
50
aesthetics and utility

• ??????????????????
• ??????????????????????????????????????????????????
  ??????
• ??????????????????????????????????????????
• ????????????????????????????? ?
  ????????????????????????
• ?????????????????????? ????????????????? ?
  ?????????????????????
• ??????????????????
• ???????????????????????
• ??????????????????????????????????????????????????
  ????
• ??????????????????????????????????
• ???????????????????????????????? iMAC

51
colour and 3D

• both often used very badly!
• Colour
• use sparingly to reinforce other information
• 3D effects
• good for physical information and some graphs
• but if over used e.g. text in perspective!!
  3D pie charts

????????
52
bad use of colour

• over use - without very good reason (e.g. kids
  site)
• colour blindness
• poor use of contrast
• do adjust your set!
• adjust your monitor to greys only
• can you still read your screen?

53
iteration and prototyping

• ??????????????????????????????????????
• ??????????????????????????????????????????????????
  ?