ເຈົ້າອາດຈະເຄີຍຢູ່ທີ່ນັ້ນມາກ່ອນ. ພວກເຮົາເລືອກແນວໃດລະຫວ່າງການສະແດງ modal ກັບຜູ້ໃຊ້, ແລະເມື່ອໃດທີ່ພວກເຮົານໍາທາງພວກເຂົາໄປຫາຫນ້າໃຫມ່ແຍກຕ່າງຫາກ? ແລະມັນບໍ່ສໍາຄັນເລີຍບໍ? ໃນຄວາມເປັນຈິງ, ມັນເຮັດ. ການຕັດສິນໃຈມີອິດທິພົນໃນການໄຫຼຂອງຜູ້ໃຊ້, ສະພາບການຂອງເຂົາເຈົ້າ, ຄວາມສາມາດຂອງເຂົາເຈົ້າໃນການຊອກຫາລາຍລະອຽດ, ແລະຄວາມຖີ່ຂອງຄວາມຜິດພາດແລະການສໍາເລັດວຽກງານ. ທັງສອງທາງເລືອກສາມາດລົບກວນແລະອຸກອັ່ງ - ໃນເວລາທີ່ບໍ່ຖືກຕ້ອງ, ແລະຢູ່ບ່ອນທີ່ບໍ່ຖືກຕ້ອງ. ດັ່ງນັ້ນພວກເຮົາດີກວ່າເຮັດໃຫ້ມັນຖືກຕ້ອງ. ແລ້ວ, ໃຫ້ເບິ່ງວິທີການເຮັດແນວນັ້ນ. Modals vs. Dialogs vs. Overlays vs. Lightboxes ໃນຂະນະທີ່ພວກເຮົາມັກຈະເວົ້າກ່ຽວກັບອົງປະກອບ UI ແບບໂມດູນດຽວ, ພວກເຮົາມັກຈະບໍ່ສົນໃຈຄວາມແຕກຕ່າງທີ່ລະອຽດອ່ອນ, ສັບສົນລະຫວ່າງທຸກປະເພດທີ່ແຕກຕ່າງກັນຂອງ modals. ໃນຄວາມເປັນຈິງ, ບໍ່ແມ່ນທຸກ modal ແມ່ນຄືກັນ. Modals, dialogs, overlays, and lightboxes — ທັງຫມົດສຽງຄ້າຍຄືກັນ, ແຕ່ວ່າພວກເຂົາເຈົ້າແມ່ນແຕກຕ່າງກັນຫຼາຍທີ່ສຸດ:
DialogA ຄໍາສັບທົ່ວໄປສໍາລັບ "ການສົນທະນາ" (ລະບົບຜູ້ໃຊ້ ↔). ວາງທັບແຖບເນື້ອຫາຂະໜາດນ້ອຍສະແດງຢູ່ເທິງສຸດຂອງໜ້າ. ModalUser ຕ້ອງໂຕ້ຕອບກັບການວາງຊ້ອນ + ພື້ນຫຼັງຖືກປິດໄວ້. NonmodalUser ຕ້ອງໂຕ້ຕອບກັບການວາງຊ້ອນ + ພື້ນຫຼັງເປີດໃຊ້ງານ. LightboxDimmed ພື້ນຫລັງເພື່ອສຸມໃສ່ຄວາມສົນໃຈໃນ modal ໄດ້.
ດັ່ງທີ່ Anna Kaley ເນັ້ນໃຫ້ເຫັນ, ການວາງຊ້ອນກັນສ່ວນໃຫຍ່ຈະປາກົດໃນເວລາທີ່ຜິດພາດ, ຂັດຂວາງຜູ້ໃຊ້ໃນລະຫວ່າງວຽກງານທີ່ສໍາຄັນ, ໃຊ້ພາສາທີ່ບໍ່ດີ, ແລະທໍາລາຍການໄຫຼເຂົ້າຂອງຜູ້ໃຊ້. ພວກມັນຖືກລົບກວນໂດຍທໍາມະຊາດ, ແລະໂດຍປົກກະຕິມີລະດັບຄວາມຮ້າຍແຮງສູງໂດຍບໍ່ຈໍາເປັນຕ້ອງມີອັນນັ້ນ.
ແນ່ນອນວ່າຜູ້ໃຊ້ຈະຕ້ອງຊ້າລົງແລະຂັດຂວາງຖ້າຜົນສະທ້ອນຂອງການປະຕິບັດຂອງພວກເຂົາມີຜົນກະທົບສູງ, ແຕ່ສໍາລັບສະຖານະການທີ່ບໍ່ແມ່ນຮູບແບບແມ່ນມີຄວາມອ່ອນໄຫວຫຼາຍແລະເປັນທາງເລືອກທີ່ເປັນມິດກວ່າທີ່ຈະນໍາເອົາບາງສິ່ງບາງຢ່າງມາສູ່ຄວາມສົນໃຈຂອງຜູ້ໃຊ້. ຖ້າມີອັນໃດອັນໜຶ່ງ, ຂ້ອຍແນະນຳໃຫ້ມັນເປັນຄ່າເລີ່ມຕົ້ນສະເໝີ. Modals → ສໍາລັບການດຽວ, ວຽກງານທີ່ມີຕົນເອງ ໃນຖານະນັກອອກແບບ, ພວກເຮົາມັກຈະປະຕິເສດ modals ທີ່ບໍ່ກ່ຽວຂ້ອງແລະຫນ້າລໍາຄານ - ແລະມັກຈະເປັນ! — ແຕ່ເຂົາເຈົ້າມີຄຸນຄ່າຂອງເຂົາເຈົ້າເຊັ່ນດຽວກັນ. ພວກເຂົາສາມາດເປັນປະໂຫຍດຫຼາຍທີ່ຈະເຕືອນຜູ້ໃຊ້ກ່ຽວກັບຄວາມຜິດພາດທີ່ອາດຈະເກີດຂຶ້ນຫຼືຊ່ວຍພວກເຂົາຫຼີກເວັ້ນການສູນເສຍຂໍ້ມູນ. ພວກເຂົາເຈົ້າຍັງສາມາດຊ່ວຍປະຕິບັດການດໍາເນີນການທີ່ກ່ຽວຂ້ອງຫຼືເຈາະລົງໃນລາຍລະອຽດໂດຍບໍ່ມີການຂັດຂວາງສະຖານະປັດຈຸບັນຂອງຫນ້າ. ແຕ່ປະໂຫຍດທີ່ໃຫຍ່ທີ່ສຸດຂອງ modals ແມ່ນວ່າພວກເຂົາຊ່ວຍໃຫ້ຜູ້ໃຊ້ຮັກສາສະພາບການຂອງຫນ້າຈໍປະຈຸບັນ. ມັນບໍ່ໄດ້ຫມາຍເຖິງພຽງແຕ່ UI, ແຕ່ຍັງໄດ້ແກ້ໄຂການປ້ອນຂໍ້ມູນ, ຕໍາແຫນ່ງເລື່ອນ, ສະຖານະຂອງ accordions, ການຄັດເລືອກຂອງການກັ່ນຕອງ, ການຈັດລຽງ, ແລະອື່ນໆ.
ບາງຄັ້ງ, ຜູ້ໃຊ້ຈໍາເປັນຕ້ອງຢືນຢັນການເລືອກຢ່າງໄວວາ (ເຊັ່ນ: ການກັ່ນຕອງຕາມທີ່ສະແດງຂ້າງເທິງ) ແລະຫຼັງຈາກນັ້ນດໍາເນີນການທັນທີຈາກບ່ອນນັ້ນ. ການປະຫຍັດອັດຕະໂນມັດສາມາດບັນລຸໄດ້ຄືກັນ, ແນ່ນອນ, ແຕ່ມັນບໍ່ຈໍາເປັນຫຼືຕ້ອງການສະເຫມີ. ແລະການຂັດຂວາງ UI ມັກຈະບໍ່ແມ່ນຄວາມຄິດທີ່ດີ. ຢ່າງໃດກໍຕາມ, modals ບໍ່ໄດ້ຖືກນໍາໃຊ້ສໍາລັບວຽກງານໃດຫນຶ່ງ. ໂດຍປົກກະຕິ, ພວກເຮົາໃຊ້ພວກມັນສໍາລັບວຽກງານດຽວ, ດ້ວຍຕົນເອງທີ່ຜູ້ໃຊ້ຄວນຈະໂດດເຂົ້າໄປໃນ, ສໍາເລັດວຽກງານ, ແລະຫຼັງຈາກນັ້ນກັບຄືນໄປບ່ອນທີ່ພວກເຂົາຢູ່. ໂດຍບໍ່ແປກໃຈ, ພວກເຂົາເຮັດວຽກໄດ້ດີສໍາລັບການໂຕ້ຕອບທີ່ມີຄວາມສໍາຄັນສູງ, ສັ້ນ (ເຊັ່ນ: ການແຈ້ງເຕືອນ, ການກະທໍາທີ່ທໍາລາຍ, ການຢືນຢັນໄວ). ເມື່ອ modals ຊ່ວຍ: 🚫 Modals ມັກຈະລົບກວນ, ຮຸກຮານ, ແລະສັບສົນ. 🚫ມັນເຮັດໃຫ້ມັນຍາກທີ່ຈະປຽບທຽບແລະ copy-paste.✅ ແຕ່ modals ຊ່ວຍໃຫ້ຜູ້ໃຊ້ສາມາດຮັກສາຫຼາຍສະພາບການ.✅ ເປັນປະໂຫຍດເພື່ອປ້ອງກັນຄວາມຜິດພາດທີ່ບໍ່ສາມາດປ່ຽນແປງໄດ້ແລະການສູນເສຍຂໍ້ມູນ.✅ ເປັນປະໂຫຍດຖ້າສົ່ງຜູ້ໃຊ້ໄປຫາຫນ້າໃຫມ່ຈະລົບກວນ. ✅ ສະແດງໂມດູນພຽງແຕ່ວ່າຜູ້ໃຊ້ຈະໃຫ້ຄຸນຄ່າການລົບກວນເທົ່ານັ້ນ.✅ ໂດຍຄ່າເລີ່ມຕົ້ນ, ຕ້ອງການກ່ອງໂຕ້ຕອບທີ່ບໍ່ຖືກບລັອກ (“nonmodals”).✅ ອະນຸຍາດໃຫ້ຜູ້ໃຊ້ສາມາດຫຍໍ້, ເຊື່ອງ, ຫຼືຟື້ນຟູກ່ອງໂຕ້ຕອບໃນພາຍຫຼັງ. Pages → ສໍາລັບການເຮັດວຽກທີ່ສັບສົນ, ຫຼາຍຂັ້ນຕອນ Wizards ຫຼື tabbed navigation ພາຍໃນ modals ເຮັດວຽກບໍ່ດີເກີນໄປ, ເຖິງແມ່ນວ່າໃນຜະລິດຕະພັນວິສາຫະກິດທີ່ຊັບຊ້ອນ - ຢູ່ທີ່ນັ້ນ, ແຖບດ້ານຂ້າງຫຼື drawers ປົກກະຕິແລ້ວເຮັດວຽກດີກວ່າ. ບັນຫາເລີ່ມຕົ້ນໃນເວລາທີ່ຜູ້ໃຊ້ຕ້ອງການປຽບທຽບຫຼືອ້າງອີງຈຸດຂໍ້ມູນ — ແຕ່ modals ສະກັດກັ້ນພຶດຕິກໍານີ້, ດັ່ງນັ້ນເຂົາເຈົ້າເປີດຫນ້າດຽວກັນໃນຫຼາຍແຖບແທນ.
ສໍາລັບການໄຫຼເຂົ້າທີ່ສັບສົນຫຼາຍແລະຂະບວນການຫຼາຍຂັ້ນຕອນ, ຫນ້າ standalone ເຮັດວຽກທີ່ດີທີ່ສຸດ. ຫນ້າຕ່າງໆຍັງເຮັດວຽກໄດ້ດີກວ່າເມື່ອພວກເຂົາຕ້ອງການຄວາມສົນໃຈຢ່າງເຕັມທີ່ຂອງຜູ້ໃຊ້, ແລະການອ້າງອີງເຖິງຫນ້າຈໍກ່ອນຫນ້າແມ່ນບໍ່ມີປະໂຫຍດຫຼາຍ. ແລະ drawers ເຮັດວຽກສໍາລັບວຽກງານຍ່ອຍທີ່ສັບສົນເກີນໄປສໍາລັບ modal ງ່າຍດາຍ, ແຕ່ບໍ່ຕ້ອງການການນໍາທາງເຕັມຫນ້າ. ເມື່ອໃດທີ່ຈະຫຼີກເວັ້ນ modals: 🚫ຫຼີກເວັ້ນ modals ສໍາລັບຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດ. 🚫ຫຼີກເວັ້ນ modals ສໍາລັບການແຈ້ງເຕືອນຄຸນນະສົມບັດ. 🚫ຫຼີກເວັ້ນການ modals ສໍາລັບປະສົບການ onboarding. ຫຼີກເວັ້ນການທັງສອງສໍາລັບວຽກງານຊ້ໍາ ໃນຫຼາຍຜະລິດຕະພັນທີ່ສັບສົນ, ເຮັດວຽກຫນັກ, ຜູ້ໃຊ້ຈະພົບວ່າຕົນເອງປະຕິບັດຫນ້າວຽກດຽວກັນເລື້ອຍໆ, ເລື້ອຍໆ. ຢູ່ທີ່ນັ້ນ, ທັງ modals ແລະການນໍາທາງຫນ້າໃຫມ່ເພີ່ມຄວາມຂັດແຍ້ງເພາະວ່າພວກເຂົາຂັດຂວາງການໄຫຼຫຼືບັງຄັບໃຫ້ຜູ້ໃຊ້ລວບລວມຂໍ້ມູນທີ່ຂາດຫາຍໄປລະຫວ່າງແຖບຫຼືມຸມເບິ່ງທີ່ແຕກຕ່າງກັນທັງຫມົດ. ເລື້ອຍໆເກີນໄປ, ຜູ້ໃຊ້ຈົບລົງດ້ວຍປະສົບການທີ່ແຕກຫັກ, ເຕັມໄປດ້ວຍການຢືນຢັນທີ່ບໍ່ມີວັນສິ້ນສຸດ, ການເຕືອນໄພເກີນຈິງ, ຄໍາແນະນໍາແບບ verbose, ຫຼືພຽງແຕ່ຂາດຈຸດອ້າງອີງ. ດັ່ງທີ່ Saulius Stebulis ໄດ້ກ່າວມາ, ໃນສະຖານະການເຫຼົ່ານີ້, ພາກສ່ວນທີ່ສາມາດຂະຫຍາຍໄດ້ຫຼືການແກ້ໄຂຢູ່ໃນສະຖານທີ່ມັກຈະເຮັດວຽກໄດ້ດີກວ່າ - ພວກເຂົາຮັກສາຫນ້າວຽກໄວ້ກັບຫນ້າຈໍປະຈຸບັນ. ໃນທາງປະຕິບັດ, ໃນຫຼາຍໆສະຖານະການ, ຜູ້ໃຊ້ບໍ່ໄດ້ເຮັດສໍາເລັດວຽກງານຂອງເຂົາເຈົ້າໃນການໂດດດ່ຽວ. ພວກເຂົາຕ້ອງການຊອກຫາຂໍ້ມູນ, ຄັດລອກມູນຄ່າການວາງ, ປັບປຸງລາຍການໃນສະຖານທີ່ຕ່າງໆ, ຫຼືພຽງແຕ່ທົບທວນຄືນບັນທຶກທີ່ຄ້າຍຄືກັນຍ້ອນວ່າພວກເຂົາເຮັດວຽກຜ່ານວຽກງານຂອງພວກເຂົາ. ການວາງຊ້ອນກັນແລະລິ້ນຊັກແມ່ນມີປະໂຫຍດຫຼາຍກວ່າໃນການຮັກສາການເຂົ້າເຖິງຂໍ້ມູນພື້ນຫລັງໃນລະຫວ່າງການເຮັດວຽກ. ດັ່ງນັ້ນ, ສະພາບການຢູ່ສະເຫມີຢູ່ໃນສະຖານທີ່ຂອງມັນ, ມີສໍາລັບການອ້າງອີງຫຼືຄັດລອກ. ບັນທຶກ modals ແລະການນໍາທາງຫນ້າສໍາລັບຊ່ວງເວລາທີ່ການຂັດຂວາງຈະເພີ່ມມູນຄ່າຢ່າງແທ້ຈິງ - ໂດຍສະເພາະເພື່ອປ້ອງກັນຄວາມຜິດພາດທີ່ສໍາຄັນ. Modals ທຽບກັບຫນ້າ: ເປັນໄມ້ຢືນຕົ້ນການຕັດສິນໃຈ ໃນຂະນະກັບຄືນໄປບ່ອນ, Ryan Neufeld ເອົາຄູ່ມືທີ່ເປັນປະໂຫຍດຫຼາຍເພື່ອຊ່ວຍນັກອອກແບບເລືອກລະຫວ່າງ modals ແລະຫນ້າ. ມັນມາພ້ອມກັບເອກະສານ cheatsheet PNG ທີ່ມີປະໂຫຍດແລະແມ່ແບບ Google Doc ທີ່ມີຄໍາຖາມແບ່ງອອກເປັນ 7 ພາກ. ມັນເປັນຍາວ, ລະອຽດທີ່ສຸດ, ແຕ່ງ່າຍທີ່ຈະປະຕິບັດຕາມ:
ມັນອາດຈະເບິ່ງຄືວ່າເປັນຕາຢ້ານ, ແຕ່ວ່າມັນເປັນຂະບວນການ 4 ຂັ້ນຕອນທີ່ງ່າຍດາຍ:
ບໍລິບົດຂອງຫນ້າຈໍ.ທໍາອິດ, ພວກເຮົາກວດເບິ່ງວ່າຜູ້ໃຊ້ຕ້ອງການຮັກສາສະພາບການຂອງຫນ້າຈໍທີ່ຕິດພັນ. ຄວາມຊັບຊ້ອນຂອງໜ້າວຽກ ແລະໄລຍະເວລາ. ວຽກທີ່ງ່າຍກວ່າ, ເນັ້ນໃສ່, ບໍ່ລົບກວນສາມາດນຳໃຊ້ແບບໂມດູນໄດ້, ແຕ່ການໄຫຼວຽນທີ່ສັບສົນຫຼາຍແມ່ນຕ້ອງການໜ້າ. ການອ້າງອີງເຖິງຫນ້າທີ່ຢູ່ເບື້ອງຕົ້ນ.ຫຼັງຈາກນັ້ນ, ພວກເຮົາກວດເບິ່ງວ່າຜູ້ໃຊ້ມັກຈະຕ້ອງການອ້າງອີງຂໍ້ມູນໃນພື້ນຫລັງຫຼືວ່າວຽກງານແມ່ນການຢືນຢັນຫຼືການຄັດເລືອກທີ່ງ່າຍດາຍ. ການເລືອກການວາງຊ້ອນທີ່ຖືກຕ້ອງ. ສຸດທ້າຍ, ຖ້າການວາງຊ້ອນແມ່ນເປັນທາງເລືອກທີ່ດີແທ້ໆ, ມັນແນະນຳໃຫ້ພວກເຮົາເລືອກລະຫວ່າງແບບໂມເດລ ຫຼື ບໍ່ໂມດລ (ເອື່ອຍໄປເຖິງການວາງຊ້ອນກັນ).
ຫໍ່ຂຶ້ນ ເມື່ອເປັນໄປໄດ້, ຫຼີກເວັ້ນການບລັອກ UI ທັງໝົດ. ມີກ່ອງໂຕ້ຕອບທີ່ເລື່ອນໄດ້, ບາງສ່ວນກວມເອົາ UI, ແຕ່ອະນຸຍາດໃຫ້ນໍາທາງ, ເລື່ອນ, ແລະຄັດລອກວາງ. ຫຼືສະແດງເນື້ອໃນຂອງ modal ເປັນ drawer ຂ້າງ. ຫຼືໃຊ້ accordion ຕັ້ງແທນ. ຫຼືນໍາຜູ້ໃຊ້ໄປຫາຫນ້າແຍກຕ່າງຫາກຖ້າທ່ານຕ້ອງການສະແດງລາຍລະອຽດຫຼາຍ. ແຕ່ຖ້າທ່ານຕ້ອງການເພີ່ມປະສິດທິພາບແລະຄວາມໄວຂອງຜູ້ໃຊ້, ຫຼີກເວັ້ນການ modals ໃນຄ່າໃຊ້ຈ່າຍທັງຫມົດ. ໃຊ້ພວກມັນເພື່ອເຮັດໃຫ້ຜູ້ໃຊ້ຊ້າລົງ, ມັດຄວາມສົນໃຈຂອງເຂົາເຈົ້າ, ເພື່ອປ້ອງກັນຄວາມຜິດພາດ. ດັ່ງທີ່ Therese Fessenden ສັງເກດເຫັນ, ບໍ່ມີໃຜມັກຖືກລົບກວນ, ແຕ່ຖ້າທ່ານຕ້ອງການ, ໃຫ້ແນ່ໃຈວ່າມັນຄຸ້ມຄ່າແທ້ໆ. ພົບກັບ "ຮູບແບບການອອກແບບການໂຕ້ຕອບອັດສະລິຍະ" ທ່ານສາມາດຊອກຫາພາກສ່ວນທັງໝົດກ່ຽວກັບ modals ແລະທາງເລືອກໃນການອອກແບບການໂຕ້ຕອບແບບອັດສະລິຍະ, ຫຼັກສູດວິດີໂອ 15h ຂອງພວກເຮົາກັບ 100s ຂອງຕົວຢ່າງພາກປະຕິບັດຈາກໂຄງການຊີວິດຈິງ — ກັບການຝຶກອົບຮົມ UX ສົດໃນທ້າຍປີນີ້. ທຸກຢ່າງຈາກການຫຼຸດລົງຂະໜາດໃຫຍ່ໄປຫາຕາຕະລາງວິສາຫະກິດທີ່ຊັບຊ້ອນ — ດ້ວຍການເພີ່ມ 5 ພາກສ່ວນໃໝ່ທຸກໆປີ. ໄປຫາຕົວຢ່າງຟຣີ. ໃຊ້ລະຫັດ BIRDIE ເພື່ອປະຫຍັດສ່ວນຫຼຸດ 15%. ພົບກັບຮູບແບບການອອກແບບການໂຕ້ຕອບອັດສະລິຍະ, ຫຼັກສູດວິດີໂອຂອງພວກເຮົາກ່ຽວກັບການອອກແບບການໂຕ້ຕອບ ແລະ UX.
ວິດີໂອ + ການຝຶກອົບຮົມ UX ວິດີໂອເທົ່ານັ້ນVideo + ການຝຶກອົບຮົມ UX $ 495.00 $ 699.00
ຮັບວີດີໂອ + ບົດຮຽນວິດີໂອ UX Training25 (15ຊມ) + ການຝຶກອົບຮົມ UX ສົດ.100 ມື້ຄືນເງິນ - ຮັບປະກັນ.ວິດີໂອພຽງແຕ່$ 300.00$ 395.00
ໄດ້ຮັບວິດີໂອ course40 ວິດີໂອບົດຮຽນ (15h). ອັບເດດທຸກປີ. ຍັງມີເປັນ UX Bundle ທີ່ມີ 2 ຫຼັກສູດວິດີໂອ.
ຊັບພະຍາກອນທີ່ເປັນປະໂຫຍດ
ປະເພດຕ່າງໆຂອງປ໊ອບອັບ, ໂດຍ Anna Kaley ການປະຕິບັດທີ່ດີທີ່ສຸດສໍາລັບການອອກແບບ UI Modals, ໂດຍ Uxcel ພວກເຮົາໃຊ້ Modals Damn ຫຼາຍເກີນໄປ: UX Guidelines, ໂດຍ Adrian Egger Modal & Nonmodal Dialogs, ໂດຍ Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, ໂດຍ James Jacobs Modals ໃນລະບົບການອອກແບບ
