บทท�� 1 : interaction design basic

พื้��นฐานการออกแบบระบบโต้�ต้อบ

พื้��นฐานการออกแบบระบบโต้�ต้อบ

• design

• the design process

• users

• scenarios

• navigation

• iteration and prototypes2

Design?

“การดำ�าเน�นงานให้�ไดำ�ต้ามเป้�าห้มายภายใต้�ข้�อจำ�าก#ดำ”

• goals - purpose

• constraints

• trade-offs

3

for Human–Computer Interaction

• understand computers

• understand people

• and their interaction …

4

To err is human

• accident reports ..– industrial accident, hospital mistake– … blames … ‘human error’

• human ‘error’ is normal

– ผู้%�ใช้�ท�างานภายใต้�ความกดำดำ#น– so design for it!

5

ข้#�นต้อนการออกแบบ

what iswanted

analysis

design

implementand deploy

prototype

interviews

guidelinesprinciples

dialoguenotations

precisespecification

documentationhelp

evaluationheuristics

scenariostask analysis

6

ข้#�นต้อน …

• requirements

• Analysis

• design

• iteration and prototyping

• implementation and deployment

7

การท�างานท#�งห้มดำเป้)นไป้ไดำ�จำร�งห้ร�อ

• limited time

• usability?

• a perfect system is badly designed– too good too much effort in design

8

user focus

ต้�องร% �จำ#ก userลั#กษณะข้อง user

อ-ป้กรณ.ต้/างๆ

ร% �จำ#กผู้%�ใช้�งาน

• พื้วกเข้าเป้)นใคร?• เป้)นไป้ไดำ�ท��เข้าไม/ไดำ�เก/งคอมพื้�วเต้อร.เห้ม�อน

ค-ณ• ค-ยก#บ user• สั#งเกต้-การณ.• ใช้�จำ�นต้นาการ

10

cultural probes

• สั#งเกต้-การณ.โดำยต้รง– sometimes hard

• ในบ�าน• ผู้%�ป้2วย

• กลั/องเคร��องม�อ– อ-ป้กรณ.ต้/างๆ – เพื้��อให้� user เลั�อกบร�เวณสั�าห้ร#บการสั#มภาษณ.ไดำ�

11

navigation design

local structure – single screenglobal structure – whole site

start

the systems

info and help management messages

add user remove user

mainscreen

removeuser

confirm

add user

ระดำ#บ

• widget choice– menus, buttons etc.

• screen design• application navigation design• environment

– other apps, O/S

13

the web …

• widget choice

• screen design• navigation design• environment

• elements and tags– <a href=“...”>

• page design• site structure• the web, browser,

external links

14

physical devices

• widget choice

• screen design• navigation design• environment

• controls– buttons, knobs, dials

• physical layout• modes of device• the real world

15

think about structure

• local– looking from this screen out

• global– structure of site, movement between

screens

16

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

17

where you are

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels18

global

between screenswithin the application

hierarchical diagrams

the system

info and help management messages

add user remove user

20

hierarchical diagrams ctd.

• สั/วนห้น3�งข้องโป้รแกรมท�างาน– ห้น�าจำอห้ร�อกลั-/มข้องห้น�าจำอ

• การแบ/งกลั-/มข้องฟั5งก.ช้#นการท�างานthe systems

info and help management messages

add user remove user

21

navigating hierarchies

• โครงสัร�างท��ม�ความลั3กใช้�งานไดำ�ยาก• มน-ษย.จำะสัามารถเข้�าใจำโครงสัร�างแบบน��ไดำ�ง/ายกว/า• การจำ#ดำกลั-/มรายการเห้ลั/าน��ควรสั#มพื้#นธ์.ก#บธ์รรมช้าต้�

ความเป้)นจำร�ง

22

network diagrams

• show different paths through system

mainscreen

removeuser

confirm

add user

23

network diagrams ctd.

• แสัดำงให้�เห้8นว/าการท�างานน��จำะน�าพื้าไป้สั%/สั��งใดำ• แสัดำงให้�เห้8นว/าแต้/ลัะสั��งจำะเก�ดำข้3�นเม��อใดำ• สัามารถใช้�งานเง��อนไข้แบบทางเลั�อก (branch) แลัะ

การท�าซ้ำ��า (loop)• ข้3�นอย%/ก#บข้#�นต้อนการท�างานมากกว/าโครงสัร�าง

mainscreen

removeuser

confirm

add user

24

screen design and layout

พื้��นฐานในการออกแบบการจำ#ดำกลั-/ม การวางโครงสัร�าง แลัะการเร�ยง

ลั�าดำ#บการจำ#ดำวางแนวการใช้�พื้��นท��สั�ข้าวABCDEFHIJKLM

NOPQRSTUVWXYZ

Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell

ว�ธ์�ในการจำ#ดำวางโครงสัร�าง• grouping of items ข้�อม%ลัท��สั#มพื้#นธ์.ก#นจำะ

ถ%กจำ#ดำเป้)นกลั-/ม• order of items ลั�าดำ#บการกรอกข้�อม%ลั• decoration - fonts, boxes etc. การ

ต้กแต้/ง• alignment of items การวางแนว• white space between items

26

grouping and structure (ctd.)

Order:Administrative information

Billing detailsDelivery details

Order informationOrder line 1Order line 2…

27

grouping and structure

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 …… … … …

28

order of groups and items

• ใช้�ความค�ดำว/าแต้/ลัะรายการน#�นม�การจำ#ดำเร�ยงอย/างธ์รรมช้าต้�เป้)นอย/างไร

• น�ามาจำ#ดำเร�ยงบนห้น�าจำอให้�ไดำ�ต้ามน#�น– ใช้�กรอบห้ร�อช้/องว/าง– ต้#�งแท8บในการกระโดำดำไป้แต้/ลัะ UI ให้�ถ%กต้�อง

• ค�าสั#�ง– อย/าใช้�ค�าสั#�งแบบการท�าเค�กเช้/น

… เต้�มนมแลัะแป้�ง จำากน#�นจำ3งเต้�มผู้ลัไม� แลัะ...29

decoration

• ใช้�กรอบในการแบ/งกลั-/มสั/วนต้/างๆ• ใช้�ฟั�อนเพื้��อเน�นข้�อความเช้/น Heading • แต้/อย/าใช้�มากจำนเก�นไป้!!

ABCDEFHIJKLMNOPQRSTUVWXYZ

30

alignment - text

• คนป้กต้�อ/านจำากซ้ำ�ายไป้ข้วา (English and European)

จำ#ดำข้�อความให้�ช้�ดำซ้ำ�ายเสัมอWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

สัวยงามแต้/ค�นห้ายาก

น/าเบ��อแต้/อ/านร% �เร��อง

31

alignment - names

• การจำ#ดำวางห้น�าจำอเพื้��อให้�ค�นห้านามสัก-ลัไดำ�ง/าย

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell

32

alignment - numbers

จำ#ดำวางห้น�าจำอให้�เห้มาะสัมก#บจำ-ดำป้ระสังค.ในการใช้�งาน!

จำากต้.ย.เราร% �ไดำ�ท#นท��ว/าค/าใดำมากท��สั-ดำ

532.56179.3

256.31715

73.9481035

3.142497.6256

33

alignment - numbers

visually: long number = big number

align decimal pointsor right align integers

627.8651.005763

382.5832502.56

432.9352.0175

652.8756.34

34

multiple columns

• การจำ#ดำวางข้�อม%ลัเป้)นคอลั#มน.จำะม�ป้5ญห้าในการเช้8คว/าบรรท#ดำไห้นต้รงก#น:

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

35

multiple columns - 2

• ใช้�เสั�นก�าก#บ

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

36

multiple columns - 3

• ใช้�สั�ท��ต้/างก#นในแต้/ลัะแถว

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

37

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

• ลั�มข้�อจำ�าก#ดำเก��ยวก#บการจำ#ดำวางแนว โดำยใช้�การจำ#ดำช้�ดำข้วา– แสักนข้�อม%ลัข้�อม%ลั + ต้#วเลัข้ง/าย– อาจำไม/เห้มาะก#บการค�นห้าช้��อข้�อม%ลัอย/างเดำ�ยว

38

White space

• เป้ร�ยบเสัม�อนเป้)นต้#วก#�นระห้ว/างข้�อม%ลั เพื้��อช้/วยจำ#ดำกลั-/มสั��งท��สั#มพื้#นธ์.ก#น • ข้�อม%ลัท��สั#มพื้#นธ์.ก#นแยกออกจำากก#น เราจำะร% �สั3กว/าม�อะไรผู้�ดำป้กต้�ไป้

39

Use of space

A

B C

E

D

F

(i) Space to separate (ii) Space to structure (iii) Space to highlight

physical controls

• การจำ#ดำกลั-/ม grouping of items

กลั-/มเลั�อกอาห้าร

กลั-/มเวลัาท��ใช้�

กลั-/มการลัะลัายอาห้าร

40

physical controls

• grouping of items

• การจำ#ดำเร�ยงลั�าดำ#บ

4

4) เร��มต้�นท�างาน2

2) อ-ณห้ภ%ม�

3

3) เวลัาท��ใช้�

11) ช้น�ดำการอ-/น

41

physical controls

• grouping of items

• order of items

• การต้กแต้/ง– ใช้�สั�ต้/างก#นต้ามแต้/ลัะฟั5งก.ช้#น– ใช้�การต้�กรอบลั�อมกลั-/มฟั5งก.ช้#นช้น�ดำเดำ�ยวก#นใช้�สั�ต้/างก#นแยกต้ามฟั5งก.ช้#น

ใช้�การต้�กรอบลั�อมฟั5งก.ช้#นท��ในกลั-/มเดำ�ยวก#น

42

physical controls

• grouping of items

• order of items

• decoration

• การจำ#ดำวางแนว– centered text in buttons

? easy to scan ?? ง/ายต้/อการอ/าน ?

วางแนวข้�อม%ลัไว�ต้รงกลัาง

43

physical controls

• grouping of items

• order of items

• decoration

• alignment

• การใช้�พื้��นท��ว/าง– gaps to aid groupingท�าให้�กลั-/มข้องฟั5งก.ช้#นถ%กแยกออกจำากก#น

44

user action and control

กรอกข้�อม%ลัร% �ว/าต้�องท�าอะไร

การท�างานสั��อห้ร�อกระต้-�นให้�ร% �ว/าต้�องท�าอย/างไร

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

Name:

Address:

Alan Dix

Lancaster

Name:

Address:

Alan Dix

Lancaster

Name:

Address:

Alan Dix

Lancaster

?

46

knowing what to do

• ร% �ว/าอะไรคลั�กไดำ� (active) แลัะอะไรเป้)นข้�อม%ลัให้�อ/านอย/างเดำ�ยว (Passive)– ต้รงไห้นคลั�กไดำ�– ต้รงไห้นกรอกข้�อม%ลัไดำ�

• ใช้�การออกแบบเห้ม�อนก#นห้มดำในท#�งระบบ– e.g. เว8บ underlined links

• การใช้�งาน label แลัะ icon– แบบมาต้รฐานใช้�ก#บการท�างานป้กต้�– ต้#ว bold อาจำใช้�บอกสัถานะว/าก�าลั#งท�างานอย%/

47

appropriate appearance

สัามารถแสัดำงข้�อม%ลัไดำ�ความสัวยงามก#บการสัน#บสัน-นการท�างาน

สั�แลัะการใช้�งาน 3D

presenting information

• ข้3�นอย%/ก#บจำ-ดำป้ระสังค.ในการใช้�งาน– เร�ยงต้ามลั�าดำ#บ (which column, numeric alphabetic)

– ข้�อม%ลัแบบข้�อความห้ร�อไดำอะแกรม– ห้ากข้�อม%ลัม�ความซ้ำ#บซ้ำ�อนอาจำใช้� scatter graph ห้ร�อ histogram

• ใช้�ห้ลั#กในการออกแบบข้�อม%ลับนกระดำาษ

• แลัะเพื้��มการโต้�ต้อบเข้�าไป้– ท�าให้�การน�าเสันอม�ความน/าสันใจำมากข้3�น

• เช้/นความสัามารถในการเร�ยงลั�าดำ#บข้�อม%ลัต้ามคอลั#มน.• กราฟัเคลั��อนไห้วไดำ�

chap1chap10chap11chap12chap13chap14 …

171251

2628322

…

sizename size

chap10chap5chap1chap14chap20chap8…

121617222732…

name size

49

aesthetics and utility

• การออกแบบท��สัวยงาม– ช้/วยให้�ผู้%�ใช้�พื้3งพื้อใจำแลัะท�าให้�การท�างานม�ป้ระสั�ทธ์�ภาพื้มากข้3�น

• ความสัวยงามก#บฟั5งก.ช้#นการท�างานอาจำข้#ดำแย�งก#น– การออกแบบท��ใช้�ห้ลัากห้ลัายร%ป้แบบ ง/ายต้/อการแยกความแต้กต้/าง– การออกแบบท��ง/ายเก�นไป้ – ม�ความแต้กต้/างน�อย อาจำท�าให้�เก�ดำความ

สั#บสัน– พื้��นห้ลั#งข้องข้�อความ

• สัวยงามแต้/ก8ท�าให้�อ/านยาก• แต้/เราสัามารถออกแบบงานท��ใช้�งานไดำ�ดำ�แลัะม�ความสัวยงามดำ�วย

– เช้/นการใช้�พื้��นท��ว/างในการจำ#ดำกลั-/ม– ห้ร�อการออกแบบท��แต้กต้/างไป้เลัยเช้/น iMAC

50

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

51

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?

52

iteration and prototyping

• การออกแบบท��ดำ�ไม/สัามารถท�าไดำ�ในคร#�งแรก• ถ�าห้ากเป้)นเช้/นน��เราจำ�าเป้)นต้�องแก�ไข้แลัะท�าซ้ำ��าอ�กคร#�ง

…

prototype evaluatedesign

re-design

done!OK?

53