UX Animation ช่วยให้ User ของเราใช้งานดีขึ้นได้อย่างไร

Natk

สวัสดีค่ะทุกคน วันนี้กลับมาพร้อมกับบทความ Design จากแอดนัทคนดีคนเดิม ในบทความนี้เราจะมาเล่าเรื่องของการใช้งานแอนิเมชั่น micro animation ประเภทต่าง ๆ ว่าจะมีข้อดีตอบรับกับ User ของเราได้อย่างไร

มาดู 5 ข้อดีของการทำ UX Animation บนเว็บไซต์ ที่จะช่วยทำให้ User experience ของเรานั้นดีขึ้น และทำให้ User ใช้งานได้ราบรื่นมากยิ่งขึ้นกันเลย

*หมายเหตุ: สามารถดูแอนิเมชั่นของภาพประกอบได้ด้วยการกดที่ภาพ*

1. UX Animation การทำ แอนิเมชั่น ช่วยลด COGNITIVE LOAD

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

กล่าวคือถ้าเรายิ่งนำเสนอข้อมูลจำนวนมาก ไม่มีการนำเสนอที่ถูกต้อง ก็ยิ่งทำให้ Cognitive load ของ User ของเราเพิ่มขึ้น และยิ่งมีมากก็ยิ่งทำให้​ User คิดตัดสินได้ช้าลง

ดังนั้นการทำแอนิเมชั่นที่ดี จะช่วยแบ่งเบาลดภาระของสมองในการคิดคำนวนระหว่างการใช้งาน เพื่อให้ User ไปถึงเป้าหมายได้อย่างราบรื่นมากที่สุด

เช่น การเปลี่ยนหน้าจอหรือเปลี่ยนระหว่าง state อย่างรวดเร็วกระทันหัน จะทำให้สมองสับสนและทำงานหนักได้

ตัวอย่างการกดปุ่มแล้วแสดงหน้าใหม่ จาก Google ด้วยการใส่ duration ของแอนิเมชั่นที่เหมาะสม
ตัวอย่างการกดปุ่มแล้วแสดงหน้าใหม่ จาก Google ด้วยการใส่ duration ของแอนิเมชั่นที่เหมาะสม

ตัวอย่างภาพด้านบน เป็นการใส่แอนิเมชั่นเพื่อบอกให้ User ทราบว่ากดปุ่มบวกแล้วจะมีหน้ามาใหม่มาแทนที่ ทำให้ user เข้าใจได้ว่าหน้านี้ไม่ใช่เดิม จะได้ไม่กดปุ่มผิด

ตัวอย่างนี้เหมือนการเปลี่ยนหน้าหนังสือ โดยเวลาเราอ่านหนังสือเป็นเล่มจริง เราจะรู้ว่าถ้าอยากเปลี่ยนหน้ากระดาษให้จับไปที่ขอบทางด้านขวา พอจะเปลี่ยนหน้ากระดาษสมองเราก็รู้ว่า “อ๋อ ฉันจะเปลี่ยนหน้าแล้ว” เนื้อหาก็จะเปลี่ยนไป ทำให้เราไม่รู้สึกว่าเกิดการเปลี่ยนผ่านกระทันหัน ไม่สร้าง cognitive load นั่นเอง

ดังนั้นมี Amination ก็เลยจะช่วยลด cognitive load ของสมอง ทำให้สมองไม่ต้องคิดเองว่าเกิดอะไรขึ้นเวลาเกิดการเปลี่ยนผ่านของหน้าจอ จากอีกหน้าหนึ่งไปยังอีกหน้าหนึ่ง

การทำแอนิเมชั่นที่ดีจะมาช่วยทำให้การ interact กับ Product ของเราเป็นไปได้อย่างธรรมชาติเหมือนกับการใช้งานในชีวิตจริง

จาก Research

2. แอนิเมชั่น จะช่วยสร้างฟีดแบค

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

การใช้งานบนระบบก็เช่นกัน ถ้าหาก user กดอะไรบนหน้าจอไปแล้ว ระบบไม่มีอะไรตอบกลับมา user ก็จะงงแล้วว่าเฮ้ยอะไรวะ เกิดอะไรขึ้น พังหรือยังไง กดซ้ำดีมั้ย (กดไปกดมา …. สรุป พัง)

Animation ขนาดเล็กๆ เราจะเรียกว่า Micro-interaction ค่าคือการสร้าง แอนิเมชั่นที่ช่วยแจ้ง user เวลาใช้งาน เช่น hover interaction, click interaction, หรือเวลากดปุ่มเล่นเพลง แล้วจะมี animation รอโหลดขึ้นมา

แอนิเมชั่น tabs scrollable
แอนิเมชั่น tabs scrollable

ยกตัวอย่างจากภาพด้านบน แสดงให้เห็นว่าเราสามารถใช้มือ swipe เมนูด้านบนไปยังหน้าถัดไป ทางซ้ายหรือทางขวาได้

แอนิเมชั่นเล็ก ๆ น้อย ๆ เหล่านี้ (Micro interaction) จะช่วยแจ้ง user ว่าจะเกิดอะไรขึ้นกับหน้าจอของเราในอนาคต เช่นการ drag and drop แอนิเมชั่น ว่าถ้าเราลากกล่องไปตรงนี้จะมีกล่องเส้นประให้เราเห็นว่าจะวางของตรงนี้ได้

3. แอนิเมชั่น ช่วยทำให้ดึงดูดความสนใจจาก USER

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

และเราสามารถใช้แอนิเมชั่นมาใช้ในการออกแบบ UI เพื่อให้เกิดความน่าสนใจได้กับตรงนี้นั่นเอง

แอนิเมชั่นช่วยเพิ่มการโฟกัสจาก User ว่าตอนนี้กำลังทำอะไรอยู่
แอนิเมชั่นช่วยเพิ่มการโฟกัสจาก User ว่าตอนนี้กำลังทำอะไรอยู่

ตัวอย่างเช่น ภาพด้านบนเป็นแอนิเมชั่นขนาดเล็ก ที่จะทำให้ User โฟกัสไปที่รายละเอียด Email ที่เรากำลังสนใจอ่านอยู่ User กดดูแบบเร็ว ๆ ได้ว่ามีใคร Reply ในอีเมล์นี้บ้าง โดยไม่ต้องกดเข้าไปด้านใน

หรือตัวอย่างเวลาเวลาหยิบของใส่ตะกร้าสินค้า แล้วจะมีแอนิเมชั่นมีของถูกลากขึ้นไปใส่ในตะกร้าให้เราเห็นได้ว่า มีสินค้าถูกเพิ่มเข้าไปในตะกร้าสินค้าแล้ว

ข้อดีของ Animation ตรงนี้เอง ก็จะช่วยพลางตา user ได้ด้วยว่า เว็บฉันโหลดช้า ดึงจุดสนใจของ user ไปที่ลูกเล่นอื่นแทน

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

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

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

4. แอนิเมชั่นช่วยให้เรารู้ที่มาที่ไปของสิ่งที่จะเกิดขึ้นในหน้าจอ ลดความสับสนของ USER

แอมิเมชั่น bottom navigation
แอมิเมชั่น bottom navigation

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

อีกอันเป็นปัญหาที่เจอบ่อยคือความสับสนที่เกิดขึ้น เวลามี Modal และปุ่ม Back ในมือถือ
เช่น เวลาเราจะค้นหาตั๋วเครื่องบิน มันเด้งเปิดมาเป็น modal เรากะว่าจะกลับไปหน้าเดิมไปแก้ไข แทนที่จะกดปุ่ม close เรากดปุ่ม back แล้วมันก็ย้อนกลับไปนู่น หน้าแรกตั้งแต่ search ใหม่

อันนี้ถ้าเราทำ animation ให้ดีตอนทำ modal ว่ามันมีอีกหน้าขึ้นมาซ้อนนะ ไม่ใช่อยู่หน้าเดิม จะทำให้ user เข้าใจเพิ่มมากขึ้น

5. แอนิเมชั่นช่วยสร้างประสบการณ์พิเศษใหม่ ๆ

แอนิเมชั่น data visualisation
แอนิเมชั่น data visualisation

ยกตัวอย่างจากภาพด้านบน การนำแอนิเมชั่นมาใช้กับการนำเสนอกราฟ, infographic, data visualization ทำให้แบรนด์ของเราน่าจดจำ ทำให้การทำภาพนำเสนอของเราเป็นที่น่าจดจำมากขึ้น ช่วยบอกเล่าเรื่องราวระหว่างการนำเสนอบน UI ของเราโดยที่ไม่ทำให้ user รู้สึกว่ายัดเยียดจนเกินไป

ขอบคุณภาพตัวอย่างจาก Google Material design


แล้วมาติดตามบทความใหม่ ๆ กับ Designil กันต่อในโอกาสหน้านะคะ :)

บทความที่เกี่ยวข้อง

Natk

Natk

UI Specialist ซิดนีย์ ออสเตรเลีย เป็นดีไซน์เนอร์มา 12 ปี | สนใจเรื่อง User Interface, User Experience, Accessibility, Education | ผู้ก่อตั้งกลุ่มเฟซบุ๊ก Tech ไทยในออสเตรเลีย | ผู้ดูแลเว็บไซต์ Designil
บทความทั้งหมด