บทที่ 1 : interaction design basic...
DESCRIPTION
บทที่ 1 : interaction design basic พื้นฐานการออกแบบระบบโต้ตอบ. พื้นฐานการออกแบบระบบโต้ตอบ. design the design process users scenarios navigation iteration and prototypes. Design?. “ การดำเนินงานให้ได้ตามเป้าหมายภายใต้ข้อจำกัด ” goals - purpose constraints trade-offs. - PowerPoint PPT PresentationTRANSCRIPT
บทท�� 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