Oslo · Norge
Et fint bilde kan vekke interesse. Men kunden må også forstå hva dere tilbyr, finne svar på spørsmålene sine og vite hva neste steg er. Visuelt innhold er nyttig når det gjør dette enklere.
Start med det kunden trenger å forstå. Velg deretter bilder, video og bevegelse som hjelper kunden videre. Flere effekter gir ikke automatisk flere henvendelser.
Her får du en praktisk gjennomgang av hvordan bilder, motion design og UX/UI kan brukes på en nettside, og hva dere bør sjekke før dere investerer i et nytt uttrykk.
1. Hva betyr visuelt innhold, motion design og UX/UI?
Visuelt innhold er blant annet fotografier, illustrasjoner, diagrammer og video. Motion design er grafisk design i bevegelse, for eksempel en animasjon som forklarer hvordan en tjeneste fungerer.
UX handler om brukeropplevelsen: om kunden klarer å løse oppgaven sin. UI handler om det synlige grensesnittet, som knapper, skjemaer, skrift og farger. De henger sammen, men et pent grensesnitt er ikke nødvendigvis enkelt å bruke.
En konvertering er en ønsket handling, som et kjøp eller en sendt forespørsel. Bestem hvilken handling dere vil gjøre enklere. Et klikk på en knapp er ikke det samme som en ny kunde.
| Kundens spørsmål | Mulig løsning | Hva dere bør sjekke |
|---|---|---|
| Hva får jeg? | Et relevant bilde med en konkret forklaring. | Viser bildet faktisk produktet eller tjenesten? |
| Hvordan fungerer det? | Tre tydelige steg eller en kort forklaringsvideo. | Forstår kunden prosessen uten lyd? |
| Hva skal jeg gjøre nå? | En tydelig knapp ved tilbudet. | Stemmer knappeteksten med det som skjer? |
| Ble forespørselen sendt? | En synlig bekreftelse med neste steg. | Vises bekreftelsen først når innsendingen har lykkes? |
2. Velg bilder som svarer på spørsmål
Et bilde bør ha en jobb. På en produktside kan det vise størrelse, detaljer eller bruk. På en tjenesteside kan det vise arbeidsprosessen eller et ferdig resultat dere har lov til å dele.
Bruk ekte prosjektbilder når dere skal dokumentere erfaring. En illustrasjon kan forklare en idé, men bør ikke fremstå som bevis på et prosjekt dere har levert.
Sjekk også utsnittet på mobil. Viktige detaljer kan forsvinne når et bredt bilde blir beskåret. Informative bilder trenger en passende tekstbeskrivelse; rene dekorbilder behandles annerledes. W3Cs veiledning om alternativ tekst forklarer forskjellen.
3. Gjør veien til kontakt enkel
Før dere legger til animasjon, gå gjennom siden som en ny kunde. Er tilbudet forståelig? Finner du hva som er inkludert, hvem tjenesten passer for og hvordan du tar kontakt?
- Bruk konkrete overskrifter. Fortell hva dere leverer, ikke bare at dere skaper verdi.
- Gjør neste steg tydelig. «Be om et tilbud» passer når kunden sender en forespørsel. «Bestill» passer når kunden faktisk bestiller.
- Be om nødvendig informasjon. Forklar hvorfor dere trenger opplysninger som ikke er selvforklarende.
- Hjelp ved feil. Vis hvilket felt som må rettes, og behold informasjonen kunden allerede har skrevet.
La gjerne noen som ikke kjenner nettsiden, prøve å finne en tjeneste og fylle ut skjemaet i et testmiljø. Be dem fortelle hva som er uklart. Ikke forklar veien mens de prøver.
Se hvordan vi jobber med UX/UI-design. Skal siden bygges om, kan dere bruke guiden vår til en tydelig kravspesifikasjon for nettsiden.
4. Bruk bevegelse når den forklarer noe
En kort animasjon kan vise sammenhengen mellom steg, forklare et produkt eller gjøre en endring i grensesnittet tydelig. En enkel markering kan for eksempel vise at en vare er lagt i handlekurven.
Bevegelse som konkurrerer med teksten, kan gjøre siden vanskeligere å bruke. Unngå at kunden må vente på lange overganger før innhold eller knapper blir tilgjengelige. En viktig beskjed bør være forståelig også uten animasjonen.
Gi brukeren kontroll over innhold som beveger seg automatisk. W3C beskriver blant annet behovet for å kunne pause, stoppe eller skjule bevegelse som starter av seg selv, varer mer enn fem sekunder og vises sammen med annet innhold, med unntak for nødvendig bevegelse. Se veiledningen om bevegelig innhold.
Vurder en roligere versjon for personer som har valgt redusert bevegelse på enheten sin. Hvis prosessen trenger en visuell forklaring, kan en animasjonsvideo være nyttig. Noen ganger holder det med tre illustrasjoner og korte tekster.
5. Sjekk mobil, lesbarhet og hastighet
En stor video kan se flott ut på en kontorskjerm, men ta mye plass og tid på mobilen. Test med en vanlig telefon og en langsommere forbindelse. Kunden skal kunne lese tilbudet og bruke siden uten å vente på dekorative elementer.
Sjekk tekststørrelse, kontrast, avstand mellom knapper og om skjemaet fungerer med tastaturet åpent. Ikke legg viktig informasjon bare inn i et bilde. Den bør også finnes som vanlig tekst.
Be utvikleren tilpasse bildefiler og videolasting til bruken. Google beskriver Core Web Vitals som mål for blant annet lasting, respons og visuell stabilitet. Slike målinger kan vise tekniske problemer, men de erstatter ikke en kontroll av om kunden forstår siden.
6. Mål om endringen hjelper kunden
Bestem hva dere vil forbedre før dere endrer designet. Kanskje flere skal fullføre et skjema, eller færre skal be om informasjon som allerede står på siden.
Registrer fullførte handlinger, og vurder kvaliteten på henvendelsene. Mange klikk er lite verdt hvis kunden havner feil. Har dere behov for hjelp med målingen, les om analyse og sporing.
Ved nok trafikk kan dere sammenligne to varianter i en planlagt A/B-test. Med lite trafikk er samtaler og enkle brukertester ofte et bedre første steg enn å kåre en vinner etter noen få klikk. Dokumenter hva dere endret og hva dere faktisk kan konkludere med.
Sjekkliste før dere endrer det visuelle innholdet
Vil dere gjøre nettsiden enklere å forstå og bruke? Digital Group hjelper bedrifter i hele Europa med design, nettsider og markedsføring. Send oss siden og fortell hva kunden skal kunne gjøre. Vi hjelper dere med å prioritere forbedringene.
Snakk med oss om nettsiden →