มาทำ 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 ควรร่วมกันทำเป็นอย่างยิ่งครับ เพื่อประโยชน์สูงสุด

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

Back to Top

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

  1. radiz

    สำหรับผู้ที่ชอบ wire frames สามารถแวะชม online gallery ของ developers ทั่วโลกได้ที่นี่ ครับhttp://wireframes.tumblr.com/

    Reply

  2. DjFunkyDog

    เกิดมาก็เพิ่งรู้ว่าเค้าเรียกว่า Wire Frame นี่ละครับ…เอิ๊ก

    Reply

  3. up1

    process มันคุ้นๆ เหมือนว่าในที่ประชุมของแผนกจะทำ แต่ …. ในแง่ของความเป้นจริงดันไม่ยอมทำตามกันซะอย่างงั้น

    ปกติก็เริ่มต้น brainstorm กันซึ่งสำคัญอย่างมากกกกก

    ถ้าพูดในแง่ development นั้นทางทีมที่ผมทำมาจะแบ่งเป็นสองส่วนหลักๆ คือ
    – Web Programmer ทำหน้าที่เขียน web ควบคุมการใช้งานต่างๆ
    – Server/Backend Programmer ทำหน้าที่จัดการข้อมูลของระบบ

    ส่วนการแบ่งงานใช้พวก xp, agile มาช่วยบ้าง เช่นการทำ iteration process สำหรับงานต่างๆ การแจกจ่ายงานซึ่งจะใช้ story board มาช่วย

    หลังจากที่แบ่งงานพวกนี้แล้ว ทำให้สามารถ trace งานได้ง่าย และสามารถส่งงานให้ทีมหรือลูกค้าได้ตลอด ทำให้เห็นงานว่าตรงตามกับความต้องการหรือไม่ ถ้าไม่ก้สามารถทำ iteration นั้นได้อีก ตรงนี้ผมมองว่า win-win

    ส่วนเอกสารต่างๆ ที่้ต้องเกิดใน process คือ
    – features list
    – ui design [ not html ]
    – html
    – timeline
    – development document

    ….

    Reply

  4. pornantha

    นั่งรอดู ว่า Update โค้ดใหม่แล้ว Spam มันยังจะมาถล่มหรือเปล่า หึ

    Reply

  5. seefool

    เป็นเรื่องจำเป็นมากสำหรับงานที่จุกจิกอย่างการทำเวบไซต์
    ช่วงนี้ผมเห็นมีเครื่องมือช่วยทำ wireframe ในแบบ opensource เยอะเหมือนกัน
    ช่วยลดข้อผิดพลาดที่เกิดจากความเข้าใจไม่ตรงกัน หรือไม่ถูกใจแล้วมาแก้ไขทีหลังได้
    ได้งานที่ตรงใจ

    ที่สำคัญคือมันทำให้วางแผนเรื่องเวลาทำได้ตรงขึ้น
    สุดท้าย Productivity ก็น่าจะดีขึ้นด้วย

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top