Mobilanpassad hemsida utifrån besökarens uppgift
Bestäm vad någon främst behöver kunna göra från telefonen: förstå en tjänst, ringa, boka eller köpa. Lägg den information som behövs för beslutet tidigt och gör nästa steg tydligt. Det betyder inte att allt måste synas utan rullning. En lugn sida med begriplig ordning kan fungera bättre än en kompakt skärm där kontaktknappar, erbjudanden och menyer konkurrerar om samma utrymme.
Beskriv ett par realistiska situationer för varje viktig sida. En besökare kanske vill kontrollera öppettider utomhus eller jämföra två produkter på bussen. Sådana situationer synliggör behov av läsbarhet, snabb återkoppling och enkla val. Med UX-design kan ni kartlägga flödet innan detaljerna låses. Dokumentera vad personen behöver veta före varje steg, inte bara vilka knappar som ska finnas på skärmen.
Låt layouten följa innehållet
Responsiv layout innebär att innehållet anpassar sig när utrymmet förändras. Kolumner kan staplas, bilder byta proportioner och menyer få ett annat utförande. Välj brytpunkter där innehållet börjar fungera sämre, i stället för att bara utgå från namnen på populära telefonmodeller. Testa även mellanlägen eftersom surfplattor, delade fönster och stora telefoner annars lätt hamnar utanför de planerade vyerna.
Granska långa rubriker, svenska sammansättningar, tabeller och kort med olika mycket text. Viktig information ska inte kapas för att en komponent råkar ha fast höjd. Undvik onödig horisontell rullning och kontrollera att text går att förstora utan att funktioner försvinner. En tabell kan behöva en särskild mobil lösning, men innehållets samband måste fortfarande gå att förstå. Låt också liggande läge fungera när besökarens förutsättningar kräver det.
Gör navigation och tryckytor begripliga
En mobilmeny behöver ett tydligt namn, ett synligt öppet läge och ett förutsägbart sätt att stängas. Kontrollera att det går att nå alla viktiga sidor utan att användaren måste känna till er interna organisation. Undermenyer som enbart öppnas när en muspekare hålls över dem fungerar inte som enda lösning på pekskärm. Samma innehåll behöver därför ha fungerande stöd för beröring och tangentbord.
Tryckytor ska vara tillräckligt stora och tillräckligt åtskilda för att feltryck inte ska bli ett återkommande problem. Se särskilt på små kryss, filter och länkar tätt intill varandra. Fasta knappar kan vara användbara, men får inte täcka formulärfält eller viktig text när tangentbordet öppnas. Be någon utanför projektet navigera till en bestämd uppgift och observera var personen tvekar, utan att förklara menyn i förväg.
Bygg formulär för fingrar och avbrott
Be bara om uppgifter som behövs i det aktuella steget. Använd beständiga fältetiketter i stället för att förlita er på platshållartext som försvinner när någon skriver. Välj rätt inmatningstyp så att exempelvis e-postadress och telefonnummer får lämpliga tangentbord. Stöd för automatisk ifyllnad kan minska arbete, men behöver testas så att uppgifter hamnar i rätt fält och inte skapar nya fel.
Felmeddelanden ska förklara vad som behöver ändras och finnas nära problemet. Bevara redan ifyllda uppgifter om ett annat fält behöver rättas. Testa med lång adress, utländskt telefonnummer och ett avbrott mitt i processen. Om formuläret använder en extern bokningslösning eller betaltjänst måste även övergången dit fungera på telefon. Kontrollera slutligen bekräftelsen och att besökaren förstår om uppgiften verkligen skickades eller om något återstår.
Prioritera laddning och stabilitet
På en telefon kan nätet vara långsammare och processorn mer belastad än på utvecklarens dator. Anpassa därför bildstorlekar till användningen, komprimera material och undvik att ladda tunga komponenter som inte behövs direkt. En stor bakgrundsvideo kan vara ett sämre val än en stillbild om den fördröjer erbjudandet. Låt inte dekorativa inslag bli ett villkor för att besökaren ska kunna förstå sidan.
Mät gärna laddning och interaktivitet, men tolka resultatet tillsammans med verklig användning. Kontrollera särskilt innehåll som flyttar sig efter att sidan först visas, till exempel bilder utan reserverat utrymme eller sent inlästa banners. Arbetet med webbutveckling bör omfatta sådana beteenden, inte enbart slutbilden. Prioritera störningar som påverkar läsning, klick och formulär före mindre förändringar som bara förbättrar ett enskilt verktygsvärde.
Testa på telefoner och med flera sätt att använda sidan
Använd webbläsarens responsiva läge för snabba kontroller, men komplettera med verkliga telefoner. Välj relevanta webbläsare och operativsystem utifrån er målgrupp och eventuell befintlig trafikdata. Testa både med och utan inloggning där det är relevant. En sida kan se bra ut i en skärmbild och ändå få problem när adressfältet ändrar höjd, ett tangentbord visas eller en systemdialog öppnas.
Gå igenom hela huvuduppgiften med skärmläsare där ni har kompetens eller ta hjälp med granskningen. Kontrollera även zoom, kontraster och hur fokus flyttas i dialoger. Guiden om tillgänglighet på hemsidan beskriver varför responsivitet inte räcker som kvalitetskontroll. Skriv ner enhet, webbläsare, steg och förväntat resultat när ni hittar fel. Då kan problemet återskapas i stället för att beskrivas som att mobilen känns konstig.
Gör mobilkontrollen till en återkommande rutin
Mobilanpassningen kan försämras när nya texter, bilder och tredjepartstjänster publiceras. Ge därför redaktörerna enkla riktlinjer om rubriklängder, bildformat, tabeller och inbäddat innehåll. Låt dem själva förhandsgranska viktiga ändringar på telefon. Särskilt kampanjsidor behöver granskas eftersom de ofta får egna komponenter och publiceras under tidspress, utanför de mallar som testades när webbplatsen byggdes.
Samla en liten uppsättning återkommande testuppgifter och kör dem efter större ändringar. Följ upp om mobilbesökare misslyckas i specifika steg, men dra inte slutsatsen att varje skillnad mot datortrafik beror på designen. Besökarna kan ha olika avsikter. Om ni vill planera en genomgång kan ni kontakta oss med länkar och beskrivningar av det som inte fungerar. Ett avgränsat problem är lättare att bedöma än ett allmänt önskemål om bättre mobilkänsla.
Vill ni ha hjälp att prioritera? Vår Webbyrå kopplar er hemsida till er affär.