Dark Mode Toggle: สวิตช์ 2 สถานะก็เพียงพอแล้ว
บทความจาก CSS-Tricks ถกประเด็นปุ่มสลับ Dark Mode แบบ 3 สถานะ โดยเสนอให้ใช้แค่ 2 สถานะก็ครอบคลุมทุกความต้องการของผู้ใช้แล้ว
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Lea Verou เสนอว่าปุ่มสลับโหมด 2 สถานะเพียงพอต่อการใช้งาน
- ระบบควรยึดค่าเริ่มต้นตามระบบปฏิบัติการและเปิดให้ผู้ใช้กดเปลี่ยนได้
- การตั้งค่าของผู้ใช้จะถูกบันทึกไว้ใน localStorage สำหรับการใช้งานครั้งถัดไป
- มีข้อยกเว้นเพียงบางกรณีเท่านั้นที่ปุ่ม 3 สถานะอาจยังจำเป็นอยู่
ในแวดวงการพัฒนาเว็บไซต์ การออกแบบปุ่มสลับโหมดการแสดงผลระหว่างสว่างและมืดหรือ Dark Mode มักจะถูกมองว่าต้องมีตัวเลือกให้ผู้ใช้เลือกถึง 3 แบบด้วยกัน นั่นคือ โหมดสว่าง โหมดมืด และโหมดตามระบบปฏิบัติการ (system) อย่างไรก็ตาม มีมุมมองที่น่าสนใจจากบล็อกโพสต์ของ Lea Verou ที่เผยแพร่บน CSS-Tricks ซึ่งออกมาคัดค้านแนวทางดังกล่าว โดยระบุว่าตัวควบคุมแบบ 2 สถานะที่ดีนั้นสามารถแสดงผลครอบคลุมทั้ง 3 สถานะได้ในตัว โดยที่ผู้ใช้เพียงแค่ทำการเลือกตั้งค่าทับ (override) ในครั้งแรกที่จำเป็นเท่านั้น
หลักการทำงานที่นำเสนอคือ หากผู้ใช้ไม่มีการตั้งค่าใดๆ ระบบจะทำการดึงค่าจากระบบปฏิบัติการมาใช้งานเป็นค่าเริ่มต้น และมีตัวเลือกให้ผู้ใช้สามารถกดเปลี่ยนได้หากต้องการ จากนั้นค่าความต้องการนั้นจะถูกบันทึกไว้ในหน่วยความจำ localStorage เพื่อใช้งานในเซสชันต่อๆ ไป นอกจากนี้ แนวคิดดังกล่าวยังช่วยลดความซับซ้อนของส่วนติดต่อผู้ใช้ (UI) ลง เนื่องจากส่วนควบคุมที่มีขนาดเล็กกว่าแต่ให้ผลลัพธ์เทียบเท่ากันย่อมเป็นเรื่องที่ดีกว่าสำหรับประสบการณ์ใช้งานโดยรวม
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ในบทความยังได้ยกประเด็นที่ชวนคิดเกี่ยวกับการสลับค่ากลับไปมาระหว่างสถานะต่างๆ เช่น หากผู้ใช้เริ่มต้นด้วยระบบปฏิบัติการโหมดสว่าง กดเปลี่ยนเป็นโหมดมืด แล้วเปลี่ยนกลับมาเป็นโหมดสว่าง จะทำให้ค่าใน localStorage กลายเป็นค่าที่ไม่ได้กำหนด (undefined) หรือไม่ อย่างไรก็ตาม ประเด็นนี้อาจไม่ใช่เรื่องใหญ่โตนักเนื่องจากการสลับธีมไม่ใช่เป้าหมายหลักของผู้ใช้งานในการเข้ามาเยี่ยมชมเว็บไซต์ โดยปุ่มควบคุมนี้เป็นเพียงองค์ประกอบเสริมที่ไม่ได้เกี่ยวข้องโดยตรงกับจุดประสงค์หลักในการใช้งานเว็บไซต์ของผู้ใช้
การถกประเด็นเรื่อง Dark Mode นี้สะท้อนให้เห็นถึงแนวคิด Minimal UI ในการพัฒนาเว็บ โดยมุ่งเน้นการลดความยุ่งเหยิงของหน้าจอ (Clutter) ให้เหลือน้อยที่สุด แม้ว่าผู้ใช้บางกลุ่มอาจจะรู้สึกสูญเสียการควบคุมไปบ้างเมื่อระบบอัตโนมัติเข้ามาจัดการแทน แต่ในมุมมองของนักพัฒนา การลดตัวเลือกที่ซ้ำซ้อนช่วยให้โค้ดสะอาดขึ้นและลดภาระในการตัดสินใจของผู้ใช้ลงได้ในเวลาเดียวกัน
อย่างไรก็ตาม Lea Verou ก็ได้ระบุถึงสถานการณ์เฉพาะบางรูปแบบที่ปุ่ม 3 สถานะยังคงมีความสมเหตุสมผลในการใช้งานอยู่ ขณะเดียวกัน ก็มีนักพัฒนาท่านอื่นอย่าง @jakearchibald.com ที่เปลี่ยนความคิดมาสนับสนุนแนวทางนี้หลังจากได้อ่านบทความดังกล่าว รวมถึงมีนักพัฒนาอีกรายที่ชื่อ Vale ได้นำเสนอแนวทางที่แตกต่างออกไปในการนำเสนอตัวเลือกทั้ง 3 รูปแบบผ่านปุ่มกดเพียง 2 ปุ่มและการทำงานที่ต่างออกไป
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น