นิ่งสงบ ไม่ได้สยบ User เสมอไป กระบวนท่าพริ้วไหวมัดใจ User

flat-design
credit : rikitanone

การใส่ animation หรือ motion ต่างๆ ผสมผสานกับ flat design ที่เรียบง่าย เป็นแนวทางการออกแบบ UI ที่กำลังได้รับความนิยมเป็นอย่างมากในปัจจุบัน เพื่อช่วยให้ User ไม่รู้สึกเบื่อกับการใช้แอปพลิเคชันแบบเดิมๆ

ในบทความนี้ เราจะมาดูกันว่า Animation เหล่านั้นมีกี่ประเภทและประกอบไปด้วยองค์ประกอบอะไรบ้าง

1. Hero Animations

splash-screen
Splash Screen (credit: cuberto)

Hero Animations ให้แปลตรงตัวเลยก็เหมือนกับ Animation หลัก ที่เป็นเสมือนตัวสร้างประสบการณ์ระหว่างแอปพลิเคชันกับ User เปรียบเสมือน Branding ของแอปเลยก็ว่าได้

flight-attendant

ลองคิดว่าคุณกำลังนั่งเครื่องบิน แล้วไม่มี Safety Demonstration Video ไม่มีคนมาอ่านหรือทำท่าอะไรให้ดู มีแต่แผ่นพับเสียบไว้ให้เราอ่านเราก็คงไม่ได้ให้ความสนใจอะไรกับความปลอดภัยมากนัก แต่ถ้ามองในมุมกลับกันการที่มีคนมาทำท่าสนุกๆ หรือมีวิดีโอสาธิตที่น่าตื่นเต้นก็จะทำให้ลูกค้าเกิดประสบการณ์ร่วมที่ดีตั้งแต่เครื่องยังไม่ออกบิน อีกทั้งยังสร้าง Brand Image ให้กับสายการบินได้อีกด้วย

การที่ User กำลังรอ Loading จะเข้าไปใช้แอปพลิเคชัน Animation ในหน้า Splash Screen ก็สามารถสร้างประสบการณ์แรกเข้าที่น่าตื่นตาตื่นใจให้กับ User ได้

2. Micro Interactions

 

tcaster-loading-animation
credit : TCASter by Skooldio

Micro Interactions เป็นส่วนประกอบเล็กๆ ที่ทำให้แอปไม่แข็งทื่อ สร้างความสนุกสนานให้กับการใช้งาน

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

Micro Interactions สามารถเป็นได้ตั้งแต่การรอโหลดในแอปพลิเคชัน สติกเกอร์ที่ขยับได้ (สวัสดีวันจันทร์) ซึ่งเจ้าส่วนประกอบเล็กๆ น้อยๆ พวกนี้แหละที่ทำให้แอปดูมีชีวิต มีสีสันและมี human touch มากขึ้น

3. Visual Feedback

visual-feedback
credit: zeeyoung

Visual Feedback เป็นการตอบสนองจากการกด ปัด ลาก ดึงหรืออะไรก็ตามที่ User ทำกับแอปของเรา แล้ว Interface มีการตอบสนองกลับ เช่น ปุ่มเปลี่ยนสี ไอคอนเปลี่ยนขนาด หรือหน้าจอสไลด์เข้ามา เป็นต้น

ลองนึกว่าเรากดรีโมทเรียกแอร์โฮสเตสสาวสวย แต่เราไม่เห็นไฟบนหัวสว่างขึ้น เราก็คงจะไม่รู้ว่าตัวเองกดเรียกไปแล้วหรือยัง ควรต้องกดซ้ำอีกทีหรือไม่

ตัวอย่างของ Visual Feedback แบบต่างๆ

visualfeedback-example
การเคลื่อนไหวที่ตอบสนองการเปลี่ยนผ่านระหว่างหน้าต่างๆ ในแอป (credit: Christophekerebel)
animated-component-prioritized
การเคลื่อนไหวของส่วนประกอบต่างๆ ตามลำดับความสำคัญ (credit : Vitaly Rubtsov)
play-pause-animated
การเปลี่ยนแปลงฟังก์ชันของปุ่มหลังถูกกด เช่น ปุ่ม Play กดแล้วกลายเป็น Pause (credit : tamaskojo)

ไม่ใช่แค่เท่ แต่ feel good

การทำกราฟิกที่เคลื่อนไหวไม่ใช่แค่เพื่อความสนุกหรือความเท่ แต่เป็นการสร้างประสบการณ์ร่วมที่ดีให้กับผู้ใช้

อ้างอิง