UI-guide: 7 prinsipper for nettsider og landingssider
En nettside kan se bra ut ved første øyekast og likevel være vanskelig å bruke. Overskriften forsvinner i mengden, elementene virker tilfeldig plassert, knappene endrer utseende fra seksjon til seksjon, og på en liten skjerm blir rekkefølgen på informasjonen uklar. Ofte starter problemet med grunnleggende valg: struktur, størrelse, avstand og visuell sammenheng.
Denne UI-guiden for nettsider og landingssider forklarer sju prinsipper som hjelper deg å lage et tydelig brukergrensesnitt. De visuelle eksemplene fra referansematerialet viser forholdet mellom elementene. Verdiene som vises, er utgangspunkt for utprøving, ikke faste regler. Tilpass prinsippene til innholdet, handlingen du ønsker at besøkende skal utføre, og menneskene som skal bruke siden.
Bygg siden med seksjoner som har tydelige oppgaver
Ett hovedbudskap i hvert område
Før du velger farger eller formen på knappene, bør du avklare hva den besøkende skal forstå. Det første området introduserer temaet og retningen på siden. De neste kan forklare tilbudet, vise eksempler, svare på innvendinger eller hjelpe noen med å ta en beslutning.
En god seksjon har en oppgave du kan beskrive med én setning. «Her forklarer vi den viktigste fordelen» er mer nyttig enn «her plasserer vi tre kort». Antallet kort og utseendet deres bestemmer du når budskapet er klart.
På en landingsside kan seksjonene lede frem mot én hovedhandling. En presentasjonsside kan tilby flere veier videre. I begge tilfeller trenger leseren en logisk rekkefølge, uten unødvendige hopp mellom temaer.
Samle elementer som hører sammen
Tenk på strukturen i tre nivåer: de store områdene på siden, flaten som innholdet plasseres innenfor, og mindre grupper av elementer. En overskrift, et avsnitt og en knapp som formidler samme budskap, utgjør én gruppe. Et bilde og forklaringen til bildet utgjør en annen.
Denne inndelingen gjør det lettere å bevare den visuelle sammenhengen når siden blir smalere. En knapp bør ikke havne langt unna budskapet den hører til, bare fordi andre elementer skifter plass.
Plasser innholdet innenfor felles linjer
Maksimal bredde og sentrering
Bakgrunnen i en seksjon kan dekke hele skjermbredden, mens tekst og bilder holder seg innenfor et sentrert område. Denne felles avgrensningen gir siden orden og hindrer at innholdet strekkes for langt ut på store skjermer.
Eksemplet i PDF-en viser en maksimal bredde på 1 160 piksler. Verdien er ment som en illustrasjon. Riktig bredde avhenger av informasjonsmengden, tekststørrelsen og hvor mange elementer som står ved siden av hverandre. Et bildegalleri kan trenge mer plass enn en artikkel.
Sentreringen blir synlig når innholdsområdet er smalere enn plassen som er tilgjengelig. På små skjermer bør det være nok luft langs sidene til at tekst og knapper ikke berører skjermkanten.
Bruk de samme linjene for meny og innhold
Sammenlign plasseringen av logoen, hovedoverskriften, det første kortet og informasjonen i bunnteksten. Hvis de hører til samme struktur, bør de følge felles linjer.
Du kan gjøre unntak for et stort bilde eller et element som trenger ekstra oppmerksomhet. Unntaket bør ha en tydelig visuell begrunnelse. Når hver seksjon starter på et nytt sted, må leseren stadig finne ut hvordan siden er organisert.
Velg størrelser som tilpasser seg innholdet
Minimums- og maksimumsgrenser
Størrelse handler om mer enn bredde og høyde. Minimums- og maksimumsgrenser lar deg bevare balansen uten å låse elementene til en stiv form.
| Valg | Hva det styrer | Hva du bør sjekke |
|---|---|---|
| Bredde | Plassen som brukes vannrett | Får elementet plass i området som er tilgjengelig? |
| Høyde | Plassen som brukes loddrett | Er hele innholdet fortsatt synlig? |
| Minimumsgrense | Hvor lite elementet kan bli | Er det fortsatt lesbart og enkelt å bruke? |
| Maksimumsgrense | Hvor mye elementet kan vokse | Bevares proporsjonene og den visuelle ordenen? |
Et kort med fast høyde kan se ryddig ut med to tekstlinjer, men kutte av en lengre overskrift. La innholdet bestemme høyden når tekstmengden kan variere. Velg passende proporsjoner for bilder, og sjekk hva som forsvinner når de beskjæres.
Ulike skjermer, samme logiske rekkefølge
Noen størrelser bør være stabile, mens andre må tilpasse seg plassen. Et ikon kan ha en fast størrelse, mens hovedområdet for innhold kan utvide seg frem til en bestemt grense.
Test siden i flere bredder, også mellom størrelsene som er vanlige på mobil og datamaskin. Se etter uheldige linjeskift i overskrifter, bilder som blir for små, og elementer som havner utenfor skjermen. Sjekk også hva som skjer når brukeren forstørrer teksten.
En god tilpasning bevarer meningen og prioriteringen i informasjonen. Det er ikke nok at alle elementene får plass.
Bruk avstand til å vise hva som hører sammen
Innvendig og utvendig avstand
Innvendig avstand skiller innholdet fra kanten på elementet det ligger i. Du ser den mellom teksten i en knapp og knappens omriss, eller mellom innholdet i et kort og kanten på bakgrunnen.
Utvendig avstand skiller et element fra elementene rundt. Du ser den mellom to kort, mellom informasjonsgrupper eller mellom seksjoner.
Forskjellen har praktisk betydning. Hvis teksten ligger for tett inntil kanten på et kort, øker du den innvendige avstanden. Hvis to kort ser ut til å sitte sammen, justerer du mellomrommet mellom dem. Endrer du feil verdi, kan problemet bare flytte seg.
Bruk en gjennomgående avstandsskala
Velg et begrenset sett med avstander og bruk dem igjen. Du kan for eksempel starte med 8, 16, 24, 32 og 48 piksler, og justere verdiene etter tekststørrelsen og hvor tett innholdet står.
Bruk mindre avstand mellom elementer som er nært knyttet til hverandre, og større avstand mellom ulike grupper. Overskriften i et kort bør oppleves som nærmere sin egen forklaring enn neste kort. Da formidler det tomme rommet en sammenheng, i stedet for bare å være dekor.
Definer visuelle stiler som kan brukes igjen
Et tydelig hierarki for overskrifter og tekst
Bestem hvordan hovedoverskriften, seksjonsoverskriftene, underoverskriftene og brødteksten skal se ut. Forskjeller i størrelse, skriftvekt og avstand skal hjelpe leseren å forstå nivåene i informasjonen.
Unngå å fremheve alt samtidig. Hvis overskriften, etiketten, prisen og knappen konkurrerer like sterkt, blir det uklart hva som er viktigst. Velg hva brukeren skal legge merke til først, og støtt den prioriteringen med kontrast og plassering.
Disse sammenhengene forklares også i Nielsen Norman Groups guide til visuelt hierarki: størrelse, kontrast og gruppering hjelper mennesker å oppfatte hvilke elementer som er viktigst.
Gi elementer med samme rolle et gjenkjennelig utseende
To hovedhandlinger bør være gjenkjennelige som del av samme visuelle familie. Bruk felles regler for knapper, kort, felt og etiketter, og lag varianter når oppgaven er forskjellig.
En hovedknapp kan for eksempel ha en fylt bakgrunn, mens en sekundær handling fremheves mer diskret. Unngå å endre form eller farge fra én seksjon til en annen uten en tydelig grunn.
Når du justerer en felles regel, bør du sjekke alle stedene den brukes. En endring som passer for en knapp med kort tekst, kan gi et annet resultat når knappeteksten er lengre.
Organiser elementene etter leseretningen
Rader, kolonner og overgang til neste rad
Elementer kan plasseres ved siden av hverandre eller under hverandre. Valget avhenger av sammenhengen mellom dem og plassen som er tilgjengelig. To opplysninger som skal sammenlignes, kan fungere godt side om side. En trinnvis forklaring trenger en tydelig rekkefølge.
Bestem hvordan elementene skal justeres, hvor stor avstand det skal være mellom dem, og når de skal flyttes til neste rad. For kort med ulik tekstmengde bør du kontrollere at overskrifter og handlinger fortsatt følger et mønster som er lett å forstå.
Bevar rekkefølgen på mobil
Når to kolonner blir til én, bør rekkefølgen fortsatt formidle samme historie. En fordel og bildet som forklarer den, må fortsatt være enkle å koble sammen.
Grupper elementene etter mening før du endrer retningen på oppsettet. Hvis alle overskrifter, bilder og knapper legges på samme strukturelle nivå, kan sammenhengen mellom dem gå tapt på en smal skjerm.
Gjør navigasjon og handlinger enkle å forstå
En tydelig meny og forutsigbare handlinger
Bruk tekster som beskriver målet eller handlingen. «Se prosjektene» forteller mer enn «Oppdag», og «Send forespørsel» gjør det tydelig hva som skjer etter at et skjema er fylt ut.
La navigasjonen følge de samme linjene som resten av siden, og gi hvert valg nok plass. På små skjermer skal menyen kunne åpnes, brukes og lukkes uten at overlappende elementer blokkerer innholdet.
Synlige tilstander for peker, trykk og tastatur
Et interaktivt element trenger mer enn et standardutseende. Vis når det kan aktiveres, når det trykkes ned, og hvilket element som har fokus når brukeren navigerer med tastaturet.
En endring når pekeren føres over elementet, er ikke nok. En berøringsskjerm gir ikke den samme muligheten. Teksten, formen og plasseringen bør gi tydelige signaler også i standardtilstanden. Ved tastaturnavigasjon må fokusmarkeringen være lett å se mot sidens bakgrunn.
Diskrete overganger med en hensikt
En kort overgang kan gjøre en tilstandsendring enklere å følge. PDF-en viser et eksempel på 200 millisekunder. Bruk det som utgangspunkt for testing, ikke som en varighet som passer overalt.
Animasjon bør forklare en endring eller bekrefte en handling. Unngå kontinuerlig bevegelse ved siden av tekst som krever oppmerksomhet, og sørg for at opplevelsen fortsatt henger sammen når animasjonene reduseres. En knapp bør reagere med en gang, uten å vente på at en dekorativ effekt blir ferdig.
Kontroller siden før publisering
Gå gjennom siden som en besøkende som ser den for første gang. Forstår du temaet og hovedhandlingen uten å lese hvert eneste avsnitt? Sjekk deretter detaljene:
- Hver seksjon har en tydelig oppgave og følger logisk etter det forrige budskapet.
- Meny, overskrifter og innhold følger gjennomgående linjer.
- Lange tekster og bilder holder seg innenfor den tilgjengelige plassen.
- Avstandene viser hvilke elementer som tilhører samme gruppe.
- Overskrifter, knapper og kort følger felles visuelle regler.
- Informasjonen beholder en logisk rekkefølge på smale skjermer.
- Handlingene er forståelige ved bruk av berøring, mus og tastatur.
- Overgangene støtter samspillet uten å skjule informasjon.
Test med det faktiske innholdet. Et oppsett som ser balansert ut med eksempeltekst, kan få problemer når det kommer en lang overskrift, et annet bilde eller en mer beskrivende knappetekst.
Vanlige spørsmål om god UI-design
Gjelder de samme prinsippene for nettsider og landingssider?
Ja. Tydelig struktur, justering, avstand og visuell sammenheng er nyttig i begge tilfeller. Det som varierer, er formålet med siden og hvordan informasjonen fordeles. En landingsside retter seg ofte mot én hovedhandling, mens andre sider kan hjelpe brukeren å utforske flere temaer.
Hva er forskjellen mellom en seksjon og innholdsområdet i seksjonen?
En seksjon avgrenser en del av siden og kan ha en bakgrunn som dekker hele bredden. Innholdsområdet bestemmer hvor tekst, bilder og handlinger plasseres innenfor seksjonen. Ved å skille dem kan du bruke brede bakgrunner og samtidig holde informasjonen oversiktlig.
Bør jeg alltid bruke en maksimal bredde på 1 160 piksler?
Nei. Det er verdien som brukes i det visuelle eksemplet. Velg bredde ut fra innholdet, og kontroller resultatet på forskjellige skjermer. En lang tekst, en produktoversikt og et bildegalleri kan ha ulike behov, selv på samme nettsted.
Hvordan velger jeg mellom innvendig og utvendig avstand?
Se på forholdet du ønsker å endre. For å justere avstanden mellom innholdet og kanten endrer du den innvendige avstanden. For å skille et element fra naboene endrer du den utvendige avstanden. Kontroller deretter hele gruppen, ikke bare elementet alene.
Hvordan skaper jeg sammenheng uten at alle sidene blir like?
Bruk de samme reglene for typografi, avstand og interaktive elementer. Du kan variere komposisjonen, bildene og rytmen i seksjonene etter budskapet. Visuell sammenheng handler om gjenkjennelig oppførsel og kjente holdepunkter, ikke om å gjenta den samme siden.
Er det nok at en knapp skifter farge når pekeren føres over den?
Nei. Knappen bør være gjenkjennelig i standardtilstanden, forklare handlingen og ha en synlig fokustilstand for tastaturnavigasjon. Sjekk også hvordan den fungerer ved berøring, der pekeren ikke gir det samme signalet.
En tydelig side begynner med enkle regler
Et helhetlig brukergrensesnitt bygges gjennom valg som støtter hverandre: seksjoner med mening, innhold som følger felles linjer, fleksible størrelser, gjennomtenkte avstander og forutsigbare handlinger. Bruk denne UI-guiden når prosjektet starter, og hent den frem igjen når du kontrollerer siden med det faktiske innholdet. Målet er at folk skal forstå det de ser, og kunne gå videre uten å nøle.