Billeder kan i høj grad gøre brugervenligheden bedre. Læs med her og bliv klogere på, hvordan du kan forbedre din UX.

Vi har listet 7 tips, der viser, hvordan du kan gøre brug af billeder for at forbedre din UX.

1. Overvej dit layout
En grundlæggende overvejelse med hensyn til layout er at undgå uheldige beskæringer og vælge billeder, der supplerer layoutet og formatet af det design, du bruger. Det kan umiddelbart virke indlysende, men jeg ser ofte at der ikke er styr på dimensionerne. Vælg et billede i et korrekt formatforhold til dit site. Billeder, der eksempelvis er trukket ud eller er i dårlig opløsning, vil distrahere besøgende og virke uprofessionelt.

Sørg derfor altid for, at de basale elementer er i orden, når du vælger eller udarbejder de billeder, der skal indgå i dit layout.

2. Brug tekst ordentligt
At anvende tekst oven på et billede kan være en stor udfordring for brugervenligheden. For at sikre, at teksten kan læses, er det et godt værktøj at anvende en kontrastkontrol til at vurdere kontrasten mellem teksten og det valgte baggrundsbillede. Flere farver kan nemlig være dårlige at anvende, fordi farven kan gøre teksten meget svær eller ubehagelig for øjnene at læse. Som en god tommelfingerregel gælder det, at tekst oven på et billede virker bedst, hvis selve genstanden på billedet er lille, mens der er meget hvidt rum omkring.

En idé kan derfor være at anvende produktbilleder, der har en del whitespace, hvilket tillader stilfulde og læsbare tekster på billedet. En beskrivende tekst oven på billedet kan give en god kundeoplevelse, men kræver god kontrast omkring teksten. Et eksempel på dette er topbanneret hos markiseeksperten.dk, hvor der netop er tonet ned for lyset i grafikken, så teksten "Sommertilbud" står tydeligt frem, og også fungerer fint på mobilen. 

3. Brug øjne til at vise, hvor øjne skal kigge hen
Opførselspsykologien beskriver, at mennesker bliver tiltrukket af at se derhen, hvor øjne i et billede kigger. At anvende øjne i dit design kan derfor bruges som en fordel, når du skal designe en side. Det kan du eksempelvis gøre ved at lade nogle øjne på et billede kigge hen på din overskrift eller CTA (call to action). Mennesker ser nemlig helt naturligt hen på de steder, hvor andre menneskers blik er rettet mod.

Det er imidlertid ikke kun mennesker, som kan anvendes til at opnå denne effekt. Du kan sågar anvende dyreøjne, hvis det eksempelvis passer bedre ind i dit produkt.

4. Det specifikke er bedre end det generelle
I valget af dine billeder kan du gå efter at anvende specificitet til din fordel. En af grundene til, at stock photography er blevet lidt af en kliché, er den generelle og vage karakter ved billederne. Det gælder eksempelvis billeder af kvinder, der smiler, mens de sidder og spiser en salat, eller mænd, der ser veltilfredse ud, når de kører i en bil. Du skal derfor gå efter at finde mere virkelighedsnære billeder, der kan skabe troværdighed hos dit brand.

Det kan du gøre ved at associere dit brand med billeder fra mere ægte scenarier, der har større sandsynlighed for at forekomme i virkeligheden, så de virker mindre opstillede. Et godt eksempel på gode naturlige fotos er Jysk Display.

Vær ikke bange for at vise jeres ansatte på fotos, også selvom det ikke ser perfekt ud. Det uperfekte kan i høj grad skabe troværdighed.

Du kan også embedde fotos fra andre steder, fx. fra Google Maps, som giver et godt og professionelt layout til fx. oversigt over butikker, som her hos handelsbyer.dk, hvor der er indsat et Google map kort, over alle hvidevarebutikker i Odense.

5. Fortæl din historie med billeder
Hvis du alligevel anvender stock photography, skal du tænke nøje over, om billedet er det rigtige til at fortælle den historie, du gerne vil formidle. Derfor skal du måske igennem en del billeder, før du finder det, der fortæller din historie bedst.

Her er det ligeledes vigtigt at huske på, at ét godt billede er bedre end tre halvgode. Jo skarpere du kan gøre din profil, jo bedre er det nemlig for din UX.

6. Alt-tags
Billeder, der indeholder vigtige oplysninger, skal have beskrivende alt-tags, der formidler de samme oplysninger, der er på billedet. Hvis et billede eksempelvis indeholder et link, er det vigtigt, at alt-tagget beskriver de samme oplysninger, som der er på det givne billede, og gerne på den underside der linkes til.

Alt-tagget bliver blandt andet vist, hvis en dårlig internetforbindelse er skyld i, at billederne ikke kan loades. Billeder, der udelukkende fungerer som dekorative elementer på dit site, skal ikke have et alt-tag, da forståelsen af disse billeder ikke er afgørende for forståelsen af dit brands budskab.

7. Præstationsevne
Et afgørende element, hvor billeder påvirker brugeroplevelsen, er gennem billedernes loading-tid.

At sikre, at de anvendte billeder er optimeret til internettet, kan være med til at reducere den irriterende tid, som brugerne bruger, når de skal vente på, at billeder, videoer med mere bliver loadet. Der findes flere funktioner, såsom ”Photoshop Save for web-funktionen”, der kan give dig mulighed for at balancere billedernes kvalitet og størrelse. Som hovedregel er det bedst, hvis du holder billedernes størrelse under 70 kb. Det er mulgit at have en meget lav loadtid trods mange fotos, som det fx. er tilfældet på e-commerce. Tjek fx. katoni.dk, som loader utroligt hurtigt trods rigtig mange produktfotos. Det kan klares ved hjælp fra CDN.

Flotte fotografier er en central del af mange brugeroplevelser på nutidens web. At skabe god UX kræver, at der bliver sat tid af til billeder, der ofte kan være et overset element. Mange elementer på dit site spiller sammen for at forbedre brugeroplevelsen hos dine besøgende, og en ordentlig anvendelse af billeder er en del, som du ikke vil undgå at have med, da det – sammen med de andre elementer – kan være med til at skabe en bedre brugeroplevelse.