บทที่แล้ว แอปของคุณเริ่มถามโลกภายนอกได้แล้ว และนั่นเป็นก้าวใหญ่
แต่มีอีกก้าวที่สำคัญไม่แพ้กัน: ข้อมูลจริงอย่างเดียว ยังไม่ได้แปลว่าใช้งานง่ายเสมอไป
ข้อมูลมาแล้ว แต่คนยังอาจอ่านไม่ออก
ลองนึกถึงตัวเลขแบบนี้
0.029
4.12
0.22
ถึงมันจะเป็นข้อมูลจริง แต่ถ้าไม่มีป้าย ไม่มีคำอธิบาย และไม่มีการจัดวางที่ดี คนเปิดมาก็ยังต้องเดาอยู่ดีว่ามันคืออะไร
นี่คือความต่างระหว่าง “ข้อมูลดิบ” กับ “ข้อมูลที่พร้อมให้คนใช้”
ถ้าคนเปิดแอปมาแล้วต้องใช้เวลาเกิน 3 วินาทีเพื่อเข้าใจว่าตัวเลขนี้หมายถึงอะไร แปลว่าการแสดงผลยังไม่ดีพอ
ถ้าครัวทำอาหารเสร็จแล้ว ก็ต้องจัดจานให้คนกินรู้เรื่องด้วย
ในบทที่แล้ว เราใช้ภาพว่า API เหมือนการสั่งอาหาร
บทนี้ให้คิดต่ออีกนิด: สมมติครัวทำอาหารเสร็จแล้ว แต่เอาวัตถุดิบทั้งหมดวางกองบนถาดโดยไม่จัดจานเลย
ของกินอาจจะครบ แต่ประสบการณ์ใช้งานยังไม่ดี
ข้อมูลจาก API ก็เหมือนกัน ครัวส่งของมาแล้วก็จริง แต่คุณยังต้องบอก AI ว่าอยากให้ “จัดจาน” ยังไง เพื่อให้คนเปิดมาแล้วเข้าใจทันที
สิ่งที่ช่วยให้ข้อมูลเข้าใจง่ายขึ้นทันที
เวลาแสดงข้อมูลจาก API มี 4 อย่างที่ช่วยมาก
- label (ป้ายกำกับ) บอกว่าตัวเลขนี้คืออะไร
- context (บริบท) บอกว่าควรอ่านมันยังไง เช่น
1 USD = 36.20 บาท - hierarchy (ลำดับความสำคัญบนหน้าจอ) ทำให้รู้ว่าอะไรควรเด่นก่อน
- layout (การจัดวาง) ทำให้ข้อมูลแต่ละก้อนแยกจากกันชัดเจน
พอ 4 อย่างนี้เริ่มเข้าที่ ข้อมูลชุดเดิมจะดูใช้งานง่ายขึ้นมาก แม้ตัวเลขจะไม่เปลี่ยนเลยก็ตาม
ตัวอย่างก่อน — ค่าเงินเดิม แต่คนเข้าใจเร็วขึ้นเยอะ
ลองนึกถึงแอปเช็คค่าเงินแบบหลังบทแรก
มีชื่อสกุลเงิน มีตัวเลข มีเวลาอัปเดต แต่ยังอาจดูเหมือนรายการข้อมูลที่วางต่อกันเฉยๆ คนใช้ต้องมองทีละบรรทัดและแปลเอง
ทีนี้ลองดูแบบที่ปรับแล้ว
แต่ละสกุลเงินอยู่ใน card ของตัวเอง มีรหัสสกุลเงินชัด มีตัวเลขใหญ่พออ่านง่าย และมีประโยคอธิบายตรงๆ เช่น 1 USD = 36.20 บาท ส่วนเวลาอัปเดตถูกย้ายไปอยู่ด้านบนแบบตัวเล็กลง เพราะสำคัญ แต่ไม่ควรแย่งความเด่นจากตัวเลขหลัก
สิ่งที่ดีขึ้นไม่ใช่เพราะ API ส่งข้อมูลใหม่ แต่เพราะคุณจัดการแสดงผลใหม่จนคนเข้าใจได้แทบจะทันที
ลงมือทำ — จัดจานข้อมูลให้อ่านง่ายขึ้น
เปิดโปรเจกต์เดิมจากบทที่แล้ว แล้วส่ง prompt นี้
ปรับการแสดงผลอัตราแลกเปลี่ยนให้อ่านง่ายขึ้น
- แสดงแต่ละสกุลเงินเป็น card แยกกันอย่างชัดเจน
- แสดงรหัสสกุลเงินหรือชื่อสกุลเงินให้เด่น
- แสดงอัตราแลกเปลี่ยนเป็นตัวเลขใหญ่ อ่านง่าย
- เพิ่มข้อความอธิบาย เช่น "1 USD = 36.20 บาท"
- แสดงวันที่และเวลาที่อัปเดตล่าสุดไว้ด้านบนด้วยตัวอักษรขนาดเล็กกว่า
- จัด layout ให้ดูดีทั้งบนคอมและมือถือ
ไม่เปลี่ยนฟังก์ชันหรือ design ที่มีอยู่แล้วprompt นี้ไม่ได้ขอข้อมูลใหม่
มันขอให้ AI เอาข้อมูลเดิมมาจัดใหม่ เพื่อให้คนอ่านแล้วเข้าใจเร็วขึ้น
ดูผลลัพธ์ — แล้วเทียบแบบไม่ต้องคิดเยอะ
หลังจาก AI ปรับเสร็จ ลองมองหน้าจออีกครั้ง
อย่าเพิ่งวัดว่าอะไรสวยกว่า เอาแค่คำถามง่ายๆ นี้ก่อน
ถ้ามีคนไม่เคยเห็นแอปนี้มาก่อน เขาจะเข้าใจไหมว่าตัวเลขแต่ละก้อนหมายถึงอะไร
ถ้าคำตอบคือใช่ แปลว่าการแสดงผลรอบนี้ทำงานแล้ว
อีกวิธีที่ดีมากคือ ลองให้คนใกล้ตัวดู 3 วินาที แล้วถามว่าเขาเข้าใจไหมว่านี่คืออะไร ถ้าเขาตอบได้ทันทีว่าเป็นแอปเช็คค่าเงิน และรู้ว่าตัวเลขหมายถึงอะไร นั่นคือสัญญาณที่ดีมาก
ถ้าคนดูแล้วเข้าใจได้เร็วขึ้น แอปของคุณก็ขยับจากการ “มีข้อมูล” ไปสู่การ “ใช้ข้อมูลได้จริง” แล้ว
ถ้ายังรู้สึกว่าแน่นหรืออ่านยาก ให้บอกเพิ่มแบบนี้
บางครั้ง AI จะใส่ข้อมูลครบ แต่ยังจัดวางแน่นเกินไป หรือทำให้ตัวเลขเด่นไม่พอ
ถ้าเป็นแบบนั้น ลองส่งต่อแบบนี้
ช่วยปรับการแสดงผลให้โล่งขึ้นและอ่านง่ายขึ้น
- เพิ่มระยะห่างระหว่าง card
- ทำให้ตัวเลขอัตราแลกเปลี่ยนเด่นกว่าข้อความอื่น
- ทำให้ข้อความอธิบายรองลงมา
- ทำให้เวลาอัปเดตเป็นข้อมูลรองที่ไม่เด่นเกินไป
ไม่เปลี่ยนฟังก์ชันหรือ design ที่มีอยู่แล้วคำว่า “สวยขึ้น” กว้างเกินไปสำหรับงานแบบนี้ ถ้าคุณรู้ว่าปัญหาคืออ่านยาก แน่นเกินไป หรือไม่รู้ว่าตัวไหนสำคัญกว่า ให้บอกตรงนั้นไปเลย
สำหรับแอปของคุณเอง
หลักเดียวกันนี้ใช้กับข้อมูลทุกแบบที่มาจาก API
- ถ้าเป็นแอปอากาศ: ใส่ป้ายว่าอุณหภูมิ ความชื้น และสภาพอากาศให้ชัด
- ถ้าเป็นแอปคำคม: ทำให้ข้อความหลักเด่น และแหล่งที่มารองลงมา
- ถ้าเป็นแอปวันหยุด: แยกชื่อวันหยุด วันที่ และประเภทให้มองออกทันที
- ถ้าเป็นแอป Pokemon: แยกชื่อ รูป และข้อมูลพื้นฐานออกเป็นก้อนที่อ่านง่าย
คำถามที่ใช้ตรวจงานได้ดีคือ:
คนเปิดมาแล้วเข้าใจใน 3 วินาทีไหม ว่าข้อมูลนี้คืออะไร และควรดูตรงไหนก่อน
บทนี้จริงๆ คือการเอาสิ่งที่คุณเรียนจากคอร์ส design กลับมาใช้กับข้อมูลสดจากภายนอกอีกครั้ง ข้อมูลดีแค่ไหนก็ไม่มีประโยชน์ ถ้าคนอ่านไม่ออก
วันนี้คุณไม่ได้ทำให้แอปแค่ดูดีขึ้น
คุณกำลังทำให้ข้อมูลจากโลกภายนอกกลายเป็นสิ่งที่คนใช้เข้าใจและตัดสินใจต่อได้
นี่คือความต่างระหว่างแอปที่ “ดึงข้อมูลมาโชว์” กับแอปที่ “ช่วยให้คนใช้ข้อมูลนั้นได้จริง”
และงานแบบนี้คือสิ่งที่แอปจริงแทบทุกตัวต้องทำ
คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง
- คุณเห็นความต่างระหว่างข้อมูลดิบกับข้อมูลที่พร้อมให้คนใช้
- คุณรู้จักหลัก 4 อย่างที่ช่วยให้ข้อมูลอ่านง่ายขึ้น: label, context, hierarchy, และ layout
- คุณปรับแอปเช็คค่าเงินให้เข้าใจได้เร็วขึ้น โดยไม่ต้องเปลี่ยนข้อมูลที่ดึงมา
- คุณเริ่มใช้ API ไม่ใช่แค่เพื่อเอาข้อมูลมา แต่เพื่อทำให้ข้อมูลนั้นมีประโยชน์กับคนดูจริงๆ
บทต่อไป เราจะเปลี่ยนแอปจากของที่โชว์ข้อมูลชุดเดิมตลอดเวลา ให้กลายเป็นเครื่องมือที่ผู้ใช้เลือกเองได้ว่าอยากดูสกุลเงินไหน จำนวนเท่าไร และอยากเปรียบเทียบอะไรกับอะไร