Lag sidemaler som holder nettsiden konsistent når innholdet vokser
Mange bedriftsnettsteder mister sammenheng når nye sider publiseres over tid. Tydelige sidemaler gjør struktur, design, tilgjengelighet og konvertering enklere å styre.
Kategori: Webdesign og UX
En nettside kan se ryddig ut ved lansering og likevel bli vanskelig å bruke etter noen år. Nye tjenester legges til, ulike medarbeidere publiserer innhold, og kampanjesider bygges under tidspress. Resultatet er ofte variasjoner i overskrifter, knapper, navigasjon og sideoppbygning som brukerne må tolke på nytt for hver side.
Løsningen er ikke å gjøre alle sider identiske. Bedriften trenger et begrenset sett med sidemaler som gir hvert innhold en tydelig rolle. En tjenesteside skal hjelpe kunden med å forstå og vurdere et tilbud. En artikkel skal formidle kunnskap. En kontaktside skal gjøre det enkelt å velge riktig kontaktpunkt.
Gode sidemaler kobler struktur, navigasjon, typografi, visuell identitet, tilgjengelighet og konvertering. De gir også redaktørene tydeligere rammer, slik at kvaliteten ikke er avhengig av hvem som publiserer.
Start med sidens oppgave, ikke utseendet
Før dere diskuterer farger, bilder og komponenter, bør dere definere hva hver sidetype skal hjelpe brukeren med. En mal uten en tydelig oppgave blir gjerne en samling valgfrie innholdsblokker. Da ender redaktøren med å designe siden på nytt hver gang.
Lag en kort kontrakt for hver sidetype:
- Målgruppe: Hvem kommer vanligvis til denne siden?
- Brukerbehov: Hvilket spørsmål eller problem skal siden håndtere?
- Hovedinnhold: Hva må brukeren forstå før neste steg?
- Primær handling: Hva er det mest naturlige neste steget?
- Sekundær handling: Hva kan brukeren gjøre hvis han eller hun ikke er klar?
- Navigasjonsrolle: Hvor befinner siden seg i nettstedets struktur?
For en tjenesteside kan hovedoppgaven være å forklare hvem tjenesten passer for, hva den omfatter, og hvordan kunden kommer i gang. Den primære handlingen kan være å be om en vurdering. Den sekundære kan være å lese en relevant kundehistorie eller se relaterte tjenester.
Denne avklaringen gjør designarbeidet mer presist. Den hindrer også at alle sider får de samme standardknappene, uavhengig av hva brukeren faktisk trenger.
Velg få sidetyper med tydelige forskjeller
De fleste bedriftsnettsteder klarer seg med et oversiktlig sett grunnmaler. Det kan for eksempel være:
- Forside
- Tjenesteoversikt
- Tjenesteside
- Bransje- eller målgruppeside
- Artikkel eller faginnhold
- Kundehistorie
- Om oss eller medarbeiderside
- Kontakt- og skjemaside
To sidetyper bør bare være separate dersom de har ulike oppgaver eller krever ulik oppbygning. Hvis forskjellen kun er et annet toppbilde, trenger dere sannsynligvis ikke en ny mal.
Samtidig bør ikke én fleksibel mal brukes til alt. Når redaktøren kan velge fritt blant mange blokker, oppstår det lett sider uten klar rekkefølge. Fleksibilitet bør ligge innenfor faste rammer: noen felt og seksjoner er obligatoriske, noen er valgfrie, og enkelte kombinasjoner bør ikke være mulige.
Gi hver mal en forutsigbar struktur
Brukerne trenger å forstå siden raskt. De bør tidlig kunne se hvor de er, hva siden handler om, og om innholdet er relevant. Derfor bør toppen av siden følge en gjenkjennelig struktur.
En tjenesteside kan starte med kategori eller navigasjonssti, etterfulgt av en presis hovedoverskrift, en kort forklaring og én hovedhandling. Deretter kan siden svare på sentrale spørsmål i en naturlig rekkefølge:
- Hva er dette?
- Hvem passer det for?
- Hvilket problem løser det?
- Hva omfatter leveransen?
- Hvordan foregår samarbeidet?
- Hva bør kunden gjøre videre?
Rekkefølgen skal ikke dikteres av hvilke innholdsblokker designverktøyet tilbyr. Den skal følge brukerens behov for informasjon. Interne fagområder og avdelingsstruktur er sjelden et godt utgangspunkt for kundens lesereise.
La navigasjonen vise sammenhengen
En sidemal må fungere sammen med hovedmeny, lokal navigasjon og interne veier videre. Hvis brukeren kommer direkte fra et søk eller en delt lenke, mangler han eller hun ofte konteksten som forsiden gir.
Vis derfor tydelig hvilken del av nettstedet siden tilhører. En navigasjonssti kan være nyttig på nettsteder med flere nivåer. På omfattende tjenestesider kan en lokal innholdsmeny gjøre det enklere å hoppe mellom temaer. Relaterte sider bør velges fordi de er relevante, ikke fordi det finnes plass til tre kort nederst.
Unngå at navigasjonsnavn og sideoverskrifter bruker helt ulike begreper. Hvis menyen sier «Tjenester», landingssiden sier «Dette leverer vi», og undersidene bruker interne produktnavn, må brukeren selv forstå hvordan begrepene henger sammen. Et kontrollert språk er en viktig del av brukeropplevelsen.
Gjør typografien til en del av malen
Typografi handler ikke bare om skrifttype. Den avgjør hvor lett det er å skanne, forstå og lese innholdet. I sidemalene bør dere definere hvordan overskrifter, ingresser, brødtekst, lister, bildetekster og knapper skal brukes.
En god mal begrenser antall tekststiler og sørger for tydelig forskjell mellom nivåene. Overskriftsnivåene må følge innholdsstrukturen, ikke velges ut fra ønsket størrelse. Hvis en mellomoverskrift ser for stor ut, bør stilen justeres i designsystemet fremfor at redaktøren hopper over et nivå.
Sett også praktiske rammer for tekstmengde. En toppseksjon bør ikke være avhengig av en overskrift på tre ord for å fungere. Test malen med lange norske sammensatte ord, realistiske tjenestenavn og flere linjer tekst. Det avdekker problemer som ikke vises med korte eksempeltekster.
Bevar identiteten uten å ofre funksjonen
Visuell identitet bør gjøre bedriften gjenkjennelig, men den må fungere i daglig publisering. Definer hvordan merkevarens farger, former, bilder og grafiske detaljer skal brukes i hver sidetype.
Det betyr blant annet å bestemme hvilke bakgrunnsfarger som kan kombineres med hvilke tekstfarger, hvor sterke profilfarger bør brukes, og hvilken bildestil som passer ulike typer innhold. En profilfarge kan fungere godt som detalj eller knapp, men være lite egnet som bakgrunn for lange tekster.
Vær også tydelig på hva som ikke skal varieres. Knapper med samme funksjon bør se like ut. Lenker bør være gjenkjennelige på tvers av sidetyper. Kort, skjemaelementer og varsler bør ikke få et nytt uttrykk hver gang en ny kampanje lanseres.
Bygg tilgjengelighet inn i standardløsningen
Tilgjengelighet blir enklere å opprettholde når riktige valg er standard i malen. Redaktøren skal ikke måtte kontrollere kontrast, tastaturrekkefølge og skjemamerking fra bunnen av på hver side.
Sidemalene bør blant annet sikre:
- Logisk overskriftsstruktur
- Tilstrekkelig kontrast mellom tekst og bakgrunn
- Synlig markering når lenker og knapper får tastaturfokus
- Lenketekster som gir mening uten teksten rundt
- Skjemafelt med tydelige etiketter og forståelige feilmeldinger
- Mulighet for gode tekstalternativer til meningsbærende bilder
- Innhold som fungerer ved forstørring og på smale skjermer
Test malene med ekte innhold, tastatur og ulike skjermstørrelser. En komponent kan fungere alene, men skape problemer når flere komponenter settes sammen. En fast handlingsknapp kan for eksempel dekke innhold på mobil, mens en lokal innholdsmeny kan bli vanskelig å bruke med tastatur.
Knytt konvertering til sidens hensikt
Konvertering betyr ikke at alle sider skal presse frem en henvendelse. En tidlig besøkende kan trenge faglig informasjon, mens en kunde som søker etter kontaktinformasjon ønsker en rask vei til riktig person.
Definer derfor ønsket handling per sidetype. På en artikkel kan neste steg være å lese en utdypende tjenesteside. På en kundehistorie kan det være å se hvordan bedriften løser tilsvarende oppdrag. På en kontaktside bør det være enkelt å velge mellom telefon, e-post, skjema eller et konkret kontaktpunkt.
Plasseringen av handlingen bør følge innholdet. Brukeren bør få nok informasjon til å forstå hva som skjer etter et klikk. En knapp merket «Send inn» er mindre tydelig enn en knapp som beskriver hva som sendes eller bestilles. Fortell også hva brukeren kan forvente etterpå, særlig ved skjemaer og forespørsler.
Test malen før dere fyller hele nettstedet
Bygg én realistisk side av hver type før dere masseproduserer innhold. Bruk lange overskrifter, korte tekster, manglende bilder, omfattende lister og ulike handlingslenker. Test både ideelle og vanskelige tilfeller.
Gjennomfør deretter en enkel gjennomgang med representanter fra design, utvikling, innhold og forretning:
- Forstår brukeren sidens tema og plassering?
- Er innholdet presentert i en logisk rekkefølge?
- Er navigasjon og neste steg tydelige?
- Fungerer typografien med realistisk norsk innhold?
- Er profilen gjenkjennelig uten å forstyrre lesingen?
- Kan siden brukes med tastatur og forstørret visning?
- Vet redaktøren hvilke felt som er obligatoriske?
Feil som oppdages i en sidemal, blir ellers gjentatt på mange sider. Derfor er det mer effektivt å kvalitetssikre malen grundig enn å reparere hver publiserte side senere.
Forvalt sidemalene som et arbeidsverktøy
Sidemaler er ikke bare et designresultat. De er et felles arbeidsverktøy for markedsføring, kommunikasjon, salg og publisering. Hver mal bør ha en kort beskrivelse av formål, obligatoriske felt, anbefalt innholdsrekkefølge og tillatte variasjoner.
Når et nytt behov oppstår, bør dere først spørre om en eksisterende mal kan dekke det. Hvis svaret er nei, må dere avklare om behovet er varig og gjentakende før dere lager en ny sidetype. Slik unngår dere at nettstedet gradvis fylles med spesialløsninger.
Et godt sett med sidemaler gjør nettsiden enklere å bruke og enklere å forvalte. Brukerne møter et konsekvent språk og grensesnitt, mens redaktørene får rammer som hjelper dem å publisere godt. Det er denne kombinasjonen som gjør at webdesignet holder seg over tid.
