Du har sikkert vært der før. Hvordan velger vi mellom å vise en modal til brukere, og når navigerer vi dem til en egen, ny side? Og spiller det noen rolle i det hele tatt? Faktisk gjør det det. Beslutningen påvirker brukernes flyt, deres kontekst, deres evne til å slå opp detaljer, og med det feilfrekvens og oppgavefullføring. Begge alternativene kan være forstyrrende og frustrerende - på feil tidspunkt og på feil sted. Så vi bør få det riktig. Vel, la oss se hvordan du gjør akkurat det. Modaler vs. dialogbokser vs. overlegg vs. lysbokser Mens vi ofte snakker om en enkelt modal UI-komponent, ignorerer vi ofte fine, intrikate nyanser mellom alle de forskjellige typene modaler. Faktisk er ikke alle modaler like. Modaler, dialogbokser, overlegg og lysbokser – alle høres like ut, men de er faktisk ganske forskjellige:
Dialog En generisk betegnelse for "samtale" (bruker ↔ system). OverleggEt lite innholdspanel som vises på toppen av en side. ModalUser må samhandle med overlegg + bakgrunn deaktivert. NonmodalUser må samhandle med overlegg + bakgrunn aktivert. Lysboks Nedtonet bakgrunn for å fokusere oppmerksomheten på det modale.
Som Anna Kaley fremhever, vises de fleste overlegg på feil tidspunkt, forstyrrer brukere under kritiske oppgaver, bruker dårlig språk og bryter brukerflyten. De er forstyrrende av natur, og typisk med høy alvorlighetsgrad uten et sterkt behov for det.
Brukere må sikkert bremses og avbrytes hvis konsekvensene av handlingen deres har stor innvirkning, men for de fleste scenarier er ikke-modaler mye mer subtile og et mer vennlig alternativ for å bringe noe til brukerens oppmerksomhet. Hvis noe, foreslår jeg alltid at det er en standard. Modaler → For enkeltstående, selvstendige oppgaver Som designere avviser vi ofte modaler som irrelevante og irriterende - og ofte er de det! – men de har også sin verdi. De kan være svært nyttige for å advare brukere om potensielle feil eller hjelpe dem med å unngå tap av data. De kan også hjelpe med å utføre relaterte handlinger eller gå ned i detaljer uten å avbryte den nåværende tilstanden til siden. Men den største fordelen med modaler er at de hjelper brukere med å beholde konteksten til den gjeldende skjermen. Det betyr ikke bare brukergrensesnittet, men også redigert inndata, rulleposisjon, status for trekkspill, valg av filtre, sortering og så videre.
Noen ganger må brukere bekrefte et valg raskt (f.eks. filtre som vist ovenfor) og deretter fortsette umiddelbart derfra. Automatisk lagring kan selvfølgelig oppnå det samme, men det er ikke alltid nødvendig eller ønsket. Og blokkering av brukergrensesnittet er ofte ikke en god idé. Modaler brukes imidlertid ikke til noen oppgaver. Vanligvis bruker vi dem til enkeltstående, selvstendige oppgaver der brukere skal hoppe inn, fullføre en oppgave og deretter gå tilbake til der de var. Ikke overraskende fungerer de godt for høyprioriterte, korte interaksjoner (f.eks. varsler, destruktive handlinger, raske bekreftelser). Når modaler hjelper: 🚫 Modaler er ofte forstyrrende, invasive og forvirrende.🚫 De gjør det vanskelig å sammenligne og kopiere og lime inn.✅ Likevel lar modaler brukere opprettholde flere kontekster.✅ Nyttig for å forhindre irreversible feil og tap av data.✅ Nyttig hvis å sende brukere til en ny side ville være forstyrrende. ✅ Vis en modal bare hvis brukerne verdsetter forstyrrelsen.✅ Foretrekker som standard ikke-blokkerende dialoger ("ikke-modaler").✅ Tillat brukere å minimere, skjule eller gjenopprette dialogen senere.✅ Bruk en modal for å senke brukernes hastighet, for eksempel verifisere komplekse inndata.✅ Gi en vei ut med "Lukk"-tasten, eller klikk ESC. Sider → For komplekse, flertrinns arbeidsflyter Veivisere eller navigering med faner i modaler fungerer ikke så bra, selv i komplekse bedriftsprodukter - der fungerer sidepaneler eller skuffer vanligvis bedre. Problemer starter når brukere trenger å sammenligne eller referere til datapunkter - likevel blokkerer modaler denne oppførselen, så de åpner den samme siden på nytt i flere faner i stedet.
For mer komplekse flyter og flertrinnsprosesser fungerer frittstående sider best. Sider fungerer også bedre når de krever brukerens fulle oppmerksomhet, og referanse til forrige skjermbilde er ikke særlig nyttig. Og skuffer fungerer for underoppgaver som er for komplekse for en enkel modal, men som ikke trenger en helsidenavigering. Når bør du unngå modaler: 🚫 Unngå modaler for feilmeldinger.🚫 Unngå modaler for funksjonsvarsler.🚫 Unngå modals for onboarding-opplevelse.🚫 Unngå modaler for komplekse, langvarige flertrinnsoppgaver.🚫 Unngå flere nestede modaler og bruk forrige/neste i stedet.🚫 Unngå automatisk utløste modaler. Unngå begge delerFor gjentatte oppgaver I mange komplekse, oppgavetunge produkter vil brukere finne seg i å utføre de samme oppgavene gjentatte ganger, om og om igjen. Der gir både modaler og nye sidenavigeringer friksjon fordi de avbryter flyten eller tvinger brukere til å samle manglende data mellom alle de forskjellige fanene eller visningene. Altfor ofte ender brukere opp med en ødelagt opplevelse, full av uendelige bekreftelser, overdrevne advarsler, detaljerte instruksjoner eller bare manglende referansepunkter. Som Saulius Stebulis nevnte, i disse scenariene fungerer utvidbare seksjoner eller redigering på stedet ofte bedre - de holder oppgaven forankret til den gjeldende skjermen. I praksis, i mange scenarier, fullfører ikke brukere oppgavene sine isolert. De må slå opp data, kopiere og lime inn verdier, avgrense oppføringer på forskjellige steder, eller bare gå gjennom lignende poster mens de jobber med oppgavene sine. Overlegg og skuffer er mer nyttige for å opprettholde tilgang til bakgrunnsdata under oppgaven. Som et resultat forblir konteksten alltid på sin plass, tilgjengelig for referanse eller copy-paste. Lagre modaler og sidenavigering for øyeblikk der avbruddet virkelig tilfører verdi – spesielt for å forhindre kritiske feil. Modals vs. Pages: A Decision Tree For en stund tilbake satte Ryan Neufeld sammen en veldig nyttig guide for å hjelpe designere å velge mellom modaler og sider. Den kommer med et hendig PNG-jukseark og en Google Doc-mal med spørsmål fordelt på 7 seksjoner. Den er lang, ekstremt grundig, men veldig enkel å følge:
Det kan se skremmende ut, men det er en ganske enkel 4-trinns prosess:
Skjermens kontekst. Først sjekker vi om brukerne trenger å opprettholde konteksten til den underliggende skjermen. Oppgavens kompleksitet og varighet. Enklere, fokuserte, ikke-distraherende oppgaver kan bruke en modal, men lange, komplekse flyter trenger en side. Referanse til underliggende side. Deretter sjekker vi om brukere ofte trenger å referere til data i bakgrunnen eller om oppgaven er en enkel bekreftelse eller valg. Velge riktig overlegg. Til slutt, hvis et overlegg virkelig er et godt alternativ, veileder det oss til å velge mellom modal eller ikke-modal (lener mot en ikke-modal).
Innpakning Når det er mulig, unngå å blokkere hele brukergrensesnittet. Ha en flytende dialog, som delvis dekker brukergrensesnittet, men tillater navigering, rulling og kopiering og lim inn. Eller vis innholdet i modalen som sideskuff. Eller bruk et vertikalt trekkspill i stedet. Eller ta brukerne til en egen side hvis du trenger å vise mye detaljer. Men hvis du ønsker å øke brukernes effektivitet og hastighet, unngå modaler for enhver pris. Bruk dem til å bremse brukerne, for å samle oppmerksomheten deres, for å forhindre feil. Som Therese Fessenden bemerket, er det ingen som liker å bli avbrutt, men hvis du må, sørg for at det absolutt er verdt prisen. Møt "Smart Interface Design Patterns" Du kan finne en hel del om modaler og alternativer i Smart Interface Design Patterns, vårt 15-timers videokurs med 100-vis av praktiske eksempler fra virkelige prosjekter – med en live UX-trening senere i år. Alt fra mega-dropdowns til komplekse bedriftstabeller – med 5 nye segmenter lagt til hvert år. Hopp til en gratis forhåndsvisning. Bruk koden BIRDIE for å spare 15 % rabatt. Møt Smart Interface Design Patterns, vårt videokurs om grensesnittdesign og UX.
Video + UX-trening Kun videoVideo + UX-trening$ 495,00 $ 699,00
Få video + UX Training25 videotimer (15 timer) + Live UX Training.100 dagers pengene-tilbake-garanti. Video kun $ 300,00 $ 395,00
Få videokurset 40 videoleksjoner (15 timer). Oppdateres årlig. Også tilgjengelig som en UX-pakke med 2 videokurs.
Nyttige ressurser
Forskjellige typer popup-vinduer, av Anna Kaley Beste praksis for utforming av UI-modaler, av Uxcel We Use Too Many Damn Modals: UX Guidelines, av Adrian Egger Modal & Nonmodal Dialogs, av Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, av James Jacobs Modaler i designsystemer
