8 ขั้นตอน เพิ่ม Productivity ในการออกแบบเว็บไซด์ CMS
การพัฒนาเว็บไซด์ด้วย CMS (Content Management System) นั้นเป็นการพัฒนาเว็บไซด์โดยเรามุ่งเน้นความไว และคุณภาพของระบบ โดยใช้ฟีเจอร์บางส่วนจาก CMS ให้มากที่สุดเพื่อลดระยะเวลาในการพัฒนาและตอบสนองความต้องการของลูกค้าให้เร็วที่สุด
การออกแบบหน้าจอก็มีส่วนสำคัญมาก ไม่ว่าจะเป็นการเข้าถึงง่าย, ความคงที่ของการออกแบบ, ความสม่ำเสมอ และการวางเนื้อหาบทความ โดยทั่วไปแล้วการพัฒนา CMS จะใช้ Template ที่ติดมากับ CMS เจ้านั้น ๆ เป็นหลัก เช่น Wordpress, Umbraco, OrchardCore เป็นต้น
หากลูกค้ามีความต้องการที่จะออกแบบเทรมเพลต Template หรือหน้าจอ แบบ customize เองนั้น เราจะต้องอาศัยแนวคิดและใช้วิธีจัดการทางด้านเทคนิคค่อนข้างมาก
สิ่งสำคัญที่เราจะต้องคำนึงถึง คือ ความพอใจของลูกค้า, ระยะเวลา และข้อผิดพลาดที่อาจจะเกิดขึ้นได้ เช่น
1. ต้องออกแบบหน้าจอทั้ง Desktop, Tablet, Mobile ทำให้ใช้เวลาในโครงการมาก
2. ถ้าไม่ใช้ Design Frameworks ที่ดี จะทำให้แสดงผล Web Responsive ไม่ได้ทุกจุด จะต้องแก้ไขเป็นจุด ๆ ไป
3. ลูกค้ามีการเปลี่ยนแปลงหน้าจอบ่อย ๆ ทำให้ต้องมีการปรับแก้ไขเรื่อยๆ
นี่เป็นผลกระทบบางส่วนจากการวางแผน และออกแบบไม่ดี เรามีเทคนิคมานำเสนอแบบง่าย ๆ ดังนี้
1.การทบทวนเอกสารความต้องการ Requirement
เริ่มจากวิเคราะห์และกำหนดฟีเจอร์ของระบบว่ามีอะไรบ้าง อาจจะทำรายการเป็น checklist ไว้ หรือจะวาด หรือเขียนโพสอิทแปะไว้ก็ได้
(ขั้นตอนนี้เราจะยังไม่ลง design tools หรือ figma แต่เป็นการเอาไอเดียมาคุยกันภายในทีมหรือคุยกับลูกค้าก่อน จะทำให้มองเห็นภาพ และสามารถเสริมจุดแข็ง ลดจุดอ่อนได้ อีกทั้งได้ตรวจสอบความเข้าใจและแนวคิดของผู้ออกแบบได้)
2.สร้าง wireframe กำหนดแค่ Box เป็นตัวแทนของฟีเจอร์
เน้นวางตำแหน่งของฟีเจอร์ และกำหนดความสัมพันธ์ของการเข้าถึงหน้าต่าง ๆ มี page redirect action (รู้ว่า จุดไหนทำอะไร และไปไหน) สามารถปรับเปลี่ยนได้เรื่อยๆ หากมีการเปลี่ยนแปลงจะเน้นขยับ box เท่านั้น
(ขั้นตอนนี้ลงสามารถเขียนในกระดาษ หรือใช้ design tools หรือ figma ได้เลย)
ซึ่งถ้าการ ดราฟ หรือ ร่างแบบ wireframe ถ้าอ้างอิงมาจาก layout จริง ๆ ที่จะพัฒนาแล้วจะทำให้ลดเวลาการแก้ไขเป็นอย่างมาก
3. ศึกษา Theme ของ CMS ตัวที่เราคาดว่าจะพัฒนาว่ามีตัวไหนที่ตอบโจทย์แนวคิดเราหรือไม่
ถ้า Theme นั้น ๆ มี responsive ก็จะยิ่งดีและทำให้เราทำงานง่ายขึ้น
ซึ่งจะเป็น theme ที่ติดมากับ cms หรือ theme ที่นักพัฒนาคนอื่น ๆ ทำไว้แล้วก็ได้ (เน้น opensource ก่อน)
ถ้ามีก็หยิบมาเป็น Master Template
4. หากข้อ 3 ลองศึกษาแล้วไม่มีจริง ๆ ก็ให้ลองเลือก Design frameworks
เช่น bootstrap, Ant Design หรือ tailwind ตัวใดๆ ตัวนึงและตัวเดียวเท่านั้น มาเป็น Master Template ก่อน
5. ใช้ Master Template ให้เกิดประโยชน์สูงสุด
เมื่อมี Master Template ต้นแบบ แล้ว ให้พยายามใช้ layout, component, element, syntax ของตัวมันให้มากที่สุด และไปในทิศทางเดียวกัน ไม่มีการซ้อน css frameworks
6.สามารถเพิ่มเติม Layout ที่ไม่มีใน Master Template ได้
ในกรณีที่ต้องการพัฒนาเพิ่ม ให้เราประเมินการแก้ไขไว้ไม่ควรเกิน 40% ของต้นแบบที่เรามีอยู่ ในส่วนที่เป็นฟีเจอร์ หรือเป็นส่วนที่ต้องใช้เทคนิคเฉพาะ ให้ออกแบบโดยยังคงยึด Layout จาก Master Template ให้มากที่สุด
เช่น
หน้าทั่ว ๆ ไป กว่า 60% ต้องใช้โครงสร้างจาก Master Template ได้
เช่น Header — [Body1] — Footer
หน้าพิเศษ ก็ควรใช้โครงสร้างจาก Master Template ได้
เช่น Header — [….] — Footer แต่เราสามารถปรับ Body1 เป็น Body2 ได้
7. ถ้าข้อ 2–5 ไม่ตอบโจทย์ลูกค้า ก็จะออกแบบเอง design เอง พยายามไม่ complex มากเกินไป
8. สร้าง Design guideline กำหนด element ให้ตรงกันทุกตัว ไม่ว่าจะ button, space, font-size เป็นต้น
สรุป
การออกแบบเว็บไซด์เราจะต้องคำนึงถึง 3 องค์ประกอบที่สำคัญ คือ จุดมุ่งหมายการออกแบบเว็บไซต์, การสื่อสารเนื้อหาภายในเว็บไซด์ที่ชัดเจน และการแสดงผลบนอุปกรณ์ต่าง ๆ
ดังนั้นเพื่อการออกแบบที่ตรงเป้าหมาย, ลดระยะเวลาในการพัฒนา และช่วยเรื่องการสื่อสารระหว่างลูกค้า และทีมงาน เราควรกำหนดและหาวิธีการที่จะขจัดหรือลดปัญหาที่จะเกิดขึ้นให้ได้มากที่สุด
วิธีที่แนะนำเป็นแค่ส่วนหนึ่งและประสบการณ์จากการทำงานการออกแบบหน้าจอเว็บไซด์ด้วย CMS จากผู้เขียนเท่านั้น
หากใครมีเทคนิคดี ๆ สามารถแนะนำเข้ามาได้เลยครับ