มาทำ Wire Frames กันเถอะ

ผมไม่ทราบว่าเพื่อน ๆ designer, Media Agency และ บริษัทต่าง ๆ ส่วนใหญ่ในประเทศเรามี process การทำงานกันอย่างไรบ้าง แต่เท่าที่สอบถามคนรอบข้างนั้น หลาย ๆ คนยังไม่เคยใช้หลักการระดมสมองที่เรียกว่า Wire Framing นี้ น้อยคนมากที่รู้จัก หรือ อาจจะทำอยู่เป็นนิจแต่ไม่รู้ว่า ไอ้สิ่งที่ทำนั้นมันคือ อะไร ผมเองก็เพิ่งรู้จักมาเมื่อไม่กี่เดือนนี้เหมือนกัน ว่าสิ่งที่เราทำบางครั้งก่อนลงมือทำงานขั้นตอนหนึ่ง มันเรียกว่า Web Wire Framing ต้องขอบพระคุณพี่เอ้ @DjFunkyDog ที่เปิดหูเปิดตา และ เอื้อเฟื้อเวลานั่งสอนน้องคนนี้มา ณ ที่นี้ เป็นอย่างมากครับ (สอนโดยไม่รู้ตัวบางทีก็มี เอิ๊ก ๆ) ก่อนอื่นผมจะขออนุญาติอธิบายเกี่ยวกับ Wire Frames ก่อนนะครับ

Wire Frame นั้นเป็นขั้นตอนที่ ทุกคนที่เกี่ยวข้องในตัวผลิตภัณฑ์นั้น ๆ ต้องร่วมกันแสดงความคิดเห็น ก่อนลงมือผลิตเจ้าผลิตภัณฑ์นั้น ๆ ขึ้น เหมือนเป็นการร่วมกันร่าง พิมพ์เขียวของเจ้าสิ่ง ๆ นั้นขึ้นมา โดยแต่ละทีมนั้นสามารถทำ Wire Frame ของแต่ละทีมมาก่อน ก่อนที่จะ Finalize Wire Frames ของเจ้าผลิตภัณฑ์ที่จะสร้างขึ้นนั้นอีกทีเป็นรอบปิดท้าย

ผมขออนุญาติเรียนไว้ก่อนว่า wire framing นั้นไม่มีรูปแบบตายตัวในแต่ละผลิตภัณฑ์ และ ขั้นตอนการทำงานของแต่ละคน / บริษัท นั้นก็จะมีการ wire framing แตกต่างกันไปด้วย เพราะฉะนั้น พื้นที่นี้เป็นพื้นที่สำหรับการแลกเปลี่ยนครับ ถ้าเพื่อน ๆ พี่ ๆ น้อง ๆ มี idea ที่ดีกว่า หรือ แตกต่างอยากให้ share กันครับผม

ต่อไปผมขออนุญาติอธิบายให้เห็นเป็นภาพชัดเจนกันนะครับ ตัวอย่างที่ผมจะยกขึ้นมานั้นเป็นการ wire framing ที่ผมทำอยู่ในปัจจุบัน ซึ่งได้รับการขัดเกลา และ แนะนำจาก พี่เอ้อ @errorlloyd อีกแรงหนึ่ง ต้องขอบพระคุณมา ณ ที่นี้เช่นกันครับ

ขั้นตอนแรก:

Product Owner Team, Client หรือ Salesเขียน หรือ เก็บ requirements ทั้งหมดของ project ที่ตนต้องการว่ามีอะไรบ้าง เขียนโครงร่างออกมาให้ละเอียดที่สุดเท่าที่เราจะทำได้ครับ

ในฝั่ง Sales ของ Media Agency หรือ ตัว Freelancer ที่ต้องไปรับงานมาจาก client นั้นต้องมีเทคนิค และ วิธีการที่จะจัดการกับ client ของตนเอง เพื่อ scope requirement กลับมาเพื่อทีมงานของตนให้ได้ อันนี้ต้องใช้ประสบการณ์ของแต่ละท่านนะครับ

หมายเหตุ ในกรณีที่ต้องนำ product เก่ามีพัฒนาต่อ อย่าลืมขั้นตอนการ researching feedback ของ users ที่มีต่อ product ของคุณด้วยครับ

ขั้นตอนที่สอง:

หลังจากที่คุณได้ requirements มาแล้วต่อไปฝั่ง Production Team ทั้งหลายนั้นต้องเตรียมเอา requirement ที่ได้จากฝั่ง Product Owner / Client / Sales ไปละลายวิเคราะห์ แยกเป็นงานของตนก่อน เช่น

Designer ต้องทำอะไรบ้าง มีอะไรที่จะต้องแจ้ง Coder และ Programmer บ้าง ในงานที่ตนเองจะออกแบบ สำหรับ project นี้

Coder เช่นกันครับ list สิ่งที่ตัวเองต้องทำออกมา หรือ ข้อจำกัดคร่าว ๆ หรือ คำแนะนำ ที่จะมาเป็น guideline สำหรับ Designer และ Programmer ที่มองเห็นได้จาก requirement มาโดยละเอียด

Programmer พยายามเขียน function และ features และ algorithm ออกมาโดยละเอียดจาก requirement ก่อน เพื่อนำมาพูดคุยร่วมกันกับ Designer และ Coder อีกครั้ง ว่ามีอะไรที่เหมือนหรือแตกต่างกันอย่างไร ใน Finalize Wire Frames

หมายเหตุ ใน case ที่คุณไม่ได้คิด product ขึ้นมาเอง หรือ โครงสร้างของ project ไม่ซับซ้อน หรือ ใหญ่มาก และ มี requirement สมบูรณ์ หรือ ค่อนข้างจะสมบูรณ์ จาก client แล้ว เมื่อ sales หรือ leader ของทีมกลับมา คุณสามารถ ข้ามขั้นตอนที่ 2 นี้ไปได้เลยครับ ไปสู่ Finalize Wire Frames ได้เลย

สิ่งที่ได้จากขั้นตอนที่สอง คือ project timeline คร่าว ๆ ของแต่ละฝ่ายที่จะอธิบายให้กับ Project Manager ใน Finalize Wire Frames ส่วนใน กลุ่ม freelancer อาจจะเป็นคนใดคนหนึ่งที่มีหน้าที่รับผิดชอบ ติดตาม ควบคุม project

ขั้นตอนสุดท้าย:

เมื่อได้ wire frames ของแต่ละ part การทำงานสิ่งสุดท้ายคือ การ wire frame ร่วมกัน หรือ Finalize Wire Frames

• Ads Slot ควรใช้ร่วมกัน จะเตรียม code ให้ Programmer อย่างไร และ Designer ควรออกแบบ Ads Slot ออกมาอย่างไร
• Usability ของ project นี้เป็นอย่างไร Designer ร่างแบบมาโอเคไหม ทีมอื่น ๆ มีความเห็นว่าอย่างไร วิเคราะห์กับ ผลการวิจัยที่เก็บรวบรวมมาแล้ว โอเคหรือไม่
• AJAX effect บริเวณ login form ทางฝั่ง Programmer อาจจะใช้ jQuery มาช่วย Coder จำเป็นจะต้องออกแบบ Structure ของ XHTML ตามที่ Programmer กำหนดไหม หรือ ออกแบบให้ Accessibility สูงสุดได้ตามใจเลย Programmer สามารถประกอบ หรือ modify เองได้ โดยไม่เสียเวลาอะไรมากนัก
• Product Owner / Client / Sales ดูว่าภาพร่างบนกระดาน และ คำอธิบาย features และ function ต่าง ๆ ที่ทาง Production ทีมอธิบายมานั้นตรงตาม requirement ที่ตนต้องการหรือไม่ อันไหนเป็นไปได้ อันไหนเป็นไปไม่ได้ จะได้ปรับแก้ร่วมกัน หรือ นำไปบอกลูกค้า มี solution อะไรบ้างให้ลูกค้าเลือก (ถ้าเกิดกรณีนี้อาจจะต้องกลับไปถามกันก่อน แล้วกลับมา finalize กันอีกที เพราะลูกค้าอาจจะเลือก solution ที่เตรียมไว้ให้ หรือ ไม่เลือกเลย)

เมื่อ Finalize Wire Frames สิ้นสุด ทุกทีมร่วมกันระดมความคิดจนได้ blueprint ของ product ออกมาเป็นที่เรียบร้อย เราจะได้สิ่งที่ใช้ร่วมกันในแต่ละทีมมา และ สิ่งที่ต้องแยกกันทำของแต่ละทีม ฝั่ง Project Manager ก็จะได้ Project Timeline สามารถกำหนด Mile Stone คำนวณความเสี่ยง และ ค่าอะไรวุ่นวายอื่น ๆ ได้ (ถึงตรงนี้ Product Owner / Sales / Client ก็จะสบายใจไปหนึ่งเปราะแล้ว)

สุดท้ายเราจะได้ Frame Works ของแต่ละ part ของ Production Team เพื่อเป็นข้อกำหนดในการทำงานร่วมกัน และ ควรร่างเป็นเอกสารไว้เพื่อเอาไว้เป็นหลักอ้างอิงได้ เมื่อเกิดปัญหาในการพัฒนา Project ระหว่าง Production Team หรือ Production Team กับ Product Owner / Sales / Client และ Frame Works จะเป็นประโยชน์ในระยะยาวด้วยครับ เมื่อมีการกลับมาทำใหม่ หรือ พัฒนาต่อ จะได้รู้ว่าอะไรสามารถเอามาใช้ต่อ และ อะไรต้องทำขึ้นมาใหม่บ้างครับผม

ทีนี้คงพอจะเห็นประโยชน์ของมันกันบ้างแล้วนะครับ Wire Frames ควรร่วมกันทำเป็นอย่างยิ่งครับ เพื่อประโยชน์สูงสุด

สุดท้ายผมขอขอบคุณพี่เอ้ และ พี่เอ้อ อีกครั้งครับ พบกันใหม่ สวัสดี