ประเภทของ Prototyping ?
พูดถึง Prototype ให้ใครได้ยินคงเข้าใจในแบบภาพรวมว่ามันคืออะไร หลายคนใช้มันเป็นตัวอย่างในการแสดงงานเพื่อทดสอบอะไรสักอย่างที่คุณต้องการ ไม่ว่าจะเป็น การ Preview งานให้ผู้อื่น การทดสอบ Flow การทำงานของโปรแกรมและ
แอพพลิเคชั่น หรือ การ Test UX ผู้ใช้งาน หรือ การนำเสนอ Transition ต่างๆ
บทความนี้เกิดจากการที่ผมได้มีโอกาสได้ไปสัมภาษณ์เด็กจบใหม่ เด็กคนหนึ่งนำงานมาโชว์ผม “ นี่คะ พี่ลองดูงานหนูจาก High Prototype ที่หนูทำขึ้นมาได้เลยค่ะ ” เกิดข้อสงสัยขึ้นมาทันทีว่าน้องเข้าใจผิดรึป่าว เพราะงานที่ผมได้ดูไม่ตรงกับสิ่งที่น้องนำเสนอ ดังนั้นผมจึงอยากเขียนประเภทของ Prototype ขึ้นมา เพื่อแบ่งประเภทของ Prototype ในแต่ละรูปแบบให้ถูกต้องครับ
Low-fidelity prototyping
เราจะใช้งาน low-fidelity Prototyping สำหรับงานที่เน้นความรวดเร็ว สามารถสื่อสารเพื่อเข้าใจถึงการทำงานของระบบนั้นๆได้ ข้อดีที่ตามมาคือเราจะได้ผลตอบรับอย่างรวดเร็วในการทำแบบนี้ สะดวกแก่การแก้ไขงาน ก่อนจะเริ่มลงมือทำจริง แต่ข้อเสียคือเราอาจจะได้รูปแบบการ Transition ระหว่างหน้านั้นไม่ค่อยสมจริงเท่าไร
High-fidelity prototyping
เราจะใช้งาน High-fidelity prototyping สำหรับการนำเสนอไอเดียหรือรูปแบบการ Action ให้แก่ Customer เสมือนงานสมจริงมากที่สุด ข้อดีของ Prototype แบบนี้คือมันสามารถชี้นำการใช้งานจากหน้าหนึ่งไปยังอีกหนึ่งได้ดีด้วยการทำ Motion ระหว่างหน้า ประกอบด้วยสามารถทำ Interaction กับผู้ใช้งานเป็นการสร้างจุดสนใจโต้ตอบกับผู้ใช้ได้ดี
Prototyping tool
มาพูดเรื่องถึงประเภทของ Tool ที่ใช้สร้าง Prototype กันบ้างกันดีกว่า ผมจะขอแบ่ง Tool ที่ใช้สร้าง Prototype เป็น 3 ประเภท
1.Click-Though
Tool ประเภทนี้หน้าที่ของมันคือไว้สร้างจุด Spot ในหน้านึงไปยังอีกหน้านึงเพื่อ
เชื่อมโยง เราสามารถสร้าง Action ระหว่างหน้าได้ว่าต้องการ Action แบบไหน Tab, Dubble Tab, Drag หรือ เท่าที่ Tool ที่คุณเลือกจะรองรับ Gesture.
Tool ที่ผมจะแนะนำ ได้แก่ Marvel, XD, Invision, Flinto ทั้งหมดที่แนะนำใช้งานเหมือนกัน อาจจะแตกต่างในด้านของการใช้เวลาการเรียนรู้ เมื่อก่อน Tool เหล่านี้ทำได้แค่ Click แล้วทำการแสดง Transition ไปยังหน้าที่เราเลือกไว้ ในปัจุบันเราสามารถอัพโหลดไฟล์ Gif เพิ่มเติมแสดง Motion เข้าไปให้สมบูรณ์มากขึ้น ทำให้มันกลายเป็น High-fidelity prototyping ได้
สามารถไปอ่านบทความเกี่ยวกับ Experience Design CC ที่ผมเคยเขียนได้ที่ลิงค์นี้ครับ Experience Design CC เล่นแล้วจึงบอกต่อ
2.Timeline
Tool ประเภทนี้เหมาะสำหรับผู้ที่มีทักษะการตัดต่อหรือกราฟิกโดยตรง คนที่ทำงานด้าน Animation จะรู้จักกันดีในการเล่นแบบ frame ต่อ frame โดยจะเล่น Motion ผ่านจุด Keyframe ที่เรากำหนดไว้ใน Timeline ซึ่ง Tool ที่ผมแนะนำคือ Principle, Photoshop, After Effect
การเล่น Frame ต่อ Frame คือพื้นฐานการทำ Animation ผมจะขอยกตัวอย่าง คลิป Youtube Flip book animation นี้เพื่อความเข้าใจง่ายๆ
แม้ว่า After Effect จะไม่ใช่ Tool ที่ไว้สำหรับสร้าง Prototypeโดยตรง แต่จำเป็นมากสำหรับการทำ Prototype เพราะมันไว้สร้าง Motionให้ Prototype ของเราสมบูรณ์ เมื่อนำไปรวมกับ Tool อื่นๆ
3.Part-Flow
Tool ประเภทนี้อาจเหมาะกับผู้ที่มีทักษะด้าน Programming ในระดับหนึ่ง ถึงจะทำงานได้คล่อง โดยที่จะมี Part ในแต่ละรูปแบบที่ทำงานแตกต่างกัน เช่น Process, Input&Output, View, Interaction โดยแต่ละ Part จะทำการเชี่อมโยงกัน เราสามารถแก้ไขเส้นที่เชื่อมโยงระหว่าง Part ได้ และสามารถแก้ไขค่าใน Part ได้อีกด้วย
และสุดท้ายนี้ยังมี Tool อื่นอีกที่ผมไม่ได้พูดถึง เนื่องจากใช้งานค่อนข้างลำบากเลยไม่อยากแนะนำ และยังมี Tool ดีๆที่ยังไม่เปิดให้ใช้บริการ เช่น Sliver Flow หรืออีกชื่อ คือ Carft Prototype by Invision LABS ที่น่าสนใจ
สุดท้ายท้ายสุด :]
การสร้าง Prototype ขึ้นมาก็เพื่อให้เกิดประสิทธิภาพในการสื่อสารระหว่างกัน ให้งานนั้นออกมาในรูปแบบที่แม่นยำและเข้าใจตรงกันทุกฝ่าย และหวังว่าบทความนี้จะทำให้หลายคนเข้าใจรูปแบบของ Prototype และ สามารถเลือก Tool ไปใช้ตามความต้องการได้นะครับ ขอบคุณครับ :]
