ออกแบบ CSS Motion ให้สบายตาด้วย prefers-reduced-motion

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

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

รู้จัก prefers-reduced-motion

CSS มี media query ชื่อ prefers-reduced-motion สำหรับตรวจสอบว่าผู้ใช้ตั้งค่าระบบให้ลดการเคลื่อนไหวหรือไม่ นักพัฒนาควรเคารพค่านี้เช่นเดียวกับการรองรับโหมดมืดหรือค่าการช่วยการเข้าถึงอื่น ๆ

ตัวอย่างต่อไปนี้เป็นวิธีลดระยะเวลาแอนิเมชันทั่วทั้งหน้า ป้องกันการเล่นซ้ำ และยกเลิก smooth scrolling เมื่อผู้ใช้เลือกโหมดลดการเคลื่อนไหว

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

โค้ดลักษณะนี้เหมาะสำหรับใช้เป็นมาตรการพื้นฐาน แต่การปิดแอนิเมชันทั้งหมดแบบครอบจักรวาลอาจทำให้ feedback บางอย่างหายไปด้วย ทางที่ดีควรพิจารณา motion ของแต่ละองค์ประกอบและกำหนดพฤติกรรมทดแทนให้เหมาะสม

หลักสำคัญคือการลด ไม่ใช่การลบ

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

แนวทางปรับ motion ที่ใช้ได้ในหลายสถานการณ์ ได้แก่

• เปลี่ยนเอฟเฟกต์ slide และ zoom ให้เหลือเพียง fade ระยะสั้น
• เปลี่ยน parallax หรือฉากหลังที่เคลื่อนตามการเลื่อนให้เป็นภาพนิ่ง
• หยุดการเล่น carousel อัตโนมัติและให้ผู้ใช้กดเปลี่ยนเนื้อหาเอง
• ลดแอนิเมชันตกแต่งที่ลอย หมุน หรือเคลื่อนไหวอย่างต่อเนื่อง
• คงสถานะ loading หรือ success ไว้ แต่ใช้สี ไอคอน และข้อความช่วยสื่อความหมาย

ตัวอย่างการปรับ Motion ของ Modal

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

.modal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.modal[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .modal {
    transform: none;
    transition: opacity 120ms ease;
  }
}

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

แยก Motion ตกแต่งออกจาก Feedback

ก่อนตัดสินใจว่าจะลด motion อย่างไร ควรแยกให้ออกว่าเอฟเฟกต์นั้นมีหน้าที่สื่อสารหรือใช้เพื่อความสวยงาม หากเป็นเพียงของตกแต่งก็ควรลดหรือปิดได้ง่าย แต่ถ้าเป็น feedback สำคัญต้องมีช่องทางอื่นช่วยยืนยันสถานะ

Feedback ที่ไม่ควรพึ่ง motion เพียงอย่างเดียวมีตัวอย่างดังนี้

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

Motion ที่ควรระวังเป็นพิเศษ

เอฟเฟกต์ที่เคลื่อนไหวเป็นเวลานานหรือสัมพันธ์กับการเลื่อนหน้าจอมักรบกวนผู้ใช้ได้มากกว่า transition สั้น ๆ นักพัฒนาจึงควรตรวจสอบองค์ประกอบเหล่านี้เป็นพิเศษ

• Parallax หลายชั้นที่เคลื่อนด้วยความเร็วต่างกัน
• พื้นหลังหรือวัตถุตกแต่งที่ลอยตลอดเวลา
• Carousel แบบ auto-play ที่เลื่อนไม่หยุด
• การซูม หมุน หรือสั่นอย่างรวดเร็ว
• Smooth scrolling ระยะไกลที่ผู้ใช้ควบคุมจังหวะได้ยาก

การทดสอบไม่ควรดูเฉพาะว่าแอนิเมชันยังทำงานหรือไม่ แต่ควรเปิดการตั้งค่า reduced motion ในระบบแล้วทดลองใช้งานทุกเส้นทางสำคัญด้วย โดยเฉพาะ modal เมนู carousel สถานะ loading และการนำทางภายในหน้า

สรุป

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