การนำทางยูทิลิตี้ว่ามันมีผลต่อการออกแบบประสบการณ์ผู้ใช้

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

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

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

การนำทางยูทิลิตี้มีผลต่อ UX อย่างไร

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

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

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

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

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

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

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

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

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

ค้นหาสถานที่ที่ดีที่สุด

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

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

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

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

สร้างโครงสร้างแบบลอจิคัล

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

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

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

สร้างการออกแบบภาพที่มีประสิทธิภาพ

การออกแบบการนำทางยูทิลิตี้อย่างมีประสิทธิภาพนั้นต้องเป็นไปตามหลักการ KISS ที่มีชื่อเสียง (Keep It Simple, Stupid) ขอแนะนำให้จัดทำไอคอนที่มีป้ายกำกับข้อความทำให้การควบคุมดูเหมือนตัวควบคุมและเน้นการกระทำที่สำคัญที่สุด มันอาจเป็นความคิดที่ดีที่จะแยกความแตกต่างระหว่างยูทิลิตี้และการนำทางเนื้อหาโดยใช้การออกแบบที่แตกต่างกันเล็กน้อย.

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

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

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