เทคโนโลยีและการพัฒนาอ่าน 14 นาที

ออกแบบ UX/UI ก่อนเขียนโค้ด ช่วยประหยัดเงินได้จริงไหม

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

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

UX กับ UI ไม่ใช่เรื่องเดียวกัน

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

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

ทำไมแก้ตอนเป็นภาพถึงถูกกว่าแก้ตอนเป็นโค้ด

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

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

ขั้นออกแบบส่งมอบอะไรให้คุณบ้าง

งานออกแบบระบบที่ครบไม่ได้มีแค่ภาพหน้าจอสวย ๆ ไม่กี่ภาพ ควรมีครบห้าอย่างนี้

  1. User Flow แผนภาพเส้นทางของผู้ใช้แต่ละบทบาท ตั้งแต่เข้าระบบจนทำงานเสร็จ ส่วนนี้คือที่ที่จับขั้นตอนตกหล่นได้มากที่สุด
  2. Wireframe โครงหน้าจอแบบขาวดำ ใช้คุยเรื่องข้อมูลอะไรอยู่ตรงไหน โดยไม่ให้สีและรูปมาดึงความสนใจ
  3. UI Design หน้าจอจริงพร้อมสี ตัวอักษร และขนาดทั้งบนคอมพิวเตอร์และมือถือ
  4. Prototype หน้าจอที่ต่อกันจนกดลองใช้ได้เหมือนระบบจริง
  5. Design System ชุดปุ่ม ฟอร์ม ตาราง และส่วนประกอบที่ใช้ซ้ำ เพื่อให้หน้าจอที่เพิ่มทีหลังหน้าตาไปในทางเดียวกัน

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

Prototype ที่กดได้ ช่วยให้ตัดสินใจขอบเขตงานได้แม่นขึ้น

คนส่วนใหญ่อ่านเอกสารสเปกแล้วนึกภาพระบบไม่ออก และไม่ผิดอะไรที่เป็นแบบนั้น แต่พอได้กดลองบน prototype ก็จะเห็นทันทีว่าขาดขั้นตอนไหน หน้าจอไหนมีข้อมูลเยอะเกินไป หรือฟีเจอร์ไหนที่ขอไว้แต่ไม่ได้ใช้จริง

ทีมเราใช้ AI ช่วยทำ prototype ที่กดใช้ได้จริงตั้งแต่ช่วงคุยโจทย์ ลูกค้าจึงได้ลองของจริงก่อนเคาะขอบเขตงาน แทนที่จะตัดสินใจจากภาพนิ่ง ทักษะนี้มีที่มาจากใบรับรองของทีมด้วย ผลพลอยได้คือราคาที่แม่นขึ้น เพราะความไม่ชัดเจนคือตัวแปรที่แพงที่สุดในการประเมินงบ

ให้คนที่จะใช้จริงลอง ไม่ใช่แค่คนที่อนุมัติ

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

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

เมื่อไหร่ที่ย่อขั้นออกแบบได้

การออกแบบเต็มรูปแบบไม่จำเป็นกับทุกงาน กรณีเหล่านี้ย่อลงได้โดยไม่เสี่ยงมาก

  • ระบบภายในที่ผู้ใช้ไม่กี่คน และเป็นฟอร์มกับตารางเป็นหลัก ใช้ชุดหน้าจอสำเร็จรูปแล้วออกแบบเฉพาะเส้นทางหลักก็พอ
  • องค์กรมี Design System ของตัวเองอยู่แล้ว งานออกแบบจะเหลือแค่ส่วน UX
  • ต้นแบบที่ทำเพื่อทดสอบว่ามีคนอยากใช้หรือไม่ ซึ่งยอมให้หยาบได้ แต่ต้องรู้ว่าวันที่มีผู้ใช้จริงจะต้องกลับมาเก็บงาน

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

ค่าออกแบบคิดจากอะไร

ค่าออกแบบขึ้นกับจำนวนเส้นทางผู้ใช้และจำนวนหน้าจอ มากกว่าระดับความสวย งานออกแบบเว็บไซต์องค์กรอย่างงาน TT.Software อยู่ในช่วง 20,000 – 150,000 บาท ส่วนระบบที่มีหลายบทบาท ค่าออกแบบจะตามจำนวนบทบาทและสถานะที่ต้องรองรับ

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

ตรวจงานออกแบบยังไง ถ้าคุณไม่ใช่นักออกแบบ

  • ลองทำงานหลักให้จบบน prototype ด้วยตัวเอง โดยไม่ต้องให้ใครอธิบาย
  • ทุกบทบาทที่จะใช้ระบบมีหน้าจอของตัวเองครบ ไม่ใช่แค่บทบาทของคุณ
  • มีหน้าจอตอนไม่มีข้อมูล ตอนเกิดข้อผิดพลาด และตอนไม่มีสิทธิ์
  • เปิดดูบนมือถือจริง ไม่ใช่แค่ภาพย่อบนจอคอมพิวเตอร์
  • ตัวหนังสืออ่านออกบนจอจริงในที่ที่ใช้งานจริง ไม่ใช่แค่ในห้องประชุม
  • ปุ่มที่ใช้บ่อยกดได้ง่ายด้วยนิ้วเดียว

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

คำถามที่พบบ่อย

UX กับ UI ต้องจ้างแยกกันไหม
ไม่จำเป็น ส่วนใหญ่ทีมเดียวทำทั้งสองส่วน สิ่งที่ควรดูคืองานออกแบบที่ได้มี User Flow และหน้าจอครบทุกสถานะหรือเปล่า ไม่ใช่มีแค่ภาพหน้าจอสวย ๆ
ออกแบบเสร็จแล้ว ตอนพัฒนาจะเปลี่ยนอะไรไม่ได้เลยหรือ
เปลี่ยนได้ การออกแบบไม่ได้ทำให้การเปลี่ยนแปลงหายไปทั้งหมด แต่ช่วยให้เรื่องใหญ่ถูกเจอตั้งแต่ตอนแก้ยังถูก สิ่งที่เหลือมาเจอตอนพัฒนามักเป็นเรื่องเล็กที่ไม่กระทบโครงสร้าง
เอางานออกแบบไปให้บริษัทอื่นพัฒนาต่อได้ไหม
ได้ ถ้าคุณได้ไฟล์ต้นฉบับมาด้วย และงานออกแบบมีหน้าจอครบทุกสถานะ ควรเขียนเรื่องสิทธิ์ในไฟล์ออกแบบไว้ในสัญญาให้ชัดตั้งแต่ต้น เหมือนเรื่องซอร์สโค้ด
ใช้ AI ออกแบบหน้าจอแทนนักออกแบบได้ไหม
AI ช่วยร่างหน้าจอและทำ prototype ได้เร็วมาก และเราก็ใช้แบบนั้นอยู่ แต่ยังต้องมีคนตัดสินว่าเส้นทางไหนถูกกับงานจริงของผู้ใช้ ซึ่งต้องรู้จากการคุยและการทดสอบกับคนที่ใช้งานจริง

อยากให้ช่วยดูเคสของคุณโดยเฉพาะไหม

เล่าโจทย์มาคร่าว ๆ ได้เลย เราตีกรอบงบและระยะเวลาให้ฟรีตั้งแต่คุยครั้งแรก

บทความที่เกี่ยวข้อง

โน้ตบุ๊กเปิดหน้าจอโค้ดโปรแกรมวางอยู่บนโต๊ะทำงานข้างสมุดบันทึก
ธุรกิจและงบประมาณ

ค่าจ้างเขียนโปรแกรมเท่าไหร่ วิธีประเมินงบก่อนเริ่มโปรเจกต์

Day1Solution.tech

ทำไมบริษัทซอฟต์แวร์ถึงตอบราคาทันทีไม่ได้ ตัวแปรอะไรบ้างที่กำหนดราคาจริง ช่วงราคาที่เจอในตลาดไทยเป็นเท่าไหร่ และต้องเตรียมอะไรไปคุยถึงจะได้ตัวเลขที่แม่น

อ่านบทความ13 นาที
ค่าจ้างเขียนโปรแกรมเท่าไหร่ วิธีประเมินงบก่อนเริ่มโปรเจกต์
ธุรกิจและงบประมาณ

เลือกบริษัทรับทำซอฟต์แวร์ยังไง คำถามที่ควรถามก่อนเซ็นสัญญา

Day1Solution.tech

ใบเสนอราคาหลายใบราคาต่างกันหลายเท่า และทุกเจ้าบอกว่าทำได้ บทความนี้รวมคำถามที่แยกบริษัทที่ทำได้จริงออกจากบริษัทที่แค่ขายเก่ง ตั้งแต่คุยครั้งแรกจนถึงสัญญา

อ่านบทความ17 นาที
เลือกบริษัทรับทำซอฟต์แวร์ยังไง คำถามที่ควรถามก่อนเซ็นสัญญา
วิศวกรสามคนดูข้อมูลบนโน้ตบุ๊กข้างไลน์ประกอบชิ้นส่วนในโรงงาน
ระบบองค์กร

ระบบ ERP โรงงาน ซื้อสำเร็จรูปหรือพัฒนาเอง เลือกยังไงไม่ให้เสียของ

Day1Solution.tech

เกณฑ์ตัดสินใจระหว่าง ERP สำเร็จรูปกับระบบที่พัฒนาเอง ต้นทุนที่คนมักลืมคิดทั้งสองทาง และทางเลือกที่สามที่โรงงานส่วนใหญ่เหมาะกว่าการเลือกสุดทางใดทางหนึ่ง

อ่านบทความ10 นาที
ระบบ ERP โรงงาน ซื้อสำเร็จรูปหรือพัฒนาเอง เลือกยังไงไม่ให้เสียของ

พิมพ์เพื่อค้นหาในบริการ ผลงาน ผลิตภัณฑ์ บทความ ข่าว ทีมงาน และคำถามที่พบบ่อย