การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
คือ การจัดหมวดหมู่ และลำดับของเนื้อหา แล้วจัดทำเป็นแผนผังโครงสร้างเว็บไซต์ ซึ่งจะทำให้เรารู้ว่ามีเนื้อหาอะไรบ้างภายในเว็บไซต์ และแต่ละหน้าเว็บเพจนั้นมีการเชื่อมโยงกันอย่างไร
โครงสร้างเว็บไซต์ที่ดีจะช่วยให้ผู้ชมไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว ไม่ควรเป็นลำดับที่ลึกหลายชั้นเกินไป เพราะผู้ใช้จะเบื่อเสียก่อน กว่าจะค้นหาเจอหน้าที่ต้องการ
1. รวบรวมข้อมูล เนื้อหาที่จะนำมาสร้างเว็บ แล้วนำมาจัดหมวดหมู่ และลำดับเนื้อหาก่อนหลัง (ตัดส่วนที่ไม่จำเป็นออก) แล้ววางโครงสร้างเว็บไซต์ในภาพรวมทั้งหมด
2. จัดทำแผนผังโครงสร้างการเชื่อมโยงไฟล์ เป็นแผนผังที่แสดงโครงสร้างข้อมูล ลำดับชั้น และการเชื่อมโยงส่วนต่างๆ อย่างชัดเจน
3. ออกแบบหน้าแรกของเว็บไซต์ หรือที่เรียกว่า Home page
ขั้นตอนการออกแบบเว็บไซต์
ขั้นที่ 1 ออกแบบโครงสร้างเว็บไซต์ (Site map)
ขั้นที่ 2 ออกแบบการเชื่อมโยงไฟล์
ขั้นที่ 3 ออกแบบหน้าโฮมเพ็จ (Home Page)
ตัวอย่างการออกแบบโครงสร้างเว็บไซต์
ร้านขายคอมพิวเตอร์และอุปกรณ์
ตัวอย่างการออกแบบโครงสร้างเว็บไซต์
เรื่องไม้มงคล
ตัวอย่างการออกแบบโครงสร้างเว็บไซต์
เรื่องกระต่าย
การออกแบบระบบนำทาง (Site Navigation Design)
ระบบ Navigation เป็นระบบนำทางที่จะนำผู้ชมไปยังหน้าต่างๆ ของเว็บไซต์ ให้สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว และรู้ว่ากำลังอยู่ตรงไหนของเว็บไซต์ นอกจากนี้ยังใช้กำหนดบทบาทของผู้ใช้ซึ่งแบ่งเป็นกลุ่มๆ ได้ โดยผู้ใช้แต่ละกลุ่มจะสามารถเข้าถึงหน้าเว็บเพจได้อย่างมีขอบเขต ตามสิทธิที่วางไว้เท่านั้น
องค์ประกอบของระบบ Navigation
1. เครื่องนำทาง
- เมนูหลัก เป็นเมนูสำหรับลิงค์ไปยังหน้าหัวข้อหลักของเว็บไซต์ มักอยู่ในรูปของลิงค์ที่เป็นข้อความหรือภาพกราฟฟิก และมักถูกจัดวางอยู่ด้านบนในเว็บเพจทุกหน้า
- เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภายในกลุ่มย่อยที่มี เนื้อหาเกี่ยวเนื่องกัน มักอยู่ในรูปแบบของลิงค์ข้อความหรือกราฟฟิกเช่นกัน
- เครื่องมือเสริม สำหรับช่วยเสริมการทำงานของเมนู มีได้หลายรูปแบบ เช่น ช่องค้นหาข้อมูล (Search Box), เมนูแบบดร็อปดาวน์ (Drop-Down menu), แผนผังเว็บไซต์ (Site Map), อิมเมจแมพ (Image Map)
2. เครื่องมือบอกตำแหน่ง (Location Indicator)
เป็นสิ่งที่ใช้แสดงว่า ขณะนี้ผู้ชมกำลังอยู่ในตำแหน่งใดในเว็บไซต์ เครื่องบอกตำแหน่งมีได้หลายรูปแบบ เช่น ข้อความภาพกราฟฟิกที่แสดงชื่อเว็บเพจ หรือข้อความบ่งชี้ และบ่อยครั้งที่เครื่องมือบอกตำแหน่งถูกรวมไว้กับตัวเมนูเลย
ลักษณะของระบบเนวิเกชั่นที่ดี
- อยู่ในตำแหน่งที่เห็นได้ชัดและเข้าถึงง่าย เช่น ส่วนบนหรือด้านขวาของเว็บเพจ
- เข้าใจง่ายหรือมีข้อความกำกับชัดเจน ผู้ชมใช้ได้ทันทีโดยไม่ต้องเสียเวลาศึกษา
- มีความสม่ำเสมอ วางอยู่ในตำแหน่งเดียวกันของทุกหน้าเว็บเพจ และใช้รูปแบบ สีสัน เหมือนกัน ทำให้ผู้ใช้รู้สึกคุ้นเคย
- บอกผู้ใช้ว่ากำลังอยู่ที่ตำแหน่งใดของเว็บไซต์
- มีการตอบสนองเมื่อใช้งาน เช่น เปลี่ยนสีเมื่อผู้ชมชี้เมาส์หรือคลิก
- จำนวนรายการพอเหมาะ ไม่มากเกินไป
- มีหลายทางให้เลือกใช้ เช่น เมนูกราฟฟิก , เมนูข้อความ, ช่องค้นหาข้อมูล (Search Box), เมนูดร็อปดาวน์ (Drop-down menu),
แผนผังเว็บไซต์ (Site Map)
- มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผู้ชมกลับไปเริ่มต้นใหม่ในกรณีที่หลงทางไม่รู้ว่าตัวเองอยู่ที่ตำแหน่งใด