บทท 8 User Interface Design

Software Engineering 8th edition, Ian Sommerville

Software Engineering: A Practitioner’s Approach 7th edition, R.S. Pressman

1

จดประสงคการเรยนร

2

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

เนอหา Basics of user interface design  The user interface design process Interface examples

3

1. Basics of user interface design

4

สวนตอประสานกบผใช (User Interface) คอ ตวกลางในการสอสารระหวางมนษยและระบบคอมพวเตอร

การออกแบบสวนตอประสานกบผใช (User Interface Design) คอ การระบวตถและการกระทาทผใชสามารถกระทากบระบบคอมพวเตอรได user interaction

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

user interface ควรถกออกแบบใหเหมาะกบความชานาญ ประสบการณ และความคาดหวงของผใช ผใชระบบมกจะตดสนคณภาพของระบบดวย interface มากกวา functionality การออกแบบ user interface ทไมดเปนเหตผลหนงททาใหผใชไมเลอกใชซอฟตแวร

บางอยาง

1.1 คณสมบตของมนษยทมผลตอการออกแบบ interface

5

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

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

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

ความสามารถของตนเอง แตใหตรงกบความสามารถของผใช คนเรามความชอบตางกน บางคนอาจชอบรป บางคนชอบขอความ

1.2 User interaction

6

ปฏสมพนธของผใช (User interaction) คอ การปอนคาสงและขอมลทเกยวของใหกบระบบคอมพวเตอร

ชนดของ interaction สามารถแบงไดเปน 5 ชนด คอสไตล คาอธบาย ขอด ขอเสย

Direct manipulation

•ผใชมปฏสมพนธโดยตรงกบขอมลทอยตรงหนา

•ใชอปกรณในการช (เชน mouse, stylus, นว) เพอเลอกวตถและการกระทาทตองการ

•ตวอยาง: การลากไฟลทตองการลบไปยงถงขยะ

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

• ยากตอการ implement• เหมาะสมเมอมภาพอปมาสาหรบการกระทาและวตถในระบบ

1.2 User interaction (ตอ)

7

สไตล คาอธบาย ขอด ขอเสย

Menu selection

•ผใชเลอกคาสงจากรายการทใหไว (menu) โดยอาจใชการเลอกแบบ direct manipulation กอน•ตวอยาง: เลอกไฟล คลกขวาและเลอกเมนเพอทาการลบไฟล

• ลดความผดพลาด• ไมตองพมพ

• คอนขางชาสาหรบผใชงานขนสง• อาจซบซอนหากมรายการเยอะ

Form fill‐in •การกรอกขอมลลงในแบบฟอรม ซงอาจเปนการกรอกขอความ เลอกรายการ หรอกดปมเพอทารายการ•ตวอยาง: พมพชอไฟลและกดปม “ลบ”

• ปอนขอมลงาย • ใชพนทเยอะบนหนาจอ• ผใชอาจปอนขอมลผด

1.2 User interaction (ตอ)

8

สไตล คาอธบาย ขอด ขอเสย

Command language

•การนาภาษาเฉพาะทสรางขนมาสาหรบเปนคาสงตางๆ ทใชสงงานในระบบ และอาจมการใสพารามเตอรทเหมาะสม•ตวอยาง: ใชคาสง rm ตามดวยชอไฟลเพอลบไฟลนน

• powerful และ ยดหยน

• ยากทจะเรยนร• จดการความผดพลาดไดยาก

Natural language

•การสงระบบคอมพวเตอรดวยภาษามนษย •ตวอยาง: ผใชอาจพดวา “ลบไฟล xxx” เพอลบไฟลนน•อยในระหวางการพฒนาใหดขน เชน Siri, Google Voice

• เขาถงงายสาหรบผใชรมทาง• งายตอการตอยอด

• ตองมแบบแผนทรดกม •ภาษามนษยเขาใจไดยาก

1.3 information presentation

9

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

1.3.1 หลกในการเลอกการนาเสนอขอมล

10

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

หากสนใจคาขอมลควรนาเสนอแบบขอความ (ขอมลดบ) หากสนใจความสมพนธอาจเลอกแบบกราฟ

ขอมลจะตองแสดงคาเปนขอความหรอตวเลข หรอ แสดงเพยงคาโดยประมาณ หากเปนคาโดยประมาณ อาจนาเสนอโดยการกาหนดจดอางองเปนชวงๆ อยางเหมาะสมเพอใหผใช

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

หากคาเปลยนเรวอาจนาเสนอในรปของกราฟ หากเปลยนชา อาจใชขอความ

พนทในการนาเสนอขอมลมจากดหรอไม หากมจากด อาจใชแบบขอความ เชน การแสดงบนโทรศพทมอถอ หากไมจากด อาจใชแบบกราฟ

1.3.1 หลกในการเลอกการนาเสนอขอมล (ตอ)

11

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

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

สามารถเพม ลบ ยายขอมลไดงาย

ตวอยางการนาเสนอขอมลแบบขอความและกราฟ

12

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

ตวอยางการนาเสนอขอมลแบบประมาณคาแบบตางๆ

13

1.3.2 การเลอกใชสกบ interface

14

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

ไมควรมมากกวา 4‐5 สในหนาตางหนงๆ และ เกน 7 สในinterface ของระบบ หากมสมากเกนไป โดยเฉพาะสโทนสวาง อาจทาใหลายตาได

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

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

ระวงเรองเฉดส หรอคส การแสดงสบางอยางดวยกน อาจทาใหตามความตงเครยด เชน สแดงและนาเงน ซงตาไม

สามารถโฟกสไปททง 2 ส ในเวลาเดยวกนได

ตวอยางการใชสบอกสถานะของโปรแกรม Streaming Pro

15

ตวอยางการใชสบอกสถานะของระบบหองสมดดวยควอารโคด

16

1.3.3. การแสดงขอความผดพลาด

17

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

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

วาระบบรวาผใชกาลงทาอะไรอย experience: เมอผใชเคยชนกบระบบ ขอความทยาวอาจทาใหผใชราคาญ แตเปน

ประโยชนสาหรบผเรมตน ฉะนน ระบบอาจมการแบงระดบของผใช style: ขอความควรเปนในเชงบวกมากกวาลบ culture: การออกแบบขอความอาจตองคานงถงวฒนธรรมของประเทศนนๆ ท

ระบบถกนาไปใช เพราะการบอกขอความบางอยางอาจมลกษณะแตกตางกนตามวฒนธรรม

ตวอยาง: พยาบาลพมพชอผปวย

18

2. The user interface design process

19

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

การออกแบบ UI ควรทาคไปกบกจกรรมอนในวศวกรรมซอฟตแวร ขนตอนการออกแบบแสดงไดดงรป

20

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

การออกแบบ interface คอ การกาหนดชดของวตถและการกระทา และการนาเสนอสงเหลานทางหนาจอเพอใหผใชใชงานระบบได

implementation คอ การสราง prototype เพอประเมนการใชงานตาม user scenario

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

2.1. Interface Analysis

21

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

2.1.1 การวเคราะหผใช (WHO)

22

เปาหมาย คอ การทาความเขาใจวา ใครคอผใชงาน จะจดหมวดหมของผใชชนดตางๆอยางไร ผใชมภาพในใจตอระบบอยางไร

กจกรรมททาเพอไปสเปาหมาย คอ การสมภาษณ การใหทาแบบสอบถาม การสงเกต

23

สงทควรรเพอชวยในการวเคราะห ผใชอยในระดบผเชยวชาญในสายอาชพของเขา ชางเทคนค พนกงานเคานเตอร หรอ

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

2.1.2 การวเคราะหงานททา (WHAT)

24

เปาหมาย: การได UI สามารถใหผใชทางานทตองทาได

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

presentation งานทตองทามลาดบอยางไร workflow

มลาดบชนของงาน (hierarchy of tasks) อยางไร งานใหญ - งานยอย กจกรรมททาเพอบรรลเปาหมาย: user scenario: ศกษาความตองการ use cases: ทราบปฏสมพนธเบองตนตอระบบ workflow analysis: ศกษากระบวนการของงานชนหนงๆ เมอมผใชทเกยวของหลายคน เชน

activity diagram Task analysis: แสดงโครงสรางการแบงงานชนหนงออกเปนงานยอยและยงสามารถแสดงลาดบ

ของงานทเกดขน

ตวอยาง: hierarchical task analysis

25

2.1.3 การวเคราะหสภาพแวดลอมของงาน (Environment)

26

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

นอกจากสวนตอประสานแลว นกพฒนายงตองนกถงการเลอกใชอปกรณทเหมาะสมกบสภาพแวดลอมดวย

2.2 Interface design and development

27

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

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

ขนตอนการออกแบบและการพฒนา ใชขอมลทไดจากการวเคราะห interface เพอหาวตถและการกระทาบน interface ทา screen flow diagram หรอ navigation model

กาหนดเหตการณ (user actions) ทจะทาใหสถานะของ interface เปลยน และโมเดลพฤตกรรมของระบบ

สามารถใช state diagram ในการทา screen flow diagram วาดภาพหนา interface ในแตละสถานะทจะแสดงใหผใชเหน prototype, mock‐

up ในการออกแบบ interface อาจเลอกจาก pattern ทมอยแลวตามความเหมาะสม ม

ตวอยางดงน

ตวอยาง screen flow diagram 1

28

การลงทะเบยนเรยนสาหรบนสต

ตวอยาง screen flow + prototype

29http://mattpop.com/screen‐flow‐diagram/

ตวอยาง screen flow + prototype

30http://www.ubelly.com/wp‐content/uploads/2012/10/UI‐Mockup‐21.png

2.2.1 การยายตาแหนงในโปรแกรม (navigation)

31

Navigation คอ การยายจากหนาหนงไปยงอกหนาหนง Main Navigation ปญหา: ผใชตองการทราบวาจะไปหนาไหนเพอทางานทตองการได ทางแกไข: วางรายการเมนทผใชสามารถใชงานไดในตาแหนงทคงทของหนา เพอให

ผใชสามารถยายจากสวนหนงไปยงอกสวนหนงไดทนท วธการ: กาหนดเมนไวซงมกใชเปนเมนตามแนวนอนหรอเมนตามแนวตง

32

33

Fly‐out Menus ปญหา: ผใชตองการเขาถงงานยอยไดทนท แตพนทสาหรบการแสดงผลมไมเพยงพอ ทางแกไข: ใชเมนยอยซงจะถกแสดงเมอมการชเมาสไปทเมนหลก และเมนยอยจะ

หายไปเมอเอาเมาสออก วธการ: 

ในแตละเมนทตองการแสดงเมนยอย ใหเพมการเชอมโยงไปยงเมนยอย เมนยอยจะแสดงเมอเมาสชไปยงเมนหลกนนโดยจะแสดงแบบแนวตงหรอแนวนอนกได เมนยอยหายไปเมอเอาเมาสออก การแสดงเมนยอยจะตดไปไมทบซอนกบการเลอกเมนหลกอนๆ

34

35

2.2.2 การจดวางตาแหนงของวตถ (Layout)

36

Card stack ปญหา: มขอมลหลายอยางทตองการแสดง โดยขอมลสามารถถกจดกลมยอยได และ

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

ขน โดยการแบงขอมลเปนสวนๆ ทจดการไดอยางอสระตอกน โดยแตละสวนถกจดลงใน “การด” ทตางกนและมหวขอกากบไว

วธการ: จดกลมขอมลใสลงในการดแตละอน ซงมกมการแสดงเปนแทบ (tab) หรอแสดงตามแนวตง แลวเนอหาในแตละการดจะถกแสดงออกมาเมอผใชเลอกการดแตละใบ

37 38

Grid of Equals ปญหา: หนาสวนตอประสานควรมเนอหาของขอมลหลายอน โดยแตละอนควรถก

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

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

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

39

2.2.3 การแสดงรายการขอมล (Listing)

40

Sortable table ปญหา: ในกรณทขอมลมคาทหลากหลาย ผใชอาจตองการสารวจ คนหา หรอจดเรยง

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

ของตารางในคอลมนทตองการจดเรยง วธการ: เมอผใชคลกทหวของตารางทคอลมนหนง ระบบจะทาการเรยงลาดบขอมลใน

คอลมนนนตามลาดบอกษรจากนอยไปมาก และเรยงในทางกลบกนเมอมการคลกอกครง

41 42

List Inlay ปญหา: ผใชตองการดขอมลทถกแสดงเปนรายการ โดยในแตละรายการยงม

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

แสดงผลไมเพยงพอ ทางแกไข: ระบบแสดงรายการขอมลนนลงมาตามแนวตง โดยมการแสดงโครงสราง

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

วธการ:  ระบบแสดงรายการในคอลมนเดยว เมอผใชเลอกรายการหนง รายละเอยดของขอมลนนจะแสดงออกมาในแนวตงเสมอนมเนอหา

ในรายละเอยดหลนลงมา เมอผใชเลอกรายการเดมอกครง รายละเอยดของขอมลนนกจะถกซอนไป

43

2.2.4 ฟอรมและการควบคม (Forms and Controls)

44

Constraint Input ปญหา: ผใชตองกรอกขอมลใหกบระบบ แตอาจไมคนเคยกบรปแบบทจะตองกรอก

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

คาทถกตองทเปนไปได โดยใหผใชเลอกจากรายการแทน วธการ: ระบบแสดงรายการของขอมลทเปนไปไดทจะกรอกลงไป ซงมกอยในรปของ drop‐down list หรอการเลอกวนทดวยปฏทน หรอการใช radio buttons เปนตน

45 46

Edit‐in‐place pattern (direct manipulation) ปญหา: ผใชตองการแกไขขอมลบางอยางทนท และการแสดงผลของขอมลกจะเปน

เหมอนทผใชเหน ณ ขณะนน ทางแกไข: ระบบเปดโอกาสใหผใชแกไขขอมลทเหนในหนานนไดทนทโดยไมตองยาย

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

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

47

Input Validation ปญหา: ผใชจาเปนตองกรอกขอมลในฟอรมดวยตนเอง เนองจากไมมรายการจากด

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

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

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

48

2.2.5 รปแบบอนๆ (Miscellaneous)

49

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

พมพคาหรอขอความไปเรอยๆ วธการ: 

เมอผใชมการพมพในแตละตวอกษร ระบบจะนาขอความทผใชพมพไปแลวไปคนหาในฐานขอมลของระบบ

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

50

51

Wizard ปญหา: ผใชตองใชงานระบบเพอใหบรรลเปาหมาย 1 อยาง แตการทางานนนอาจด

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

ขนตอนใดททาเสรจแลว มขนตอนใดยงทาไมเสรจ วธการ: 

เมอผใชเลอกทางานนน ระบบจะแสดงขนตอนทงหมดทผใชจะตองทา และใหผใชทาไปทละขนโดยเปลยนหนาไปเรอยๆ

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

52

53

Progress Indicator ปญหา: ผใชตองการทราบความกาวหนาของงานทกาลงทาโดยเฉพาะอยางยงเมองาน

นนกนเวลาหลายวนาท ทางแกไข: ระบบแสดงแถบหรอสญลกษณเพอบอกวาระบบกาลงประมวลผลในงาน

นนอยและอาจแสดงขอความหรอสญลกษณอนเพอบอกสถานะของความกาวหนาวามากนอยเพยงใด

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

การกระพรบหรอเคลอนไหวแบบวนซ า

54

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

จะตองกาหนดดชนชวดขนมา ซงมตวอยางดงน

2.3. Design Evaluation

55

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

เพยงใดError handling การปองกนไมใหผใชใชงานผดพลาด การตรวจพบความผดพลาด

รวมถงการชวยแกไขขอผดพลาดไดAcceptability ความพงพอใจของผใชทมตอระบบ

56

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

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

yes/no response numeric response scaled response open‐ended

สงเกตพฤตกรรมของผใช ดวยเทคนค “thinking aloud” การเขยนโคดเพอสรางเครองมอในการเกบขอมลเกยวกบความสะดวกในการใชงานและความ

ผดพลาดของผใช การเขยนโคดในซอฟตแวรทชวยเกบ online feedback

57

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

สวนตอประสานทตองการ

2.4 หลกการออกแบบ user interface

58

หลกการ คาอธบายควบคมการใชงานของผใชอยางเหมาะสม

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

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

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

ผใชควรรการกระทาททาอยเสมอ

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

ผลสะทอนกลบจากการกระทาทเหมาะสม

• ไมวาผใชจะกระทาการใด ผลของมนจะสาเรจหรอไม ผใชควรไดรบผลสะทอนนนอยางชดเจน

59

หลกการ คาอธบายเวลาในการตอบสนองกบผใชจะตองเรวพอ

• การกระทาทกอยางควรใชเวลาในการตอบสนองไมเกน 1 วนาท• การตอบสนองนนมไดหมายความวาระบบจะตองประมวลผล

เสรจ ซงหากตองประมวลผลนานกวา 1 วนาท ควรมสญลกษณทแสดงความกาวหนาในงาน

ออกแบบสวนตอประสานใหมความสอดคลองกนทงระบบ (consistent)

Interface ควรมการแสดงผลทสอดคลองกน ซงทาใหลดเวลาในการเรยนรการใชงานของผใช• คาสงหรอเมนควรเปน format เดยวกน• การวางขอมลบนหนาจอ• รปแบบการรบขอมลเขาควรอยในรปแบบเดยวกน

ใช encoding techniques ทเขาใจงาย

encoding techniques หมายถง เทคนคการเลอกตวแทนของการแสดงผลในหนาสวนตอประสาน เชน •การเลอกรปแบบตวอกษร ไอคอน ส รป การจดกลม

60

หลกการ คาอธบายใชคาศพททผใชมความคนเคย

• คาศพททใชใน interface ควรอยบนพนฐานของคาศพทและหลกการของผใชระบบแทนทจะเปนคาศพททางคอมพวเตอร• เชน ระบบสานกงานออนไลน ควรใชคาศพท เชน จดหมาย เอกสาร แฟม มากกวาทจะใช ไดเรคทอร (directory) หรอ รหสไฟล (file identifier)

ลดการตอบสนองทผ ใชอาจคาดไมถง

•ผใชมกจะสรางภาพของระบบในใจกอนทระบบจะถกพฒนา •ผใชจะรสกราคาญหากระบบตอบสนองผดความคาดหมาย •หากการกระทาหนงใหผลลพธอยางหนง ผใชกจะคาดหวงแบบเดยวกนกบการกระทาทคลายกน ดงนน การกระทาทใกลเคยงกนควรมลกษณะการทางานแบบเดยวกน

61

หลกการ คาอธบายสามารถกคนการกระทาบางอยางกบระบบได(Recoverability)

เนองจากผใชอาจใชระบบผดพลาดในบางจด • interface ควรถกออกแบบเพอลดความผดพลาด (เชน มเมนใหเลอกเพอลดความผดพลาดทเกดจากการพมพ) • ควรสามารถใหผใช recover ระบบจากความผดพลาดของตนเอง

•การ confirm หากมการลบขอมลบางอยาง •การ undo 

มตวชวยในการใชงาน(User assistance)

ระบบควรม help หรอ on‐line manual

คานงถงความหลากหลายของผใช (User diversity)

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

3. Interface examples

62

ตวอยางการออกแบบทควรทา ตวอยางการออกแบบทไมด

3.1. ตวอยางทควรทา

63

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

64

การแสดง icon บอกชนดของวตถในรายการจะชวยใหผใชแยกประเภทของวตถไดงาย

65

แสดงขอมลปจจบนทผใชเลอกใหเหน เชนเลอกรปภาพ หรอเลอกหนาทจะพมพ66

การม tooltips ทาใหผใชเรยนรการใชงานไดเรวขน และสามารถใหผใชเรยกใชฟงกชนบางอยางไดงาย

เมอผใชทาอะไรผดพลาด สามารถใหเขายกเลกการกระทาได

67

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

3.2 ตวอยางทไมด

68

69

Interface ทผใชไมรสกวาถกบงคบเลอก

70

71 72

73 74

75 76

77

ถงแมจะถกจากดพนท แตแสดงขอความครบถวนไดดวยการเพม scroll bar

78

79

ตวอยางกระบวนการSign up ของระบบหนง

1

3 4

2

80

UI ทดกวา

1 2

3 4

แบบฝกหด

81

ระบบ self checkout คอ ระบบสาหรบใหลกคาตามรานคาหรอหางสรรพสนคาดาเนนการซอและจายเงนดวยตนเองโดยไมตองผานพนกงานแคชเชยร โดยลกคาจะทาการสแกนสนคาแลวทาการจายเงนดวยเงนสด หรอบตรเครดตหรอเดบตหรอบตรอนๆทรานคายอมรบ ใหนสตวเคราะห

ผใช : มกประเภทอะไรบาง คณสมบตเปนยงไง งานทตองทา: activity diagram หรอ task analysis สภาพแวดลอม: เปนยงไง

ของระบบน ใหนสตออกแบบ user interface ของระบบนโดยทา screen flow diagram ดวย

References

82

J. Tidwell. Designing Interfaces, 2nd ed., New York: O’Reilly Media, 2010.

M.V. Welie. “Patterns in Interaction Design.” Internet:  http://www.welie.com/, 2008 [Oct. 22, 2013].

T. C. Lethbridge, R. Laganière. Object‐Oriented Software Engineering: Practical Software Development using UML and Java, 2nd ed., UK:  McGraw‐Hill, 2005.