Mobil UX-design: Vad du bör tänka på när du optimerar din webbplats för mobil användning

12 Min.
Bästa metoder för mobil UX-design

Hur kan du göra din webbplats till en trevlig upplevelse för mobilanvändning? Vad innebär användarupplevelse för mobila enheter? Vilka designprinciper kan du tillämpa? Du hittar svaren på alla dessa frågor i det här inlägget. Låt oss ta en närmare titt på de bästa metoderna för mobil UX-design!

Varför överhuvudtaget mobil UX-design?

Designrörelser som Mobile First har under en tid försökt att rikta vår uppmärksamhet mot mobila enheter. Vid det här laget fungerar de flesta professionella webbplatser bra på mobila enheter. Naturligtvis bidrar samvetsgranna designers till detta. Men även de som driver en webbplats använder ofta ramverk som Bootstrap eller prefabricerade WordPress Themes . Här är den responsiva skärmen vanligtvis redan integrerad. Detta sparar otroligt mycket tid åt utvecklarna. 

Användningen av Bootstrap, WordPress Themes & Co. innebär dock en risk för att designen är utformad för skrivbordet - och sedan bara anpassad för mobila enheter.

Varför är detta ett problem? Besökare som tittar på din webbplats via mobila enheter har andra behov som inte nödvändigtvis tillfredsställs enbart av den estetiska och tekniska anpassningen av webbplatsen.

Design av användarupplevelser bygger på problemlösning. Den inledande frågan är alltid: Vilka problem kan användarna ha och hur löser vi dem? När det gäller mobila enheter bör du därför tänka på en viktig fråga: Vilka ytterligare problem uppstår när användare besöker din webbplats från en mobil enhet?

Användning av smarttelefoner i Tyskland

Enligt Statista.com hade 97,5 procent av hushållen i Tyskland en eller flera mobiltelefoner år 2020. Detta ger en andel på 80 procent av de mobila Internetanvändarna. Av dessa använde 24,1 procent ett kontantkort. För 2023 förutspås en ökning från 66,5 miljoner smartphoneanvändare till 68,6 miljoner.

Många av oss använder våra smarttelefoner särskilt när vi är på språng. Användarupplevelsen påverkas starkt av externa faktorer: Det kan vara bullrigt runt omkring oss. Vi kan också vara i rörelse - interaktionen med telefonen är då mindre exakt. Ljusnivåerna kan snabbt skifta mellan mycket ljus och mycket mörkt. Mottagningen kan växla mellan bra och dåligt, eller till och med upphöra helt och hållet. Besökarna på din webbplats kan ha ett abonnemang med förskottsbetalning, så försök att undvika webbplatser som förbrukar mycket data på kort tid.

Det kan leda till en mindre bekväm ställning och till att användarna blir mindre avslappnade. Vi har i allmänhet mindre tålamod eftersom vi har mindre tid för enskilda uppgifter. Om något inte fungerar på kortast möjliga tid - eller om vi måste vänta för länge på att innehållet ska laddas - tenderar vi att avbryta processen på smarttelefonen och ägna vår uppmärksamhet åt en annan webbplats.

Viljan att läsa eller bläddra igenom mycket text är också mindre. Vi söker tydligt strukturerad information i små bitar. Det kan också hända att vi bara har en hand fri.

Skälen för att surfa på Internet med en smartphone skiljer sig mycket från dem som gäller för användare av stationära datorer: I mobilen vill vi antingen söka efter specifik information eller försöka ta död på vår tid. 

När jag besöker en kommersiell webbplats från min smartphone är jag förmodligen mest intresserad av den grundläggande informationen:

  • Vilken är adressen?
  • Hur tar jag mig dit?
  • Vilka är öppettiderna?
  • Hur kan jag komma i kontakt med dig?
  • Vilka produkter erbjuds?
  • Vilka är priserna?

Den enda frågan som återstår är: Är din webbplats mobiloptimerad? För att bättre kunna sammanfatta vad det innebär i detalj har jag sammanfattat de viktigaste UX-principerna för mobildesign.

Mobil UX-design: 13 principer som du bör införa omedelbart

1. innehåll

Besökarna på din webbplats har olika mål beroende på vilka enheter de använder för att komma åt din webbplats. Långa texter på mobila enheter innebär ofta att man måste bläddra mycket för att hitta det man sökte. Som mobila användare söker vi snabb och kortfattad information. De som besöker din butik i mobilen är mer benägna att vilja veta vilka produkter du erbjuder än att lära sig mer om din bakgrund.

Innehållet måste därför anpassas. På smarttelefoner och surfplattor finns det en annan hierarki än på skrivbordet. Det finns flera möjligheter här:

  • Lämna ut innehållet helt och hållet: För visst innehåll kan det vara en bra idé att dölja det helt och hållet. Detta kan vara fallet om det är något som ändå inte fungerar på telefonen. Eller om datamängden skulle överstiga nyttan för användaren.
  • Förkorta innehållet: Du kan ta över strukturen på din webbplats, men förkorta det långa innehållet och länka till exempel till en undersida. På så sätt kan besökarna själva avgöra om informationen är relevant för dem eller inte.
  • Ändra arrangemanget av ditt innehåll: Du kan se över strukturen på ditt innehåll och ordna det annorlunda på mobila enheter. Produkterna kan då stå i första rummet och bakgrunden till butiken kommer senare. På så sätt slipper du rulla i onödan, men visar ändå allt innehåll.

I följande exempel har jag anpassat innehållet på en restaurangs webbplats (till vänster) för att göra den mer användarvänlig. Jag förkortade texten och länkade till en undersida med en CTA (till höger). Jag har också justerat typografin, men mer om det senare.

Bästa metoder för mobil UX-design
Den ursprungliga mobilversionen av en exempelwebbplats
Bästa metoder för mobil UX-design
Optimerad mobilversion av en exempelwebbplats

2. layout

I artikeln Design for Fingers, Touch and People redogör Steven Hoober för resultaten av sin omfattande forskning om användning av smarttelefoner. Tummetekniken används ofta som vägledning. Här är det den radie som tummen kan göra över skärmen som räknas. Ofta hävdas det att de övre hörnen är absoluta tabuzoner som användarna inte kan nå. Enligt resultaten av hans forskning är detta dock inte helt sant.

De 6 vanligaste sätten att hålla en smarttelefon på:

Bästa metoder för mobil UX-design
Hur människor föredrar att hålla sina smartphones

Detta resulterar i följande optimala fördelning av element för smartphones:

Bästa metoder för mobil UX-design
Den bästa layouten för primärt, sekundärt och tertiärt innehåll

Resultatet: Den viktigaste informationen bör placeras i mitten av skärmen på mobila enheter.

3. minimalism

Ett minimalistiskt tillvägagångssätt för design är aldrig fel. Men särskilt på en mindre enhet känner vi oss trånga och förvirrade av för mycket innehåll och för lite utrymme. Det blir oklart var informationen är gömd och hur vi kommer dit.

Den mobila versionen av Streetartnews är strukturerad och tydlig. På innehållssidorna finns endast de mest nödvändiga elementen och ett väl läsbart serif-typsnitt med lämpligt radavstånd:

Bästa metoder för mobil UX-design
Den visuella hierarkin är ännu viktigare när det gäller mobiler.
Bästa metoder för mobil UX-design
Ett större radavstånd är lättare att läsa på mobila enheter.

4. konsekvens

Det är viktigt att din webbplats är konsekvent på alla plattformar. Google har löst detta på ett mycket elegant sätt. Oavsett från vilken enhet jag använder Google: jag känner igen Google-varumärket direkt.

Bästa metoder för mobil UX-design
Skrivbordsversionen av Google
Bästa metoder för mobil UX-design
Så här ser Google ut på surfplattan.
Bästa metoder för mobil UX-design
Den mobila versionen av Google

Ditt varumärke bör därför återspeglas på mobila enheter trots dess minimalistiska design. Om din webbplats har ett användarområde måste de ändringar som görs anpassas på alla enheter.

5. media

Bilderna ska ha en lämplig storlek och visas i den storleken, så att ingenting förvrängs eller skalas. På detta sätt kan man också undvika onödigt lång lastning. Övergången mellan liggande och stående format kan vara den svåraste: Beroende på bildens innehåll bör du antingen visa endast en del av bilden eller göra bilderna extra stora för mobila enheter. För webbplatser med många bilder bör du integrera lazy load eller använda motsvarande WordPress Plugins . 

WordPress Optimera bilder: 6 Plugins för bildkomprimering

Att optimera grafik och bilder för din webbplats WordPress är ett enkelt och viktigt steg för att förbättra laddningstiden. Vi kommer att visa dig sex populära WordPress Plugins , som helt och hållet befriar dig från uppgiften att komprimera dina bilder.

Samma sak gäller för videor. Även här växlar den från landskap till porträtt. Videoklipp bör också vara inställda så att de är ljudlösa och inte startar av sig själva. Videor bör i allmänhet optimeras för webben, men detta är särskilt viktigt för mobila enheter.

6. typografi

Viktigare än utseendet på din webbplats är alltid dess funktionalitet. Detta inkluderar läsbar text. Standardstorleken för text i HTML är 16px. Den här storleken används om du inte anger något annat. Beroende på typsnittet kan din text dock visas större eller mindre. 

Allt om webbtypografi och typsnitt

En tumregel är att en teckensnittsstorlek på 16px är idealisk för brödtext och textinmatning på smarttelefoner. Om du vill ha mer information om typografi på webben kan du läsa vår artikel"How to find the perfect font for your website" och blogginlägget"Type Sizes for Every Device" från UX Matters.

För att göra typografin mer lättläst finns det dock några andra saker att tänka på:

  • Kontrast mellan teckensnittsfärg och bakgrund : Detta är särskilt viktigt eftersom mobila enheter också används utomhus. Detta gäller även resten av din webbplats. En bra kontrast mellan elementen gör det lättare att se din webbplats. ContrastChecker.com analyserar ditt färgval och låter dig veta om de kombinerade färgerna har tillräcklig kontrast till varandra.
  • Avstånd: Om texten ligger för nära varandra blir den allt svårare att läsa. Radavståndet kan skilja sig åt mellan stationära och mobila enheter.
  • Centrering: Min grundregel är att aldrig använda rättelse på webbplatser. Rättfärdigandet kan se trevligt ut vid första anblicken, men det gör att läsflödet avbryts. Centrerad typ har en liknande effekt. Textavsnitt på mobila enheter bör därför endast centreras i särskilda fall.
Bästa metoder för mobil UX-design
Motivering på en exempel sida
Bästa metoder för mobil UX-design
Vänstercentrerad text på en provsida

Här är exemplet från EggShop igen: För att göra texten (till vänster) mer läsbar ökade jag teckensnittsstorleken till 16px och ställde in linjehöjden till 1,7 (till höger). Jag har också centrerat texten till vänster och minskat vissa avstånd uppåt, respektive tagit bort den dubbla rubriken. I skrivbordsversionen är den dubbla rubriken meningsfull. På mobiler skapar det bara oönskat utrymme och dubbelarbete. 

Du kan gå lite längre och göra nyckelord feta. Detta gör att användarna kan skumma texten ännu snabbare och ändå ta till sig relevant information. Vissa typsnitt är generellt sett mycket olämpliga för små skärmar, eftersom de förlorar sin läsbarhet när de skalas. Även ljusa typsnitt, som ser eleganta ut på skrivbordet, kan vara svårare att läsa på en smartphone.

Navigationen på din webbplats ska vara så intuitiv som möjligt. Det betyder att när du skapar din navigeringsarkitektur är det bäst att använda befintliga strukturer som vägledning. Det gör det lättare för användarna att navigera på din webbplats. Intuitivt är till exempel att bläddra nedåt och uppåt för att navigera på en webbplats, men inte nödvändigtvis till vänster eller höger.

En vertikal meny har blivit den primära menyn på mobiler. Men även på skrivbordet ser vi allt oftare en vertikal meny i stället för en horisontell. Ovanför eller under denna finns vanligtvis den sekundära menyn, som vid behov är något mindre framträdande. Alternativt kan den också vara placerad längst ner. 

Sekundära menyer kan till exempel vara språkinställningar eller länkar till sociala medier. Om en tredje meny behövs placeras den som en utvikbar meny. Det kan till exempel vara en inloggning eller utloggning.

Om din webbplats är mer än en enstaka sida är det särskilt viktigt att besökarna alltid lätt kan hitta var de är.

CTA och länkar

Bästa metoder för mobil UX-design
Tumregeln (Källa: UX Matters)

Interaktiva element bör visas större. På så sätt vet besökarna på din webbplats vad de kan göra på din webbplats. Och de kan klicka på det de vill ha. Även hur de är placerade i förhållande till varandra spelar en roll. Det måste finnas tillräckligt med utrymme för att minska risken för att man råkar trycka på fel länk eller knapp. Knappar som "Logga ut", "Ta bort" och "Skicka" bör också placeras på ett avstånd från andra call-to-actions så att de inte utlöses av misstag.

Bästa metoder för mobil UX-design
Air Inuit visar interaktioner på ett mycket tydligt och användarvänligt sätt.

Dold interaktion

Det är ganska vanligt att tillåta interaktioner via flera vägar. Så länge det finns ett sätt för nya besökare att använda din webbplats. På så sätt kan du erbjuda genvägar till återkommande användare utan att göra det svårt att komma igång.

Länkar

Om du vill lägga till fler funktioner på din webbplats är det klokt att använda befintliga system - i stället för att programmera nya. Detta gäller till exempel om användarens e-postklient används i stället för ett kontaktformulär. Eller när du integrerar vägbeskrivningar via användarens favoritapp. Det gör det lättare för dem att använda din webbplats eftersom de kan använda appar som de redan har lärt sig för att utföra vissa uppgifter.

8. Designmönster för användargränssnitt

Precis som för datorer är det en bra idé att använda beprövade lösningar, även kallade UI-designmönster, när du bygger din webbplats eller e-handelsbutik. En del av dessa mönster gäller för flera enheter, andra är mer specifika. Dessutom har den här e-boken från UXPin visat sig vara en bra referenspunkt.

Särskilt små skärmar ger lite utrymme för navigering. Ostrukturerade och förvirrande webbplatser är särskilt märkbara.

I likhet med UI Design Patterns är det lämpligt att orientera sig efter redan existerande webbplatser och framgångsrika webbappar och analysera dem:

  • Var brukar menyn vara placerad?
  • Hur ser det ut?
  • Vad händer när jag trycker på den? 

Du bör dock vara kritisk när du gör detta så att du inte kopierar några misstag eller "dåliga" UX-element. 

Bästa metoder för mobil UX-design
Crustac.fr valde UI-mönstret Burger Menu för att göra navigeringen intuitiv för alla.

9. former

Långa formulär kan vara tröttande och snabbt bli förvirrande. Generellt sett bör du bara använda formulär på mobila enheter om det är nödvändigt. När du integrerar formulär bör du se till att du bara begär så mycket uppgifter som verkligen behövs och att du ger användaren ett lämpligt tangentbord. Det gör du genom att använda lämpliga HTML-formulärtyper. Detta talar om för webbläsaren vad som är inmatningen. Ett lämpligt tangentbord finns med.

Alternativt kan du integrera automatisk fyllning eller förslag på innehåll. Eller använd inloggning i sociala medier i stället för en långvarig registreringsprocess.

Bästa metoder för mobil UX-design
Social inloggning (även kallad enkel inloggning) på Pinterest.

10. återkoppling

Eftersom vi använder mobila enheter med våra händer förväntar vi oss att få riktig feedback, dvs. feedback som är baserad på verkliga objekt. Det kan till exempel vara en knapp som verkar vara nedtryckt när vi trycker på den.

Om denna typ av feedback inte passar in i ditt koncept är det ändå viktigt att ge feedback. Vem har inte tryckt på en länk eller knapp många gånger i rad och varit osäker på om det bara inte fungerar eller om internetuppkopplingen är borta. Det är något man bör undvika. Det finns vanliga knep för detta, t.ex. laddningsanimationer. Det viktiga är att användaren:inne vet att interaktionen fungerade och att något kommer att hända.

11. felhantering

Misstag görs. Du råkar klicka på fel länk och hamnar på fel webbplats. Eller så skickar du in något som inte var färdigt ännu. Det är viktigt att misstag inte får några (eller så få som möjligt) negativa konsekvenser. Undo-funktioner och bakåtknappar är bra för detta. Hemknappen är också otroligt viktig här: den är ett ankare om dina användare går vilse. Så att de alltid vet hur de ska komma tillbaka till hemsidan.

12. hastighet

Laddningstiden för din webbplats kan också vara ett problem på mobila enheter. Särskilt om du vill komma åt från instabila nätverk bör väntetiden inte vara så lång att den avskräcker besökare.

13 Tillgänglighet

WordPress Tillgänglighet: Hur man skapar en tillgänglig webbplats

Tillgänglighet på WordPress är en viktig komponent när man skapar webbplatser. Men hur tillgänglig är WordPress ? Varför är tillgänglighet så viktigt? Och hur kan du göra din webbplats tillgänglig för alla? Om du ställer dig dessa frågor är vår tillgänglighetsguide något för dig.

Tillgänglighet är ett plattformsoberoende ämne som äntligen får allt större betydelse. Grundtanke och uppdrag: Webben måste vara tillgänglig för alla människor. Detta är särskilt viktigt för personer med sådana funktionshinder som kan påverka deras sätt att få tillgång till och använda webben.

Om du ignorerar frågan om tillgänglighet utesluter du redan idag 20 procent av världens befolkning från att kunna använda din webbplats. Kort sagt, att försumma tillgängligheten är inte bra för ditt företag. Men viktigare är att det är fruktansvärt när det gäller att skapa en mer rättvis värld.

Verktyg för UX-testning

Beroende på hur din webbplats är uppbyggd kan du ha ett sätt att redigera mobilvyn direkt. I regel är det nödvändigt att göra några manuella CSS-justeringar. Flera möjligheter är lämpliga att testa:

  • Inspektionsverktyg i webbläsaren: De populära webbläsarna erbjuder möjligheten att inspektera din webbplats med de så kallade utvecklarverktygen. Där kan du också kontrollera din webbplats i olika storlekar. Andra bra verktyg för att testa webbplatser är Responsinator och BrowserStack Responsive.
Bästa metoder för mobil UX-design
Utvecklingsverktyg i Google Chrome
  • I enheten: Det mest effektiva sättet att se din webbplats är i själva enheten. Testning på din egen mobiltelefon eller surfplatta bör därför aldrig saknas. Eftersom det skulle vara mycket dyrt att äga alla enheter hemma finns det så kallade emulatorer.
  • Emulatorer: Denna programvara tillhandahålls av operativsystemstillverkaren själv. Där kan du utveckla och se dina resultat direkt i webbläsaren - anpassat till enhetens storlek och respektive operativsystem, t.ex. Android eller iOS.

Slutsats: Bästa praxis för mobil design

Genom att tillämpa dessa tips kan du göra din mobilupplevelse bättre och locka fler kunder. Och kanske kan exemplen och de bästa metoderna hjälpa dig att utveckla nya idéer för din webbplats. Tyvärr är det fortfarande ofta så att mobildesignen försummas på en webbplats, vilket har en negativ inverkan på mobilanvändarnas konverteringsgrad.

Om du vill ha mer information om mobil UX-design rekommenderar jag Googles Web Fundamentals och den här artikeln om bättre mobil UX-design.

Dina frågor om Mobile UX Design

Vilka frågor har du till Sonja om mobil UX-design? Vi ser fram emot din kommentar. Är du intresserad av webbdesign och -utveckling? Följ sedan RAIDBOXES på Twitter och Facebook, LinkedIn eller via vårt nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarmotivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.