Natural Motion UI in Physical Models (Part 1 Introduction)
ในปี 2011 Al Gore — Our Choice แอพพลิเคชันบน iPad เนื้อหาเรียบเรียงโดยผู้แต่ง Al Gore และทีมพัฒนาแอพพลิเคชั่นจาก Push Pop Press แอพที่เคยได้รับรางรางวัล Apple Design Award 2011 และเป็น Interactive Book ที่ออกแบบการเคลื่อนไหวด้วยหลักฟิสิกส์ควบคู่กับการควบคุม UI บนจอ iPad โดยใช้นิ้วสัมผัสแบบมัลติทัชซึ่งดูแตกต่างไปจาก Interactive Book อื่นๆ ในช่วงเวลานั้น หลังจากที่ผมดาวน์โหลดมาใช้งาน (รองรับทั้ง iPad และ iPhone) ได้รับประสบการณ์การใช้งานที่ดีมากๆ UI เคลื่อนไหวได้ไหลลื่น โฟกัสเนื้อหาได้ดีและรู้สึกประทับใจในการใช้งาน จึงเกิดความสนใจและพยายามศึกษาเพิ่มเติมเกี่ยวกับความลับเรื่องนี้
ข้อดีของการนำหลักฟิสิกส์มาใช้กับการออกแบบ
ผมค่อนข้างแปลกใจกับ Interaction ที่เสมือนจริงเมื่อได้ลองเล่นแอพที่นำหลักการฟิสิกส์นี้ไปใช้ในงานออกแบบ หากเริ่มต้นกับคำถามว่าทำไมถึงต้องนำมาใช้ คำตอบเบื้องต้นที่เป็นเหตุผลเพื่อรองรับคำถามนี้ได้จะมีดังนี้
- สร้างสมดุลระหว่างฟังก์ชันการใช้งานและอารมณ์ความพึงพอใจ
- ให้ความรู้สึกชัดเจนและดูเสมือนจริง
- ทำให้การเคลื่อนไหวของ UI ดูลื่นไหล เป็นธรรมชาติ
- ทำให้ User มีความคุ้นชิน รับรู้ได้เร็ว
“โดยที่เป้าหมายของบทความนี้คือพยายามนำหลักฟิสิกส์มาใช้เพื่อออกแบบแอพพลิเคชั่นให้ดูเสมือนจริง ดูเป็นธรรมชาติและเข้ากับประสบการณ์การใช้งานของคนเรามากที่สุด”
นำมาใช้อย่างไร ?
คุณผู้อ่านเคยศึกษาและมีประสบการณ์เกี่ยวกับวิชาฟิสิกส์มาแล้ว ผมไม่ขอลงลึกถึงที่มาแบบละเอียดหรือเล่าถึงสูตรสมการที่ดูซับซ้อน แต่จะอธิบายพื้นฐานฟิสิกส์ที่นำมาใช้กับงานออกแบบ UI ให้คุณผู้อ่านเข้าใจง่ายๆ
“มอง UI ให้เป็นวัตถุชิ้นหนึ่งที่เราจับต้องได้”
เมื่อเราสัมผัสชิ้นส่วนของ UI แต่ละชิ้น จะมีการแสดงโต้ตอบกลับ ให้เราเข้าใจว่ามันคือวัตถุชนิดหนึ่ง อาจเป็นวัตถุเหมือนแผ่นกระจกที่มีคุณสมบัติคล้ายๆ กัน เช่น มีมวล (Mass), น้ำหนัก (Weight), ขนาด (Size), อัตราส่วน (Scale) ฯลฯ เหมือนกับคุณสมบัติฟิสิกส์กลศาสตร์ที่มีอยู่ในวัตถุจริง
Basic Principle of Physics in The Interface
มวล (Mass)
มวลคือคุณสมบัติอย่างหนึ่งของวัตถุที่บอกความต้านทานการเคลื่อนที่เมื่อมีแรงมากระทำ เช่น มวลน้อยเคลื่อนที่ได้เร็ว มวลมากเคลื่อนที่ได้ไกล เป็นต้น
ความเร็ว (Velocity)
ความเร็วคืออัตราการเปลี่ยนแปลงตำแหน่งของมวลต่อหน่วยเวลา
แรงโน้มถ่วง (Gravity)
แรงโน้มถ่วงทำให้วัตถุมีน้ำหนัก(Weight) และทำให้วัตถุร่วงหล่นบนพื้น
ความเฉื่อย (Inertia)
ความเฉื่อยคือสภาพของวัตถุถูกเปลี่ยนแปลงให้เคลื่อนที่ช้าลงหรือหยุดเคลื่อนที่
สปริง (Spring)
สปริงคือสภาพของวัตถุที่เมื่อถูกแรงกระทำแล้วจะเคลื่อนที่ไป-กลับ จนหยุดนิ่งที่ตำแหน่งเดิม
แรงเสียดทาน (Friction)
แรงเสียดทานคือแรงที่พยายามต้านวัตถุให้หยุดนิ่ง ไม่ให้เคลื่อนที่
แรงดึง (Tension)
แรงที่ดึงวัตถุให้แยกออกจากกัน (ใน UI จะเป็นค่าดึงสปริง)
โมเมนตัม (Momentum)
โมเมนตัมเป็นความสามารถในการเคลื่อนที่ของวัตถุที่ขึ้นกับมวล (Mass) และความเร็ว (Velocity) มีตัวอย่างง่ายๆ ในชีวิตจริงมากมายที่อธิบายว่าโมเมนตัมเป็นอย่างไร เช่น เปรียบเทียบรถยนต์ชนกับรถบรรทุก รถยนต์จะเสียหายยับเยินมากที่สุด เพราะรถยนต์มีน้ำหนักเบากว่า มีมวลน้อยกว่ารถบรรทุก จึงอธิบายได้ว่ารถยนต์มีโมเมนตัมน้อยกว่าโมเมนตัมของรถบรรทุก เป็นต้น ส่วนโมเมนตัมที่นำมาประยุกต์ใช้กับ UI นั้นเราจะเห็นในเกมทั่วไป เช่น เกม Snooker เราอยากแทงลูกสีขาวให้กระทบกับลูกสีแดงก็ต้องใช้โมเมนตัมเยอะ (เล็งระยะไม้ให้ไกลขึ้นหรือออกแรงเยอะขึ้น), เกมรถแข่งทั่วไป (ถ้าเลือกขับรถบรรทุกจะควบคุมยากกว่าเลือกรถ Go Cart คันเล็ก) หรือเกมคลาสสิคที่รู้จักกันดีเช่นเกม Mario ตอนที่เรากำลังบังคับให้มาริโอ้เริ่มวิ่งเร็วและเบรคกระทันหันให้หยุดกับที่ ให้ลองสังเกตเปรียบเทียบมาริโอ้ระหว่างตัวเล็กกับตัวใหญ่ดู (มาริโอ้ตัวใหญ่บังคับง่ายกว่ามาริโอ้ตัวเล็ก)
ประยุกต์ใช้กับ UI อย่างไรบ้าง ?
Spring Animation
Animation ชนิดนี้เรามักจะพบเห็นได้บ่อยใน UI ของเกม ในแอพหรือเว็บไซต์ทั่วไป หัวใจหลักของ Spring Animation ที่ช่วยให้ UI เคลื่อนไหวได้ไหลลื่น คือค่าคงที่สปริง (ค่า k หรือ Stiffness) ค่านี้มีผลทำให้วัตถุถูกดึงกลับช้าหรือเร็ว และค่าการแกว่งของสปริง (ค่า Damping) มีผลทำให้วัตถุสั่นแรงหรือเบา
ตัวอย่างเช่นภาพทั้งสองที่แสดงอยู่ด้านล่างนี้เป็นการเปรียบเทียบกันระหว่างปุ่มที่ใช้เทคนิค CSS Transition ซึ่งเป็น Animation แบบทั่วไปและปุ่มที่ใช้เทคนิค Spring Animation
ปุ่มสีส้ม “CSS Button” ที่ใช้เทคนิค CSS Transition เราสามารถปรับ Animation ทำให้ปุ่มหดหรือขยายตามช่วงเวลาด้วยค่า Duration มีหน่วยเวลาเป็น Milliseconds หรือ ms สังเกตได้ว่ายิ่งปรับค่า Duration มากขึ้น ปุ่มก็แสดง Animation ช้าลง
ส่วนปุ่มสีเขียว “Spring Button” ที่ใช้เทคนิค Spring Animation เราสามารถปรับค่า Spring Constant และค่า Damping สังเกตได้ว่า ค่า Spring ยิ่งน้อย ยิ่งหดเร็ว ส่วนค่า Damping ยิ่งน้อย ยิ่งสั่นแรง
Momentum
การใช้เทคนิค Momentum กับจังหวะการเปลี่ยนหน้า (Transition) ก็ช่วยดึงดูดให้ UI น่าใช้งาน ดูสนุกและเป็นมิตรมากขึ้น ตัวอย่างเช่นภาพด้านล่างทั้งสองภาพนี้คือ UI ของ Android Wear ที่ต้องการเปรียบเทียบกันระหว่าง UI ของ Android Wear แบบปกติและแบบที่เพิ่มเทคนิค Momentum เข้าไป
UI ของ Android Wear ใช้เทคนิค CSS Transition แบบปกติ เมื่อสังเกตดูการเคลื่อนที่ของหน้าเมนู (หน้าแสดงรายการ Show alarms, Settings และ Start) เราจะพบว่า ค่า Duration ยิ่งมาก หน้าเมนูยิ่งเคลื่อนที่เร็วขึ้น
UI ของ Android Wear ที่ใช้เทคนิค Momentum โดยค่าความเร่ง (Acceleration) ช่วยทำให้หน้าเมนูเคลื่อนที่แบบมีความเร่ง ค่า Spring Constant ช่วยทำให้หน้าเมนูถูกดึงในจังหวะที่ใช้นิ้วปัดจนสุดหน้าจอด้วยแรงสปริง และค่า Damping ที่ทำให้หน้าเมนูสั่นไปมา หากเราปรับทั้งสามค่านี้ให้สมดุล (ใน Simulation นี้ เราปรับค่า Acceleration, Spring Constant และ Damping ให้มีค่าเท่ากับ 4,000 400 และ 40 ตามลำดับ) แล้วทดสอบอีกครั้ง เราจะรู้สึกว่า UI ดูเคลื่อนไหวเป็นธรรมชาติมากกว่า
Momentum & Gravity
ตัวอย่างหน้า Lockscreen Windows 8 ที่ประยุกต์หลักการโมเมนตัมให้เข้ากับการเปลี่ยนหน้าจอ (Transition) โดยใช้ความเร่ง (Acceleration) ที่ทำให้เลื่อนลงแบบมีแรงโน้มถ่วง (Gravity) และเด้งขึ้นลงด้วยแรงสะท้อน (Rebound) ผู้ใช้จะรู้สึกสนุกมากขึ้นเมื่อปัดหน้า Lockscreen ขึ้นลงด้วยนิ้ว ยิ่งใช้แรงปัดมากขึ้น หน้า Lockscreen ก็ยิ่งเลื่อนเร็วขึ้น สะท้อนกับขอบล่างของจอแรงขึ้น
Natural Scrolling
UI ที่ให้ความรู้สึกคล้ายกับการใช้นิ้วปาดแผ่นกระดาษบนโต๊ะให้ไถลไปข้างหน้าแล้วหยุดด้วยแรงต้านการเคลื่อนที่ (Friction) และมีการเด้งกลับแบบสปริงเมื่อใช้นิ้วปาดจนสุดรายการ (ด้วยค่า Spring Constant และ Damping) นี่คือจุดเด่นของ UI Scrolling ที่เรามักคุ้นชินเมื่อได้ใช้ผลิตภัณฑ์ของ Apple
Slider
ภาพด้านล่างทั้งสองภาพนี้เป็นการเปรียบเทียบกันระหว่าง Slider UI แบบทั่วไปกับ Slider UI ที่ประยุกต์ด้วยแรงต้านการเคลื่อนที่ (Friction) ทำให้เราพบว่าแรง Friction ทำให้ปุ่มเคลื่อนที่ดูเป็นธรรมชาติมากกว่า
Dialog Motion
Dialog หรือ Pop up ทั่วไปนอกจากใช้ Spring Animation แล้ว หากเพิ่มลักษณะการหมุนเข้าไปด้วยก็จะทำให้ Motion เคลื่อนไหวได้ดีขึ้น เป็นธรรมชาติมากขึ้น
Photo Viewer with Gyroscope
ใช้ Gyro sensor ของมาร์ทโฟนควบคุมความเร็วและแรงโน้มถ่วง เมื่อเอียงเครื่องไปมา ทำให้ดูรูปภาพขนาดกว้างมากๆ ได้ดีขึ้น
สรุป
มีกฏฟิสิกส์มากมายที่อธิบายความจริงเกี่ยวกับธรรมชาติให้เราเรียนรู้ ทำความเข้าใจ และนำมาประยุกต์ใช้กับงานออกแบบที่ดีได้อย่างหลากหลาย หลักการออกแบบ Natural Motion UI ยังคงเป็นความลับและไม่ใช่เรื่องใหม่ และ UI ที่มี User Experience ที่ดีส่วนหนึ่งมาจากการออกแบบ Motion User Interface ที่ดีด้วยเช่นกัน
จบ Part 1 แบบ Introduction แล้วครับ สำหรับ Simulation และภาพประกอบที่นำมาอธิบายในบทความนี้เป็นเพียงตัวอย่างบางส่วน หากคุณผู้อ่านมีความสนใจเป็นพิเศษเกี่ยวกับ Motion Design UI สามารถติดตามแหล่งตัวอย่างเพิ่มเติมได้จากลิ้งด้านล่าง และใน Part ต่อไปจะพูดถึงขั้นตอนการออกแบบ UI ที่ใช้หลักการฟิสิกส์นี้ก่อนที่จะนำไป Code เพื่อใช้งานจริง
