Et vanlig spørsmål i redesignprosjekter er: Hvordan lager vi en forside som gjør at kundene raskt forstår hva vi tilbyr, og hva de skal gjøre videre? Svaret ligger sjelden i en større toppseksjon, mer animasjon eller en knapp i en friskere rosafarge. Forsiden må først og fremst fungere som en veiviser.
Mange bedriftsforsider forsøker å fortelle hele virksomhetens historie på én gang. Resultatet blir omtrent som å montere årsrapporten på et veiskilt: imponerende mengde informasjon, begrenset hjelp i neste veikryss. En god forside prioriterer i stedet noen få oppgaver og leder ulike besøkende videre til riktig innhold.
Start med oppgaven forsiden skal løse
Før dere diskuterer farger, fonter og bildebruk, bør dere definere hvilke spørsmål en ny besøkende trenger svar på. For de fleste bedriftsnettsteder er dette ganske jordnært:
- Hva tilbyr dere?
- Hvem er tilbudet relevant for?
- Hvilket problem løser dere?
- Hvorfor bør kunden vurdere akkurat dere?
- Hva er et naturlig neste steg?
Dette er ikke det samme som å presse alle svar inn i første skjermbilde. Toppseksjonen skal etablere retning, ikke avholde et komplett salgsmøte. En tydelig overskrift, en kort forklaring og én prioritert handling er ofte nok til å få riktig bruker videre.
Formuler overskriften med kundens behov som utgangspunkt. «Vi skaper fremtidens helhetlige løsninger» sier lite om både produkt, målgruppe og nytte. «Regnskapssystem for norske håndverksbedrifter» gir derimot brukeren noe konkret å vurdere. Kreativiteten kan få leve videre, men den trenger ikke stå vakt i resepsjonen.
Lag et enkelt innholdshierarki
En nyttig forside kan bygges som en rekkefølge av beslutninger. Begynn med tilbud og målgruppe. Vis deretter de viktigste tjenestene eller inngangene. Følg opp med dokumentasjon som kundehistorier, arbeidsmetode, fagkompetanse eller konkrete leveranser. Avslutt med et neste steg som passer kjøpsprosessen.
- Orientering: Hva tilbyr bedriften, og for hvem?
- Valg: Hvilken tjeneste, løsning eller situasjon gjelder det?
- Trygghet: Hva viser at bedriften kan levere?
- Handling: Hva bør brukeren gjøre nå?
Denne strukturen kan tegnes som en enkel grå wireframe før noen designer detaljer. Hvis innholdet ikke gir mening i sorte bokser på hvit bakgrunn, blir det sjelden tydeligere av gradienter og svevende geometriske former.
Gjør navigasjonen til et valgverktøy
Hovedmenyen skal hjelpe brukeren med å kjenne igjen sin egen oppgave. Menypunkter som «Tjenester», «Produkter», «Bransjer» og «Om oss» kan fungere godt når innholdet under er tydelig organisert. Problemet oppstår når interne avdelinger, produktnavn og historiske satsinger får hver sin plass fordi ingen ønsker å rydde.
En overfylt megameny ligner fort på en bod der alle kabler siden 2009 er tatt vare på. Det finnes sikkert noe nyttig innerst, men få har lyst til å starte utgravingen. Begrens derfor hovednivået til de viktigste inngangene, og bruk beskrivende undersider til resten.
Navnene i menyen bør bruke ord kundene forstår uten intern opplæring. Dersom bedriften kaller rådgivningstjenesten sin «Strategisk akselerasjon», mens kundene leter etter «IT-rådgivning», bør kundens begrep normalt vinne. Visuell identitet tåler et forståelig substantiv.
Koble menyen til forsidens innhold
Forsiden og navigasjonen bør bruke samme logikk. Hvis menyen deler tilbudet etter bransje, mens forsiden deler det etter produkt og salgsteamet deler det etter region, må brukeren oversette organisasjonskartet underveis. Velg én hovedmodell og bruk den konsekvent.
For en bedrift med tre tydelige tjenester kan forsiden for eksempel vise tre likeverdige kort med tjenestenavn, kort nyttebeskrivelse og lenke videre. Har dere mange produkter, kan det være bedre å starte med kundens situasjon: «Jeg skal etablere», «Jeg skal effektivisere» eller «Jeg trenger hjelp med drift». Riktig modell avhenger av hvordan kundene faktisk orienterer seg, ikke av hvilken kortkomponent som ser finest ut i designskissen.
La typografi og visuell identitet gjøre praktisk arbeid
Typografi skaper både personlighet og lesbarhet. Velg skrifter som fungerer i norske bokstaver, små størrelser og ulike skjermbredder. Brødtekst bør ha tydelig kontrast, romslig linjeavstand og en linjelengde som gjør det enkelt å finne neste linje. Overskrifter må skille nivåene klart, ikke bare variere mellom «stor», «litt mindre stor» og «samme størrelse, men nå i rosa».
To godt valgte skriftsnitt er ofte mer enn nok. Et omfattende utvalg av fonter, vekter og dekorative varianter blir fort typografisk tapas: mye å smake på, men vanskelig å forstå hva som egentlig er hovedretten. Definer faste stiler for overskrifter, brødtekst, ingresser, lenker, knapper og hjelpetekst, og bruk dem konsekvent.
Den visuelle identiteten bør støtte innholdshierarkiet. Farge kan markere handlinger og kategorier, men må ikke være eneste signal. Ikoner kan hjelpe gjenkjenning, men bør kombineres med tekst når betydningen ikke er åpenbar. Bilder bør forklare virksomheten, produktet eller situasjonen – ikke bare fylle et pent rektangel mellom to seksjoner.
Bygg tilgjengelighet inn i designsystemet
Tilgjengelighet blir enklere når den behandles som en del av komponentene, ikke som kontrollarbeid rett før lansering. Knapper trenger tydelige tilstander for fokus, peker og aktivering. Lenker må kunne gjenkjennes. Skjemaetiketter skal være synlige og forståelige. Tekst og interaktive elementer må ha tilstrekkelig kontrast, og innholdet skal fungere når teksten forstørres eller vinduet blir smalt.
Et tillegg som lover å «ordne tilgjengeligheten» med én knapp, kan ikke reparere svak struktur, uforståelige tekster eller feilbygde komponenter. Det er omtrent som å tegne en paraply på plantegningen og erklære taket ferdig. Test heller grunnkomponentene med tastatur, skjermforstørring og relevante hjelpemidler før de kopieres til femti sider.
- Kan alle handlinger nås og brukes med tastatur?
- Er fokusmarkeringen lett å se?
- Har overskriftene en logisk rekkefølge?
- Er lenketekstene forståelige uten avsnittet rundt?
- Beholder siden mening uten farger og dekorative bilder?
- Fungerer innholdet ved forstørring og på smale skjermer?
Design konvertering som et naturlig neste steg
Konvertering handler ikke om å plassere flest mulig knapper på siden. Det handler om å tilby riktig handling når brukeren har nok informasjon til å ta den. For en enkel tjeneste kan «Bestill befaring» være naturlig tidlig. For en kompleks investering kan «Se hvordan vi jobber» eller «Les kundehistorie» være et bedre mellomsteg før kontakt.
Velg én primær handling per seksjon, og gi sekundære valg lavere visuell vekt. Når «Kontakt oss», «Book møte», «Få tilbud», «Last ned», «Se video» og «Meld deg på» alle roper samtidig, får dere ikke seks konverteringsmuligheter. Dere får et lite digitalt allmøte uten møteleder.
Knappetekster bør beskrive resultatet av handlingen. «Send forespørsel», «Se tjenestene» og «Be om pristilbud» er tydeligere enn «Klikk her» og «Les mer». Fortell også hva som skjer etterpå. En kort tekst som «Vi svarer normalt med forslag til neste steg» reduserer usikkerhet uten å kreve et eget automatiseringsunivers med tre plugins og en konsulentsertifisert trakt.
Mål om designet faktisk hjelper
Før lansering bør dere definere noen få tegn på at forsiden fungerer. Det kan være hvor mange som går videre til prioriterte tjenestesider, starter et relevant skjema eller finner kontaktinformasjon. Se også etter mislykkede mønstre: gjentatte returer til menyen, mye trafikk til irrelevante sider eller skjemaer som påbegynnes, men ikke fullføres.
Kombiner måling med korte brukertester. Be personer i målgruppen forklare hva bedriften tilbyr, finne en bestemt tjeneste og vise hva de ville gjort videre. Ikke hjelp dem underveis. Stillheten som oppstår når en testperson leter etter et menypunkt, er ofte mer informativ enn en lang workshop om «digital merkevareopplevelse».
En god forside trenger altså ikke være spektakulær. Den trenger en tydelig oppgave, et forståelig hierarki, konsekvent navigasjon, lesbar typografi, tilgjengelige komponenter og handlinger som passer brukerens beslutning. Når disse delene virker sammen, blir designet mindre opptatt av å vise seg frem – og langt flinkere til å få kunden videre.
