จิตวิทยาในการออกแบบ UX/UI คืออะไร
การออกแบบ UX/UI ที่ดีไม่ได้เริ่มจาก "ความสวย" แต่เริ่มจากการเข้าใจว่า สมองมนุษย์รับรู้ ตัดสินใจ และจดจำสิ่งต่าง ๆ อย่างไร หลักจิตวิทยาเหล่านี้ช่วยให้ Designer ออกแบบ Interface ที่ผู้ใช้ใช้งานได้ลื่นโดยไม่ต้องคิดเยอะ
1. Hick's Law — ยิ่งตัวเลือกเยอะ ยิ่งตัดสินใจช้า
Hick's Law บอกว่าเวลาในการตัดสินใจของผู้ใช้จะเพิ่มขึ้นตามจำนวนและความซับซ้อนของตัวเลือกที่เห็น ใน UX/UI ใช้ลด Action ในหน้าจอเดียว จัดกลุ่มเมนู และให้ Default ที่ดี เพื่อให้ผู้ใช้ก้าวต่อได้เร็ว
- ลดจำนวน Menu ใน Navigation หลัก ใช้ Mega Menu หรือ Grouping
- ใช้ Progressive Disclosure เปิดเผยตัวเลือกทีละขั้น
- ตั้งค่า Default ที่เป็นทางเลือกที่ดีไว้ก่อน เพื่อลดภาระตัดสินใจ
2. Fitts's Law — ขนาดและตำแหน่งของเป้าหมายมีผลต่อความเร็ว
เวลาที่ใช้ในการกดเป้าหมายขึ้นอยู่กับขนาดของเป้าหมายและระยะทางจากจุดเริ่มต้น ปุ่มที่ใหญ่และอยู่ใกล้กว่า กดง่ายและเร็วกว่า โดยเฉพาะบน Mobile ที่ผู้ใช้ใช้นิ้วโป้งเป็นหลัก
- Touch Target อย่างน้อย 44x44 px ตามคำแนะนำของ Apple HIG
- วาง CTA หลักไว้ในโซน Thumb Zone ที่นิ้วโป้งเอื้อมถึง
- Tab Bar ด้านล่างใช้บน Mobile, Toolbar ด้านบนใช้บน Desktop
3. Jakob's Law — ผู้ใช้คาดหวังให้คุณทำงานเหมือนเว็บอื่น
ผู้ใช้ใช้เวลาส่วนใหญ่กับเว็บและแอปอื่น ดังนั้นพวกเขาจึงคาดหวังให้ Product ของคุณทำงานในแบบที่พวกเขาคุ้นเคย ใช้ Pattern มาตรฐานจะช่วยลด Learning Curve และเพิ่ม Usability ทันที
- ตำแหน่งตะกร้าสินค้ามุมขวาบน, Logo มุมซ้ายบน
- Pull-to-refresh, Swipe to delete, Long press
- ใช้ Icon และคำที่เป็น Convention เช่น Hamburger, Heart, Bell
ในคอร์ส UX/UI ของเรา เราสอนวิธีนำ Hick's, Fitts's, Jakob's และ Gestalt มาประยุกต์กับเคสจริง ตั้งแต่ Research, Wireframe จนถึง Prototype ที่ทดสอบกับผู้ใช้ได้
ดูรายละเอียดคอร์ส UX/UI4. Gestalt Principles — สมองรับรู้กลุ่มของสิ่งของอย่างไร
Gestalt อธิบายว่าสมองมนุษย์มองโลกเป็น "กลุ่ม" ไม่ใช่ Element เดี่ยว ๆ หลักเหล่านี้ใช้จัด Layout, Visual Hierarchy และการจัดกลุ่ม Form ใน Product ได้แทบทุกหน้าจอ
สิ่งที่อยู่ใกล้กันถูกมองเป็นกลุ่มเดียว ใช้จัดกลุ่ม Form Field และ Card
องค์ประกอบที่หน้าตาคล้ายกันถูกมองว่าเกี่ยวข้องกัน ใช้กับ Tag, Status, ปุ่มประเภทเดียวกัน
สายตาเดินตามเส้นหรือ Pattern ต่อเนื่อง ใช้กับ Stepper, Timeline, Progress
สมองเติมเต็มรูปทรงที่ขาด ใช้กับ Icon, Logo, Empty State
แยกวัตถุออกจากพื้นหลัง ใช้กับ Modal, Overlay, Focus State
5. หลักจิตวิทยาอื่นที่ UX/UI Designer ควรรู้
Working Memory จำได้ 7±2 ก้อน ใช้จัด Chunk ของ Form, Menu, Onboarding
คนจำจุดเข้มข้นที่สุดและจุดสิ้นสุด ใช้ออกแบบช่วง Success, Empty State, ขอบคุณ
ลดภาระความคิดของผู้ใช้ ลด Element ที่ไม่จำเป็น ใช้ Visual Hierarchy ที่ชัด
คนจำรายการแรกและรายการสุดท้ายได้ดีที่สุด ใช้กับ Navigation และ Tab
Interface ที่ดูสวย ผู้ใช้รู้สึกว่าใช้งานง่ายขึ้น แต่ไม่ทดแทน Usability จริง
สิ่งที่แตกต่างจากกลุ่มจะถูกจดจำ ใช้กับ Primary CTA, Promotion, Badge
นำไปใช้กับ Product จริงได้ยังไง
- ลดจำนวนตัวเลือกใน Navigation หลัก ใช้ Mega Menu หรือ Progressive Disclosure
- จัด CTA หลักให้ใหญ่และอยู่ในระยะที่กดง่ายบน Mobile (Fitts's Law)
- ใช้ Pattern ที่ผู้ใช้คุ้นเคย เช่น Tab Bar ล่าง, Pull-to-refresh, Swipe (Jakob's Law)
- จัด Form ด้วย Proximity และ Chunking ลดความล้าตอนกรอกข้อมูล
- ออกแบบหน้าจอ Success, Empty State, Error ให้รู้สึกดี ตาม Peak-End Rule
สรุป
- จิตวิทยาคือเครื่องมือทำให้ UX/UI ใช้งานง่ายขึ้นด้วยพื้นฐานวิธีที่สมองคนทำงานจริง
- Hick's Law ลดจำนวนตัวเลือกเพื่อให้ตัดสินใจไว
- Fitts's Law ขนาดและตำแหน่งของปุ่มมีผลต่อความเร็วการใช้งาน
- Jakob's Law ใช้ Pattern ที่ผู้ใช้คุ้นเคยเพื่อลด Learning Curve
- Gestalt ช่วยจัด Layout และ Visual Hierarchy ให้สมองรับรู้ได้ทันที
- Peak-End Rule และ Cognitive Load ทำให้ประสบการณ์โดยรวมน่าจดจำ
คำถามที่พบบ่อย
จิตวิทยาในการออกแบบ UX/UI คืออะไร?
คือการนำหลักการทางจิตวิทยาเกี่ยวกับการรับรู้ การตัดสินใจ และความจำของมนุษย์ มาใช้ออกแบบ Interface และ Experience ให้ผู้ใช้เข้าใจง่าย ใช้งานสะดวก และตัดสินใจได้ไว เช่น Hick's Law, Fitts's Law, Jakob's Law และ Gestalt Principles
Hick's Law คืออะไรและใช้ออกแบบ UX/UI ยังไง?
Hick's Law บอกว่ายิ่งมีตัวเลือกมาก เวลาในการตัดสินใจจะยิ่งนานขึ้น ใน UX/UI ใช้ลดจำนวน Action ในหน้าจอเดียว จัดกลุ่มเมนู ใช้ Progressive Disclosure และ Default ที่ดี เพื่อให้ผู้ใช้ตัดสินใจได้เร็วขึ้น
Fitts's Law บอกอะไรกับ Designer?
Fitts's Law บอกว่าเวลาที่ใช้ในการเคลื่อนไปกดเป้าหมาย ขึ้นกับขนาดและระยะทาง ปุ่มสำคัญควรมีขนาดใหญ่พอและอยู่ในตำแหน่งที่นิ้วเอื้อมถึงง่าย โดยเฉพาะบน Mobile เช่น CTA หลัก ปุ่ม Tab Bar ด้านล่าง
Jakob's Law สำคัญยังไงกับการออกแบบ Product?
Jakob's Law บอกว่าผู้ใช้คาดหวังให้เว็บ/แอปของเราทำงานเหมือนกับเว็บ/แอปอื่นที่พวกเขาใช้บ่อย ใช้ Pattern ที่คุ้นเคย เช่น ตำแหน่งตะกร้าสินค้า การ Swipe การกดค้าง จะลด Learning Curve และเพิ่ม Usability
Gestalt Principles ใช้ในงาน UX/UI อย่างไร?
Gestalt อธิบายว่าสมองมนุษย์รับรู้กลุ่มของสิ่งของอย่างไร หลักหลักที่ใช้บ่อยใน UX/UI เช่น Proximity, Similarity, Continuity, Closure และ Figure-Ground ใช้จัด Layout, จัดกลุ่ม Form, ออกแบบ Card, Visual Hierarchy และ Navigation
Miller's Law กับการออกแบบ Form และ Navigation
Miller's Law บอกว่าคนจำข้อมูลใน Working Memory ได้ประมาณ 7±2 ก้อน ในงานออกแบบควรจัดกลุ่ม (Chunking) Form, Menu, Step ของ Onboarding ให้แต่ละกลุ่มไม่เกิน 5–9 รายการ เพื่อลดภาระความจำของผู้ใช้
Peak-End Rule คืออะไร?
Peak-End Rule บอกว่าคนจะจำประสบการณ์ผ่านจุดที่รู้สึกเข้มข้นที่สุด (Peak) และจุดสิ้นสุด (End) ใน UX/UI ใช้ออกแบบช่วงสำคัญ เช่น Onboarding, ผลลัพธ์ Search, หน้าจอ Success หรือ Empty State ให้เหลือความรู้สึกดีกับผู้ใช้
ควรเริ่มเรียนจิตวิทยา UX/UI จากตรงไหน?
เริ่มจาก 4 หลักพื้นฐานก่อน คือ Hick's Law, Fitts's Law, Jakob's Law และ Gestalt Principles แล้วค่อยต่อด้วย Miller's Law, Peak-End Rule, Cognitive Load และ Mental Model จากนั้นฝึกหาเคสจริงจาก Product ที่ใช้อยู่ทุกวันมาวิเคราะห์