ตอบ 4 คำถามหลัก ก่อนลงมือออกแบบ!

กลับมาอีกครั้งสำหรับสายดีไซน์! รอบนี้ไม่ใช่แค่เบื้องหลังงานของ Punch Up เพราะเราอยากชวนคุยเรื่องใหญ่ในใจดีไซเนอร์ตัวน้อย นั่นคือการรับมือกับ ‘Complexity’ และ ‘Imposter Syndrome’

ใครที่ยังไม่ได้อ่านบทความก่อนหน้า Information Design: 5 ขั้นตอนแปลงข้อมูลให้อ่านง่าย ก็แวะไปบุ๊กมาร์กเก็บไว้ได้นะ

>>ข้ามโฆษณา

สิ่งที่ดีไซน์เนอร์ตัวน้อยต้องเจอเมื่อเข้าสู่โลกของ Digital Design คืออะไร ?

เอ๊ะ อันนี้เกี่ยวข้องกันยังไงนะ?

flow แบบนี้ถูกต้องหรือเปล่า?

ต้องเลือกใช้ UI แบบไหน คิดจากอะไร?

สิ่งนี้ทำไมไม่รู้เร็วกว่านี้

หรือแม้กระทั่งดีไซน์ไปได้ไกลถึง high-fidelity แล้ว ก็ยังอดย้อนกลับมาสงสัยกับสิ่งที่ตัดสินใจไปไม่ได้ นั่นอาจเป็นเพราะงานที่ผ่าน ๆ มา เราคิดถึงแต่ “Action” แต่สิ่งที่ Object-Oriented สนใจคือมุ่งไปที่ “Object’ ต่างหาก

ยกตัวอย่าง Object-Oriented แบบเข้าใจง่าย ๆ เช่น เราต้องจัดระเบียบโต๊ะทำงาน แทนที่จะสนใจว่าโต๊ะทำงานเอาไว้ใช้ทำอะไร (นั่งคิดงาน พิมพ์งาน ปริ้นท์งาน) Object-Oriented จะโฟกัสไปที่มีวัตถุอะไรมากกว่า อย่างโต๊ะทำงาน มีโต๊ะ เก้าอี้ คอมพิวเตอร์ หรืออีกตัวอย่างคือถ้าต้องออกแบบระบบห้องสมุด แทนที่จะโฟกัสกับการที่ผู้ใช้จะเข้ามา ‘ยืม’ หนังสือนั้น เราสนใจไปที่การทำความเข้าใจคุณสมบัติของ ‘หนังสือ’ ที่เป็นวัตถุที่ผู้ใช้จะเข้ามาใช้แทน

เลยอยากชวนลองทำความรู้จักกับแนวคิดที่ช่วยให้คิดดีไซน์แบบเป็นระบบ ☠️ลดการแก้ซ้ำวนลูป และที่สำคัญ ช่วยให้เรามั่นใจขึ้นจริง ๆ

นั่นคือ Object-Oriented UX (OOUX) ปรัชญาการออกแบบที่พัฒนาโดย Sophia Prater ซึ่งเน้นการออกแบบโดยยึดจาก “วัตถุที่ผู้ใช้เข้าใจ” มากกว่าฟีเจอร์หรือปุ่มสวย ๆ เพื่อให้ประสบการณ์ใช้งานสอดคล้องกับวิธีคิดของคนใช้จริง (mental model) ส่วนวิธีทำนั้น ก็คือว่าแยก “Content” ออกจาก “Screen”

ไม่ต้องห่วงว่ามันจะเข้าใจยาก เพราะเราจะพาไล่ทีละขั้น พร้อมตัวอย่างให้เห็นภาพชัด ๆ แบบคนทำ UX อ่านแล้วต้องร้อง wow แน่นอน!

 

หัวใจหลักของ OOUX คือตอบคำถามหลัก 4 ข้อให้ได้ก่อนเริ่มดีไซน์

❶ What are the Objects? วัตถุคืออะไรบ้าง?

สิ่งที่มีคุณค่าต่อระบบที่กำลังออกแบบอยู่ เช่น บุคคล สถานที่ หรือสิ่งของ

❷ What are the Relationships between them? ความสัมพันธ์ระหว่างวัตถุแต่ละชิ้นคืออะไร?

วัตถุเชื่อมโยงกันอย่างไร เช่น “ผู้ใช้” มี “บทความ”

❸ What can users do to each object? : Call to Action ผู้ใช้สามารถทำอะไรกับวัตถุแต่ละชิ้นได้บ้าง?

การกระทำที่ทำได้ เช่น สร้าง ลบ แก้ไข แชร์

❹ What are the Attributes of each object? คุณลักษณะของวัตถุแต่ละชิ้นคืออะไร?

ข้อมูลที่ประกอบในวัตถุ เช่น “บทความ” มีชื่อเรื่อง เนื้อหา ผู้เขียน

ทั้งหมดนี้เรียกเก๋ ๆ ว่า ORCA

เพื่อให้เห็นภาพชัดขึ้นว่าการใช้ ORCA ช่วยปลดล็อกความไม่มั่นใจในการออกแบบยังไง มาลองดูตัวอย่างจากโปรเจกต์สมมุติ และไล่ดูแต่ละขั้นตอนของ ORCA ผ่านโปรเจกต์นี้ ว่าแนวคิดแบบ Object-Oriented ช่วยให้ออกแบบได้อย่างมั่นใจและมีเหตุมีผลยังไงบ้าง ซึ่งเป็นสรุปเนื้อหาจากการอบรมฟรีในเว็บไซต์ OOUX

 

ทำความเข้าใจ ORCA แบบละเอียด เริ่ม!

🏎  F1 OFF GRID: สมมติว่าเรากำลังออกแบบแพลตฟอร์มสำหรับแฟน ๆ F1 ที่อยากรู้จักชีวิตเบื้องหลังนักแข่งมากกว่าผลการแข่งขันในสนาม (เนื่องจากผู้เขียนอิน F1 นิดหน่อย )

 

🟦 O — Object Discovery

“What are the OBJECTS?”

💬 คืออะไร ?

ขั้นตอนแรกของ ORCA คือการมองหาว่า “มีอะไรสำคัญบ้าง” ในระบบที่ผู้ใช้ต้องใช้งาน ที่ไม่ใช่แค่ฟีเจอร์หรือหน้าจอนะ

ถ้าเริ่มจาก 0 โครงสร้างข้อมูลยังไม่มี ยังฟุ้งๆ เช่นโปรเจคต์สมมุติของเรา → จะใช้เทคนิค Noun Foraging หรือการเก็บคำนามจากทุกที่ เช่น:

• • สิ่งที่ผู้ใช้บอกตอนสัมภาษณ์
  • ความต้องการจากทีมงาน
  • เนื้อหาในระบบจริง
  • บทความหรือข่าว และอื่น ๆ ที่เกี่ยวข้อง

🏎 ตัวอย่างใน F1 OFF GRID:

🧠 แล้วอันไหนล่ะ คือ Object ?

หลังจากได้คำนามมาเยอะแล้ว เราใช้ SIP Analysis มาดูว่าอะไรควรเป็น “Object จริง ๆ”

🔍 SIP คืออะไร ?

✅ Structure มีโครงสร้างชัด ๆ เช่น ชื่อ รูป ประวัติ

✅ Instances นับได้ เช่น กี่คน กี่คลิป

✅ Purpose มีประโยชน์จริง ๆ เช่น ช่วยให้ติดตามคนที่ชอบได้

🏎 ตัวอย่างใน F1 OFF GRID:

• Driver Profile, Career Highlight, Off Track Activities = เป็น Object ได้ เพราะมีครบทั้ง S I P

• Biography, Championship Year, Helmet Design  = เป็นแค่คุณสมบัติเท่านั้น

 

🟥 A — Attribute Discovery

“What makes each object unique and useful?”

💬 คืออะไร ?

หลังจากรู้ Object แล้ว ต้อง ระบุคุณสมบัติของแต่ละ ซึ่งระบุได้ 2 ประเภท

🟨 Core Content: ชื่อหรือข้อมลเฉพาะต่างๆ ข้อมูลตัวตน เช่น ชื่อ ประวัติ รูป ใช้ทำความรู้จัก

🟥 Metadata: data ที่มี data ของตัวเอง ใช้จัดกลุ่ม เรียง กรอง เช่น ปี ประเภท ประเทศ การรู้ว่า object มี metadata อะไร นำไปสู่การเลือกหน้าตาที่เหมาะสม เช่น dropdown calendar tag etc.

🏎 ตัวอย่างใน F1 OFF GRID:

• • Driver Profile
    • 🟨 ชื่อ ประวัติ
    • 🟥 สัญชาติ ปีเริ่มแข่ง
  • Career Highlight
    • 🟨 ชื่อรายการความสำเร็จ
    • 🟥 ปี สนาม
  • Off Track Activities
    • 🟨 นิสัย รถที่ใช้ งานอดิเรก
    • 🟥 ระดับการมีส่วนร่วมกับสาธาระณะ

 

🔗 R — Relationship Discovery

“What objects are connected to each other?”

💬 คืออะไร ?

ส่วนนี้แหละเด็ด! เราจะดูว่า Object แต่ละตัวเชื่อมโยงกันอย่างไร เช่น “มีอะไรซ้อนกันอยู่” หรือ “สัมพันธ์กับอะไรบ้าง” นี่คือขั้นตอนที่ทำให้เราสร้างระบบที่ เข้าใจง่ายสำหรับผู้ใช้ เช่น เมื่อเห็นไฮไลต์แล้วสามารถคลิกไปดูข้อมูลนักแข่งได้

📊 ใช้ NOM (Nested-Object Matrix)

• • เรียง Object เป็นตาราง
  • ระบุจำนวนความสัมพันธ์เป็นตัวเลข เช่น มี 0-1, 1-1, 1-หลาย หรือ 0-10
  • ระบุสถานะความสัมพันธ์ เช่น นักแข่ง “เป็นเจ้าของ” รางวัลได้ 0-หลายรางวัล

🏎 ตัวอย่างใน F1 OFF GRID:

Nested-Object Matrix (NOM)

 

🟩 C — Call-to-Action (CTA) Discovery

“What do users want to DO?”

💬 คืออะไร ?

หลังจากรู้ว่ามี Objects อะไรบ้าง เราต้องรู้ว่าผู้ใช้อยากทำอะไรกับมันบ้าง

🟩 Strong CTA (ที่ต้องมี) คือการกระทำที่มีความหมายกับผู้ใช้จริง ๆ เมื่อทำแล้วเกิดการเปลี่ยนแปลง เช่น

• • • ติดตาม / เลิกติดตาม
    • บันทึก / แจ้งเตือน / เก็บไว้ดูทีหลัง
    • สร้าง / แก้ไข / ลบ

⬜ Weak CTA (ค่อยไปใส่ตอนออกแบบที่ละเอียดกว่านี้)

• • • ดู / เล่น / อ่านเพิ่ม

🧠 เกร็ดเล็กเกร็ดน้อย

“ถ้าการกระทำนั้นสร้างของใหม่ อาจต้องมี object ใหม่” เช่น “แสดงความเห็นต่อนักแข่ง” → ต้องมี object: Comment

🏎 ตัวอย่างใน F1 OFF GRID:

• • 🟩 Driver Profile → ติดตาม แชร์ บันทึก
  • 🟩 Career Highlight → เก็บไว้ดู กรอง
  • 🟩 Off-Track Activity → ดูคลิป

 

🖍️ ต่อไป: ร่าง / ทำต้นแบบ / ทดสอบ 🟦 🟩 🟨 🟥

เมื่อตอบคำถามครบ 4 ข้อ เราจะรู้ว่า

• • แต่ละหน้าต้องมีองค์ประกอบอะไรบ้าง
  • หน้ารายการต้องมีตัวกรองอะไร
  • ควรวางอะไรตรงไหน
  • อื่น ๆ

มีประโยชน์อย่างไรบ้าง

• • เข้าใจข้อมูลทั้งหมดได้อย่างรวดเร็ว และนำไปวางแผนการเตรียมข้อมูลต่อได้
  • นำไปสู่ผลลัพธ์สุดท้าย ของสถาปัตยกรรมข้อมูล (information architecture) เช่น sitemap, flow ต่างๆ
  • นำไป validate กับผู้มีส่วนได้ส่วนเสีย (stakeholder) เพื่อตรวจสอบความเข้าใจและทดสอบได้
  • นำไปออกแบบต่อได้ทันที (เพียงแค่ทำ mapping ครบ 4 ส่วน ก็เห็นภาพ lo-fi คร่าว ๆ แล้ว)

🏎 ตัวอย่างใน F1 OFF GRID:

💬 สรุปง่าย ๆ

“เราไม่ได้ออกแบบแค่หน้าจอ แต่ออกแบบประสบการณ์ที่เริ่มจาก Object ที่มีคุณค่ากับผู้ใช้”

🧰 สรุปเครื่องมือ ORCA Sprint Core Tools

1. 1. Noun Foraging → กวาดคำนามจากรีเสิร์ชเพื่อหา potential objects
   2. SIP Analysis → วิเคราะห์ว่า object ไหน “แท้” โดยดู Structure, Instances, Purpose
   3. Object List → ลิสต์รายชื่อ object ที่ผ่าน SIP แล้ว (คือ candidates ที่เราจะใช้ต่อ)
   4. Object Map → ตารางหลักที่รวม object, attributes, CTA และ nested objects ทั้งหมด
   5. Attribute Brainstorming → หา 🟨 core content และ 🟥 metadata ให้แต่ละ object
   6. Nested-Object Matrix (NOM) → ตารางความสัมพันธ์ระหว่าง object พร้อม cardinality (1:1, 1:m)
   7. CTA Matrix→ ลิสต์ว่าแต่ละ object “เรียกให้ผู้ใช้ทำอะไร” เช่น follow, save, comment
   8. Red Flags & Questions List → รวมสิ่งที่ยังไม่ชัวร์, ติดขัด, หรือต้องถาม stakeholder เพิ่มเติม
   9. Object Prioritization Matrix → จัดลำดับ object ว่าอันไหนสำคัญที่สุดต่อผู้ใช้และธุรกิจ
   10. Sketches / Prototypes → ออกแบบ UI โดยยึด object-oriented เป็นแกน ไม่ใช่เริ่มจากหน้า

OOUX คือแนวคิดการออกแบบที่เน้นสิ่งที่มีความหมายต่อผู้ใช้จริง ๆ ไม่ใช่แค่หน้าตาหรือฟีเจอร์สวยงามเท่านั้น แต่เป็นการจัดวางระบบโดยเริ่มจากวัตถุสำคัญในโลกของผู้ใช้ ผ่านโครงสร้าง ORCA (Object, Relationship, CTA, Attribute) โครงสร้างนี้ช่วยให้เราวางแผนได้รอบด้าน ไม่หลุดประเด็น และลดความสับสนในการตัดสินใจด้านดีไซน์ได้อย่างชัดเจน เมื่อใช้แนวคิดนี้ เราจะมีความมั่นใจในการออกแบบมากขึ้น ประหยัดเวลา และสื่อสารกับทีมได้อย่างราบรื่น

 

ตัวอย่าง ORCA ในโปรเจค Data Storytelling ของ Punch Up!

เบื้องหลังงานออกแบบที่สวยงามเหล่านี้ล้วนผ่านการจัดระเบียบและทำความเข้าใจข้อมูลอย่างลึกซึ้งมาก่อน สามารถติดตามตัวอย่างงานจริงของโครงสร้างนี้ได้ที่ https://wevis.info/escr

📚 ช่องทางเรียนรู้ OOUX

• เนื้อหาฟรี 15 Advance Move (90 นาที) และชุมชน OOUXer
  • 👉 เข้าร่วมฟรี
• คอร์ส OOUX Foundations (7 สัปดาห์) ฝึกจริง สร้าง UX Portfolio ที่แข็งแรง
  • 👉 Untangle wicked complexity. Ask million-dollar questions. Design smarter.
• ติดตามบทความ พอดแคสต์ และคอมมูนิตี้ OOUX
  • 👉 ooux.com