13.5.1 Låt stora bilder representeras av små bilder
Om du inte vill lägga in en bild direkt på sidan – antingen för att den skulle ladda för långsamt, eller för att den inte ryms i layouten – kan den istället representeras av en minibild, en så kallad tumnagel (på engelska thumbnail). När användaren klickar på denna kommer hon till originalbilden.
För att betona att tumnageln är klickbar kan man med fördel rama den (se Låt ramen runt klickbara bilder vara kvar, sid 126).
Olika sätt att visa originalbilden
Tumnageln kan vara länkad antingen direkt till bilden, eller till en webbsida med bilden.
Om länken går direkt till bilden är det inte säkert att denna visas i riktig storlek. Är bilden större än fönstret förminskas den i många webbläsare så att hela syns. Användaren kan dock förstora bilden – om hon vet hur man gör.
Om detta är en för- eller nackdel beror på om det är viktigast att användaren får se hela bilden, eller att hon får se bilden i korrekt storlek (till priset att hon tvingas rulla för att se alla delar av den).
Det andra alternativet är att lägga bilden på en webbsida.
En sådan sida behöver inte anstränga sig för att se ut som resten av webbplatsen, den kan till exempel vara utan logotyp och utan den navigation som finns på andra sidor.
En god idé kan vara att förse den med en kontroll för att hoppa mellan att se bilden i full storlek eller (om den är större än fönstret) anpassad till fönstrets storlek. Kontrollen för att byta storlek måste vara synlig direkt, utan att man behöver rulla. För att få bilden att anpassa sig till fönstret krävs javascript (se sid 426).
Samma eller eget fönster
Ytterligare ett val måste göras för originalbilden: skall den visas i samma fönster eller öppna ett eget. I det senare fallet, se Nytt fönster , sid 329.
Ögonblicklig förstoring
|
|
Bild 10. Om bilden bara förminskas kan det bli svårt att se vad den föreställer.
Genom att inte förminska lika mycket, och sedan beskära bilden kan tumnageln göras mycket intressantare. (Foto: Dustpuppy) |
Ett helt annat angreppssätt är att använda javascript för att visa den större bilden i samma ögonblick som pekaren förs över tumnageln, och sluta visa den när pekaren förs utanför bilden. En ögonblicklig zoom-funktion som har fördelen att användaren slipper klicka sig fram och tillbaka mellan sidan och bilden. Kan vara ett bra alternativ här användarens huvudfokus ligger på sidan och hon bara tillfälligt behöver se bilden större, till exempel på en produktsida på en e-handelsplats. Passar inte om bilden i sig är viktig och användaren till exempel kan behöva skriva ut den.
Eftersom effekten i hög grad bygger på snabbhet är det en god idé att förladda den större bilden.
Låt fortfarande tumnageln vara klickbar, så fungerar den även för användare som inte har javascript.
Texten ovan är ur Användbarhetsboken. Varje avsnitt har sin egen webbsida med rättelser, tillägg, blogginlägg och kommentarer. Några sidor (till exempel den du läser nu) har också hela bokens text. Varje dag publiceras ett nytt avsnitt här på webben.
