คุณคงเคยไปที่นั่นมาก่อน เราจะเลือกระหว่างการแสดงโมดอลแก่ผู้ใช้อย่างไร และเราจะนำทางพวกเขาไปยังหน้าใหม่ที่แยกต่างหากเมื่อใด และมันสำคัญไหม? จริงๆแล้วมันไม่ การตัดสินใจมีอิทธิพลต่อโฟลว์ของผู้ใช้ บริบท ความสามารถในการดูรายละเอียด และความถี่ของข้อผิดพลาดและความสมบูรณ์ของงาน ทั้งสองทางเลือกสามารถก่อกวนและหงุดหงิดได้ ทั้งในเวลาที่ผิดและที่ที่ผิด ดังนั้นเราควรทำให้มันถูกต้องดีกว่า เรามาดูวิธีการทำเช่นนั้นกันดีกว่า Modals กับ Dialogs กับ Overlays กับ Lightboxes แม้ว่าเรามักจะพูดถึงองค์ประกอบ UI ที่เป็นโมดัลเพียงส่วนเดียว แต่เรามักจะมองข้ามความแตกต่างเล็กๆ น้อยๆ ที่ซับซ้อนระหว่างโมดัลประเภทต่างๆ ทั้งหมด ที่จริงแล้ว แต่ละโมดอลไม่เหมือนกัน โมดอล กล่องโต้ตอบ โอเวอร์เลย์ และไลท์บ็อกซ์ ฟังดูคล้ายกัน แต่จริงๆ แล้วแตกต่างกันมาก:
Dialogคำทั่วไปสำหรับ “การสนทนา” (ผู้ใช้ ↔ ระบบ) โอเวอร์เลย์แผงเนื้อหาขนาดเล็กที่แสดงที่ด้านบนของหน้า ModalUser ต้องโต้ตอบโดยปิดการใช้งานโอเวอร์เลย์ + พื้นหลัง ผู้ใช้ที่ไม่ใช่โมดัลจะต้องโต้ตอบกับการเปิดใช้งานการซ้อนทับ + พื้นหลัง พื้นหลังแบบไลท์บ็อกซ์หรี่แสงเพื่อเน้นความสนใจไปที่โมดอล
ตามที่ Anna Kaley ไฮไลต์ไว้ ภาพซ้อนทับส่วนใหญ่จะปรากฏผิดเวลา ขัดจังหวะผู้ใช้ในระหว่างงานที่สำคัญ ใช้ภาษาที่ไม่ดี และขัดขวางการไหลของผู้ใช้ สิ่งเหล่านี้ถูกรบกวนโดยธรรมชาติ และโดยทั่วไปจะมีความรุนแรงในระดับสูงโดยไม่จำเป็นต้องทำเช่นนั้นมากนัก
แน่นอนว่าผู้ใช้จะต้องช้าลงและถูกขัดจังหวะหากผลที่ตามมาจากการกระทำของพวกเขามีผลกระทบสูง แต่สำหรับสถานการณ์ส่วนใหญ่ การไม่ใช้โมดัลนั้นละเอียดอ่อนกว่ามากและเป็นตัวเลือกที่เป็นมิตรมากกว่าในการดึงบางสิ่งมาสู่ความสนใจของผู้ใช้ หากมีสิ่งใดฉันมักจะแนะนำให้เป็นค่าเริ่มต้น Modals → สำหรับงานเดี่ยวที่มีในตัวเอง ในฐานะนักออกแบบ เรามักจะมองข้ามโมดอลว่าไม่เกี่ยวข้องและน่ารำคาญ — และบ่อยครั้งที่เป็นเช่นนั้น! —แต่พวกเขาก็มีคุณค่าเช่นกัน การแจ้งเตือนผู้ใช้เกี่ยวกับข้อผิดพลาดที่อาจเกิดขึ้นหรือช่วยหลีกเลี่ยงข้อมูลสูญหายจะมีประโยชน์มาก นอกจากนี้ยังสามารถช่วยดำเนินการที่เกี่ยวข้องหรือเจาะลึกรายละเอียดได้โดยไม่รบกวนสถานะปัจจุบันของเพจ แต่ข้อได้เปรียบที่ใหญ่ที่สุดของโมดอลคือช่วยให้ผู้ใช้รักษาบริบทของหน้าจอปัจจุบันได้ มันไม่ได้หมายถึงเพียงแค่ UI แต่ยังแก้ไขอินพุต ตำแหน่งการเลื่อน สถานะของหีบเพลง การเลือกตัวกรอง การเรียงลำดับ และอื่นๆ
ในบางครั้ง ผู้ใช้จำเป็นต้องยืนยันการเลือกอย่างรวดเร็ว (เช่น ตัวกรองตามที่แสดงด้านบน) จากนั้นดำเนินการต่อทันที แน่นอนว่าการบันทึกอัตโนมัติสามารถบรรลุผลเช่นเดียวกัน แต่ก็ไม่จำเป็นหรือต้องการเสมอไป และการบล็อก UI ก็มักจะไม่ใช่ความคิดที่ดี อย่างไรก็ตาม โมดอลจะไม่ถูกใช้สำหรับงานใดๆ โดยทั่วไปแล้ว เราใช้สำหรับงานเดี่ยวที่มีทุกอย่างในตัวเอง โดยที่ผู้ใช้ควรรีบเข้าไปทำงานให้เสร็จ จากนั้นจึงกลับไปยังจุดเดิม ไม่น่าแปลกใจเลยที่พวกมันทำงานได้ดีสำหรับการโต้ตอบระยะสั้นที่มีลำดับความสำคัญสูง (เช่น การแจ้งเตือน การดำเนินการทำลายล้าง การยืนยันอย่างรวดเร็ว) เมื่อโมดัลช่วย: 🚫 Modals มักจะก่อกวน รุกราน และสร้างความสับสน 🚫 ทำให้ยากต่อการเปรียบเทียบและคัดลอก-วาง ✅ แต่ Modals อนุญาตให้ผู้ใช้รักษาบริบทได้หลายบริบท ✅ มีประโยชน์ในการป้องกันข้อผิดพลาดที่ไม่สามารถย้อนกลับได้และการสูญหายของข้อมูล ✅ มีประโยชน์หากการส่งผู้ใช้ไปยังหน้าใหม่อาจเป็นการรบกวน ✅ แสดงโมดอลเฉพาะในกรณีที่ผู้ใช้เห็นคุณค่าของการหยุดชะงัก ✅ ตามค่าเริ่มต้น เลือกใช้กล่องโต้ตอบที่ไม่ปิดกั้น (“ไม่ใช่โมดัล”) ✅ อนุญาตให้ผู้ใช้ย่อ ซ่อน หรือคืนค่ากล่องโต้ตอบในภายหลัง ✅ ใช้โมดอลเพื่อทำให้ผู้ใช้ช้าลง เช่น ตรวจสอบอินพุตที่ซับซ้อน ✅ ให้ทางออกด้วยการ “ปิด” ปุ่ม ESC หรือคลิกนอกกรอบ หน้า → สำหรับเวิร์กโฟลว์ที่ซับซ้อนและหลายขั้นตอน วิซาร์ดหรือการนำทางแบบแท็บภายในโมดอลทำงานได้ไม่ดีนัก แม้แต่ในผลิตภัณฑ์ระดับองค์กรที่ซับซ้อน แผงด้านข้างหรือลิ้นชักมักจะทำงานได้ดีกว่า ปัญหาเริ่มต้นขึ้นเมื่อผู้ใช้จำเป็นต้องเปรียบเทียบหรืออ้างอิงจุดข้อมูล แต่โมดัลก็บล็อกพฤติกรรมนี้ ดังนั้นพวกเขาจึงเปิดหน้าเดิมขึ้นมาใหม่ในหลายแท็บแทน
สำหรับโฟลว์ที่ซับซ้อนและกระบวนการหลายขั้นตอน เพจแบบสแตนด์อโลนจะทำงานได้ดีที่สุด นอกจากนี้ เพจยังทำงานได้ดีขึ้นเมื่อต้องการให้ผู้ใช้ให้ความสนใจอย่างเต็มที่ และการอ้างอิงไปยังหน้าจอก่อนหน้าก็ไม่มีประโยชน์มากนัก และลิ้นชักทำงานสำหรับงานย่อยที่ซับซ้อนเกินไปสำหรับโมดอลธรรมดา แต่ไม่ต้องการการนำทางแบบเต็มหน้า เมื่อใดที่ควรหลีกเลี่ยงกิริยา: 🚫 หลีกเลี่ยงโมดอลสำหรับข้อความแสดงข้อผิดพลาด หลีกเลี่ยงโมดอลสำหรับการแจ้งเตือนฟีเจอร์ หลีกเลี่ยงโมดอลสำหรับประสบการณ์การเริ่มต้นใช้งาน หลีกเลี่ยงโมดอลสำหรับงานหลายขั้นตอนที่ซับซ้อนและมีความยาว หลีกเลี่ยงโมดัลที่ซ้อนกันหลายอันแล้วใช้ก่อนหน้า/ถัดไปแทน หลีกเลี่ยงโมดอลที่กระตุ้นอัตโนมัติเว้นแต่จำเป็นจริงๆ หลีกเลี่ยงทั้งสองอย่างสำหรับงานที่เกิดซ้ำ ในผลิตภัณฑ์ที่ซับซ้อนและงานหนักจำนวนมาก ผู้ใช้จะพบว่าตัวเองทำงานเดิมๆ ซ้ำแล้วซ้ำอีก ที่นั่น ทั้งโมดัลและการนำทางหน้าใหม่เพิ่มความขัดแย้งเนื่องจากขัดขวางโฟลว์หรือบังคับให้ผู้ใช้รวบรวมข้อมูลที่ขาดหายไประหว่างแท็บหรือมุมมองต่างๆ ทั้งหมด บ่อยครั้งที่ผู้ใช้พบกับประสบการณ์ใช้งานไม่ได้ เต็มไปด้วยการยืนยันที่ไม่มีวันจบสิ้น คำเตือนที่เกินจริง คำแนะนำโดยละเอียด หรือเพียงแค่ขาดจุดอ้างอิง ดังที่ Saulius Stebulis กล่าวไว้ ในสถานการณ์เหล่านี้ ส่วนที่ขยายได้หรือการแก้ไขแบบแทนที่มักจะทำงานได้ดีกว่า โดยจะยึดงานไว้บนหน้าจอปัจจุบัน ในทางปฏิบัติ ในหลายสถานการณ์ ผู้ใช้ไม่ได้ทำงานให้เสร็จสิ้นโดยลำพัง พวกเขาจำเป็นต้องค้นหาข้อมูล คัดลอกและวางค่า ปรับแต่งรายการในที่ต่างๆ หรือเพียงตรวจสอบบันทึกที่คล้ายกันในขณะที่ทำงานผ่านงานของพวกเขา โอเวอร์เลย์และลิ้นชักมีประโยชน์มากกว่าในการรักษาการเข้าถึงข้อมูลพื้นหลังระหว่างงาน ด้วยเหตุนี้ บริบทจึงยังคงอยู่ที่เดิมเสมอ ซึ่งพร้อมสำหรับการอ้างอิงหรือคัดลอกวาง บันทึกโมดอลและการนำทางเพจสำหรับช่วงเวลาที่การหยุดชะงักเพิ่มมูลค่าอย่างแท้จริง โดยเฉพาะอย่างยิ่งเพื่อป้องกันข้อผิดพลาดร้ายแรง Modals กับ Pages: แผนผังการตัดสินใจ ย้อนกลับไปเมื่อไม่นานมานี้ Ryan Neufeld ได้รวบรวมคำแนะนำที่มีประโยชน์มากเพื่อช่วยให้นักออกแบบเลือกระหว่างโมดอลและเพจได้ มันมาพร้อมกับเอกสารสรุป PNG ที่มีประโยชน์และเทมเพลต Google Doc พร้อมคำถามที่แบ่งออกเป็น 7 ส่วน มันยาว ละเอียดมาก แต่น่าติดตามมาก:
อาจดูน่ากลัว แต่เป็นกระบวนการ 4 ขั้นตอนที่ค่อนข้างง่าย:
บริบทของหน้าจอ ขั้นแรก เราจะตรวจสอบว่าผู้ใช้จำเป็นต้องรักษาบริบทของหน้าจอที่ซ่อนอยู่หรือไม่ ความซับซ้อนและระยะเวลาของงาน งานที่ง่ายกว่า เน้น และไม่รบกวนสมาธิอาจใช้โมดอลได้ แต่โฟลว์ที่ซับซ้อนและยาวจำเป็นต้องมีหน้า อ้างอิงถึงหน้าที่อยู่เบื้องหลัง จากนั้น เราจะตรวจสอบว่าผู้ใช้มักจะต้องอ้างอิงข้อมูลในเบื้องหลังหรือไม่ หรืองานนั้นเป็นการยืนยันหรือการเลือกง่ายๆ หรือไม่ การเลือกโอเวอร์เลย์ที่เหมาะสม สุดท้ายนี้ หากโอเวอร์เลย์เป็นตัวเลือกที่ดีจริงๆ มันจะแนะนำเราให้เลือกระหว่างโมดอลหรือไม่ใช่โมดัล (เอนไปทางที่ไม่ใช่โมดัล)
ห่อขึ้น เมื่อใดก็ตามที่เป็นไปได้ ให้หลีกเลี่ยงการบล็อก UI ทั้งหมด มีกล่องโต้ตอบแบบลอย ครอบคลุม UI บางส่วน แต่สามารถนำทาง เลื่อน และคัดลอกวางได้ หรือแสดงเนื้อหาของโมดอลเป็นลิ้นชักด้านข้าง หรือใช้หีบเพลงแนวตั้งแทน หรือนำผู้ใช้ไปยังหน้าแยกหากคุณต้องการแสดงรายละเอียดมาก แต่ถ้าคุณต้องการเพิ่มประสิทธิภาพและความเร็วของผู้ใช้ ให้หลีกเลี่ยงโมดอลไม่ว่าจะด้วยวิธีใดก็ตาม ใช้สิ่งเหล่านี้เพื่อทำให้ผู้ใช้ช้าลง เพื่อรวมความสนใจของพวกเขา เพื่อป้องกันข้อผิดพลาด ดังที่เทเรซา เฟสเซนเดนกล่าวไว้ ไม่มีใครชอบถูกขัดจังหวะ แต่ถ้าคุณต้องการ ตรวจสอบให้แน่ใจว่ามันคุ้มค่ากับเงินที่เสียไป พบกับ “รูปแบบการออกแบบอินเทอร์เฟซอัจฉริยะ” คุณจะพบส่วนทั้งหมดเกี่ยวกับโมดอลและทางเลือกต่างๆ ได้ใน Smart Interface Design Patterns ซึ่งเป็นหลักสูตรวิดีโอความยาว 15 ชั่วโมงของเราพร้อมตัวอย่างเชิงปฏิบัติกว่า 100 รายการจากโปรเจ็กต์ในชีวิตจริง พร้อมการฝึกอบรม UX แบบสดในปลายปีนี้ ทุกอย่างตั้งแต่เมกะดรอปดาวน์ไปจนถึงตารางองค์กรที่ซับซ้อน — โดยมี 5 เซ็กเมนต์ใหม่ที่เพิ่มเข้ามาทุกปี ข้ามไปที่การแสดงตัวอย่างฟรี ใช้โค้ด BIRDIE เพื่อรับส่วนลด 15% พบกับรูปแบบการออกแบบอินเทอร์เฟซอัจฉริยะ หลักสูตรวิดีโอของเราเกี่ยวกับการออกแบบอินเทอร์เฟซและ UX
วิดีโอ + การฝึกอบรม UXวิดีโอเท่านั้นวิดีโอ + การฝึกอบรม UX$ 495.00 $ 699.00
รับวิดีโอ + การฝึกอบรม UX25 บทเรียนวิดีโอ (15 ชม.) + การฝึกอบรม UX แบบสด รับประกันคืนเงิน 100 วันเฉพาะวิดีโอ$ 300.00$ 395.00
รับหลักสูตรวิดีโอบทเรียนวิดีโอ 40 บทเรียน (15 ชม.) อัปเดตทุกปี มีให้ใช้งานในรูปแบบ UX Bundle พร้อมหลักสูตรวิดีโอ 2 หลักสูตร
ทรัพยากรที่เป็นประโยชน์
ป๊อปอัปประเภทต่างๆ โดย Anna Kaley แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบ UI Modals โดย Uxcel เราใช้ Modals มากเกินไป: แนวทาง UX โดย Adrian Egger กล่องโต้ตอบ Modal และ Nonmodal โดย Therese Fessenden การออกแบบ UI องค์กรสมัยใหม่: Modal Dialogs โดย James Jacobs Modals ในระบบการออกแบบ
