กระบวนการพัฒนาเว็บไซต์
ออกตัวก่อนว่านี่คือขั้นตอนในแบบของผมเอง บางข้ออาจจะไม่ตรงกับทฤษฎี ซึ่งนำไปปรับใช้ได้หรือไม่ได้ตรงนี้ลองนำไปพิจารณาดูอีกครั้งครับ เพราะแนวทางการรับงานของแต่ละคนไม่เหมือนกัน โดยบทความนี้เขียนเพื่อบันทึกและแบ่งปัน กรณีรับงานพัฒนาเว็บไซต์แล้วจะได้ของตามความต้องการของลูกค้า โดยที่มีการแก้ไขเปลี่ยนแปลงน้อยที่สุดในภายหลัง (ซึ่งมีแน่นอน!) ดังนั้นการวางแผนวิเคราะห์ และออกแบบลำดับขั้นตอนกระบวนการพัฒนาเว็บไซต์ ตั้งแต่ต้นจนจบซึ่งค่อนข้างสำคัญมาก เพื่อตบให้งานที่ออกมามีความชัดเจนตรงตามวัตถุประสงค์ของลูกค้ามากที่สุด โดยสรุปเป็นขั้นตอนดังนี้ครับ
เริ่มต้น
สอบถามความต้องการ เพื่อให้ได้ข้อมูลเพื่อนำไปออกแบบวางแผนและเสนอราคา โดยจะมีการสัมภาษณ์ลูกค้า ซึ่งมีชุดคำถามเริ่มต้นดังนี้
- ต้องการเว็บไซต์เพื่อวัตถุประสงค์อะไร ? (ขายสินค้า/บริการ หรือแค่แสดงข้อมูลบริษัท) เพื่อประเมินสิ่งที่จะได้ ว่าจะคุ้มค่ากับการลงทุนทำไหม
- กลุ่มเป้าหมายคนเข้าเว็บไซต์คือใคร? ผู้ชาย ผู้หญิง คนอ้วนผอม หรือ กลุ่มธุรกิจองค์กร ขนาดเล็กใหญ่ ถ้าระบุชัดเจนจะมีส่วนช่วยในการออกแบบและพัฒนาฟีเจอร์ในระบบให้เหมาะสมกับกลุ่มผู้ใช้หลัก
- ถ้าทำเว็บไซต์ขายสินค้าทั่วไป และลูกค้าเป็นบุคคลทั่วไป หรือ SME ขนาดเล็ก โดยเฉพาะเพิ่งเริ่มต้นมีเว็บไซต์ครั้งแรก ผมจะแนะนำให้ไปใช้เว็บขายสินค้าสำเร็จรูปก่อน เพราะระบบของเขาดีอยู่แล้วอีกทั้งยังใช้งบประมาณไม่สูงมาก
- ต้องการธีมสีประมาณไหน ? (เป็นไปได้ขอเว็บไซต์อ้างอิงจากลูกค้าสัก 3 เว็บ)
- ให้ออกแบบโลโก้ใหม่หรือใช้โลโก้เดิม ? (ถ้ามีให้ลูกค้าเตรียมไฟล์ไว้ล่วงหน้าได้เลย)
- ใครคือผู้ประสานงานหลัก มีคนที่ต้องคุยด้วยจำนวนกี่คน ? (ขอชื่อนามสกุล, ที่อยู่อีเมล์ และเบอร์โทรศัพท์) ผู้ประสานงานมีคนที่มีอานาจตัดสินใจไหม ? ตรงส่วนนี้ให้จำไว้เลยว่าถ้ามีคนเกี่ยวข้องยิ่งมาก จะต้องใช้เวลาทำนานตามไปด้วย เพราะหลายคนหลายความ ดังนั้นควรประเมินราคาให้ดี โดยปกติถ้ามีผู้เกี่ยวข้องไม่เกิน 3 คน ส่วนตัวถือว่ากำลังดีครับ
- มีกำหนดระยะเวลาให้งานเสร็จแล้วหรือยัง ? ถ้ามีกำหนดมา เราจะได้รู้กำลังทรัพยากรตัวเองที่มีว่าสามารถทำทันไหม จะหาคนเพิ่มหรือปฏิเสธงานไป
หลังจากผ่านการคุยกับลูกค้าเรียบร้อยแล้ว จะทำตามลำดับขั้นตอนโดยห้ามข้ามขั้นตอนใดขั้นตอนนึงเด็ดขาด “Requirement” อะไรที่ไม่แน่ใจอย่ารับมาทำทันที ต้องสรุปกับลูกค้าให้ชัดรวมถึง “ขอบเขตงาน” เพราะไม่อย่างนั้นมีแก้บานปลายแน่นอน กระทบเวลา และราคาที่เสนอไปอาจจะเข้าเนื้อ ซึ่งตรงนี้ผมจะใช้หลักการ MVP features เพื่อเคาะสิ่งที่เราต้องการจริงๆ มีความสำคัญและสร้างมูลค่าทำประโยชน์จริงในการใช้งาน ไม่ใช่เอาแต่เพิ่มให้ครบๆดูเยอะไว้ก่อนอันนี้บานปลายไม่จบสิ้น
1. สรุปรายการความต้องการ (Requirment)
รายการสิ่งที่ลูกค้าต้องการเป็นข้อๆ Software Requirement Specification (SRS) เพื่อเป็นการเรียบเรียงสรุปและไม่ให้ตกหล่นส่งให้ลูกค้าดูว่าครบถ้วนตามที่คุยกันไว้หรือไม่ เช่น ให้ออกแบบเว็บไซต์ด้วย, ให้เราหาผู้ให้บริการ Server/Hosting , ออกแบบ Logo จากนั้นก็เริ่มแตกเป็นระบบโดยไล่เป็นหัวข้อ หน้าแรกมีส่วนไหน แสดง Banner, สินค้าใหม่, ข่าวโปรโมชั่น, ระบบตะกร้าสินค้า ให้ทำเป็นรายการเป็นข้อๆ จัดกลุ่มเพื่อให้ดูง่าย
2. ทำ Sitemap
ส่วนนี้จะทำให้ลูกค้าเห็นภาพรวมว่ามีระบบหรือมีหน้าเพจอะไรบ้าง ส่วนใหญ่ผมจะใช้ลักษณะเป็น mind map เพราะโยงข้อมูลได้ยืดหยุ่นดี
3. ร่างแบบ Wireframe
คือการวาด Sketch หน้าตา UI คร่าวๆ จะใช้เป็นเขียนลงบนกระดาษ หรือจะใช้โปรแกรมก็ได้ โดยจะมีลักษณะเป็นขาวดำ อาจจะมีลงถมสีเทาบ้างเพื่อเน้นส่วนต่างๆ แต่จะไม่มีการดีไซต์ใส่สี ข้อความ หรือรูปภาพจริงๆ เต็มรูปแบบ เพราะวัตถุประสงค์เพื่อสร้าง UI เพื่อสื่อสารให้เห็นตรงกันเร็วที่สุด รวมทั้งยังไม่ใช่ Cost สูงที่ต้องลงแรง Design แบบจริงจัง ซึ่งจะออกแบบพอให้เห็นภาพว่าจะมี Layout แบบไหน เมนู โลโก้ เนื้อหา รูปภาพ หรือฟีเจอร์ต่างๆ วางตรงจุดไหน ถ้าเป็นฟอร์มก็มีช่องกรอกอะไรบ้าง มีปุ่มกี่ปุ่ม นั่นเพื่อที่จะได้เห็นตรงกันกับลูกค้า ว่าหน้าตาจะประมาณนี้นะในแต่ละหน้า
4. วางแผนและจัดทำเอกสาร
จากขั้นตอนด้านบนจึงทำให้เราได้ข้อมูลมาพอสมควรที่จะวางแผนดำเนินงาน ระยะเวลารวมถึงประเมินราคา และจัดทำเอกสารได้ โดยมีเอกสารที่ควรทำให้ชัดเจนดังนี้
- ข้อเสนอโครงการ (Proposal)
- แผนการดำเนินโครงการ (Action plan)
- ใบเสนอราคา (Quotation)
5. ออกแบบ Business Flow หรือ Diagram
ออกแบบ Business Flow หรือ จะเป็น Diagram อื่นๆการทำงานของระบบให้กับทาง Developer ให้สามารถเห็นภาพของงานที่ต้องทำและทำงานที่สะดวกและรวดเร็วขึ้น
6. ออกแบบ Mockup
ขั้นตอนนี้เป็นการออกแบบจริงโดยอ้างอิงจาก Wireframe ที่เราได้ทำไว้ ขั้นตอนนี้เป็น Design นิ่ง ๆ อาจจะส่งให้ลูกค้าเป็นรูปหรือไฟล์ PDF เพื่อให้เค้าดูว่าใช่ที่ต้องการไหม
7. ทำ Prototype
ขั้นตอนนี้เป็นขั้นตอนสุดท้ายก่อนจะเริ่มการเขียนโปรแกรม คือการทำ Mockup เป็นรูปแบบ Interactive เช่น มีการใส่ลิงค์ เพื่อให้คลิกไปหน้าไหน กดตรงนี้เห็นอะไร หรือคลิกที่ปุ่มลงทะเบียนแล้วจะแสดงข้อความตอบรับแบบไหน สรุปคือทำให้เพื่อให้เห็น Flow การทำงานของระบบเสมือนใช้เว็บไซต์จริงๆนั่นเอง
7. เขียนโปรแกรม (Development)
หลังจากผ่านกระบวนการ Design Process มาแล้ว ขั้นตอนนี้การลง Code เพื่อเขียนโปรแกรมจึงเริ่มขึ้น ห้ามข้ามขั้นตอน Design ด้านบนเด็ดขาด ไม่อย่างนั้นอาจจะได้รื้อ Code ใหม่ เสียเวลาเสีย Cost โดยใช่เหตุ ยิ่งถ้าเป็น Developer จะรู้ดีว่าการแก้ยิบแก้ย่อย จะเป็นการเพิ่ม Bug ไปในตัวด้วย เสียน้ำตามาเท่าไหร่แล้วกับเรื่องนี้
8. ทดสอบและปรับปรุง (Testing)
ทดสอบระบบทั้งหมดก่อนส่งมอบงาน นอกจากเราทดสอบด้วยตัวเองแล้วก็ต้องให้ลูกค้าทดสอบด้วยทุกครั้งเช่นกัน แต่ถ้าจะให้แนะนำในขั้นตอนระหว่างที่เราเขียนโปรแกรม เป็นไปได้ควรทะยอยปล่อยฟีเจอร์ออกมาบ่อยๆ เพื่อให้ลูกค้าดูและให้ทดสอบทันทีแบบเล็กๆ เมื่อรับ Feedback ส่วนไหนมา ตรงนี้เก็บงานได้ก็เก็บไปก่อน แต่อันไหนที่ดูแล้วอาจจะมีผลกระทบกับระยะเวลา เราอาจจะแจ้งลูกค้าว่าอาจจะทำหลังสุดหรือดูแล้วมันเป็นการปรับปรุงที่เปลี่ยนจากที่ความต้องการเดิม ก็ต้องคุยกันตรงๆ โดยอาจจะเป็นเฟสถัดไปโดยคิดราคาเพิ่ม เหตุผลที่แนะนำแบบนี้ เพราะถ้าเราทำไปจนสุดแล้วสิ่งที่ต้องแก้ไขมันกระทบหลายส่วนตอนนั้นจะแก้ยาก ซึ่งทำให้กระทบกับระยะเวลาการพัฒนาเว็บไซต์
9. ดูแลบำรุงรักษา (Maintenance)
ส่วนการดูแลบำรุงรักษาระบบนี้ จะมีในทุก Project เพราะการพัฒนา Software จะต้องมี Bug หรือมีเก็บงานหยุมหยิมอย่างแน่นอน ระยะเวลาขึ้นอยู่กับขนาดและความซับซ้อน โดยทั่วไปก็มีตั้งแต่หลักเดือนถึงหลักปี แล้วแต่ตกลง โดยส่วนตัวถ้าเว็บไซต์ขนาดเล็ก ผมจะดูแลฟรี 3 เดือน หลังจากนั้นหากลูกค้า ยังให้ดูแลต่อ ก็จะคิดราคาเป็น 15-20 % ของ Project ต่อปี หรือหากเป็นรายเดือนก็การเฉลี่ยเอา ซึ่งราคาอาจต้องคิดคำนวณรวมว่าสโคปที่ต้องดูแลมีอะไรบ้าง และคุยตกลงกับลูกค้าให้ชัดเจนว่าเราดูแลอะไรบ้างเป็นข้อๆ ถ้ามีเพิ่มก็บวกเพิ่มตามเนื้องานครับ
ท้ายนี้ หวังว่าคงมีประโยชน์ครับ