Responsiva bilder

2014.11.21

Att välja ut bilder bör inte göras lättvindigt. Bilder påverkar i hög grad hur en användare upplever en sajt och kan såväl hjälpa som stjälpa användarupplevelsen. När vi läser text omvandlas det vi läser till bilder i vårt medvetande innan vi lagrar informationen som minnen. Därför är bilder så bra hjälpmedel, de hjälper oss med denna omvandling. 

Men hur man kan använda bilder är inte så svart/vitt som en del får det att låta. Som så mycket annat så ser jag användandet av bilder mer som en skala.

Mer precis innebär de olika typerna av bilder följande: 

  • Bilder som dekoration - Dessa bilder tillför egentligen inget till innehållet utan är till för att lätta upp en informationstung sajt. Bilder som dessa tenderar att väljas ut utan eftertanke vilket gör att de inte hör ihop med innehållet. Användande av bilder på detta sätt är inget vi rekommenderar. Exempel på detta är royaltyfria bildbyråbilder som ofta används för att ”Lätta upp stämningen” på texttunga sajter. Sådana bilder är ofta konstlade och användaren kan i regel se att det inte ligger någon tanke bakom bilden. Sådana bilder kan skada förtroendet för ett varumärke, så håll dem borta från er sajt. Bilder ska väljas med omtanke, inte i förbigående.

  • Stämningsbilder - Bilder kan vara ett utmärkt sätt att få in text och information i ett sammanhang. Denna typen av bilder är speciellt bra för det jag nämnt tidigare, att stödja omvandlingen av information till bilder i våra medvetanden och underlätta att vi kommer ihåg. Stämningsbilder kan hjälpa användare förstå innehållet bättre eller bidra med något särskilt i kontexten där de används, så som att bygga varumärket och bidra till att göra information mer förtroendeingivande. Men bilder kan fungera beskrivande och bidra med information även om de per definition inte är informationsbärande. En bild säger mer än tusen ord, och i det här fallet stämmer det verkligen.
  • Informationsbärande bilder - Att använda informationsbärande bilder innebär att en viktig del av innehållet ligger i själva bilden. Det kan exempelvis vara illustrationer, diagram och informationsgrafik. Om en informationsbärande bild tas bort förloras en del av innehållet.

Responsivitet och bilder

Oavsett vilken typ av bild som används behöver vi fundera på ett tillvägagångssätt för hur dessa bilder hanteras på responsiva sajter. I och med den förändrade situationen vari sajten används (vid frukost bordet, på tunnelbanan osv.) och det förändrade formatet på sajten kommer även bilderna upplevas annorlunda. Det handlar inte bara om att bilder behöver skalas om. För att vara riktigt krass så räcker det sällan att skala om en bild, utan vi behöver tänka efter mer än så. 

Exempelvis så passar bilder i porträttformat sällan en mobiltelefon, och även i surfplattor passar landskapsformat bättre. Men det går inte att bara använda bilder i landskapsformat, det är inte heller användbart. För att illustrera problematiken med omskalning av bilder visar vi här hur en bild ter sig i olika enheter. När bilden skalas om, framförallt i  mobil, tappar bilden sitt ursprungliga syfte och blir mer störande än hjälp. 

Många gånger leder detta till att man helt plockar bort bilder i mindre enheter för att komma undan detta problem… men att plocka bort stämningsbilder kan göra att man tappar sammanhanget och situationen som information härrör till, och att plocka bort informationsbärande bilder gör att användare går miste om en del av innehållet. Så vad är då lösningen?

För att bilden ska uppfylla samma syfte i stora som små enheter behöver istället bilder anpassas för formatet de används i. Detta ställer till klurigheter rent tekniskt men just nu har vi valt att endast fokusera på användarupplevelsen. 

Informationsbärande bilder kan i regel inte beskäras. Det skulle ha samma resultat som att plocka bort bilden, dvs. att användaren går miste om viktig information. Beroende på hur sådana bilder ser ut behöver det gå att ta till sig dem på andra sätt. Zooma in och förflytta sig i bilden är en lösning. Stämningsbilder däremot kan behöva beskäras annorlunda för att passa det mindre formaret. Detta kan göra att informationen ändras i bilden något men avsikten med att ha bilden kan ändå kvarstå. 

Som ni ser i vårt exempel så blir innehållet i dessa bilder olika eftersom de är beskurna olika. Om texten i detta fall handlar om personen och inte det faktum att han går på lina gör det inget att viss information faller bort när bilden beskärs. Handlar texten däremot om att personen gick på lina ovanför en viss stad behöver vi fundera ytterligare en gång när vi först väljer bild och sedan när vi beskär den för att bilden ska vara relevant i alla enheter.

Värt att tänka på är att denna ändring av innehållet i bilder leder till att vi även måste anpassa informationen kring bilden, så som titlar och beskrivningar, för specifika enheter så att allt hänger ihop. För att användare på mobila enheter ska kunna få samma användarupplevelse som de som sitter på desktop är detta nödvändigt. 

Med hjälp av webbstatistik har vi sett att en del sajter som vi arbetar med på Winston har så hög andel mobila användare som 40%. Vet du hur stor andel mobila användare du har på din sajt? Om den skulle vara så hög som 40%, vågar du verkligen utesluta dessa användare genom att inte ge dem bästa möjliga upplevelse? Om svaret är nej är det hög tid att se över hur du använder bilder, om du inte redan gjort det.