บทที่ 9 user interface design_std2
Post on 04-Jan-2016
13 Views
Preview:
DESCRIPTION
TRANSCRIPT
บทท 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.
top related