ก้าวข้ามขีดจำกัด – ภาพรวมของเว็บไซต์แบบเลื่อนยาว

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

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

วัตถุประสงค์และประโยชน์ของการเลื่อนแบบยาว

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

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

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

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

เมื่อใดควรใช้ Long Scroll (และเมื่อไม่ใช้)

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

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

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

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

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

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

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

ค่าใช้จ่ายทางจิตวิทยาของ Long Scroll

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

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

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

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

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

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับเว็บไซต์ Long Scroll

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

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

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

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

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

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

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

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

ตัวอย่างของ Long Scroll Done Right

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

และอีกตัวอย่างหนึ่งจาก Sam Rosen ที่ยังคงเล่นเนื้อหาเดิมซ้ำแล้วซ้ำเล่า แม้ว่าไซต์นี้จะวนกลับมาที่ด้านบนสุดแทนที่จะโหลดเนื้อหาทั้งหมดซ้ำ

บทสรุป

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• การออกแบบที่โน้มน้าวใจ: การใช้จิตวิทยาขั้นสูงอย่างมีประสิทธิภาพ
• จิตวิทยาการออกแบบและประสาทวิทยาศาสตร์ของ Awesome UX
• ประสบการณ์คือทุกสิ่ง – Ultimate UX Guide
• Ultimate UX Hook – การออกแบบที่คาดการณ์ได้ โน้มน้าวใจ และแสดงอารมณ์ใน UX
• กฎหมายที่ทดลองแล้วและเป็นจริงของ UX (พร้อมอินโฟกราฟิก)