ปฏิบัติการณ์ทำ Mockup แบบฉบับเร่งด่วนโคตรๆแต่ไม่ธรรมดาด้วยเวลาแค่ 2 วัน

สัปดาห์ที่แล้วหายหัวไปทั้งสัปดาห์เลย เพราะว่ามัวแต่นั่งทำ Mockup ให้กับที่บริษัท เลยขอเก็บประสบการณ์อันสนุกสนานมาเล่าสู่กันฟังเล่นๆนะครับ

Mockup คืออะไร และทำไปทำไม?

การเริ่มทำแอปซักตัวนั้นฟังดูเป็นเรื่องง่ายๆเนอะ ลองนึกภาพว่าเจ้าของบล็อกอยากจะทำแอปซักตัวเป็นของตัวเอง เพียงแค่นึกว่าอยากจะเขียนแอปอะไรดี พอนึกได้ก็เริ่มเขียนได้ทันที ระหว่างนั้นก็นึกไปพลางๆด้วยว่าจะจัดหน้าจอยังไงดี และถ้าระหว่างจัดหน้าจอ เกิดอยากจะย้ายหรือเปลี่ยนรูปแบบการทำงานของแอปก็สามารถทำได้ทันที ซึ่งทำแบบนี้ไปเรื่อยๆจนแอปเสร็จ

แต่ทว่าในการพัฒนาแอปจริงๆมันไม่ได้ง่ายดายแบบนั้นนี่สิ เมื่อต้องมาทำกับแอปที่มีขนาดใหญ่หรือต้องทำร่วมกับคนในทีมด้วยกัน ถ้าใช้วิธีแบบเดิมๆเริ่มโค้ดโดยไม่ได้ตกลงอะไรเป็นรูปร่างเสียก่อน แล้วต้องมานั่งแก้ไขไปเรื่อยๆก็จะมีแต่เสียเวลาโดยใช้เหตุเนอะ

เพื่อเลี่ยงปัญหาดังกล่าว หลังจากที่ตกลงกันได้แล้วว่าจะทำแอปอะไร มี Requirement อะไรบ้าง สิ่งต่อมาก็คือออกแบบ Workflow ของแอปก่อน เพื่อให้คนในทีมเห็นภาพและเข้าใจตรงกันก่อนที่จะเริ่มโค้ด

ดังนั้นในขั้นตอนการ Design Workflow ถือว่าเป็นอีกหนึ่งขั้นตอนที่สำคัญมากพอๆกับตอนเขียนโค้ด เพราะถ้าออกแบบไม่รอบคอบหรือไม่ดีพอ ก็จะทำให้แอปออกมาไม่ดี มีการแก้ไขบ่อยจนเสียเวลาเกินจำเป็นได้ แต่ทว่าจะมานั่ง Design บนกระดาษหรือบนกระดานไวท์บอร์ดเพียงอย่างเดียวก็ไม่ใช่เรื่องง่ายเช่นกัน ดังนั้นในขั้นตอนนี้ก็จะต้องหาวิธีทดสอบคร่าวๆว่ามันจะ Work หรือไม่ นั่นก็คือลองทำ Mockup นั่นเอง!!!

เกริ่นซะยาวเลย…

Mockup คือการทำ Prototype ด้วยขั้นตอนที่ง่ายและไวที่สุดเพื่อให้สามารถทดลองเพื่อประเมินว่ามันดีมั้ย โอเคมั้ย และมีตรงไหนที่ต้องแก้ไขหรือป่าว เพื่อที่ว่าจะได้กลับไป Design ใหม่ แล้วมาทำเป็น Mockup ใหม่แล้วทดสอบใหม่วนไปเรื่อยๆจนรู้สึกว่าโอเคแล้ว

ดังนั้นการทำ Mockup จึงช่วยทำให้การ Design Workflow ออกมาดี แก้ไขในภายหลังน้อยลง และยิ่งขั้นตอนการทำ Mockup ใช้เวลาน้อยเท่าไรก็จะทำให้ประหยัดเวลาได้มากขึ้นเท่านั้น

การทำ Mockup ในแบบฉบับของเจ้าของบล็อก (ที่ไม่ควรทำตาม)

ในกรณีของเจ้าของบล็อกก็คงจะเป็นการทำ Mockup ให้ลูกค้าดูเสียมากกว่า (หรือที่เรียกกันว่า Demo นั่นแหละ) เนื่องจากบริษัทที่เจ้าของบล็อกทำงานรับแต่งาน Enterprise ซึ่งงานพวกนี้ก็จะมีการเปรียบเทียบกับบริษัทอื่นๆว่าจะเลือกให้เจ้าไหนทำอยู่แล้ว จึงต้องมีการคิด Workflow พอสมควรจากความต้องการคร่าวๆของลูกค้า และเป็นเรื่องปกติที่ต้องเจอกับอีกหนึ่งปัจจัยที่ทำให้งานเป็นเรื่องยาก นั่นก็คือ “เวลาที่จำกัด” (ก็ 2 วันตามชื่อบทความนั่นแหละ) ซึ่งก็คิดกันไว้ว่าด้วยเวลาแค่ 2 วัน ซึ่งการทำ Mockup ให้ไวไม่ใช่เรื่องยากนัก แต่การทำออกมาให้ดีด้วยเพื่อให้ลูกค้าประทับใจนี่สิ (ซึ่งส่วนใหญ่เลือกที่จะไม่ทำด้วยซ้ำ)

แต่นั่นก็เป็นจุดเริ่มต้นของบทความนี้นี่นะ โดยเป้าหมายหลักของครั้งนี้คือ

• ต้องเอางานมาให้ด้ายยยยยยย
• มี Demo ให้ลูกค้าให้ลองเล่น
• ทำให้ตรงกับความต้องการของลูกค้า
• ต้องออกมาสวย
• เสร็จภายใน 2 วัน
• Mockup ด้วยโค้ดแอนดรอยด์
• ท้าทายตัวเอง (ด้วย 5 ข้อข้างบน)

เริ่มแรกก็คือต้องทำความเข้าใจ Requirement ของลูกค้าเสียก่อน แล้วออกแบบ Workflow ซึ่งในขั้นตอนนี้ในทีมใช้เวลากันไป 1 ชั่วโมง 30 นาที

เริ่ม Draft ด้วย Illustrator

ต่อมาคือ Draft หน้าจอออกมาคร่าวๆแต่ใกล้เคียงกับของจริงที่คิดไว้ให้มากที่สุด โดยใช้ Illustrator คู่ใจเจ้าของบล็อก (เพราะถนัดที่สุด) ใช้เวลาไป 5 ชั่วโมง ซึ่งเสียเวลามากพอสมควร แต่ก็ต้องคิดให้เสร็จ ณ ตรงนี้ เพื่อที่ว่าขั้นตอนต่อไปจะได้ทำได้ง่ายและไม่เสียเวลา จนในที่สุดได้ออกมาเป็นแบบนี้

หลังจาก Draft หน้าจอออกมาแล้วจะเห็นว่ามันมีหลายหน้าซึ่งหน้าที่เห็นนี้ถูกลดให้น้อยลงที่สุดเท่าที่ทำได้แล้ว (เพราะถ้ายิ่งเยอะก็จะเสียเวลาช่วงโค้ดนานมากขึ้น) แต่การลดจำนวนหน้าอาจจะยังไม่ดีพอ เพราะทุกหน้าในตอนนี้จำเป็นทั้งหมด ดังนั้นจึงต้องออกแบบแต่ละหน้าให้สามารถ Reuse ไปใช้ในหน้าอื่นได้ด้วย เพื่อลดขั้นตอนการโค้ดให้น้อยลงเข้าไปอีก

และเนื่องจากเจ้าของบล็อกเป็น Developer ที่ต้องมานั่ง Design เอง จึงสามารถออกแบบโดยให้แต่ละส่วนใช้เวลาทำไม่นานเกินไปได้ (เพราะดูอยู่แล้วว่า UI แบบไหนที่จะใช้เวลาน้อย)

ดังนั้นจากภาพข้างบน (ที่ดูไม่ค่อยจะชัด) จะเห็นว่ามีทั้งหน้าที่สามารถ Reuse ใช้ร่วมกันได้ และมี Layout บางกลุ่มที่เอาไป Reuse ใช้ในหน้าอื่นได้ด้วย ดังนั้นโค้ดในส่วนของ UI ที่ต้องเขียนใหม่จะมีน้อยมากๆ ซึ่งสรุปหลักการที่ใช้ในขั้นตอนนี้ได้ดังนี้

• ลดความซับซ้อนของ UI ให้น้อยที่สุด
• Reuse เท่าที่ทำได้ (เฉพาะบางส่วนก็ยังดี)
• สิ่งที่ออกแบบต้องทำ Mockup ได้ง่าย
• ใช้ Material Design เพราะมันออกแบบง่าย ไม่ต้องทำรายละเอียดภาพเยอะ
• ออกแบบสำหรับหน้าจอแบบเดียวก็พอ นั่นก็คือเครื่องที่เอาไป Demo ให้ลูกค้าดู

เริ่มสร้าง Mockup ขึ้นมาด้วยโค้ด

ฟังไม่ผิดหรอกครับ ขึ้น Mockup ด้วยการเขียนโค้ดจริงๆนี่ล่ะ ซึ่งถ้าว่ากันตามตรงไม่ค่อยแนะนำซักเท่าไร แต่เพื่อความสนุกสนานในชีวิต เจ้าของบล็อกจึงเขียนบน Android Studio นี่ล่ะ เพราะอยากให้ออกมาเป็น Mockup ที่ทำงานได้เหมือนจริงมากที่สุด (กระแดะชะมัด)

แต่สิ่งที่ทำหลังจากสร้างโปรเจคขึ้นมานั้นไม่ใช่การจัด Layout ในทันที เจ้าของบล็อกจะเตรียม Resource ที่จำเป็นทั้งหมดให้พร้อมก่อน นั้นก็คือบรรดา Color, Dimension และ Style นั่นเอง

เพราะตอนขึ้น Layout ทั้งหมดเจ้าของบล็อกจะ (กระแดะ) ไม่ใส่ Hard Code ลงไปในนั้นเลย จะเรียกผ่าน Resource ทั้งหมด ส่วน String ไว้ค่อยสร้างระหว่างขึ้น Layout เอา

เพื่อความรวดเร็วและลดความยุ่งยากที่จะต้องเขียน ให้เลี่ยงการใช้ Fragment ถ้าไม่จำเป็น แล้วใช้ Activity แทนทั้งหมด แล้วสร้าง Base Activity Class สำหรับคำสั่งบางคำสั่งที่ต้องใช้ร่วมกันในทุกๆ Activity (อย่างเช่นกำหนด Title ใน Toolbar หรือคำสั่งแสดง Dialog ที่ Custom ไว้)

ในขั้นตอนการจัด Layout ก็จะเน้นการสร้าง Layout XML โดยมีการสร้าง Sub Layout แยกตามแต่ละส่วนของหน้านั้นๆแล้วใช้วิธี Include ในหน้าที่ต้องการอีกทีเพื่อให้สามารถ Reuse ได้สะดวกและไล่เช็คได้ง่าย

และถึงแม้ว่าจะรีบทำแต่ก็ยังคงซีเรียสกับการตั้งชื่อไฟล์และตัวแปรภายในโค้ดอยู่ดี (มันติดเป็นนิสัยไปซะแล้ว)

รวมไปถึงโค้ดที่แยกเป็น Method เล็กๆน้อยๆก็ตาม คิดในแง่ดีก็คือมันก๊อปไป Reuse ในหน้าต่างๆได้ง่ายดีนะ เพราะแยกเป็นส่วนๆ อยากเอาส่วนไหนไปใช้ก็ก๊อป Method นั้นไปแก้ไขต่อได้เลย

สำหรับส่วนที่ต้องเชื่อมต่อกับ Web Service ก็ไม่พ้นต้องใช้วิธีสมมติมันขึ้นมา จึงใช้วิธีสร้าง Service Class หลอกๆขึ้นมา แล้วข้างในเพียงแค่ Mock ข้อมูลขึ้นแล้วส่งกลับมาเป็น Callback โดยจะให้รอราวๆ 1 วินาทีเพื่อจำลองความรู้สึกว่ามันกำลังเชื่อมต่อกับเซิฟเวอร์จริงๆ และที่โยนกลับมาก็เป็น Model นั่นก็หมายความว่าในโปรเจคนี้ก็ยังคงเขียนเป็น MVC จริงๆจังๆอยู่นะเออ

ที่ขาดไม่ได้เลยคือการทำ View Animation ภายในแอปให้ดูน่าสนใจ ซึ่งในแต่ส่วนจะมีการสร้าง Animator Resource เตรียมแยกไว้โดยเฉพาะ มี Utility Class สำหรับเรียก Animator แบบสั้นๆ แล้วทำให้มันอยู่ในรูป Method ง่ายๆซะ

และในส่วนไหนที่ยังไม่ได้ใส่คำสั่งให้ลองใช้งานก็แสดง Toast หรือ Snackbar บอกซะหน่อย ผู้ใช้จะได้ไม่ต้องสงสัยว่าทำไมกดแล้วไม่มีอะไรเกิดขึ้น

ขั้นตอนการขึ้นแอปด้วยโค้ด ถือว่านานที่สุดละ (ไม่ค่อยแปลกใจ) คิดเวลาที่ใช้ไปในส่วนนี้แล้วจะราวๆ 12 ชั่วโมง

เสร็จแล้ว!! Mockup (หรือป่าวนะ?) ในเวลา 2 วัน

สุดท้ายก็เสร็จออกมาเป็น Mockup ที่ลองกดได้จริงๆและมี Animation ให้พอประทับใจ พร้อมสำหรับการเอาไปให้ลูกค้าดูแล้ว

และจากการขึ้น Mockup ครั้งนี้จึงทำให้สามารถนำโค้ดต่างๆและรูปแบบไปขึ้น Mockup เป็นแอปรูปแบบอื่นๆได้เพิ่มอีก 2 แอป ซึ่งเรียกได้ว่าใน 1 สัปดาห์ที่ผ่านมาได้ปั่น Mockup ไปถึง 3 ตัวกันเลย (เมามันโคตรๆ)

ซึ่งการ Mockup แบบบ้าๆของเจ้าของบล็อกก็เป็นเพียงแค่หนึ่งในรูปแบบการผ่อนคลายจากการเขียนโค้ดในงานหลักของเจ้าของบล็อกก็เพียงเท่านั้นเอง ลอง Challenge กับตัวเองด้วยแอปหนึ่งตัวและเวลาที่จำกัด ต้องทำอย่างไรถึงจะได้แอปออกมาไวที่สุดโดยเขียนด้วยโค้ดจริงๆ เพื่อให้ลูกค้าเห็นแล้วประทับใจ (หรือป่าวก็ไม่รู้)

และที่สำคัญก็คือตอนนี้ Mockup ตัวนี้ก็ได้ Open Source ให้ผู้ที่หลงเข้ามาอ่านลองเข้าไปดูโปรเจคตัวนี้ได้แล้วที่ Mockup-OneAM [GitHub] เผื่ออยากจะดูโค้ดข้างในแบบละเอียดๆว่าเจ้าของบล็อกเขียนเล่นไว้ยังไงบ้าง โดย Mockup ตัวนี้เหมาะสำหรับหน้าจอ 640 x 360 dp และเป็น Android 5.0 ขึ้นไปนะครับ

มีวิธีที่ดีกว่านี้ตั้งเยอะแยะไม่ใช่หรอ?

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

แต่ในความเป็นจริงผู้ที่หลงเข้ามาอ่านไม่จำเป็นต้องมานั่งทำ Mockup ด้วยวิธีแบบเดียวกับเจ้าของบล็อกเลยแม้แต่น้อย แต่เจ้าของบล็อกอยากจะขอแนะนำให้รู้จักกับเหล่า Prototyping Tools ที่จะมาช่วยให้ผู้ที่หลงเข้ามาอ่านทำ Mockup ได้แบบรวดเร็ว สำหรับทดสอบหรือนำไปเป็นตัวอย่างให้ลูกค้าดูก็ได้นะ ง่ายและเร็วกว่าด้วย

ซึ่งในปัจจุบันนี้บอกเลยว่ามี Prototyping Tools ให้เลือกใช้งานเยอะแยะมาก ซึ่งเจ้าของบล็อกก็ได้ลองใช้เวลาพักใหญ่ๆเพื่อนั่งดูว่ามีตัวไหนที่นิยมบ้าง และตัวไหนดียังไงไม่ดียังไง ลองเข้าไปอ่านกันในบทความนี้ได้เลยครับ มารู้จักกับ Prototyping Tools สำหรับงาน Mobile Application กันเถอะ