Jy was seker al voorheen daar. Hoe kies ons tussen die wys van 'n modaal aan gebruikers, en wanneer navigeer ons hulle na 'n aparte, nuwe bladsy? En maak dit enigsins saak? Eintlik doen dit. Die besluit beïnvloed gebruikers se vloei, hul konteks, hul vermoë om besonderhede op te soek, en daarmee saam foutfrekwensie en taakvoltooiing. Albei opsies kan ontwrigtend en frustrerend wees - op die verkeerde tyd en op die verkeerde plek. So ons moet dit beter regkry. Wel, kom ons kyk hoe om dit te doen. Modale vs. Dialogs vs. Overlays vs. Lightboxes Terwyl ons dikwels praat oor 'n enkele modale UI-komponent, ignoreer ons dikwels fyn, ingewikkelde nuanses tussen al die verskillende tipes modale. Trouens, nie elke modaal is dieselfde nie. Modale, dialoë, oorlegsels en ligkassies – almal klink soortgelyk, maar hulle is eintlik heel anders:
Dialoog 'n Generiese term vir "gesprek" (gebruiker ↔ stelsel). Overlay 'n Klein inhoudpaneel wat bo-op 'n bladsy vertoon word. ModalUser moet interaksie hê met oorleg + agtergrond gedeaktiveer. Niemodale gebruiker moet interaksie hê met oorleg + agtergrond geaktiveer. Ligkas Verduisterde agtergrond om aandag op die modale te fokus.
Soos Anna Kaley beklemtoon, verskyn die meeste oorlegsels op die verkeerde tyd, onderbreek gebruikers tydens kritieke take, gebruik swak taal en breek gebruikers se vloei. Hulle is van nature onderbrekend, en tipies met 'n hoë vlak van erns sonder 'n sterk behoefte daaraan.
Gebruikers moet sekerlik vertraag en onderbreek word as die gevolge van hul optrede 'n hoë impak het, maar vir die meeste scenario's is nie-modale baie meer subtiel en 'n meer vriendelike opsie om iets onder die gebruiker se aandag te bring. As daar iets is, stel ek altyd voor dat dit 'n standaard is. Modale → Vir enkelvoudige, selfstandige take As ontwerpers maak ons dikwels modale af as irrelevant en irriterend - en dikwels is dit so! — tog het hulle ook hul waarde. Hulle kan baie nuttig wees om gebruikers te waarsku oor moontlike foute of hulle te help om dataverlies te vermy. Hulle kan ook help om verwante aksies uit te voer of besonderhede te ondersoek sonder om die huidige toestand van die bladsy te onderbreek. Maar die grootste voordeel van modale is dat dit gebruikers help om die konteks van die huidige skerm te behou. Dit beteken nie net die UI nie, maar ook geredigeerde invoer, blaaiposisie, toestand van trekklaviere, keuse van filters, sortering, ensovoorts.
Soms moet gebruikers 'n keuse vinnig bevestig (bv. filters soos hierbo gewys) en dan dadelik van daar af voortgaan. Outo-stoor kan natuurlik dieselfde bereik, maar dit is nie altyd nodig of verlang nie. En om die UI te blokkeer is dikwels nie 'n goeie idee nie. Modale word egter nie vir enige take gebruik nie. Tipies gebruik ons dit vir enkele, selfstandige take waar gebruikers moet inspring, 'n taak voltooi en dan terugkeer na waar hulle was. Dit is nie verbasend dat hulle goed werk vir hoë-prioriteit, kort interaksies (bv. waarskuwings, vernietigende aksies, vinnige bevestigings). Wanneer modale help: 🚫 Modale is dikwels ontwrigtend, indringend en verwarrend.🚫 Hulle maak dit moeilik om te vergelyk en kopieer-plak.✅ Tog laat modale gebruikers toe om veelvuldige kontekste te handhaaf.✅ Nuttig om onomkeerbare foute en dataverlies te voorkom.✅ Nuttig as dit ontwrigtend sal wees om gebruikers na 'n nuwe bladsy te stuur. ✅ Wys slegs 'n modaal as gebruikers die ontwrigting waardeer.✅ Verkies by verstek nie-blokkerende dialoogvensters ("nie-modale").✅ Laat gebruikers toe om die dialoog later te minimaliseer, te versteek of te herstel.✅ Gebruik 'n modaal om gebruikers stadiger te maak, bv. verifieer komplekse invoer.✅ Gee 'n uitweg met "Sluit", of klik ESC. Bladsye → Vir komplekse, multi-stap werkstrome Wizards of navigasie met oortjies binne modale werk nie te goed nie, selfs in komplekse ondernemingsprodukte - daar werk sypanele of laaie gewoonlik beter. Probleme begin wanneer gebruikers datapunte moet vergelyk of verwys - tog blokkeer modale hierdie gedrag, sodat hulle dieselfde bladsy weer in verskeie oortjies oopmaak.
Vir meer komplekse vloeie en multi-stap prosesse werk selfstandige bladsye die beste. Bladsye werk ook beter wanneer hulle die gebruiker se volle aandag eis, en verwysing na die vorige skerm is nie baie nuttig nie. En laaie werk vir subtake wat te kompleks is vir 'n eenvoudige modale, maar nie 'n volle bladsynavigasie nodig het nie. Wanneer om modale te vermy: 🚫 Vermy modale vir foutboodskappe.🚫 Vermy modale vir kenmerkkennisgewings.🚫 Vermy modale vir aanboordervaring.🚫 Vermy modale vir komplekse, lang multi-stap-take.🚫 Vermy veelvuldige geneste modale en gebruik eerder vorige/volgende.🚫 Vermy modale tensy dit absoluut noodsaaklik is. Vermy beideVir herhaalde take In baie komplekse, taak-swaar produkte, sal gebruikers vind dat hulle dieselfde take herhaaldelik, oor en oor verrig. Daar voeg beide modale en nuwe bladsynavigasies wrywing by omdat dit die vloei onderbreek of gebruikers dwing om ontbrekende data tussen al die verskillende oortjies of aansigte in te samel. Te dikwels eindig gebruikers met 'n gebroke ervaring, vol nimmereindigende bevestigings, oordrewe waarskuwings, breedvoerige instruksies, of net ontbrekende verwysingspunte. Soos Saulius Stebulis genoem het, in hierdie scenario's werk uitbreidbare afdelings of in-plek redigering dikwels beter - hulle hou die taak geanker aan die huidige skerm. In die praktyk, in baie scenario's, voltooi gebruikers nie hul take in isolasie nie. Hulle moet data opsoek, kopieer-plak waardes, inskrywings op verskillende plekke verfyn, of net soortgelyke rekords hersien terwyl hulle deur hul take werk. Oorlegsels en laaie is meer nuttig om toegang tot agtergronddata tydens die taak te behou. Gevolglik bly die konteks altyd op sy plek, beskikbaar vir verwysing of copy-paste. Stoor modale en bladsynavigasie vir oomblikke waar die onderbreking werklik waarde toevoeg - veral om kritieke foute te voorkom. Modale vs. Bladsye: 'n Besluitboom Ryan Neufeld het 'n rukkie terug 'n baie nuttige gids saamgestel om ontwerpers te help kies tussen modale en bladsye. Dit kom met 'n handige PNG-cheatsheet en 'n Google Doc-sjabloon met vrae wat oor 7 afdelings verdeel is. Dit is lank, uiters deeglik, maar baie maklik om te volg:
Dit lyk dalk skrikwekkend, maar dit is 'n redelik eenvoudige 4-stap proses:
Konteks van die skerm.Eers kyk ons of gebruikers die konteks van die onderliggende skerm moet handhaaf. Taakkompleksiteit en duur. Eenvoudiger, gefokusde, nie-afleidende take kan 'n modale gebruik, maar lang, komplekse vloeie benodig 'n bladsy. Verwysing na onderliggende bladsy. Dan kyk ons of gebruikers dikwels na data in die agtergrond moet verwys of as die taak 'n eenvoudige bevestiging of keuse is. Die keuse van die regte oorleg. Ten slotte, as 'n oorleg inderdaad 'n goeie opsie is, lei dit ons om te kies tussen modaal of nie-modaal (leun na 'n nie-modaal).
Afronding Indien moontlik, vermy die blokkering van die hele UI. Hou 'n dialoog wat swaai, wat die UI gedeeltelik dek, maar laat navigasie, blaai en kopieer-plak toe. Of wys die inhoud van die modaal as 'n sylaai. Of gebruik eerder 'n vertikale trekklavier. Of bring gebruikers na 'n aparte bladsy as jy baie detail moet wys. Maar as jy gebruikers se doeltreffendheid en spoed wil verhoog, vermy modale ten alle koste. Gebruik dit om gebruikers te vertraag, om hul aandag te bondel, om foute te voorkom. Soos Therese Fessenden opgemerk het, hou niemand daarvan om onderbreek te word nie, maar as jy moet, maak seker dat dit absoluut die koste werd is. Ontmoet "Slim koppelvlakontwerppatrone" Jy kan 'n hele afdeling oor modale en alternatiewe vind in Smart Interface Design Patterns, ons 15 uur-videokursus met 100'e praktiese voorbeelde van werklike projekte - met 'n lewendige UX-opleiding later vanjaar. Alles van mega-aftrekkies tot komplekse ondernemingstabelle - met 5 nuwe segmente wat elke jaar bygevoeg word. Spring na 'n gratis voorskou. Gebruik kode BIRDIE om 15% afslag te bespaar. Ontmoet Smart Interface Design Patterns, ons videokursus oor koppelvlakontwerp en UX.
Video + UX-opleiding Slegs videoVideo + UX-opleiding$ 495.00 $ 699.00
Kry Video + UX-opleiding25 videolesse (15 uur) + Regstreekse UX-opleiding.100 dae geld-terug-waarborg. Video slegs $ 300.00$ 395.00
Kry die videokursus40 videolesse (15h). Jaarliks opgedateer. Ook beskikbaar as 'n UX-bundel met 2 videokursusse.
Nuttige hulpbronne
Verskillende tipes opspringers, deur Anna Kaley Beste praktyke vir die ontwerp van UI-modale, deur Uxcel Ons gebruik te veel damn modals: UX-riglyne, deur Adrian Egger Modal & Nonmodal Dialogs, deur Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, deur James Jacobs Modale in Ontwerpstelsels
