�ݺ�ߣ

CChhaapptteerr 11
ปฏฏิิสสััมพพันันธธ์์รระะหวว่า่างผผู้ใู้ใชช้แ้แลละะ
คอมพพิวิวเเตตอรร์์
HHuummaann--CCoommppuutteerr
IInntteerrffaaccee [[HHCCII]]
IITTEE 225544 bbyy อ..สสิิรริพิพร ฑฑิติตะะลลำาำาพพูนูน
ssiirriippoorrnntthhiittaa@@ggmmaaiill..ccoomm

Lecturer
• อ.สิริพร ฑิตะลำาพูน
• Education
– B.Sc in Computer Science, Silpakorn University
– M.Sc in Computer Management, Mahidol University
– Ph.D. in Management Science, Silpakorn University, 2013 - now

Evaluation
• Group Assignment 10 points
• Individual Assignments 10 points
• Class & Activities Attendance 10 points
• Midterm examination 30 points
• Final Examination 40 points
Total 100

Materials
Yvonne Rogers, Helen
Sharp, Jenny Preece,
Interaction Design: Beyond
Human - Computer Interaction,
3rd Edition, John Wiley & Sons,
April 2011
Shneiderman, B. and
Plaisant, C., Designing the U
ser Interface: Strategies for E
ffective Human-Computer Int
eraction:.

Today’s Topics
1. Introduction - What is Human–computer interface ?
2. Importance of user Interface
3. Importance of good design
4. Benefits of good design
5. Good and Poor Designs
6. The User Experience
7. The Process of Interaction Design
8. Assignments

Introduction
Human–computer interface (HCI),alternatively man
machine interaction (MMI) or computer–human inter
action (CHI) is the study of interaction between peo
ple (users) and computers.

Introduction
With today's technology and tools, and our motivation to
create really effective and usable interfaces and screens,
why do we continue to produce systems that are
inefficient and confusing or, at worst, just plain unusable?
Is it because:
1. We don't care?
2. We don't possess common sense?
3. We don't have the time?
4. We still don't know what really makes good
design?

Definition
ACM หรือ the Association for Computer
Machinery ได้นิยาม HCI ว่า คือ องค์ความรู้ที่
เกี่ยวข้องกับการออกแบบ การประเมนิผล และ
การนำาไปใช้ของระบบคอมพิวเตอร์แบบมีปฏิสัมพันธ์
ของมนุษย์ และศึกษาเกี่ยวกบั ปรากฏการณ์ตา่งๆ ที่
เกี่ยวข้อง
โดยสรุป HCI หมายถงึ การศึกษาและวิเคราะห์
เกี่ยวกับ ปฎสิัมพันธ์ ระหว่างอุปกรณ์คอมพิวเตอร์
หรือระบบคอมพิวเตอร์ กับผู้ใช้งาน เพอื่ตอบโจทย์
ว่าทำาอย่างไรจึงจะทำาใหร้ะบบคอมพิวเตอร์ ใช้งาน
ง่าย มปีระสทิธิภาพ และประสทิธิผล โดยประยุกต์ใช้

องค์ประกอบของ
Human-Computer
Interface-HCI

Goals of HCI
FFuunnccttiioonnaall SSaaffee
UUssaabbllee
••EEaassyy ttoo lleeaarrnn
••EEaassyy ttoo uussee
เป้าหมายของ HCI คือ การผลิตระบบการปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ที่มีความปลอดภัย(Safety) ,ทำาให้
มีประโยชน์ใช้ได้จริง (Utility) ,มีประสิทธิผลทำางานได้เร็ว(Effectiveness), มีประสิทธิภาพใช้ทรัพยากรคุ้ม
ค่า(Efficiency) และสามารถนำาไปใช้ได้จริง ง่ายต่อการเรียนรู้ โดยมีประสิทธิภาพ +ประสิทธิผล ( Usability)

ขั้นตอนที่จะนำาไปสู่เป้า
หมายของ HCI
✤ Understand : เข้าใจในเรื่องจิตวิทยา
✤ Develop : พัฒนาเครื่องมือและเทคนิค
✤ Achieve : ทำาการปฏิสัมพันธ์ให้มีประสทิธิภาพ

ความสำาเร็จของ
UI

Why is HCI
important?
1. User-centered design is getting a crucial role!
2. Users lose time with badly designed products and
services
3. Users even give up using bad interface

The Importance of
the User Interface
• A well-designed interface and screen is terribly
important to our users. It is their window to view the cap
abilities of the system.
• It is also the vehicle through which many critical tasks
are presented. These tasks often have a direct impact o
n an organization's relations with its customers, and its
profitability. (Facebook VS Hi5)

The Importance of the
User Interface (Cont.)
• A screen's layout and appearance affect a person in a
variety of ways. If they are con-fusing and inefficient,
people will have greater difficulty in doing their jobs and
will make more mistakes.
• Poor design may even chase some people away from a
system permanently. It can also lead to aggravation,
frustration, and increased stress.

ทำาไมต้องเรียน
HCI
• เป็นส่วนสำาคัญที่ต้องปฏิบัติจริงของ
โปรแกรม
• เราเป็นผู้สร้างโปรแกรมสำาหรับผู้ใช้อื่นๆ
ไม่ใช่ตัวเอง
• User Interface (UI) ที่ไม่ดีทำาให้ค่าใช้
จ่ายในการปฏิบัติงานเพิ่มขึ้น
• เป็นเรื่องยากในการออกแบบ UI ที่ดี
–การเดาใจคนเป็นสิ่งที่ทำาได้ยาก

The Benefits of
Good Design
The benefits of a well designed screen have also been under
experimental scrutiny for many years.
– One researcher, for example, attempted to improve screen clarity
and readability by making screens less crowded.
– Separate items, which had been combined on the same display line
to conserve space, were placed on separate lines instead.
– The result screen users were about 20 percent more productive
with the less crowded version.

Bad Designs
Bad designs
•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?
From: www.baddesigns.com

Good and bad
design
• What is wrong with the
right hand remote?
• Why is the left hand
remote so much better
designed?
– Peanut shaped to fit in
hand
– Logical layout and color-coded,
distinctive buttons
– Easy to locate buttons

My Choice
iPod
•Pros:
– portable
– power
– ease of use
•Cons:
– scratches easily
– no speech for car use
– proprietary

Website Performance
Trade-offs
• 72 pixel กเ็พียงพอแล้ว มากกว่านี้
จะทำาให้ดาวน์โหลดช้า
• อย่าใส่เสียงบนหน้าโฮมเพจ
• มีวิธีที่จะทำาให้ถูกเลือกจาก Search
Engine ดีขึ้นและเร็ว
• ใช้กราฟฟิคง่ายๆ
• ใช้สีไม่เกิน 216 สีมาตรฐาน
• ใช้สีแบบเป็นโค้ด แทนการใช้ชื่อ
ตรงๆ
• ให้กำาหนดขนาดของกราฟฟิคเลย
• ทำาการลดขนาดของรูปก่อนด้วย
Tools เช่น PS
• ใช้สีช่วยในการจำาที่ดีขนึ้ เช่น IBM
จะใช้สีฟ้า
• ระหว่าง GIF, JPEG ถ้าเป็นรูปเช่น
เส้น หรือปุ่มรายละเอียดไม่ มากควร
ใช้ GIF ถ้ารายละเอียดมากใช้ JPEG
• ใช้สีน้อย จะทำาให้ประมวลผลได้เร็ว
ขึ้น
• ใช้ Animated GIF ให้น้อยที่สุด
• ถ้าใช้ Animation มากไปจะทำาให้
เกิดความรำาคาญ
• ลดการใช้โค้ดที่ไม่จำาเป็นลง
• ใส่ / ตามหลังลิงค์ทำาให้สามารถเข้า
ถึงได้เร็วขึ้น
• ใช้ Netmechanic.com เพื่อตรวจ
สอบประสิทธิภาพ
• ให้ใช้http://รูปเดิมwww.ใช้ในnetmechanic.หลายๆตำาแหcom
น่ง
เพื่อเก็บเป็น Cache ในเครื่องทำาให้
โหลดไวขึ้น

Understanding
users’ needs
– Need to take into account what people are good and
bad at
– Listen to what people want and get them involved
– Use tried and tested user-centered methods

Activity
• How does making a call differ when using
a:
– Cell phone
VS
– Public phone box?
• Consider the kinds of user, type of activity
and context of use

Human vs Computer
Computers
• Fast
• Efficient
• Rigid
• finite.
Humans
• Slower
• Inefficient
• Flexible
• expansive.

ส่วนประกอบสำาคัญ
5 ประการ
ในการคำานึงถึงผู้ใช้
เป็นสำาคัญ
1.ระยะเวลาในการเรียนรู้ (Time to Learn)
2.ความรวดเร็วในการประมวลผล(Speed of
Performance)
3.อัตราความผิดพลาดจากการใช้งาน(Rate of Errors)
4.การเรียนรู้ (Retention Over Time)
5.การวัดความพึงพอใจของผู้ใช้ (Subjective
Satisfaction)

Usability
Motivations
• Life-critical system
• Industrial and commercial uses
• Home & Entertain
• Exploratory, Creative
• Sociotechnical system

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 optimize the interactions users have
with a product
– So that they match the users’ activities and
needs

Interaction
Styles
1. Batch interface
2. Command-line user interface
3. Graphical user interface
4. Direct manipulation

Batch
interface
• non-interactive user interfaces
• ผใู้ช้กำาหนดรายละเอียดของงานล่วงหน้าให้แก่
batch processing และรับ output เมื่อเสร็จสนิ้
การประมวลผล ข้อดี
•ทำาได้ง่าย ประหยัด
•ตรงไปตรงมา
ข้อเสีย
•ช้า
•ไม่เหมาะสำาหรับ non-expert user

Command line
user interface
• ข้อดี
• ยืดหยุ่นได้
• expert users.
• สนับสนุนการใช้ script
หรือ macros.
• เหมาะสำาหรับการ
ปฏิสัมพันธ์กับ
คอมพิวเตอร์บนเครือ
ข่ายที่มีความเร็วในการ
รับส่งข้อมลู
(bandwidth) ตำ่า
เป็นการโต้ตอบกับระบบโดยที่ผู้ใช้จะต้อง
พิมพ์คำาสั่งลงในช่องป้อนคำาสั่ง เพื่อ
กระตุ้นให้เกิดการทำางานในระบบผู้ใช้จะ
ต้องจำาคำาสั่ง ไวยากรณ์ และกฎเกณฑ์
ต่างๆเช่น ผู้ใช้ที่ชำานาญการใช้ระบบ
ปฏิบัติการ DOS

Command line
user interface
• ข้อเสีย
• การ error สงู
• ไมเ่หมาะสำาหรับ non-expert
user

Form Filling
• ข้อดี
• ทำาให้การคีย์ข้อมูลเข้า
ง่าย
• สามารถกำาหนดค่าล่วง
หน้าได้
• ใช้พื้นที่บนหน้าจอมาก

Menu Selection
• ข้อดี
• สำาหรับผู้ใช้ทั่วไป
• ดึงดูด expert userถา้
ต้องการการแสดงเพื่อ
การเลือกที่รวดเร็ว
• สนับสนุนการสำารวจคำา
สั่ง
• ช่วยในการตัดสินใจ
• เมนู overload

Direct
Manipulation
เป็นการจับเอาสิ่งที่ user
ต้องการและที่เราจะนำา
เสนอมาไว้รวมกนั
ข้อดี
•เห็นภาพชัด
•ง่ายต่อการเรียนรู้
•สามารถหลีกเลี่ยง
Errorsได้ง่าย
•กระตุ้นการสำารวจ
•ความพึงพอใจสูง
•ช่วยทางด้านความจำา

Direct
Manipulation
• ยากในการเขียน
โปรแกรม
• ไม่เหมาะกับการแสดง
กราฟิกขนาดเล็ก
• บางครั้งผู้ใช้ไม่ชอบ
การนำาเสนอ
• Expert user อาจไม่
ชอบ

ทำายังไงถึงออกแบบให้มี
ประสิทธิภาพ ความปลอดภัย ความ
เชื่อถือ แก่ผู้ใช้สูงสุด?
HCI กับ USER
INTERFACE

user-friendly; easy to use;
accessible; comprehensible
GOOD USER
INTERFACE =
USABILITY การใช้ประโยชน์
ได้

UUsseerr--cceenntteerreedd
ddeessiiggnn
• “Know the users” รู้จักผู้ใช้
– Novice สมัครเล่น
– Expert ผู้เชี่ยวชาญ
• Cognitive abilities ความสามารถ
– visual & aural perception เห็น
ฟัง
– physical manipulation การ
ควบคุมร่างกาย
– memory ความจำา
• Organizational / job abilities การ
จัดการ การทำางาน
• Keep users involved throughout
project ให้ผู้ใช้มีความเกี่ยวข้อง
ตลอดการทำางาน

Assignmen
ts
1. แลกโทรศัพท์มือถือกับเพื่อน ที่ใช้ต่างยี่ห้อกัน โดยไม่ได้
เรียนรู้การใช้งานจากเพื่อนหรือ
คู่มือ ให้ทดลองใช้โทรศัพท์ทำาสิ่งต่อไปนี้
•จากหมายเลขโทรศัพท์ของเครื่องที่แลกกับเพื่อน ทำาการโทรไปที่
เบอร์ดังกล่าว โดยไม่ใช้ข้อมูลที่เกบ็ใน memory ของเครื่อง
•เช็คดูว่ามี message (SMS) ใหม่เข้ามาหรือไม่
•ทำาการอ่าน message ล่าสุด 3 รายการแรกในเครื่อง
•ทำาการส่ง SMS ข้อความ Hello I am testing the m-phone
usability. ไปยังเครื่องที่แลกกับเพื่อน
•เปลยี่น ringtone ของเครื่อง
•ตั้งเวลาเตือน/ปลุก
//ในขณะที่เพื่อนคนหนึ่งกำาลังทดลองใช้อยู่ ให้อีกคนที่เป็น
เจ้าของคอยสังเกตพฤติกรรมการใช้ โดยพยายามไม่ให้
ความช่วยเหลือใด ๆ นอกจากที่จำาเป็น ทำาการจับเวลาที่ใช้
ในการทำาแต่ละอย่างข้างต้น จดบันทึกความเห็นในแง่ความ

Assignmen
ts
2. ให้นักศึกษาเลือกเว็บไซต์ทเี่ป็นตัวอย่าง HCI ทดีี่
มา 1 เว็บไซต์ และเว็บไซต์ทเี่ป็นตัวอย่าง HCI ทไี่ม่ดี
มา 1 เว็บไซต์ พร้อมทงั้บอกเหตุผลและแนวทาง
แก้ไข

�ݺ�ߣ

Hci week1 stamford edit

More Related Content

Hci week1 stamford edit