Når alt roper samtidig: Slik rydder dere i nettsidens visuelle hierarki
En praktisk metode for å finne og rette sider der navigasjon, budskap, knapper og visuelle virkemidler konkurrerer om oppmerksomheten.
Kategori: Webdesign
Mange bedriftsnettsider har gode tekster, gjennomarbeidet profil og alle nødvendige funksjoner, men er likevel krevende å bruke. Problemet er ofte ikke mangel på innhold. Det er at for mange elementer ber om oppmerksomhet samtidig.
Når overskrifter, menyvalg, bilder, fargeflater, kampanjebokser og knapper får omtrent samme visuelle tyngde, må brukeren selv finne ut hva som er viktigst. Det gir tregere orientering, flere feilvalg og mindre sannsynlighet for at besøkende gjennomfører ønsket handling.
Løsningen er et tydelig visuelt hierarki: en bevisst rangering av hva brukeren skal se først, forstå deretter og kunne gjøre til slutt. Denne artikkelen viser hvordan dere kan undersøke og forbedre hierarkiet på sentrale sider uten å redesigne hele nettstedet.
Start med oppgaven, ikke uttrykket
Før dere vurderer skrifttyper, farger eller luft, må dere avklare hvilken oppgave siden skal løse. En tjenesteside kan for eksempel ha disse prioriteringene:
- Forklare hvilken tjeneste bedriften leverer.
- Gjøre det tydelig hvem tjenesten passer for.
- Bygge tillit med relevant dokumentasjon.
- Hjelpe brukeren videre til kontakt eller bestilling.
Denne rekkefølgen skal kunne leses ut av designet. Hvis et stort bilde av kontoret får mer plass enn forklaringen av tjenesten, eller et nyhetsbrevskjema konkurrerer med kontaktknappen, støtter ikke siden oppgaven den er laget for.
Skriv derfor ned én primær handling og eventuelt én sekundær handling for hver viktig sidetype. På en produktside kan kjøp være primærhandlingen, mens nedlasting av produktark er sekundær. På en rekrutteringsside kan visning av ledige stillinger være viktigere enn generell kontakt.
Denne prioriteringen gir et konkret grunnlag for alle designvalg som følger.
Gjennomfør en hierarkirevisjon av siden
Velg tre til fem sider som har stor betydning for bedriften. Det kan være forsiden, en sentral tjenesteside, en kontaktside og en viktig landingsside. Undersøk både mobil og stor skjerm. En side som virker ryddig på en bred skjerm, kan bli uoversiktlig når alle elementene stables på mobil.
1. Finn det første blikkfanget
Se på siden i noen få sekunder uten å lese grundig. Noter hva øyet trekkes mot først. Be gjerne flere kolleger gjøre det samme hver for seg.
Det første blikkfanget bør normalt være sidens hovedbudskap eller et element som hjelper brukeren å forstå hvor han eller hun har kommet. Hvis oppmerksomheten i stedet går til et dekorativt bilde, et kundeservicesymbol eller en sterk bakgrunnsfarge uten viktig innhold, er hierarkiet sannsynligvis feil.
Vurder også hva som blir synlig uten at brukeren ruller. Det betyr ikke at alt viktig må ligge øverst, men toppen må gi nok sammenheng til at det er naturlig å fortsette.
2. Les bare overskrifter og knapper
Skum siden ved kun å lese hovedoverskrift, mellomtitler, lenketekster og knapper. Kan dere forstå sidens innhold og valgmuligheter uten å lese brødteksten?
Overskrifter som «Våre løsninger», «Mer informasjon» og «Hvorfor velge oss?» sier lite når de står alene. Mer konkrete formuleringer gjør siden enklere å skanne. «Regnskap for virksomheter med ansatte» gir eksempelvis mer informasjon enn «Våre tjenester».
Knappetekster bør også beskrive resultatet av handlingen. «Be om pristilbud» og «Se ledige stillinger» er tydeligere enn «Les mer» og «Klikk her». Dette forbedrer både navigasjon, tilgjengelighet og konvertering.
3. Tell elementene som ser klikkbare ut
Marker alt som visuelt ligner en knapp eller lenke. Se deretter etter det motsatte: elementer som kan klikkes, men som ikke ser klikkbare ut.
Uklare grensesnitt oppstår ofte når samme form brukes til flere formål. En avrundet fargeflate kan være knapp ett sted, informasjonsmerke et annet sted og ren dekorasjon et tredje. Brukeren må da teste seg frem.
Definer noen få, konsekvente handlingsnivåer:
- Primærknapp: Den viktigste handlingen på siden.
- Sekundærknapp: Et relevant alternativ som ikke skal konkurrere med primærhandlingen.
- Tekstlenke: Utforskende navigasjon og supplerende informasjon.
En side kan ha flere forekomster av primærhandlingen, men bør sjelden ha mange ulike handlinger som alle presenteres som viktigst.
Bruk typografi til å vise struktur
Typografi handler ikke bare om valg av skrifttype. Størrelse, vekt, linjeavstand, linjelengde og avstand mellom tekstelementer avgjør hvordan innholdet blir forstått.
Lag et begrenset typografisk system med faste nivåer for hovedoverskrift, mellomtitler, brødtekst, ingress og små hjelpetekster. Nivåene må være tydelig forskjellige, men ikke så dramatiske at hver overskrift oppleves som en ny kampanje.
Pass spesielt på disse problemene:
- Brødtekst som er for liten eller tett, særlig på mobil.
- Lysegrå tekst som gir svak kontrast mot bakgrunnen.
- For lange tekstlinjer som gjør det vanskelig å finne neste linje.
- Store bokstaver i lengre tekster og knapper, som reduserer lesbarheten.
- Overskrifter som ser ut som vanlige avsnitt, eller avsnitt som ser ut som overskrifter.
Den visuelle størrelsen må samsvare med den semantiske strukturen. En tekst skal ikke gjøres stor og fet for å etterligne en overskrift. Riktig overskriftsnivå gjør innholdet mer forståelig for både hjelpemidler, søkemotorer og redaktører.
La navigasjonen være gjenkjennelig
Navigasjonen skal hjelpe brukeren å finne frem, ikke demonstrere alle mulighetene nettstedet rommer. Hovedmenyen bør derfor bestå av tydelige kategorier som brukerne kjenner igjen, ikke interne avdelingsnavn eller produktbegreper som krever forkunnskap.
Se også på forholdet mellom hovedmeny og innhold. Hvis menyen har mange sterke farger, flere knapper og gjentatte handlingsoppfordringer, kan den stjele oppmerksomhet fra hver side brukeren åpner.
På mobil må menyen fungere som en egen brukerflate. Kontroller at kategorier, undernivåer, tilbakevalg og lukking er forståelige. Klikkeflatene må være romslige nok, og tastaturfokus må være synlig. Det skal være mulig å forstå hvilket menypunkt som er aktivt uten å være avhengig av farge alene.
Bevar identiteten uten å overbelaste siden
En tydelig visuell identitet betyr ikke at alle profilvirkemidler må brukes på hver side. Farger, former, bilder og typografiske særtrekk bør støtte innholdet, ikke konkurrere med det.
Velg en funksjon for hver sentrale profilfarge. Én farge kan brukes til primærhandlinger, en annen til informasjonsflater og en tredje til diskrete skiller. Hvis samme sterke farge brukes på knapper, overskrifter, ikoner, bakgrunner og dekor, mister den evnen til å signalisere hva som er viktig.
Bilder bør også ha en definert rolle. Et miljøbilde kan vise hvordan en tjeneste utføres. Et portrett kan gjøre kontaktpunktet mer troverdig. Et skjermbilde kan forklare et digitalt produkt. Bilder som bare fyller plass, gjør siden lengre uten å hjelpe brukeren.
Test gjerne siden midlertidig uten dekorative bilder og bakgrunner. Hvis innholdet da blir lettere å forstå, bør noen av virkemidlene tones ned eller fjernes.
Tilgjengelighet skjerper hierarkiet
Tilgjengelig design og godt visuelt hierarki løser mange av de samme problemene. Tydelig kontrast, synlig fokus, forståelige lenketekster og logisk struktur gjør siden enklere for alle.
Forstørr siden betydelig og kontroller at innholdet fortsatt kan leses og brukes uten at tekst overlapper eller forsvinner. Naviger med tastatur og se om rekkefølgen følger den visuelle oppbygningen. Undersøk også siden uten farger: Er det fortsatt mulig å skille valgt, aktivt, påkrevd og feil?
Unngå å bruke plassering som eneste forklaring. Formuleringer som «velg knappen til høyre» kan bli feil på mobil eller ved forstørring. Beskriv heller handlingen med navnet på knappen eller funksjonen.
Koble forbedringene til konvertering
Konvertering handler ikke om å gjøre alle knapper større. Det handler om å redusere usikkerhet og gjøre neste relevante handling tydelig.
Før en viktig knapp bør brukeren ha fått svar på de mest naturlige spørsmålene: Hva tilbys, hvem passer det for, hva skjer videre, og hvilke forpliktelser følger med? En kontaktknapp plassert før tjenesten er forklart, kan være synlig uten å være overbevisende.
Se også etter konkurrerende handlinger i nærheten av konverteringspunktet. Rett før innsending av et skjema trenger brukeren sjelden lenker til nyheter, sosiale medier og andre tjenester. Fjern eller ton ned det som trekker oppmerksomheten bort fra oppgaven.
Prioriter endringene etter effekt og innsats
En hierarkirevisjon vil ofte avdekke flere problemer enn dere kan løse samtidig. Del tiltakene i tre grupper:
- Raske rettelser: Endre uklare overskrifter, knappetekster, kontraster og unødvendige handlingsoppfordringer.
- Komponentendringer: Rydd opp i knapper, kort, menyer og typografiske nivåer som brukes på mange sider.
- Strukturelle endringer: Omorganiser innhold, navigasjon eller sidemaler som ikke støtter brukerens oppgave.
Start med feil som går igjen. Hvis den samme utydelige knappen brukes på femti sider, gir en forbedring i komponenten større effekt enn detaljjustering av én enkelt landingsside.
Et godt visuelt hierarki merkes ofte ved at nettsiden føles enklere uten at den nødvendigvis ser enklere ut. Brukeren forstår raskere hvor han eller hun er, hva som er viktig, og hvilken handling som er naturlig videre. Det er et konkret kvalitetsmål for webdesign, ikke bare et spørsmål om smak.
