Design

Motion กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User

Why Motion?

ทำไม UX/UI Designer ควรให้ความสำคัญกับการนำ Motion Design มาใช้ในงานออกแบบมากขึ้น? หลายคนอาจคิดว่า Motion มีส่วนแค่ทำให้งานมีความสวยงามมากขึ้น ดู Modern มากขึ้นเท่านั้น แต่นั่นเป็นเพียงประโยชน์อย่างหนึ่งที่ ‘จับต้องได้ชัดเจน’ เท่านั้น แต่จริงๆ แล้ว Motion ยังมีประโยชน์อีกมากมายที่เราอาจไม่ได้มองเห็นหรือไม่เคยสังเกตมาก่อน

ส่วนแรกคือประโยชน์ที่มีต่อสมองของ User

สองเหตุการณ์ต่างกันคนละขั้ว แต่ยืนยันสิ่งเดียวกัน นั่นคือสมองของมนุษย์มีขีดจำกัด

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

สองเหตุการณ์ที่ตรงข้ามกันนี้ยืนยันถึงสิ่งเดียวกัน นั่นคือ ‘สมองของมนุษย์มีขีดจำกัด’

สิ่งต่างๆ ที่สมองเรารับเข้ามา ไม่ว่าจะเป็นภาพ รส กลิ่น เสียง จะผ่านขั้นตอนการรับเข้ามา คัดแยก ประมวลผล และส่งต่อข้อมูล กระบวนการนี้สร้างสิ่งที่เรียกว่า Cognitive Load ให้กับสมอง นั่นคือภาระที่เกิดขึ้นกับสมองจากการทำกิจกรรมต่างๆ

ดังนั้นสองภาพด้านบนคือภาวะของการที่สมองมี Cognitive Load มากเกินไป ทำให้สมองไม่สามารถทำงานในกระบวนการต่างๆ ได้ดีเท่ากับตอนที่มี Cognitive Load ต่ำ

ผลการศึกษาจากมหาวิทยาลัย Erasmus University Rotterdam ที่พยายามศึกษาหาวิธีลด Cognitive Load ของนักศึกษา เพื่อให้นักศึกษาสามารถเรียนรู้ได้ดีขึ้น พบว่า..

Animation หรือ Motion สามารถช่วยลด Cognitive Load ได้

ซึ่งสามารถทำได้โดยการช่วยนำสายตาของนักศึกษาไปยังจุดๆ หนึ่งที่อยากให้โฟกัสเนื้อหา ณ ขณะนั้น งานศึกษานี้เป็นเหมือนจุดเริ่มต้นที่ทำให้มีการค้นคว้าวิจัยกันเพิ่มเติมถึงความสัมพันธ์ระหว่าง Motion กับสมองของมนุษย์

ในการออกแบบ UX/UI เรื่องของการที่ทำให้ User ไม่ต้อง ‘คิดมาก’ หรือการช่วยลด Cognitive Load ให้กับ User ถือเป็นหนึ่งในหัวใจสำคัญที่ทำให้ User สามารถทำความเข้าใจและคุ้นชินกับ Product ได้อย่างรวดเร็ว ไม่งงหรือหัวร้อนจนเกิดประสบการณ์ที่ไม่ดีต่อ Product ของเรา ซึ่ง Motion เป็นหนึ่งอาวุธสำคัญที่จะเข้ามาช่วยลด Cognitive Load ได้อย่างดี และสามารถพลิกแพลงใช้ได้อย่างหลากหลาย

ในการออกแบบ UX/UI เรื่องของการที่ทำให้ User ไม่ต้อง ‘คิดมาก’ หรือการช่วยลด Cognitive Load ให้กับ User ถือเป็นหนึ่งในหัวใจสำคัญที่ทำให้ User สามารถทำความเข้าใจและคุ้นชินกับ Product ได้อย่างรวดเร็ว

นอกจากจะทำงานกับสมองแล้ว Motion ยังทำงานกับจิตใจของมนุษย์อีกด้วย

การทดลองของ Heider and Simmel ในปี 1994 / Source : www.researchgate.net

ในปี 1994 ที่ Smith College ได้มีการวิจัยอันเลื่องชื่อของ Heider & Simmel ที่ ได้ทำการวิจัยกับผู้เข้าร่วมทดลอง 110 คน โดยให้ผู้เข้าร่วมการทดลองทั้งหมดดู Animation ที่มีรูปทรงเรขาคณิต 3 ตัวขยับเคลื่อนไหวไปมา (ดูวิดีโอจำลอง Animation ที่ใช้ในการทดลองได้ที่นี่ )

ผลปรากฎว่าผู้เข้าร่วมทดลองถึง 105 คนได้ตีความว่าวัตถุเรขาคณิตทั้งสามกำลังต่อสู้กันเหมือนคน และอีก 75 คนที่มีความเห็นตรงกันว่าเรขาคณิตสามเหลี่ยมมีความเป็นผู้ชาย โดยที่สามเหลี่ยมชิ้นใหญ่มีความดุร้ายมากกว่า ส่วนวงกลมนั้นเป็นผู้หญิง!

การวิจัยนี้แสดงให้เห็นว่ามนุษย์มีความสามารถหนึ่งร่วมกันที่เรียกว่า Anthropomorphic หรือการ ‘มอบความเป็นมนุษย์ให้กับสิ่งที่ไม่ใช่มนุษย์’ เช่นการที่เรามองเห็นต้นไม้มีกิ่งก้าน แล้วคิดว่ากิ่งก้านนั้นเป็นเหมือนแขนขาของมนุษย์ หรือเวลาฝนตกที่เป็นปรากฎการณ์ทางวิทยาศาสตร์ล้วนๆ เรากลับบอกว่าท้องฟ้ากำลังร้องไห้

ซึ่งเรื่องของ Anthropomorphic สามารถนำมาปรับใช้เพื่อเพิ่มมิติให้กับการออกแบบ UX/UI เราอาจสามารถสื่อสาร Message บางอย่างถึง User โดยที่ไม่ต้องใช้ตัวอักษรบอกเลย

นี่คือหลักการพื้นฐานที่ทำให้เห็นว่า Motion จะมีบทบาทในการยกระดับการออกแบบ UX/UI อย่างไร หากอยากเห็นภาพมากขึ้น ลองอ่านตัวอย่างเทคนิคใช้ Motion Design ในการออกแบบ UX/UI ด้วยเทคนิค Progress Indicator รวมเทคนิคใช้ Progress Indicator ออกแบบ UX/UI จากแอปฯ ระดับโลก ไม่ให้ User รู้สึกว่าต้อง ‘รอ’ นานเกินไป

หากสนใจอยากเรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบ UX/UI ให้ดีขึ้นด้วยการนำศาสตร์การออกแบบด้วย Motion Design มาใช้ Skooldio ขอแนะนำคอร์ส Improving UX with Motion คอร์สเรียนที่จะพาเจาะลึกพื้นฐานการใช้ Motion ในการออกแบบ UX ตลอดจนเข้าใจกระบวนการทำงานกับ Product จริง และลงมือทำ Clickable Prototype ด้วย Figma และ Framer

สนใจอ่านข้อมูลเพิ่มเติมหรือสมัครได้เลยที่นี่ >>> https://to.skooldio.com/qu7iAtT7djb

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.