Automatically translated.View original post

Non-Popup Popup

6/4 Edited to

... Read moreสำหรับผู้ที่สนใจเรื่อง UX/UI การทำความเข้าใจประเภทของ Popup หรือหน้าต่างเด้งขึ้นบนหน้าจอเป็นสิ่งสำคัญมาก เพราะ Popup ที่ดูเหมือนกันนั้นในความเป็นจริงมีหลากหลายรูปแบบและหน้าที่ที่แตกต่างกันอย่างชัดเจน Modal เป็นหน้าต่างที่บังคับให้ผู้ใช้โฟกัสกับงานหนึ่งงานในขณะนั้นก่อนจะกลับไปทำงานเดิมต่อ เช่น การกรอกข้อมูลหรือยืนยันคำสั่ง เพื่อป้องกันความผิดพลาดโดยไม่ต้องออกจากหน้าปัจจุบัน การใช้ Modal อย่างถูกต้องจะช่วยลดความสับสนและเพิ่มประสิทธิภาพให้กับผู้ใช้ แต่ข้อควรระวังคือ หลีกเลี่ยงการเปิด Modal ซ้อน Modal เพราะจะทำให้ผู้ใช้รู้สึกงงและหน้าจอดูรก Alert Dialog ใช้สำหรับแจ้งเตือนที่สำคัญหรือเป็นด่านสุดท้าย เช่น การยืนยันการลบข้อมูลที่ไม่สามารถย้อนกลับได้ โดยบังคับให้ผู้ใช้เลือกก่อนทำงานอย่างอื่นต่อ ข้อดีคือป้องกันความเสียหายใหญ่หลวงได้แต่ไม่ควรใช้กับการแจ้งเตือนปกติ เพราะผู้ใช้มักคลิกข้ามโดยไม่อ่าน Snackbar หรือ Toast เป็นกล่องแจ้งสถานะสั้นๆ ปรากฏที่มุมจอประมาณ 2-3 วินาทีแล้วหายไป เหมาะสำหรับแจ้งผลการทำงานแบบไม่รบกวน เช่น "บันทึกสำเร็จ" ข้อควรระวังคือไม่ควรใส่ข้อความยาวเพราะเด้งขึ้นมาไม่นาน Tooltip คือกล่องคำอธิบายสั้นเล็กๆ ที่แสดงเมื่อเมาส์ชี้หรือกดค้าง เหมาะสำหรับแสดงข้อมูลเสริมโดยไม่รกหน้าจอ แต่ไม่ควรใส่ข้อมูลสำคัญ เพราะบนมือถือไม่มีการชี้เมาส์ทำให้ผู้ใช้ไม่เห็น Bottom Sheet เป็นแผ่นเมนูที่เลื่อนขึ้นจากขอบล่างหน้าจอมือถือ เหมาะกับการใช้งานมือเดียวและเพิ่มความสะดวกสบาย พร้อมแถบดึงเพื่อบอกให้ผู้ใช้รู่ว่าสามารถปิดหน้าต่างได้ด้วยการเลื่อนนิ้วลง Popover เป็นเมนูย่อยที่โผล่ขึ้นใกล้กับจุดที่ผู้ใช้แตะ ใช้โชว์คำสั่งเพิ่มเติมโดยไม่ขัดจังหวะสายตา เหมาะสำหรับการแสดงข้อมูลหรือคำสั่งแบบย่อๆ เพื่อรักษาความสะอาดของ UI การเลือกใช้ Popup แต่ละประเภทให้เหมาะสมกับบริบท เป็นกุญแจสำคัญในการออกแบบ UX/UI ที่ดี ที่จะช่วยให้ผู้ใช้รู้สึกเข้าใจง่าย ใช้งานลื่นไหล และไม่รำคาญจากหน้าต่างที่เด้งขึ้นมาบ่อยเกินไป ดังนั้นการศึกษาและทดลองใช้งาน Popup เหล่านี้อย่างมีสติและควบคุมจังหวะการปรากฏบนหน้าจอจะช่วยให้การออกแบบแอปหรือเว็บไซต์ของคุณสมบูรณ์ยิ่งขึ้น