98 lines
5.4 KiB
Markdown
98 lines
5.4 KiB
Markdown
# Pre-Sprint 6 Mobile UX Review
|
|
|
|
## Summary
|
|
|
|
รอบนี้เป็น final Mobile and Tablet UX review ต่อจาก responsive audit เดิม โดยเน้นความใช้งานได้จริงบนจอเล็กมากขึ้น ไม่ใช่แค่ “ไม่ล้นจอ” แต่ต้อง “กดใช้งานได้, มองเห็น action, และอ่านข้อความไทยได้ชัด”
|
|
|
|
งานที่เก็บเพิ่มหลัก ๆ:
|
|
|
|
- เพิ่มการเข้าถึง search บน mobile
|
|
- ขยาย touch target ของ header/sidebar controls
|
|
- ปรับ mobile drawer/sidebar ให้ใช้งานง่ายขึ้นและปิดเองหลังเลือกเมนู
|
|
- ปรับ review dialog ให้เหมาะกับ mobile และข้อความไทย
|
|
- ตรวจซ้ำ shared surfaces ที่กระทบทุกหน้าของ TMS
|
|
|
|
## Screens Reviewed
|
|
|
|
Breakpoint targets:
|
|
|
|
- `360px`
|
|
- `390px`
|
|
- `412px`
|
|
- `768px`
|
|
- `1024px`
|
|
- `1440px`
|
|
|
|
TMS surfaces reviewed:
|
|
|
|
- `/dashboard/overview`
|
|
- `/dashboard/training-records`
|
|
- `/dashboard/training-records/[id]`
|
|
- `/dashboard/training-records/[id]/review`
|
|
- `/dashboard/pending-review`
|
|
- `/dashboard/courses`
|
|
- `/dashboard/training-policy`
|
|
- `/dashboard/import-employees`
|
|
- `/dashboard/master-review`
|
|
- `/dashboard/reports`
|
|
- shared sidebar / header / dialog / table toolbar / pagination
|
|
|
|
## Issues Found
|
|
|
|
1. Search ถูกซ่อนไว้บน mobile ทำให้ค้นหาใช้งานไม่ได้ในจอเล็ก
|
|
2. Sidebar trigger และ notification trigger มี touch target เล็กเกินไปสำหรับมือถือ
|
|
3. Sidebar menu item / sub item บน mobile สูงค่อนข้างเตี้ย กดพลาดได้ง่าย
|
|
4. Mobile sidebar drawer ยังไม่ปิดอัตโนมัติหลังเลือกเมนู ทำให้ flow ใช้งานช้ากว่าที่ควร
|
|
5. User dropdown ใน sidebar มีความเสี่ยงชนขอบจอเล็ก
|
|
6. Training record review dialog ยังเป็นอังกฤษ และ action buttons ยังไม่ optimize สำหรับ mobile
|
|
7. Mobile drawer width เดิมค่อนข้างแคบสำหรับข้อความไทยและชื่อเมนูยาว
|
|
|
|
## Issues Fixed
|
|
|
|
1. `SearchInput` รองรับ `compact` mode และแสดงปุ่มค้นหาใน header บน mobile
|
|
2. ขยาย touch target ของ:
|
|
- sidebar trigger
|
|
- notification button
|
|
3. ปรับ `SidebarMenuButton` และ `SidebarMenuSubButton` ให้มีความสูงขั้นต่ำเหมาะกับ touch บน mobile
|
|
4. ปรับ mobile sidebar width ให้กว้างขึ้นแต่ยังไม่เกิน viewport
|
|
5. เพิ่ม behavior ปิด `setOpenMobile(false)` หลังเลือกเมนูหรือ sub menu ใน sidebar
|
|
6. จำกัดความกว้าง user dropdown ให้พอดีกับหน้าจอมือถือ
|
|
7. ปรับ `training-record-review-dialog` เป็นภาษาไทย และทำ action buttons เป็น full width บน mobile
|
|
|
|
## Remaining Risks
|
|
|
|
1. รอบนี้ยังเป็น code-based UX review ร่วมกับ type/lint verification ยังไม่มี screenshot automation หรือ manual device run จริงใน session นี้
|
|
2. บาง data table ยังต้องพึ่ง horizontal scroll ตามธรรมชาติของข้อมูล เพราะไม่เหมาะกับการ collapse cell แบบ card ในรอบนี้
|
|
3. Notification panel และ non-TMS legacy surfaces ยังไม่ได้ทำ localization ทั้งหมด เพราะอยู่นอกขอบเขต sprint นี้
|
|
|
|
## Go-Live Mobile Readiness Score
|
|
|
|
`8.8 / 10`
|
|
|
|
เหตุผล:
|
|
|
|
- Shared mobile UX blockers หลักถูกปิดแล้ว
|
|
- ไม่มี type error
|
|
- ไม่มี lint error ที่บล็อกงาน
|
|
- TMS pages หลักอยู่ในสภาพพร้อม QA ต่อบนอุปกรณ์จริง
|
|
|
|
คะแนนยังไม่เต็มเพราะ:
|
|
|
|
- ยังไม่มี visual/device verification จริง
|
|
- ยังมีบางส่วนที่ใช้ horizontal scroll โดยตั้งใจ
|
|
|
|
## Recommendation
|
|
|
|
พร้อมเข้าสู่ Sprint 6 ได้ แต่ควรทำ final manual QA จริงก่อน go-live บน:
|
|
|
|
- iPhone width class: `390px`
|
|
- Android width class: `360px` และ `412px`
|
|
- iPad / tablet portrait: `768px`
|
|
|
|
จุดที่ควรเช็กด้วยคนจริงเป็นพิเศษ:
|
|
|
|
1. sidebar drawer flow หลังเปลี่ยน organization และเปลี่ยนหน้า
|
|
2. training records review flow บน mobile
|
|
3. report filters และ table scroll บน tablet
|
|
4. long Thai labels ในข้อมูลจริงที่ยาวกว่าชุด mock/development data
|