การปฏสมพนธ (Interaction)

DC282: Human Computer Interaction

อ.พราวชญ ภาคนนทกล

DC282: Human Computer Interaction

คณะสารสนเทศและการสอสาร

http://wwwpeerawich com/dc282http://www.peerawich.com/dc282

การปฏสมพนธ (Interaction)

วตถประสงคของการศกษาการปฏสมพนธ ?

การชวยเหลอใหผใชสามารถทางานตามขอบเขตงาน

หรอตามเปาหมายทกาหนดใหสาเรจ

คาศพททใชในการปฏสมพนธ

Domain Goal TaskDomain Goal Task

Domain หมายถง ขอบเขตของการทางานทอาศยความ

เชยวชาญและความรของกจกรรม หรอขอบเขตการทางานภายใตเชยวชาญและความรของกจกรรม หรอขอบเขตการทางานภายใต

การศกษาเรองใดเรองหนง

G hi  d i  d i   เชน Graphic design domain คอขอบเขตการทางานทมแนวคดเรองรปทรงตางๆ และการวาดพนผวเปนตน

G l  ใ Goal หมายถง ผลลพธหรอสงทนกศกษาตองการทาใหสาเรจ

เชน ตองการสรางรปทรงสามเหลยมสแดงลวนบนผนผาใบ

Task หมายถง การปฏบตเพอทาคาสงทตองการหรอTask หมายถง การปฏบตเพอทาคาสงทตองการหรอ

ภารกจ เชน เลอกเครองมอเตม (Fill) และคลกบนรปทรงสามเหลยม

ขอผดพลาดของคน (Human error ‐ slips and mistake)

ผด (Mistake) vs พลาด (Slips)ผด (Mistake) vs พลาด (Slips)

ตางกนอยางไร ยกตวอยาง?

ผด (Mistake)

คนหาขอมล การขยายภาพคนหาขอมล การขยายภาพ

ผใชไมเขาใจระบบหรอยงไมชนกบระบบ แลวใชระบบอยางผดๆ ๆ

พลาด (Slips)

คลกปม save ผดเปน cancelคลกปม save ผดเปน cancel

ผใชรระบบเปนอยางดและทาขนตอนอยางถกตอง แตทาพลาดผใชรระบบเปนอยางดและทาขนตอนอยางถกตอง แตทาพลาด

Model of Interaction(แบบจาลองการปฏสมพนธ)(แบบจาลองการปฏสมพนธ)

ผใช และ ระบบ โดยผานตวกลางคออนเทอรเฟส (Interface)

ฟ ใ ป ไ ?อนเทอรเฟส แสดงในรปแบบของอะไรบาง ?

ภาพ เสยง ตวอกษร แรงสน

จากแบบจาลองของการปฏสมพนธ จะชวยให

ใ ไ ?นกศกษาเขาใจ อะไรบาง?

• มอะไรเกดขนระหวางการปฏสมพนธ• ชวยชใหเหนตนตอปญหาของการปฏสมพนธทไมทาใหเกดประสทธผล ชวยชใหเหนตนตอปญหาของการปฏสมพนธทไมทาใหเกดประสทธผล• ใชในการเปรยบเทยบความแตกตางระหวางการปฏสมพนธแตละรปแบบ

Norman's model of interaction(แบบจาลองการปฏสมพนธของนอรแมน)(แบบจาลองการปฏสมพนธของนอรแมน)

แบบจาลองทมอทธพลมากทสด

เนนเปาหมายและการกระทาของผใชตออนเทอรเฟสเปนหลกเนนเปาหมายและการกระทาของผใชตออนเทอรเฟสเปนหลก

7 ขนตอน : แบบจาลองการปฏสมพนธของนอรแมน

1. เกดเปาหมาย (Establishing the goal) F i  th  i t ti )2. คดวธ (Forming the intention)

3. ระบการกระทา (Specifying the action sequence)4. กระทา (Executing the action)5. ดผลลพธ (Perceiving the system state) ( g y )6. ตความ (Interpreter the system state)7 ประเมนผล (Evaluating the system state with 7. ประเมนผล (Evaluating the system state with respect to the goals and intentions)

ชวงกระทา (Execution phase) ขนตอนท 2 - 4

l สถานะของเปาหมายหรอ goal ผใชเรมกาหนดเปาหมายการทางานในขนตอนท (1)

คดวธ / ระบการกระทา / กระทา

ดผลลพธ / ตความ / ประเมนผล

ชวงประเมนผล(Evaluation phase) ขนตอนท 5 7ชวงประเมนผล(Evaluation phase) ขนตอนท 5 - 7

ตวอยาง สมมตวานกศกษากาลงนงอานหนงสออยในหอง

ตอนหวคา เรมมองตวหนงสอไดไมชด

นกศกษาลองออกแบบ 7 ขนตอนตามแบบจาลอง

ของนอรแมน

1. เกดเปาหมาย ตองการทจะทาใหหองสวางขน

ชวงกระทา (Execution phase)

2. คดวธ ทาใหหองสวาง สมมตวาใชวธเดนไปเปดสวทชไฟ ยงมวธอน

อกหลายวธ จดเทยน สองไฟฉาย ฯลฯอกหลายวธ จดเทยน สองไฟฉาย ฯลฯ

3 ระบการกระทา วางลาดบการเปดสวทชไฟ3. ระบการกระทา วางลาดบการเปดสวทชไฟ

4. กระทา กระทาตามทไดวางลาดบไว คอ ลกขนแลวเดนไปเปด

สวทชไฟสวทชไฟ

ชวงประเมนผล(Evaluation phase)

ชวงประเมนผล(Evaluation phase)

5. ดผลลพธ วาไฟตดหรอไม

6. ตความ สมมตวาไฟไมตด นกศกษาอาจจะตความวา หลอด

ไฟเสย สวทชไฟเสอม สายไฟเสย หรอไฟดบ และอาจจะ

กลบไปตงเปาหมายใหม แตหากไฟตด กจะไปประเมน

ผล

ไฟสวางพอหรอยง ถาพอแลว กจบขนตอน แตถาสวาง7. ประเมนผล ไฟสวางพอหรอยง ถาพอแลว กจบขนตอน แตถาสวาง

ไมพอ กจะคดวธใหม โดยยงมเปาหมายเดมอย

แบบจาลองของนอรแมนเปนเครองมอทมประโยชนใช

สาหรบอธบายทาความเขาใจตอการปฏสมพนธให

กระจางขน

แบบจาลองของนอรแมนเนนทมมมองจากผใชระบบตอ

ป ไ ไ ส ใ ส สการปฏสมพนธเทานน แตไมไดสนใจการสอสารของ

ระบบผานทางอนเทอรเฟส

Ab d d B l  f kAbowd and Beale framework(กรอบของเอบาวดและบล)( )

Abowd and Beale framework(กรอบของเอบาวดและบล) แตกแขนงตอจากแบบจาลองของนอรแมน

ชวงประเมนผล

US

ชวงประเมนผล

U

(Task language)(C  l ) (Task language)(Core language)

ชวงกระทา

ผใช อนพต ระบบ และเอาตพต แตละสวนมภาษา ของตวเองผใช อนพต ระบบ และเอาตพต แตละสวนมภาษา ของตวเอง

1

ผใชจะแปลความตองการของตวเอง เปนการกระทาไปยงอนเตอรเฟส

2

แปลความตองการสงไปยงระบบ

3

ระบบจะสะทอนผลลพธออกมา

4

ผใชตความผลลพธทได

ตวอยางรปแบบการปฏสมพนธ

l )(Ex: Interaction styles)

ใ โ โ ไสงทผใชสอสารและโตตอบกบระบบโดยทวไป

อนเตอรเฟสมรปแบบอะไรบาง

• Command line interface

 Command line interface• Menu• Natural Language• Natural Language• Question/Answer and query dialogue F fill   d  d h• Form‐fills and spreadsheets• WIMP• Point and click• Three‐dimensional interfaces Three dimensional interfaces

สวนตอประสานแบบบรรทดคาสง

(Command line interface)( )

อนเตอรเฟสรนแรกสดทผใช ใชตดตอสอสารกบระบบโดยตรง

สวนตอประสานแบบบรรทดคาสง

(Command line interface)

ป ไ ใ

ขอด

คอเปนการเขาถงระบบไดรวดเรวและตรงทสด ทงยงสามารถใช

คาสงลดใหระบบทาางานทซาๆ ไดด เชน การเปลยนชอไฟลใหๆ

ขนตนดวยตวอกษรเดยวกน 1,000 ไฟลในคาสงเดยว

ขอเสย

คอ การเรยนรคาสงทาไดยากกวาอนเทอรเฟสประเภทอน

รายการเลอก (Menu)

อนเตอรเฟสแบบน มตวเลอกใหผใชตดสนใจบนจอภาพ โดยใชอปกรณเชน

เมาส คยบอรด ปมตวเลขหรอตวอกษร ดงนนตวเลอกจะตองเปนทเขาใจงาย

และไมคลมเครอ

l l )ภาษาธรรมชาต (Natural language)

การตอบโตกบระบบดวยภาษาของ

มนษย เชน การรจาเสยงพด

(Speech recognition)(Speech recognition)

การใช ภาษาธรรมชาตอาจทาใหเกดปญหาเรองความคลมเครอของ

เสยง เพราะผใชแตละคนอาจออกเสยงไมเหมอนกน

l l )ภาษาธรรมชาต (Natural language)

ระบบปจจบนทใชภาษาแบบธรรมชาตน จะกาหนด

ใช ใชขอบเขตการใชภาษาของผใชระบบ

ระบบอาจจะถามคาถามเพอใหผใชตอบสนๆ เชน ใช ไมใช

ป ใ ใ ใ โ เปนตน เพอใหงายกบระบบในการเขาใจการโตตอบ

สวนตอประสานสอบถาม (Query interface)

การรบขอมลจากผใชโดยการถามคาถาม หรอ ใหเลอกตวเลอกทกาหนด เชน

ไ แบบสอบถามทางเวบไซต

ฟอรมฟล (Form‐fills)

กรอกหรอปอนขอมลเขาหรอระบความตองการ ขอมลทสมพนธกนจะตองถกจดกรอกหรอปอนขอมลเขาหรอระบความตองการ ขอมลทสมพนธกนจะตองถกจด

วางบนฟอรมใหอยใกลเคยงกน

สเปรดชต (Spreadsheets)

มลกษณะเปนตารางซงแบงออกเปนเซลล แตละเซลลจะบรรจคาหรอ สตรมลกษณะเปนตารางซงแบงออกเปนเซลล แตละเซลลจะบรรจคาหรอ สตร

คานวณ ซงสตรคานวณสามารถนาคาจากเซลลอนๆมาคานวณได ผใช

ป ป ป ป สามารถปอนขอมลหรอเปลยนแปลงขอมลบน สเปรดชต

สวนตอประสาน WIMP (WIMP interface)

WIMP คออะไร?

Window, Icon, Menu และ Pointer

สวนตอประสาน WIMP (WIMP interface)

อนเทอรเฟสทนกศกษาคนเคยกนมากทสด เชน โปรแกรมระบบปฎบตการ

O ti  S t ) ไ ป Wi d  M OS (Operating System) ไมวาจะเปน Windows, MacOS หรออนๆ ทประกอบดวยหนาตางโปรแกรม ไอคอนรปตางๆ เมนสาหรบการทางาน

ใ ใ ใ และลกศรทใชเมาสเลอนเพราะงายในการควบคมและใชงาน

สวนตอประสานชและคลก (Point and click interfaces)

อนเทอรเฟสโดยการใหคลกเพอทางาน ผใชระบบเพยงแคใชเมาสชทบรเวณท

ตองการสงระบบ แลวคลก เชน การคลก link ในเวบไซตตองการสงระบบ แลวคลก เชน การคลก link ในเวบไซต

สวนตอประสานแบบสามมต (Three dimensional interfaces)

เรมมการใชอนเตอรเฟสแบบสามมตกนมากขน ทเหนไดชดกคอระบบเวอรชวลเรยวลต

(Virtual Reality: VR) ททาใหผใชระบบรสกเสมอนอนเทอรเฟสมความลก y ความหนา

Download ใบงานท 5 จากเวบ DC282

- งานค ทาใน ms powerpoint

Download ใบงานท 5 จากเวบ DC282

- งานค ทาใน ms.powerpoint

ใหนกศกษาอธบายการออกแบบซอฟตแวร หรอโปรแกรม

(Software/Application) บนโทรศพทมอถอ (คของตนเองโดยเลอกมา

1 ยหอ) โดยอธบายทละหนาจอของการใชงานตงแตเรมตนของ Software )

ดงตอไปน

Software การถายภาพ+ ดภาพหลงจากการถาย

Software ฟงเพลง + เลอกรายการเพลง

Capture Music Library11:36 am

Artists

Albums

Playlists

All All songs

Podcasts

Option Exit Option Exit

Genres

p

ตวอยาง การอธบายโดยใชภาพวาด

ตวอยาง การอธบายโดยใชภาพจรงตวอยาง การอธบายโดยใชภาพจรง