กฎของ UX
(lawsofux.com)- คอลเลกชันที่รวบรวมหลักการและแพตเทิร์นที่อิงจิตวิทยากว่า 30 รายการ ซึ่งนักออกแบบควรคำนึงถึงเมื่อต้องออกแบบส่วนติดต่อผู้ใช้ โดยมองจากมุมของการใช้งานด้านดีไซน์และจิตวิทยาการรับรู้
- จัดหมวดหมู่เป็น การรับรู้และการหยั่งรู้, การตัดสินใจ, ฟีดแบ็กและการตอบสนอง, การมีส่วนร่วมและแรงจูงใจ, การจัดโครงสร้างข้อมูล, หลักเกสตัลท์, แพตเทิร์นพฤติกรรมผู้ใช้, หลักการออกแบบ, เวลาและการจัดการงาน
- ในรายละเอียดของแต่ละกฎ จะมีทั้งคำนิยาม ประเด็นสำคัญ ที่มา และลิงก์ให้อ่านเพิ่มเติมเพื่อนำไปประยุกต์ใช้ในการทำงานจริง
การรับรู้และการหยั่งรู้
1. ผลของความสวยงามต่อการใช้งาน (Aesthetic-Usability Effect)
ผู้ใช้มีแนวโน้มจะรับรู้ว่าดีไซน์ที่สวยงามนั้นใช้งานได้ง่ายกว่า
- ดีไซน์ที่ดึงดูดสายตาจะกระตุ้นการตอบสนองเชิงบวกในสมองของผู้ใช้ ทำให้เชื่อว่ามันทำงานได้ดีกว่าความสามารถในการใช้งานจริง
- หากดีไซน์สวยงาม ผู้ใช้จะผ่อนปรนต่อปัญหาการใช้งานเล็กน้อยได้มากขึ้น
- ในทางกลับกัน ความดึงดูดทางสายตาอาจบดบังปัญหาด้านการใช้งาน จนเกิดความเสี่ยงที่จะไม่พบปัญหาในการทดสอบ usability
- แนวคิดนี้ได้รับการยืนยันครั้งแรกจากงานวิจัยในปี 1995 ของ Masaaki Kurosu และ Kaori Kashimura แห่ง Hitachi Design Center ที่ทดสอบรูปแบบ UI ของ ATM 26 แบบกับผู้เข้าร่วม 252 คน: ความสัมพันธ์ระหว่างความดึงดูดด้านความงามกับความง่ายในการใช้งานที่ถูกรับรู้นั้นแข็งแรงกว่าความสัมพันธ์ระหว่างความดึงดูดด้านความงามกับความง่ายในการใช้งานจริง
2. อคติทางการรับรู้ (Cognitive Bias)
ข้อผิดพลาดทางความคิดอย่างเป็นระบบที่เกิดขึ้นระหว่างการตัดสิน ซึ่งส่งผลต่อการรับรู้โลกและความสามารถในการตัดสินใจ
- มนุษย์ประหยัดพลังงานทางความคิดด้วยกฎประสบการณ์จากประสบการณ์เดิม (heuristic) แทนการวิเคราะห์ทุกสถานการณ์
- ทางลัดทางความคิดเหล่านี้ช่วยให้ตัดสินใจได้รวดเร็ว แต่ก็ส่งผลต่อกระบวนการตัดสินและการตัดสินใจโดยที่เราไม่ทันรู้ตัว
- ตัวอย่างที่พบบ่อย: อคติยืนยันความเชื่อเดิม (confirmation bias) — แนวโน้มที่จะชอบข้อมูลที่สนับสนุนความเชื่อเดิมของตน
- Amos Tversky และ Daniel Kahneman นำเสนอแนวคิดเรื่องอคติทางการรับรู้ในปี 1972 และพิสูจน์ผ่านการทดลองที่ทำซ้ำได้ว่า การตัดสินและการตัดสินใจของมนุษย์แตกต่างจากทฤษฎีการเลือกอย่างมีเหตุผล
3. ภาระทางการรับรู้ (Cognitive Load)
ปริมาณทรัพยากรทางความคิดที่จำเป็นต่อการทำความเข้าใจและโต้ตอบกับอินเทอร์เฟซ
- เมื่อปริมาณข้อมูลที่เข้ามามากเกินพื้นที่ทางความคิดที่มีอยู่ จะทำให้งานยากขึ้น พลาดรายละเอียด และรู้สึกท่วมท้น
- ภาระทางการรับรู้ภายใน (intrinsic): ความพยายามที่ต้องใช้เพื่อจดจำข้อมูลที่เกี่ยวข้องกับเป้าหมายและซึมซับข้อมูลใหม่
- ภาระทางการรับรู้ภายนอก (extraneous): การประมวลผลทางความคิดที่ไม่ช่วยให้เข้าใจเนื้อหาแต่ยังใช้ทรัพยากรอยู่ (เช่น องค์ประกอบการออกแบบที่ไม่จำเป็น)
- John Sweller พัฒนาทฤษฎีภาระทางการรับรู้ในช่วงปลายทศวรรษ 1980 โดยต่อยอดจากทฤษฎีการประมวลผลข้อมูลของ George Miller และเสนอว่าสามารถลดภาระทางการรับรู้ของผู้เรียนได้ผ่านการออกแบบการสอน
4. ความสนใจแบบเลือกสรร (Selective Attention)
กระบวนการที่มุ่งความสนใจไปยังสิ่งเร้าบางส่วนในสภาพแวดล้อม โดยมากเป็นสิ่งเร้าที่เกี่ยวข้องกับเป้าหมาย
- ผู้ใช้จะให้ความสนใจเฉพาะข้อมูลที่เกี่ยวข้องกับเป้าหมายของตนอย่างเลือกสรร และมองข้ามส่วนที่เหลือ
- ในการออกแบบอินเทอร์เฟซ จำเป็นต้องทำให้ข้อมูลและการกระทำสำคัญเด่นชัดทางสายตา เพื่อดึงความสนใจของผู้ใช้
- องค์ประกอบทางสายตาที่ไม่จำเป็นจะทำให้ความสนใจกระจัดกระจายและขัดขวางการบรรลุเป้าหมาย
5. หน่วยความจำใช้งาน (Working Memory)
ระบบการรับรู้ที่เก็บรักษาและจัดการข้อมูลชั่วคราวซึ่งจำเป็นต่อการทำงานให้สำเร็จ
- ความจุของหน่วยความจำใช้งานมีขีดจำกัด และหากอินเทอร์เฟซต้องการข้อมูลเกินขีดจำกัดนี้ ความสามารถในการใช้งานจะลดลง
- มีความเกี่ยวข้องอย่างใกล้ชิดกับกฎของ Miller, chunking และภาระทางการรับรู้
- หัวใจสำคัญของการออกแบบคือการลดปริมาณข้อมูลที่ผู้ใช้ต้องจำในคราวเดียวให้เหลือน้อยที่สุด
การตัดสินใจ
6. ภาวะตัวเลือกมากเกินไป (Choice Overload)
แนวโน้มที่จะรู้สึกท่วมท้นเมื่อมีตัวเลือกจำนวนมาก มักใช้ปะปนกับคำว่า "paradox of choice"
- ตัวเลือกที่มากเกินไปจะบั่นทอนความสามารถในการตัดสินใจของผู้ใช้ และยังส่งผลลบต่อความพึงพอใจต่อประสบการณ์โดยรวม
- ในกรณีที่ต้องเปรียบเทียบ สามารถลดภาวะท่วมท้นได้ด้วยการมีฟังก์ชันเปรียบเทียบแบบวางเคียงกัน (side-by-side comparison) สำหรับรายการที่เกี่ยวข้อง
- การเน้นสินค้าแนะนำ รวมถึงเครื่องมือค้นหาและกรองเพื่อช่วยจำกัดตัวเลือกตั้งแต่ต้น เป็นวิธีที่ได้ผล
- Alvin Toffler นำคำว่า "overchoice" มาใช้เป็นครั้งแรกในหนังสือ Future Shock ปี 1970
- มีความเกี่ยวข้องอย่างใกล้ชิดกับกฎของ Hick
7. กฎของ Hick (Hick's Law)
เวลาที่ใช้ในการตัดสินใจจะเพิ่มขึ้นตามจำนวนและความซับซ้อนของตัวเลือก
- ในสถานการณ์ที่เวลาตอบสนองสำคัญ ควรลดจำนวนตัวเลือกให้น้อยที่สุดเพื่อลดเวลาการตัดสินใจ
- งานที่ซับซ้อนควรถูกแยกออกเป็นขั้นตอนย่อยเพื่อลดภาระทางการรับรู้
- เน้นตัวเลือกที่แนะนำเพื่อชี้นำการเลือกของผู้ใช้ และใช้onboarding แบบค่อยเป็นค่อยไปกับผู้ใช้ใหม่
- อย่างไรก็ตาม หากทำให้ง่ายเกินไปจนเป็นนามธรรมมากเกิน อาจกลับทำให้สับสนได้ จึงต้องระวัง
- หน้าแรกของ Google: ลดการตัดสินใจที่จำเป็นต่อการค้นหาให้เหลือน้อยที่สุด และตัดเนื้อหาอื่นออกเพื่อคงความเรียบง่าย
- onboarding แบบค่อยเป็นค่อยไปของ Slack: ไม่เปิดเผยฟีเจอร์ทั้งหมดตั้งแต่แรก แต่ให้บอทช่วยสอนการส่งข้อความก่อน แล้วค่อยแนะนำฟีเจอร์เพิ่มเติมทีละขั้น
- ได้รับการวางรากฐานในปี 1952 จากการศึกษาความสัมพันธ์ระหว่างจำนวนสิ่งเร้ากับเวลาตอบสนอง โดยนักจิตวิทยาชาวอังกฤษ William Edmund Hick และนักจิตวิทยาชาวอเมริกัน Ray Hyman
8. โมเดลทางความคิด (Mental Model)
แบบจำลองย่อที่อิงจากสิ่งที่เราคิดว่าเรารู้เกี่ยวกับการทำงานของระบบ
- ผู้ใช้จะถ่ายทอดความคาดหวังที่ก่อตัวจากประสบการณ์เดิมไปยังผลิตภัณฑ์ใหม่
- หากใช้ประโยชน์จากโมเดลทางความคิดเดิมของผู้ใช้ จะสามารถสร้างประสบการณ์ที่ดีที่ทำให้ผู้ใช้โฟกัสกับตัวงานได้เลย แทนที่จะต้องเรียนรู้โมเดลใหม่
- เชื่อมโยงโดยตรงกับกฎของ Jakob
ฟีดแบ็กและการตอบสนอง
9. เกณฑ์ Doherty (Doherty Threshold)
หากคอมพิวเตอร์และผู้ใช้โต้ตอบกันในความเร็วที่ไม่ต้องรอกันและกัน (ต่ำกว่า 400ms) ผลิตภาพจะเพิ่มขึ้นอย่างมาก
- ควรให้ฟีดแบ็กจากระบบภายใน 400ms เพื่อรักษาความสนใจของผู้ใช้และเพิ่มผลิตภาพ
- สามารถใช้perceived performance เพื่อปรับปรุงเวลาตอบสนองและลดการรับรู้ถึงการรอคอย
- แอนิเมชันเป็นวิธีทำให้ผู้ใช้มีส่วนร่วมทางสายตาระหว่างการโหลดหรือประมวลผลเบื้องหลัง
- แถบความคืบหน้า (progress bar) ช่วยให้ทนกับเวลารอได้แม้จะไม่เกี่ยวกับความแม่นยำก็ตาม
- การเพิ่มความหน่วงโดยตั้งใจอาจช่วยเพิ่มคุณค่าที่ถูกรับรู้ของกระบวนการและสร้างความน่าเชื่อถือได้ (แม้เวลาในการประมวลผลจริงจะสั้น)
- ในปี 1982 Walter J. Doherty และ Ahrvind J. Thadani ตีพิมพ์ใน IBM Systems Journal โดยกำหนดให้เวลาตอบสนองต้องอยู่ภายใน400ms แทนมาตรฐานเดิมที่ 2 วินาที
10. กฎของ Fitts (Fitts's Law)
เวลาที่ใช้ในการเข้าถึงเป้าหมายจะแปรผันตามระยะทางถึงเป้าหมายและขนาดของเป้าหมาย
- ควรกำหนด touch target ให้มีขนาดใหญ่เพียงพอที่ผู้ใช้จะเลือกได้อย่างแม่นยำ
- จำเป็นต้องเว้นระยะห่างที่เพียงพอระหว่าง touch target
- การเคลื่อนไหวที่รวดเร็วและเป้าหมายที่เล็กจะทำให้เกิดอัตราความผิดพลาดสูงจากtrade-off ระหว่างความเร็วกับความแม่นยำ
- แนวปฏิบัติที่ทำให้ปุ่มโต้ตอบบนอุปกรณ์มือถือมีขนาดใหญ่ มีที่มาจากกฎนี้
- ในปี 1954 นักจิตวิทยา Paul Fitts ศึกษาระบบการเคลื่อนไหวของมนุษย์และพิสูจน์ว่าเวลาที่ใช้เคลื่อนไปยังเป้าหมายแปรผันตรงกับระยะทางและแปรผกผันกับขนาด
การมีส่วนร่วมและแรงจูงใจ
11. ภาวะลื่นไหล (Flow)
สภาวะทางจิตที่จมอยู่กับสมาธิอันเปี่ยมพลัง ความมีส่วนร่วมอย่างเต็มที่ และความรู้สึกเพลิดเพลินระหว่างทำกิจกรรม
- ภาวะลื่นไหลเกิดขึ้นเมื่อความยากของงานและระดับทักษะของผู้ใช้สมดุลกัน
- งานที่ยากเกินไปก่อให้เกิดความหงุดหงิด ส่วนงานที่ง่ายเกินไปก่อให้เกิดความเบื่อหน่าย
- หัวใจสำคัญของการออกแบบเพื่อภาวะลื่นไหลคือการให้ฟีดแบ็กที่เหมาะสม เพื่อให้ผู้ใช้รู้ว่าตนได้ทำอะไรไปและบรรลุอะไรแล้ว
- กำจัดแรงเสียดทานที่ไม่จำเป็นและปรับการตอบสนองของระบบให้เหมาะสม เพื่อป้องกันการหลุดออกจากการโต้ตอบกับอินเทอร์เฟซ
- ในปี 1975 นักจิตวิทยา Mihály Csíkszentmihályi เสนอแนวคิด "Flow" ซึ่งถูกอ้างถึงอย่างกว้างขวางในหลายสาขา เช่น กิจกรรมบำบัด
12. ผลของความชันของเป้าหมาย (Goal-Gradient Effect)
ยิ่งเข้าใกล้เป้าหมายมากเท่าไร แนวโน้มที่จะพยายามเข้าหาเป้าหมายก็ยิ่งเพิ่มขึ้น
- เมื่อผู้ใช้เข้าใกล้การทำงานเสร็จมากขึ้น ก็จะยิ่งทำงานได้เร็วขึ้น
- การให้สถานะความคืบหน้าแบบสร้างขึ้น (เช่น บัตรสะสมแสตมป์ที่ถูกกรอกไว้บางส่วนแล้ว) มีผลดีต่อการสร้างแรงจูงใจ
- ให้ตัวบ่งชี้ความคืบหน้า (progress indicator) ที่ชัดเจน เพื่อกระตุ้นให้ผู้ใช้ทำงานให้เสร็จ
- สมมติฐานที่ Clark Hull เสนอในปี 1932: ยิ่งหนูเข้าใกล้อาหารมากเท่าไร ก็จะค่อย ๆ วิ่งเร็วขึ้นเท่านั้น
- กรณีศึกษาที่ Uber นำไปใช้ในการจัดการการรับรู้เวลาในการรอ
13. ผลของ Zeigarnik (Zeigarnik Effect)
ผู้คนมักจดจำงานที่ยังไม่เสร็จหรือถูกขัดจังหวะได้ดีกว่างานที่เสร็จสมบูรณ์แล้ว
- ให้สัญญาณบ่งชี้ที่ชัดเจนถึงการมีอยู่ของเนื้อหาเพิ่มเติม เพื่อชักนำให้สำรวจเนื้อหา
- การให้สถานะความคืบหน้าแบบสร้างขึ้นไปสู่เป้าหมาย ช่วยเพิ่มแรงจูงใจในการทำงานให้เสร็จ
- สร้างแรงจูงใจให้ผู้ใช้ทำให้เสร็จผ่านการแสดงความคืบหน้า (progress indication) ที่ชัดเจน
- นักจิตวิทยาชาวโซเวียต Bluma Zeigarnik ค้นพบในงานวิจัยเกี่ยวกับความทรงจำช่วงทศวรรษ 1920 ว่างานที่ยังไม่เสร็จจำได้ง่ายกว่างานที่เสร็จแล้ว
การจัดโครงสร้างข้อมูล
14. การแบ่งข้อมูลเป็นกลุ่ม (Chunking)
กระบวนการแยกชิ้นข้อมูลเดี่ยว ๆ แล้วจัดกลุ่มให้เป็นองค์รวมที่มีความหมาย
- การแบ่งข้อมูลเป็นกลุ่มช่วยให้ผู้ใช้สแกนเนื้อหาได้ง่าย และระบุรวมถึงประมวลผลข้อมูลที่ตรงกับเป้าหมายได้รวดเร็ว
- หากจัดโครงสร้างเนื้อหาด้วยกลุ่มที่แยกจากกันอย่างชัดเจนทางสายตาและมีลำดับชั้นที่ชัดเจน จะสอดคล้องกับวิธีที่ผู้ใช้ประเมินและประมวลผลข้อมูล
- จัดกลุ่มเนื้อหาเป็นโมดูลอิสระ ใช้เส้นคั่น (rule) และจัดให้มีลำดับชั้น เพื่อช่วยให้เข้าใจความสัมพันธ์พื้นฐาน
- คำนี้มีที่มาจากบทความปี 1956 ของ George A. Miller เรื่อง "The Magical Number Seven, Plus or Minus Two"
15. กฎของ Miller (Miller's Law)
โดยทั่วไป คนเราสามารถเก็บรายการไว้ในความจำขณะทำงานได้เพียง 7 (±2) รายการ
- อย่านำ "เลขมหัศจรรย์ 7" ไปใช้เป็นเหตุผลรองรับข้อจำกัดด้านการออกแบบโดยไม่จำเป็น
- จัดเนื้อหาเป็นกลุ่มย่อยที่เล็กลง เพื่อช่วยให้ผู้ใช้ประมวลผล เข้าใจ และจดจำได้ง่ายขึ้น
- ความจุของความจำระยะสั้นแตกต่างกันไปตามความรู้เดิมและบริบทตามสถานการณ์ของแต่ละบุคคล
- ในปี 1956 George Miller เสนอว่าทั้งช่วงของความจำทันทีและการตัดสินเชิงสัมบูรณ์ต่างก็ถูกจำกัดไว้ที่ประมาณข้อมูล 7 ชิ้น
16. ผลของลำดับตำแหน่ง (Serial Position Effect)
ผู้ใช้มักจดจำรายการแรกและรายการสุดท้ายในชุดได้ดีที่สุด
- การวางข้อมูลสำคัญหรือการกระทำหลักไว้ที่ต้นและท้ายของรายการหรือชุด เป็นวิธีที่มีประสิทธิภาพ
- เป็นเหตุผลเชิงปฏิบัติในการวางรายการที่สำคัญที่สุดในแถบนำทางไว้ซ้ายสุดและขวาสุด
- เป็นการผสานกันของ primacy effect และ recency effect
หลักเกสตัลท์ (Gestalt Principles)
17. กฎของพื้นที่ร่วมกัน (Law of Common Region)
องค์ประกอบที่ใช้พื้นที่เดียวกันซึ่งมีขอบเขตชัดเจน มักถูกรับรู้ว่าเป็นกลุ่มเดียวกัน
- สามารถสร้างพื้นที่ร่วมกันได้ง่ายด้วยการเพิ่มเส้นขอบรอบองค์ประกอบหรือกลุ่มองค์ประกอบ
- ยังสามารถสร้างพื้นที่ร่วมกันได้ด้วยการกำหนดสีพื้นหลังไว้ด้านหลังองค์ประกอบ
- พื้นที่ร่วมกันช่วยสร้างโครงสร้างที่ชัดเจน และช่วยให้เข้าใจความสัมพันธ์ระหว่างองค์ประกอบและส่วนต่าง ๆได้อย่างรวดเร็วและมีประสิทธิภาพ
- เป็นหนึ่งในหลักการจัดกลุ่มของจิตวิทยาเกสตัลท์ (ความใกล้กัน ความคล้ายกัน ความต่อเนื่อง การปิดรูป และการเชื่อมโยง)
18. กฎของความใกล้กัน (Law of Proximity)
วัตถุที่อยู่ใกล้กันหรืออยู่ติดกันมักมีแนวโน้มถูกจัดกลุ่มเข้าด้วยกัน
- ความใกล้กันถูกใช้เพื่อสร้างความสัมพันธ์กับวัตถุที่อยู่ใกล้เคียง
- องค์ประกอบที่อยู่ใกล้กันจะถูกรับรู้ว่าแบ่งปันหน้าที่หรือคุณลักษณะที่คล้ายกัน
- หน้าผลการค้นหาของ Google: ระยะห่างระหว่างผลลัพธ์แต่ละรายการช่วยให้สแกนภาพรวมได้ดีขึ้น และจัดกลุ่มแต่ละผลลัพธ์เป็นคลัสเตอร์ข้อมูลที่เกี่ยวข้องได้อย่างมีประสิทธิภาพ
- เป็นหลักการจัดกลุ่มแกนหลักของจิตวิทยาเกสตัลท์
19. กฎของความกระชับ / กฎ Prägnanz (Law of Prägnanz)
ผู้คนมักรับรู้และตีความภาพที่กำกวมหรือซับซ้อนให้อยู่ในรูปแบบที่เรียบง่ายที่สุดเท่าที่จะเป็นไปได้
- มีแนวโน้มจะชอบการตีความที่ใช้ความพยายามทางการรับรู้น้อยที่สุด
- เป็นเหตุผลรองรับการทำให้องค์ประกอบทางสายตาในงานออกแบบเรียบง่ายและชัดเจน
- เรียกอีกอย่างว่า "กฎของรูปทรงที่ดี (Law of Good Figure)"
20. กฎของความคล้ายกัน (Law of Similarity)
ดวงตามนุษย์มีแนวโน้มรับรู้องค์ประกอบที่คล้ายกันว่าเป็นภาพ รูปทรง หรือกลุ่มเดียวกัน แม้จะถูกแยกออกจากกันก็ตาม
- องค์ประกอบที่คล้ายกันทางสายตา (สี รูปร่าง ขนาด) จะถูกรับรู้ว่ามีหน้าที่หรือความหมายเดียวกัน
- เป็นเหตุผลรองรับการออกแบบปุ่มของฟังก์ชันที่เกี่ยวข้องกันในอินเทอร์เฟซให้มีความสอดคล้องกันทางสายตา
21. กฎของการเชื่อมโยงอย่างสม่ำเสมอ (Law of Uniform Connectedness)
องค์ประกอบที่เชื่อมต่อกันทางสายตามักถูกรับรู้ว่าเกี่ยวข้องกันมากกว่าองค์ประกอบที่ไม่ได้เชื่อมต่อกัน
- แสดงการเชื่อมโยงระหว่างองค์ประกอบด้วยเส้น สี กรอบ หรือคุณลักษณะทางสายตาอื่น ๆ
- อาจให้สัญญาณการจัดกลุ่มที่ทรงพลังกว่าพื้นที่ร่วมกันหรือความใกล้กัน
- จัดอยู่ในหมวดหมู่ที่ 5 (Connectedness) ของหลักการจัดกลุ่มแบบเกสตัลท์
รูปแบบพฤติกรรมผู้ใช้
22. กฎของ Jakob (Jakob's Law)
ผู้ใช้ใช้เวลาส่วนใหญ่อยู่บนเว็บไซต์อื่น ๆ ดังนั้นผู้ใช้จึงชอบให้เว็บไซต์ของคุณทำงานในแบบเดียวกับเว็บไซต์อื่นที่พวกเขาคุ้นเคยอยู่แล้ว
- ผู้ใช้จะถ่ายโอนความคาดหวังที่ก่อตัวจากผลิตภัณฑ์ที่คุ้นเคยไปยังผลิตภัณฑ์อื่นที่มีหน้าตาคล้ายกัน
- การใช้ประโยชน์จาก mental model ที่มีอยู่ ช่วยให้ผู้ใช้โฟกัสกับงานนั้นเองแทนที่จะต้องเรียนรู้โมเดลใหม่
- เมื่อต้องนำการเปลี่ยนแปลงมาใช้ ควรเปิดให้ผู้ใช้ยังคงใช้เวอร์ชันเดิมต่อไปได้ช่วงระยะเวลาหนึ่ง เพื่อลดความไม่ลงรอยกัน
- กรณีศึกษา YouTube รีดีไซน์ปี 2017: แสดง UI แบบ Material Design ใหม่ให้ผู้ใช้เดสก์ท็อปล่วงหน้า พร้อมตัวเลือกให้กลับไปใช้เวอร์ชันเดิมเพื่อป้องกันความไม่สอดคล้องของ mental model
- เสนอโดย Jakob Nielsen (ผู้ร่วมก่อตั้ง Nielsen Norman Group)
23. ปรากฏการณ์ย้อนแย้งของผู้ใช้เชิงรุก (Paradox of the Active User)
ผู้ใช้จะเริ่มใช้ซอฟต์แวร์ทันทีโดยไม่อ่านคู่มือ
- ผู้ใช้มักชอบลงมือทำทันทีมากกว่าการเรียนรู้ และมีแนวโน้มจะข้ามคู่มือหรือบทช่วยสอน
- อินเทอร์เฟซควรถูกออกแบบให้ใช้งานได้อย่างเป็นธรรมชาติแม้ไม่มีการสอนอย่างชัดเจน
- ควรมีการสนับสนุนการเรียนรู้ในตัวอินเทอร์เฟซผ่านคำแนะนำตามบริบท ทูลทิป progressive disclosure เป็นต้น
24. กฎ Peak-End (Peak-End Rule)
ผู้คนตัดสินประสบการณ์จากอารมณ์ที่รู้สึกในช่วงพีคและช่วงสุดท้าย ไม่ใช่จากผลรวมหรือค่าเฉลี่ยของทุกช่วงเวลาในประสบการณ์นั้น
- ควรให้ความใส่ใจเป็นพิเศษกับช่วงเวลาที่เข้มข้นที่สุดและช่วงเวลาสุดท้ายในเส้นทางผู้ใช้
- ระบุช่วงเวลาที่ผลิตภัณฑ์มีประโยชน์ที่สุด มีคุณค่าที่สุด หรือสนุกที่สุด แล้วออกแบบเพื่อสร้างความยินดีให้ผู้ใช้
- ผู้คนมักจดจำประสบการณ์เชิงลบได้ชัดเจนกว่าประสบการณ์เชิงบวก
- Mailchimp: เมื่อส่งอีเมลฉบับแรกสำเร็จ แทนที่จะใช้โมดัลยืนยันแบบเรียบ ๆ ก็ใช้ภาพประกอบ แอนิเมชันเล็กน้อย และอารมณ์ขันเพื่อลดทอนช่วงเวลาที่อาจก่อความเครียด
- Uber: มุ่งเน้นที่การรับรู้เรื่องเวลาและการรอของผู้คน เพื่อลดอัตราการยกเลิกหลังการเรียกรถและป้องกันจุดพีคของอารมณ์เชิงลบ
- ได้รับการพิสูจน์ในงานวิจัยปี 1993 ของ Kahneman, Fredrickson และคณะ: ผู้เข้าร่วมเลือกที่จะทำซ้ำประสบการณ์ไม่พึงประสงค์เวอร์ชันที่ยาวกว่า แต่มีช่วงท้ายที่ดีกว่าเล็กน้อยมากกว่าอีกเวอร์ชันหนึ่ง
ความแตกต่างทางสายตาและความทรงจำ
25. ผลของ Von Restorff / ผลการแยกตัว (Von Restorff Effect)
เมื่อมีวัตถุที่คล้ายกันหลายชิ้น วัตถุชิ้นเดียวที่แตกต่างจากที่เหลือมักมีโอกาสถูกจดจำได้ดีที่สุด
- ควรทำให้ข้อมูลสำคัญหรือการกระทำหลักมีความโดดเด่นทางสายตา
- หากใช้การเน้นทางสายตามากเกินไป องค์ประกอบต่าง ๆ อาจแข่งกันเองหรือเสี่ยงที่จะถูกเข้าใจผิดว่าเป็นโฆษณา
- เมื่อสื่อความแตกต่าง อย่าพึ่งพาแค่สีเพียงอย่างเดียว และควรคำนึงถึงผู้ใช้ที่มีภาวะตาบอดสีหรือสายตาเลือนราง
- เมื่อใช้การเคลื่อนไหวเพื่อสื่อความแตกต่าง ก็ควรคำนึงถึงผู้ใช้ที่ไวต่อการเคลื่อนไหวด้วย
- ค้นพบจากงานวิจัยในปี 1933 โดย Hedwig von Restorff จิตแพทย์และกุมารแพทย์ชาวเยอรมัน: ความจำต่อรายการที่โดดเด่นและแยกออกมาหนึ่งรายการในชุดของรายการที่คล้ายกันจะดีขึ้น
26. ผลกระทบลำดับต้น-ท้าย → ผลของตำแหน่งตามลำดับ (Serial Position Effect)
ผู้ใช้มีแนวโน้มจะจดจำรายการแรกและรายการสุดท้ายในชุดได้ดีที่สุด
- (ดูข้อ 14 — อธิบายรายละเอียดไว้ในส่วน "การจัดโครงสร้างข้อมูล" ด้านบน)
หลักการออกแบบ
27. กฎของ Tesler / กฎการคงอยู่ของความซับซ้อน (Tesler's Law)
ไม่ว่าระบบใดก็ย่อมมีความซับซ้อนจำนวนหนึ่งที่ไม่อาจลดทอนได้
- การออกแบบที่ดีทำให้ผู้พัฒนา ดูดซับความซับซ้อนส่วนใหญ่ผ่าน smart defaults, algorithm ฯลฯ เพื่อทำให้ปฏิสัมพันธ์ของผู้ใช้ง่ายขึ้น
- หาก UI ต้องให้ผู้ใช้ตั้งค่าหรือทำหลายขั้นตอนมากเกินไป แปลว่าความซับซ้อนถูกคงไว้ใน ที่ที่ไม่ถูกต้อง (ฝั่งผู้ใช้)
- การออกแบบที่ดีไม่ได้ลบความซับซ้อนออกไป แต่ จัดการภายในและซ่อนไว้
- Larry Tesler (Apple Lisa และงาน GUI ยุคแรก) เป็นผู้วางหลักการนี้ในช่วงทศวรรษ 1980
28. กฎของ Postel / หลักการความทนทาน (Postel's Law)
จงผ่อนปรนในสิ่งที่รับมา และเข้มงวดในสิ่งที่ส่งออกไป
- รองรับรูปแบบและความแปรผันที่หลากหลายจากข้อมูลนำเข้าของผู้ใช้อย่างยืดหยุ่น
- เอาต์พุตของระบบควรอยู่ในรูปแบบที่ สม่ำเสมอและคาดเดาได้
- Jon Postel วางหลักการความทนทานของโปรโตคอล TCP/IP และถูกนำมาใช้อ้างอิงในงานออกแบบ UX เรื่องความยืดหยุ่นของอินพุต
29. มีดโกนของ Occam (Occam's Razor)
ในบรรดาสมมติฐานที่แข่งขันกันและทำนายได้ดีพอ ๆ กัน ควรเลือกสมมติฐานที่มีข้อสมมติน้อยที่สุด
- ในการออกแบบโซลูชัน ควร ตัดความซับซ้อนที่ไม่จำเป็น และให้ความสำคัญกับแนวทางที่เรียบง่ายที่สุดก่อน
- ก่อนเพิ่มฟีเจอร์ องค์ประกอบ หรือการตกแต่งภาพ ควรตรวจสอบก่อนว่า จำเป็นจริงหรือไม่
- อินเทอร์เฟซที่เรียบง่ายสร้างภาระทางการรับรู้ให้ผู้ใช้น้อยกว่า
30. หลักการพาเรโต / กฎ 80/20 (Pareto Principle)
โดยประมาณแล้ว 80% ของผลลัพธ์มาจาก 20% ของสาเหตุ
- ตระหนักว่าพฤติกรรมผู้ใช้ 80% มักกระจุกอยู่ที่ 20% ของฟีเจอร์
- ทุ่มทรัพยากรด้านการออกแบบ ไปที่ 20% ของฟีเจอร์ที่ถูกใช้งานมากที่สุด
- เมื่อนำไปรวมกับกฎของ Parkinson จะช่วยในการ จัดลำดับความสำคัญ ของฟีเจอร์ที่สำคัญที่สุด
การจัดการเวลาและงาน
31. กฎของ Parkinson (Parkinson's Law)
งานใด ๆ จะขยายตัวจนใช้เวลาที่ได้รับมอบหมายไปทั้งหมด
- การกำหนด กรอบเวลาที่ชัดเจน ให้ผู้ใช้เพื่อทำงานให้เสร็จมีประสิทธิภาพ
- หากเพิ่มขั้นตอนที่ไม่จำเป็นลงในแบบฟอร์มหรือกระบวนการ เวลาในการเสร็จสิ้นจะเพิ่มขึ้นเกินสัดส่วน
- ใช้ได้กับกระบวนการออกแบบเองด้วย: การกำหนดขอบเขตและกำหนดการที่ชัดเจนเป็นสิ่งสำคัญ
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
อันนี้เป็นสิ่งที่กลับมาดูซ้ำบ่อยมาก ชอบทั้ง งานออกแบบแบบโปสเตอร์ และก็ยังทึ่งเสมอว่ากฎหลายข้อแบบนี้มาจากข้อมูลและงานวิจัยของ Nielsen Norman Group ที่สั่งสมมานาน
มีแนวคิด UX ที่ถูกตั้งชื่อไว้เยอะเหมือนกัน เช่น Jakob's Law หรือ Norman Door และวงการ UX ก็ได้รับอิทธิพลจากกลุ่มผู้สังเกตการณ์เล็ก ๆ กลุ่มนี้อย่างมาก
แต่ส่วนตัวคิดว่าทฤษฎี UX/HCI สมัยใหม่ เองก็เริ่มถูกฉุดรั้งด้วยกฎนุ่ม ๆ แบบนี้มากขึ้นเหมือนกัน โดยเฉพาะการเหมารวมกฎที่เห็นจากพฤติกรรมผู้ใช้ใน สื่อที่ไม่มีปฏิสัมพันธ์ อย่างพวกงานกระจายเสียงมากเกินไป
หน้าซีรีส์ก่อนหน้านี้ดีนะ แต่รอบนี้ดู ขาดความตั้งใจ ไปหน่อย
อย่างเช่นเอา Cognitive Bias มานิยามแบบพจนานุกรมแล้วโพสต์เป็น ‘กฎ’ ทั้งที่มันก็ไม่ใช่กฎ และในรูปแบบนั้นก็ไม่ใช่แนวคิดที่เอาไปใช้จริงได้ด้วย
เลยให้ความรู้สึกเหมือนเป็นการรวบคำศัพท์ไม่กี่คำมาแปะคำนิยามแล้วจับมัดขายแบบ ทำไว้ขายโปสเตอร์ มากกว่าจะเป็นชุดกฎที่นักออกแบบ UI หรือดีเวลอปเปอร์เอาไปใช้ได้
ของแบบนี้ก็ดี และแน่นอนว่ามันไม่ใช่ กฎตายตัวที่เปลี่ยนไม่ได้
ผมไม่ได้เป็นดีไซเนอร์สายดั้งเดิม เลยรู้สึกว่าพวกชุด best practice หรือชุดกฎแบบนี้มีประโยชน์มาก เป็นจุดเริ่มต้นที่ดีมากสำหรับให้ AI ช่วยตรวจทีเดียวในระดับหน้าจอ สำหรับกฎที่เราเก็บไว้ในหัวตลอดได้ยาก
ส่วนตัวมองว่าเหมือนคีย์ลัดจัดรูปแบบซอร์สโค้ด เวลาเราสร้างซอฟต์แวร์ธุรกิจ ก็ใช้ชุดกฎพวกนี้เป็นเวิร์กโฟลว์ลัดสำหรับ sanity check ได้ค่อนข้างดี
ผมลองดาวน์โหลดทั้ง ภาพหน้าจอ UX Laws และภาพหน้าจอแดชบอร์ด แล้วสั่งให้ ChatGPT กับ Claude รีวิวตามกฎเหล่านั้น พร้อมทำม็อกอัปใหม่ที่สะท้อนคำแนะนำออกมา
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: แอปพยากรณ์คลื่นของ https://swellslots.com
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
ปัญหาของชุดกฎที่ขัดกันเองแบบนี้คือ นักออกแบบที่เก่งจะ ตัดสินตามสัญชาตญาณให้เหมาะกับบริบท ว่าควรเมินกฎไหนและใช้กฎไหน
เลยสงสัยว่าในพรอมป์ใส่เป้าหมายหรือบทบาทไว้ชัดเจนไหม หรือปล่อยกว้าง ๆ แล้วให้มันรันไปเอง
กฎข้อ 0 คืออย่าทำให้ UI element ที่ผมกำลังจะคลิกเกิด reflow หรือขยับไปมา
แน่นอนว่าทางแก้ที่ดีกว่าคือให้นักพัฒนาและนักออกแบบมี ความเป็นช่างฝีมือ และความภูมิใจกับรายละเอียดพวกนี้ พอดูอินเทอร์เฟซที่แย่ที่สุด มักเหมือนทดสอบกันแค่ในสภาพแวดล้อมที่เชื่อมกับแบ็กเอนด์ด้วย กิกะบิต เลยพลาดปัญหาแบบนี้ไป
ถ้าบริษัทที่ถูกมองเป็นสัญลักษณ์ของงานออกแบบยังพลาดพื้นฐานข้อนี้ แปลว่ามีบางอย่างผิดหนักในวงการ
ผมว่าอันนี้เป็นชุดข้อมูลที่ยอดเยี่ยม
แต่ดูข้อ 2 คือ Choice Overload ที่บอกว่าถ้ามีตัวเลือกมากเกินไปคนจะรู้สึกท่วมท้น ทว่าบนหน้าเดียวกันกลับฝังกฎทั้ง 30 ข้อไว้เป็นข้อความทั้งหมด และครึ่งหนึ่งของพื้นที่ภาพยังถูกกินไปด้วย รูปที่ไม่เกี่ยวข้อง 30 รูป
มันสวยนะ แต่ไม่ใช่ โครงสร้างที่เหมาะกับการเรียนรู้
ถ้าโต้ตอบกันได้เร็วกว่า 400ms แบบ Doherty Threshold จนคอมพิวเตอร์กับผู้ใช้ไม่ต้องรอกัน ผลิตภาพจะดีขึ้นมาก
เพราะแบบนั้นเวลาผมเขียนโปรแกรมจึงชอบโมเดลเล็กมากกว่าเยอะ ความเร็วพอมันสูงพอ เวิร์กโฟลว์ก็ยังคง ความเป็นเรียลไทม์ เอาไว้ได้
แบบนั้นคุณจะย่อยงานเป็นชิ้นเล็กลงและคอยตรวจสอบไปเรื่อย ๆ ทำให้ยังมีส่วนร่วมเชิงรุก และ mental model ก็ไม่หลุด
ก่อนหน้านี้ผมเคยลองให้ทั้งโมเดลใหญ่กับโมเดลเล็กทำงานแก้โค้ดง่าย ๆ 3 อย่าง ผลคือทั้งคู่ทำสำเร็จ แต่โมเดลใหญ่ช้ากว่า 3 เท่า และแพงกว่า 10 เท่า
ตั้งแต่นั้นมาเกณฑ์ Best Model ของผมก็เปลี่ยนจากตัวที่คะแนนเบนช์มาร์กอันดับหนึ่ง ไปเป็นโมเดลที่เล็ก เร็ว ถูก และทำงานจริงได้อย่างเสถียรที่สุด
น่าจะเพิ่มเรื่อง ความคงเส้นคงวา ด้วย ไม่ควรเปลี่ยนไปเรื่อย ๆ เพียงเพื่อจะเปลี่ยน หรือเพราะวิ่งตามกระแสใหม่
ไม่ควรใช้ ไอคอน ที่ไม่มีความหมาย
แทนที่จะซ่อนข้อมูลเป็นชั้น ๆ เหมือนต้นไม้ให้ผู้ใช้ต้องค่อย ๆ เปิดกล่องทีละอัน การแสดงแบบ ลำดับเชิงเส้น จะดีกว่า
และก็ไม่ควรนำเสนอความเห็นเหมือนเป็นข้อเท็จจริง
ตอนรีดีไซน์ แพลตฟอร์ม e-commerce รายใหญ่แห่งหนึ่งในเอเชีย ผมก็ใช้กฎหลายข้อจากที่นี่กับ กลยุทธ์ UX จริง ๆ
ขอบคุณที่แชร์นะ ผมทำงานสาย full stack มาเกือบ 10 ปี ตอนนี้เพิ่งเริ่มลงลึกกับ UI มากขึ้น ส่วน UX ยังอยู่ระดับแค่แตะผิว ๆ
นอกเรื่องนิดหน่อย แต่อยากรู้ว่ามีแหล่งที่รวบรวม UI pattern ที่ใช้บ่อยบนมือถือหรือเว็บแอปไหม เช่น hamburger menu, toast notification อะไรพวกนี้
ผมกำลังหาเว็บที่จัดหมวดหมู่เป็นระบบ ครอบคลุมกว้าง และมี ตัวอย่างภาพ ด้วย
ตอนนั้นยังเป็นยุคต้น ๆ ของสมาร์ตโฟนเลยมีเนื้อหามือถือไม่มาก แต่ฉบับล่าสุดน่าจะครอบคลุมมือถือเยอะขึ้นแล้ว
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/