รายงาน Worker UX/UI สำหรับไซต์ก่อสร้างไทย

ออกแบบหน้าจอมอบหมายงานให้หัวหน้าคนงานใช้ได้จริงกลางแดด ฝุ่น และเวลาจำกัด

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

ภาพรวม

ข้อสรุปสำหรับการ redesign

1

ทำให้เห็นงานเร่งด่วนก่อน

หน้าแรกควรตอบทันทีว่า วันนี้มีงานอะไร ใครยังไม่มีคนรับผิดชอบ งานไหนเสี่ยงล่าช้า และต้องอนุมัติอะไร ไม่ควรเริ่มด้วยแดชบอร์ดตัวเลขเยอะ

2

ลดภาระสายตาและการแตะผิด

ใช้ตัวอักษรใหญ่ คอนทราสต์สูง พื้นที่แตะอย่างน้อย 56px และเว้นระยะระหว่างปุ่มสำคัญ เพื่อรองรับ presbyopia แสงสะท้อน และถุงมือ

3

ยืนยันทุกการกระทำที่มีผลต่อทีม

การเปลี่ยนคน ยกเลิกงาน หรือส่งคำสั่งควรมีหน้าสรุปก่อนยืนยัน พร้อมปุ่มย้อนกลับหรือยกเลิกภายในเวลาสั้น ๆ เพื่อลดความเสียหายหน้างาน

Information Architecture

จัดลำดับข้อมูลตามการตัดสินใจหน้าไซต์

ควรทำ

แบ่งระบบเป็น 5 งานหลักที่หัวหน้าคนงานเข้าใจทันที: งานวันนี้, จัดทีม, แจ้งปัญหา, รออนุมัติ, ประวัติคำสั่ง

ไม่ควรทำ

ใช้เมนูแบบฝ่ายออฟฟิศ เช่น Resource Matrix, Optimization, Analytics เป็นเมนูแรก เพราะไม่ตรงกับภาษาหน้างาน

โครงสร้างแนะนำ

  1. หน้าแรก: สรุปงานวันนี้ แสดงงานเร่งด่วน งานยังไม่มีทีม และงานที่กำลังทำ
  2. มอบหมายงาน เลือกงานก่อน แล้วเลือกทีมที่พร้อม พร้อมเตือนทักษะและจำนวนคน
  3. สถานะทีม ดูว่าแต่ละทีมอยู่จุดไหน ว่างกี่คน และมีข้อจำกัดอะไร
  4. ปัญหาหน้างาน รายงานขาดคน อุปกรณ์ไม่พร้อม ฝนตก พื้นที่ไม่ปลอดภัย
  5. ยืนยันและประวัติ เก็บหลักฐานว่าใครสั่งอะไร เวลาไหน ส่งให้ทีมไหน
วันนี้ก่อน
เร่งด่วนก่อน
คนว่างก่อน
คำเตือนชัด
ย้อนกลับได้
Screen Layout

เลย์เอาต์ต้องอ่านได้ใน 3 วินาที

หลักการวางหน้าจอ

  • ใช้การ์ดงานขนาดใหญ่ แทนตารางแน่น ๆ เพราะอ่านกลางแดดง่ายกว่า
  • วางปุ่มหลักไว้ด้านล่างหรือด้านขวาล่าง เพื่อแตะง่ายด้วยนิ้วโป้ง
  • แสดงเพียง 1 งานหลักต่อหน้าจอใน flow มอบหมายงาน เพื่อลดการสับสน
  • แยกงานด่วนด้วยแถบสีและคำว่า “ด่วน” ไม่พึ่งสีอย่างเดียว
  • ใช้ sticky summary ด้านบน: วันที่, จำนวนทีมว่าง, งานรอคน, งานเสี่ยงช้า
เมนูใหญ่
5 รายการ
ด่วน เทคอนกรีต ชั้น 2 ขาด 4 คน
พร้อม ติดตั้งแบบหล่อ โซน B ทีมว่าง
สรุปก่อนส่ง
ปุ่มใหญ่
Visual Design

สี ตัวอักษร และคอนทราสต์สำหรับแดดจ้าและสายตายาว

ตัวอักษร ขนาดอ่านจริง

เนื้อหาอย่างน้อย 18px, หัวข้อการ์ด 24px, ตัวเลขสถานะ 32px ขึ้นไป ใช้ font weight 650-900 สำหรับข้อความสำคัญ

คอนทราสต์ อ่านกลางแดด

ข้อความหลักควรมี contrast อย่างน้อย 7:1 สำหรับผู้สูงวัย หลีกเลี่ยงเทาอ่อนบนพื้นขาว และไม่ใช้ข้อความบาง

พื้นที่แตะ รองรับถุงมือ

ปุ่มหลักขั้นต่ำ 56x56px, ปุ่มอันตราย 64px, ระยะห่างระหว่างปุ่มตรงข้ามอย่างน้อย 16px

สีสถานะ ใช้ทั้งสีและคำ

เขียว = พร้อม, เหลือง = ต้องเช็ก, ส้ม = ด่วน, แดง = เสี่ยงหรือผิดพลาด ทุกสีต้องมี label เช่น “พร้อม”, “ต้องเช็ก”, “ขาดคน”

ไอคอน ชัดและไม่กำกวม

ใช้ไอคอนจากภาพจริงหน้างาน เช่น หมวกนิรภัย คน รถ เครน นาฬิกา พร้อมคำกำกับเสมอ ห้ามใช้ไอคอนลอย ๆ ไม่มีข้อความ

พื้นผิว แยกชั้นข้อมูล

ใช้พื้นหลังโทนอุ่นแบบกระดาษ/ปูนอ่อน ลดแสงขาวจ้า แต่รักษาคอนทราสต์ของข้อความและปุ่มหลัก

Copywriting + Icon Usage

ภาษาไทยต้องตรง สั้น และใช้คำหน้างาน

หัวข้อ แนวทาง ตัวอย่างที่ควรใช้ ควรหลีกเลี่ยง
ปุ่มหลัก เริ่มด้วยคำกริยา บอกผลลัพธ์ชัด “ส่งงานให้ทีมนี้”, “ยืนยันเปลี่ยนหัวหน้าทีม” “Submit”, “OK”, “Process”
คำเตือน บอกปัญหา ผลกระทบ และทางเลือก “ทีมนี้ขาดช่างไฟ 1 คน งานอาจช้า เลือกทีมอื่นหรือส่งต่อ?” “Invalid assignment”
ไอคอน ใช้ประกอบคำ ไม่ใช้แทนคำ ไอคอนนาฬิกา + “เหลือ 25 นาที” แสดงไอคอนนาฬิกาอย่างเดียว
คำระบบ ใช้ภาษาคน ไม่ใช้ภาษาฐานข้อมูล “ยังไม่ได้เลือกทีม” “workerGroupId required”
Feedback, Confirm, Undo

ทุกการแตะต้องมีผลตอบกลับที่มองเห็นชัด

กำลังทำงาน

ใช้ progress แบบขั้นตอน เช่น “กำลังเช็กจำนวนคน 2/4” ไม่ใช้ spinner อย่างเดียว

สำเร็จ

แสดงผลลัพธ์ทันทีว่า “ส่งงานให้ทีมช่างไม้แล้ว” พร้อมเวลาและผู้รับผิดชอบ

ต้องเช็ก

เตือนก่อนส่งหากทีมไม่ครบ ทักษะไม่ตรง หรือชนกับงานอื่น แต่ยังให้ผู้ใช้ตัดสินใจได้

ผิดพลาด

บอกวิธีแก้สั้น ๆ เช่น “เน็ตหลุด ยังไม่ส่งคำสั่ง ลองส่งอีกครั้ง”

Confirmation

ก่อนส่งคำสั่ง ให้แสดงสรุปแบบอ่านเร็ว: งาน, พื้นที่, ทีม, จำนวนคน, เวลาเริ่ม, ความเสี่ยง และปุ่ม “ยืนยันส่งงาน”

Undo

หลังส่งคำสั่ง แสดงแถบ 8-12 วินาที: “ส่งงานแล้ว ยกเลิกได้ภายใน 10 วิ” เหมาะกับกรณีแตะผิดในไซต์

Error Recovery

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

Mobile Ergonomics

มือถือคืออุปกรณ์หลักของหัวหน้าคนงาน

งานด่วนวันนี้
อังคาร 2 มิ.ย. | ทีมว่าง 3 ทีม
ด่วน

เทคอนกรีต โซน A

ต้องการ 8 คน | พร้อม 5 คน | เริ่ม 10:30

ข้อกำหนดมือถือ

  • วางปุ่มหลักใน thumb zone ด้านล่าง ไม่บังคับเอื้อมไปมุมบน
  • ใช้ bottom sheet สำหรับเลือกทีม เพราะอ่านทีละตัวเลือกและปิดง่าย
  • หลีกเลี่ยง drag-and-drop เป็น flow หลัก เพราะใช้ยากเมื่อใส่ถุงมือ
  • รองรับจอแนวตั้ง 360px โดยไม่ต้องซูม
  • มีปุ่ม “โทรหาหัวหน้าทีม” หรือ “ส่งไลน์” ชัดเจนเมื่อเกิดปัญหา
  • เพิ่มโหมดตัวใหญ่หรือ “โหมดกลางแดด” สำหรับคอนทราสต์สูงและลดข้อมูลรอง
Thai Microcopy

ตัวอย่างข้อความภาษาไทยที่ใช้ได้ทันที

เริ่มมอบหมายงาน

เลือกทีมให้ “เทคอนกรีต โซน A”

บอกงานเฉพาะเจาะจง ลดการเดาว่าปุ่มนี้จะทำอะไร

ทีมไม่ครบ

ทีมนี้มี 5 คน แต่งานต้องการ 8 คน

ใช้ตัวเลขจริง ไม่ใช้คำกว้าง ๆ เช่น “ทรัพยากรไม่พอ”

เตือนทักษะ

ยังไม่มีช่างไฟในทีมนี้ ต้องเพิ่ม 1 คน

บอกข้อขาดและจำนวนที่ต้องแก้

ยืนยันก่อนส่ง

ยืนยันส่งงานนี้ให้ทีมช่างไม้?

คำถามชัด มีชื่อทีมและงาน ไม่ใช้ “คุณแน่ใจหรือไม่” อย่างเดียว

ส่งสำเร็จ

ส่งงานแล้ว ทีมช่างไม้ได้รับคำสั่ง 09:42

สร้างความมั่นใจว่าคำสั่งเกิดผลแล้ว

ยกเลิกได้

ส่งผิดใช่ไหม? กดยกเลิกได้ใน 10 วิ

เป็นภาษาคน ช่วยลดความเครียดเมื่อแตะผิด

เน็ตหลุด

เน็ตหลุด ยังไม่ได้ส่งคำสั่ง ลองอีกครั้ง

ยืนยันผลกระทบชัดเจนว่า “ยังไม่ได้ส่ง”

งานชนกัน

ทีมนี้มีงานอื่นถึง 11:00 เลือกต่อหรือเปลี่ยนทีม?

ให้ทางเลือกแทนการบล็อกผู้ใช้ทันที

ข้อมูลว่าง

ยังไม่มีงานรอจัดทีม วันนี้พร้อมเริ่มงานได้

empty state ควรบอกสถานะดี ไม่ปล่อยหน้าว่าง

Usability Heuristics

heuristics เฉพาะหัวหน้าคนงานสูงวัย

01

Recognition over recall

แสดงชื่อทีม รูป/สัญลักษณ์ทีม และงานล่าสุดให้เห็น ไม่บังคับจำรหัสทีม

02

Visibility of system status

ทุกคำสั่งต้องมีสถานะ “กำลังส่ง”, “ส่งแล้ว”, “ทีมรับแล้ว”, “ส่งไม่สำเร็จ”

03

Error prevention

เตือนก่อนส่งหากจำนวนคนไม่พอ งานชนกัน หรือทีมไม่มีทักษะที่ต้องใช้

04

User control and freedom

มีปุ่มกลับ แก้ไข และยกเลิกที่มองเห็นชัด ไม่ซ่อนในเมนูสามจุด

05

Consistency

คำว่า “ทีมพร้อม”, “ขาดคน”, “รออนุมัติ” ต้องใช้สีและตำแหน่งเดิมทุกหน้า

06

Minimalist design

ซ่อนข้อมูลวิเคราะห์ลึกไว้ในหน้าเพิ่มเติม หน้าแรกต้องเน้นการลงมือทำ

07

Accessibility in context

รองรับแดดจ้า ฝุ่น ถุงมือ เสียงรบกวน และมือถือจอเล็ก ไม่ใช่แค่ผ่านมาตรฐานบนโต๊ะทำงาน

08

Respect field hierarchy

ภาษาและ flow ต้องเคารพบทบาทหัวหน้าคนงาน เช่น ส่งคำสั่งให้หัวหน้าทีม ไม่แสดงเหมือนแชตทั่วไป

Delivery Checklist

เช็กลิสต์ก่อนส่ง UI ให้ใช้งานจริง

  1. ตัวอักษรเนื้อหาไม่ต่ำกว่า 18px และปุ่มหลักอ่านได้ในระยะถือมือถือปกติ
  2. ปุ่มหลักมีขนาดขั้นต่ำ 56x56px และมีระยะห่างจากปุ่มอันตราย
  3. งานด่วน งานขาดคน และงานเสี่ยงช้าเห็นได้โดยไม่ต้อง scroll ลึก
  4. สีสถานะทุกสีมีคำกำกับ ไม่พึ่งสีอย่างเดียว
  5. ทุก error บอกว่าเกิดอะไร ผลกระทบคืออะไร และต้องทำอะไรต่อ
  6. การส่งคำสั่งมีหน้าสรุปก่อนยืนยัน
  7. หลังส่งคำสั่งมี undo หรือช่องทางแก้ไขเร็ว
  8. empty state บอกสถานะและขั้นตอนถัดไป ไม่ปล่อยหน้าว่าง
  9. เลือกทีมได้โดยไม่ต้อง drag-and-drop
  10. ใช้งานบนจอ 360px ได้โดยไม่ต้องซูม
  11. ภาษาปุ่มเป็นภาษาไทยหน้างาน ไม่ใช้ศัพท์ระบบหรือศัพท์อังกฤษโดยไม่จำเป็น
  12. ผ่านการลองใช้กลางแจ้งหรือจำลอง glare ด้วยความสว่างจอสูงและแสงสะท้อน