RSS

การออกแบบ Website (Site Design)

17 มี.ค.

โครงสร้าง Web Site สามารถแบ่งสามประเภทใหญ่ๆ ดังต่อไปนี้

  • โครงสร้างแบบเรียงลำดับ Sequence
  • โครงสร้างแบบลำดับชั้น Hierarchy
  • โครงสร้างแบบใยแมงมุม Web


โครงสร้างเรียงลำดับ Sequence

โครงสร้างแรกที่จะกล่าวถึงก็คือโครงสร้างแบบ Sequence หรือโครงสร้างแบบเรียงลำดับ เป็นโครงสร้างที่นำเสนอเนื้อหาเป็นลำดับ เส้นตรง ผู้เข้าใช้บริการ Website จะต้องอ่านเนื้อหาให้จบทีละหน้าตามลำดับ ไม่สามารถเห็นเนื้อหาหน้าอื่นได้ Web จะคล้ายคลึงกับการนำเสนอบทเรียนคอมพิวเตอร์ช่วยสอนแบบ Liner

ส่วนใหญ่การนำเสนอเนื้อหาแบบ Sequence นี้จะเป็นประเภทบริการฐานข้อมูลเช่น Search Engine ต่างๆ เช่น Google.com, Yahoo.com หรือ Search Engine ที่สืบค้นข้อมูลในห้องสมุด ลักษณะการนำเสนอเป็นดังภาพข้างต้น

การนำเสนอระดับ Main Page จะถูกนำเสนอแบบเรียงลำดับ ส่วนระดับรายละเอียด Detail Page จะนำเสนอในระดับล่างลงมา อย่างไรก็ตาม หากต้องการจะดูเนื้อหาในหัวข้อ Main Page ถัดไปจะไม่สามารถทำได้ จะต้องอ่านส่วน Detail Page ในหัวเรื่องนั้นให้จบเสียก่อน ดังภาพข้างล่าง

ข้อด
เหมาะสำหรับการนำเสนอในรูปแบบของการบริการฐานข้อมูล เช่น Search Engine ต่างๆ iระบบฐานข้อมูลห้องสมุด ระบบฐานข้อมูล Video on Demand เพราะข้อมูลทุกหน้าผู้ใช้บริการจะต้องอ่านใช้ความละเอียดดูทุกหน้าเพื่อไม่ให้พลาดข้อมูลที่ตนเองต้องการ

ข้อเสีย

ผู้ใช้บริการจะต้องเสีย เวลาอ่านในทุกๆหน้า ไม่สามารถข้ามไปเรื่องอื่นๆหน้าอื่นๆที่สนใจได้หรือออกจากหน้า Page ทันทีได้ ไม่เหมาะสำหรับการนำเสนอเพื่อประชาสัมพันธ์หรือเพื่อการศึกษา เพราะผู้ใช้บริการจะไม่เป็นอิสระจะรู้สึกเหมือนถูกบังคับให้อ่าน เช่น Webpage ของทางราชการเป็นต้น

โครงสร้างแบบลำดับชั้น Hierarchy

ลักษณะการนำเสนอจะเป็นเสมือนขั้นบันได โดยจะนำเสนอในหน้าหลักก่อน จากนั้นผู้ใช้บริการสามารถเลือกหัวข้อที่ตนเองสนใจอ่านได้และไม่ต้องอ่านทุกหัวข้อเช่นแบบ Sequence ดังภาพ

เมื่อผู้ใช้บริการเลือกหัวข้อที่ตนเองสนใจได้แล้วก็สามารถเข้าอ่านในส่วนรายละเอียด Page ได้ ในขณะที่อ่านก็สามารถออกจากหน้ารายละเอียดไปสู่หน้าหลักได้นั้นๆได้ จากนั้นก็เลือกหัวข้อที่สนในหน้าหลักนั้นๆต่อไป ดังภาพ

การนำเสนอในลักษณะ Hierarchy จะเป็นที่นิยมที่สุด เนื่องจากผู้ใช้บริการสามารถเลือกอ่านในหัวข้อที่สนใจได้ อาธิเช่นการนำเสนอเพื่อการประชาสัมพันธ์องค์กร การนำเสนอเพื่อการศึกษา การเรียนการสอน การฝึกอบรม ที่ส่วนใหญ่เรียนว่า e-Learning เช่น ThaiWBI.com

ข้อด

ผู้ใช้บริการสามารถเลือกอ่านในหัวข้อที่สนใจได้ โดยไม่ต้องอ่านทุกหัวข้อ ผู้ใช้บริการ จะไม่รู้สึกว่ามีเนื้อหารายละเอียดที่จะต้องอ่านมาก เนื่องจากใช้เทคนิคการนำเสนอเป็นขั้นบันได Sequence และผู้ใช้บริการจะไม่เกิดการหลงทางเพราะจะทราบสถานะตนเองว่าอยู่ ณ ที่ใดของ Website เหมาะสำหรับนำเสนอเพื่อการเรียนการสอน

ข้อเสีย

หากมี Link หน้าใดเสียไป และผู้ใช้บริการที่เป็นผู้ใช้บริการใหมจะไม่สามารถกดปุ่ม Back ได้และจะเกิดการหลงทางทันที จำเป็นต้องมีการออกแบบ Site Structure Design ก่อนจึงสามารถนำเสนอในเทคนิคนี้ได้ดี

โครงสร้างแบบใยแมงมุม Web

การนำเสนอแบบใยแมงมุม เป็นการนำเสนอที่มีความยืดหยุ่นสูงมากเพราะหน้าทุกหน้าไม่ว่าจะเป็นหน้าหลัก หรือหน้ารายละเอียดจะถูกเชื่อมต่อถึงกันหมด ผู้ใช้บริการสามารถเข้าสู่หน้าใดหน้าหนึ่งก่อนก็ได้ และเมื่อต้องการออกไปหน้าอื่นๆก็สามารถทำได้ทันที เช่น Website ปากินกะบันเทิง Sanook.com, Hunsa.com, Thairath.com ฯลฯ ดังภาพ

ข้อดี
เนื่องจากทุกหน้าถูกเชื่อมต่อหากันหมดผู้ใช้บริการจึงสามารถเข้าสู่หน้าต่างอย่างรวดเร็ว เหมาะสำหรับ Website ที่ต้องการให้ผู้เข้าใช้บริการในลักษณะเยี่ยมชมเพื่ออ่านข้อมูลขอตนเองได้อย่างรวดเร็ว

ข้อเสีย
เนื่องจากการเชื่อมทุกหน้าเข้าหากันการนำหน้าทุกหน้าจึงไม่เป็นลำดับ ผู้ใช้บริการจะเกิดการหลงทางสับสนเนื้อหาว่าตนเองได้อ่านอะไรไปก่อนหลังบ้าง ไม่เหมาะกับ Website เพื่อการประชาสัมพันธ์ การสื่อสารการเรียนการสอน

ตัวอย่างการออกแบบ Web-Based Instruction (WBI SiteDesign)

หลังจากที่ได้ศึกษาการออกแบบโครงสร้างเวป Site Design มาพอสังเขปแล้ว มาในตอนนี้จะได้นำความรู้การออกแบบโครงสร้างดังกล่าวมาปรับใช้กับ Web-Besed Instruction จากโครงสร้างแบบลำดับชั้น (Hierarchy) ที่เหมาะสมการการออกแบบเวปเพื่อการเรียนการสอน (WBI) มากที่สุด

จึงขอนำโครงสร้างเวปแบบลำดับชั้น (Hierarchy) มาออกแบบเวปเพื่อการเรียนการสอน (WBI) ดังนี้

รูปแบบโครงสร้างเวปแบบลำดับชั้น (Hierarchy) ที่นำมาปรับเป็นโครงสร้างของ Web-Based Instruction จากภาพนั้น จะเห็นได้ว่าโครงสร้างเวปแบ่งได้ 3 ลำดับชั้นด้วยกัน

แผนภาพต้นไม้

เราสามารถเขียนเป็นแผนภาพต้นไม้ (Root Tree) ได้ดังนี้

จากแผนภาพต้นไม้เราสามารถนับเป็นจำนวนหน้าได้ดังนี้

  • หน้าบทเรียนหลัก (Layer 1) จำนวน 1 หน้า
  • หน้าบทเรียนรอง 1 (Layer 2) จำนวน 8 หน้า
  • หน้าบทเรียนรอง 2 (Layer 3) จำนวน 4 หน้า

รวมทั้งหมด 13 หน้า

 

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

 
%d bloggers like this: