ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework | Skooldio Blog

ในโลกยุคใหม่ จะออกแบบ UI แค่ใช้ง่ายและลูกค้าชอบคงไม่พออีกต่อไป! โจทย์ที่ต้องแก้คือจะทำยังไงให้ผู้ใช้งานรัก Product ของเรา และคำตอบคือการสร้าง Emotional Connection ให้เข้าไปแตะถึงหัวใจลูกค้า ด้วย 5 สุดยอด Framework ที่แนะนำโดย 4 Speaker ผู้คร่ำหวอดในวงการ UX/UI จาก 🔴 Skooldio Live ตอน

Beyond UI: Designing for Emotions
ออกแบบ UI ให้ ‘เข้าถึงใจ’ ผู้ใช้งาน

1) คุณดาริน สุทธพงษ์
CEO, Co-Founder Indy Dish, Ex-UX Design Lead, Amazon

2) คุณอภิรักษ์ ปนาทกูล
Founder of UX Academy และ ex-Google Developers Expert in UX/UI

3) คุณพิจารณา รัตนาธิคุณ
Founder, Design & Research Lead Pruxus Design

4) คุณเอกกฤต ฝุ่นเงิน
UX/UI Designer, Skooldio / Young Jury ของรางวัล Awwwards

Emotional Design คืออะไร? ในมุมมองแต่ละคน

Emotional Design คืออะไร? ในมุมมองแต่ละคน | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

ในมุมมองของคุณอิง Emotional Design คือการดีไซน์โดยมี Emotion เป็นจุดมุ่งหมาย ต้องการให้คนรู้สึกอะไรบางอย่าง

ส่วนในมุมของคุณแบงค์เสริมว่า Emotional Design คือการออกแบบเสน่ห์ ซึ่งต้องออกแบบไว้ก่อน ไม่ใช่ปล่อยให้เกิดขึ้นโดยความบังเอิญ ว่าอยากให้จับอารมณ์แบบไหน แล้วค่อยไปทำงานต่อ

ด้านของคุณพิจให้ความเห็นว่า ในการทำ Emotional Design สิ่งสำคัญคืออย่าทำให้เกิด  Frustration เพราะจะทำให้ความรู้สึกดีๆ ทั้งหมดของผู้ใช้งาน หายไปทันที

ปิดท้ายด้วยคุณทิวไผ่แชร์ว่า Emotional Design  คือ หน้าตา ท่วงท่า ลีลา ว่าเราอยากกำหนดให้เกิดอารมณ์แบบไหนกับ Product หรือ Service ของเรา

ทำไมแบรนด์ต่างๆ ถึงเริ่มให้ความสำคัญกับ Emotional Design มากขึ้น

ทำไมแบรนด์ต่างๆ ถึงเริ่มให้ความสำคัญกับ Emotional Design มากขึ้น | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

ปัจจุบันธุรกิจมีการแข่งขันที่สูงขึ้น แค่ “คนชอบ” เริ่มไม่พอ เราอยากได้ “คนรัก” เราอยากให้ Brand ของเรามี Fan เพราะคนที่รักแบรนด์ของเราจะมีลักษณะพิเศษ คือเขาจะช่วยบอกต่อ และคอยปกป้องเรา รวมถึงยังมีผลต่อจิตใจของคนทำงานด้วย เช่น Application ของธนาคาร ก็ส่งผลต่อการหาคนเข้าไปทำงานด้วยเช่นกัน

ถ้าเราให้ความสำคัญกับ Emotion ก็จะช่วยสร้างความแตกต่างให้แบรนด์ได้ นอกจากนี้ยังช่วยให้ Product หรือ Service ของเรามี Human Touch มากขึ้น อาจเริ่มจากการมีข้อมูลที่เป็นระเบียบเรียบร้อย ไอคอนสื่อสารได้ดี ซึ่งจะช่วยให้คนเปิดใจและในระยะยาวจะช่วยสร้างความเชื่อใจให้แบรนด์ได้ดีกว่าเดิม

ตัวอย่างแบรนด์ที่มีคนรักมาก เพราะขับเคลื่อนด้วยเสน่ห์ของ Emotional Design คือ Pinterest | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

ตัวอย่างแบรนด์ที่มีคนรักมาก เพราะขับเคลื่อนด้วยเสน่ห์ของ Emotional Design คือ Pinterest จนกลายเป็น Platform ที่สร้างความแตกต่างในตลาดจาก Google หรือ Facebook ได้อย่างชัดเจน

ซึ่งสิ่งสำคัญก่อนจะเริ่มสร้าง Emotion Design คือต้องไปสำรวจก่อนว่าคนมี Need จริงๆ หรือเปล่า รวมถึงต้องเดาอารมณ์ของ User ในช่วงที่กำลังใช้งานได้ หรือที่เรียกว่า Anthropomorphism เพื่อให้แน่ใจว่าการสื่อสารกับผู้ใช้งานของเรา เรามองที่ความเป็นคน หมายถึง มองที่ Emotion ของผู้ใช้งานในเวลานั้นจริงๆ 

Anthropomorphism | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

เช่น ตัวอย่างแอปช่วยยื่นภาษี Turbo Tax ในต่างประเทศ มีผู้หญิงคนหนึ่งเข้าไปใส่รายละเอียดในแอป และเจอคำถามว่าเมื่อปีที่แล้วมีคนใกล้ตัวเสียชีวิตไหม เธอจึงกรอกว่าสามีเธอเสียชีวิต เมื่อกรอกปุ๊บก็มีข้อความอัตโนมัติเด้งขึ้นมาแสดงความเสียใจด้วย ทำให้เธอซาบซึ้งใจมากและเอาไปแชร์ต่อใน Twitter

จะทำยังไง ถ้าอยากสร้าง Emotional Design ในองค์กร

จะทำยังไง ถ้าอยากสร้าง Emotional Design ในองค์กร | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

ถ้าผู้บริหารอยากสร้าง Emotional Design ให้ลูกค้า ต้องกล้าเปิดโอกาสและเชื่อใจให้ทีมงานได้ลองทำดู

ซึ่งการสร้าง Emotional Design ต้องมาจากการวาง UX strategy ที่ดี ซึ่งต่อยอดจาก Business Strategy อีกทีหนึ่ง เช่น ถ้าอยากขาย Product ของเราแบบนี้ เราจะเป็นคนแบบไหน ต้องทำให้ทุกคนสามารถทำงานไปในทิศทางเดียวกับกลยุทธ์ที่วางไว้ได้

แนะนำ Framework สำหรับออกแบบ Emotional Design

คุณอิงแนะนำว่า ให้คิดว่าการออกแบบ Product เหมือนการออกแบบคนหนึ่งคน เราจะทำให้คนมีอารมณ์แบบไหน ต้องประกอบไปด้วย Tactic 3 ส่วน

  1. How it work : จะให้มันทำงานยังไง เช่น กดไปแล้วเป็นยังไง Flow การจัดหน้าเป็นแบบไหน รวมถึงท่วงท่า ลีลา
  2. How it looks : รูป รส กลิ่น เสียง และองค์ประกอบเชิงกราฟิคดีไซน์
  3. What does it say : การสื่อสารที่รู้ใจและทรงพลังต่อความรู้สึกของผู้ใช้งาน

PERMA Model (โดย Martin Seligman) 

PERMA Model (โดย Martin Seligman)  | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework
credit : positivemindfulleader

Pleasure : รูป, รส, กลิ่น, เสียง, สัมผัส
Engagement / Flow : ทำยังไงให้ผู้ใช้งานรู้สึกเพลิดเพลินกับ Product เรา
Relationship : การสร้างความรู้สึกดีๆ ให้เกิดขึ้นกับผู้ใช้งาน
Meaning : ทำยังไงให้ผู้ใช้งานรู้สึกว่า สินค้าเรามีความหมาย
Achievement : ทำให้คนรู้สึกถึงความสำเร็จ เมื่อทำเสร็จกระบวนการ

Heuristics Evaluation ( โดย Jakob Nielsen) 

Heuristics Evaluation ( โดย Jakob Nielsen) | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

คุณพิจพูดถึงตัวอย่างบางข้อที่สำคัญของ Framework นี้ เช่น Consistency ของที่ควรเหมือนกัน ก็ต้องเหมือน เช่น ปุ่มคอนเฟิร์มถ้าเป็นสีเขียว ก็ให้ใช้สีเขียวทุกหน้า รวมถึงของที่ควรต่าง ก็ต้องทำให้มันต่าง ซึ่งการสร้าง Branding ที่แข็งแรงก็จะช่วยสร้างความแตกต่างได้เหมือนกัน เช่น สีหลักของธนาคาร หรือสีหลักของแอปชอปปิง 

อีกประเด็นคือ Aesthetics Minimalist of design อย่าไปตกแต่งอะไรเยอะถ้าสิ่งเหล่านั้นไม่มีความหมาย คือตกแต่งได้ แต่อย่าใส่จนไปรบกวนข้อมูลที่เป็นหัวใจสำคัญในการสื่อสาร

Product Personality

Product Personality | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

ตัวอย่างของคุณทิวไผ่ที่สร้าง Learn Anywhere แอปฯ เรียนออนไลน์ของเด็กมัธยม ซึ่งได้กำหนด Product Personality ขึ้นมา โดยตั้ง Objective ไว้ว่าเราอยากเป็นเพื่อนที่ช่วยเสริมความมั่นใจในการเรียนของน้อง (Sincerity) และช่วยให้น้องมีประสบการณ์ในการเรียนที่ไม่น่าเบื่อ (Excitement)

Product Personality ( โดย Jakob Nielsen) | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

โดยเริ่มจากดูลักษณะไลฟ์สไตล์ user ว่าคุ้นชินกับอะไร เล่นแอปอะไร เสพอะไร และคิดว่าอารมณ์แบบไหนที่เราอยากสื่อสารและให้ user ของเรารู้สึก รวมถึงช่วยสะท้อนบุคลิกภาพของแอปฯ ที่ตั้งโจทย์ไว้คืออิสระ เรียนที่ไหน เมื่อไหร่ก็ได้

Product Personality ( โดย Jakob Nielsen) | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

จากนั้นจึงกำหนด Art direction ขึ้นมา ซึ่งสามารถนำไปปรับใช้กับงาน UI ได้เหมือนกัน เพราะเป็นประโยชน์ในการสื่อสาร ทั้งในแง่ของการทำให้อารมณ์ชัดเจนขึ้น รวมถึงการทำสื่อกับทีมอื่นๆ เช่น ทีม Marketing

ประเด็นคือ อยากให้ user รู้สึกยังไง เราก็กำหนดแนวทางของอารมณ์เหล่านั้นขึ้นมา แล้วสร้างองค์ประกอบต่างๆ ตามแนวทางนั้น แล้วเอาไปทดสอบกับ user ของเรา ว่าเขารู้สึกแบบนั้นมั้ย

Service Design

Service Design | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

ด้านคุณแบงค์ให้ความเห็นว่า ถ้าอยากให้ผู้ใช้งานได้ประสบการณ์แบบที่เราตั้งเป้าหมายไว้ ต้องออกแบบ Service Design ด้วย เช่น Touchpoint ต่างๆ ที่จะต้องเจอกับผู้ใช้งาน หรือแอปจ่ายเงินที่ต้องรวดเร็วทันใจ ดังนั้นสิ่งที่มีผลต่อความรู้สึกของผู้ใช้ จะไม่ใช่แค่เรื่อง UI อีกต่อไป

Seductive Design

Seductive Design | Skooldio Blog - ออกแบบ UI ให้เข้าถึงใจลูกค้า! ด้วย 5 Framework

การออกแบบให้มีเสน่ห์ ในเวอร์ชั่นลงรายละเอียด ซึ่งเป็นส่วนหนึ่งจากหนังสือ Seductive Design  เริ่มตั้งแต่ขั้น Funtional ที่ผู้ใช้งานทุกคน ทุกประเภทต้องใช้งานได้ ต่อมาต้องมีความเสถียร ใช้ง่ายสะดวกสบาย คนจำได้ และสุดท้ายคือต้องทำให้คนรู้สึกว่าแอปนี้มีความหมายกับฉัน ซึ่ง Framework นี้จะเป็นเหมือนเช็คลิสต์และทำให้เราขบคิดในการพัฒนาแอปพลิเคชันได้ตอบโจทย์มากขึ้น 


ยังไม่จบแค่นี้! ไปฟังเคล็ดลับการออกแบบ UI ให้เข้าถึงใจลูกค้าเวอร์ชั่นเต็มกันต่อที่นี่เลย


Skooldio Live ยังมีอีกหลายตอนที่น่าสนใจ และช่วยคุณอัพสกิลใหม่ๆ ได้แน่นอน

Tech Giants: How Culture Shapes The Way They Do Things

เพราะโลกไปไกลแล้ว! 🌎 ถ้าไม่อยากเป็นองค์กรอ่อนแอในยุคใหม่ ถึงเวลาเปลี่ยนให้ปรับตัวไว และคล่องแคล่วกับทุกสถานการณ์ 🚀 โดยเริ่มจากการเรียนรู้ #วัฒนธรรมองค์กร ที่แข็งแรง ของบริษัท Tech ยักษ์ใหญ่ระดับโลกอย่าง Google, Amazon, Facebook และ Lazada ซึ่งทำให้ทีมงานทุกคนขับเคลื่อนไปถึงเป้าหมายเดียวกันได้อย่างชัดเจน และมีประสิทธิภาพ กับ 🔴 Skooldio Live ตอน

Tech Giants: How Culture Shapes The Way They Do Things
ปรับวัฒนธรรมองค์กรใหม่ แบบบริษัท Tech ใหญ่ระดับโลก


Behavioural Science in Digital World

🛍️ เว็บ Online Shopping ใช้เทคนิคอะไร ที่ทำให้เราซื้อของง่ายดาย?
🛵 ทำไมเรายินดีจ่ายค่าอาหาร Delivery แต่ไม่ยอมอ่อนข้อให้ค่าส่ง?
💸 เรามีเงินเก็บได้ยังไง จากการใช้แอปช่วยบริหารเงิน?

ทั้งหมดเป็นเพราะเรากำลังถูกยั่วใจด้วย TEMPT Model หรือหลักการออกแบบบริบทต่างๆ เพื่อทำให้คนเปลี่ยนแปลงพฤติกรรมจาก 🔴  Skooldio Live ตอน Trick me if you can!! Behavioural Science in Digital World เปิดโปงกล!! พฤติกรรมศาสตร์ในโลกดิจิทัล


Product Manager: The Mutants Among Us

👨‍💻 เพราะการข้ามสายไปทำงาน 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗠𝗮𝗻𝗮𝗴𝗲𝗿 ไม่จำเป็นต้องใช้ประสบการณ์เสมอไป❗มาฟังคำตอบสุด Insights จาก 4 𝗣𝗠 ตัวจริงแห่งวงการ Tech Business ที่สรุปไว้ใน 🔴  Skooldio LIVE ตอน 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗠𝗮𝗻𝗮𝗴𝗲𝗿 : 𝗧𝗵𝗲 𝗠𝘂𝘁𝗮𝗻𝘁𝘀 𝗔𝗺𝗼𝗻𝗴 𝗨𝘀 อัพสกิลข้ามสาย กลายร่างเป็น 𝗣𝗠


Marketing Communication in the post Covid-19 era

ฟังบทเรียนหมัดฮุค 🥊 ที่จะปลุกให้คุณลุกขึ้นมาปฏิวัติ Mindset การสื่อสารหลังปลดล็อคโควิด เพื่อพาธุรกิจรอดต่อไปแถมได้ใจลูกค้า จากมุมมองของ 2 กูรู เจ้าของร้านชาบูเพนกวิน และเจ้าของเพจการตลาดวันละตอน


Design Workflow Meetup: From Startups to Corporates

เฉลยวิธีทำงานให้ลื่นไหลของ Corporate ยักษ์ใหญ่ทีม KBTG และเทคนิคสร้างความเข้าใจให้ตรงกันโดย Startup ไฟแรงทีม Ko-fi เพื่อเรียนรู้การสร้าง Design Workflow ที่ดีว่าเป็นอย่างไร?


Psychology in Marketing and UX

ไขความลับเทคนิคจิตวิทยาเพื่อทำ UX และ Marketing ให้ปัง! โดย 3 Speaker จาก FINNOMENA X Skooldio X LINE Thailand ซึ่งเชี่ยวชาญทั้งด้าน Marketing, UX และ Behavioral Economics