UX-mønstre
Referencebiblioteket af gennemprøvede mønstre
Slå op hvordan ethvert interface-mønster virker — hvornår du bruger det, hvornår ikke, og hvem der gør det godt. Indekseret på tværs af navigation, mobil, formularer, onboarding, handel, tillid, feedback og datavisning.
Kommandopalette
Tastaturdrevet adgang til alle handlinger fra ét søgefelt (⌘K).
Se mønster →Megamenu
Brede dropdowns, der viser en hel sektion på én gang.
Se mønster →Breadcrumbs
Vis brugerens placering i hierarkiet og en vej tilbage.
Se mønster →Faceteret filtrering
Indsnævr store lister med kombinerbare filtre i sidebaren.
Se mønster →Tags og chips
Kompakte, klikbare etiketter til at filtrere, vælge og indtaste — fra filter-chips og fjernbare filter-pills til input-chips og forslags-chips.
Se mønster →Uendelig scroll vs. paginering
Uendelig scroll, paginering eller »indlæs flere«? Evidensen for hvornår hvert valg hjælper — og hvornår det spænder ben for at finde igen.
Se mønster →Burgermenu & mobilmenu
Skjult navigation bag et ikon med tre streger — pladsbesparende, men dokumenteret dyrt for opdagbarheden.
Se mønster →Swipe-handlinger
Skjulte handlinger på en liste-række, der vises ved at swipe til siden — pladsbesparende, men svære at opdage uden en synlig genvej.
Se mønster →Inline-validering
Validér mens brugeren skriver — ikke først ved submit.
Se mønster →Multi-step-formular
Bryd lange formularer op i et guidet forløb med fremskridt.
Se mønster →Passwordstyrke-måler
Løbende feedback på kodeordets styrke mens det skrives.
Se mønster →Autocomplete & søgeforslag
Forslag der dukker op mens brugeren skriver i søgefeltet — så søgningen bliver hurtigere, stavesikker og fører til resultater der findes.
Se mønster →Social login
Lad brugeren logge ind med Google, Apple eller Facebook i stedet for at oprette endnu et password — hurtigere, men med et par vigtige faldgruber.
Se mønster →Progressiv afsløring
Vis kun kompleksitet, når brugeren faktisk har brug for den.
Se mønster →Guidet produkttour
Peg på nøglefunktioner første gang med korte, springbare trin.
Se mønster →Onboarding via tom tilstand
Gør den første tomme skærm til et konkret første skridt.
Se mønster →Gæste-checkout
Lad folk købe, før de opretter en konto.
Se mønster →Kurv-drawer
Vis kurven i en side-panel uden at forlade siden.
Se mønster →Sticky købs-bjælke
Hold pris og køb-knap synlige mens brugeren scroller.
Se mønster →Prissætning & pristabeller
Prissider og plan-sammenligninger, der gør prisen let at finde, forstå og vælge imellem — uden skjulte omkostninger.
Se mønster →Prisvisning i webshops
Sådan viser du pris, rabat og fragt ærligt og forståeligt — fra 30-dages-førpris til enhedspris og totalpris før kassen.
Se mønster →Checkout-flow
Hele kasseflowet fra kurv til kvittering: færre trin og felter, én kolonne, tydelig ordreoversigt, fejlforebyggelse og trust-signaler.
Se mønster →Produktgalleri, lightbox & zoom
Et produktgalleri, der viser nok billeder, flere vinkler, skala og zoom — uden auto-roterende karrusel og med tastaturvenlig lightbox.
Se mønster →Social proof
Anmeldelser, ratings, aktivitet og troværdigheds-badges, der lader andre kunders adfærd overbevise nye brugere — når de er ægte.
Se mønster →Testimonials & kundeudtalelser
Kuraterede kundecitater, cases og logo-vægge, der låner troværdighed fra rigtige mennesker — når de er specifikke og ægte.
Se mønster →Tomme tilstande
Gør en blank skærm til et hjælpsomt første skridt.
Se mønster →Toast-notifikationer
Kortvarige beskeder, der bekræfter en handling uden at afbryde.
Se mønster →Optimistisk UI
Vis resultatet med det samme og rul tilbage ved fejl.
Se mønster →Fortryd-handling
Tilbyd undo i stedet for en bekræftelses-dialog.
Se mønster →Mikrointeraktioner & animation
Små, afgrænsede animationer der bekræfter en handling, viser en tilstandsændring og hjælper brugeren med at orientere sig — funktionelt, ikke dekorativt.
Se mønster →Live chat og chatbots
Support-widget i hjørnet, hvor kunden kan stille spørgsmål til en bot eller et menneske — designet, så forventninger, ærlighed om bot vs. menneske og tilgængelighed er på plads.
Se mønster →Social deling
Del-knapper og den native OS-delingsmenu, der lader brugere sende en side videre — placeret kun der, hvor deling faktisk er sandsynlig.
Se mønster →Skeleton-loading
Vis layout-pladsholdere mens indholdet hentes.
Se mønster →Sorterbar datatabel
Store datasæt med sortering, kolonnestyring og sidenavigation.
Se mønster →Kortbaseret layout
Skimbar oversigt hvor hvert kort er én selvstændig enhed.
Se mønster →Accordion & FAQ
Foldbare sektioner (expand/collapse) der skjuler sekundært indhold bag en klikbar overskrift — nyttigt på lange, skimbare sider og på mobil, men med en reel interaktionsomkostning.
Se mønster →Blok-layout
Komponér siden af stablede fuldbredde-blokke — hero, billede+tekst, citat, CTA — med tydeligt hierarki og en skanbar rækkefølge, der guider øjet nedad.
Se mønster →Responsive og performante billeder
Billeder, der loader hurtigt og ikke rykker layoutet: reservér plads, lazy-load det, der er under skærmkanten, prioritér hero-billedet, og server moderne formater i den rigtige størrelse.
Se mønster →