5 ข้อผิดพลาดในการนำทางเว็บที่ทำให้คุณเสีย Conversion

เผยแพร่แล้ว: 2017-03-01

5 ข้อผิดพลาดในการนำทางเว็บที่ทำให้คุณเสีย Conversion

หากผู้เยี่ยมชมหาไม่พบ แสดงว่าไม่มีอยู่จริง

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

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

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

1. การนำทางที่ซ่อนอยู่บนหน้าจอขนาดใหญ่

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

เมนูเดสก์ท็อปที่ซ่อนอยู่

ตัวอย่าง: WhySoCool.com

การศึกษาที่ดำเนินการโดย Nielsen Norman Group และ WhatUsersDo พบว่า การนำทางที่ซ่อนอยู่เมื่อเทียบกับการนำทางที่มองเห็นได้หรือบางส่วนที่ซ่อนอยู่คือ ...

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

การศึกษายังเผยว่า ประสบการณ์ของผู้ใช้ได้รับผลกระทบจากการนำทางที่ซ่อน อยู่ทั้งบนมือถือและเดสก์ท็อป:

  • การค้นพบเนื้อหาต่ำกว่า
  • ระดับความยากจะสูงขึ้น
  • เวลาทำงานนานขึ้น

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

2. ก้นเท็จ

เมื่อ ผู้ใช้ไม่ชัดเจนในทันทีว่ามีเนื้อหามากกว่าจุดใดจุดหนึ่ง คุณมีปัญหา 'ด้านล่างผิดพลาด'

ต่อไปนี้เป็นสาเหตุของผู้ที่เชื่อว่าพวกเขาได้อ่านเนื้อหาจนจบแล้ว ดังนั้นจึงหาสิ่งที่ต้องการได้ยาก:

รูปภาพหรือกราฟิกขนาดใหญ่ที่เต็มทั้งหน้าจอ

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

ภาพลวงตาของการยิงฮีโร่ที่สมบูรณ์

ตัวอย่าง: NhoraOsorio.com

หากคุณจำเป็นต้องมีหน้าจอของรูปภาพหรือกราฟิก อย่างน้อยต้องมีการ ชี้นำที่ชัดเจน

ตัวอย่างเช่น WeAreMinimal.com ใช้การเคลื่อนไหวอย่างจงใจในรูปแบบของลูกศรกระเด้งเพื่อดึงดูดความสนใจของผู้ใช้และส่งสัญญาณว่ามีอะไรมากกว่าครึ่งหน้าล่าง

ทิศทางคิว

ตัวอย่าง: WeAreMinimal.com

เส้นแนวนอน

โดยทั่วไป สมองตีความเส้นแนวนอนและกฎเกณฑ์ว่าเป็นสัญญาณหยุด

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

ภาพลวงตาของความสมบูรณ์ เส้นแนวนอน สตูดิโอ Rakel

ตัวอย่าง: StudioRakelShop.com

โฆษณาที่ทำลายกระแสเนื้อหา

โฆษณาขนาดใหญ่ที่ทำให้มองเห็นสิ่งที่อยู่ด้านล่างยากต่อการมองเห็น อาจถูกตีความอย่างผิด ๆ ว่าเป็นจุดสิ้นสุดของเนื้อหา

ดูเหมือนว่า Cosmopolitan.com จะรู้จักปัญหานี้และพยายามบรรเทาปัญหาดังกล่าวด้วยการติดป้ายโฆษณาและแนะนำให้ผู้ใช้ไปที่ 'อ่านต่อด้านล่าง'

ภาพลวงตาของความสมบูรณ์ โฆษณาทำลายเนื้อหา

ตัวอย่าง: Cosmopolitan.com

การใช้พื้นที่เชิงลบมากเกินไป

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

ปัญหาจะยิ่งแย่ลงในหน้าจอขนาดเล็กที่ช่องว่างระหว่างองค์ประกอบต่างๆ ชัดเจนขึ้น ทำให้เนื้อหาที่อยู่ด้านล่างของหน้าค้นหาได้น้อยลง

ภาพลวงตาของความสมบูรณ์ ใช้พื้นที่เชิงลบมากเกินไป

ตัวอย่าง: ShopGraceGow.com

3. ขาดค่าเงิน

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

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

แต่คุณจะได้รับป้ายกำกับแบบสุ่มที่คลิกได้ ป้ายกำกับที่ไม่สามารถคลิกได้ และไม่มีวิธีที่ดีในการแยกความแตกต่างระหว่างทั้งสอง

BHLN Missing Affordance Signifier ตัวอย่าง: BHLDN.com

4. ป้ายกำกับการนำทางที่คลุมเครือ

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

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

ตัวอย่างเช่น โฮมเพจรุ่นเก่าของ Teforia.com มี 'Tea Transformed' เป็นคำกระตุ้นการตัดสินใจ (CTA) นั่นเป็นป้ายกำกับที่ปราศจากเนื้อหา – มันไม่ได้สื่อถึงสิ่งที่ผู้ใช้คาดหวังได้จริง ๆ หากพวกเขาคลิกที่มัน

คลุมเครือ Cta Teforia

GorillaMovers.com มีตัวเลือกการนำทางระดับบนสุดไม่ชัดเจน มี 'ซื้อ' แต่ไม่ชัดเจนว่าจะซื้ออะไรได้ และมีคำว่า 'สมัครกับเรา' ซึ่งอาจหมายถึง 'สมัครกับเราเพื่อขอใบเสนอราคา' หรือ 'สมัครงานกับเรา'

ป้ายคลุมเครือ ตัวย้ายกอริลลา

ตัวอย่าง: GorillaMovers.com

5. ความเบี่ยงเบนจากการประชุมทางเว็บ

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

ต่อไปนี้คือตัวอย่างสองสามตัวอย่างรูปแบบการออกแบบที่ผู้ใช้คาดหวังจากหน้าเว็บ:

ตำแหน่งโลโก้

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

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

สีไฮเปอร์ลิงก์ของร่างกาย

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

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

วางมันทั้งหมดเข้าด้วยกัน

การนำทางอย่างถูกต้องอาจเป็นเรื่องยากเมื่อคุณมีอุปกรณ์หลายเครื่องและหลายช่องทาง ที่กล่าวว่าการลงพื้นฐานอาจทำให้คุณไปได้ไกล

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

ส่วนท้ายของบล็อก Cta1