in Uncategorized

UI Animation ที่ผมรู้จัก

พอดีได้มีโอกาสเข้าชม Session When should you use UI Animation
โดยคุณ Apirak Panatkool จัดโดย Bangkok ACM Sigchi Chapter
ก็เลยมาสรุปที่สิ่งที่ผมได้รับดังนี้ครับ

UI Animation นั้นมีความดึงดูด,น่าสนใจ แต่ในขณะเดียวกัน มันก็มี cost ที่ต้องจ่ายแพงมาก
ทั้งในมิติของตัวเงินที่ต้องลงไป และเวลาที่ต้องใช้ นับตั้งแต่การออกแบบ พัฒนา สู่การทดสอบ
จึงต้องพิจารณาถึง ความคุ้มค่า ในการตัดสินใจเลือกด้วย

UI Animation ที่คุ้มค่าต่อการทำ
1. ต้องให้ Feedback กับผู้ใช้งาน กดไปแล้วต้องสื่อสารกลับมาว่าตัวระบบรับรู้แล้วหรือยัง เช่น เลื่อน เคลื่อน ย้าย ฯลฯ โดยความเร็วในระดับพอดีๆที่ใช่กันอยู่ทั่วไป คือ 300 มิลลิวินาที

2. Call to Action คือการเล่น Animation เพื่อบอกตำแหน่งว่า ให้ทำอะไรที่ตรงไหน เช่น Press to Install, Swipe Up to Unlock โดยมีจุดที่ควรระวังคือ ใน Screen หนึ่งๆ ไม่ควรมี Call to Action มากจนเกินไป เพราะสร้างความสับสนให้กับผู้ใช้งานได้

3. Silent Communication คือการบอกผู้ใช้งานโดยไม่บอก เช่น สั่นเมื่อผู้ใช้งานใส่ข้อมูลผิดพลาด, ตัวหมุนๆ เพื่อสื่อสารว่ากำลังนำเข้าข้อมูลอยู่, การทำ Screen Transition เพื่อบอกว่าผู้ใช้งานอยู่ใน State ที่ต่างออกไปจากเดิมแล้ว

4. Seductive UI คือการสร้างความรู้สึกดีมีเสน่ห์ให้กับผู้ใช้งาน เช่นเมื่อทำตาม Goal ได้ จะได้รับ Badge ซึ่ง Animation ในส่วนนี้สำหรับบางบริบท อาจจะมีการละเว้นจาก ค่าความเร็ว 300 มิลลิวินาที ที่กล่าวข้างต้นได้ เช่น การเล่น Animation ที่ให้ข้อมูลเกี่ยวกับ Reward ที่อาจจะใช้เวลาถึง 500 มิลลิวินาที เพราะอยากให้ผู้ใช้งานได้ดูจริงๆ

5. Brainless คือการทำ Animation ที่ผู้ใช้งานเห็นแล้วไม่ต้องเหนื่อยคิดตาม ง่ายในการเข้าใจไปเอง เช่น Screen Transition แบบ General to Detail ที่เคลื่อนเข้ามาทางไหน เมื่อทำงานจบ จะเคลื่อนออกไปทางนั้น, Action จากการกดปุ่มรูป Add หรือ ปุ่มรูป Profile ที่ Panel ของข้อมูลจะขึ้นมาจากด้านล่างสู่ด้านบน
ซึ่ง Flow การทำงานในลักษณะนี้ ควรทำให้สอดคล้องกันทั้งระบบ (Consistency)

Write a Comment

Comment