ตัวอย่างใช้งานจริง
Guideline ที่มองเห็นและทดลองได้
ตัวอย่างนี้แสดงองค์ประกอบในบริบทของ CheckHealthNow เพื่อเชื่อมกฎการใช้งานกับหน้าจอจริง
การตัดสินใจ
ใช้เมื่อไร
เลือกจากเป้าหมายและบริบท ไม่ใช่จากรูปลักษณ์เพียงอย่างเดียว
- จัดปลายทางหลัก ชื่อหน้า และการกระทำระดับหน้า
- รวมทุกคำสั่งไว้บนแถบเดียว
- ซ้อน navigation หลายระดับโดยไม่มีลำดับ
โครงสร้าง
ส่วนประกอบสำคัญ
แต่ละส่วนมีหน้าที่ชัดเจนและทำงานร่วมกันเป็นระบบ
Leading action
Back หรือ menu ตามโครงสร้างข้อมูล
Title
ชื่อหน้าปัจจุบันหนึ่งรายการ
Actions
เรียงจากใช้บ่อยไป overflow
การใช้งานจริง
พฤติกรรมและการจัดวาง
กฎเหล่านี้ช่วยให้การใช้งานคงที่ในทุกขนาดหน้าจอ
Placement
รักษาตำแหน่ง title และ action ให้คาดเดาได้
Responsive
sidebar เปลี่ยนเป็น drawer; action รองย้ายเข้า overflow
Scroll
ใช้ pinned toolbar เมื่อผู้ใช้ต้องเข้าถึง action ตลอด flow
Guidance
Do / Don’t
ตัวอย่างต้องอธิบายเหตุผลและผลกระทบ ไม่ใช่แค่แสดงว่าถูกหรือผิด
- แสดง active destination และชื่อหน้าปัจจุบันชัดเจน
- เก็บ frequent action ไว้นอก overflow
- ใช้ toolbar เป็นที่รวมปุ่มทุกอย่าง
- ซ่อน primary action ในเมนูเพิ่มเติม
Accessibility
ใช้งานได้กับทุกคน
ข้อกำหนดการเข้าถึงเป็นส่วนหนึ่งของคุณภาพ ไม่ใช่ส่วนเสริม
- ใช้โครงสร้าง HTML ที่สื่อความหมายและลำดับโฟกัสตามการอ่าน
- รองรับการซูม 200% คีย์บอร์ด และ reduced motion
- ไม่ใช้สี ไอคอน หรือตำแหน่งเพียงอย่างเดียวเพื่อสื่อความหมาย
ข้อมูลอ้างอิง
สเปกที่สนับสนุน Guideline
ใช้สเปกหลังจากเข้าใจบริบทและกฎการใช้งานแล้ว
- พื้นที่กด
- ≥ 44×44px
- Toolbar
- 64–72px