Chapter Chapter 1 1 ปฏสมพ นธ ระหว างผ ใช และปฏสมพ นธ ระหว างผ ใช และ

คอมพวเตอร คอมพวเตอร Human-Computer Human-Computer

Interface [HCI]Interface [HCI]ITE 254 by ITE 254 by ออ .. สร พร ฑตะล ำาพ น สร พร ฑตะล ำาพ น

siripornthita@gmail.comsiripornthita@gmail.com

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

Evaluation

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 User Interface: Strategies for Effective Human-Computer Interaction:.

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 Designs6. The User Experience7. The Process of Interaction Design8. Assignments

Introduction

Human–computer interface (HCI),alternatively man machine interaction (MMI) or computer–human interaction (CHI) is the study of interaction between people (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

FunctionalFunctional SafeSafeUsableUsable

••Easy to learnEasy to learn••Easy to useEasy to use

เปาหมายของ 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 capabilities of the system.

• It is also the vehicle through which many critical tasks are presented. These tasks often have a direct impact on 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

Bad designs

Bad designs

• 72 pixel กเพยงพอแลว มากกวานจะทำาใหดาวนโหลดชา

• อยาใสเสยงบนหนาโฮมเพจ• มวธทจะทำาใหถกเลอกจาก Search

Engine ดขนและเรว• ใชกราฟฟคงายๆ• ใชสไมเกน 216 สมาตรฐาน• ใชสแบบเปนโคด แทนการใชชอ

ตรงๆ• ใหกำาหนดขนาดของกราฟฟคเลย• ทำาการลดขนาดของรปกอนดวย

Tools เชน PS• ใชสชวยในการจำาทดขน เชน IBM

จะใชสฟา

Website Performance Trade-offs

• ระหวาง GIF, JPEG ถาเปนรปเชน เสน หรอปมรายละเอยดไม มากควร

ใช GIF ถารายละเอยดมากใช JPEG• ใชสนอย จะทำาใหประมวลผลไดเรว

ขน• ใช Animated GIF ใหนอยทสด• ถาใช Animation มากไปจะทำาให

เกดความรำาคาญ• ลดการใชโคดทไมจำาเปนลง• ใส / ตามหลงลงคทำาใหสามารถเขา

ถงไดเรวขน• ใช Netmechanic.com เพอตรวจ

สอบประสทธภาพ• ใหใชรปเดมใชในหลายๆตำาแหนง

เพอเกบเปน Cache ในเครองทำาใหโหลดไวขน

http://www.netmechanic.com

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– Public phone box?

• Consider the kinds of user, type of activity and context of use

VS

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

ทำายงไงถ งออกแบบใหม ประสทธ ภาพ ความปลอดภย ความ

เช อถ อ แก ผ ใช สงสด?

GOOD USER INTERFACE = USABILITY การใชประโยชนได

user-friendly; easy to use; accessible; comprehensible

User-centered User-centered designdesign

• “Know the users” รจกผใช– Novice สมครเลน– Expert ผเชยวชาญ

• Cognitive abilities ความสามารถ– visual & aural perception เหนฟง

– physical manipulation การควบคมรางกาย

– memory ความจำา• Organizational / job abilities การ

จดการ การทำางาน• Keep users involved throughout

project ใหผใชมความเกยวของตลอดการทำางาน

Assignments

1. แลกโทรศพทม อถ อก บเพ อน ทใช ต างย ห อก น โดยไมได เร ยนร การใชงานจากเพอนหร อ

คม อ ให ทดลองใชโทรศ พทท ำาส งต อไปน• จากหมายเลขโทรศพทของเครองทแลกกบเพอน ทำาการโทรไปท

เบอรดงกลาว โดยไมใชขอมลทเกบใน memory ของเครอง• เชคดวาม message (SMS) ใหมเขามาหรอไม• ทำาการอาน message ลาสด 3 รายการแรกในเครอง• ทำาการสง SMS ขอความ Hello I am testing the m-phone usability. ไปยงเครองทแลกกบเพอน• เปลยน ringtone ของเครอง•ตงเวลาเตอน/ปลก// ในขณะทเพ อนคนหนงก ำาล งทดลองใชอย ให อ กคนทเป น

เจ าของคอยสงเกตพฤตกรรมการใช โดยพยายามไมให ความชวยเหล อใด ๆ นอกจากทจ ำาเป น ท ำาการจ บเวลาทใช

ในการทำาแต ละอย างข างต น จดบนทกความเห นในแง ความ ยากง ายในการใชงานสำาหร บแต ละรายการขางต น ( ง าย

ปานกลาง ยาก)

Assignments

2. ใหนกศกษาเล อกเว บไซตท เป นต วอยาง HCI ทด มา 1 เว บไซต และเว บไซตท เป นต วอยาง HCI ทไมด มา 1 เว บไซต พร อมทงบอกเหตผลและแนวทาง

แกไข