ผมไม่ได้เรียน design มา ไม่เคยเปิด Figma ไม่มี portfolio
แต่ผมต้องออกแบบระบบสต็อกร้านอาหาร ต้องตัดสินใจว่าปุ่มไหนควรอยู่ตรงไหน สีอะไรหมายถึงอะไร ข้อมูลจัดกลุ่มยังไงให้พนักงานเข้าใจ
แล้วผมก็เจอ NNGroup บน YouTube
NNGroup คือใคร
Nielsen Norman Group เป็นบริษัทวิจัย UX ที่ก่อตั้งโดย Jakob Nielsen กับ Don Norman สองคนนี้คือคนที่เขียนกฎ usability ที่โลก design ใช้มา 25 ปี
YouTube channel ของเขามีวิดีโอกว่า 900 ตัว ตัวละ 3-10 นาที ดูฟรีทั้งหมด ไม่ต้องสมัครคอร์ส ไม่ต้องจ่ายเงิน ทุกวิดีโอเป็น research-backed ไม่ใช่ opinion
เรียนอะไรได้บ้าง — 4 หมวด
1. จัดระเบียบข้อมูล (Information Architecture)
เรื่องแรกที่ NNGroup สอนคือ ก่อนจะ design หน้าตา ต้องจัดระเบียบข้อมูลก่อน
เขาสอน LATCH framework ที่มี 5 วิธีจัดข้อมูล คือ Location (ตามที่ตั้ง), Alphabet (ตามตัวอักษร), Time (ตามเวลา), Category (ตามหมวดหมู่) และ Hierarchy (ตามความสำคัญ) ไม่ว่าข้อมูลอะไรในโลกก็หนีไม่พ้น 5 แบบนี้
อีกเรื่องที่สำคัญคือ Card Sorting ที่เป็นวิธี research ว่า user จัดกลุ่มข้อมูลยังไงตามธรรมชาติของเขา ไม่ใช่ตามที่เราคิดว่ามันควรจะเป็น ต้องใช้ตอนเริ่มต้นออกแบบ ไม่ใช่ตอนจะประเมินของเดิม
2. จัดลำดับสายตา (Visual Hierarchy)
หัวใจของ UX design คือ ทำให้คนมองเห็นสิ่งสำคัญก่อน
NNGroup สอนว่าใช้แค่ 3 เครื่องมือ คือ ขนาด (Scale) น้ำหนัก (Weight) และสี (Color) จำกัดให้มีแค่ 3 ระดับ ใหญ่ กลาง เล็ก ถ้ามากกว่านั้นตาจะไม่รู้ว่าต้องดูอะไรก่อน
เรื่อง Whitespace เขาสอนว่าพื้นที่ว่างไม่ใช่พื้นที่เสียเปล่า มันคือเครื่องมือที่ทำให้สมองประมวลผลข้อมูลได้ง่ายขึ้น ใช้ spacing system เช่น เพิ่มทีละ 8px ให้งานดูเป็นระเบียบ
สีก็เหมือนกัน จำกัดแค่ 3 สีในหน้าจอ เยอะกว่านั้นจะรบกวนสายตาและทำให้ hierarchy พัง
3. จิตวิทยาผู้ใช้ (UX Psychology)
เรื่องที่ผมชอบที่สุดคือ Gestalt Principles ที่อธิบายว่าสมองคนมองกลุ่มของสิ่งเล็กๆ เป็นระบบรวมได้ยังไง เช่น ของที่อยู่ใกล้กันจะถูกมองว่าเป็นกลุ่มเดียวกัน ของที่หน้าตาคล้ายกันจะถูกมองว่าเป็นประเภทเดียวกัน
อีกเรื่องคือ Tesler’s Law ที่บอกว่าทุกระบบมีความซับซ้อนที่ลดไม่ได้อยู่ระดับหนึ่ง หน้าที่ของ designer คือย้ายความซับซ้อนไปให้ระบบจัดการแทนที่จะปล่อยให้เป็นภาระของ user เช่น ตั้งค่า default ที่ฉลาด ใช้ automation ช่วย
4. เลือก UI Pattern ให้ถูก (Practical Decisions)
NNGroup สอนว่าเครื่องมือ UI แต่ละตัวมีบริบทที่เหมาะ ไม่ใช่ทุกอย่างต้องเป็นตาราง ไม่ใช่ทุกอย่างต้องเป็น dropdown
ตัวอย่างเช่น Comparison Table ดีสำหรับของแพงที่ต้องตัดสินใจ (เลือกแพลนซอฟต์แวร์) แต่ไม่ต้องใช้กับของถูกที่เปลี่ยนได้ง่าย (ซื้อลูกอม)
Use Case จริง — ระบบสต็อกร้านอาหาร
ผมเอาหลักการเหล่านี้มาใช้กับระบบสต็อกร้านก๋วยเตี๋ยวเนื้อตุ๋น
ก่อนเรียน NNGroup ผมสั่ง AI ว่า “ทำหน้า stock ให้หน่อย ใส่ข้อมูลทุกอย่าง” ได้ออกมาเป็นตารางยาวเหยียดที่ทุก column เท่ากันหมด ไม่รู้จะดูตรงไหนก่อน
หลังเรียน ผมสั่ง AI ด้วยภาษาที่ต่างไปเลย
ผมบอกว่า “ชื่อวัตถุดิบเป็น primary ต้องใหญ่สุด จำนวนเป็น secondary เล็กกว่า หน่วยเป็น tertiary สีเทา” นี่คือ Visual Hierarchy 3 ระดับ
ผมบอกว่า “จัดกลุ่มตาม Category เนื้อกลุ่มหนึ่ง ผักกลุ่มหนึ่ง เครื่องปรุงกลุ่มหนึ่ง เว้น spacing ระหว่างกลุ่มมากกว่าภายใน” นี่คือ LATCH framework + Gestalt proximity
ผมบอกว่า “สต็อกต่ำอย่าแค่เปลี่ยนสีแดง ใส่ icon warning กับข้อความ ใกล้หมด ด้วย” นี่คือ Tesler’s Law ที่ย้ายภาระการตีความจาก user ไปให้ระบบ
ผลลัพธ์คือ dashboard ที่พนักงานใหม่เปิดมาแล้วรู้ทันทีว่าต้องดูตรงไหน สั่งของอะไร โดยไม่ต้องสอน
สรุป
NNGroup เป็นของฟรีที่ดีที่สุดสำหรับคนที่ต้องออกแบบ UI แต่ไม่ได้เรียน design มา ไม่ต้องรู้ Figma ไม่ต้องรู้ code แค่เข้าใจหลักการ 4 หมวดนี้ก็สั่ง AI ออกแบบได้แม่นขึ้นเยอะ
ผมไม่ได้จ่ายเงินเรียน แค่ดู YouTube ฟรีแล้วเอามาลอง สิ่งที่เปลี่ยนไม่ใช่ skill ของผม แต่คือภาษาที่ผมใช้สั่ง AI เปลี่ยนจาก “ทำให้สวย” เป็น “ทำ hierarchy 3 ระดับ ใช้ spacing system 8px จำกัด 3 สี”
ถ้าใครกำลังสร้างระบบอะไรก็ตามด้วย AI ลองดู NNGroup สัก 5 วิดีโอ แล้วจะรู้ว่าภาษาที่ใช้สั่ง AI เปลี่ยนไปเลย