User Interface Design

(1)

User Interface Design

By

Dr Abdullah Alzahrani د . ينارهزلا نمحرلادبع نب اللهدبع

[email protected]

PART 5 - Interaction design

1

(2)

Interaction design

 Design:

 what it is, involvements, goals, constraints

 Design process

 what happens when

 Users

 who they are, what they are like …

 Scenarios

 rich stories of design

 Navigation

 finding your way around a system

 Iteration and Prototypes

 never get it right first time!

2

(3)

available tools: اهميمصتو ةشاشلا قيسنتل دعاوق 5

1. Grouping of items رصانعلل عيمجتلا 2. Order of items رصانعلا بيترت

3. Decoration - fonts, boxes etc.نييزتلا 4. Alignment of items هاذاحملا

5. White space between items تاحاسملا رصانعلا نيب ةغرافلا

3

(4)

Grouping and structure:

logically together  physically together

Billing details:

Name

Address: … Credit card no

Delivery details:

Name

Address: … Delivery time Order details:

item quantity cost/item cost

size 10 screws (boxes) 7 3.71 25.97

…… … … …

4

(5)

جذومن1 prototype 1

5

مسا بلاطلا مقرلا

يعماجلا لدعم

بلاطلا ةيلكلا ةهج

بيردتلا مقر

لاوجلا ددع اعاسلا ت

فرشملا

يلع يفايعلا 438000

00 4 بساحلا

ثيللاب وكمارأ 050000

00 24 . د

اللهدبع

(6)

جذومن

2 prototype 2

6

ثيللاب بساحلا ةيلكلا

يفايعلا يلع بلاطلا مسا

439000000 يعماجلا مقرلا

4 لدعملا

د .

اللهدبع فرشملا

وكمارأ بيردتلا ةهج

05000000 لاوجلا

24 تاعاسلا

(7)

7

4 لدعملا

د .

(8)

8

4 لدعملا

د .

(9)

9

د .

College CS Alith ثيللاب بساحلا ةيلكلا

Student Name Ali يفايعلا يلع بلاطلا مسا

Student ID 439000000 439000000 يعماجلا مقرلا

GPA 4 4 لدعملا

Mobile 05000000 05000000 لاوجلا

(10)

10

د .

College CS Alith ثيللاب بساحلا ةيلكلا

Student Name Ali يفايعلا يلع بلاطلا مسا

Student ID 439000000 يعماجلا مقرلا

GPA 4 لدعملا

Mobile 05000000 لاوجلا

(11)

Order of groups and items:

 think! - what is natural order قرولا ىلع بلطلا

 should match screen order!ةشاشلا ىلع بلطلا

 use boxes, space etc.

 set up tabbing right!

11

(12)

Decoration:

 use boxes to group logical items

 use fonts for emphasis, headings

 but not too many!!

ABCD EF GHIJKLM NO PQRST U VWXYZ

12

(13)

Alignment - text:

 you read from left to right (English and European)

 align left hand side 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 fine for special effects but

hard to scan

boring but

readable!

13

(14)

Alignment - names:

 Usually scanning for surnames

 make it easy!

Alan Dix Janet Finlay Gregory Abowd Russell Beale

Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell

 



14

(15)

Alignment - numbers:

think purpose!

which is biggest?

532.56 179.3 256.317 15

73.948 1035 3.142 497.625 6

15

(16)

 scanning across gaps hard:

(often hard to avoid with large data base fields)

sherbert 75

toffee 120

chocolate 35

fruit gums 27

coconut dreams 85

Multiple columns:

16

(17)

 use leaders :

sherbert 75

toffee 120

chocolate 35

fruit gums 27

coconut dreams 85

17

(18)

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

 or even (with care!) ‘bad’ alignment

18

(19)

White space – space to separate:

19

(20)

E F

B C D

A

20

(21)

21

(22)

Physical controls :

 grouping of items

 defrost settings

 type of food

 time to cook type of food

time to cook defrost settings

22

(23)

 grouping of items

 order of items

4 4) start

2 2) temperature

3 3) time to cook

1) type of heating 1

23

(24)

 order of items

 decoration

different colours for different functions

lines around related buttons (temp up/down)

24

(25)

 order of items

 decoration

 alignment

? easy to scan ?

centred text in buttons

Physical controls :

25

(26)

 order of items

 decoration

 alignment

 white space gaps to aid grouping

26

(27)

user action and control :

Entering information

Knowing what to do

Affordances

27

(28)

 entering information:

 forms, dialogue boxes

 similar layout issues

 alignment - N.B. different label lengths

 logical layout

 groupings

 natural order for entering information

 top-bottom, left-right (depending on culture )

Name:

Address:

Alan Dix Lancaster

Name:

Address:

Alan Dix Lancaster

Name:

Address:

Alan Dix Lancaster



?

28

(29)

 Knowing what to do:

 what is active what is passive

 where do you click

 where do you type

 consistent style helps

 e.g. web underlined links

 labels and icons

 standards for common actions

 language – bold = current state or action

29

(30)

30

هنيدملا رتخا بيردتلا ةهج رتخا

لاسرا

(31)

 Affordances :

 culture of computer use

 icons ‘afford’ clicking or even double

clicking … not like real buttons!

mug handle

‘affords’

grasping

31

(32)

Appropriate appearance:

Presenting information تانايبلا ضرع

Aesthetics and utility ةدئافلاو تايلامجلا

Colour and 3D داعبلاا ةيثلاثو ناوللاا

Localisation & internationalisation ةيلحملا ةيلودلاو

32

(33)

 purpose matters

 sort order (which column, numeric alphabetic)

 text vs. diagram

 use paper presentation principles!

 but add interactivity

 softens design choices

 e.g. re-ordering columns

chap1 chap10 chap11 chap12 chap13 chap14

…

17 12 51 262 83 22

… size name size chap10

chap5 chap1 chap14 chap20 chap8

…

12 16 17 22 27 32

…

name size

 Presenting information:

33

(34)

 Aesthetics and utility:

• Increase user satisfaction and improve productivity

• beauty and utility may conflict

• but can work together

34

(35)

 Colour and 3D are often used very badly!

 Colour

 older monitors limited palette

 beware colour blind!

 3D effects

 good for physical information and some graphs

 Color and 3D:

35

(36)

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?

36

(37)

Interaction design: across countries and cultures

 Localisation & internationalisation

 changing interfaces for particular cultures/languages

 Globalisation

 Try to choose symbols etc. that work everywhere

37

(38)

Interaction design:

NAVIGATION DESIGN :

levels :

1. Widget choice

 menus, buttons etc.

2. Screen design

3. Application navigation design

4. Environment

 other apps, O/S

38

(39)

interaction design: NAVIGATION DESIGN:

39

THE WEB

Widget choice elements and tags

Screen design Page design

Navigation design Site structure

Environment the web, browser,

external links

(40)

interaction design: NAVIGATION DESIGN 40

PHYSICAL DEVICES

Widget choice Controls

• buttons, knobs, dials Screen design Physical layout

Navigation design Modes of device

Environment The real world

(41)

interaction design: NAVIGATION DESIGN:

 Within a screen

 Local

 Looking from this screen out

 Global

 structure of site, movement between screens

 Relationship with other applications

think about structure

41

(42)

four golden rules:

 knowing where you are

 knowing what you can do

 knowing where you are going

 or what will happen

 knowing where you’ve been

 or what you’ve done

Local structure:

42

(43)

hierarchical diagrams the system

info and help management messages

add user remove user

Global structure:

43

(44)

Network diagrams

main screen

remove

user confirm

add user

Global structure:

44

(45)

Issues …: 

Style issues

 platform standards, consistency

 Functional issues

 cut and paste

 Navigation issues

 links to other apps … the web

45

(46)

End

46