← กลับไป Thoughts

Thoughts / บันทึกจากการทำงาน

เริ่มออกแบบจากข้อจำกัด: จากโจทย์กว้างสู่สิ่งที่ตรวจได้

ใช้ Creative Hub และเครื่องมือจัดป้ายเป็นตัวอย่างของการแยกปัญหา ตั้งเกณฑ์ตรวจ และเลือกสิ่งที่ควรทำก่อนเพิ่มฟีเจอร์

Panupong Wongsorn · เผยแพร่ · ปรับปรุง

Silence is not empty. It is where the unfinished parts of an idea stop rushing and start taking shape.

โจทย์อย่าง “ทำเครื่องมือให้ใช้ง่าย” ฟังดูชัด แต่ยังไม่ช่วยตัดสินใจว่าควรแก้หน้าจอไหน สิ่งที่ช่วยได้มากกว่าคือแยกคำว่าใช้ง่ายออกเป็นเหตุการณ์ที่สังเกตได้: ผู้ใช้กำลังทำอะไร ติดตรงไหน และรู้ได้อย่างไรว่าจบงานแล้ว

บทความนี้ใช้สองงานในคลังผลงานเป็นตัวอย่าง คือ Creative Hub สำหรับสร้างโปสเตอร์หลายภาษา และ เครื่องมือจัดป้าย A6 ลง A4 สำหรับเตรียมเอกสารพิมพ์ ทั้งสองงานมีข้อจำกัดต่างกัน แต่ใช้วิธีตั้งโจทย์เดียวกันได้

เขียนงานที่ผู้ใช้ต้องทำให้จบ

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

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

แยกปัญหาหน้าจอออกจากปัญหากระบวนการ

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

Creative Hub จัดกระบวนการเป็นห้าขั้น: ตั้งกริด เลือกสื่อ กรอกข้อมูลสินค้า จัดวาง แล้วเลือกภาษาและส่งออก การแยกขั้นทำให้เห็นว่าการตัดสินใจใดต้องเกิดก่อน แทนการจัดการทุกอย่างพร้อมกัน

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

ตั้งเกณฑ์ตรวจหนึ่งข้อก่อนเลือกวิธีแก้

เกณฑ์อย่าง “ไฟล์โปสเตอร์ที่ส่งออกต้องไม่มีข้อความตกขอบ” ช่วยให้เทียบการปรับขนาดตัวอักษรกับการเพิ่มพื้นที่ข้อความได้ ส่วน “พิมพ์แล้วต้องได้ขนาดจริง” ทำให้เห็นว่าควรตรวจหน่วยมิลลิเมตร การย่อ และระยะขอบ ก่อนเพิ่มลูกเล่น

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

เก็บสิ่งที่ไม่สำเร็จไว้ในบันทึก

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

ภาพก่อนและหลังควรใช้ข้อมูลและขนาดหน้าจอเดียวกัน ตัวเลขเวลาที่ลดลงหรือจำนวนข้อผิดพลาดควรมาจากการวัดจริง จำนวนขั้นตอนที่ลดลงยังไม่ใช่หลักฐานของเวลาที่ประหยัดได้

ลองใช้กับงานถัดไป

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

ดู กรณีศึกษา Creative Hub และ กรณีศึกษาเครื่องมือจัดป้าย เพื่ออ่านต่อว่าข้อจำกัดเหล่านี้ส่งผลต่อเทคโนโลยีและขั้นตอนใช้งานอย่างไร