การออกแบบโครงสร้างเว็บไซต์

การออกแบบโครงสร้างเว็บไซต์ (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)

- มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผู้ชมกลับไปเริ่มต้นใหม่ในกรณีที่หลงทางไม่รู้ว่าตัวเองอยู่ที่ตำแหน่งใด