Probabilment kont hemm qabel. Kif nagħżlu bejn li nuru modal lill-utenti, u meta nnavigawhom għal paġna separata u ġdida? U jimpurtah xejn? Fil-fatt, ma. Id-deċiżjoni tinfluwenza l-fluss tal-utenti, il-kuntest tagħhom, il-kapaċità tagħhom li jfittxu d-dettalji, u magħha l-frekwenza tal-iżbalji u t-tlestija tal-kompitu. Iż-żewġ għażliet jistgħu jkunu ta' tfixkil u frustranti — fil-ħin ħażin, u fil-post ħażin. Allura aħjar nagħmluha sewwa. Ukoll, ejja naraw kif tagħmel dan. Modals vs Djalogi vs Overlays vs Lightboxes Filwaqt li ħafna drabi nitkellmu dwar komponent UI modali wieħed, ħafna drabi aħna ninjoraw sfumaturi fini u kkomplikati bejn it-tipi differenti kollha ta 'modali. Fil-fatt, mhux kull modali hija l-istess. Modali, dialogs, overlays, u lightboxes - kollha jinstemgħu simili, iżda fil-fatt huma pjuttost differenti:
Dialog Terminu ġeneriku għal "konversazzjoni" (utent ↔ sistema). OverlayPanew ta' kontenut żgħir muri fuq paġna. ModalUser irid jinteraġixxi b'overlay + sfond diżattivat. NonmodalUser irid jinteraġixxi b'overlay + background attivati. Lightbox Sfond imtaffi biex tiffoka l-attenzjoni fuq il-modal.
Kif tenfasizza Anna Kaley, il-biċċa l-kbira tal-overlays jidhru fil-ħin ħażin, jinterrompu l-utenti waqt kompiti kritiċi, juża lingwaġġ fqir, u jkisser il-fluss tal-utenti. Huma interruttivi min-natura tagħhom, u tipikament b'livell għoli ta 'severità mingħajr ħtieġa qawwija għal dan.
Żgur li l-utenti għandhom jitnaqqsu u jiġu interrotti jekk il-konsegwenzi tal-azzjoni tagħhom ikollhom impatt għoli, iżda għall-biċċa l-kbira tax-xenarji mhux modali huma ħafna aktar sottili u għażla aktar faċli biex iġibu xi ħaġa għall-attenzjoni tal-utent. Jekk xejn, jien dejjem nissuġġerixxi li tkun default. Modali → Għal Kompiti Uniċi u Awtonomi Bħala disinjaturi, ħafna drabi nwarrbu l-modali bħala irrilevanti u tedjanti - u ħafna drabi huma! — iżda għandhom il-valur tagħhom ukoll. Jistgħu jkunu utli ħafna biex iwissu lill-utenti dwar żbalji potenzjali jew jgħinuhom jevitaw it-telf tad-dejta. Jistgħu wkoll jgħinu biex iwettqu azzjonijiet relatati jew iħaffru fid-dettalji mingħajr ma jinterrompu l-istat attwali tal-paġna. Iżda l-akbar vantaġġ tal-modali huwa li jgħinu lill-utenti jżommu l-kuntest tal-iskrin attwali. Ma jfissirx biss l-UI, iżda wkoll input editjat, pożizzjoni ta 'scrolling, stat ta' accordions, għażla ta 'filtri, għażla, eċċ.
Xi drabi, l-utenti jeħtieġ li jikkonfermaw għażla malajr (eż., filtri kif muri hawn fuq) u mbagħad jipproċedu immedjatament minn hemm. Is-salvataġġ awtomatiku jista 'jikseb l-istess, ovvjament, iżda mhux dejjem meħtieġ jew mixtieq. U l-imblukkar tal-UI spiss ma jkunx idea tajba. Madankollu, il-modali ma jintużaw għall-ebda ħidma. Tipikament, nużawhom għal kompiti waħedhom, fejn l-utenti għandhom jaqbżu, itemmu kompitu, u mbagħad jerġgħu lura fejn kienu. Mhux ta’ sorpriża, jaħdmu tajjeb għal interazzjonijiet qosra ta’ prijorità għolja (eż., twissijiet, azzjonijiet distruttivi, konfermi malajr). Meta l-modali jgħinu: 🚫 Il-modali ħafna drabi huma ta' tfixkil, invażivi, u konfużi.🚫 Jagħmluha diffiċli biex tqabbel u tikkopja-pejst.✅ Madankollu l-modali jippermettu lill-utenti jżommu kuntesti multipli.✅ Utli biex jipprevjenu żbalji irriversibbli u telf ta' data.✅ Utli jekk jintbagħtu lill-utenti għal paġna ġdida tkun ta' tfixkil. ✅ Uri modali biss jekk l-utenti jivvalutaw it-tfixkil.✅ B'mod awtomatiku, tippreferi djalogi li ma jimblukkawx ("nonmodals"). Paġni → Għal Flussi tax-Xogħol Kumpless, f'diversi Passi Wizards jew navigazzjoni bit-tabbed fi ħdan il-modals ma jaħdmux tajjeb wisq, anke fi prodotti kumplessi tal-intrapriżi — hemmhekk, il-pannelli tal-ġenb jew il-kxaxen tipikament jaħdmu aħjar. L-inkwiet jibdew meta l-utenti jkollhom bżonn iqabblu jew jirreferu punti tad-dejta — iżda l-modals jimblokkaw din l-imġieba, u għalhekk jerġgħu jiftħu l-istess paġna f’diversi tabs minflok.
Għal flussi aktar kumplessi u proċessi f'diversi stadji, il-paġni waħedhom jaħdmu l-aħjar. Il-paġni jaħdmu aħjar ukoll meta jitolbu l-attenzjoni sħiħa tal-utent, u r-referenza għall-iskrin preċedenti ma tkunx ta’ għajnuna kbira. U l-kxaxen jaħdmu għal sub-kompiti li huma kumplessi wisq għal modal sempliċi, iżda m'għandhomx bżonn ta 'navigazzjoni ta' paġna sħiħa. Meta tevita l-modali: 🚫 Evita modali għal messaġġi ta' żball.🚫 Evita modali għal notifiki ta' karatteristiċi.🚫 Evita modali għall-esperjenza ta' abbord.🚫 Evita modali għal kompiti kumplessi u twal f'diversi stadji.🚫 Evita modali multipli nested u minflok uża prev/next. Evita It-tnejnGħal Ħidmiet Ripetuti F'ħafna prodotti kumplessi u li jagħmlu ħafna xogħol, l-utenti jsibu ruħhom li jwettqu l-istess kompiti ripetutament, għal darb'oħra. Hemmhekk, kemm il-modali kif ukoll in-navigazzjonijiet tal-paġni ġodda jżidu frizzjoni minħabba li jinterrompu l-fluss jew iġġiegħel lill-utenti jiġbru d-dejta nieqsa bejn it-tabs jew il-veduti differenti kollha. Spiss wisq, l-utenti jispiċċaw b'esperjenza miksura, mimlija konfermi li ma jispiċċaw qatt, twissijiet esaġerati, istruzzjonijiet verbose, jew sempliċiment punti ta' referenza nieqsa. Kif semma Saulius Stebulis, f'dawn ix-xenarji, is-sezzjonijiet espansibbli jew l-editjar fil-post ħafna drabi jaħdmu aħjar — iżommu l-kompitu ankrat mal-iskrin attwali. Fil-prattika, f'ħafna xenarji, l-utenti ma jlestux il-kompiti tagħhom b'mod iżolat. Jeħtieġ li jfittxu dejta, kopja-pejst tal-valuri, jirfinaw l-entrati f'postijiet differenti, jew sempliċement jirrevedu rekords simili hekk kif jaħdmu permezz tal-kompiti tagħhom. Is-sovrapposizzjonijiet u l-kxaxen huma aktar utli biex jinżamm l-aċċess għad-dejta tal-isfond matul il-kompitu. Bħala riżultat, il-kuntest dejjem jibqa' f'postu, disponibbli għal referenza jew kopja-pejst. Issejvja l-modals u n-navigazzjoni tal-paġna għal mumenti fejn l-interruzzjoni ġenwinament żżid il-valur — speċjalment biex tevita żbalji kritiċi. Modali vs Paġni: Siġra tad-Deċiżjonijiet Ftit lura, Ryan Neufeld ġabar gwida utli ħafna biex tgħin lid-disinjaturi jagħżlu bejn modals u paġni. Jiġi ma 'cheatsheet PNG utli u mudell Google Doc b'mistoqsijiet maqsuma f'7 sezzjonijiet. Huwa twil, estremament bir-reqqa, iżda faċli ħafna biex issegwi:
Jista 'jidher skoraġġanti, iżda huwa proċess pjuttost sempliċi ta' 4 passi:
Kuntest tal-iskrin.L-ewwel, niċċekkjaw jekk l-utenti għandhomx bżonn iżommu l-kuntest tal-iskrin sottostanti. Il-kumplessità u t-tul tal-kompitu. Ħidmiet aktar sempliċi, ffukati, li ma jfixklux jistgħu jużaw modali, iżda flussi twal u kumplessi jeħtieġu paġna. Referenza għall-paġna sottostanti. Imbagħad, aħna niċċekkjaw jekk l-utenti spiss għandhomx għalfejn jirreferu għad-dejta fl-isfond jew jekk il-kompitu huwiex konferma jew għażla sempliċi. Nagħżlu l-overlay t-tajba. Fl-aħħarnett, jekk overlay hija tabilħaqq għażla tajba, tiggwidana biex nagħżlu bejn modali jew nonmodal (jegħleb lejn nonmodal).
Tgeżwir Up Kull meta jkun possibbli, evita li timblokka l-UI kollha. Ikollok djalogu f'wiċċ l-ilma, li jkopri parzjalment l-UI, iżda jippermetti n-navigazzjoni, scrolling, u kopja-pejst. Jew uri l-kontenut tal-modal bħala kexxun tal-ġenb. Jew uża accordion vertikali minflok. Jew ġib lill-utenti f'paġna separata jekk ikollok bżonn turi ħafna dettall. Imma jekk trid issaħħaħ l-effiċjenza u l-veloċità tal-utenti, evita l-modali akkost ta’ kollox. Użahom biex inaqqas lill-utenti, biex tgħaqqad l-attenzjoni tagħhom, biex tevita l-iżbalji. Kif innotat Therese Fessenden, ħadd ma jħobb jiġi interrott, imma jekk trid, kun żgur li jkun assolutament jiswa l-ispiża. Iltaqa '"Disinn ta' Disinn ta' Interface Intelliġenti" Tista' ssib taqsima sħiħa dwar modali u alternattivi fi Smart Interface Design Patterns, il-kors tagħna ta' 15-il siegħa bil-vidjo b'100s ta' eżempji prattiċi minn proġetti tal-ħajja reali — b'taħriġ UX live aktar tard din is-sena. Kollox minn mega-dropdowns għal tabelli kumplessi ta 'intrapriżi — b'5 segmenti ġodda miżjuda kull sena. Aqbeż għal preview b'xejn. Uża l-kodiċi BIRDIE biex tiffranka 15% off. Iltaqa 'Smart Interface Design Patterns, il-kors tal-vidjo tagħna dwar id-disinn tal-interface u l-UX.
Vidjow + Taħriġ UXVidjo bissVidjo + Taħriġ UX$ 495.00 $ 699.00
Ikseb Vidjow + Taħriġ UX25 lezzjoni bil-vidjo (15-il siegħa) + Taħriġ UX Live.100 jum garanzija ta' flus lura. Vidjo biss$ 300.00$ 395.00
Ikseb il-kors bil-vidjo40 lezzjoni bil-vidjo (15h). Aġġornata kull sena. Disponibbli wkoll bħala UX Bundle b'2 korsijiet bil-vidjo.
Riżorsi Utli
Tipi differenti ta 'popups, minn Anna Kaley L-Aħjar Prattiki għat-Tfassil tal-Modali tal-UI, minn Uxcel Aħna Nużaw Wisq Modali Indannati: Linji Gwida UX, minn Adrian Egger Djalogi Modali u Nonmodali, minn Therese Fessenden Disinn tal-UI tal-Intrapriża Moderna: Djalogi Modali, minn James Jacobs Modali fis-Sistemi tad-Disinn
