Du har sikkert været der før. Hvordan vælger vi mellem at vise en modal til brugerne, og hvornår navigerer vi dem til en separat, ny side? Og betyder det overhovedet noget? Det gør den faktisk. Beslutningen påvirker brugernes flow, deres kontekst, deres evne til at slå detaljer op og dermed fejlfrekvens og opgaveafslutning. Begge muligheder kan være forstyrrende og frustrerende - på det forkerte tidspunkt og på det forkerte sted. Så vi må hellere få det rigtigt. Nå, lad os se, hvordan man gør netop det. Modaler vs. dialogbokse vs. overlejringer vs. lysbokse Mens vi ofte taler om en enkelt modal UI-komponent, ignorerer vi ofte fine, indviklede nuancer mellem alle de forskellige typer modaler. Faktisk er ikke alle modaler ens. Modaler, dialogbokse, overlejringer og lysbokse - alle lyder ens, men de er faktisk ret forskellige:
Dialog En generisk betegnelse for "samtale" (bruger ↔ system). OverlayEt lille indholdspanel, der vises øverst på en side. ModalUser skal interagere med overlay + baggrund deaktiveret. NonmodalUser skal interagere med overlay + baggrund aktiveret. Lysboks Nedtonet baggrund for at fokusere opmærksomheden på modal.
Som Anna Kaley fremhæver, vises de fleste overlejringer på det forkerte tidspunkt, afbryder brugere under kritiske opgaver, bruger dårligt sprog og bryder brugernes flow. De er forstyrrende af natur, og typisk med en høj grad af sværhedsgrad uden et stærkt behov for det.
Brugere skal helt sikkert bremses og afbrydes, hvis konsekvenserne af deres handling har stor indflydelse, men for de fleste scenarier er ikke-modaler meget mere subtile og en mere venlig mulighed for at bringe noget til brugerens opmærksomhed. Hvis noget, foreslår jeg altid, at det er en standard. Modaler → Til enkeltstående, selvstændige opgaver Som designere afviser vi ofte modals som irrelevante og irriterende - og det er de ofte! - men de har også deres værdi. De kan være meget nyttige til at advare brugere om potentielle fejl eller hjælpe dem med at undgå tab af data. De kan også hjælpe med at udføre relaterede handlinger eller dykke ned i detaljer uden at afbryde sidens aktuelle tilstand. Men den største fordel ved modals er, at de hjælper brugerne med at bevare konteksten for den aktuelle skærm. Det betyder ikke kun brugergrænsefladen, men også redigeret input, rulleposition, tilstand af harmonikaer, valg af filtre, sortering og så videre.
Nogle gange skal brugere bekræfte et valg hurtigt (f.eks. filtre som vist ovenfor) og derefter fortsætte med det samme derfra. Automatisk lagring kan selvfølgelig opnå det samme, men det er ikke altid nødvendigt eller ønsket. Og at blokere brugergrænsefladen er ofte ikke en god idé. Modaler bruges dog ikke til nogen opgaver. Typisk bruger vi dem til enkeltstående, selvstændige opgaver, hvor brugerne skal hoppe ind, udføre en opgave og derefter vende tilbage til, hvor de var. Ikke overraskende fungerer de godt til højprioriterede, korte interaktioner (f.eks. advarsler, destruktive handlinger, hurtige bekræftelser). Når modaler hjælper: 🚫 Modaler er ofte forstyrrende, invasive og forvirrende.🚫 De gør det svært at sammenligne og copy-paste.✅ Alligevel giver modals brugere mulighed for at opretholde flere kontekster.✅ Nyttigt til at forhindre irreversible fejl og datatab.✅ Nyttigt, hvis det ville være forstyrrende at sende brugere til en ny side. ✅ Vis kun en modal, hvis brugerne vil værdsætte forstyrrelsen.✅ Foretrækker som standard ikke-blokerende dialoger ("ikke-modaler").✅ Tillad brugere at minimere, skjule eller gendanne dialogen senere.✅ Brug en modal til at sænke brugernes fart, f.eks. verificere komplekse input.✅ Giv en vej ud med "Luk", eller klik på ESC. Sider → Til komplekse arbejdsgange med flere trin Wizards eller navigering med faner inden for modaler fungerer ikke for godt, selv i komplekse virksomhedsprodukter - der fungerer sidepaneler eller skuffer typisk bedre. Problemer starter, når brugere skal sammenligne eller henvise til datapunkter - alligevel blokerer modal denne adfærd, så de genåbner den samme side i flere faner i stedet.
For mere komplekse flows og flertrinsprocesser fungerer selvstændige sider bedst. Sider fungerer også bedre, når de kræver brugerens fulde opmærksomhed, og henvisning til den forrige skærm er ikke særlig nyttig. Og skuffer fungerer til underopgaver, der er for komplekse til en simpel modal, men som ikke behøver en helsidenavigation. Hvornår skal man undgå modaler: 🚫 Undgå modaler til fejlmeddelelser.🚫 Undgå modaler for funktionsmeddelelser.🚫 Undgå modaler for onboarding-oplevelse.🚫 Undgå modaler til komplekse, langvarige opgaver med flere trin.🚫 Undgå flere indlejrede modaler og brug i stedet forrige/næste. Undgå begge deleTil gentagne opgaver I mange komplekse, opgavetunge produkter vil brugerne finde på at udføre de samme opgaver gentagne gange, igen og igen. Der tilføjer både modaler og nye sidenavigationer friktion, fordi de afbryder flowet eller tvinger brugerne til at indsamle manglende data mellem alle de forskellige faner eller visninger. Alt for ofte ender brugerne med en ødelagt oplevelse, fuld af uendelige bekræftelser, overdrevne advarsler, udførlige instruktioner eller bare manglende referencepunkter. Som Saulius Stebulis nævnte, fungerer udvidelige sektioner eller redigering på stedet ofte bedre i disse scenarier - de holder opgaven forankret til den aktuelle skærm. I praksis udfører brugere i mange scenarier ikke deres opgaver isoleret. De skal slå data op, kopiere og indsætte værdier, forfine indtastninger forskellige steder eller bare gennemgå lignende poster, mens de arbejder igennem deres opgaver. Overlejringer og skuffer er mere nyttige til at bevare adgangen til baggrundsdata under opgaven. Som et resultat forbliver konteksten altid på sin plads, tilgængelig for reference eller copy-paste. Gem modaler og sidenavigation til øjeblikke, hvor afbrydelsen virkelig tilføjer værdi - især for at forhindre kritiske fejl. Modals vs. Sider: Et beslutningstræ For et stykke tid tilbage sammensatte Ryan Neufeld en meget nyttig guide til at hjælpe designere med at vælge mellem modaler og sider. Den leveres med et praktisk PNG-snydeark og en Google Doc-skabelon med spørgsmål opdelt på tværs af 7 sektioner. Den er lang, ekstremt grundig, men meget nem at følge:
Det ser måske skræmmende ud, men det er en ganske simpel 4-trins proces:
Skærmens kontekst. Først tjekker vi, om brugerne har brug for at bevare konteksten for den underliggende skærm. Opgavens kompleksitet og varighed. Enklere, fokuserede, ikke-distraherende opgaver kunne bruge en modal, men lange, komplekse flows kræver en side. Henvisning til underliggende side. Derefter tjekker vi, om brugerne ofte har brug for at henvise til data i baggrunden, eller om opgaven er en simpel bekræftelse eller valg. Valg af den rigtige overlejring. Til sidst, hvis en overlejring virkelig er en god mulighed, guider den os til at vælge mellem modal eller nonmodal (lænker mod en ikke-modal).
Indpakning Når det er muligt, undgå at blokere hele brugergrænsefladen. Få en flydende dialog, der delvist dækker brugergrænsefladen, men tillader navigation, rulning og copy-paste. Eller vis indholdet af modalen som sideskuffe. Eller brug en lodret harmonika i stedet for. Eller bring brugere til en separat side, hvis du har brug for at vise mange detaljer. Men hvis du vil øge brugernes effektivitet og hastighed, så undgå modaler for enhver pris. Brug dem til at bremse brugerne, til at samle deres opmærksomhed, for at forhindre fejl. Som Therese Fessenden bemærkede, er der ingen, der kan lide at blive afbrudt, men hvis du skal, så sørg for, at det absolut er prisen værd. Mød "Smart Interface Design Patterns" Du kan finde et helt afsnit om modaler og alternativer i Smart Interface Design Patterns, vores 15-timers videokursus med 100vis af praktiske eksempler fra virkelige projekter - med en live UX-træning senere på året. Alt fra mega-dropdowns til komplekse virksomhedstabeller - med 5 nye segmenter tilføjet hvert år. Hop til en gratis forhåndsvisning. Brug koden BIRDIE for at spare 15 % rabat. Mød Smart Interface Design Patterns, vores videokursus om interfacedesign & UX.
Video + UX-træning Kun videoVideo + UX-træning$ 495,00 $ 699,00
Få video + UX-træning 25 videolektioner (15 timer) + Live UX-træning. 100 dages pengene-tilbage-garanti. Video kun 300,00 $ 395,00 $
Få videokurset40 videolektioner (15 timer). Opdateres årligt. Fås også som en UX-pakke med 2 videokurser.
Nyttige ressourcer
Forskellige typer popups, af Anna Kaley Bedste praksis for design af UI-modaler, af Uxcel We Use Too Many Damn Modals: UX Guidelines, af Adrian Egger Modal & Nonmodal Dialogs, af Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, af James Jacobs Modaler i designsystemer
