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 ยังทำงานกับจิตใจของมนุษย์อีกด้วย

ในปี 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