เรื่องเล่าจาก Raycast ถึง Sonner: เมื่อแอนิเมชันไม่ใช่สิ่งที่ต้องมีเสมอไป

Emil Kowalski วิศวกรออกแบบจาก Linear ได้เขียนบทความที่ชวนให้เราตั้งคำถามว่า “เราจำเป็นต้องมีแอนิเมชันจริงหรือ?” เขาเสนอว่าแอนิเมชันที่ดีควรมี “เป้าหมายที่ชัดเจน” ไม่ใช่แค่เพื่อความสวยงาม แต่ต้องช่วยให้ผู้ใช้เข้าใจสิ่งที่เกิดขึ้นในอินเทอร์เฟซได้ดีขึ้น

ตัวอย่างเช่น แอนิเมชันที่ Linear ใช้เพื่ออธิบายฟีเจอร์ Product Intelligence ช่วยให้ผู้ใช้เข้าใจฟังก์ชันได้ทันทีจาก viewport แรก โดยไม่ต้องอ่านคำอธิบายยาว ๆ หรือคลิกเพิ่ม

อีกตัวอย่างคือ Sonner ซึ่งเป็น toast component ที่ใช้แอนิเมชันเพื่อให้การปรากฏและหายไปของข้อความแจ้งเตือนดูเป็นธรรมชาติ และสร้าง “spatial consistency” ที่ช่วยให้ผู้ใช้เข้าใจทิศทางของการ dismiss ได้ง่ายขึ้น

แต่ Emil ก็เตือนว่า แอนิเมชันที่ใช้บ่อยเกินไป เช่น morphing feedback หรือ hover effects ที่เกิดทุกครั้งที่ผู้ใช้เลื่อนเมาส์ อาจกลายเป็นสิ่งที่น่ารำคาญได้ หากผู้ใช้ต้องเจอวันละหลายร้อยครั้ง

เขายกตัวอย่าง Raycast ซึ่งเป็นแอปที่เขาใช้วันละหลายร้อยครั้ง—และไม่มีแอนิเมชันเลย เพราะเป้าหมายของผู้ใช้คือ “ทำงานให้เสร็จ” ไม่ใช่ “รู้สึกว้าว” ทุกครั้งที่เปิดเมนู

นอกจากนี้ ความเร็วของแอนิเมชันก็สำคัญมาก แอนิเมชันที่เร็วเกินไปอาจดูไม่เป็นธรรมชาติ แต่ถ้าช้าเกินไปก็จะทำให้รู้สึกว่าระบบตอบสนองช้า เช่น dropdown ที่ใช้เวลา 180ms จะรู้สึก responsive กว่าแบบ 400ms อย่างชัดเจน

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

https://emilkowal.ski/ui/you-dont-need-animations
🎙️ เรื่องเล่าจาก Raycast ถึง Sonner: เมื่อแอนิเมชันไม่ใช่สิ่งที่ต้องมีเสมอไป Emil Kowalski วิศวกรออกแบบจาก Linear ได้เขียนบทความที่ชวนให้เราตั้งคำถามว่า “เราจำเป็นต้องมีแอนิเมชันจริงหรือ?” เขาเสนอว่าแอนิเมชันที่ดีควรมี “เป้าหมายที่ชัดเจน” ไม่ใช่แค่เพื่อความสวยงาม แต่ต้องช่วยให้ผู้ใช้เข้าใจสิ่งที่เกิดขึ้นในอินเทอร์เฟซได้ดีขึ้น ตัวอย่างเช่น แอนิเมชันที่ Linear ใช้เพื่ออธิบายฟีเจอร์ Product Intelligence ช่วยให้ผู้ใช้เข้าใจฟังก์ชันได้ทันทีจาก viewport แรก โดยไม่ต้องอ่านคำอธิบายยาว ๆ หรือคลิกเพิ่ม อีกตัวอย่างคือ Sonner ซึ่งเป็น toast component ที่ใช้แอนิเมชันเพื่อให้การปรากฏและหายไปของข้อความแจ้งเตือนดูเป็นธรรมชาติ และสร้าง “spatial consistency” ที่ช่วยให้ผู้ใช้เข้าใจทิศทางของการ dismiss ได้ง่ายขึ้น แต่ Emil ก็เตือนว่า แอนิเมชันที่ใช้บ่อยเกินไป เช่น morphing feedback หรือ hover effects ที่เกิดทุกครั้งที่ผู้ใช้เลื่อนเมาส์ อาจกลายเป็นสิ่งที่น่ารำคาญได้ หากผู้ใช้ต้องเจอวันละหลายร้อยครั้ง เขายกตัวอย่าง Raycast ซึ่งเป็นแอปที่เขาใช้วันละหลายร้อยครั้ง—และไม่มีแอนิเมชันเลย เพราะเป้าหมายของผู้ใช้คือ “ทำงานให้เสร็จ” ไม่ใช่ “รู้สึกว้าว” ทุกครั้งที่เปิดเมนู นอกจากนี้ ความเร็วของแอนิเมชันก็สำคัญมาก แอนิเมชันที่เร็วเกินไปอาจดูไม่เป็นธรรมชาติ แต่ถ้าช้าเกินไปก็จะทำให้รู้สึกว่าระบบตอบสนองช้า เช่น dropdown ที่ใช้เวลา 180ms จะรู้สึก responsive กว่าแบบ 400ms อย่างชัดเจน สุดท้าย Emil สรุปว่า “บางครั้งแอนิเมชันที่ดีที่สุดคือไม่มีแอนิเมชันเลย” และการตัดสินใจว่าจะใช้หรือไม่ใช้ ต้องพิจารณาจากความถี่ในการใช้งาน เป้าหมายของผู้ใช้ และความเร็วของการตอบสนอง https://emilkowal.ski/ui/you-dont-need-animations
EMILKOWAL.SKI
You Don't Need Animations
Why you are animating more often than you should.
0 Comments 0 Shares 60 Views 0 Reviews