Chapter 02: การออกแบบปฏสมพนธ222122 การออกแบบการปฏสมพนธระหวางมนษยและคอมพวเตอร

Pratya Nuankaew, Ph.D.

School of Information and Communication Technology, University of Phayao

Chapter 02: การออกแบบปฏสมพนธ

Perception: การรบร

การเกบขอมลเขาสความทรงจ าระยะยาว

กระบวนการในการคด (Thinking)

ทฤษฎทางดานอารมณ (Emotion)

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

2

Perception: การรบร

การรบรทางการมองรปภาพ (Vision)

การรบรจากการอาน (Reading)

การรบรโดยการฟง (Hearing)

การรบรโดยการสมผส (Touch)

การรบรโดยการเคลอนไหว (Movement)

การเกบขอมลในสวนของความทรงจ า (Memory)

3

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

Vision: การรบรทางการมองรปภาพ

ตนไม: เปนคนเงยบๆ มความเปนตวของตวเองสง (อนดนดๆ) พอใจทจะอยอยางสบายใจมากกวา

กอรลา: กระตอรอรน ทะเยอทะยาน ชนชอบความสมบรณแบบ เปนคนทหากจะทม กทมเทไปสดทาง

สงโต: มลกษณะนสยทเดนชด คณรวาตวเองเปนคนอยางไร ชอบหรอไมชอบสงไหน

ปลา: เปนคนออนโยน และออนไหว ลกษณะเดนคอเปนคนทแคร และเขาใจคนอน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

4

Vision: การรบรทางการมองรปภาพ

เดกทารก: ชอบอสระ ชอบใชชวตอยกบตวเอง

ครก: เปนคนทจรงจงกบเรองมตรภาพและ ความสมพนธสดๆ ไมไดชอบงานสงสรรค หรอปารตใหญๆ

ตนไม: เปนคนทสดใส และมชวตชวา กลาหาญ และเปดรบประสบการณใหม กลาทออกไปดโลก

ไมกลวความเปลยนแปลง

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

5

Vision: การรบรทางการมองรปภาพ

การรบรทางการมองรปภาพ (Vision) สวนการรบรม 2 ขนตอน ดงนคอ

การมองเหนวตถทมาจากสงเราอนๆ

การน ารปทมองเหนไปแปลความหมาย

ในขนตอนในการแปลงสญญาณรปภาพอาศยองคประกอบดงนคอ

ขนาดและความลก (Size and depth)

ความสวางของแสง (Brightness)

ส (Color)

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

6

Vision: การรบรทางการมองรปภาพ

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

7

Paradox ความขดแยงบทความลงรอย

http://mathminton.blogspot.com/2010/11/paradox-incpetion.html

Vision: การรบรทางการมองรปภาพ

เกลยวของเฟรเซอร (Fraser’s Spiral)

มนถกเรยกวา “ภาพลวงตาเทจ” ซงถกสรางจากวงกลมธรรมดาททบซอนกน รปแบบเกลยวกนหอยทเหนจรงๆ มนเปนแคชดของวงกลมเทานน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

8

Vision: การรบรทางการมองรปภาพ

ภาพลวงตาเอบบงกเฮาส (Ebbinghaus illusion)

จากภาพคณจะเหนวาวงกลมสสมดานขวามขนาดใหญกวา แตจรงๆ แลว มนมขนาดเทากน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

9

Vision: การรบรทางการมองรปภาพ

ภาพลวงตาจสโทรว (Jastrow illusion)

ภาพลวงตาของนกจตวทยาชาวอเมรกน โดยรปทรงทคณเหนอยน อาจคดวา B ยาวกวา A แตจรงๆ แลว พวกมนทงค มขนาดเทากน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

10

Vision: การรบรทางการมองรปภาพ

ภาพลวงตาเคลอนไหว (Motion Illusion)

ดวยความแตกตางของส และวธการจดวาง ท าใหเวลาคณกวาดตาไปบนภาพลวงตาน จะเหนวามนมการเคลอนไหวตลอดเวลา ทงๆ ทจรงๆ แลว มนเปนภาพนงธรรมดาๆ

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

11

ผลตอการออกแบบระบบอนเกดจากภาพลวงตา

ผลของการเกดภาพลวงตาจากองคประกอบของวตถ ท าใหลกษณะของวตถทแทจรง กบการมองเหนผานระบบคอมพวเตอรมความแตกตางกน โดยเฉพาะในเรองรปทรงของวตถ

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

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

12

ผลจากการออกแบบระบบทเกยวของกบการมองเหน

ความสามารถในการอานและแยกความแตกตางระหวางตวอกษรและรปภาพของมนษย จะเปนไปในทศทางตรงกนขามกบจดทสายตาก าลงเพงมองอย อนเนองมาจากการท างานของ เซลลรปกรวย (Cones) ตวอยางจากการมองตวอกษรตอไปน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

13

A B C D E F . H I J K L

ผลจากการออกแบบระบบทเกยวของกบการมองเหน

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

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

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

14

Reading: การรบรจากการอาน

การประมวลผลของสมองเกยวกบการอาน จะเรมจากการจดจ ารปแบบตวอกษร หลงจากนน จะมการแปลความหมาย โดยการใชโครงสรางความรทางดานภาษาทคนเคย เพอใหมการสรางความเชอมโยงของโครงสรางภาษา (Syntax) ความหมายของค า (Semantics) และความหมายในการใชงานส าหรบรปประโยคนน (Pragmatics)

ลกษณะรปรางและสของตวอกษร สงผลตอการรบรเชนกน เชน การขนตนประโยคดวยอกษรตวใหญ (Capitalize)

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

15

Reading: การรบรจากการอาน

วน วน หมายถง

ไปโดยรอบเขาหาศนยกลาง

วะ-นะ หมายถง

ปาไม ดง

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

16

Reading: การรบรจากการอาน

เพลา เพ-ลา หมายถง

กาล คราว

เพลา หมายถง

แกนส าหรบสอดในดมรถ หรอ ดมเกวยน; ไมส าหรบขงใบเรอ

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

17

Hearing: การรบรโดยการฟง

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

18

Hearing: การรบรโดยการฟง

การฟงจะชวยใหผรบขอมล ไดความรอนเกยวเนองกบสภาพแวดลอมตางๆ ของขอมลดวย เชน ระยะหางระหวางขอมลกบผฟง ทศทางของขอมล ตลอดจนลกษณะเฉพาะของตววตถเอง เชน สภาพพนผว วสดทใช ส าหรบอวยวะในรางกายมนษยทเกยวของกบการฟง มดงน คอ

สวนหชนนอก สวนหชนกลาง สวนหชนใน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

19

Hearing: การรบรโดยการฟง

สวนหชนนอก (Outer ear) ชวยปกปองหชนใน และชวยในการขยายเสยงทไดรบ

สวนหชนกลาง (Middle ear) ชวยสงสญญาณเสยงในลกษณะความสนของคลนไปยงสวนหชนใน

สวนหชนใน (Inner ear) เปนสวนทแปลงคลนเสยง เพอสงขอมลไปยงประสาทสวนรบฟง

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

20

Hearing: การรบรโดยการฟง

ความแตกตางของเสยงจะถกจ าแนกโดยคณลกษณะตางๆ คอ ความถ (Pitch) ความดง (Loudness) และชนดหรอคณภาพของเสยง (Timbre) คลนความถทมนษยสามารถรบรไดอยระหวาง 20 Hz ถง 15 KHz แตถาเปนเสยงทมความถสงมาก จะท าใหมนษยแยกความแตกตางไดไมดนก

การใชอปกรณชวยกรองเสยงหรออปกรณชวยฟง (Auditory System Filters Sound) สามารถแยกเสยงทตองการออกจากสภาพแวดลอมทมเสยงรบกวนได เชน ปรากฏการณทเรยกวา งานปารตคอกเทล(The Cocktail Party)

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

21

Hearing: การรบรโดยการฟง

การใชเสยงรวมกบโปรแกรมประยกต (Non-speech Sound) ไมใชเปนทางเลอกเฉพาะผบกพรองทางการไดยนอกตอไป แตการใชเสยงยงเปนการเพมประสทธภาพส าหรบผใชปรกตอกดวย ค าแนะน าในดานการใชเสยง เพอการสรางความสนใจ (Attention) ในกรณทเกดเหตการณส าคญหรอตองการบอกใหผใชทราบวาสนสดการประมวลผล มดงตอไปนคอ

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

22

Hearing: การรบรโดยการฟง

การบอกสถานะของขอมล (Status Information) ขณะก าลงด าเนนการหากมเสยงการท างานแบบเบองหลงคลอตามไปดวย จะท าใหผใชทราบสถานะได โดยไมตองหนไปดหนาจอ

การยนยน (Confirmation) เพอบอกใหทราบวาไดท าตามค าสงเสรจสนแลว เชน การลบไฟล การเคลอนยายไฟล

การส ารวจขอมล (Navigation) เพอบอกใหผใชทราบวาขณะนอยในขนตอนประมวลผลใด หรอสวนใดของขอมล เชน ในระบบการเชอมโยงเอกสาร (Hypertext)

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

23

Hearing: การรบรโดยการฟง

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

24

Hearing: การรบรโดยการฟง

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

25

Touch: การรบรโดยการสมผส

ความรอน

ความเยน

ความเจบปวด

ความรสกทางจตใจ

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

26

Touch: การรบรโดยการสมผส

เปนวธการรบรอนเกดจากการตอบสนองทส าคญ โดยอาจเปนทางเลอกส าหรบผทมความสามารถในการมองเหนทบกพรอง สงเราทไดรบจะผานการสมผสทางผวหนง เชน

การทดสอบอณหภม

การทดสอบแรงกด

ความรอน

ความเจบปวด (Nociceptors)

การทดสอบแรงดน ซงเปนสวนส าคญตอการออกแบบระบบของหนาจอแบบสมผส

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

27

Touch: การรบรโดยการสมผส

บางสวนในรางกายมนษย มความออนไหวดานการสมผสมากกวาสวนอน เชน นวมอ จงมกถกใชเปนองคประกอบส าคญของการออกแบบสวนปฏสมพนธ

การสมผสโดยใหความส าคญตอการเคลอนไหวของรางกาย คอ Kinesthesis โดยมการวเคราะหผลกระทบทมตอความสะดวกสบายของรางกายมนษย ตลอดจนผลทมตอการเพมประสทธภาพในการปฏบตงาน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

28

Movement: การรบรโดยการเคลอนไหว

เมอมสงเราเกดขน มนษยจะใชเวลาในการตอบสนอง 2 ลกษณะคอ

เวลาในการโตตอบ หรอ การตอบสนอง (Reaction Time)

เวลาในการเคลอนไหว ซงจะแตกตางกนในมนษยแตละคน โดยขนอยกบอายและสภาพความพรอมของรางกาย

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

29

Memory: การเกบขอมลในสวนของความทรงจ า

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

ความทรงจ าชวขณะ (Sensory Memory)

ความทรงจ าระยะสน (Short-term Memory/ Working Memory)

ความทรงจ าระยะยาว (Long-term Memory)

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

30

การเกบขอมลเขาสความทรงจ าระยะยาว

Tue

. Au

gu

st

13

, 20

19

22

21

22

[25

62-0

1-A

EC

] HC

I De

sign

3(2

-2-5

)

31

การเกบขอมลเขาสความทรงจ าระยะยาว ผานทางวธการตางๆ

การทบทวน (Rehearsal) จะท าใหขอมลเคลอนยายจากความทรงจ าระยะสนไปสความทรงจ าระยะยาว

การตกผลกทางความคด (Total Time Hypothesis) หลงจากไดทบทวนขอมล จะมบางสวนของขอมล เขาสความทรงจ าระยะยาว เปนการหาบทสรปหรอการตงสมมตฐาน

ผลจากการน าความรไปใช (Distribution of Practice Effect) เมอมการใชความร หรอ ขอมล สกระยะจะเกดการสะสมเขาเปนขอมลในสวนของความทรงจ าระยะยาว

ความคนเคยกบโครงสรางและความหมายของขอมล (Structure, meaning, and familiarity) จะท าใหสามารถจดจ าขอมลไดดขน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

32

การเกบขอมลเขาสความทรงจ าระยะยาว ผานทางวธการตางๆ

ขอมลทเกบอยในความทรงจ าระยะยาว อาจเกดการสญหายได เชน ใชระยะเวลานานเกนไป มการสญเสยตามสภาพ (Decay) ซงเปนกระบวนการทเกดขนทละนอย และใชเวลานาน

การถกรบกวน (Interference) มไดใน 2 กรณคอ

Retroactive: คอ การรบรขอมลใหมและน าไปแทนทขอมลเดม

Proactive inhibition: คอการผสมผสานขอมลเกากบขอมลใหม

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

33

การเรยกใชขอมลในความทรงจ าระยะยาว ม 2 วธ คอ

การระลกถง (Recall) โดยมการเรยกขอมลกลบมา อาจโดยการกระตนจากสทมองเหน การไดกลน การจดกลมขอมล การแบงประเภทขอมล และการสรางจนตนาการ

การตระหนกจดจ า (Recognition) เมอมการพบเหนขอมลเดมอกครง กจะมการเรยกขอมลทเกยวของออกมาจากความทรงจ าระยะยาว

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

34

กระบวนการในการคด (Thinking)

Tue

. Au

gu

st

13

, 20

19

22

21

22

[25

62-0

1-A

EC

] HC

I De

sign

3(2

-2-5

)

35

กระบวนการในการคด (Thinking)

กระบวนการในการใชขอมลของมนษยถกแบงออกเปน 2 ประเภท คอ

(1) การคดเพอหาเหตผล (Reasoning) เปนการคดเพอจะน าขอมลทงหมดทเกบไว มาสรางความเชอมโยงกบขอสรปทได หรอเชอมโยงความรใหมกบความรเดมทมอย โดยแบงออกเปน 3 ประเภทยอยคอ

การหาเหตผลจากการตงขอสนนษฐานตามหลกทางตรรกวทยา (Deductive Reasoning)

การหาเหตผลโดยเทยบเคยงกบสถานการณทเคยเกดขนใกลเคยงกน (Inductive Reasoning) โดยเทยบเคยงกบสงทเคยทราบและเหนมาแลว

การคดหาเหตผลโดยเชอมโยงความสมพนธระหวางเหตและผล (Abductive Reasoning)

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

36

กระบวนการในการคด (Thinking)

(2) การคดเพอหาวธการในการแกปญหา (Problem Solving) เปนกระบวนการคดเพอหาแนวทางแกปญหาในสถานการณทไมคนเคย

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

37

ทฤษฎทางดานอารมณ (Emotion)

Tue

. Au

gu

st

13

, 20

19

22

21

22

[25

62-0

1-A

EC

] HC

I De

sign

3(2

-2-5

)

38

ทฤษฎทางดานอารมณ (Emotion)

ผลกระทบทางอารมณทมตอการออกแบบสวนของระบบคอมพวเตอร ทตองมการตดตอกบผใช มดงนคอ

ความเหนอยลาในการปฏบตงาน (Stress) สงผลใหการแกปญหามความยงยากมากขน ซงอาจท าไดโดยการแกไขเรองเกยวกบสภาพแวดลอมอนๆ

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

39

ทฤษฎทางดานอารมณ (Emotion)

ผใชทมความผอนคลาย (Relaxed User) อาจยอมรบขอผดพลาดของโปรแกรมไดบาง แตกไมไดหมายความวาใหออกแบบโปรแกรม โดยขาดการไตรตรองทรอบคอบ

การออกแบบทมความสวยงาม ดงดดความสนใจ (Aesthetically) และการใหรางวลตอบแทน (Rewarding) จะชวยเพมผลกระทบในเชงบวกได ดงนนควรออกแบบระบบปฏสมพนธใหมลกษณะดงกลาว

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

40

สรป:

ความแตกตางของแตละบคคล สงผลกระทบตอการออกแบบระบบงานทางดานคอมพวเตอร ซงหากเปนการออกแบบระบบทมผใชงานหลายกลม ยงตองค านงถงเปนพเศษ ดงน

ความแตกตางในระยะยาว (Long Term) เชน เพศ สภาพรางกาย และความสามารถทางสตปญญา

ความแตกตางในระยะสน (Short Term) เชน ผลกระทบจากความกดดน และความลาจากการปฏบตงาน

ความแตกตางทเปลยนแปลงได (Changing) เชน อาย

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

41

สรป:

ผลทางจตวทยาทสงผลตอการออกแบบระบบปฏสมพนธ มดงตอไปน

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

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

องคประกอบและทฤษฎอนๆ ซงจะไดศกษารายละเอยดตอไปนไดแก

การเขยนค าแนะน า (Guideline)

รปแบบการรจ า (Cognitive Model)

การทดสอบและการประเมนผลระบบ (Analytic Evaluation Techniques)

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

42

Q & A THANK YOU

43

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

กจกรรม:

จากหนงเรอง The 6th Day และ เรอง The Minority Report

นสตไดเรยนรและรบทราบเทคโนโลยอะไรบาง ใหเขยนมาคนละ 5 เทคโนโลย

เกณฑการใหคะแนน

ซ ากบเพอน ได 0.5 คะแนน

หากไมซ ากบเพอน ได 5 คะแนน

คะแนนเตม คอ 10 คะแนน

Tue. August

13, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

44

เขยนและท าในหองเรยน (เทานน)กรณาสงหลงเลกเรยน..ครบ

Tue

. Au

gu

st

13

, 20

19

22

21

22

[25

62-0

1-A

EC

] HC

I De

sign

3(2

-2-5

)

45