Användbarhetsboken berättar hur man gör webbplatser tillgängliga och användbara. Läs den här, eller beställ från Bokus eller Adlibris.

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.

comments powered by Disqus