อย่าไปแตะการเลื่อน
(dontfuckwithscroll.com)- Scrolljacking คือการเขียนทับความเร็ว ทิศทาง และเอฟเฟกต์การเลื่อนตามปกติของเบราว์เซอร์ จนรบกวนประสบการณ์ท่องเว็บที่ผู้ใช้คาดหวังว่าจะลื่นไหลและคาดเดาได้
- ใน งานวิจัยด้านการใช้งาน ของ Nielsen Norman Group ผู้เข้าร่วมจำนวนมากรู้สึกสูญเสียการรับรู้ทิศทาง และบางคนมองว่าพฤติกรรมการเลื่อนที่เปลี่ยนไปเป็นบั๊ก
- ปลั๊กอินการเลื่อนแบบ momentum, smooth และ inertia ทำลายทั้ง muscle memory ของผู้ใช้และความสามารถพื้นฐานของเบราว์เซอร์ ทำให้ระบุตำแหน่งปัจจุบันบนหน้ายาว ๆ ได้ยาก
- แอนิเมชันการเปลี่ยนหน้าจอและการพึ่งพา JavaScript เพิ่ม ภาระด้านการเข้าถึงและประสิทธิภาพ ทั้งในเรื่องอาการเมา เวียนศีรษะ เทคโนโลยีช่วยเหลือ อุปกรณ์สเปกต่ำ และสภาพแวดล้อมบนมือถือ
- ผู้ใช้เข้ามาเพื่อดูเนื้อหา ไม่ใช่เอฟเฟกต์การเลื่อน ดังนั้นเว็บไซต์ควรรักษา การเลื่อนแบบเนทีฟที่รวดเร็ว เอาไว้ตามเดิม
วิธีที่ Scrolljacking ทำลายการท่องเว็บ
- Scrolljacking คือการนิยามพฤติกรรมการเลื่อนปกติของเบราว์เซอร์ใหม่ เพื่อเปลี่ยนความเร็ว ทิศทาง และเอฟเฟกต์การเลื่อนของหน้าเว็บ
- ปลั๊กอินการเลื่อนแบบ momentum, smooth และ inertia คือรูปแบบที่พบได้บ่อยของ scrolljacking
- แม้จะดูเหมือนฟีเจอร์ที่ช่วยปรับปรุง แต่จริง ๆ แล้วมันรบกวนประสบการณ์การท่องเว็บที่เป็นธรรมชาติ มีประสิทธิภาพ และคาดเดาได้
- ผลเสียหลักแบ่งได้เป็น การใช้งาน, การเข้าถึง, และ ประสิทธิภาพ
ความสับสนที่ยืนยันได้จากงานวิจัยด้านการใช้งาน
- งานวิจัยด้านการใช้งานของ Nielsen Norman Group แสดงให้เห็นว่า scrolljacking อาจทำให้ผู้ใช้สูญเสียการรับรู้ทิศทางได้
- ผู้เข้าร่วมจำนวนมากประสบกับการสูญเสียการรับรู้ทิศทางอย่างน้อยในระดับหนึ่ง
- ผู้ใช้บางคนตีความพฤติกรรมการเลื่อนที่เปลี่ยนไปว่าเป็น บั๊ก
- ผู้ใช้ที่เน้นทำงานให้เสร็จมีความอดทนต่อ scrolljacking ต่ำกว่าผู้ใช้ที่เน้นการสำรวจอย่างมาก
- ผู้เข้าร่วมคนหนึ่งตอบในทำนองว่า “ปัดไปสุดแล้ว แต่ไม่ได้ย้ายไปไหนเลย” และบอกว่าถ้าเป็นลูกค้าที่อาจจะตัดสินใจซื้อคงหงุดหงิดมาก
- บนมือถือ ปัญหานี้ยิ่งหนักขึ้นเพราะ ระยะเวลาการเลื่อนที่ยาวนาน และหน้าจอที่เล็ก
การละเมิดความคาดหวังและอำนาจควบคุมของผู้ใช้
- ผู้ใช้คาดหวังว่าพอเลื่อนแล้ว เนื้อหาจะขยับทันทีตามการกระทำ
- ปลั๊กอินการเลื่อนแบบ momentum ให้พฤติกรรมที่ผสมแอนิเมชัน แทนที่จะเคลื่อนที่ได้ทันทีและคาดเดาได้
- การเปลี่ยนแปลงแบบนี้รบกวน muscle memory และพฤติกรรมเดิมที่ผู้ใช้พึ่งพาเพื่อการนำทางอย่างมีประสิทธิภาพ
- เมื่อเขียนทับการเลื่อนพื้นฐาน การกำกับประสบการณ์ของเว็บไซต์จะมาก่อนความชอบหรือความต้องการของผู้ใช้
- ผู้ใช้เข้ามาที่เว็บไซต์เพื่อดู เนื้อหา ไม่ใช่เพื่อสัมผัสประสบการณ์การเลื่อนที่ตกแต่งเกินจำเป็น
อาการเมาและภาระด้านการเข้าถึง
- ปลั๊กอินการเลื่อนแบบ momentum เพิ่มแอนิเมชันลอย ๆ หรือโยกไปมา ซึ่งอาจสร้างภาระให้ผู้ใช้ที่ไวต่ออาการเมาหรือเวียนศีรษะ
- หลายเว็บไซต์ไม่มีตัวเลือกให้ปิด ทำให้ผู้ใช้หลีกเลี่ยงความไม่สบายระหว่างการอ่านได้ยาก
- เทคโนโลยีช่วยเหลือ อย่าง screen reader และการนำทางด้วยคีย์บอร์ดอาจถูกรบกวนจากความหน่วงด้านเวลา
- ผู้ใช้ที่มีข้อจำกัดด้านการเคลื่อนไหวหรือการมองเห็นอาจใช้งานเว็บไซต์ได้ยากขึ้นเพราะความหน่วงนี้
- การเข้าถึงไม่ควรถูกมองเป็นฟีเจอร์เสริม แต่ควรเป็นข้อกำหนดพื้นฐานของการใช้งานเว็บ
ประสิทธิภาพและความสม่ำเสมอที่ลดลงตามอุปกรณ์
- ปลั๊กอินการเลื่อนแบบ momentum ต้องโหลด JavaScript และอาจทำให้เกิดอาการหน่วง สะดุด หรือพังบนอุปกรณ์เก่าหรือสเปกต่ำ
- แทนที่หน้าจะรู้สึก “Smooth” มันอาจดูเหมือนเสียบนอุปกรณ์ที่ประสิทธิภาพต่ำ
- การเรนเดอร์แอนิเมชันต้องใช้ JavaScript library ที่บวมเกินจำเป็น, dependency เพิ่มเติม และรอบการทำงานของ CPU มากขึ้น
- ผลก็คือเวลาโหลดหน้าอาจช้าลง
- บนเครือข่ายมือถือหรือในพื้นที่ที่การเชื่อมต่อไม่ดี เอฟเฟกต์การเลื่อนที่หวือหวาจะยิ่งทำให้หน้าช้าลงและเข้าถึงได้ยากขึ้น
ปัญหากับความสามารถพื้นฐานของเบราว์เซอร์และการรับรู้ตำแหน่ง
- เบราว์เซอร์สมัยใหม่มีการตั้งค่าการเลื่อนแบบ momentum สำหรับผู้ใช้ที่ต้องการอยู่แล้ว
- ปลั๊กอินจากภายนอกอาจเขียนทับความสามารถพื้นฐานเหล่านี้หรือทำให้เกิดความขัดแย้ง จนท่าทางการเลื่อนแบบกำหนดเองหรือการเลื่อนแบบ momentum ใช้งานไม่ได้
- ค่าความชอบของผู้ใช้ เช่น การตั้งค่าลดการเคลื่อนไหวทั้งระบบ อาจไม่ทำงานตามที่ควร
- แอนิเมชันการเลื่อนแบบ momentum เพิ่มความหน่วงระหว่างอินพุตของผู้ใช้กับผลลัพธ์ที่เกิดขึ้น
- บนหน้ายาว ๆ จึงยากขึ้นที่จะระบุตำแหน่งปัจจุบันอย่างแม่นยำ และการนำทางอย่างรวดเร็วก็ยุ่งยากขึ้น
Power user และต้นทุนการบำรุงรักษา
- สำหรับ power user ที่ต้องการไล่อ่านเอกสารอย่างรวดเร็วหรือเลื่อนไปยังตำแหน่งที่ต้องการอย่างแม่นยำ การเลื่อนแบบ momentum ทำให้จังหวะการทำงานช้าลง
- การต้องรอแอนิเมชันช้า ๆ ขัดกับความคาดหวังของผู้ใช้ที่ต้องการทำงานให้เสร็จอย่างรวดเร็ว
- ปลั๊กอินการเลื่อนแบบ momentum ไม่ใช่ฟีเจอร์ที่ติดตั้งครั้งเดียวแล้วจบ
- จำเป็นต้องมี การอัปเดตเป็นประจำ เพื่อให้เข้ากันได้กับเบราว์เซอร์ ระบบปฏิบัติการ และอุปกรณ์รุ่นใหม่
- ทุกการอัปเดตมีความเสี่ยงที่จะเพิ่มบั๊กใหม่ และทำให้ทีมพัฒนาต้องมีงานเพิ่มแทนที่จะเอาเวลาและงบประมาณไปใช้ทำเว็บไซต์ให้เร็วขึ้น ปลอดภัยขึ้น หรือปรับแต่งได้ดีขึ้น
สรุป: ปล่อยให้การเลื่อนเป็นพฤติกรรมพื้นฐาน
- Scrolljacking และปลั๊กอินการเลื่อนแบบ momentum เพิ่มความซับซ้อนโดยไม่จำเป็น ลดความสามารถในการใช้งาน และสร้างความหงุดหงิดให้ผู้ใช้
- ตามคำของ Nielsen Norman Group “usability is the foundation of delight”
- แทนที่จะประดิษฐ์การเลื่อนขึ้นมาใหม่ ควรรักษาพฤติกรรมการเลื่อนแบบ เนทีฟ ที่คาดเดาได้และรวดเร็วเอาไว้
- อย่าทำให้การเลื่อนกลายเป็นอีเวนต์พิเศษ ปล่อยให้ผู้ใช้เลื่อนไปตามปกติ
1 ความคิดเห็น
ความคิดเห็นบน Hacker News
URL, การนำทางของเบราว์เซอร์ และปุ่มย้อนกลับก็ไม่ควรถูกแตะต้องเช่นกัน
ดูเหมือนจะเป็นศึกที่แพ้ไปนานแล้ว และ SPA ก็ทำให้เว็บพังและแย่ลงไปมาก
History API ยังใช้งานได้ดี จึงทำให้ SPA และตัวนำทางของมันเองทำงานสอดคล้องกับเบราว์เซอร์และผู้ใช้ได้
แต่ นักพัฒนาหลายคนไม่ใส่ใจพื้นฐานของเว็บอย่างการบุ๊กมาร์กได้และการนำทาง จนทำให้มันพัง
SPA ที่ดีควรทำงานเหมือนเว็บไซต์ทั่วไป และผู้ใช้ไม่ควรรู้ด้วยซ้ำว่าเป็น SPA นอกจากจะรู้สึกว่ามันเร็วและตอบสนองดี
เห็นด้วยว่าควรบุ๊กมาร์กหรือแชร์สถานะเฉพาะได้ แต่แทนที่จะสร้าง ขั้นตอนการนำทางใหม่ เพื่อสิ่งนั้น การเปลี่ยนเฉพาะ URL อยู่กับที่น่าจะดีกว่ามาก
คนที่ไม่ใส่ใจพื้นฐานของเว็บ, URL, การย้อนกลับ และประสบการณ์ผู้ใช้ด้านการเลื่อนต่างหากที่ทำให้เว็บพัง ไม่ใช่ SPA เอง ที่เป็นปัญหา
เบราว์เซอร์ควรแก้เรื่องนี้ แต่แรงเฉื่อยมีมากเกินไป คงไม่น่าเกิดขึ้น
ทัศนคติแบบ “เรารู้ดีกว่าผู้ใช้” นั้นไม่ได้ใช้ได้แค่กับ Momentum scrolling แต่ยังใช้ได้กับเทรนด์ UX design หลายอย่างในปัจจุบันด้วย
สงสัยเหมือนกันว่าเรามาถึงจุดที่บูชา ความงามเชิงสุนทรียะ จนยอมสละทุกอย่างได้อย่างไร
มีท่าทีดูแคลนผู้ใช้อย่างสุดโต่งที่ไม่ยอมให้ผู้ใช้รับผิดชอบอะไรเองได้เลย
วันนี้ก็เพิ่งหาวิธีปิดพฤติกรรมน่ารำคาญใน macOS ที่บอกว่า “ต้องใช้รหัสผ่านเพื่อเปิดใช้งาน Touch ID” อยู่ เข้าใจได้ถ้าขอหลังรีบูต แต่การขอตามเกณฑ์เวลาเหมือนจะปิดไม่ได้
วิธีที่ใกล้เคียงที่สุดที่เจอคือใช้คำสั่ง
bioutilเพื่อลดเวลาจำกัดลง และเพิ่มไม่ได้กำลังคิดอยู่ว่าจะ reverse engineer จุดที่ตรวจค่าสูงสุด แล้วลองเรียก API ระดับล่างโดยตรงเพื่อเลี่ยงได้ไหม
มันใกล้เคียงกับ การขาด UX design มากกว่า
เคยมีบล็อกโพสต์ดี ๆ ชื่อประมาณ “Button presses You” แต่หาไม่เจอแล้ว
ใจความคือ จุดประสงค์ของแอปพลิเคชันไม่ได้ไหลไปทางการให้ผู้ใช้กำหนดว่าจะให้โปรแกรมทำอะไร แต่ไหลไปทางที่แอปพลิเคชันเป็นฝ่ายสั่งผู้ใช้ว่าต้องทำอะไรและทำอย่างไร
สครอลล์บาร์ก็ไม่ควรถูกแตะต้องเช่นกัน
ช่วงนี้ดูเหมือนจะมีเทรนด์ทำให้มันกว้างแค่ประมาณ 1px ไปทุกที่
ถ้าอยากทำแอปให้ถูกหลักสรีรศาสตร์จริง ๆ ก็ควรทำให้ท่าทางใช้นิ้วหนึ่งหรือสองนิ้ว เช่นลากด้วยนิ้วเพื่อเลื่อน ทำงานได้ดี
แบบนั้นวิธีเดียวที่จะเลื่อนบนเดสก์ท็อปก็คือ ลากเลือกข้อความ ให้เลยขอบเฟรมออกไป
พยายามไม่ใช้คอนเทนต์ที่ล้น แต่เมื่อจำเป็นต้องล้น สครอลล์บาร์จะรบกวนงานออกแบบ และสครอลล์บาร์เริ่มต้นก็น่าเกลียดเกินไป เลยซ่อนมัน
มันปรากฏทันทีที่ขยับเมาส์ และหายไปเมื่อหยุด
ถ้าอยากดูตำแหน่งความคืบหน้า ก็แค่ขยับเมาส์นิดหน่อย
ใช้อินเทอร์เน็ตมาตั้งแต่ยุค Gopher และชอบความมินิมัลของ สุนทรียะแบบ HTML ล้วน
ลิงก์ใต้บทความที่พาไปยังเว็บไซต์ซึ่งเป็นแรงบันดาลใจให้บทความนี้ก็ดีมาก
เวลาเปิดดูซอร์สของหน้าแบบนี้ มันให้ความรู้สึกอบอุ่นแบบ “คนพวกนี้รู้จริง” ไม่ใช่แค่ความคิดถึงอดีตธรรมดา
คล้ายกับฉากในสารคดี Helvetica ที่ดีไซเนอร์อธิบายความรู้สึกตอนที่ได้เลือกใช้ Helvetica ใหม่ ๆ แทนฟอนต์สคริปต์แย่ ๆ สไตล์ยุค 1950
ผมว่ารวมถึง landing page หรูหวือหวา ที่เนื้อหาในพื้นหลังเปลี่ยนตามการเลื่อน หรือแม้แต่แบ่งส่วนของหน้าไปตามการเลื่อนด้วย
ตัวอย่าง: https://webflow.com/made-in-webflow/website/Translate-Webflo...
การเลื่อนด้วยการเอียงบน iPad ช่วยให้ผู้สูงอายุอ่านและเลื่อนได้เร็ว และ auto scroll ก็ใช้ได้ดีทีเดียว
ผมยังเกลียดการใส่ปุ่ม < > ในแถวรายการบนหน้าที่เดิมทีควรเลื่อนขึ้นลงอย่างเดียวพอ ๆ กับตอนที่เห็นครั้งแรก
แพลตฟอร์มสตรีมมิงมีชื่อเสียที่สุดในเรื่องนี้ แต่ไม่ใช่ผู้ร้ายรายเดียว
สิ่งที่เกลียดที่สุดช่วงนี้คือการดัก Ctrl+F หรือ Ctrl+K
ฝั่งเบราว์เซอร์ต้องใส่โค้ดเพิ่มแน่ ๆ เพื่อให้ทำแบบนี้ได้ และ Google หรือ Apple หรือ Mozilla ก็คงไม่เสียค่าใช้จ่ายอะไรเลยถ้าไม่เขียนโค้ดนั้น
เบราว์เซอร์ควรมีคีย์ลัดสำรองอย่าง Shift+Ctrl+F สำหรับกรณีแบบนี้
เพิ่งรู้ว่า Shift+Cmd+F ใน Firefox ทำอะไรบางอย่างได้
ไม่ควรแตะชุดคีย์มาตรฐาน
ไม่ควรยึดฟังก์ชันของแอปพลิเคชันอื่นแล้วทำให้ผู้ใช้แปลกใจ
เมื่อเร็ว ๆ นี้ใน Google Sheets บน Mac, Cmd-F สำหรับค้นหาในสเปรดชีตใช้งานไม่ได้แล้ว ซึ่งถึงแม้วิธีเดิมจะเป็นการดักคีย์ลัดของระบบ แต่ก็ไม่มีฟังก์ชันทดแทนจริง ๆ
ดังนั้นถ้าจะค้นหา ก็ต้องไปที่แถบเมนูของ Sheets แล้วหาในเมนู
สิ่งที่ไม่ควรถูกแตะต้องเช่นกันคือแบบที่เลื่อนลงแล้วแอนิเมชันเดินหน้า องค์ประกอบขยับไปด้านข้าง และต้องผ่าน ด่านการเลื่อน ก่อนถึงจะลงไปด้านล่างของหน้าได้อีก
มันเลวร้าย น่ารำคาญ ขวางทาง และเป็นดีไซน์ที่เป็นศัตรูกับผู้ใช้
ที่ตลกที่สุดคือ ลิงก์ “Back to the normal version” จะคลิกได้ก็ต่อเมื่อมัน เลื่อนแบบนุ่มนวล กลับขึ้นไปบนสุดเสียก่อน
โดนเข้าเต็ม ๆ
สงสัยว่าใน Firefox จะปิดสิ่งนี้ผ่าน
about:settingsได้ไหมหรือมันจะทำให้การตรวจจับอีเวนต์พังกันนะ?
อีกทางหนึ่ง ส่วนขยายของเบราว์เซอร์อาจช่วยได้
การใช้งานน่าจะแตกต่างกันไปในแต่ละกรณี และตัวอย่างบนหน้า [1] ใช้ไลบรารี luxy.js [2]
สำหรับหน้านี้โดยเฉพาะ [1] ผมสามารถปิดพฤติกรรมการเลื่อนแบบนุ่มนวลได้ด้วยการรันคำสั่งด้านล่างในคอนโซลของ developer tools
luxy.init({ wrapperSpeed: 1.0});