High-Fidelity Prototype แลกกันหมัดต่อหมัด กับ 12 Principles UX Motion
ปฏิสัมพันธ์ คือ การกระทำหรือการประกอบกิจกรรมระหว่างสิ่งสองสิ่งหรือสิ่งหลายสิ่งเพื่อให้ได้มาซึ่งผลลัพธ์ เช่น การปฏิสัมพันธ์ระหว่างระบบกับผู้ใช้ โดยปฏิสัมพันธ์ดังกล่าวหากประสงค์ให้ได้มาซึ่งประสิทธิภาพที่ดีต้องมีการศึกษาเกี่ยวกับความต้องการของผู้ใช้ที่มีต่อระบบ หรือต่อโปรแกรมคอมพิวเตอร์นั้น ๆ ก่อน ตัวอย่างเช่น การศึกษาเกี่ยวกับ Human-Computer Interaction (HCI) , User Interface , Graphical User Interface (GUI) เหล่านี้เป็นต้น
สวัสดีครับท่านสมาชิกผู้แทนนักออกแบบทุกท่าน หลังจากที่ไม่ได้เขียนบทความมานานพอสมควร ถึงเวลาแล้วที่จะมาเล่าการค้นคว้าข้อมูลพัฒนางานออกแบบ และบันทึกมัน เนื่องจากงานในฝั่ง Interaction ได้ร่อนเร่ใช้โปรแกรมใหม่ ๆ ที่ออกมาเป็นระยะ สำหรับ Interaction Designer ที่ผุดขึ้นมาเป็นดอกเห็ดจนศึกษากันไม่ทัน โปรแกรมไหนไม่แข็งแกร่งจริงก็ดับสิ้นกันไป ส่วนตัวไหนที่ยังอยู่ในกระแส และมีฐานผู้ใช้อยู่ก็พัฒนาระบบมามัดใจผู้ใช้งานของตัวเองกัน จากการทดลองใช้งานที่ผ่านมา ไม่ว่าจะเป็น Origami, Principle, Invision Studio, Flinto, Photopie, Framer ทั้งหมดล้วนเป็น โปรแกรมสำหรับสร้าง High-Fidelity Prototype อาจจะมีเยอะกว่านี้ แต่ยังไม่ได้นับรวมเข้าไป เช่น Adobe After Effects และอื่น ๆ เหตุเพราะเป้าหมายของโปรแกรมไม่ได้ถูกออกแบบมาเพื่อทำ Interaction โดยเฉพาะเจาะจง อย่างที่อธิบายไปข้างต้นว่าโปรแกรมทั้งหมด ก็ยังไม่ถูกใจซะทีเดียว และยังไม่ได้ปักธงเพื่อถูกนำมาเป็นโปรแกรมหลักในการทำงาน จึงเป็นเหตุผลว่า ถึงเวลาแล้วที่เราจะต้องมีตัวหลักที่ใช้ในการทำงานที่ชัดเจน เพื่อสร้างกระบวนการออกแบบหรือ Design System เพื่อส่งต่องานให้กับทีม ไม่ว่าจะเป็น Design Team หรือ Developer Team ก็ตาม ถ้ายังใช้เร่ร่อนไปเรื่อย ๆ เราคงจะทำกระบวนการออกแบบ และระบบการส่งต่องานอย่างที่ว่าไปข้างต้นไม่ได้
High-Fidelity Prototype คืออะไร
เราจะมีวิธีเลือกโปรแกรมที่ดีอย่างไร ?
ผมคิดว่าแต่ละคนคงจะมีวิธีที่แตกต่างกันออกไป แต่สิ่งที่คิดว่าเราควรจะดูเป็นอันดับแรกคือ เรื่องความเหมาะสมสำหรับคนทำงาน และองค์กรเป็นหลัก ไม่ว่าจะเป็น
ความสามารถของโปรแกรม
เราคงไม่อยากเจอปัญหาที่อยากจะทำแอคชั่นอะไรบางอย่าง แต่โปรแกรมที่เราใช้อยู่มันไม่ตอบโจทย์ ทำให้เราจำเป็นต้องไปใช้โปรแกรมอีกตัวใช่ไหมล่ะครับ (รู้น่าาาา เป็นกันหมดแหละ) เป็นถึงโปรแกรมทำ Interaction มันก็ต้องทำได้ทุกท่วงท่าลีลามังกร ถ้าโปรแกรมตัวไหนทำได้ครบทุกแอคชั่นก็สมควรจะถูกใส่เพิ่มลงไปในรายชื่อโปรแกรมที่ควรใช้ Check ✅
โครงสร้างการใช้งานของโปรแกรม
รูปแบบระบบของโปรแกรมเป็นอย่างไร สร้าง Multiple Action ได้ใน Object เดียวหรือเปล่า สามารถสร้างไฟล์ Component แยกแล้วนำไปใช้ซ้ำได้หรือเปล่า การทำงานทั้งหมดนี้มันจะเกี่ยวโยงไปถึงเรื่องเวลาในการทำงานของเราด้วย คงปฎิเสธไม่ได้ว่าเรายังคงต้องทำงานแข่งกับเวลาที่มีจำกัด “งานส่งวันศุกร์นะทันมั้ย...” จ๋าจ้ะ 😆 เพราะฉะนั้นโปรแกรมไหนโครงสร้างง่ายต่อการทำงานและแก้ไข ก็เพิ่มลงในรายชื่อได้เลย Check ✅
ระบบการส่งต่องาน
ผมเคยทดลองโปรแกรมโดยที่ไม่ได้สนใจว่าโปรแกรมตัวนั้น Export หรือ Share ให้คนอื่นอย่างไร (คึกเกิ๊น อยากลองเล่นของใหม่) สุดท้ายการ Export งานชิ้นนั้นมีปัญหา กระตุกมาก ไม่มีความ Smooth ใด ๆ ในงาน แจ้งไปยังผู้พัฒนาแล้วเขาบอกว่า เดี๋ยวเราจะทำการแก้ไขให้ในเวอร์ชั่นต่อไป ซึ่งไม่รู้เมื่อไร ทำให้งานนั้นต้องถูกทำซ้ำใหม่ในโปรแกรมอื่น Bad day มาก 😫 ที่เล่าประสบการณ์ไปข้างต้นไม่ได้แปลว่าให้ดูแต่เรื่องการ Export และ Share เท่านั้น ถ้าโปรแกรมนั้นมีความสามารถในการส่งต่องานให้แก่ Dev Team ได้ หรือตรวจสอบความเรียบร้อยบน Device จริงได้ จะเป็นการดีกว่าแน่นอน ถ้าระบบการส่งต่องานมันโอเคสำหรับเรา ก็ Check ✅
การอัพเดทของโปรแกรม
เรื่องนี้ผมเชื่อว่าหลายคนไม่ได้ใส่ใจกับมันเท่าไรตอนจะเลือกโปรแกรมอะไรสักตัวมาใช้งาน ร้อยทั้งร้อยจะดูแค่ ทำงานอย่างที่เราต้องการได้หรือเปล่ากับราคา สุดท้ายเราจะมานั่งบ่นระหว่างทำงานว่า “โหลด โปรเจ็กไม่ขึ้นนน อ่าาาารรราร” “ค้างอีกละ&#@!” “บัคนี้มึงยังไม่แก้อีกหรอ…นานแล้วนะ” (มโนว่าคนอื่นบ่นเหมือนกัน)
เพราะฉะนั้น Community และการอัพเดทสำคัญมาก สำคัญยังไง? เช่น เราเจอข้อบกพร่องของโปรแกรมเราแจ้งไป มีการตอบรับเร็วหรือเปล่า ทีมพัฒนามีการบอกแผนการพัฒนาโปรแกรมกับผู้ใช้งานหรือเปล่า มีการปรับปรุงรับ Feedback จากผู้ใช้งานเพื่อพัฒนาให้ดีขึ้นหรือเปล่า สุดท้ายการอัพเดทแต่ละครั้งมีความเสถียรภาพหรือเปล่า ถ้าทุกอย่างเป็นไปได้ด้วยดี เราก็ Check เข้า List ✅
ราคา (เรื่องนี้ไม่พูด คงไม่ได้อะนะ)
โปรแกรมแต่ละตัวก็มีราคาและ License ต่างกัน บางเจ้าเก็บเป็นปี เป็นเดือน หรือราคาขึ้นอยู่กับจำนวนผู้ใช้ เพราะฉะนั้นเราควรเลือกโปรแกรมที่เข้ากับองค์กรของเรา ใช้งานบ่อยแค่ไหน มีคนใช้ปัจจุบันกี่คน ถ้าราคาคุ้มค่าแก่การใช้งานก็ Check ✅
ผู้ผ่านเข้ารอบ
ผู้ผ่านเข้ารอบคุณสมบัติ เลือกมาดวลกัน 🥊
โปรแกรมที่ผมจะมาทดสอบมีทั้งหมด 3 ตัว จะขอสรุปเป็นความคิดเห็นส่วนตัวสั้น ๆ ไม่งั้นยาวแน่นวล
Principle — ส่วนตัวใช้งานมานานแล้ว ประทับใจการอัพเดทและแก้ไขบัค แจ้งทีมซัพพอร์ตดี ถามไวตอบไว ชอบที่สุดเลยคือไฟล์ .prd (คล้าย .psd, .ai) สามารถเป็น Component เพื่อนำไป Combine กับอีกไฟล์ได้ และจ่ายแค่ครั้งเดียวใช้ได้ตลอดชีวี้ดดด แต่คิดระยะอัพเดทให้ 1 ปี
InVision Studio — กำลังมาแรง ฐาน Community คนใช้ดี พัฒนาอัพเดทต่อเนื่อง แถมยังมีทั้งระบบปฎิบัติการ Window และ MacOS
Protopie — ค้นหาข้อมูลจากหลายเว็บไซต์ เขาบอกว่าใครทำงานสายนี้เป็นหลัก ต้องใช้โปรแกรมตัวนี้เลย ส่วนตัวเคยลองแล้วตอนโปรแกรมออกใหม่ ๆ ยังทำอะไรไม่ค่อยได้ ตอนนี้กลับไปดู.. โอ้โห! น่าเล่น และยัง Import File จาก Figma ได้ด้วย
โจทย์ที่จะเอามาวัดความสามารถ
โดยโจทย์ที่จะเอามาวัดความสามารถคือ 12 Principles UX Motion โดยความรู้ชุดนี้มาจาก Creating Usability with Motion: The UX in Motion Manifesto (การสร้างพฤติกรรมการใช้งานกับการเคลื่อนไหว) จะสรุปให้ฟังสั้น ๆ ว่า Issara Willenskomer เขาบอกว่า จากการที่เขาไปโค้ชมามากกว่า 40 เมือง คำถามที่มักจะเจอเหมือนกันคือ
“เหล่า UX/UI เอ๋ย เราจะรู้ได้ยังไงว่าเราควรทำ Motion เพื่อซัพพอร์ตการใช้งานของผู้ใช้งานเมื่อไร และช่วงเวลาไหนดี?” งานส่วนนี้มักจะถูกมองข้ามในการนำไปพัฒนาจริง และมักจะเป็นเรื่องสุดท้ายของกระบวนการนำไปพัฒนาด้วย และในที่สุดก็ข้ามไปเลยจ้าาาา ไม่ได้ทำ.. เพราะ UI Interaction สำหรับนักออกแบบเป็นเสมือนการนำเสนอ หรือสอนการใช้งานให้ผู้ใช้งานเรียนรู้ระบบด้วยตัวเอง สร้างความประทับใจ และมีความสุขเมื่อใช้งาน แน่นอนสำหรับธุรกิจ มันไม่ได้สร้างมูลค่ามากนัก…. ซึ่งแน่นอนว่า UI Motion หลายคนคิดว่าเป็นเพียงอีกระดับขั้นของงานออกแบบ แต่ถ้ามอง Fact มันคือการแสดงพฤติกรรมการเคลื่อนไหวของวัตถุนั้น ๆ โดยเขาแบ่งเป็น 2 ประเภทหลัก ๆ คือ
Realtime Interactions (ทำงานทันทีเมื่อมีปฎิสัมพันธ์)— มันคือการนำทางโดยผู้ใช้งาน เมื่อผู้ใช้งานมีปฎิสัมพันธ์กับวัตถุ จะทำงานทันทีโดยมีผู้ใช้เป็นคนกำหนด
Non-Realtime Interactions (ทำงานหลังจากมีปฎิสัมพันธ์)— การทำงานจะเกิดขึ้นหลังจากมีการปฎิสัมพันธ์กับวัตถุ และวัตถุจะทำการแสดงผลจนกว่าเสร็จสิ้นกระบวนการ
โดยหลักการนี้จะนำเราเข้าสู่ ผลสรุปขององค์ความรู้ 12 Principles UX Motion
“ไหนบอกสรุปสั้นๆ 😅 ” ไปอ่านเองได้ >> อ่านเพิ่มเติม
เริ่มทำโจทย์ 12 Principles UX Motion
1. Easing
หลักการเคลื่อนไหวโดยธรรมชาติ เป็นไปตามการใช้งานปกติในชีวิตประจำวัน มันคงไม่มีวัตถุชิ้นไหนในโลกแห่งความเป็นจริงที่เคลื่อนที่แล้วหยุดนิ่งลงโดยไม่ไหวติงไม่มีแรงต้านหรือแรงผลักใด ๆ เพราะฉะนั้นเราจะรู้สึกได้จากความผิดปกติของการเคลื่อนไหวนั้น ๆ ทันที โดยหลักการนี้ Disney เรียกมันว่า ‘Slow In and Slow Out.’
เนื่องจากมันเป็น Main Principle ที่โปรแกรมไหนก็สามารถทำได้อยู่แล้ว ขอสรุปรวม ๆ ว่าหลังจากใช้งาน Principle กับ Invision Studio คะแนนพึงพอใจทำออกมาได้พอ ๆ กัน สามารถทำ Ease In ได้เหมือนกัน ต่างกันแค่ค่าเริ่มต้น แต่พอ Export ออกมาแล้วเหมือน Invision Smooth สุดยังไงไม่รู้แฮะ หรือมโนไปเอง😑 ส่วน Protopie ใช้ขั้นตอนในการทำเยอะสุด ไม่ได้แปลว่าทำยากนะ แต่ใช้เวลาในการทำงานนานกว่า
2. Offset & Delay
หรือชื่อเก่าคือ ‘Follow Through and Overlapping Action’ เป็นหนึ่งใน 12 Basic Principles of Animation เป็นหลักการที่ Disney เขียนไว้อีกเช่นเคยว่า “แสดงการเคลื่อนไหวไปในทิศทางเดียวกัน แต่จุดประสงค์ในการแสดงต่างออกไป”
ผลที่ได้จะทำให้ Animation ออกมาน่าสนใจขึ้น นั่นแปลว่าถ้าเรานำมาใช้กับ UI ละก็ Experience หรือประสบการณ์ของผู้ใช้ก็ต้องดีขึ้นเหมือนกัน 👍 ในทางด้านของ UI ถูกเรียกว่า Offset & Delay มันคือการแสดงผลล่วงหน้าหรือช้ากว่าปกติ ในรูปแบบการแสดงเดียวกัน ถ้าเป็น UI Interaction ในส่วนนี้ผมนึกถึงการกดปุ่มเมนูอะไรสักอย่าง แล้วมีเมนูเด้งออกมา เมนูอันสุดท้ายจะตั้งค่า Offset Delay ไว้ ให้มีความน่าสนใจเพิ่มขึ้น
เดี๋ยวจะลองใช้ วิธีนี้ทำกับโปรแกรมทั้งสามเพื่อทดสอบละกัน
โปรแกรมทั้งสามทำได้อย่างไม่มีปัญหาใด ๆ Principle กับ Invision ใช้เวลาพอ ๆ กันแต่ Protopie ค่อนข้างทำหลาย Step เลย ทำให้ใช้เวลานานสุดในการทำ แต่คิดว่าการระบบมันน่าสนใจหากมีการแก้ไขภายหลัง หรือต้อง Interaction แบบที่ต้องใช้แอคชั่นเยอะ ๆ ใน Object เดียวกันอาจจะดีในอนาคต ต้องลองกันไปก่อน แต่โดยรวมแล้วยังไม่มีอันไหนโดดเด่นประทับใจเป็นพิเศษ ศีลเสมอกันดี 😆
3. Parenting
ผมขอเรียกว่าลักษณะการปรับค่าเพื่ออ้างอิงถึงการปรับเปลี่ยนของวัตถุอื่น ในการนำไปใช้งานกับ UI มีผลประโยชน์อย่างมากกับการใช้งานทุกประเภท เช่น แอคชั่นแล้ว ให้ตำแหน่งมันเปลี่ยน, ให้มันหายไปจากจอ, ให้เปลี่ยนค่า , ให้ขยาย หรือเล็กลง, ให้หมุน และอื่น ๆ ในส่วนของ Parenting ผมอยากจะลองทำแอคชั่น Shortcut Slide Bar ให้การเลื่อนเป็นการเปลี่ยน Position คล้ายการเลื่อน List ใน Contact แล้วกัน
Principle — ทำออกมาได้ดีแต่มีข้อเสียคือ มันบังคับทำงาน 2 Way Interaction ใน Object ชิ้นเดียวกันหรือชิ้นที่ทำงานร่วมกันไม่ได้ ถ้าเลือก Interact Controller จะขยับ Scroll List ไม่ได้ ถ้าเลือก Interact Scroll list ก็จะขยับ Controller ไม่ได้ ต้องเลือกอย่างใดอย่างหนึ่ง น่าจะเป็นข้อจำกัดของโปรแกรม เพราะตอนจะเลือก Object ทับซ้อนกำหนด แกน Y มันเลือกซ้ำไม่ได้แล้ว ไม่แน่ใจว่าเวอร์ชั่นล่าสุดจะทำได้หรือยัง เพราะตัวที่ผมใช้งานปัจจุบันคือเวอร์ชั่น 3 ตอนนี้ล่าสุดเป็นเวอร์ชั่น 5 ไปแล้ว
Invision Studio — วิธีการทำงานของ Container Scroll มันไปติดอยู่กับ Artboard ทำให้ใช้คำสั่งบังคับไม่ได้ ส่วน Interaction ที่มีให้ ใกล้เคียงสุดคือ Swipe down, Drag down(Mouse) สุดท้ายคือทำได้แค่แอคชั่น แล้วปล่อยให้ทำงาน มันไม่สามารถ Scroll ไปหยุดไว้ระหว่าง Slide Bar ต่อให้เราเลื่อนไป มันก็จะเด้งไปจุดที่เรากำหนดไว้ และสุดท้ายที่แถมมาด้วยคือ Bug จ้า บินออกจอไปเลยจ้าาาาาาา ✈️
Protopie — ทำได้หมด ไม่ติดปัญหาอะไร งงตัวเองนิดหน่อยตอนทำเพราะต้องกำหนดค่า X Y และ Distance ของ Slide bar แต่ไม่มีปัญหา ผ่านฉลุย ที่ชอบที่สุดคือ Limit Distance ได้ด้วย
4. Transformation
การเปลี่ยนแปลงรูปร่างวัตถุสามารถอธิบายที่มาและที่ไปของเนื้อหาที่ต้องการสื่อได้ เช่น จาก Icon A เป็น Icon B หรือจะใช้เป็นวิธีการอธิบาย Progress ก็ทำได้ การอธิบายสิ่งที่ต้องการสื่อจะก็มีความต่อเนื่องกันมากขึ้น แล้วยังช่วยในการประหยัดพื้นที่และการกวาดสายตาของผู้ใช้งานได้อีกด้วย ตัวอย่างเช่น การกดปุ่ม Download หนังอะไรสักอย่าง😝 พอรูปทรงปุ่มกลายเป็น Progress Loading แล้ว เมื่อโหลดเสร็จเปลี่ยนเป็นสถานะโหลดเสร็จสิ้นได้อีกด้วย เคสนี้ผมจะลองทำ ปุ่มการโหลดแบบง่าย ๆ มาทดสอบดูว่าจะเป็นยังไง
ด้วยวิธีการ Transform Shape นี้ โปรแกรมทั้งสามทำงานได้อย่างไม่มีปัญหา แต่ถ้าให้เทียบโครงสร้างของโปรแกรมระบบการทำงาน Principle กับ Invision ต้องเปิด Artboard ถึง 6 Artboards ด้วยกัน ถึงจะจบงานได้ เทียบกับโครงสร้างของ Protopie สามารถจบ Interact ได้ใน Artboard เดียว แต่นั่นไม่ได้แปลว่า Protopie จะทำงานได้ง่ายกว่านะครับ ข้อดีข้อเสียมันก็มีต่างกันออกไป เช่น ถ้าตัว Designer เองเป็นคนวาดภาพในหัวไม่เก่ง อาจจะต้องใช้เวลาวาด Story board เป็น Step by Step ก่อนเริ่มลงมือทำงานใน Protopie เพราะระหว่าง Step การแอคชั่นนั้นไม่มีการ Preview ให้ดู ต้องใช้วิธีกดทดสอบ Preview เล่นซ้ำตลอด
5. Value Change
แน่นอนว่าข้อมูลทุกอย่างบนหน้าจอนั้น ถือเป็นค่าข้อมูลอย่างนึงที่ต้องการบอกผู้ใช้งานว่าเกิดอะไรขึ้น เป็นเรื่องธรรมดาของตัวอักษร รวมถึงตัวเลขด้วย ที่จะมีการเปลี่ยนแปลง เพื่อสอดคล้องกับข้อมูลจริงอยู่ตลอดเวลา นอกจากการแสดงแบบ Static เรายังสามารถแสดงการเคลื่อนที่แบบ Dynamic ของตัวเลขเพื่อแสดงถึงค่าที่เปลี่ยนแปลงตามค่าจริงที่เกิดขึ้น การเคลื่อนที่ของค่าสามารถบอกอะไรให้เราได้บ้างการเคลื่อนที่สามารถสื่อสารได้ทั้งการเปลี่ยนค่าที่เพิ่มขึ้นอย่างรวดเร็ว FAST ⏩ หรือลดลงอย่างช้า ๆ Slooooooww 🐢 (แค่ผมเปลี่ยนรูปแบบตัวอักษรก็สื่อแล้วเห็นป่ะ) ทั้งหมดสามารถสื่อได้โดยการแสดงการเคลื่อนไหวของตัวเลข ไม่รู้จะอธิบายยังไงให้เข้าใจง่าย เลยทำตัวอย่างให้ดูเลยแล้วกัน ให้เราจำลองว่าตัวเลขนี้คืออุณหภูมิองศา ซ้ายมือแสดงค่าแบบไม่มี Interact กับคนใช้ ส่วนขวามือมีการเปลี่ยนค่าแบบมี Interact กับผู้ใช้
จากตัวอย่าง มันเป็นเพราะอัตราเร่งของการเปลี่ยนค่ามันสื่อบอกถึงความเร็วเราจะรู้สึกได้ว่า ทำไมอุณหภูมิมันขึ้นสูงแบบนี้วะเนี้ย!! ร้อน 🔥 จริง ๆ ลักษณะการเปลี่ยนค่ามันมี UX ที่ส่งต่อกันมานานแล้วจากสิ่งของรอบตัว…. เดี๋ยวจะออกนอกเรื่องไปไกล ทำโจทย์ดีกว่า โดยในส่วนของ Value Change ผมอยากทำเหมือนการนับถอยหลังเพื่อทำแอคชั่นอะไรสักอย่าง
จากการได้ลองใช้งาน ทั้งสามทำได้ไม่มีปัญหา แต่อาจจะแตกต่างกันที่วิธีการเรียกใช้คำสั่งให้มันทำงาน โดยตัว Model ของ Principle กับ Invision เขาสามารถตั้งค่า Time Lapse ได้ คือให้เล่นเองตั้งแต่ต้นจนจบได้เลย แต่ตัว Protopie เขาเน้นการ Interact เป็นหลัก เพราะฉะนั้นจะสังเกตได้จากตัวอย่างข้างบนว่า ตอนเริ่มผมจะต้องกดก่อนเพื่อให้ Prototype มันเริ่มทำงาน แต่คิดว่าถ้าโกงความตายหน่อยก็มีวิธีอยู่
6. Masking
รูปแบบ Masking คืออะไร คำสั่งนี้เชื่อว่านักออกแบบทุกคนน่าจะรู้จักเป็นอย่างดี (ใช้กันบ๊อยบ่อย) มันคือความสัมพันธ์ระหว่าง Shape กับ Object ที่ทำงานร่วมกัน โดย Shape จะเป็นตัวกลางในการจำกัดขอบเขตของ Object ที่อยู่ข้างในไม่ว่าจะด้วยขนาด, ความชัดเจน, สีหรืออื่น ๆ ก็ตาม โดยทั่วไปแล้วรูปแบบ Masking จะถูกนำไปออกแบบในรูปภาพนิ่งซะส่วนใหญ่ แต่ในการแสดงรูปแบบ UI เราสามารถนำ Masking ไปสร้าง Interact กับผู้ใช้งาน เพื่ออธิบายความต่อเนื่องของเนื้อหาได้ เช่น รูปตัวอย่างสินค้าขนาดเล็ก เมื่อกดแล้ว Masking ก็ขยายพร้อมกับรูปเพื่อแสดงรายละเอียดของเนื้อหา ในส่วนนี้ผมจะลองใช้วิธีนี้ในการทดสอบโปรแกรมทั้งสามตัว
จากการลองทดสอบหัวข้อ Masking Tool ที่ทำงานแปลก ๆ กว่าตัวอื่นคือ Principle เพราะมีการใช้ Masking โดยการ Group เป็น Mask Object อีกทั้งวาง Timeline ด้วย Motion ที่ต่างกันถ้าตั้งเวลาพลาด การแสดงจะเปลี่ยนไปเลยต้องระวัง! ต่างจาก Invision กับ Protopie ก็เป็นการใช้คำสั่ง Mask เหมือนโปรแกรมทั่ว ๆไป ตั้งค่าดูไม่ซับซ้อน
7. Overlay
เป็นการแสดงความสำคัญของข้อมูล เชิงใช้พื้นที่เป็นลำดับชั้น เช่น มีชุดข้อมูลข้างบนเป็น Foreground ต้องเรียกใช้คำสั่งกับข้อมูลชุดนี้ Overlay สร้างความสัมพันธ์ทางการใช้งานว่า คุณต้องการกระทำกับข้อมูลชุดบนนี้อย่างไร
จริง ๆ แล้วแอคชั่น แบบ Overlay ผู้ใช้งานฝั่ง iOS จะคุ้นชินกันเป็นอย่างดีกับแอคชั่น การ Slide ตัวอย่างเช่น ใน App Mail, Contact แต่ในฝั่ง Android User การจะเรียกคำสั่งประเภทนี้ ต้อง Tab and Hold ไว้ ถึงจะแสดงคำสั่งที่ซ่อนไว้ ผลเหมือนกัน แต่.. แอคชั่นมันคนละแบบกัน แต่ปัจจุบัน App ต่าง ๆ เริ่มใช้กันมากขึ้นแล้วในฝั่งของ Android ผมจะลองทำโจทย์ Slide แล้วให้แสดงคำสั่งแบบง่าย ๆ เพื่อทดสอบ
ในข้อนี้ Tool ที่มีปัญหามากที่สุดน่าจะเป็น Invision Studio ส่วน Principle ไม่ติดเท่าไร ส่วน Protopie ทำได้แบบชิล ๆ เลย จะอธิบายว่ามีปัญหาอย่างไร
(อธิบายเชิงลึกเกี่ยวกับโปรแกรมอาจจะงงได้ จะพยายามเขียนให้ทุกคนเข้าใจ)
คือตัว Invision อย่างที่บอกไปข้างต้นว่า มีปัญหาเรื่องการทำ Scrolling เพราะว่า ตัวพื้นฐานโปรแกรม มัน Scrolling โดยใช้ Artboard เป็นตัวตั้ง มันไม่สามารถทำ Group Object ให้ Scroll ได้ด้วยตัวเอง เพราะฉะนั้นโจทย์ Overlay นี้ ต้องทำ Artboard เป็นตัว Scrolling แทน ซึ่งไม่แน่ใจว่าจะมีผลเวลาเราไปทำ UI เต็มหน้าหรือเปล่า แต่ส่วนตัวคิดว่ามีผลแน่นอน รวมทั้งยังกำหนดค่าแกน X ให้ติดลบไม่ได้ นั่นแปลว่าขยายออกไปทางขวาได้อย่างเดียว กำหนดให้ขยาย Artboard ออกไปทางซ้ายไม่ได้ด้วย แปลว่าเราจะทำ Prototype ที่เริ่มจาก Scroll ชิดขวาสุดไม่ได้เลย ผมเลยต้องกำหนด Interact Drag แล้วให้ทำงานแบบหลอก ๆ กำหนด Time Delay 0.0 ให้มันเด้งกลับไป Snap ตำแหน่งเดิม
ส่วน Principle กำหนด Scroll ได้ไม่มีปัญหา แต่ไม่มี Interact ประเภทการ Drag ให้ เลยต้องตั้งเป็น Mouse Up แล้วให้คำสั่งทำงาน ส่วน Protopie อย่างที่บอกไป ชิลล์ ๆ
8. Cloning
การโคลนว่ากันง่าย ๆ มันก็คือการสร้างตัวเสมือนขึ้นมาจากตัวจริง แต่ในทาง UI มันคือการสร้าง Sub Object จาก Main Object ในกรณี Motion ประเภทนี้จุดเด่นคือการแยกตัวออกจากกัน มันจะเห็นทิศทางชัดกว่า Motion ประเภทอื่น ๆ เพราะว่ามันมีการนำสายตาในตัวของมันเอง👀 ลองดูตัวอย่างที่ผมนำมาให้ดู อาจจะทำให้เห็นภาพชัดขึ้น
จากตัวอย่างจะเห็นได้ว่า จุดเด่นของ Cloning คือการนำสายตา จากการแยกตัวของ Object ซึ่งสามารถนำไปประยุกต์ได้หลายแบบ ในส่วนนี้ผมจะลองทำแบบง่าย ๆ จาก 1 Object แยกเป็น 2 Objects เพราะน้อยโปรแกรมมากจากที่ลองศึกษามา จะทำ Motion ประเภทนี้ได้
จากการใช้งานสรุปได้ว่าทั้งสามตัวไม่มีอันไหนเลยที่มี Effect รองรับให้ Vector หลักแยกออกเป็น Vector ย่อย ๆ ที่เห็นตัวอย่างที่ผมทำทดสอบ ผมใช้วิธีโกงความตายเอา ทำให้มันทำได้ (อยากรู้ทำยังไง ไปหาวิธีทำเอาเอง มิใช่ประเด็น 😆) แต่นั่นแปลว่า Motion ประเภท Cloning ไม่สามารถเล่นได้ฟรีฟอร์ม ถ้าเราจำเป็นต้องใช้จริง ๆ อาจจะต้องกำหนดค่าการทำงานมันอย่างตายตัว ว่าแยกออกกี่อัน แยกแล้วไปทางไหน Rubber ยืดมาก ยืดน้อยทำด้วยมือหมด แปลงเป็นชุดคำสั่งใด ๆ ไม่ได้
9. Obscuration
หลักการมันคล้ายกับ Overlay มีเลเยอร์ล่างบน แต่ต่างกันที่มันจะแสดงให้เห็นการทำงานที่เป็นขั้นเป็นตอนมากกว่ากัน ว่ากันง่าย ๆ มันคือการแสดง Popup นั่นแหละ
ครับ โดยโจทย์นี้ผมจะลองทำเป็น Background Blur ใส่เข้าไปด้วย เพื่อทดสอบความสามารถ
จากที่ลองเล่น ไม่มีโปรแกรมไหนเลยที่ทำ Background Blur ได้ ในตัวอย่างผมใช้วิธีโกงความตายเอาทั้งนั้น เช่น แอคชั่นแล้วให้เอาภาพมาซ้อน หรือให้ Object ที่อยู่หลัง Overlay แสดง Showdown แต่ถ้าเราจะไปใช้งานจริงคงจะไม่ได้ ทำได้เฉพาะงานโชว์พอได้ลองไปรีเสิร์ชก็มีผู้ใช้งานหลายคนเรียกร้อง Effect นี้ ซึ่งทีมงานของทุกโปรแกรมก็บอกว่า อยู่ในระหว่างการพัฒนาจ้ะ 💻
10. Parallax
หลักการของ Parallax คือการเอา Overlay กับ Offset & Delay มาผสมแล้วทำงานร่วมกัน การทำงานในระนาบเดียวกันแต่เคลื่อนที่ด้วยความเร็วที่ต่างกัน สร้างความน่าสนใจ และต่อเนื่องในการใช้งาน ใครลืมก็ขึ้นไปอ่านเอาเนอะว่ามันทำงานยังไง 😝
ผมจะไม่เขียนซ้ำ เพราะปัญหาที่เจอมันเหมือนตอนที่ทำหัวข้อ Overlay เลย มีปัญหาเรื่อง Scrolling แล้วให้ทำงาน สำหรับ Invision ที่เห็นในตัวอย่างมัน Smooth กว่าตัวอื่นก็เพราะว่าใช้คำสั่ง Drag แล้วโปรแกรมมันทำงานของมันเอง แต่ Principle กับ Protopie ผู้ใช้งานสามารถ Interact (Drag) ได้ด้วยตัวเองเลย ไม่ต้องใช้คำสั่งหลอก ๆ แบบ Invision
11. Dimensionality
ผมเชื่อว่าเรามีประสบการณ์การใช้งาน เกี่ยวกับ Motion ประเภทนี้กันทุกคน ไม่น่าจะมีคำถามเกิดขึ้นระหว่างการใช้งาน “มันจะพับทำไมวะ” ทุกคนก็ต้องคิดเหมือนกันหมดว่าเหมือนการเปิดหน้ากระดาษเลย แน่นอน.. ประสบการณ์การใช้งานมันมาจากการที่เราอ่านหนังสือ หรือการที่เรายืนรอดูอาบังกลับหน้าโรตี หรืออะไรก็ตามที่ใช้วิธีการกลับหน้าวัตถุ บลา ๆ อีกมากมาย ไม่แปลกที่จะเป็นหนึ่งใน UX Motion ที่ถูกนำมาประยุกต์ใช้งานในรูปแบบ UI ไม่อธิบายหลักการอะไรมากไปลองทำเลยดีฟ่า (ไปโผล่บังขายโรตีได้ไงวะ😏)
เป็นที่น่าสงสัยว่า Motion ประเภทนี้ไม่ได้ถูกให้ความใส่ใจเท่าไร เพราะไม่ว่าจะเป็นโปรแกรมใหม่ ๆ ที่ออกมาหรือ 1 ใน 3 ที่ผมเลือกมาทดสอบ ไม่ค่อยมีอันไหนที่ทำรองรับ Motion นี้เลย อีกอย่างที่สังเกตได้คือแอปพลิเคชั่นใหม่ ๆ ก็ไม่ค่อยมีใครทำ Motion ประเภทนี้เท่าไร อาจจะเพราะความยากและระยะเวลาในการทำ หรือว่า UX แบบนี้มันกำลังจะตายไป ? หรือมันอาจจะไม่เหมาะกับ 2D Interface จริง ๆ (อาจบูมอีกทีตอนมีโฮโลแกรม)
Principle — ไม่ต้องพูดเยอะ “ทำไม่ได้” ดูจากตัวอย่างมันปรับ Vector ยังไม่ได้เลย
Invision — เกือบทำได้ อาจจะมีปัญหาเรื่องยังไม่รองรับการ Animate Vector เฉพาะจุด เลยทำให้มันกระตุก ๆ อนาคตอาจจะทำได้
Protopie — ทำได้หมด จะหมุนกี่รอบ องศาไหน ทิศทางไหนทำได้หมด เอาเรื่อง!
12. Dolly & Zoom
จริง ๆ แล้วการ Dolly และ Zoom ต้นกำเนิดมันเกิดมาจากการถ่ายทำหนัง คือการเคลื่อนไหวเข้าใกล้หรือถอยห่างออกไป โดยใช้จุดนำสายตาอยู่ตำแหน่งเดิม ในทาง UI นั้น มันขยับมุมกล้องเหมือนการถ่ายหนังไม่ได้ แต่นำมาประยุกต์ใช้ให้มีมิติในรูปแบบมุมลึกมุมตื้น
ตัวอย่างที่เราเห็นทุกวันก็น่าจะเป็น iPhone ตอนปลดล็อก หรือเวลาใช้ Google Photos เวลาซูมเข้า-ออกอัลบั้มรูป
ทดสอบมาแล้วว่าทุกโปรแกรมสามารถทำได้อย่างไม่มีติดขัด แต่ตัวที่รองรับ Interact ได้ดีที่สุดน่าจะเป็น Protopie เพราะมีให้เราเลือก Pinch ได้ด้วย แต่อีกสองตัวทำได้แค่ Action ปกติทั่วไปที่มีให้มา (จะสุดมาก ถ้าทำ Blur Object ได้เพราะตามหลักแล้ว เวลา Object ถูกซูมเข้ามาในระยะใกล้ต้องติด Blur ด้วย)
สรุปส่งท้ายโปรแกรมไหนที่ควรไปต่อ 🚩
ที่จริงทุกอันเคยผ่านการใช้งานมาหมดแล้ว ครั้งนี้ถือเป็นโอกาสในการเลือกโปรแกรมที่จะต้องเป็นตัวหลักในการนำไปใช้งานจริง เพื่อนำไปพัฒนาเป็น Design System ในอนาคต ตามที่ได้อธิบายไปช่วงต้นของบทความ จากการทดสอบทั้งหมด Principle กับ Protopie น่าจะเป็นตัวเลือกที่ผมจะนำไปทดสอบในกระบวนการต่อไป ยังเหลือข้อมูลอีกหลายอย่างที่ต้องศึกษา ก่อนที่จะลงหลักปักฐานกับโปรแกรมนี้ ไม่ว่าจะเป็นเรื่องการ Built App Multiple Screen, Save Backup, Collaborate with Dev, Share Prototype
ส่วนเหตุผลที่ผมไม่เลือก Invision เพราะความสามารถหลาย ๆ อย่างมันยังไม่ตอบโจทย์, Bug ก็ยังมี, ผูกมัดกับโปรแกรมตัวเองเกินไป ผมจะไม่ขอเขียนรายละเอียดในแต่ละเหตุผลเพราะบทความเริ่มยาว และกลัวแฟน ๆ Invision จะมาดักตีหัว 😅
แต่นั่นไม่ใช่ประเด็น!! ผมเชื่อว่าแต่ละคนมีความถนัดและกระบวนการทำงานที่ไม่เหมือนกัน ไม่ว่าจะเป็นในรูปแบบองค์กร หรือฟรีแลนซ์ สิ่งที่ผมจะบอกคือไม่มีผิดถูกแต่ละกลุ่มผู้ใช้ก็มีสิ่งที่เลือกตามเหตุผลและความเหมาะสมในการทำงานต่างกันออกไป สุดท้ายอยากจะรีรันคำพูดที่เขียนไว้ต้นบทความอีกสักรอบนึง
“ เหล่า UX/UI เอ๋ย เราจะรู้ได้ยังไง ว่าเราควรทำ Motion เพื่อ Support การใช้งานของผู้ใช้เมื่อไร? และช่วงเวลาไหนดี ?”
ถึงเวลาในการใส่ใจพฤติกรรมการใช้งานของผู้ใช้ ให้มากกว่า Static UI กันแล้วครับ
ขอบคุณครับ 😄
