เพียงแค่เลื่อนต่อไป! วิธีการออกแบบหน้ายาวและยาว

การเลื่อนแบบไม่มีที่สิ้นสุดคือการเลื่อนแบบยาวหลายๆ แบบที่ช่วยให้ผู้ใช้สามารถเลื่อนดูเนื้อหาจำนวนมากโดยไม่เห็นเส้นชัย (เป็นการเลื่อนแบบไม่รู้จบที่คุณเห็นบนฟีด Facebook, Twitter และ Tumblr)

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

• การสร้างต้นแบบ UX อย่างรวดเร็วด้วย Adobe XD Shortcuts (PDF Cheat Sheet)
• ปุ่มเลื่อน, การแบ่งหน้า หรือปุ่ม "โหลดเพิ่มเติม" อย่างไม่มีที่สิ้นสุด? การค้นพบการใช้งานในอีคอมเมิร์ซ
• แอนิเมชั่นการทำงานช่วยปรับปรุงประสบการณ์ผู้ใช้ได้อย่างไร
• กฎทองของการออกแบบการนำทางด้านล่าง

การเลื่อนแบบยาวมีประโยชน์ดังต่อไปนี้:

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

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

เมื่อใดควรใช้การเลื่อนแบบยาว

การเลื่อนแบบยาวไม่ได้มีไว้สำหรับทุกเว็บไซต์ เหมาะสมในสถานการณ์ต่อไปนี้:

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

  

• เมื่อเนื้อหาไม่สามารถแบ่งออกเป็นส่วนต่างๆ ได้ และควรนำเสนอโดยรวม (เช่น อินโฟกราฟิก)
• เพื่อเน้นคุณลักษณะ คุณภาพ หรือคุณลักษณะของผลิตภัณฑ์ในเรื่อง

ในบริบทเหล่านี้ การเลื่อนแบบยาวและการอ่านแบบยาวมีความหมายเหมือนกัน

วิธีการใช้การเลื่อนแบบยาว

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

1. ส่งเสริมให้ผู้ใช้เลื่อนดู

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

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

2. รักษาตัวเลือกการนำทางให้คงอยู่

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

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

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

3. ตรวจสอบให้แน่ใจว่าปุ่ม "ย้อนกลับ" ทำงานอย่างถูกต้อง

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

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

4. เปลี่ยน URL ตามตำแหน่งการเลื่อน

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

5. พิจารณาตัวเลือกข้ามไปที่

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

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

6. ให้คำติชมด้วยภาพเมื่อโหลดเนื้อหาใหม่

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

เนื่องจากการโหลดเนื้อหาควรจะเร็ว (ไม่ควรใช้เวลานานกว่า 2 ถึง 10 วินาที) คุณสามารถใช้ภาพเคลื่อนไหวแบบวนซ้ำเพื่อระบุว่าระบบกำลังทำงาน

7. อย่าจี้จี้

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

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

8. เพิ่มประสิทธิภาพเวลาในการโหลดหน้า

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

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

9. พิจารณาว่าหน้าของคุณใช้ทรัพยากรมากเพียงใด

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

10. พิจารณาพฤติกรรมผู้ใช้บนเพจ

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

การเลื่อนแบบยาวสำหรับเว็บไซต์อีคอมเมิร์ซ

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

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

ทำให้การนำทางและตัวกรองติดหนึบ

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

เปิดใช้งานแต่ละรายการที่จะคั่นหน้า

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

แสดงจำนวนผลลัพธ์ที่ตรงกัน

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

ทำให้ส่วนท้ายสามารถเข้าถึงได้

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

เอฟเฟกต์พารัลแลกซ์สำหรับการเลื่อนแบบยาว

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

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

Parallax Scrolling มีผลเมื่อใด

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

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

Parallax เลื่อนผิดวิธีเมื่อใด

หลีกเลี่ยงเทคนิคนี้หากผู้ใช้ส่วนใหญ่ของคุณต้องการบรรลุภารกิจที่ชัดเจน (เช่น การซื้อผลิตภัณฑ์) ตัวอย่างเช่น ลองนึกภาพว่า Amazon จะน่าหงุดหงิดเพียงใดหากคุณต้องเห็นเอฟเฟกต์พารัลแลกซ์ทุกครั้งที่ต้องการซื้อผลิตภัณฑ์

ประสิทธิภาพของพารัลแลกซ์และเพจ

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

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

คุณสามารถหาคำแนะนำเชิงปฏิบัติเพิ่มเติมสำหรับเอฟเฟกต์พารัลแลกซ์ได้ในบทความ “Parallax Done Right” โดย Dave Gamache

Parallax และการเข้าถึง

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

บทสรุป

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

บทความนี้เป็นส่วนหนึ่งของชุดการออกแบบ UX ที่สนับสนุนโดย Adobe เครื่องมือ Adobe Experience Design CC (เบต้า) ที่เพิ่งเปิดตัวสร้างขึ้นสำหรับกระบวนการออกแบบ UX ที่รวดเร็วและลื่นไหล เนื่องจากช่วยให้คุณเปลี่ยนจากแนวคิดไปสู่การสร้างต้นแบบได้เร็วยิ่งขึ้น ออกแบบ สร้างต้นแบบ และแชร์ ทั้งหมดในแอปเดียว คุณสามารถดูโปรเจ็กต์ที่สร้างแรงบันดาลใจอื่นๆ ที่สร้างด้วย Adobe XD บน Behance และเยี่ยมชมบล็อก Adobe XD เพื่อรับทราบข้อมูลล่าสุดอยู่เสมอ Adobe XD มีการอัพเดทคุณสมบัติใหม่ๆ อยู่บ่อยครั้ง และเนื่องจากเป็นรุ่นเบต้าสาธารณะ คุณจึงสามารถดาวน์โหลดและทดสอบได้ฟรี