สร้าง Prototype สุดเนี๊ยบ ด้วย ProtoPie
บางคนอาจจะเคยเจอปัญหาเวลานำ Prototype ไปทดลองแล้ว User บอกว่าอันนี้ไม่ใช่ของจริงใช่รึเปล่า หรือเวลาสื่อสารกันในทีมแล้วเห็นภาพไม่ค่อยชัด .. จบได้ด้วย ProtoPie
บทความนี้ขอพูดถึงและอิงเนื้อหาการทำ Prototype ในรูปแบบ Mobile Application เป็นหลักนะครับ
จากบทความที่แล้ว (จากแฟนตัวยง Sketch สู่ Figma) มีเกริ่นถึง ProtoPie ไว้แล้วว่าเวลาที่ต้องการทำ Prototype ที่ละเอียดๆ ก็จะ Import ไปทำต่อที่ ProtoPie แทน มาดูกันว่าทำไมถึงต้องเป็น ProtoPie และช่วยอะไรเราได้บ้าง
เพิ่มรายละเอียดอีกขั้น
เครื่องมือที่เราใช้กันอยู่นั้น เช่น Sketch หรือ Figma ที่สามารถทำงานออกแบบได้ครบวงจร ก็สามารถทำ Prototype ได้เหมือนกัน แต่ส่วนใหญ่แล้วก็จะเป็นการทำพื้นฐาน เช่นกดตรงนี้ ข้ามไปที่ Frame นี้ มี Trigger หลักๆ ให้ใช้ เช่น กด, กดค้าง และ Transition หลักๆ เช่น Move, Push, Slide หรือบางอันก็จะมี Delay ให้ใช้ด้วย ซึ่งจริงๆ ก็เพียงพอต่อการทำ Prototype ส่วนใหญ่ของเราแล้ว
แต่บางครั้งเราเองอยากจะเพิ่มรายละเอียดที่มากขึ้นกว่านั้น เราอยากจะ Swipe แบบ Horizontal Scroll อยากจะทดลองการ zoom ดูแผนที่แบบ Google Maps หรืออยากจะเปิดกล้องมาใช้งาน อยากคุมรายละเอียดของ Layer บนหน้าจอของเราให้มีการ Animation แยกกัน แสดงผลไม่พร้อมกัน ทั้งหมดนี้เราสามารถทำให้เกิดขึ้นได้บน ProtoPie ทำให้การทำ Prototype ของเราสนุกและเห็นภาพมากขึ้นในทันที
เริ่มต้นจาก Scene
จากโปรแกรมออกแบบที่เราใช้กันอยู่ เรามักจะมองเป็น Frame ส่วนใน ProtoPie จะใช้เป็น Scene ซึ่งจะแตกต่างจาก Frame เล็กน้อยคือมีด้านของเวลาเข้ามาเกี่ยวข้องด้วย ถ้านึกง่ายๆ ก็เหมือนเวลาที่เราทำ Presentation หนึ่งหน้าบน Keynote หรือ Power Point พอเราใส่ของต่างๆ เสร็จ เราสามารถเพิ่ม Animation ให้กับของในหน้านั้นๆ ได้ นั้นคือหนึ่ง Scene ใน ProtoPie
ตามติดด้วย Trigger
Trigger คือการที่เราจะทำให้ Scene หรือ Layer นั้นๆ ทำอะไรได้บ้าง โดยจะมีให้เราเลือกใช้ทั้งหมด 6 แบบด้วยกัน คือ Touch Trigger, Conditional Trigger, Mouse Trigger, Key Trigger, Input Trigger และ Sensor Trigger
ถ้าเราทำ Prototype ที่เป็น Mobile Application เป็นหลัก ตัว Trigger ที่น่าจะได้ใช้บ่อยๆ ก็น่าจะเป็น 4 Trigger นี้
1. Touch Trigger
การที่เราทำอะไรกับ Layer โดยจะมีให้เลือกได้เยอะมาก ไม่ว่าจะเป็น Tab, Double Tap, Touch Down, Touch Up, Long Press, Fling, Pull, Drag, Pinch หรือ Rotate
2. Conditional Trigger
จะเป็นการตั้งเงื่อนไขที่และทำงานตามที่เรากำหนดไว้ ก็จะมี Chain, Range, Start และ Detect ให้ใช้งาน
3. Sensor Trigger
อันนี้จะเป็นการใช้ความสามารถต่างๆ ของมือถือแล้ว ไม่ว่าจะเป็น Tilt, Compass, Sound, 3D Touch, Proximity และ Receive
4. Input Trigger
การ Focus In, Focus Out ที่ Input ของ Application เราว่าจะให้ทำอะไรบ้าง หรือการกด Return บน Keyboard แล้วเราอยากทำอะไรต่อ
ดูรายละเอียดของ Trigger ทั้งหมดได้ที่ https://www.protopie.io/learn/basics/#Touch_Trigger
ต่อด้วย Response
หลังเราเลือก Trigger ให้กับ Scene หรือ Layer แล้ว เราก็ต้องมาเลือกต่อว่าจะให้ทำอะไรต่อ ซึ่งก็มีให้เลือกเยอะมากๆ ตั้งแต่ Interaction พื้นฐานทั่วไป เช่น Move, Scale, Rotate, Opacity, Color ไปจนถึงการสั่น หรือเปิดกล้องบนมือถือเรามาใช้งาน
คุมด้วย Animation Curve
เราสามารถควบคุม Animation ของบาง Response เพิ่มเติมได้อีก โดยจะมีให้เลือก 3 แบบ Easing Function, Cubic-Bezier และ Spring
เก็บไว้ใช้หลายๆ ที่ด้วย Component
หาก Prototype ของเรามีของที่ถูกใช้ในหลายๆ Scene เราสามารถสร้างเป็น Component ไว้ได้เลย (คล้ายกับ Symbol ของ Sketch หรือ Component ของ Figma) เพื่อที่จะสะดวกในการแก้ไข หรือนำไปใช้ใน Scene อื่นๆ และก็ยังสามารถ Override ได้อีกด้วย
Input + Variable + Formula เนียนไปอีกขั้น
เวลาที่เราทำ Prototype ที่มี Input เพื่อให้ User ทดลองกรอกนั้น ปกติแล้วที่เคยทำก็จะทำเป็นรูปภาพ Keyboard และพอกดแล้ว ก็มักจะมีข้อความที่เราเตรียมไว้ให้ แสดงผลขึ้นมาเลย ตรงนี้ก็จะชัดเจนมากๆ ว่าไม่ใช่ของจริง แต่บน ProtoPie เราสามารถทำให้ความรู้สึกเหมือนของจริงได้มากเลยทีเดียว
Input
เราสามารถเพิ่ม Input ได้ ซึ่งเมื่อ Focus แล้วจะมี Keyboard จริงๆ ของมือถือแสดงผลขึ้นมา ทำให้ User สามารถพิมพ์อะไรก็ได้ใน Prototype ของเรา โดยที่ตัว Input สามารถเลือกรูปแบบ Keypad ได้หลายแบบ เช่น
- Text จะเป็นแบบตัวอักษรปกติ
- Number จะเป็นแบบตัวเลข
- Text Password / Number Password ในช่อง Input เมื่อพิมพ์ไปแล้วจะไม่เห็นข้อมูล (เหมือนการกรอก Password ทั่วไป)
Variable
เราสามารถกำหนดตัวแปรเพื่อเอาใว้ใช้งาน โดยที่เราจะกำหนดไว้ตั้งแต่แรก หรือจะ เปลี่ยนข้อมูลตามเงื่อนไขที่เราตั้งไว้ระหว่างที่เล่น Prototype ก็ได้ โดยจะเลือกได้ 3 แบบด้วยกัน
- Number ข้อมูลที่เป็นตัวเลข สามารถนำไปคำนวนเพื่อใช้งานต่อได้
- Text ข้อมูลที่เป็นตัวอักษร สามารถนำไปแสดงผลใน Scene ได้
- Color ค่า HEX ของสี
Formula
ตัวช่วยการคำนวนหาค่าต่างๆ หรือเวลาที่เราต้องการ Assign ค่าต่างๆ เข้าไปเก็บไว้ที่ Variable ที่เราได้ตั้งไว้ เช่น การรับข้อมูลชื่อเล่น จาก Input ที่ User กรอกมา และนำชื่อเล่นมาแสดงผลใน Scene อื่นๆ
ข้อมูลแบบละเอียดของ Variable, Formula Syntax และ Function ต่างๆ ที่มีให้ใช้จะอยู่ที่ https://www.protopie.io/learn/formula
3 ส่วนนี้จะทำให้เราสามารถทำ Prototype ที่ต้องให้ User ทดลองกรอกข้อมูลได้สมจริงมากขึ้น ไม่ว่าจะเป็นการค้นหาสินค้า หรือการกรอกฟอร์มสมัครสมาชิก
ตัวจบ Prototype ปลดล็อคทุกข้อจำกัด
น่าจะพอนึกภาพออกว่าถ้าเราใช้ ProtoPie ทำ Prototype ของเรา ไม่ว่าจะนำไปทดสอบกับ User ที่จะรู้สึกว่าอันนี้เหมือนของจริงมากๆ เปิดให้ User ทำอะไรได้มากขึ้น เช่นเราทำ Prototype จองห้องพักหรือทริปท่องเที่ยว ก็ปล่อยให้ User กดเพิ่มลดจำนวนคนได้เองเลย และนำค่านั้นไปใช้งานต่อใน Scene ถัดไปได้ด้วย
และในส่วนของการพูดคุยกันในทีมพัฒนา เราก็จะเห็นภาพเดียวกัน ว่าสิ่งที่เราคิดกันอยู่ หรือภาพที่อยู่ในหัวเราเป็นยังไง ได้ลองกดเล่น ลองพูดคุยกันได้เลย ไม่ต้องเสียเวลาพัฒนาของจริงเลยแม้แต่น้อย
ลองดูตัวอย่าง Prototype ที่ทำผ่าน ProtoPie ได้ที่ https://www.protopie.io/demo
สิ่งที่คิดและปัญหาที่พบ
- ใช้เวลาในการทำค่อนข้างเยอะ อาจจะต้องเทียบความเหมาะสมว่าคุ้มค่าหรือจำเป็นต้องทำบน ProtoPie จริงๆ รึเปล่า เทียบกับผลลัพท์ที่จะได้
- ตัว ProtoPie เองก็สามารถออกแบบโดยใช้ Element พื้นฐานได้ แต่คิดว่าทำบนเครื่องมือที่เราถนัดน่าจะดีที่สุด ส่วนตัวใช้วิธี Import มาจาก Figma
- ทดลองใช้ได้ฟรี แต่ถ้าต้องการใช้ต่อจะมีค่าใช้จ่ายเพิ่มเติม Package เริ่มต้นอยู่ที่ $13 ต่อเดือน ส่วนรายปีจะตกอยู่ที่ $11 ต่อเดือน
- รูปแบบ Input ยังมีแค่แบบเดียว ยังไม่สามารถใช้ Form รูปแบบอื่นๆ ได้ เช่น Select, Date Picker ตรงนี้ต้องทำเป็นรูปภาพทดแทนไป
- 1 ไฟล์ต่อ 1 Device ทำให้เราอาจจะต้องทำไฟล์มากขึ้น ถ้าเรามีอุปกรณ์ที่เราจะนำไปทดสอบมี OS หรือขนาดจอที่แตกต่างกัน
- พอมี Scene เยอะๆ แล้วรู้สึกว่าจัดการค่อนข้างยาก เช่น ถ้าชื่อของ Scene ยาวจะมองไม่เห็นชื่อ Scene ทั้งหมด ยัง Group หรือแบ่ง Section ไม่ได้
