Upload
vanbao
View
228
Download
5
Embed Size (px)
Citation preview
วตถประสงค
• รบทราบถงความหมายและความส าคญของ Screen
• รบทราบถงการจดวางองคประกอบใน Screen
• รบทราบถงองคประกอบใน Screen
2
กระบวนการออกแบบ UI ประกอบดวย 12 ขนตอน คอ
1) การท าความรจกผใชงาน (Know your user or client)
2) การท าความเขาใจการท างานของระบบ (Understand the business function)
3) การพฒนาระบบเมนและการน าทาง (Develop system menu and navigation)
4) การเลอกหนาตางทเหมาะสม (Select the proper kinds of windows)
4
กระบวนการออกแบบ UI (THE UI DESIGN PROCESS)
5) การสรางกราฟก ไอคอน และภาพทสอความหมาย (Create Meaningful Graphics, Icons and Images)
6) การเลอกใชสทเหมาะสม (Choose the proper colors)
7) การจดการเลยเอาทและสกรน (Organize Layout)
8) การทดสอบ (Test, Test, and Retest)
5
กระบวนการออกแบบ UI (THE UI DESIGN PROCESS) (ตอ)
Screen คอ หนาจอส าหรบเปนสวนตดตอระหวางผใชงานและระบบ โดยภาย ในหนาจอเปนพนททรองรบขอมลน าเขาส าหรบน าไปประมวลผลในระบบ รวมถงแสดงผลขอมลน าออกทเปนผลลพธจากการประมวลผลของระบบแลวสงไปใหแกผใชงาน
7
การออกแบบ SCREEN(THE PRINCIPLES OF SCREEN DESIGN)
Screen ทด คอ
สะทอนถงสงทผใชงานตองท าได
ไดรบการพฒนามาเหมาะสมกบอปกรณส าหรบแสดงผล
สามารถท างานและประมวลผลโดยซอฟตแวรได
สามารถตอบวตถประสงคของระบบได
8
การออกแบบ SCREEN(THE PRINCIPLES OF SCREEN DESIGN)
การออกแบบ Screen ทไมด เชน
การใชค าอธบาย/หวขอ ทไมชดเจน
หรอไมเหมาะสม
10
การออกแบบ SCREEN(THE PRINCIPLES OF SCREEN DESIGN) (ตอ)
การใชตวอกษรหรอฟอนตทไมเหมาะสม
การจดล าดบการรบ-สงขอมลทไมเหมาะสม ไมม Navigation
การใช icon ทไมสอความหมาย
การออกแบบ Screen ทไมคงเสนคงวา
ปญหาทขอมล ไดแก ขอมลเยอะเกนไป ขอมลผดพลาด หรอลาสมย
15
การออกแบบ SCREEN(THE PRINCIPLES OF SCREEN DESIGN) (ตอ)
24
SCREEN ทผใชงานตองการ(WHAT SCREEN USERS WANT)
Screen ทจดวางเปนระเบยบ ดสะอาดตา
Screen ทมความชดเจน สอใหผใชงานรวาจะตองโตตอบอยางไร
Screen ทแสดงเนอหาขอมลทถกตอง และอยในต าแหนงทสมควร
Screen ทมเนอหาทชดเจน อานงาย ไมซบซอน
25
SCREEN ทผใชงานตองการ(WHAT SCREEN USERS WANT)
องคประกอบของ Screen ไดแก
1) การจดวางต าแหนงองคประกอบใน Screen (Screen Composition)
2) เนอหา (Text)
3) ระบบเมนและการน าทาง (System menu and navigation)
4) หนาตาง (Windows)
5) ตวอกษร (Font)
6) องคประกอบใน Screen (Screen Component)
27
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION)
การจดวางองคประกอบใน Screen
องคประกอบตองมความคงเสนคงวา ทงต าแหนงจดวาง วธการโตตอบ และวตถประสงคการใชงาน
การจดวางขอมล หรอเนอหาใน Screen จะตองมระเบยบ พยายามจดกลมขอมลทเปนประเภทเดยวกนและแสดงขอมลเพอใหงายตอการเปรยบเทยบ
ควรมการน าเสนอขอมลทมการใชงานบอยในทก Screen
28
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
Streveler and Wasserman (1984) ไดทดสอบการมอง Screen ของ users โดยการตรวจจบการมอง (Eye Tracking) พบวา
มนษยจะสนใจมอง Screen ในต าแหนงมมซายบนสดของหนากอนเสมอ จากนนจะเลอนสายตาไปยงจดกงกลางของ Screen และวนไปรอบ
Screen ตามเขมนาฬกา มนษยจะมองวตถทมขนาดใหญกอน แลวจงเลอนไปมองวตถเลกรอบๆ มนษยจะมองวตถทมรปทรงประหลาดกอนวตถทมรปทรงพนฐาน มนษยจะมองสทมความสดกอนสออน
31
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
การจดวางองคประกอบใน Screen มหลกการ คอ ความสมดล (Balance) ความสมมาตร (Symmetry) ความสม าเสมอ (Regularity) คาดการณได (Predictability) ล าดบชดเจน (Sequentiality) ความเรยบ โลง สะอาดตา (Economy) ความเปนอนหนงอนเดยวกน (Unity) ความเปนสดสวน (Proportion) ความเรยบงาย (Simplicity) การจดกลม (Groupings)
32
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
ความสมดล (Balance)
เปนการออกแบบท ใหวางองคประกอบหนา Screen ใหมน าหนกเทากน (Weight) ระหวาง บน-ลาง และซาย-ขวา
*สเขม, วตถรปทรงประหลาด และขนาดใหญ จะใหความรสกวาน าหนก
มากกวา
34
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
ความสมมาตร (Symmetry)
เปนการออกแบบทดาน ซาย-
ขวา มองคประกอบทเหมอน ๆ กน
และจะท าใหสามารถเหนเสนกลาง
(Centerline)
36
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
ความสม าเสมอ (Regularity)
เปนการออกแบบทก าหนด
องคประกอบในหนา Screen ใหม
ขนาด ส รปราง ทเหมอนกน รวมถง
ชองวางระหวางองคประกอบทม
ระยะเทาๆกน
38
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
คาดการณได (Predictability)
ออกแบบ Screen ทสามารถ
คาดการณไดโดยใชองคประกอบท
ค ง เสนคงวา และมการจ ดวา ง
อ งค ป ร ะกอบ เหล า น น อย า ง ม
ระเบยบ
41
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
ล าดบชดเจน (Sequentiality)
ออกแบบ Screen โดยการจดเรยงองคประกอบทท าใหเกดเสนน าสายตา ตามเงอนไข เชน- การใชสสวางไลไปยงสเขม หรอไลไปยงสขาว-ด า- การใชภาพทมความคมชด ไปยงภาพเบลอ- การใชกราฟกไปยงการใชตวอกษร- การใชวตถทมขนาดใหญไลไปยงขนาดเลก- การใชวตถรปทรงประหลาดไลไปยงวตถรปทรงปกต
43
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
ความเรยบ โลง สะอาดตา
(Economy) เปนการออกแบบ
Screen ทมองคประกอบนอย สซ าๆ
กน และรปแบบการน าเสนอทเนน
ความเรยบงาย
45
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
ความเปนอนหนงอนเดยวกน (Unity) จะคลายกบความสม าเสมอ (Regularity)
ทจะใชวตถทรปราง ส และขนาดแบบเดยวกน แตจะแตกตางทจะตองพนทวาง
ระหวางวตถทเทากน
46
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
ความเปนสดสวน (Proportion) เปน
การจดการองคประกอบตาง ๆ ใหอย
ในหนาตางทเปนสดสวน โดยทวไป
สดสวนขององคประกอบจะมดงน
47
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
ความเรยบงาย (Simplicity)เปนการออกแบบท Screenมองคประกอบจ านวนนอย เปนระเบยบ สวนใหญจะใชแนวคดรวมกบความเปนสดสวน (Proportion) และ ความเปนอนหนงอนเดยวกน (Unity)
49
การจดการองคประกอบใน SCREEN(SCREEN COMPOSITION) (ตอ)
การจดกลม (Groupings) เปนการจดกลมองคประกอบทมความเหมอนกนไวใกลกน
66
การออกแบบเนอหา(TEXT)
เนอหาถอเปนสงส าคญมากในระบบ เนอหาในระบบตองสมบรณและไดรบการปรบปรงพฒนาใหทนสมยอยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใชตองการใหถกตองและสมบรณ เนอหาทส าคญทสดคอเนอหาททมผพฒนาสรางสรรคขนมาเอง และไมซ ากบระบบอน
รปแบบของเนอหาทด
กระชบและใชภาษาทเขาใจงาย
สอถงขอมลทตองการน าเสนอชดเจน
ใชภาษาในเชงบวกและสรางสรรค
67
การออกแบบเนอหา(TEXT) (ตอ)
เนอหาในระบบประกอบดวย
เนอหาลงก (Link) คอ ตวอกษรทท าหนาทเปนลงกเชอมโยงไปยงขอมลหรอหนาจออน ๆ โดยเนอหาในลงกจะตองเขาใจงาย กระชบ และครอบคลมเนอหาทจะลงกไปทงหมด โดยหามมตวอกษรเกน 60 ตวอกษร
หวขอเพจ (Page Title) คอ เนอหาทท าหนาทเปนหวขอของหนาเพจหนง ๆ โดยหวขอเพจจะตองสอถงหนาเพจและในแตละเพจของระบบสามารถใชหวขอเพจทมความแตกตางกนได
หวขอ (Heading) คอ เนอหาทแสดงถงขอมลหลกในหนาเพจนน กรณเปนภาษาองกฤษ ควรหลกเลยงการใชค าน าหนานาม (a, an, the)
70
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION)
System menu คอ การออกแบบระบบการน าทาง (Navigation) ในการใชงานระบบผานการสรางเมน โดยระบบน าทางจะน าผชมไปยงหนาตาง ๆ ของระบบ ใหสามารถเขาถงขอมลทตองการไดอยางรวดเรว และรวาก าลงอยตรงไหนของระบบ
การออกแบบโครงสรางขอมลทดชวยให• ผใชเขาถงขอมลไดงายขน • ชวยใหผใชทองเวบไดอยางคลองตวโดยไมหลงทาง• ใชก าหนดบทบาทของผใชซงแบงเปนกลม ๆ ได โดยผใชแตละกลมจะสามารถ
เขาถงหนาตาง ๆ ไดอยางมขอบเขต ตามสทธทวางไวเทานน
71
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
พนฐานของระบบการน าทาง
1) ตอนนก าลงอยทไหน
2) จากนสามารถไปทใดไดบาง
3) จะไปสทตางๆไดอยางไร
4) จะกลบมาทเดมไดอยางไร
72
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
คณสมบตส าคญของระบบการน าทาง
1. เขาใจงาย
2. มความสม าเสมอ
3. มการตอบสนองตอผใช
4. มความพรอมและเหมาะสมตอ
การใชงาน
5. น าเสนอหลายทางเลอก
6. มขนตอนสนและประหยดเวลา
7. รปแบบทสอความหมาย
8. มค าอธบายทชดเจนและเขาใจงาย
9. มความเหมาะสมกบวตถประสงค
ของเวบไซต
10. สนบสนนเปาหมายและพฤตกรรม
ของผใช
73
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
รปแบบของระบบการน าทาง แบงออกเปน 4 รปแบบ
1) ระบบการน าทางแบบล าดบขน (Hierarchical) เปนเปนแบบพนฐาน
74
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
2) ระบบการน าทางแบบโกลบอล (Global) หรอเรยกวาแบบตลอดทวทงไซต
3) ระบบการน าทางแบบโลคอล (Local) ส าหรบเวบทมความซบซอนมาก
75
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
4) ระบบการน าทางเฉพาะท (Ad Hoc) เปนแบบเฉพาะทตามความจ าเปนของเนอหาซงกคอ “ลงก” ของค าหรอขอความทนาสนใจซงฝงอยในประโยคทเชอมโยงไปยงรายละเอยดเกยวกบค านน ๆ เพมเตม (อาจจากไซตอน)
76
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
โครงสรางของเมน (Structures of Menus)
โครงสรางของเมนหมายถงจ านวนวธการทผใชงานจะควบคมเมนเพอเขาถงสงทตองการ โครงสรางของเมนมหลากหลายรปแบบ คอ
• Single Menus เมนเดยว
• Sequential Linear Menus เมนเชงเสน
• Simultaneous Menus เมนแบบมเงอนไขการท างาน
• Hierarchical Menus เมนแบบมล าดบชน
• Connected Menus เมนแบบเครอขาย
• Event-Trapping Menus เมนทเกดขนจากการมปฏสมพนธกบผใช
77
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
• Single Menus เมนเดยว เปนโครงสรางพนฐานของเมนทวไป ในเมนจะประกอบดวยตวเลอกทก าหนดไวแลว
78
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
• Sequential Linear Menus เมนเชงเสน เปนรปแบบชดเมนทมทศทางเดยว เหมอนเปน single menu ทตอเนองกน
79
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
• Simultaneous Menus เมนแบบมเงอนไขการท างาน โดยเงอนไขเกดจากการรบขอมลจากผใช แลวระบบจะก าหนดตวเลอกหรอขอมลมาแสดงในเมน
80
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
• Hierarchical Menus เมนแบบมล าดบชน มกใชในกรณทระบบมขอมลจ านวนมาก และสามารถแบงเมนเปนกลมตาง ๆ ทมความสมพนธกนได มกใชเปน Navigation ในเวบไซต ขอเสย คอ ไมเหมาะสมกบผใชทไมตองการการเลอกเมนทมทศทางตามล าดบชนเมน
81
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
• Connected Menus เมนแบบเครอขาย คอเมนทมหลากหลายและเชอมโยงกนทงหมด ซงโครงสรางของเมนประเภทนจะไมเปนล าดบชน แตจะเชอมโยงตามความสมพนธของแตละเมนอยางอสระ สะดวกตอการใชงานของผใช แตออกแบบยาก
82
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
• Event-Trapping Menus เมนทเกดขนจากการมปฏสมพนธกบผใช เมนประเภทนมกจะใชงานรวมกบ simultaneous menu, menu bar และ Hierarchical Menus โดยหลกการท างานจะม
1) เมอผใชโตตอบกบระบบผานเมน เมนดงกลาวจะมการเปลยนแปลง (เชน เปลยน font หรอสของตวอกษร)
2) จะเกดเมนใหม โดยไมมการเปลยนแปลงหนาตางการท างาน (เชน ม dialog box ขนมาใหกรอกขอมล) หรอ
3) จะปดเมนเดมและแสดงเมนใหมขนมา
83
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
เนอหาของเมน (Content of Menus) เนอหาในเมนจะประกอบดวย 4 สวน คอ
Menu Context ขอมลของเมนทมงเนนใหผใชงานรบร สวนใหญจะใชในเมนประเภท Hierarchical ซงมกจะท าใหผใชงานหลงไปจากต าแหนงของเมนไดงาย การใชตวอกษรหรอใชกราฟกทคลายคลงกนระหวางเมน สามารถชวยในการสรางการจดจ าล าดบของเมนได
Menu Title หวขอเมนจะตองสอถงรปแบบของขอมลทผใชงานจะไดหลงจากเลอกเมนดงกลาวแลว โดยเนอหาทใชจะตองสน กระชบ เขาใจงาย และชดเจน
84
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
เนอหาของเมน (Content of Menus) (ตอ)
Choice Description รายละเอยดเพมเตมหลงจากเลอกเมน อาจเปนเงอนไขเพมเตมหลงจากการกดเมนทจะเกดขนกอนการกระท าหรอการน าทางไปยงสวนอน ซงควรจะใชค าอธบายทชดเจนและไมท าใหผใชงานเกดความสบสน เชน
(A) (B)
Choose one:• Save and exit • Exit without saving
Do you want to save and exit?• Yes• No
85
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
เนอหาของเมน (Content of Menus) (ตอ)
Instructions ค าอธบายเมนเพอใชในแนวทางในการกระท ากบเมน ซงมความจ าเปนส าหรบผใชงานทไมมประสบการณดานระบบ แตอาจกอกวนการใชงานของผใชงานทเชยวชาญได ดงนนการก าหนดรปแบบค าอธบายเมนจงแบงตามประเภทผใชงาน คอ ผใชงานไมมประสบการณดานการใชงานระบบ ผออกแบบจ าเปนตองค านงถงความ
เขาใจของผใชงานในการโตตอบกบเมน โดยการแสดงค าอธบายเมนนน ๆ
ผใชงานทเชยวชาญ ส าหรบผใชงานประเภทนผออกแบบตองระมดระวงในการใสขอมลทไมจ าเปน เพราะอาจเกดเปนการรบกวนการใชงานของผใชงานได
86
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
เนอหาของเมน (Content of Menus) (ตอ)
การใชค าในเมน (Phrasing the Menu) เปนการใชค าหรอสญลกษณส าหรบการเลอกเมน ไดแกo Cascade Indicator การแสดงเมนยอย (Submenu) เมอเลอกเมนดงกลาว
o Window Indicator เปนสญลกษณในเมนทบงชวาเมอเลอกเมนนจะแสดงหนา (window) ใหมเพอแสดงขอมลเพมเตม
o Direct action เปนการแสดงถงการด าเนนการตามเนอหาเมน
o Keyboard Equivalents เปนการใชแปนพมพในการเลอกเมน 1) การใชปมลด (Hotkeys) และ 2) การใชตวอกษร (Standard Keyboard Equivalents)
87
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
เนอหาของเมน (Content of Menus) (ตอ)
การใชค าในเมน (Phrasing the Menu) (ตอ)
88
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
เนอหาของเมน (Content of Menus) (ตอ)
การใชค าในเมน (Phrasing the Menu) (ตอ)
89
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
ปจจยในการเลอกรปแบบเมน
1) จ านวนขอมลในเมน
2) ความถในการใชงานเมน
3) ความถในการเปลยนแปลงขอมลในเมน
90
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
รปแบบของเมน (Kinds of Graphical Menus)1) Menu Bar
วตถประสงค คอ รปแบบเมนทแสดงขอมลทวไปทมความถในการใชงานสง ซงเมนนจะปรากฏในทกหนาของระบบ อกทงเนอหาในเมนจะไมเปลยนแปลง
คณลกษณะทวไป • เมนบารจะมทศทางการแสดงขอมลเปนแถวในแนวนอนและอยบนสดของหนาระบบ • เมนบารจะแสดงหวขอเมนหลกของระบบ ซงจดวาเปนจดเรมตนของการน าทางในระบบ• เมนบารจะตองมการออกแบบทคงเสนคงวา ใชงานงาย • สวนใหญแลวเมนบารจะใชใชรวมกบเมนแบบพลดาวน (Pull-down)
91
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
1) Menu Bar (ตอ)ขอด• เมนบารจะสะทอนถงขอมลหลกในระบบใหแกผใชงาน• เมนบารสามารถชวยใหผใชงานเขาถงขอมลไดงาย• เมนบารจะไมกดขวางขอมลหรอองคประกอบอน ๆ ในหนาระบบ• เมนบารสามารถควบคมไดดวยคยบอรดขอเสย• เมนบารจะกนพนททงแถวของพนทหนาจอ• เมนบารมปรมาณพนทจ ากดในการแสดงขอมล• การเขาถงเมนบารอาจตองใชการเลอนพอยนเตอร
92
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
2) Pull-down Menu
วตถประสงค คอ ใชส าหรบแสดงเมนรวมกบเมนบาร ซงใชกบเนอหาในเมนจะไมเปลยนแปลงเชนกน จากขอเสยของเมนบารทรองรบหวขอเมนไดจ านวนจ ากด เมนแบบ พลดาวนจงสามารถชวยลดปญหานนไดโดยสามารถแสดงรายการเมนยอยในทศทางแนวตงได
93
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
2) Pull-down Menu (ตอ)
ขอด
• พลดาวนเมนจะประหยดพนทในการแสดงหวขอเมนจ านวนมาก
• พลดาวนเมนสามารถแสดงหวขอเมนไดจ านวนมาก และสามารถจดกลมเมนได
ขอเสย
• เนองจากพลดาวนเมนจะแสดงขอมลแบบเปนกลม ท าใหผใชตองสบคนต าแหนงของเมนทตนตองการ
• เมอเมนถกเลอกและแสดงเมนยอยออกมา จะท าใหเกดการบดบงองคประกอบอน ๆ ของระบบได
94
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
3) Cascading Menu
วตถประสงค คอ ใชส าหรบแสดงเมนยอยรวมกบเมนบารและพลดาวนเมน ซงจะสามารถแสดงเมนยอยทมปรมาณมากได แตควรหลกเลยงการใชแคสเคตเมนกบเมนทมการใชงานบอย
95
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
3) Cascading Menu (ตอ)
ขอด
• แคสเคตเมนสามารถแสดงเมนยอยไดปรมาณมาก
• แคสเคตเมนชวยลดพนทในการแสดงผลเมนได
ขอเสย
• แคสเคตเมนจะท าใหการน าทางมความซบซอนเนองจากแคสเคตเมนจะถกซอนอยใน พลดาวนเมนอกทอดหนง
• การเขาถงเมนยอยในแคสเคตเมนจะตองใชการเคลอนทของเคอรเซอรหลายขนตอน
• เมอเมนถกเลอกและแสดงเมนยอยออกมา จะท าใหเกดการบดบงองคประกอบอน ๆ ของระบบได
96
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
4) Iconic Menu
วตถประสงค คอ ใชส าหรบแสดงเมนทมการใชงานบอย และเปนเมนทสามารถท าใหผใชงานเขาใจไดดวยสญลกษณ
97
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
4) Iconic Menu (ตอ)
ขอด
• เมนแบบไอคอนท าใหผใชงานเกดการจดจ าการท างานของเมนไดงาย
• เมนแบบไอคอนสามารถลดการใชตวอกษรเพอหลกเลยงปญหาภาษาเชงสากลได
ขอเสย
• การสรางเมนแบบไอคอนตองใชความเชยวชาญในการออกแบบมาก เนองจากตองสอถงการท างานของเมนนน ๆ ได
• หากหวขอเมนมปรมาณมาก จะไมเหมาะสมกบการใชงานเมนแบบไอคอนเพราะจะท าใหปรมาณไอคอนมจ านวนมากเกนไป
98
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
ฉะนนการเลอกรปแบบของเมนมเงอนไขเบองตนดงตารางรปแบบเมน การใชงาน
เมนบาร เมนทมการใชงานทวไป และมความถในการใชงานสงเมนทจะถกเรยกใชงานในทกหนาจอของระบบเมนทไมมการเปลยนแปลงในทกหนาจอของระบบ
พลดาวนเมน เมนทมการใชงานทวไป และมความถในการใชงานสงเมนทมเมนยอยปรมาณมาก (ในแตละเมนสามารถมเมนยอยไมเกน 10 เมนยอย)หวขอในเมนสามารถเปลยนแปลงไดแตไมบอย
แคสเคตเมน สามารถแสดงเมนทมเมนปรมาณมาก และมความซบซอนของล าดบชนเมนสงก าหนดล าดบชนไดไมเกน 2 ล าดบชน
เมนแบบไอคอน ใชส าหรบระบบทมการท างานทชดเจน ใชส าหรบระบบทเนนดานการออกแบบสวยงามไมควรใชกบเมนทไมไดเปนการท างานทวไป
99
การพฒนาระบบเมนและการน าทาง (DEVELOP SYSTEM MENU AND NAVIGATION) (ตอ)
แบบฝกหด
1) จงอภปรายถงรปแบบการออกแบบสกรนทด
2) ใหนสตเลอกเวบไซตทสนใจ 1 เวบไซต อธบายลกษณะของเวบไซตดงกลาวโดยสงเขป และอภปรายโครงสรางของเมนทเหมาะสมกบระบบน าทางของเวบไซตดงกลาว
3) จงวเคราะหการออกแบบเมนตามภาพตวอยาง
3.1)