Du är här: Hem > Artiklar >

Varför mobilanpassade webbplatser är a och o

Publicerad:

Vi befinner vi oss allt som oftast på bussen eller i kön i mataffären när vi vill köpa den där tröjan, hitta menyn till favoritrestaurangen eller läsa nyheterna. Att mobilanvändandet därför fortsätter att öka är ett faktum som är viktigt att ta hänsyn till när man designar en webbplats med bra användarupplevelse.

Varför är det då så viktigt med mobilanpassade webbplatser? Förutom att Googles sökresultat indexeras bland annat på hur mobilvänliga webbplatser är, blir de produkter och tjänster ditt företag erbjuder mer tillgängliga för kunder då de flesta alltid har mobilen till hands. Enligt en rapport från Internetstiftelsen hade 92 procent av svenskarna en smartphone under 2019 och 87 procent använde internet via mobilen varje dag.

Samma rapport visar även en trend att datoranvändandet minskat till förmån för mobilen de senaste åren. Detta är någonting som designers och produktägare behöver ta i beaktning - för det är skillnad på vad som fungerar på en datorskärm respektive en mobilskärm. ”Varför då?”, kanske du tänker – ”Min webbplats fungerar väl lika bra på en liten skärm som en stor skärm, den blir bara lite mindre?”. Här vill jag påstå att svaret är nej. 

Foto: Megan Schierek, Unsplash

Det finns nämligen många faktorer att ta hänsyn till när man designar för en mobilskärm som man inte behöver tänka på vid design för datorskärm (desktop). I denna artikel vill jag därför lyfta några av de saker som är bra att ha i bakhuvudet när man tar fram en mobilvänlig webbplats.

Vi på Winston arbetar dagligen med att designa webbplatser som fungerar lika bra på desktop som på mobil. För att ta fram så bra lösningar som möjligt arbetar vi alltid nära både våra kunder, deras användare och internt – både designers, projektledare och utvecklare tillsammans. Det gör att vi effektivt kan ta fram webbplatser med anpassade funktioner och interaktioner för olika skärmstorlekar som är lättanvända och som lever upp till både användarens förväntningar och kundens mål.

Här följer några viktiga saker att tänka på vid utformandet av mobilanpassade webbplatser:

Du behöver inte "kill your darlings" – lägg dem bara lite längre ner

Den mest framträdande skillnaden mellan en datorskärm och en mobilskärm är storleken. Allt du ser på datorskärmen kommer inte få plats på samma gång på mobilskärmen som är betydligt mindre. Innehåll och funktioner som på en datorskärm kan visas i flera kolumner (bredvid varandra) kan på en mindre skärm behöva placeras ovanpå varandra. Då användaren förväntar sig att hitta samma information på en mobil som på en desktop bör fokus här läggas på att avgöra vilken som är den viktigaste informationen för användaren och därmed bör ligga högst upp - istället för att ta bort sektioner.

Optimera inmatningsfält för mobilen

Det är enklare att fylla i text via ett fysiskt tangentbord än med de små knapparna på mobilens skärm. Därför är det bra att reducera textmängden användaren behöver fylla i när denne använder mobilen. Ett exempel är mobila enkäter där varianter av formulär kan användas och där de valda alternativen exempelvis klickas i istället för skrivs i.

Tydlig och enkel navigering

Många webbplatser har en horisontell menyrad högst upp där du kan se sidans innehåll. I en mobilversion av samma sida skulle detta bli väldigt litet. Därför är det bra att fundera på alternativa sätt att navigera på webbplatsen via mobilen. Så kallade hamburgermenyer (tre-fyra streck över varandra) är ett vanligt sätt att skapa mobilanpassade menyer. Ett annat exempel för att underlätta för mobilanvändarna att hitta exempelvis en relaterad sida är att lägga denna direkt i innehållet.

Foto: Paul Hanaoka, Unsplash

Några nyanser av tillgänglighet

På en liten skärm kan det vara svårt att pricka rätt med pekfingret när man ska träffa den där lilla ikonen man vill klicka på. Därför är det viktigt att göra de klickbara ytorna tillräckligt stora för att användaren ska kunna navigera sig runt på sidan utan att bli frustrerad över att man inte kan träffa rätt. De klickbara elementen i mobilen bör även markeras tydligt visuellt att de är just klickbara. Detta eftersom vi på datorn kan använda oss av musen för att hitta klickbara element (med hover), men detta finns inte i mobilen. Även kontrast när det kommer till exempelvis text mot bakgrund blir extra viktig när vi pratar om små skärmar som ofta innehåller mindre text.

Ta hänsyn till att vi bara har tio fingrar (och oftast endast använder tummen på mobila webbplatser)

Oavsett hur du väljer att hålla mobilen – med ett- eller tvåhandsgrepp – kommer det finnas ytor på skärmen som är mer eller mindre enkla att nå på ett smidigt sätt. Därför är det viktigt att placera viktiga funktioner, som exempelvis navigation, på en plats som är enkel att komma åt. Sedan är olika mobiler olika stora. Tänk på att samma yta på en stor skärm kanske inte är lika enkel att nå som på en liten skärm.

Less kan vara more

Fall inte för frestelsen att utnyttja varje värdefull millimeter av skärmens yta genom att fylla den med information. Detta gäller både på dator och mobil, men blir särskilt viktigt när man designar för små skärmar. På en liten skärm kan mycket information på samma gång nämligen upplevas extra plottrigt och göra det svårt att navigera. Genom att våga använda ”tomma” ytor kan den information du vill framhäva verkligen synas. Det gör sidan enklare att använda och gör användarupplevelsen bättre.

Utnyttja mobilspecifika interaktioner

En del funktioner är specifikt anpassade för datorer – ta högerklick som ett exempel. Fundera på hur din hemsida svarar mot dessa och se om det finns mobilspecifika interaktioner som kan göra användarupplevelsen bättre, exempelvis swipe-funktionen, GPS-integration eller det faktum att du kan ringa upp direkt genom att klicka på ett telefonnummer.

Vill du mobilanpassa din egen webbplats?

Även om denna artikel kan ses som en checklista för att uppnå en mobilanpassad webbplats finns det i verkligheten flera olika sätt man kan förändra webbplatsen för att göra den mer mobilanpassad.

Varje webbplats har sina egna förutsättningar och vi behöver därmed få koll på hur kundens webbplats fungerar, hur kundens verksamhet ser ut och vilka behov och mål som användarna har för att vi i slutändan ska kunna hitta den bästa lösningen som både är anpassad för mobil och dator.

Vill du veta mer om hur Winston skulle ta sig an din webbplats/webbtjänst får du gärna höra av dig så berättar vi mer!

Text: Ida Wallin, praktikant, UX design