Hci week1 stamford edit
-
Upload
puise-thitalampoon -
Category
Education
-
view
170 -
download
0
Transcript of Hci week1 stamford edit
![Page 1: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/1.jpg)
Chapter Chapter 1 1 ปฏสมพ นธ ระหว างผ ใช และปฏสมพ นธ ระหว างผ ใช และ
คอมพวเตอร คอมพวเตอร Human-Computer Human-Computer
Interface [HCI]Interface [HCI]ITE 254 by ITE 254 by ออ .. สร พร ฑตะล ำาพ น สร พร ฑตะล ำาพ น
[email protected]@gmail.com
![Page 2: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/2.jpg)
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
![Page 3: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/3.jpg)
Evaluation
• Group Assignment 10 points• Individual Assignments 10 points• Class & Activities Attendance 10 points• Midterm examination 30 points• Final Examination 40 points
Total 100
![Page 4: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/4.jpg)
Evaluation
![Page 5: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/5.jpg)
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:.
![Page 6: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/6.jpg)
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
![Page 7: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/7.jpg)
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.
![Page 8: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/8.jpg)
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?
![Page 9: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/9.jpg)
Definition
ACM หรอ the Association for Computer Machinery ไดนยาม HCI วา คอ องคความรท
เกยวของกบการออกแบบ การประเมนผล และการนำาไปใชของระบบคอมพวเตอรแบบมปฏสมพนธ
ของมนษย และศกษาเกยวกบ ปรากฏการณตางๆ ทเกยวของ
โดยสรป HCI หมายถง การศกษาและวเคราะห เกยวกบ ปฎสมพนธ ระหวางอปกรณคอมพวเตอร
หรอระบบคอมพวเตอร กบผใชงาน เพอตอบโจทย วาทำาอยางไรจงจะทำาใหระบบคอมพวเตอร ใชงาน
งาย มประสทธภาพ และประสทธผล โดยประยกตใช ศาสตรหลายๆ ดานเขาดวยกน
![Page 10: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/10.jpg)
องคประกอบของHuman-Computer
Interface-HCI
![Page 11: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/11.jpg)
Goals of HCI
FunctionalFunctional SafeSafeUsableUsable
••Easy to learnEasy to learn••Easy to useEasy to use
เปาหมายของ HCI คอ การผลตระบบการปฏสมพนธระหวางมนษยและคอมพวเตอรทมความปลอดภย(Safety) ,ทำาให มประโยชนใชไดจรง (Utility) ,มประสทธผลทำางานไดเรว(Effectiveness), มประสทธภาพใชทรพยากรคม
คา(Efficiency) และสามารถนำาไปใชไดจรง งายตอการเรยนร โดยมประสทธภาพ + ประสทธผล ( Usability)
![Page 12: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/12.jpg)
ขนตอนทจะนำาไปสเปา หมายของ HCI
✤ Understand : เขาใจในเรองจตวทยา ✤ Develop : พฒนาเครองมอและเทคนค ✤ Achieve : ทำาการปฏสมพนธใหมประสทธภาพ
![Page 13: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/13.jpg)
ความสำาเร จของUI
![Page 14: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/14.jpg)
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
![Page 15: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/15.jpg)
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)
![Page 16: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/16.jpg)
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.
![Page 17: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/17.jpg)
ทำาไมตองเร ยนHCI
• เปนสวนสำาคญทตองปฏบตจรงของโปรแกรม
• เราเปนผสรางโปรแกรมสำาหรบผใชอนๆไมใชตวเอง
• User Interface (UI) ทไมดทำาใหคาใชจายในการปฏบตงานเพมขน
• เปนเรองยากในการออกแบบ UI ทด–การเดาใจคนเปนสงททำาไดยาก
![Page 18: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/18.jpg)
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.
![Page 19: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/19.jpg)
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
![Page 20: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/20.jpg)
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
![Page 21: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/21.jpg)
My Choice
iPod •Pros:
– portable– power– ease of use
•Cons:– scratches easily– no speech for car use– proprietary
![Page 22: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/22.jpg)
Bad designs
![Page 23: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/23.jpg)
Bad designs
![Page 24: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/24.jpg)
![Page 25: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/25.jpg)
![Page 26: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/26.jpg)
![Page 27: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/27.jpg)
• 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
![Page 28: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/28.jpg)
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
![Page 29: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/29.jpg)
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
![Page 30: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/30.jpg)
Human vs Computer
Computers
• Fast• Efficient• Rigid
• finite.
Humans
• Slower• Inefficient• Flexible
• expansive.
![Page 31: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/31.jpg)
สวนประกอบสำาคญ 5 ประการ
ในการคำานงถงผใชเปนสำาคญ
1.ระยะเวลาในการเรยนร (Time to Learn)
2.ความรวดเรวในการประมวลผล(Speed of Performance)
3.อตราความผดพลาดจากการใชงาน(Rate of Errors)
4. การเรยนร (Retention Over Time)
5. การวดความพงพอใจของผใช (Subjective Satisfaction)
![Page 32: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/32.jpg)
Usability Motivations
• Life-critical system
• Industrial and commercial uses
• Home & Entertain
• Exploratory, Creative
• Sociotechnical system
![Page 33: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/33.jpg)
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
![Page 34: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/34.jpg)
Interaction Styles
1. Batch interface
2. Command-line user interface
3. Graphical user interface
4. Direct manipulation
![Page 35: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/35.jpg)
Batch interface
• non-interactive user interfaces
• ผใชกำาหนดรายละเอยดของงานลวงหนาใหแกbatch processing และรบ output เมอเสรจสนการประมวลผล
ขอด • ทำาไดงาย ประหยด• ตรงไปตรงมาขอเส ย•ชา• ไมเหมาะสำาหรบ non-expert user
![Page 36: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/36.jpg)
Command line user interface
• ขอด • ยดหยนได• expert users.• สนบสนนการใช script
หรอ macros.• เหมาะสำาหรบการปฏสมพนธกบคอมพวเตอรบนเครอขายทมความเรวในการ
รบสงขอมล(bandwidth) ตำา
เปนการโตตอบกบระบบโดยทผใชจะตอง พมพคำาสงลงในชองปอนคำาสง เพอ
กระตนใหเกดการทำางานในระบบผใชจะ ตองจำาคำาสง ไวยากรณ และกฎเกณฑ
ตางๆเชน ผใชทชำานาญการใชระบบ ปฏบตการ DOS
![Page 37: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/37.jpg)
Command line user interface
• ขอเสย• การ error สง• ไมเหมาะสำาหรบ non-
expert user
![Page 38: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/38.jpg)
Form Filling
• ขอด • ทำาใหการคยขอมลเขางาย
• สามารถกำาหนดคาลวงหนาได
• ขอเสย• ใชพนทบนหนาจอมาก
![Page 39: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/39.jpg)
Menu Selection
• ขอด • สำาหรบผใชทวไป• ดงดด expert userถาตองการการแสดงเพอการเลอกทรวดเรว
• สนบสนนการสำารวจคำาสง
• ชวยในการตดสนใจ• ขอเสย• เมน overload
![Page 40: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/40.jpg)
Direct Manipulation
เปนการจบเอาสงท user ตองการและทเราจะนำา
เสนอมาไวรวมกนขอด •เหนภาพชด•งายตอการเรยนร• สามารถหลกเลยงErrorsไดงาย•กระตนการสำารวจ•ความพงพอใจสง•ชวยทางดานความจำา
![Page 41: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/41.jpg)
Direct Manipulation
• ขอเสย• ยากในการเขยนโปรแกรม
• ไมเหมาะกบการแสดงกราฟกขนาดเลก
• บางครงผใชไมชอบ การนำาเสนอ
• Expert user อาจไมชอบ
![Page 42: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/42.jpg)
HCI กบ USER INTERFACE
ทำายงไงถ งออกแบบใหม ประสทธ ภาพ ความปลอดภย ความ
เช อถ อ แก ผ ใช สงสด?
![Page 43: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/43.jpg)
GOOD USER INTERFACE = USABILITY การใชประโยชนได
user-friendly; easy to use; accessible; comprehensible
![Page 44: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/44.jpg)
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 ใหผใชมความเกยวของตลอดการทำางาน
![Page 45: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/45.jpg)
Assignments
1. แลกโทรศพทม อถ อก บเพ อน ทใช ต างย ห อก น โดยไมได เร ยนร การใชงานจากเพอนหร อ
คม อ ให ทดลองใชโทรศ พทท ำาส งต อไปน• จากหมายเลขโทรศพทของเครองทแลกกบเพอน ทำาการโทรไปท
เบอรดงกลาว โดยไมใชขอมลทเกบใน memory ของเครอง• เชคดวาม message (SMS) ใหมเขามาหรอไม• ทำาการอาน message ลาสด 3 รายการแรกในเครอง• ทำาการสง SMS ขอความ Hello I am testing the m-phone usability. ไปยงเครองทแลกกบเพอน• เปลยน ringtone ของเครอง•ตงเวลาเตอน/ปลก// ในขณะทเพ อนคนหนงก ำาล งทดลองใชอย ให อ กคนทเป น
เจ าของคอยสงเกตพฤตกรรมการใช โดยพยายามไมให ความชวยเหล อใด ๆ นอกจากทจ ำาเป น ท ำาการจ บเวลาทใช
ในการทำาแต ละอย างข างต น จดบนทกความเห นในแง ความ ยากง ายในการใชงานสำาหร บแต ละรายการขางต น ( ง าย
ปานกลาง ยาก)
![Page 46: Hci week1 stamford edit](https://reader030.fdocument.pub/reader030/viewer/2022020218/55aee0a51a28ab5f618b4572/html5/thumbnails/46.jpg)
Assignments
2. ใหนกศกษาเล อกเว บไซตท เป นต วอยาง HCI ทด มา 1 เว บไซต และเว บไซตท เป นต วอยาง HCI ทไมด มา 1 เว บไซต พร อมทงบอกเหตผลและแนวทาง
แกไข