Betydelsen av visuell kontext i webbdesign

Enligt resultat från en ofta citerad studie från Missouri University of Science and Technology tar besökare mindre än två tiondelar av en sekund för att bilda en åsikt om din företags webbplats. Det är visuellt sammanhang som hjälper dem att förstå vad som händer, bilda ett solidt intryck och stanna längre. Visuella har en övertygande påverkan på användarna eftersom de på ett effektivare sätt kan leverera ett snabbmeddelande än textinnehåll.

När det gäller det skrivna ordet är det svårt för en läsare att förstå vad en författare vill förmedla. Detta händer även i webbdesign. En webbplats behöver skapa ett visuellt sammanhang som kommunicerar bakgrundskunskapen och berättelsen om organisationen den tillhör. 

Vad är Visual Context?

Visuellt sammanhang avser presentation av innehåll som förbättrar leveransen av en webbplatsens meddelande.

Till exempel kan en arkitekts webbplats innehålla en portfölj av framgångsrika projekt. Det är enligt användarens eget omdöme att antingen utforska denna expertis eller inte. Men visuellt sammanhang från början (användningen av bild, färg, utrymme) kommer att säkerställa att användarna lär sig att känna till arkitektens designkunskaper, erfarenhet av byggande och konstruktion och administrativ expertis.

Ta ett annat exempel på detta flygteknikföretag. Den djärva visningen av flygplan och teknik förtydligar en överblick av sin position inom rymdindustrin. Användaren är inte ens skyldig att läsa banderollstexten.

www.mercaerospace.co.uk

Föreställ dig hur samma landningssida skulle visas om vi skulle ta bort bilderna från flygplanet? Utan tvekan mer vag och komplex. Merc Aerospace erbjuder ett brett utbud av tekniska lösningar till olika sektorer men är främst utsatta för flygindustrin, som alla representeras lämpligt genom visuella.

Hur skapas Visual Context?

Att skapa ett visuellt sammanhang beror på att du förstår dina användare. En användares perspektiv ändras med ålder, kön och etnicitet. Till exempel kan lägga till bilder med vit färg uppmuntra en uppfattning om lycka för ett samhälle, men förmedla tecken på sorg för andra. För att kunna integrera visuella bilder i ett företagssammanhang måste du därför utvärdera förståelsen för de personer du behöver nå, något som användarpersoner kan hjälpa dig med.

  • Sluta lägga användarpersoner i skrivbordslådan

    Personer är något vi har lyft från reklambranschen. Olyckligtvis passar de inte för webbdesignprocessen. Nu är det dags att byta ...
    Paul Boag
    UX
  • Att göra nätet tillgängligt för alla med inklusiv design och diverse personer

    Denna artikel kommer att undersöka hur vi bättre kan förstå tillgänglighet och människor genom att använda "olika personer" i vår designprocess, vilket hjälper oss att göra ...
    Graeme Fulton
    Tillgänglighet

Följande är några värda ingredienser för att skapa visuellt sammanhang:

  •          Bilder relaterade till verksamheten
  •          Infographics för att sammanfatta en texttext på ett skannbart sätt
  •          Pilar, linjer och curlicues för att markera siffror eller visa riktning
  •          Urval av ord och fraser berikar det visuella sammanhanget
  •          Storytelling genom kreativ vävd grafik
  •          Tilltalande ikoner för användbar navigering

Hur viktigt är visuell kontext?

Låt oss titta på några anledningar bakom betydelsen av det visuella sammanhanget:

Första intryck räknas

Som tidigare nämnts tar användarna en bråkdel av en sekund för att bilda en åsikt om din webbplats. En mer koncentrerad åsikt förstärks på bara några sekunder efter det. Branding, bilder och ikoner måste skapa ett förstklassigt första intryck på kort tid. För att uppmuntra användare att stanna längre, ger tillverkaren ett visuellt sammanhang en informerad bild av vad webbplatsen handlar om och vad den står för.

Det hjälper informationsleverans

Visuella bilder på en webbplats har en "sensuell" överklagning jämfört med textualitet. En användare kommer sannolikt att märka kompletterande bilder som bekräftar det övergripande sammanhanget, snarare än fraser och stycken. Men bra din berättelse berättar, det första emotionella svaret från användaren är starkt beroende av bilder, vilket hjälper till att slutföra informationen.

  • Se till att användarna kommer ihåg dig, berätta en historia

    Trots att storytelling dominerar allt från underhållning till reklam, använder vi sällan det på våra webbplatser. Det är dags att ändra det.
    Paul Boag
    UX

Bättre användarförståelse

Det visuella sammanhanget gör en berättelse levande. Det gör en användare (okänd för webbplatsen) förstår ett företag och dess verksamhet. Han eller hon kommer att få kärnverksamhetsidén från kontextet, sedan leta efter alternativ, produkter och tjänster som finns tillgängliga. 

Om du förföljer ett innovativt användargränssnitt, som trotsar konventioner, kommer visuellt sammanhang att bidra till att överbrygga klyftan mellan användare och din produkt.

Emotionella obligationer är viktiga

Visuellt sammanhang hjälper till att trigga känslorna hos en målgrupp. Ta exempel på Lend With Care, en mikrofinansorganisation. Räkna antalet mänskliga ansikten på hemsidan, direkt ge kontext och ansluta till användaren. De varma, mjuka färgerna gör webbplatsen inbjudande, leenden överför positivitet och en känsla av gemenskap.

www.lendwithcare.org

Inom några minuter har besökare ett känslomässigt band med webbplatsen. 

  • Stora leenden och glada ansikten i webbdesign

    I denna veckas inspirerande sammanfattning kommer vi att lägga leenden på våra ansikten genom att titta på glada illustrationer från hela webben.
    Ian Yates
    Inspiration

Och detta kan gälla för produkter lika bra kunder kan lika sannolikt bilda anslutningar med en mängd olika produkter. Som designer är det ditt jobb att skapa visuella bilder som rör en målgrupps inre sinnen. 

Slutsats

Visuell kontext hjälper användare, speciellt första gången besökare, att tolka en webbplatss egenskaper och värden. Som designer kan du använda det vi har diskuterat - den viktiga kombinationen av bild, färg, visuell data, infographics, video, animering, ikoner, riktning och alla andra visuella verktyg till ditt förfogande - för att skapa det viktiga sammanhanget.