hci week1 stamford edit
Post on 22-Jul-2015
171 Views
Preview:
TRANSCRIPT
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 เว บไซต พร อมทงบอกเหตผลและแนวทาง
แกไข
top related