ตัวอย่างของลำดับชั้นในโครงสร้างเว็บ

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

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

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

แนวทางพีระมิด

มันอาจช่วยให้คิดถึงเว็บไซต์เป็นพีระมิด ที่ด้านบนสุดของปิรามิดคือระดับแรกของเว็บไซต์คือโฮมเพจ ลำดับชั้นที่มีประสิทธิภาพประกอบด้วยข้อมูลทั่วไปและลิงค์ที่ชี้ไปยังเว็บเพจอื่นที่มีข้อมูลรายละเอียดเพิ่มเติม หน้าเหล่านั้นปรากฏใต้โฮมเพจและกลายเป็นระดับที่สองของไซต์ในลำดับชั้น ไซต์พื้นฐานอาจต้องมีสองระดับและหน้าแรกอาจมีลิงก์ที่ชี้ไปยังหน้าเช่น "เกี่ยวกับเรา" "ผลิตภัณฑ์" และ "เข้าร่วม" เป็นความคิดที่ดีที่จะให้ผู้เยี่ยมชมเว็บไซต์กลับมา ไปที่หน้าแรกจากหน้าใด ๆ เช่นโดยรวมลิงค์ปุ่มหรือรายการเมนูในทุกหน้าที่ชี้ไปที่หน้าแรก

ระดับที่สามและอื่น ๆ

Whitehouse.gov เป็นตัวอย่างของไซต์ที่มีหลายระดับที่สร้างลำดับชั้นที่ซับซ้อน หน้าแรกนั้นง่าย แต่คุณสามารถไปที่หน้าอื่น ๆ ในเว็บไซต์ได้จากหน้าแรก ลำดับชั้นของประเภทนี้สามารถขยายไปสู่หลายระดับที่ระดับต่ำกว่าให้รายละเอียดมากกว่าระดับที่สูงขึ้น ตัวอย่างที่ดีของลำดับชั้นสามระดับคือไซต์ตรวจสอบหนังสือ หน้าแรกที่ระดับหนึ่งอาจให้ข้อมูลทั่วไปเช่นเดียวกับลิงก์ที่ชี้ไปยังหน้ารีวิว หน้านั้นซึ่งเป็นระดับที่สองอาจมีรายการหนังสือ เมื่อคุณคลิกหนังสือหน้าอื่นที่ชื่อว่า "สงครามและสันติภาพ" อาจแสดงความเห็นเกี่ยวกับหนังสือเล่มนั้น หน้านี้จะอยู่ในระดับที่สามของเว็บไซต์ หากคุณทำแผนภาพลำดับชั้นนี้ตามที่คุณต้องการสร้างแผนภูมิองค์กรคุณจะต้องวาดกล่องที่ด้านบนแล้วเขียน "หน้าแรก" ลงไป จากนั้นคุณสามารถวาด "บทวิจารณ์" ของคุณใต้ช่อง "หน้าแรก" และเพิ่มช่อง "สงครามและสันติภาพ" ใต้ช่อง "หน้าแรก"

ใช้ส่วนหัวเพื่อแสดงลำดับชั้น

นอกเหนือจากการจัดระเบียบหน้าบนเว็บไซต์คุณสามารถจัดระเบียบเนื้อหาของหน้าเพื่อแสดงความสัมพันธ์แบบลำดับชั้น ตัวอย่างเช่นส่วนหัวช่วยให้ผู้คนสามารถนำเสนอข้อมูลในรูปแบบเค้าร่างที่ย่อยง่าย HTML มีแท็กส่วนหัวหลายแท็กเช่น h1, h2 และ h2 ที่สามารถช่วยคุณเพิ่มลำดับชั้นให้กับเว็บเพจ ตัวอย่างเช่นคุณอาจใช้แท็ก h1 ขนาดใหญ่เป็นหัวเรื่องหลักของหน้าและแท็ก h2 ที่เล็กลงสำหรับส่วนที่ชื่อ "ผลิตภัณฑ์" จากนั้นคุณสามารถเพิ่มแท็ก h3 ด้านล่างผลิตภัณฑ์เพื่อสร้างส่วนย่อยที่อธิบายถึงผลิตภัณฑ์ของคุณ คุณยังมีตัวเลือกในการเพิ่มรายการหัวข้อย่อยไปยังหน้าของคุณ ด้วยการรวมองค์ประกอบทั้งหมดเหล่านี้คุณสามารถสร้างโครงร่างภาพที่ผู้เข้าชมเว็บไซต์สามารถเข้าใจได้อย่างรวดเร็ว

โพสต์ยอดนิยม