Responsive fungerer: Mobilbrugerne scroller og skimmer helt i bund

Sammen med 3F har vi undersøgt, hvordan fagforbundets hjemmeside fungerer på mobilen. Det har givet indikationer om bl.a. design, navigation og artiklernes længde – og understreget at fem klassiske råd fra webmediernes barndom stadig holder.

Sammen med 3F har vi undersøgt, hvordan fagforbundets hjemmeside fungerer på mobilen. Det har givet indikationer om bl.a. design, navigation og artiklernes længde – og understreget at fem klassiske råd fra webmediernes barndom stadig holder.
 
Responsive design gør det lettere at læse websider på mobilen. Men konsekvensen af  den responsive løsning er typisk lange sider, hvilket betyder, at brugeren ofte skal scrolle rigtig meget for at finde det, de leder efter. Vil de det – og kan de finde det, de leder efter? 
 
Det undersøgte Danmarks Medie- og Journalisthøjskole sammen med 3F i foråret 2015. Og svaret er: Ja, det ser faktisk ud til, at det går rigtig godt!
 
I denne artikel ser vi på de vigtigste fordele og ulemper ved responsive design, ud fra hvad vore testpersoner hos 3F gjorde og oplevede. Artiklen er inddelt i følgende afsnit:
• Over og under folden – testpersoner scroller meget, hurtigt og sikkert
• Design for hurtig skimming – med fem gode, klassiske råd
• Navigationen rykker ned i bunden – vi ser to forskellige brugsmønstre
• Artiklernes længde – med links til tre steder at hente inspiration
• Forsiden – søgefunktionen er i fokus
• Det fandt vi ud af – en foreløbig opsummering
 
Vi har indhentet data fra 14 testpersoner, hvoraf 5 anvendte mobilen. Naturligvis giver det ikke endelige, nagelfaste svar. Resultaterne skal ses som indikationer, der kan bruges som pejlemærker i udviklingsarbejdet. Klarere konklusioner kræver fortsat vedholdende testarbejde.  
 
Definition på responsive
Og hvad er responsive web-design så? Kort fortalt er det både en teknisk løsning og en tilgang til webdesign, der sørger for, at indholdet kan ses og bruges på samme måde uanset skærmstørrelse og type af device. Eller sagt på en anden måde af design-eksperten Jakob Nielsen:
 
”Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.”
 
Endnu kun hver femte 3F´er er mobilbruger
En del udgivere, især mediehuse, har oplevet, at det nu er over 50% af brugerne, der anvender en mobil, mens brugen af desktop-computeren er blevet betydelig mindre. 
 
Hos 3F er det endnu kun hver femte bruger,  20%, der kommer til sitet www.3f.dk via mobil. Det skal formentlig ses i lyset af, at brugerne typisk kommer til 3f.dk for at finde information om bestemte emner eller svar på helt specifikke spørgsmål. De leder altså målrettet – i modsætning til situationer hvor man for eksempel ser nyheder eller på anden måde er åben for, hvad der lige kommer til én.
 
En del af testpersonerne forklarede, at de ellers nu bruger mobilen til det meste, men når de skal finde ting på nettet, og skal udfylde for eksempel dagpengekort, så er det fortsat lettest at vente til man kommer hjem og kan gøre det på desktop-computeren
 
Men brugen af mobilen stiger, og en lille håndfuld af personerne i vores eyetracking-test gjorde det klart, at de nu bruger mobilen til stort set alting – og pc´en derhjemme står og samler støv i hjørnet.
 
Over og under folden
Responsive design medfører, at indholdet for at kunne ses på mobilen vises i én lang spalte i stedet for 2-3 spalter, som hjemmeside typisk er opdelt i . Det betyder naturligvis, at en del af indholdet vises langt nede, og at brugeren så må scrolle en del for at finde det. 
 
Tidligere har webdesignere brugt begrebet ”over folden” til at beskrive den del af indholdet, der kan ses på skærmen, mens ”under folden” så omvendt betegner den del af indholdet, brugeren ikke kan se. Begrebet er hentet fra avis-verdenen, hvor ”over folden” var den del af forsiden, læseren kunne se, når avisen blev foldet på midten. 
 
Et vigtigt mål med eyetracktesten hos 3F var at undersøge, hvordan mobilbrugerne gik til denne lange strøm af informationer.
 
Testen viste, at de 5 testpersoner scrollede meget og hurtigt og tilsyneladende ikke havde problemer med at bevæge sig hurtigt skimmende ned gennem indholdet – om der så var tale om en artikel eller en lang liste af søgeresultater. 
 
Faktisk var det forbavsende at se, så hurtigt testpersonerne scrollede nedad, og indholdet nærmest fløj forbi. Alligevel var de i stand til at stoppe præcis, når et relevante link eller tekstbid dukkede op.
 
Design for hurtig skimming
Ud fra testresultaterne her ser det altså ud til, at scrolling for mange er blevet mere naturligt. Ikke at vi har fået længere attention span. Vi har vel bare vænnet os til at skimme hurtigere – på udkig efter signaler om det indhold, vi skal bruge.
 
Og præcis her kan vi som indholdsproducenter og designere gøre en forskel: Når vi ved at folk skimmer lynhurtigt, før indholdet forsvinder ud af syne igen, må vi omhyggeligt lægge indholdet til rette for lyn-skimming. Vi må:
• Have klar artikelstruktur
• Skrive sigende mellemrubrikker
• Bruge selvforklarende links (se artikel)
• Anvende enkel sætnings- og afsnits-struktur
• Bruge punkt-opdeling og andre hjælpe-greb, hvor det giver mening
 
Alt det er gode råd opstået i webmediernes barndom. Men de bliver endnu mere centrale, jo hurtigere brugerne bevæger sig gennem stoffet.
 
Navigationen rykker ned i bunden 
Som sagt bliver desktop-computerens 2-3 spalter til én på mobilen. Det får især betydelige konsekvenser for den navigationsmenu, der på desktop er let tilgængelig ude i højre side. På mobilen ryger navigationen helt ned i bunden.
 
Sådan er det hos 3F. Og denne navigation med links til tilknyttet materiale er yderligere vigtig hos 3F, da man her har opdelt indholdet i mange korte artikler. Hvis man ikke ”rammer” den rigtige artikel i første hug, er det altså vigtigt, at man hurtigt kan se, hvordan man så kommer videre til den rigtige side.
 
Med 3F´s responsive design så vi således to vidt forskellige brugsmønstre: 
• På desktop gled øjet efter skimming af sidens hovedindhold naturligt over til højre for en hurtig afsøgning af mulighederne for at komme videre.
• På mobilen blev indholdet som nævnt typisk skimmet lige så hurtigt, mens der blev scrollet nedad – og øjnene fandt tilsyneladende i en lige så glidende bevægelse frem til navigationen, der som sagt lå i bunden, efter sideindholdet.
 
Så det ser altså ud til, at 1) Brugerne intuitivt forstår, at man i bunden kan få anvisninger på, hvordan man kommer videre. Og 2) at navigationsmenuens placering i bunden af siden er naturlig for mobilbrugerne, da overvejelsen om, hvordan man kommer videre, følger naturligt efter skimming af sidens hovedindhold.  
 
Artiklernes længde
Selvom mobilbrugerne scroller langt og hurtigt, er der naturligvis en grænse for deres tålmodighed. Lange artikler kan synes nærmest uendelige på mobilen.  Så responsive design gør ikke i sig selv alt læsbart på mobilen. 
 
Den allerbedste øvelse er at prøve at hente en mellemlang webartikel på mobilen – og oplev hvordan det fungerer. Det kan blive en lovlig lang og besværlig oplevelse at komme igennem den, ikke? Det er nok en god idé at gøre sig overvejelser om artiklernes længde!
 
Det kan der siges en del om, som Mario Garcia, Cory Bergman og folkene fra Buzzfeed og BBC gør her.  Det vigtigste er nok at finde frem til en artikel- eller fortællestruktur, der fungerer godt – både i situationer med skimming og læsning.
 
Buzzfeed og BBC: Gode input til mobile storytelling
 
Cory Bergman: Kort er godt
 
Mario Garcia: Hvordan man med 2 sætninger forklarer det vigtigste
Det vigtigste er nok at finde frem til en artikel- og fortællestruktur, der fungerer godt på mobilen – både med skimming og læsning. 
 
Forsiden – hvordan den er anderledes på mobilen
Til sidst lidt om det første: Forsiderne! Responsive design betyder, at mobilbrugerne hos 3F ikke får helt det samme udvalg at se i det første skærmbillede. Men man har så omhyggeligt udvalgt de elementer, der skal vises for mobilbrugerne:
 
1. Da man ved, at en stor del af mobilbrugerne anvender en søgefunktion, er søgefeltet ”Find fag eller søg efter emner” anbragt helt centralt. Det er især den vej, brugerne finde vej ind til deres fag, faglige informationer om for eksempel murer-faget. Samtlige 5 mobilbrugere anvendte denne indgang på hjemmesiden 
2. Desuden er topnavigationen gjort ekstra synlig med ”MENU” skrevet med store bogstaver på mobilforsiden. Denne fremhævelse var sandsynligvis årsagen til, at topnavigationen i efterfølgende opgaver var meget anvendt af mobilbrugerne.
 
Disse heatmaps (FOTOS) viser, hvad testpersonerne har set på, fra de kom ind på hjemmesiden første gang, til de gik i gang med at løse den første opgave: ”Find dit fag”.
 
Som det ses, er mobilbrugernes fokus meget samlet om søgefunktionen, hvilket også forklarer, hvorfor så mange valgte denne indgang.
 
På desktop er der blevet plads til et stort felt med små fotos af forskellige fagområder. Man kan i undersøgelsen se, at disse fotos bliver set, typisk mens man et kort øjeblik overvejer, hvordan man skal gribe opgaven an. Også 3F-logo og topnavigation får mere opmærksomhed end på mobilen. Men igen er der især meget fokus på søgefunktionen, der ligger lige midt i billedet. 
 
Både 3F og vi andre iagttagere kan altså se bekræftet, at det giver mening at prioritere sine indgange og designe forsiden efter det. Brugerne vil handle derefter.
 
Det fandt vi ud af
Som nævnt bestod eyetrack-testen kun af 14 brugere, hvoraf 5 brugte mobilen. Derfor skal man være varsom med de skarpe konklusioner. Ovenstående konklusioner er snarere indikationer, der peger i retning af at:
• Mobilbrugerne scroller mere, end man tidligere har set på desktop-computere
• Selvom navigationen bliver gemt i bunden af siderne, bliver den brugt
• Artikellængden har en betydning – om end det ikke er helt klart hvor stor folks tålmodighed er i forskellige situationer
• Klar prioritering af indholdet på forsiden påvirker brugernes handlinger
 
Alt dette åbner for yderligere udforskning i nye undersøgelser med afsæt i forskellige slags indhold og brugssituationer. Der er lang vej til de endelige, nagelfaste svar, men hver grundig undersøgelse bringer os et skridt nærmere målet.
 
I kommende artikler behandles brugen af billeder, forskellen mellem mobil og  desktop-brug osv.
   
 
 
 

Prefooter web-form

Foreslå indhold til underskoven

Underskoven

Opdatér Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.

Instagram

  • Photobooth fun 📸 #brussels #belgium #photo #photobooth #fun #friends #dmjx #blackwhite #travel #journolife
  • Team Trump er klar til den traditionsrige Barsport på @dmjx
#dmjx #dmjxrus #makedmjxgreatagain
  • #denmark #danemark #dinamarca #aarhus #DMJX #aarhus2017 #visitaarhus #aarhusguide  #explore #guide #instatraveling #igersdenmark #igersaarhus #kirstenkkester #storytelling #travel #traveling #travelgram #cold #night #solitude #silence #ig_captures #master_shots #livefolk #streetphotography #streetphoto #follow #followme #photooftheday
  • favorit sted 🌴 #dmjx #oldskool
  • Friday on top #dmjx #design #graphic #illustration #sketch #croquis #drawing
  • magasinlayout 🍿💯 #dmjx #yndlingsopgave
  • Journalistspire 📽👍 #dmjx
  • ⚪️⚫️#portrait #beautiful @nathalieprieme #swing #london #zebrastripes #canon #dmjx