การออกแบบแนวคิดเมนูการนำทางที่ชนะและแรงบันดาลใจ

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

ทุกวันนี้คุณสามารถเห็นเมนูนำทางหลากหลายประเภทพร้อมการออกแบบที่น่าสนใจสร้างสรรค์และแปลกตา แต่การนำทางที่มีประสิทธิภาพเกี่ยวกับเว็บไซต์จะเป็นอย่างไร มันควรมีลักษณะอย่างไร?

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

สถาปัตยกรรมสารสนเทศ

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

สถาปัตยกรรมข้อมูลประกอบด้วย คุณสมบัติความต้องการของผู้ใช้แผนผังเว็บไซต์การทดสอบและโครงลวด. คุณสามารถอ่านเพิ่มเติมเกี่ยวกับสถาปัตยกรรมข้อมูลในบทความโดย Cameron Chapman ใน Information Architecture 101: เทคนิคและวิธีปฏิบัติที่ดีที่สุด.

การใช้เทคโนโลยีที่เปิดใช้งานผู้ใช้

หลีกเลี่ยงการใช้ Flash, JavaScript, jQuery หรือสิ่งอื่นใดที่เสี่ยงต่อการเข้าถึงการนำทางเว็บไซต์ของคุณในการสร้างแถบการนำทางของคุณหรืออย่างน้อยต้องแน่ใจว่าพวกเขาสามารถย่อยสลายได้อย่างงดงาม.

สำหรับการอ้างอิงเพิ่มเติมเกี่ยวกับ การย่อยสลายที่งดงามของจาวาสคริปต์, ลองอ่านโพสต์นี้ใน 10 วิธีที่เป็นประโยชน์สำหรับ CSS และ Javascript.

ใช้คำศัพท์ที่ใช้ง่ายและเข้าใจง่าย

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

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

ตัวอย่าง

ข้อกำหนดในเมนูนำทางของเว็บไซต์ Larissa Ness นั้นง่ายต่อการเข้าใจและพบเห็นได้ทั่วไป ผู้ใช้จะไม่พบว่ามันสับสนเพราะพวกเขามีประสบการณ์เกี่ยวกับเมนูเช่นนี้แล้ว.

นี่เป็นอีกตัวอย่างที่ดีของเมนูการนำทางเว็บไซต์ที่ชัดเจนและชัดเจนพร้อมด้วยคำศัพท์ทั่วไปที่ใช้ที่ csupport.

เอเจนซี่สร้างสรรค์ Eighty8Four ใช้คำว่า "โชว์รูม" ซึ่งอาจสร้างความสับสนให้กับผู้มาเยี่ยมชม คำนี้อาจหมายถึงผลงานหรืองาน แต่ไม่ชัดเจนและผู้เยี่ยมชมไม่มีทางเลือกนอกจากคลิกเพื่อตรวจสอบ.

สร้างมาตรฐานการออกแบบการนำทาง

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

Bluegg, ที่แสดงด้านล่างใช้การออกแบบการนำทางที่ง่ายและสะอาดซึ่งยังคงเหมือนเดิมในหน้าย่อยทั้งหมด ข้อแตกต่างเพียงอย่างเดียวคือตัวบ่งชี้สีซึ่งจะแสดงหน้าที่ผู้เข้าชมอยู่ที่.

ระบุว่าคุณอยู่ที่ไหน

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

Austin Eastciders ใช้สีและพื้นหลังที่แตกต่างกันเพื่อระบุหน้าที่ผู้ใช้เปิดอยู่ ตัวบ่งชี้นี้ยังสามารถทำงานเป็นการเปลี่ยนแปลงการออกแบบที่บอบบางเช่นโดยใช้ พื้นหลังการนำทางที่แตกต่างกัน ซึ่งสร้างความรู้สึกว่ารายการเมนูอื่น ๆ อยู่ในระดับลึก.

สื่อผ่าตัด ใช้สีเข้มขึ้นเป็นตัวบ่งชี้สำหรับหน้าย่อยที่เปิด เรียบง่าย แต่มีประสิทธิภาพ.

ใช้การประชุมผ่านเว็บ

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

ถ้าคุณทำไม่ได้, คุณกำลังทำให้พวกเขาใช้เวลาเรียนรู้สิ่งใหม่ หรือในบางกรณีพวกเขาไม่สะดวกโดยไม่ให้สิ่งที่พวกเขาคาดหวังว่าจะได้รับการยอมรับมาตรฐานการเดินเรือ.

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการประชุมทางเว็บได้ที่นี่:

10 ข้อตกลงการออกแบบเว็บ
อย่าบูรณาการล้อออกแบบเว็บไซต์
ออกแบบด้วยการประชุมผ่านเว็บ

การออกแบบหัวฉีด วางโลโก้ที่มุมซ้ายบนซึ่งเหมาะกับหนึ่งในการประชุมทางเว็บที่มีผู้ใช้มากที่สุดในปัจจุบัน.

การสร้างอดัมส์ ใช้การประชุมทางเว็บที่ใช้กันมากที่สุดโดยมีการวางโลโก้ไว้ที่มุมบนซ้ายของเว็บไซต์และเชื่อมโยงไปยังหน้าแรก.

ทดสอบ: เกี่ยวข้องกับบุคคลที่สาม

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

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

จัดเตรียมบริบท

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

ไบค์ของฉันเอง ใช้ไอคอนอย่างง่ายเพื่อให้ผู้ใช้ข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่พวกเขาสามารถหาได้ในหน้าย่อยบางอย่าง.

Sarah Parmenter ใช้คำอธิบายภาพสั้นและดีภายใต้การนำทางหลักเพื่อให้ข้อมูลเกี่ยวกับหน้าย่อยที่การนำทางหลักเชื่อมโยง.

วัตถุประสงค์ SEO

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

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

สคริปต์นำทางฟรี (CSS และ jQuery)

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

สคริปต์ Scroller แนวข่าวที่ขับเคลื่อนด้วย XML โดยใช้ HTML และ jQuery: vScroller