Transcript Introduction to Multimedia

Interactive Design
Krich Sintanakul
Department of Computer Education
KMUTNB
What is interaction design?
• Designing interactive products to
support people in their everyday
and working lives
– Sharp, Rogers and Preece (2002)
• The design of spaces for human
communication and interaction
– Winograd (1997)
724401
2
Goals of interaction design
• Develop usable products
– Usability means easy to learn,
effective to use and provide an
enjoyable experience
• Involve users in the design process
724401
3
Example of bad and good design
– Elevator controls and labels on the bottom row all
look the same, so it is easy to push a label by
mistake instead of a control button
– People do not make same mistake for the labels
and buttons on the top row. Why not?
724401
From: www.baddesigns.com
4
What to design
• Need to take into account:
– Who the users are
– What activities are being carried out
– Where the interaction is taking place
• Need to optimise the interactions users
have with a product
– Such that they match the users activities and
needs
724401
5
Understanding users’ needs
– Need to take into account what people are
good and bad at
– Consider what might help people in the
way they currently do things
– Listen to what people want and get them
involved
– Use tried and tested user-based methods
724401
6
From HCI to Interaction Design
• Human-computer interaction (HCI) is:
“concerned with the design, evaluation and
implementation of interactive computing systems for
human use and with the study of major phenomena
surrounding them” (ACM SIGCHI, 1992, p.6)
• Interaction design (ID) is:
“the design of spaces for human communication and
interaction”
– Winograd (1997)
• Increasingly, more application areas, more
technologies and more issues to consider when
designing ‘interfaces’
724401
7
Many kinds of interaction styles
available…
• Command
• Speech
• Data-entry
• Form fill-in
• Query
• Graphical
• Web
• Pen
• Augmented reality
•724401
Gesture
and even...
8
Relationship between ID, HCI and
other fields
Academic
disciplines
(e.g. computer
science,
psychology)
724401
Design practices
(e.g. graphic design
Interaction
Design
Interdisciplinary fields
(e.g HCI, CSCW)
9
Relationship between ID, HCI and
other fields
• Academic disciplines contributing to ID:
• Psychology
• Social Sciences
• Computing Sciences
• Engineering
• Ergonomics
• Informatics
724401
10
Relationship between ID, HCI and
other fields
• Design practices contributing to ID:
– Graphic design
– Product design
– Artist-design
– Industrial design
– Film industry
724401
11
Relationship between ID, HCI and
other fields
• Interdisciplinary fields that ‘do’
interaction design:
– HCI
– Human Factors
– Cognitive Engineering
– Cognitive Ergonomics
– Computer Supported Co-operative
Work
– Information Systems
724401
12
What is involved in the process of
interaction design
• Identify needs and establish
requirements
• Develop alternative designs
• Build interactive prototypes that can be
communicated and assessed
• Evaluate what is being built throughout
the process
724401
13
Usability goals
•
•
•
•
•
•
Effective to use
Efficient to use
Safe to use
Have good utility
Easy to learn
Easy to remember how to use
724401
14
Activity on usability
• How long should it take and how long
does it actually take to:
– use a VCR to play a video?
– use a VCR to pre-record two programs?
– use an authoring tool to create a website?
724401
15
User experience goals
– Satisfying
– Fun
– Enjoyable
– Entertaining
– Helpful
– Motivating
724401
- rewarding
- support creativity
- emotionally fulfilling
…and more
16
Usability and user experience
goals
• How do usability goals differ from user
experience goals?
• Are there trade-offs between the two kinds of
goals?
– e.g. can a product be both fun and safe?
• How easy is it to measure usability versus
user experience goals?
724401
17
Design principles
• Generalizable abstractions for thinking about
different aspects of design
• The do’s and don’ts of interaction design
• What to provide and what not to provide at
the interface
• Derived from a mix of theory-based
knowledge, experience and common-sense
724401
18
Visibility
This is a control panel for an
elevator.
• How does it work?
• Push a button for the floor
you want?
From:
www.baddesigns.com
724401
• Nothing happens. Push any
other button? Still nothing.
What do you need to do?
19
Visibility
…you need to insert your room card in the slot by the buttons to
get the elevator to work!
How would you make this action more visible?
• make the card reader more obvious
From:
www.baddesigns.com
• provide an auditory message, that says what to do (which
language?)
• provide a big label next to the card reader that flashes
when someone enters
• make relevant parts visible
• make what has to be done obvious
724401
20
Feedback
• Sending information back to the user
about what has been done
• Includes sound, highlighting,
animation and combinations of these
– e.g. when screen button clicked on
provides sound or red highlight
feedback:
“ccclichhk”
724401
21
Constraints
• Restricting the possible actions that can be
performed
• Helps prevent user from selecting incorrect
options
• Three main types (Norman, 1999)
– physical
– cultural
– logical
724401
22
Physical constraints
• Refer to the way physical objects restrict
the movement of things
– E.g. only one way you can insert a key into a
lock
• How many ways can you insert a CD or
DVD disk into a computer?
• How physically constraining is this action?
• How does it differ from the insertion of a
floppy disk into a computer?
724401
23
Logical constraints
• Exploits people’s everyday common sense
reasoning about the way the world works
• An example is they logical relationship
between physical layout of a device and
the way it works as the next slide
illustrates
724401
24
Logical or ambiguous design?
• Where do you plug the
mouse?
• Where do you plug the
keyboard?
• top or bottom
connector?
• Do the color coded
icons help?
From: www.baddesigns.com
724401
25
How to design them more
logically
(i) A provides direct
adjacent mapping
between icon and
connector
(ii) B provides color
coding to associate
the connectors with
the labels
From: www.baddesigns.com
724401
26
Cultural constraints
• Learned arbitrary conventions
like red triangles for warning
• Can be universal or culturally specific
724401
27
Mapping
• Relationship between controls and their
movements and the results in the
world
• Why is this a poor mapping of control
buttons?
724401
28
Activity on mappings
• Why is this a better mapping?
• The control buttons are mapped better
onto the sequence of actions of fast
rewind, rewind, play and fast forward
724401
29
Activity on mappings
– Which controls go with which rings
(burners)?
A
724401
B
C
D
30
Why is this a better design?
724401
31
Consistency
• Design interfaces to have similar
operations and use similar elements for
similar tasks
• For example:
– always use ctrl key plus first initial of the
command for an operation – ctrl+C, ctrl+S,
ctrl+O
• Main benefit is consistent interfaces are
easier to learn and use
724401
32
When consistency breaks down
• What happens if there is more than one
command starting with the same letter?
– e.g. save, spelling, select, style
• Have to find other initials or combinations of
keys, thereby breaking the consistency rule
– E.g. ctrl+S, ctrl+Sp, ctrl+shift+L
• Increases learning burden on user, making
them more prone to errors
724401
33
Internal and external consistency
• Internal consistency refers to designing
operations to behave the same within an
application
– Difficult to achieve with complex interfaces
• External consistency refers to designing
operations, interfaces, etc., to be the same
across applications and devices
– Very rarely the case, based on different designer’s
preference
724401
34
Keypad numbers layout
• A case of external inconsistency
(a) phones, remote controls (b) calculators, computer keypads
1 2 3
4 5 6
7
8
0
724401
9
7
8
9
4 5 6
1 2 3
0
35
บรรทัดฐานในการออกแบบ
• ตอบสนองประโยชน์ใช้สอย
• ความสวยงามพึงพอใจ (Aesthetic)
• การสื่ อความหมาย (Memory Unit)
724401
36
Graphic Design Workflow
• วิเคราะห์โจทย์ (Program Analysis)
– What Where Who How
• สร้างแนวความคิดในการออกแบบ (Conceptual Design)
– ต้องคานึงถึง Design Criteria
• ศึกษางานหรื อกรณี ตวั อย่างที่มีอยู่ (Case Study)
• ออกแบบร่ าง (Perliminary Design)
• ออกแบบจริ ง (Design)
724401
37
การพิจารณาภาพของมนุษย์
การมองภาพของมนุษย์มีเรื่ องหลักคือ
• การมองเพื่อหาความหมายของภาพ เพื่อหาสารในสื่ อภาพ
(Meaning)
• การมองลึกเข้าไปเพื่อพิจารณารายละเอียดขององค์ประกอบ
ของภาพ (Elements)
724401
38
Basic Elements of Picture
• จุด (Dot)
• เส้น (Line)
• ระนาบ (Plane)
– วงกลม (Circle)
– สี่ เหลี่ยม (Square)
– สามเหลี่ยม (Triangle)
– หกเหลี่ยม (Hexagon)
– รู ปร่ างธรรมชาติ (Organic)
724401
39
Dot
•
•
•
•
เป็ นองค์ประกอบที่มีขนาดเล็ก มีความกว้างและยาวใกล้เคียงกัน
คุณสมบัติเด่นในการจัดวางทาให้เกิดการเรี ยกร้องความสนใจ
บอกและกาหนดตาแหน่งของภาพ
การวางจุด 2 จุด ทาให้ได้พ้นื ที่ระหว่างจุดที่ให้ความรู ้สึกดึงดูดระหว่าง
กัน
• ขนาดของจุดต้องพิจารณาร่ วมกับองค์ประกอบแวดล้อม
724401
40
Dot
724401
41
Line
• เป็ นองค์ประกอบที่มีขนาดยาว เกิดจากการนาจุดมาเคลื่อนที่
หรื อนามาวางเรี ยงต่อกัน
• คุณสมบัติเด่นในการนาสายตา เป็ นแนวแบ่งภาพ
• กาหนดทิศทาง และความต่อเนื่อง
724401
42
Line
ความรู้สึก อารมณ์ของเส้นต่างๆ ในภาพ
• เส้นตรง ให้ความรู้สึกมัน่ คงเป็ นระเบียบ
• เส้นนอน ให้ความสงบ นิ่ง เรี ยบร้อย
• เส้นเฉี ยง ให้ความรู้สึกถึงการเคลื่อนใหว ความไม่หยุดนิ่ง พลังขับเคลื่อน
• เส้นโค้ง ให้ความรู้สึกนิ่มนวล พลิ้วไหว
• เส้นหยัก ให้ความรู้สึกถึงความไม่เป็ นระเบียบ การไม่อยูใ่ นกรอบ ความอิสระ หรื อความ
สับสนวุน่ วาย ขึ้นอยูก่ บั ความหยักมากหรื อน้อย
• เส้นเล็กและบาง ให้ความรููสึ ก เบาและเฉี ยบคม ในขณะที่เส้นหนาให้ความหนัก
แน่นในการนาสายตา
724401
43
Line
724401
44
Plane
• ระนาบเป็ นองค์ประกอบที่เกิดจากเส้นที่ขยายตัว หรื อกลุ่มของจุดที่
เกิดความกว้างและความยาว
• เป็ นองค์ประกอบที่เป็ น 2 มิติ
• แสดงขอบเขตของพื้นที่ในภาพ
• ระนาบมีหลายรู ปร่ าง Shape แตกต่างกัน ซึ่งให้ความรู ้สึกที่
แตกต่างกัน
724401
45
Circle
• ให้ความรู้สึกเป็ นศุนย์กลาง เป็ นที่รวมความสนใจ หรื อการปกป้ องคุม้ ครอง
• เมื่อมองไปยังเส้นขอบแล้วมีความคาดหวังว่าจะบรรจบที่เดิม
• มีความคงเส้นคงวาในการดาเนินเส้นขอบ
724401
46
Square
•
•
•
•
ให้ความรู ้สึกสงบ มัน่ คง เป็ นระเบียบ
เมื่อวางในแนวตั้งฉากให้ความรู ้สึกเคลื่อนไหว
เมื่อวางแนวทแยงสร้างจุดสนใจได้ดี
จัดวางง่าย เป็ นกลุ่มก้อน
724401
47
Triangle
• ให้ความรู ้สึกหยุดนิ่ง มัน่ คง
• ส่ วนปลายของมุม ให้ความรู ้สึกทิศทาง ความเฉี ยบคม มีแรงผลักดัน
724401
48
Hexagon
•
•
•
•
ให้ความรู้สึกถึงการเชื่อมโยง
การเป็ นหน่วย Modular อย่างไม่มีขอบเขตสิ้ นสุ ด
ความเข้ากันได้อย่างลงตัว
สร้างทิศทางการมองให้แตกต่างจากปกติที่มีระดับและดิ่งเท่านั้น
724401
49
Organic
• ให้ความรู ้สึกถึงความอิสระ การเลื่อนไหล การไม่มีกฎเกณฑ์ที่
แน่นอนตายตัว
724401
50
Colour
• เป็ นองค์ประกอบที่สาคัญในการออกแบบ
• มีอิทธิพลในเรื่ องอารมณ์ การสื่ อความหมายที่เด่นชัด
• การกระตุน้ การรับรู้ของมนุษย์
• ให้เกิดความสวยงาม
• การสื่ อความหมายทางอ้อม
724401
51
คุณสมบัติ 3 ประการ Colour
• เนื้อสี สี (Hue)
– ความแตกต่างของสี บริ สุทธิ์ แต่ละสี โดยแบ่งเป็ น
• สี ของแสง Coloured Light (Additive Color Mixing)
RGB
• สี ของสาร Coloured Pigment (Subtractive Color
Mixing) CMYK
• น้ าหนักสี (Value Brightness)
• ความสดของสี (Intensity Saturation)
724401
52
Colour Wheel
• สี ปฐมภูมิ Primary Colours
• สี ทุติยภูมิ Secondary Colours
• สี ตติยภูมิ Tertiary Colours
724401
53
สี โทนร้อน สี โทนเย็น
• สี ถกู แบ่งออกเป็ นสองกลุ่มตามอุณหภูมิสี
• สี โทนร้อน ให้ความรู ้สึกมีพลัง อบอุ่น สนุกสนาน ดึงดูด มีความน่าสนใจดี
• สี โทนเย็น ให้ความรู้สึกเรี ยบ สงบ เยือกเย็น ลึกลับ มีระดับ
724401
54
น้ าหนักของสี (Value)
• ความสว่างของสี Brightness
• หรื อการเพิม่ ขาว เติมดา ให้กบั สี
• เพิม่ มิติ มีความลึก มีโทน สร้างความสมจริ ง
High Value
Low Brightness
724401
Low Value
High Brightness
55
ความสดของสี (Intensity)
• คือการเพิม่ ลดปริ มาณสี ให้กบั ภาพ
• หากปรับลดมาก ๆ จะเป็ นภาพขาวดา
• หากเพิม่ มาก ๆ เป็ นภาพสี ฉูดฉาด
724401
56
การเลือกเนื้อสี จากความหมาย
• สี แดง
• อ้างอิงมาจากดวงอาทิตย์และไฟ ซึ่งให้ความสว่าง ความร้อน พลัง
พลังงาน ความแรง
• ชาวจีน ถึงว่าสี แดงเป็ นสี มงคล ความเป็ นผูน้ า
724401
57
การเลือกเนื้อสี จากความหมาย
• สี เหลือง
• ให้อารมณ์ของความสดใส ปลอดโปร่ ง ดึงดูดสายตา
มองเห็นได้แต่ไกล
724401
58
การเลือกเนื้อสี จากความหมาย
• สี น้ าเงิน
• ให้ความหมายของความสงบเรี ยบ ความสุ ขมุ ความมีราคา ให้
อารมณ์หรู หรามีระดับ
• มีความสุ ภาพ หนักแน่น สี ของผูช้ าย
724401
59
การเลือกเนื้อสี จากความหมาย
• สี ส้ม
• ให้ความรู ้สึก ดึงดูด ทันสมัย สดใส กระฉับกระเฉง มีพลัง
724401
60
การเลือกเนื้อสี จากความหมาย
•
•
•
•
สี เขียว
มาจากสี ของต้นไม้
ให้ความหมายเป็ นสี ที่มาจากธรรมชาติ
ให้ความรู ้สึก เย็นสบาย ชุ่มชื่น สบายตา
724401
61
การเลือกเนื้อสี จากความหมาย
• สี ม่วง
• ให้ความรู้สึก อารมณ์หนักแน่น มีเสน่ห์ ความลับ สิ่ งที่ปกปิ ด
724401
62
การเลือกเนื้อสี จากความหมาย
• สี ชมพู
• ให้ความรู้สึก ความอ่อนหวาน นุ่มนวล ความรัก วัยรุ่ น
ผูห้ ญิง
724401
63
การเลือกเนื้อสี จากความหมาย
• สี น้ าตาล
• ให้ความรู ้สึก ความสงบ ความเรี ยบ ความเป็ นผูใ้ หญ่ ความเก่าแก่
โบราณ บางครั้งก็สื่อถึงไม้ แผ่นไม้ อิฐ
724401
64
การเลือกเนื้อสี จากความหมาย
• สี ฟ้า
• ให้ความรู ้สึก โปร่ งโล่งสบายตา สื บเนื่องมาจากท้องฟ้ าที่เราเห็น
ความนุ่มนวล ความสุ ขสบาย
724401
65
การเลือกเนื้อสี จากความหมาย
• สี เงิน
• ได้จากวัสดุมนั วาว เช่น อลูมิเนียม เป็ นวัสดุที่มียคุ หลัง ไม่ได้มีต้ งั แต่โบราณ
ราคาแพง
• ให้ความรู ้สึกสิ่ งใหม่ ๆ ทันสมัย มีคุณค่า มีราคา ดูแข็งแกร่ ง
724401
66
การเลือกเนื้อสี จากความหมาย
•
•
•
•
สี ทอง
ได้จากแร่ ทองคา จะต้องมีประกาย
ทองเป็ นตัวแทนของความมีคุณค่า
ให้ความรู ้สึกความมีราคา หรู หรา แพง
724401
67
การเลือกเนื้อสี จากความหมาย
• สี ขาว
• สื่ อถึงความบริ สุทธิ์
• ให้ความรู ้สึกความสะอาด เรี ยบง่าย ความโล่ง ความไม่มี
724401
68
การเลือกเนื้อสี จากความหมาย
• สี เทา
• ให้ความเศร้า หม่นหมอง ไร้ชีวิตชีวา บางครั้งสื่ อถึงความเป็ นกลาง
724401
69
การเลือกเนื้อสี จากความหมาย
• สี ดา
• ให้ความมืด ความไม่เห็น ซ่อนความไม่รู้ ความน่ากลัว
• การออกแบบสี ดาเป็ นพื้น หรื อสี เข้ม เพื่อใช้ขบั สิ่ งที่อยูภ่ ายในให้เด่นชัดขึ้น
724401
70
การเลือกน้ าหนักสี
จากสี แท้ให้ความสดใสมากที่สุด
เมื่อผสมขาว ทาให้ได้สีอ่อน
เมื่อผสมสี ดาทาให้ลดความสดใส
724401
71
การเลือกจากความสดของสี
•สี ที่มีความสดสูง ให้ความรู ้สึกรุ นแรง ตื่นตัว สะดุดตา
•สี ที่มีความสดปานกลาง ให้ความรู ้สึกผ่อนคลาย สบายตา
•สี ที่มีความสดน้อย ให้ความรู ้สึกหม่น ความสงบ ไม่โดดเด่น
เศร้า
724401
72
การวางโครงสี
•การใช้วงจรสี โดยการเลือก 3 คู่สี มุมละ 120 องศา เป็ น
สามเหลี่ยมด้านเท่า
•สามารถเลือกแบบ สามเหลี่ยมหน้าจัว่ ได้ดว้ ย
•ควรให้มีสีใดสี หนึ่งเป็ นพระเอกเสมอ
724401
73
การวางโครงสี
•การใช้สีเดียว โดยการเลือก ใช้เพียงสี เดียว
(Monochrome) ที่เหลือโดยการเปลี่ยน Value
และ Brightness
724401
74
การวางโครงสี
•การใช้สีขา้ งเคียง (Analogues) โดยการหยิบสี ที่อยู่
ข้างเคียงกันในวงจรสี 2 3 4 สี
724401
75
การวางโครงสี
•การใช้สีคู่ตรงข้าม Complementary Colour
•ช่วยกันเกิดการกระตุน้ สะดุดตาได้ดี
•กระตุน้ การรับรู้ ขัดแย้งได้ดี
•ควรมีการเลือกใช้ปริ มาณสี 70:30 เพื่อให้มีสีใดสี หนึ่ งเด่นสะดุดตา
724401
76
การวางโครงสี
•การใช้สี 4 สี ในวงจรสี ในรู ป สี่ เหลี่ยมด้านเท่า หรื อจตุรัส
•และแบบ สี่ เหลี่ยมผืน่ ผ้า
724401
77
การจัดองค์ประกอบภาพ
มีหลักในการจัดองค์ประกอบใหญ่ 2 ประการคือ
•การสร้างเอกภาพ (Unity)
•การสร้างจุดเด่น เน้นจุดสาคัญ (Emphasize)
724401
78
เอกภาพ
1. การสร้างความใกล้ชิดให้กบั องค์ประกอบ (Proximity) โดย
การใช้ระยะห่างระหว่าง วัตถุ ให้มีความรู ้สึกการเป็ นกลุ่มก้อน พวก
พ้องเดียวกัน
724401
79
เอกภาพ
2. การสร้างความซ้ ากันขององค์ประกอบภาพ
(Repetition)
724401
80
เอกภาพ
3. การสร้างความต่อเนื่องขององค์ประกอบ
(Continuation)
ความต่อเนื่องที่มาจาก เส้น ทิศทางขององค์ประกอบที่อยูใ่ นภาพ
ซึ่ งนาสายตาไปในทางที่ผอู้ อกแบบนาไป ให้เป็ นเอกภาพ
724401
81
เสริ มจุดเด่น เน้นจุดสาคัญ
หลักในการสร้างสุ ดสนใจมี 3 วิธีคือ
การวางตาแหน่งจุดสนใจในงาน (Focus Point)
การสร้างความแตกต่างในงาน (Contrast)
การวางแยกองค์ประกอบให้โดดเด่น (Isolation)
724401
82
Focus Point
• ต้องทราบว่า ในหน้าจอนั้น ๆ เน้นอะไร ตามลาดับ
• มองงานเป็ นตาราง 9 ช่อง 0-4 แสดงลาดับความสาคัญของ
พฤติกรรมของคนส่ วนใหญ่
724401
1
0
2
0
4
0
2
0
3
83
Focus Point
• ตาแหน่งหมายเลข 0
เป็ นตาแหน่งที่มีควรวางองค์ประกอบที่ไม่ตอ้ งการเน้น เพราะเป็ น
ตำแหน่งที่สายตาคนส่ วนใหญ่ไม่ให้ความสาคัญ
724401
1
0
2
0
4
0
2
0
3
84
Focus Point
• ตาแหน่งหมายเลข 1
มนุษย์ส่วนใหญ่อ่านหนังสื อจากมุมบนซ้ายลงขวาล่าง จึงเป็ นจุดอันดับ
แรกในภาพ
724401
1
0
2
0
4
0
2
0
3
85
Focus Point
• ตาแหน่งหมายเลข 2
เป็ นตาแหน่งที่มีพลังในการดึงดูดสายตา มีความเฉี ยบ เนื่องจากเรี ยกร้อง
ความสนใจได้ดี
724401
1
0
2
0
4
0
2
0
3
86
Focus Point
• ตาแหน่งหมายเลข 3
เป็ นตาแหน่งที่สาคัญที่สืบเนื่องมาจากตาแหน่งที่ 1 เพราะเป็ นแหน่ง
สุ ดท้ายที่คนส่ วนใหญ่กวาดสายตามอง
724401
1
0
2
0
4
0
2
0
3
87
Focus Point
• ตาแหน่งหมายเลข 4
เป็ นตาแหน่งที่สาคัญที่คนส่ วนใหญ่มองก่อนกาหนดอื่น ๆ และเป็ นจุด
รวมสายตาจากจุดอื่น ๆ
724401
1
0
2
0
4
0
2
0
3
88
Contrast
การสร้างความน่าสนใจให้กบั ภาพด้วยการเพิม่ ความแตกต่างสามารถใช้ได้
หลายวิธี
• การสร้างขนาดที่แตกต่างขององค์ประกอบ
• รุ ปร่ างที่แตกต่างกันขององค์ประกอบ
• รุ ปลักษณ์หรื อลักษณ์ที่แตกต่างกัน
724401
89
Isolation
การวางแยกองค์ประกอบให้โดดเด่น โดยใช้หลัก
• ขนาดและสัดส่ วนในการจัดองค์ประกอบ
• ที่วา่ งในเพื่อที่แสดงการแบ่งแยก
• ความสมดุลในงาน
•สมดุล 2 ข้างเหมือนกัน
•สมดุล 2 ข้างไม่เหมือนกัน
• จังหวะของภาพ
• เทคนิคในการออกแบบ
724401
90