Konkurrencen om at tiltrække og fastholde læsere på hjemmesider er hård og der udvikles og forskes meget i emnet. Jeg har tidligere skrevet om Clickbait som en metode til at lokke besøgende ind på en hjemmeside, så nu skal det handle lidt om, hvordan man får folk til at blive der. For os, der går på wikipedia for at læse om noget bestemt, der interesserer os, er det måske ikke umiddelbart forståeligt, at man skal bruge diverse specielle metoder for at fastholde brugernes interesse, men psykologisk og markedsføringsmæssig forskning siger at det gør en forskel. En stor forskel. Især når det drejer sig om at fastholde interessen hos brugere / læsere, der kun har en perifer interesse i det indhold, du præsenterer. Og i virkeligheden gør vi måske for lidt ud af det i forhold til systemer, som brugerne af en eller anden grund er tvunget til at bruge: Det kan mindste brugernes oplevelse af ventetid på systemerne og gøre et eller andet “tvunget” system langt mere acceptabelt. Jeg sagde ikke Sundhedsplatformen. Men jeg tænkte det.
En almindelig læser / bruger fastholder kun sin interesse i et nyt skærmbillede i 2 sekunder, så der bør “ske et eller andet”. Online forretningen Amazon har fundet ud af, at deres salg falder med 7% for hvert sekunds forsinkelse.
Derfor er animation af hjemmesider og systemer blevet mere og mere populært – i hvert fald hos de virksomheder, der har råd til det. Og hvis du sammenligner “fastholdelseskraften” i en Syvkabale og en wikipedia artikel på nettet, så forstår du, hvad det drejer sig om. Se fx Sarah Drasner’s foredrag om hvorfor og hvordan. Og hvis du er interessereti at lære mere om, hvordan man laver den slags med vue.js, SVG, CSS3 og HTML5, så kan du se et programmeringseksempel fra CodingArtist her.
Selv de enkleste hjemmesider (som fx denne) har interaktion i form af, at brugeren kan klikke på et menupunkt og komme videre til noget andet. Og som regel kan man også søge i en søgeboks så man kan finde noget andet. Hvis man gør endnu mere ud af det kan man lade menuerne bestå af billeder, så et klik på et billede bringer dig til det emne som billedet illustrerer. Eller hvorfor ikke gå “hele vejen” og lade et klik på enkelte dele af et billede føre brugeren videre til det, der er relevant på det sted. Mange vil kende det fra Google Maps, hvor man kan klikke på en markeret lokalitet og straks få yderligere oplysninger om den pågældende lokalitet. Det kaldes et clickable interactive map eller ditto image. Og den slags kan man da også lave uden at man behøver at være ansat i Google.
Alle hjemmesider er skrevet i HTML og det kan man med passende viden selv skrive med en simpel teksteditor som fx Notepad. Og HTML indeholder specifikationer til både at vise et billede og til at definere klikbare områder indenfor billedet. Så det er om end lidt arbejdskrævende såmænd let nok. Se fx vejledningen på w3schools.
Man kan også få lidt hjælp til at lave den slags. Der er mange systemer, fx Image Map Pro, som er en udvidelse til WordPress, som kan hjælpe med at lave klikbare billeder på en WordPress hjemmeside.
Man kan også benytte et udviklingsværktøj som Processing til at programmere interaktive billeder – vi har lavet et eksempel med verdens CO2 data, som du kan se her. Det er lavet med den Processing javascript-variant, der hedder p5js.
Og hvis man alligevel har fat i Processing, som primært er udviklet til at kunne vise grafik, så kan små Processing programmer være både interaktive og animerede: Her er et simpelt eksempel, hvor brugerens valg påvirker en animation af smeltende is på Grønland. (PS: Det er en demo af mulighederne – de viste data er eksempeldata).