– hvorfor mange gør det forkert
Inden for webdesign taler vi om at tilpasse vores design til alle typer enheder. Hjemmesider skal i dag fungere på computeren, på en tablet og på en smartphone – og de fleste webdesignere udformer derfor hjemmesider, der fungerer på alle enheder. Men i vores fokus på det responsive design, har vi i mellemtiden fuldstændig glemt forbrugeren. Mobiltelefonen er ikke den, der skal købe vores produkter eller service – det er kunden.
Hvorfor responsivt?
Vi kan se på vores kunders hjemmesider, at mere end 50% af deres besøg er fra mobilen. Det betyder, at computere ikke længere sætter standarden for designet på en hjemmeside. Mobilen er, hvis ikke vigtigere, så i hvert fald mindst lige så vigtig som desktop.
Responsivt design og mobile first er ikke nye begreber inden for webdesign. Vi kender til begreberne. Og vi ved, hvorfor det er vigtigt.
Responsivt design blev indført i 2008 med css3 og media queries, og siden da har det udviklet sig til en standard for alle nye hjemmesider. Designere tilpasser alt indhold til mobil og tablet, så indholdet giver en god brugeroplevelse uanset hvilken enhed, man besøger hjemmesiden fra.
Men det er lige præcis det, der er udfordringen – at man tilpasser til enheder og ikke til de mennesker, der bruger dem. Mange responsive hjemmesider er bygget op over den samme tankegang, at alt indhold skal være tilgængeligt på alle medier. Der oprettes en menu, der er den samme, som den brugeren møder på computeren, indholdet komprimeres i størrelse og sidebaren rykkes til bunden, så der er plads til det hele. Men det er ikke altid hensigtsmæssigt for brugeren.
Sidebarens død
Mange undersider på hjemmesider er i dag opbygget af main-content, hvor man har tekst og evt. illustrationer/billeder. Derudover har man en sidebar, hvor man fx har lidt bullets, der understøtter teksten og call-to-action fx. en kontaktformular eller en køb-knap.
Vi oplever ofte, når vi besøger mobiloptimerede hjemmesider, at sidebaren er placeret under indholdet. Det vil sige, at man flytter de elementer, der understøtter indholdet og call-to-action ned, hvor det ikke er synligt før brugeren har været igennem hele teksten.
Og her mener vi, at man bliver nødt til også at retænke indholdet til mobil og evt. tablet. Brugeren må aldrig være et sted, hvor han/hun ikke kan komme videre – enten med kontakt eller til en anden side.
Burgeren i bund
I lang tid har det været standard at sætte menuknappen, også kaldet burger-menuen, i øverste højre eller venstre hjørne. Det har også fungeret og er efterhånden blevet en feature, brugeren forventer på en moderne hjemmeside. Problemet er, at vi har glemt, at de mobiler, som vores brugere har, er blevet større og større. Både Apple, Samsung og Sony har lanceret telefoner med skærme på 4,7” og derover.
Illustration: Hvor langt kan en finger nå på hhv. venstre- og højrehåndet (Credits Samantha Ingram)
Hvis man som bruger skal ramme en menuknap i øvre hjørne, skal ens hånd ikke være ret feminin, før det er nødvendigt at bruge begge hænder for at nå den. Mange webdesignere glemmer, at brugerne for det meste ikke besøger en hjemmeside for at læse en masse om et produkt. De søger hurtig information. For eksempel kontakt eller pris. Den information skal derfor være lettilgængelig – og ikke kræve to hænder at komme frem til.
I stedet vil det være langt mere brugervenligt at placere menuen i bunden, så den besøgende altid kan nå den – og desuden sørge for, at den altid er synlig. Det giver lettere adgang og en bedre oplevelse for din bruger.
Den lange menu
En anden tendens, vi ofte ser i nutidens webdesign, er, at menuen på mobilen bliver struktureret fuldstændig, som den på desktop. Det vil sige med alle punkter og undermenuer. Det er ofte mange punkter, der kræver, at brugeren skal scrolle for at få alle informationer. Det optimale er at kunne se alle de vigtigste punkter på skærmen uden at skulle scrolle.
Ryd derfor op i din mobil-menu, så det kun er de vigtigste hovedpunkter, der fremgår på de mobile enheder. Men lav gerne links videre til de enkelte undersider.
Du kan evt. hjælpe dine besøgende yderligere ved at lave nogle quick-knapper til de vigtigste informationer, så de altid er synlige for brugeren.
GPS, bevægelse og fremtid
Jeg ser en fremtid, hvor vi skal blive endnu bedre til at bruge den info, vi har om den bruger, der lige nu ser vores hjemmesider. Hvor er han/hun i verden, er han/hun i bevægelse, og hvor er telefonen i forhold til deres øjne, ører, mund osv.
Hvis jeg fx vil ringe til Viggos Autoservice, så går jeg ind på hans side og finder et telefonnummer, evt på en kontaktside eller helt nede i bunden af siden. Det vil sige, at jeg skal klikke eller scrolle en del for at finde frem til den information, jeg søger. En iphone kan “se” om den er ved mit øre, så hvorfor ringer den ikke automatisk op til Viggo, hvis jeg tager den op til øret, mens jeg er på hans hjemmeside?
Hvis jeg derimod er i bilen og ikke kan finde Viggos værksted, så skulle hjemmesiden/telefonen selv kunne se, at jeg er i bevægelse og give mig vejledning. Hvis jeg bevæger mig med mere end 30 km/t er der nok en relativ stor chance for, at jeg gerne vil i kontakt med Viggo eller finde hans værksted.
Disse ting er pt ikke helt mulige, men det må komme. Indtil den tid kommer, skal vi blive bedre til at give vores brugere den information, som de leder efter hurtigere og nogle gange tage en formodning på vegne af vores brugere, så de får den service eller information, de højst sandsynligt leder efter.
Morten Samson
SpotOn Marketing
