28
รรรรรรรรรรรรรรร รรรรรรร

Designing web navigation

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Designing web navigation

รู�ปแบบของรูะบบเนวิ เกชั�น

Page 2: Designing web navigation

รู�ปแบบของรูะบบเนวิ เกชั�น• รูะบบเนวิ เกชั�นแบบลำ��ดั�บชั��น (Hierachical)• รูะบบเนวิ เกชั�นแบบโกลำบอลำ (Global)• รูะบบเนวิ เกชั�นแบบโลำคอลำ (Local)• รูะบบเนวิ เกชั�นเฉพ�ะที่�� (Ad Hoc)

Page 3: Designing web navigation

1. รูะบบเนวิ เกชั�นแบบลำ��ดั�บชั��น (Hierachical)

• เป�นแบบพ��นฐ�นที่��ส่"วินใหญ่"มั�กใชั'ก�นอยู่�"แลำ'วิ•แส่ดังแบบบน ลำงลำ"�ง เชั"นก�รูคลำ กจ�ก

หน'�Homepage ไปยู่�งหน'�ใน•มั�ข'อจ��ก�ดัค�อเคลำ��อนที่��เฉพ�ะแนวิตั้��ง ค�อ บน-ลำ"�ง

Page 4: Designing web navigation

2. รูะบบเนวิ เกชั�นแบบโกลำบอลำ (Global)

•หรู�อเรู�ยู่กวิ"�แบบตั้ลำอดัที่��งเวิ-บไซตั้/•ชั"วิยู่เส่รู มัข'อจ��ก�ดัของรูะบบแรูก• ให'ยู่'�ยู่ในแนวินอนไดั'อยู่"�งมั�ปรูะส่ ที่ธิ ภ�พ

ตั้ลำอดัที่��งเวิ-บ• ใชั'เป�นลำ งค/ไปยู่�งส่"วินหลำ�กของเวิ-บ•อยู่�"ในรู�ปแบบเนวิ เกชั�นบ�รู/ดั'�นบนหรู�อดั'�น

ลำ"�งของเวิ-บ•ควิรูมั�ลำ งค/กลำ�บมั�หน'�แรูก•ผู้�'ควิรูน ยู่มัอ"�นจ�กซ'�ยู่ไปขวิ�•ก�รูจ�ดัวิ�งลำ งค/ส่�"หน'�แรูกไวิ'ซ'�ยู่ส่3ดัจะดั�ที่��ส่3ดั

Page 5: Designing web navigation

2. รูะบบเนวิ เกชั�นแบบโกลำบอลำ (Global)

• ตั้��แหน"งที่��ดั�ที่��ส่3ดัค�อดั'�นบนหรู�อลำ"�งส่3ดัไมั"ใชั"ดั'�นข'�ง

•ดั'�นบน : มัองเห-นที่�นที่� ชั��แนะไปยู่�งแหลำ"งข'อมั�ลำไดั'รูวิดัเรู-วิ

• ดั'�นลำ"�ง : ไมั"ตั้'องเลำ��อนข4�นไปคลำ กข'�งบน กรูณี�หน'�ยู่�วิมั�ก

• เนวิ เกชั�นแบบน��ตั้'องมั�อยู่�"ที่��ดั'�นบนของที่3ก ๆหน'�

• ดั'�นลำ"�งจะมั�หรู�อไมั"มั�ก-ไดั'ข4�นก�บควิ�มัยู่�วิ

Page 6: Designing web navigation

3. รูะบบเนวิ เกชั�นแบบโลำคอลำ (Local)

• ใชั'ส่��หรู�บเวิ-บที่��ซ�บซ'อนมั�ก• เชั"น ห�วิข'อยู่"อยู่ของเน��อห�ที่��อยู่�"ภ�ยู่ในส่"วิน

หลำ�กๆ ของเวิ-บ• เพ �มัควิ�มัส่ะดัวิกแลำะส่��อควิ�มัหมั�ยู่ให'ดั�ข4�น

Page 7: Designing web navigation

4. รูะบบเนวิ เกชั�นเฉพ�ะที่�� (Ad Hoc)

• ใชั'แบบเฉพ�ะที่��ตั้�มัควิ�มัจ��เป�นของเน��อห�• ลำ งค/ของค��ที่��น"�ส่นใจฝั8งแบบ Embedded link

เชั��อมัไปยู่�งหน'�รู�ยู่ลำะเอ�ยู่ดัข'อมั�ลำเพ �มัเตั้ มั• มั�กใชั'ค��แที่น url ลำ งค/• ไมั"ส่รู'�งมั�กจนรูก• เป�นรู�ปแบบที่��แส่ดังผู้ลำไดั'ดั�ไมั"เดั"นชั�ดัเก นไป• ไมั"รูบกวินส่�ยู่ตั้�• แตั้"ข'อเส่�ยู่ อ�จถู�กมัองข'�มัไดั'รูวิดัเรู-วิ• ที่�งแก' ใชั'ส่�ที่��แตั้กตั้"�งหรู�อ ที่��เป�นลำ งค/เพ �มัในส่"วินดั'�น

บนหรู�อลำ"�งเพจ• เชั"น แหลำ"งข'อมั�ลำที่��เป�นปรูะโยู่ชัน/

Page 8: Designing web navigation

องค/ปรูะกอบของรูะบบเนวิ เกชั�นหลำ�ก

1 .เนวิ เกชั�นบ�รู/ (Navigation Bar ) : กลำ3"มัของลำ งค/ เป�นตั้�วิหน�งส่�อ หรู�อกรู�ฟิ;ก น ยู่มัมั�ที่��ส่3ดั

2. เนวิ เกชั�นบ�รู/รูะบบเฟิรูมั (Frame-Base ) : ส่รู'�งลำ งค/จ�กเฟิรูมัควิบค3มัที่3กหน'�

3. Pull-Down Menu : เป�นส่"วินปรูะกอบของฟิอรู/มั มั�รู�ยู่ก�รูให'เลำ�อกมั�กมั�ยู่ แตั้"ใชั'พ��นที่��น'อยู่ เข'�ถู4งรู�ยู่ก�รูยู่"อยู่ไดั'ส่ะดัวิก

4. Pop-Up Menu : ปรู�กฎรู�ยู่ก�รูเมัน�ยู่"อยู่ๆ เมั��อเอ�เมั�ส่/ไปวิ�ง ใชั'จ�วิ�ส่ครู ปตั้/ ชั"วิยู่ให'เพจดั�ไมั"รูก ปรูะหยู่�ดัพ��นที่��

5. Image Map : ใชั'รู�ปกรู�ฟิ;กเป�นลำ งค/แบบ Image Menu ควิรูใส่"แที่-ก ALT ข'อเส่�ยู่ บ�งที่��ไมั"รู�'วิ"�คลำ กไดั'

6. Search Box : ไวิ'ใชั'ส่�บค'นข'อมั�ลำภ�ยู่ในเวิ-บ เพ �มัควิ�มัเรู-วิในก�รูห�ข'อมั�ลำ

Page 9: Designing web navigation

องค/ปรูะกอบของรูะบบบเนวิ เกชั�นเส่รู มั

1 .รูะบบส่�รูบ�ญ่ (Table of Contens) แส่ดังภ�พรูวิมัของเวิ-บไซตั้/

2. รูะบบดั�ชัน� (Index System )

3. แผู้นที่��เวิ-บไซตั้/ (Site Map)4. ไกดั/ที่�วิรู/ (Guide Tour)

Page 10: Designing web navigation

องค/ปรูะกอบของรูะบบบเนวิ เกชั�นเส่รู มั

• รูะบบส่�รูบ�ญ่ (Table of Contens) แส่ดังภ�พรูวิมัของเวิ-บไซตั้/

Page 11: Designing web navigation

องค/ปรูะกอบของรูะบบบเนวิ เกชั�นเส่รู มั

• รูะบบดั�ชัน� (Index System)

Page 12: Designing web navigation

ก�รูที่��ดั�ชัน�ของเวิ-บไซที่/• พ จ�รูณี�ถู4งส่ �งที่��ผู้�'ใชั'ส่นใจแลำะตั้'องก�รูห�• ส่��รูวิจเน��อห�ในเวิ-บไซที่/ แลำะเข�ยู่นรู�ยู่ชั��อของเน��อห�ที่��

ส่��ค�ญ่ออกมั�ครู"�วิ ๆ ก"อน• รูวิมัรู�ยู่ชั��อที่��มั�ควิ�มัหมั�ยู่ใกลำ'เค�ยู่งก�นไวิ'ภ�ยู่ใตั้'ชั��อ

เดั�ยู่วิก�น เชั"น “ Product Information” แลำะ “ Product Pictures” ก-ควิรูรูวิมัเป�น “Product

s”• พ จ�รูณี�ถู4งก�รูส่ลำ�บค�� เชั"น “ Bangkok Map”

แลำะ “ Map, Bangkok” เพ��อให'ผู้�'ใชั'ค'นห�ไดั'ง"�ยู่ข4�น

Page 13: Designing web navigation

แผู้นที่��เวิ-บไซที่/ (Site Map)

• แผู้นที่��เวิ-บไซที่/เป�นก�รูแส่ดังโครูงส่รู'�งข'อมั�ลำในเวิ-บไซที่/แบบกรู�ฟิ;ก

Page 14: Designing web navigation

ไกดั/ที่�วิรู/ (Guided Tour)

• ไกดั/ที่�วิรู/เป�นวิ ธิ�ก�รูน��เส่นอที่��เหมั�ะส่��หรู�บผู้�'ใชั'หน'�ใหมั" เพ��อแนะน��ก�รูใชั'ง�นที่��ซ�บซ'อน หรู�อเป�นเครู��องจ�งใจให'ส่มั�ครูเป�นส่มั�ชั ก

• ควิรูส่รู'�งลำ งค/ไปห�ไกดั/ที่�วิรู/เอ�ไวิ'ที่��หน'�แรูกของเวิ-บไซที่/

• ไมั"ควิรูบ�งค�บให'ที่3กคนผู้"�นส่"วินไกดั/ที่�วิรู/ที่3กครู��ง

Page 15: Designing web navigation

ก�รูออกแบบรูะบบเนวิ เกชั�นของเวิ-บไซที่/ก�รูส่รู'�งรูะบบเนวิ เกชั�นหลำ�ก

– ก�รูจ�ดัรูะบบข'อมั�ลำภ�ยู่ในเวิ-บไซที่/ ควิรูมั�ที่�งเลำ�อกไมั"เก น - 810 ที่�งในแตั้"ลำะหน'�

– ผู้�'ใชั'ควิรูเข'�ถู4งข'อมั�ลำใดั ๆ ดั'วิยู่ก�รูคลำ กไมั"เก น - 23 ครู��งก�รูส่รู'�งรูะบบเนวิ เกชั�นเส่รู มั

– เลำ�อกรูะหวิ"�งรูะบบส่�รูบ�ญ่ ดั�ชัน� หรู�อ แผู้นที่��เวิ-บไซที่/ โดัยู่พ จ�รูณี�ตั้�มัลำ�กษณีะของโครูงส่รู'�งข'อมั�ลำ

• รูะบบส่�รูบ�ญ่ - > ข'อมั�ลำแบ"งเป�นลำ��ดั�บชั��นชั�ดัเจน • ดั�ชัน� - > ข'อมั�ลำกรูะจ�ดักรูะจ�ยู่ไมั"เป�นรูะบบ • แผู้นที่��เวิ-บไซที่/ - > ข'อมั�ลำส่�มั�รูถูส่��อถู4งภ�พลำ�กษณี/ของ

ตั้�วิมั�นเองไดั' – พ จ�รูณี�ถู4งควิ�มัจ��เป�นในก�รูใชั'ไกดั/ที่�วิรู/

Page 16: Designing web navigation

ก�รูออกแบบรูะบบเนวิ เกชั�นของเวิ-บไซที่/

• เนวิ เกชั�นแบบกรู�ฟิ;ก VS ตั้�วิอ�กษรู – กรู�ฟิ;กดั�ส่วิยู่กวิ"�ตั้�วิอ�กษรู แตั้"ก�รูแส่ดังผู้ลำหน'�เวิ-บจะชั'�ตั้�มั

ขน�ดัไฟิลำ/ของกรู�ฟิ;ก – เพ �มัเตั้ มัรู�ยู่ก�รูเมัน�แบบตั้�วิอ�กษรูง"�ยู่กวิ"�แบบกรู�ฟิ;ก – ก�รูใชั'เนวิ เกชั�นแบบตั้�วิอ�กษรูเป�นส่ �งที่��ง"�ยู่ที่��ส่3ดัแลำะยู่�งส่��อควิ�มัหมั�ยู่ไดั'ดั�ที่��ส่3ดั

• เนวิ เกชั�นแบบกรู�ฟิ;กพรู'อมัค��อธิ บ�ยู่ – เลำ�อกใชั'ไอคอนหรู�อกรู�ฟิ;กเป�นเนวิ เกชั�น ก-ควิรูมั�ค��อธิ บ�ยู่ก��ก�บดั'วิยู่ที่3กครู��ง

Page 17: Designing web navigation

พ��นฐ�นของรูะบบเนวิ เกชั�น • ตั้อนน��ก��ลำ�งอยู่�"ที่��ไหน • จ�กน��ส่�มั�รูถูไปที่��ไหนไดั'บ'�ง • ไปส่�"ที่��ตั้"�ง ๆ ไดั'อยู่"�งไรู • หลำ�งจ�กไปที่��อ��นแลำ'วิ จะกลำ�บมั�ที่��เดั มัไดั'อยู่"�งไรู • ไดั'ผู้"�นที่��ไหนมั�บ'�งแลำ'วิ

Page 18: Designing web navigation

ค3ณีส่มับ�ตั้ ส่��ค�ญ่ของรูะบบเนวิ เกชั�น 1. เข'�ใจง"�ยู่

2. มั�ควิ�มัส่มั���เส่มัอ 3. มั�ก�รูตั้อบส่นองตั้"อผู้�'ใชั' 4. มั�ควิ�มัพรู'อมัแลำะเหมั�ะส่มัตั้"อก�รูใชั'ง�น 5. น��เส่นอหลำ�ยู่ที่�งเลำ�อก 6. มั�ข��นตั้อนส่��นแลำะปรูะหยู่�ดัเวิลำ� 7. มั�รู�ปแบบที่��ส่��อควิ�มัหมั�ยู่ 8. มั�ค��อธิ บ�ยู่ที่��ชั�ดัเจนแลำะเข'�ใจไดั'ง"�ยู่ 9. เหมั�ะส่มัก�บวิ�ตั้ถู3ปรูะส่งค/ของเวิ-บไซที่/

10. ส่น�บส่น3นเป>�หมั�ยู่แลำะพฤตั้ กรูรูมัของผู้�'ใชั'

Page 19: Designing web navigation

เข'�ใจง"�ยู่•ก�รูเข'�ถู4งเน��อห�ไมั"ควิรูลำ4กลำ�บ

ซ�บซ'อน•ส่รู'�งรูะบบเนวิ เกชั�นให'ชั�ดัเจน

แลำะง"�ยู่ตั้"อก�รูเข'�ใจ

Page 20: Designing web navigation

มั�ควิ�มัส่มั���เส่มัอ•ควิรูให'อยู่�"ในตั้��แหน"งส่มั���เส่มัอตั้ลำอดัที่��งเวิ-บไซตั้/

เพ��อส่รู'�งควิ�มัค3'นเคยู่• ใชั'รูะบบเนวิ เกชั�นที่��มั�รู�ปแบบเดั�ยู่วิก�นที่��งลำ�กษณีะ

จ��นวินรู�ยู่ก�รู ลำ��ดั�บของรู�ยู่ก�รู•อยู่"�ใชั'จ��นวินรู�ยู่ก�รูที่��มั�กเก นไป•หลำ�กเลำ��ยู่งก�รูใชั'ค��ที่��มั�ควิ�มัหมั�ยู่ใกลำ'เค�ยู่งก�น

เมั��อพ�ดัถู4งส่ �งเดั�ยู่วิก�น เชั"น Clients ก�บ Projects หรู�อ Home ก�บ Main หรู�อ help ก�บ FAQ ควิรูใชั'ค��ใดัค��หน4�งตั้ลำอดัที่��งเวิ-บไซตั้/

Page 21: Designing web navigation

มั�ก�รูตั้อบส่นองตั้"อผู้�'ใชั'• เชั"นก�รูส่รู'�งส่�หรู�อลำ�กษณีะของรู�ยู่ก�รูป8จจ3บ�น

เพ��อให'ตั้"�งไปจ�กรู�ยู่ก�รูอ��น•ควิรูตั้�ดัลำ งค/ที่��จะน��ไปส่�"หน'�ของตั้�วิเองออกเพ��อไมั"

ให'เก ดัควิ�มัส่�บส่น• รูะบบเนวิ เกชั�นควิรูบอกให'รู�'วิ"�หน'�ไหนที่��ไดั'ผู้"�น

เข'�ไปแลำ'วิบ'�ง•ก�รูใชั'เที่คน คเชั"น onMouseDown แลำะ

onMouseUp•หรู�อเชั"น Home>Entertainment>Music

Page 22: Designing web navigation

มั�ควิ�มัพรู'อมัแลำะเหมั�ะส่มัตั้"อก�รูใชั'ง�น

•อยู่�"ในตั้��แหน"งที่��มัองเห-นไดั'ชั�ดัเจน•น ยู่มัวิ�งไวิ'ข'�งบนหรู�อดั'�นซ'�ยู่มั�อของหน'�•เนวิ เกชั�นควิรูอยู่�"ในที่3กแห"งที่��ตั้'องก�รูเพ��อไมั"

ให'ผู้�'ใชั'ห�นไปใชั'ป3@มั Back ของบรู�วิเซอรู/•ผู้�'ออกแบบตั้'องพยู่�ยู่�มัค ดัแที่นผู้�'ใชั'วิ"�เมั��อ

เข�ที่��ก จกรูรูมับ�งอยู่"�งเส่รู-จแลำ'วิเข�อยู่�กจะไปที่��ไหนตั้"อ เชั"น ตั้'องก�รูกลำ�บมั�ที่��ตั้อนตั้'นของหน'�น��นหรู�อไมั" หรู�อ เมั��อคลำ กดั�รู�ปใหญ่"แลำ'วิตั้'องก�รูลำ งค/กลำ�บมั�ที่��หน'�เดั มัหรู�อไมั"

Page 23: Designing web navigation

น��เส่นอหลำ�ยู่ที่�งเลำ�อก•ผู้�'ใชั'แตั้กตั้"�งแตั้"ลำะแบบ ดั�งน��นควิรูจ�ดัรูะบบเนวิ

เกชั�นไวิ'หลำ�ยู่รู�ปแบบในก�รูเข'�ถู4งข'อมั�ลำเดั�ยู่วิก�น

•โดัยู่อ�จจ�ดัที่��ส่�รูบ�ญ่ , site map หรู�อ Search box

•เพรู�ะผู้�'ใชั'บ�งคนใชั'รูะบบส่�บค'นส่ �งที่��ตั้'องก�รูไดั'รูวิดัเรู-วิ ซ4�งตั้รูงข'�มัก�บอ�กกลำ3"มัที่��ชัอบคลำ กไปเรู��อยู่ๆ ตั้�มัห�วิข'อตั้"�งๆ เพ��อส่��รูวิจส่ �งที่��น"�ส่นใจ

Page 24: Designing web navigation

มั�ข��นตั้อนส่��นแลำะปรูะหยู่�ดัเวิลำ�

•ให'ผู้�'ใชั'เข'�ถู4งข'อมั�ลำที่��ตั้'องก�รูโดัยู่ผู้"�นข��นตั้อนที่��ส่��นแลำะปรูะหยู่�ดัเวิลำ�ที่��ส่3ดั

•จ�กก�รูศึ4กษ�พบวิ"�จ��นวินรู�ยู่ก�รูในหน4�งเมัน�ไมั"ควิรูเก นจ��นวิน 8-10 รู�ยู่ก�รู เพ��อให'ตั้�ดัส่ นใจเลำ�อกรู�ยู่ก�รูไดั'ง"�ยู่

•ก�รูมั� Navigation Shortcut ให'ส่�"เป>�หมั�ยู่เรู-วิข4�น เชั"น Sitemap , pull down menu เหมั�ะก�บเวิ-บที่��มั�ขน�ดัใหญ่"ซ�บซ'อน

Page 25: Designing web navigation

มั�รู�ปแบบที่��ส่��อควิ�มัหมั�ยู่

• ออกแบบเนวิ เกชั�นให'เหมั�ะส่มัก�บ Interface มัองเห-นไดั'ชั�ดัเจนวิ"�เป�นเนวิ เกชั�น

• ห�เจอง"�ยู่ ไมั"กลำ�นไปก�บรู�ปแลำะตั้�วิหน�งส่�อ• ขน�ดั ส่� ตั้��แหน"ง ลำ�กษณีะแลำะก�รูเคลำ��อนไหวิ

ขององค/ปรูะกอบในเวิ-บ ชั"วิยู่ส่��อควิ�มัหมั�ยู่ถู4งควิ�มัส่��ค�ญ่ของเน��อห�ตั้"�งๆให'ผู้�'ใชั'ไดั'รู�'

• ไมั"จ��เป�นตั้'องใชั' “โปรูดัคลำ กที่��น��เพ��อเข'�ส่�"รู�ยู่ลำะเอ�ยู่ดั” แตั้"ที่��ตั้�วิอ�กษรูส่"วินน��นให'มั�ส่�ที่��แตั้กตั้"�งไปจ�กส่"วินอ��น

Page 26: Designing web navigation

มั�ค��อธิ บ�ยู่ที่��ชั�ดัเจนแลำะเข'�ใจง"�ยู่

•ไมั"ควิรูเลำ�อกใชั'ค��ยู่"อที่��เข'�ใจไดั'ยู่�ก พยู่�ยู่�มัเลำ�อกใชั'ค��ที่��มั�ควิ�มัหมั�ยู่ชั�ดัเจนแลำะเฉพ�ะเจ�ะจงให'มั�ก

•ก�รูใชั'ค��อธิ บ�ยู่ที่��ชั�ดัเจนแส่ดังถู4งเป>�หมั�ยู่ของลำ งค/น��นจะชั"วิยู่ให'ผู้�'ใชั'เข'�ใจเน��อห�ไดั'ดั�ข4�น

Page 27: Designing web navigation

มั�ควิ�มัเหมั�ะส่มัก�บวิ�ตั้ถู3ปรูะส่งค/ของเวิ-บไซตั้/

•เชั"นเวิ-บไซตั้/ข�ยู่ของมั�เป>�หมั�ยู่ให'ผู้�'ใชั'ส่�มั�รูถูซ��อส่ นค'�ไดั'อยู่"�งส่ะดัวิก จ4งควิรูส่รู'�งเนวิ เกชั�นที่��ง"�ยู่ในก�รูเข'�ถู4งรู�ยู่ลำะเอ�ยู่ดัของส่ นค'� ค'นห�ง"�ยู่

•เนวิ เกชั�นที่��เหมั�ะส่มัก�บเป>�หมั�ยู่ของเวิ-บไซตั้/จะชั"วิยู่ส่น�บส่น3นให'ผู้�'ใชั'บรูรูลำ3ควิ�มัตั้'องก�รูวิ�ตั้ถู3ปรูะส่งค/ของเวิ-บไดั'อยู่"�งดั�

Page 28: Designing web navigation

ส่น�บส่น3นเป>�หมั�ยู่แลำะพฤตั้ กรูรูมัของผู้�'ใชั'

•ค3ยู่ก�บลำ�กค'�วิ"�ตั้'องก�รูรูะบบแบบใดั•ก�รูให'ควิ�มัส่��ค�ญ่จ�กเส่�ยู่งส่ะที่'อนของ

ลำ�กค'�จะน��ไปส่�"แนวิที่�งใหมั"ในก�รูดั��เน นธิ3รูก จ เชั"น เวิ-บ Amazon ที่��ปรูะส่บควิ�มัส่��เรู-จจ�กก�รูก�รูรู�บฟิ8งควิ�มัค ดัเห-นของลำ�กค'�

•ศึ4กษ�ถู4งส่�เหตั้3ก�รูไมั"กลำ'�ตั้�ดัส่ นใจซ��อส่ นค'�