DesignProduct

ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model

วิธีออกแบบ UX/UI ให้ดีขึ้น ด้วยหลัก Mental Model | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model

Mental Model คืออะไร?

มนุษย์เราจะจดจำการใช้งานสิ่งของแต่ละอย่าง จากรูปลักษณ์หน้าตา และประสบการณ์ที่เคยใช้หรือเคยเห็นมาก่อนหน้า

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

ยกตัวอย่างประสบการณ์ระยะสั้น

ประสบการณ์ระยะสั้น Mental Model | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model
เคสตัวอย่างขวดน้ำเชื่อม จากเหตุการณ์จริง
https://to.skooldio.com/5oi7dedOt6

ช่วงที่โควิดระบาดร้านค้าส่วนใหญ่จะวางขวดเจลล้างมือไว้ที่เคาท์เตอร์ เพื่อให้ลูกค้าทำความสะอาด คนก็จะคิดว่า “ถ้ามีขวดปั้มวางตรงเคาท์เตอร์ก็จะต้องเป็นเจลล้างมือ”
พอเราไปใช้บริการร้านที่วางขวด Syrup หน้าเคาท์เตอร์ ก็อาจจะเข้าใจว่า เป็นเจลล้างมือได้

หรือตัวอย่างประสบการณ์ระยะยาว

ประสบการณ์ระยะยาว Mental Model | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model
ถ้านึกไม่ออก นี่ไอค่อน Save จ้า
https://to.skooldio.com/sZCAYFpOt6

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

 

ออกแบบ ux ให้ตรงกับ user mental models | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model

จะรู้ได้ไงว่า Mental Model ของ User จะตรงกับที่เราออกแบบ Digital Product?

1. ทำ Usability Testing

user testing | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model

เพื่อยึดตามสิ่งที่ผู้ใช้คิดให้ทดสอบกับผู้ใช้โดยตรง “ถ้าจะทำ Action สักอย่าง เขาจะทำยังไง หรือใช้งานยังไง จากที่เคยใช้งานมา”

 

2. ทำ Card Sorting

card sorting | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model

ให้ผู้ใช้จัดกลุ่มข้อมูลตามความคิดของผู้ใช้ เช่นในตัวอย่าง เราอาจจะคิดว่าหมูกรอบเป็นกับข้าว แต่ผู้ใช้เคยทานหมูกรอบเป็นอาหารทานเล่น ผู้ใช้ก็จะคิดว่าหมูกรอบคือ อาหารทานเล่น


แล้วเราจะลดความ Mismatch ระหว่าง Mental Model ของ User กับ Product เราได้ยังไง!?

1. ปรับ Design ให้ตรงกับสิ่งที่ User คิด

ปรับดีไซน์ให้ตรงกับสิ่งที่ user คิด | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model

2. มี Instructions หรือ Tutorials ช่วยแนะนำในการใช้งาน (โดยเฉพาะครั้งแรกที่ใช้งาน)

แนะนำการใช้งานครั้งแรก | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model

3. ค่อยๆ ปรับ Feature ใหม่ทีละนิด หรือ มีตัวเลือกให้ User เลือกได้

ปรับฟีเจอร์ทีละนิด | Skooldio Blog - ออกแบบ UX/UI ให้ดีขึ้นง่ายๆ ด้วยหลักการ Mental Model

ทั้งหมดนี้ก็เป็นเทคนิคการออกแบบ UX/UI ให้ดีขึ้นได้ โดยเข้าใจ Mental Model ซึ่งเป็นเพียงเนื้อหาส่วนหนึ่งในวิธีการทำ UX/UI เท่านั้น สำหรับใครที่ต้องการเรียนแบบครบหมดทุกด้าน UX/UI ตอนนี้ Skooldio เปิดรับสมัคร UX UI Design Bootcamp รุ่นแรก ดูรายละเอียดเพิ่มเติมได้ที่ 

UX UI Design Bootcamp ก้าวแรกสู่การเป็น UX/UI Designer | Skooldio Blog

You may also like

Business

ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...
Design

รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ...

More in:Design

Design

Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดในวงการ Design!

Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...
UX Writing คืออะไร Design

ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
Web Design Font Pairing Design

เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
ui-design-Cover Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...

Comments are closed.