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 Mobil UX-design?

Designrörelser som Mobile First har försökt dra vår uppmärksamhet mot mobiltelefoner under en tid. Samtidigt fungerar de flesta professionella webbplatser bra på mobila enheter. Naturligtvis bidrar samvetsgranna designers till detta. Men även de som driver en WordPress-webbplats använder ofta ramverk som Bootstrap eller färdiga WordPress-teman. Här är den responsiva skärmen vanligtvis redan integrerad. Detta sparar utvecklare otroligt mycket tid. 

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 ser din WordPress-webbplats via mobila enheter har andra behov som inte nödvändigtvis uppfylls endast av den estetiska och tekniska anpassningen av WordPress-webbplatsen.

Användarupplevelsedesign bygger på problemlösning. Den första frågan här är alltid: Vilka problem kan användare ha och hur löser vi dem? I samband med mobila enheter bör du därför överväga en central fråga: Vilka ytterligare problem uppstår när användare besöker din WordPress-webbplats från en mobil enhet?

Många av oss använder våra smartphones speciellt när vi är på språng. Användarupplevelsen här påverkas starkt av yttre påverkan: Det kan vara högt runt oss. Vi kan också vara på resande fot – interaktionen med telefonen är mindre exakt. Ljusinfluenserna kan snabbt förändras mellan ljus och dyster. Mottagningen kan växla mellan bra och dåligt eller till och med avbryta helt och hållet. Besökare på din WordPress-webbplats kan använda förbetalda planer och därför försöka undvika webbplatser som förbrukar mycket datavolym på kort tid.

Positionen kan vara mindre bekväm och dina användare 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å mycket kort tid - eller måste vi vänta för länge på att innehållet laddas - tenderar vi att avbryta processen på smarttelefonen och ägna vår korta uppmärksamhet åt en annan WordPress-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?

Allt som återstår är frågan: Är din WordPress-webbplats mobiloptimerad? För att bättre sammanfatta vad detta betyder i detalj har jag sammanfattat de viktigaste UX-principerna för mobil design.

13 Principer för mobil UX-design

1. innehåll

Besökare 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 mycket rullning för att hitta vad de kom för. Som mobilanvändare letar vi främst efter snabb, koncis information. Om du besöker din butik när du är på språng vill du förmodligen veta vilka produkter du erbjuder snarare än att lära dig mer om din karriär.

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:

• Utelämna innehåll helt: För visst innehåll kan det vara en bra idé att dölja det helt. Detta kan vara fallet om det är något som inte fungerar på telefonen ändå. Eller om mängden data som förbrukas skulle överstiga fördelarna för användarna.
• Förkorta innehållet: Du kan ta över din WordPress-webbplats från strukturen, men förkorta långt innehåll i enlighet därmed och till exempel länka till en undersida. På så sätt kan besökarna själva bestämma om denna information ä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.

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å:

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

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:

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.

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

Bilder bör ha en lämplig storlek och bör också visas i den, så att ingenting behöver förvrängas eller skalas. Även onödigt lång laddning kan undvikas på detta sätt. Övergången mellan liggande till stående format kan vara den svåraste: Beroende på bildinnehållet bör du antingen bara visa en del av bilden eller lagra dina bilder specifikt för mobila enheter. För webbplatser med många bilder bör du integrera Lazy Load eller använda lämpliga WordPress-plugins. 

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. 

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

• Kontrast mellan teckenfärg och bakgrund: Just för att mobila enheter också används utomhus är detta särskilt viktigt. Detta gäller även resten av din webbplats. En bra kontrast mellan element gör det lättare att se din webbplats. ContrastChecker.com analyserar dina färgval och låter dig veta om kombinerade färger har tillräckligt med 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.

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 djärva. Som ett resultat kan användare skanna texten ännu snabbare och fortfarande ta relevant information med sig. Vissa teckensnitt är i allmänhet dåliga för små skärmar eftersom de förlorar sin läsbarhet när de skalas. Även lätta teckensnitt som ser eleganta ut på skrivbordet kan vara mindre läsbara på smarttelefonen.

7. navigering

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.

Som den primära menyn har en vertikal meny segrat på mobilen. Men även på skrivbordet ser vi alltmer en vertikal meny istället för en horisontell. Ovanför eller under är vanligtvis, om nödvändigt lite mindre framträdande, den sekundära menyn. Alternativt kan detta också placeras 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

Interaktiva element bör visas större. På så sätt vet besökare på din webbplats vad de kan göra på din webbplats. Och de kan klicka på vad de vill. Arrangemanget till varandra spelar också en roll. Tillräckligt med utrymme måste lämnas för att minska risken för att oavsiktligt trycka på fel länk eller knapp. Knappar som "Logga ut", "Ta bort", "Skicka" bör också placeras på avstånd från den andra uppmaningen så att de inte utlöses av misstag.

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

När det gäller skrivbord är det vettigt att använda beprövade lösningar, även kallade UI-designmönster , när du skapar din webbplats eller e-handelsbutik. Vissa av dessa mönster är kors- och enhetskor, andra mer specifika. Dessutom har denna e-bok från UXPin visat sig vara en bra guide.

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 fortsätta kritiskt så att du inte kopierar fel eller "dåliga" UX-element. 

9. former

Långa former kan vara utmattande och snabbt verka förvirrande. I allmänhet bör du bara använda formulär på mobila enheter vid behov. När du integrerar formulär bör du se till att du bara frågar så mycket data som faktiskt behövs och ger användarna rätt tangentbord. Du kan göra detta genom att använda lämpliga HTML-formulärtyper. Detta talar om för webbläsaren vilken input det är. Och lämpligt tangentbord tillhandahålls.

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.

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 den här typen av feedback inte passar in i ditt koncept är det fortfarande viktigt att ge lite feedback. Som inte har tryckt många gånger i rad på en länk eller knapp och var osäker på om det helt enkelt inte fungerar eller om Internetanslutningen är borta. Detta måste undvikas. Det finns vanliga knep som att läsa in animeringar. Det är viktigt att användarna vet att deras interaktion har fungerat 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

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 vanliga webbläsarna gör det möjligt att inspektera din webbplats med de så kallade utvecklarverktygen. Där kan du också kontrollera din webbplats i olika enhetsstorlekar. Andra bra verktyg för webbplatstestning är Responsinator och BrowserStack Responsive.

• 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 om mobil UX-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.