8 Gyllene regler för mobil design

Mobile design är en relativt ny men vital övervägning. För ett decennium sedan innebar att designa för webben utforma för en stationär dator; Nu betyder det också att designa för mobila enheter. Mobiltelefoner driver en ökande mängd webbtrafik och siffrorna kommer bara att växa.

Enligt Statista, i oktober 2018 hade vi 3,9 miljarder unika mobila internetanvändare och mer än 50 procent av all webbplats trafik över hela världen genererades genom mobiltelefoner . En bra webbdesign är inte längre en lyx men något av en nödvändighet.

Skapa en bra webbupplevelse för mobila användare kräver mer än att bara skapa Responsiv webbdesign (även om en topp Website Builder kan hjälpa, som möjligt webbhotell val). I den här artikeln kan du upptäcka de grundläggande principerna för mobilen.

01. Bygg målorienterade upplevelser

Mobila användare är mycket målorienterade användare. Varje gång de besöker en webbplats har de en specifik uppgift de vill åstadkomma och de förväntar sig att få det de behöver riktigt snabbt. Så hur kan du få det att hända?

Bild dina idealiska användare: På samma sätt som att bygga ett hus, bygger en webbplats med en solid grund. Och grunden för stor webbdesign är den kunskap du har om dina användare. Användarforskning ska vara ett av de första stegen i produktdesign. Du måste räkna ut exakt vem dina användare är och vad de vill åstadkomma. När du väl vet att dina användares önskemål och behöver kan du sedan skapa en användarresa som du vet matchar sina förväntningar perfekt (se till att du sparar några fynd i molnlagring ). Då, utför noggrant användartestning kommer att se till att du har uppnått dessa mål.

Förfina erfarenheten kring ditt kärnmål: Vad vill du uppnå med den här webbplatsen? Att hitta svaren på den här frågan är en annan viktig sak att göra när du skapar mobil webbupplevelse. Försöker du driva engagemang, göra användare köpa produkter eller anmäla dig till en tjänst? Ange tydligt målet och tänka på hur du kan skära antalet steg som en användare måste ta för att nå den.

02. Anpassa ditt innehåll för att arbeta i ett mindre utrymme

Innehållet är det som ger värde för de flesta webbplatser. Det är den främsta anledningen till att människor besöker dem. När det gäller mobil webbdesign är det omöjligt att ta en skrivbordsupplevelse och replikera den på mobilen; Det är viktigt att designa webbplatser med mobila användare i åtanke. Det betyder att vi behöver anpassa innehåll och funktioner för att tillgodose användarens skärmstorlek och vanor. Så vilka steg kan du ta för att uppnå detta?

Undvik horisontell rullning: Användare är bekväma med webbplatser som rullar vertikalt men inte horisontellt. Därför bör det inte finnas sidor där horisontell rullning krävs för att se innehåll. Fastbreddselement är en av de vanliga orsakerna som orsakar horisontell rullning, så kontrollera att du inte har innehåll som bara visar bra vid en viss visningsbredd.

Syfte för en enda kolumnlayout: Singelkolonnlayouter hjälper till att hantera det begränsade utrymmet på en liten skärm och möjliggör också lätt skalning mellan stående och landskapsläge.

Se till att användare inte behöver klämma till zoom: Besökare kan lätt frustreras när de måste zooma in eller ut för att läsa en text eller se en bild. Designa din mobila webbplats så att användare aldrig behöver ändra storleken.

Använd läsbar typsnitt: 11 poäng är den absoluta minsta storleken för text. Den här storleken gör det möjligt för användare att läsa text på ett typiskt visningsavstånd utan att zooma.

Välj teckensnitt som skalar väl: Om webbplatsupplevelse kräver läsning, är det bättre att använda sans-serif typsnitt som Helvetica eller Roboto.

Använd Finger Friendly Design: När du designar en mobil webbplats, kommer besökare att använda sina fingrar istället för en muspil och mänskliga fingertoppar är större än en muspekare. Sträva efter att designa ett fingervänligt gränssnitt där varje interaktivt element är dimensionerat på lämpligt sätt.

En MIT Touch Lab-studie fann att den genomsnittliga storleken på en fingertopp är 8-10 mm , vilket gör 10mm x 10mm en bra minsta beröringsmålstorlek.

Tänk också på det relativa avståndet mellan beröringsmål. Om interaktiva element är placerade för nära varandra, kan mobila användare oavsiktligt trycka på en felknapp med fingret. För att förhindra att det händer, se till att du är korrekt storleksknappar och lägger också till tillräckligt med utrymme mellan dem.

Gör produktbilder expanderbara: Många studier har bevisat att människor är övervägande visuella elever. De flesta människor kan förstå och förstå koncepten mycket bättre när de levereras på det sättet, vilket är därför att använda bilder i webbdesign är ett bra sätt att summera viktiga meddelanden snabbt.

Bilder spelar en viktig roll i e-handel webbplatser - Människor är beroende av produktbilder när du fattar ett beslut. Det är viktigt att inte bara ge högkvalitativa tillgångar men gör dem också expanderbara så att användarna enkelt kan se dem i detalj. Expand hela bilden snarare än bara en del av det.

Var försiktig med kampanjer och annonser: Kampanjer och annonser kan enkelt överskugga innehållet. Medan annonsens budskap kan fungera för vissa besökare, lämnar användarna i en majoritet av det och går vidare till mer värdefull information. Detta fenomen är känt som bannerblindhet.

Gör det enkelt att hitta kontaktuppgifter: Mobila användare besöker ofta webbplatser för att hitta kontaktinformation. Beroende på brådskande kan användarna ringa ett företag, fylla i en kontaktformulär eller hitta adressen. För e-handel webbplatser ska telefonnumret vara tillgängligt precis på startskärmen.

03. Optimera innehållet för skanning

Det är ett välkänt faktum att användare inte läser online; de skannar. När en ny besökare närmar sig en webbsida, är det första som de försöker göra skanna sidan och dela innehållet i smältbara bitar av information. Det är möjligt att göra den här uppgiften enklare för användare genom att följa några enkla regler.

Tänk på den ordning i vilken du innehåller innehåll på en sida: Människor läser från topp till botten. Därför är det viktigt att bevara de viktiga sakerna på toppen av en sida och flytta resten i enlighet med hierarkin.

Klipp ner röran: Prioritera innehållet över användargränssnittselement - minska distraktioner genom att avlägsna onödiga funktionella och dekorativa element. Sträva efter att skapa en minimalistisk stil, för att du gör det enkelt för användaren att fokusera på uppgiften.

Undvik långa block av text utan bilder: Det är högst sannolikt att några stora swathes av innehåll kommer att hoppas över. Använd rubriker, stycken eller punktpunkter för att bryta upp text.

Lägg mer visuell vikt på viktiga element: Gör viktiga element som nyckelmeddelanden Fokalpunkter så besökare ser dem genast. Betona element med olika storlekar, blankespace eller livfulla färger.

04. Skapa förutsägbar navigering

Att hjälpa användare att navigera ska vara en högsta prioritet för varje webbplats. När allt är det mest övertygande innehållet är värdelöst om människor inte kan hitta det. Därför är det viktigt att investera i att utforma ett solidt navigationssystem, med hjälp av några av följande steg.

Använd kända navigeringsmönster: När det gäller att skapa en navigeringsmekanism för din webbplats är det värt att komma ihåg en enkel regel: Inte återuppfinna hjulet - sträva efter att skapa en välbekant upplevelse. Det är alltid bättre att förlita sig på navigeringsmönster som de flesta användare är bekanta med (t.ex. toppnavigeringsfält eller hamburgermeny) istället för att skapa ditt eget unika navigationssystem (t.ex. gestbaserat navigationssystem). När du skapar välkänd navigering hjälper du användare att förlita sig på deras tidigare erfarenhet när du interagerar med din produkt.

Sätt en gräns på det totala antalet navigationsalternativ: Lägg inte för många alternativ i menyer. En omfattande meny kan fungera bra för stationära webbplatser men de passar inte mobil design. Eftersom inte alla navigationsalternativ kommer att finnas tillgängliga i ett synligt område på skärmen, tvingar du mobila användare att bläddra igenom en lista med alternativ. Tänk på hur du kan presentera de minsta menyalternativen. Helst, menyn du designar bör inte ha mer än sju olika kategorier .

Prioritera navigationsalternativ : Organisera navigering baserat på hur användarna arbetar med funktionalitet. De mest populära navigationsalternativen i en global meny bör gå överst och de primära åtgärderna bör vara tillgängliga i ett vislöst område på skärmen.

Skriv klara etiketter: Varje navigationsalternativ ska ha en tydlig och kortfattad etikett. Undvik jargong - navigeringen du designar bör inte innehålla villkor som besökarna inte förstår. Tydliga etiketter kommer att ge besökare möjlighet att förutsäga resultatet av sina handlingar.

Se till att interaktiva element ser ut som interaktiva element : När du designar knappar och länkar, tänk på hur designen kommunicerar. Hur förstår användarna elementet som ett interaktivt objekt? Det sätt som ett objekt ser berättar att användarna ska använda den. Visuella element som ser ut som länkar eller knappar men är inte interaktiva (till exempel understrukna ord som inte är länkar eller rektangulära lådor med ord som inte är knappar) kan enkelt förvirra användarna.

Kommunicera den aktuella platsen: "Var är jag?" är en grundläggande fråga som användare behöver ett svar för att effektivt navigera. Ange tydligt den aktuella platsen.

Ange en sökfunktion: Om du utformar en komplex sida med mycket innehåll eller funktioner måste du se till att du anger en sökfält för enkel navigering. Genom att implementera sökfunktionaliteten ger du en snabb rutt till information / funktioner för mobila användare som kommer till webbplatsen med en specifik fråga i åtanke.

Dölj inte sökalternativet i menyn. Det borde vara en av de första sakerna som besökare ser på dina sidor.

Gör det enkelt för användarna att återvända till hemsidan: Besökare förväntar sig att när de trycker på logotypen på toppen av en sida kommer de tillbaka till hemsidan och de kommer att bli frustrerade om det inte fungerar.

Håll din användare i ett enda fönster: Undvik samtal till handling som skickar en användare till nya fönster. Vissa användare kommer att ha problem med att byta mellan Windows i en mobil webbläsare och kanske inte hitta den föregående sidan.

05. Undvik att skapa vägblåsor

Roadblocks skapar friktion och friktion är den värsta fienden av konvertering. Lyckligtvis finns det enkla saker du kan göra för att sidled dem.

Avbryt inte besökare: Stora popup-fönster är en av de mest typiska typerna av avbrott på webbupplevelsen. Under lång tid var sådana banderoller dedikerade till promo-meddelanden, men nyligen började många webbplatser använda distraherande popup-fönster för att få tillstånd att använda cookies (GDPR). Oavsett vilken information du vill visa till dina besökare, se till att den inte distraherar den övergripande erfarenheten.

Gör inte användarna lämna din webbplats: Identifiera platser i användarresor som kan få en användare att titta utanför din webbplats och sedan ge innehåll / funktioner för att hålla dem på din webbplats. Ett promo-kodfält på e-handel webbplatser är kanske det vanligaste exemplet som gör att besökare lämnar en webbplats i försöket att hitta kupongen. Det är mycket bättre att erbjuda några kuponger precis på platsen för att förhindra sådant beteende.

Tvinga inte användarna att anmäla sig: Krävande användare registrerar innan de kan se information eller använda en onlinetjänst har en hög interaktionskostnad - tvingande registrering för tidigt burk orsaka att användarna överger platsen . Innan du lämnar personlig information vill besökare få en känsla av vad en webbplats erbjuder dem.

För att skapa ett användarflöde med minst barriärer för konvertering, ska mobila platser göra det möjligt för besökare att utforska innehåll utan att behöva anmäla sig. För e-handel webbplatser är det viktigt att låta användarna köpa som gäst.

Gör det enkelt att byta till en annan enhet för att fortsätta resan: Tänk inte på mobil som fristående erfarenheter. En typisk användare har flera enheter som skrivbord, mobiltelefon och surfplatta och förväntar sig att ha en sömlös upplevelse över alla dessa enheter när du använder din produkt. Till exempel använder många personer endast mobila enheter för produktsökning och växlar sedan till skrivbordet för att konvertera. Användare förväntar sig att fortsätta resan från var de stannade på mobilen.

Här är några saker du kan göra för att synkronisera en användares nuvarande framsteg:

• Synkronisera önskelistan, favoriter och korg för ett användarkonto.
• Erbjuder ett enkelt sätt att spara eller dela information över enheter för icke-registrerade användare (till exempel ett alternativ att skicka länken till e-post).

06. Design effektiva former

Form-posten är en av de vanligaste uppgifterna på webben. Det är svårt att föreställa sig någon erfarenhet som inte kräver att användarna fyller i någon form av form. Eftersom det är en sådan allestädes närvarande praxis är förmågan att fylla i en formfritt formfritt för att hålla en användare engagerad. Här är några tips som kan hjälpa dig att hålla friktionen till ett minimum:

Minimera ingångar i formulär: Generellt sett måste de mindre data en användare ge, ju mer som de kommer att njuta av din webbupplevelse. Dessa pekare hjälper dig att minska tangenttryckningarna och ingångarna måste göra:

• Minimera det totala antalet fält. Håll alltid formulär så korta och enkla som möjligt genom att ta bort onödiga fält. Fråga bara vad du verkligen behöver veta.
• Använd Auto-Correct, Auto-Capitalization och Auto-Complete för att minska risken för användarfel.
• Undvik rullgardinsmenyn. Dropdowns döljer alternativen och det skapar extra interaktionskostnader - användare måste trycka två gånger för att välja rätt alternativ. Om du använder ett rullgardinsmält för ett val av alternativ, överväga att byta ut det med radioknappar.
• Flytta automatiskt till nästa fält när en användare trycker tillbaka.
• Minimera formulärfel med inline-validering i realtid.
• Använd befintlig information för att maximera bekvämligheten. Till exempel kan du fylla några fält som leveransadress eller faktureringsinformation för dina registrerade användare.
• Tänk på att erbjuda alternativa ingångsmekanismer. Tänk på vilka enhetskapacitet som kan användas för att ge en bättre användarupplevelse. Till exempel, istället för att be användarna att skriva kreditkortsuppgifter, ange alternativet att använda enhetens kamera för att skanna kortet och integrera system som Apple Pay och Google Pay för att möjliggöra betalning i en kran.

Ge matchande tangentbord: Mobila användare uppskattar webbplatser som ger ett lämpligt tangentbord för fältet. Den här funktionen hindrar dem från att behöva utföra några extra åtgärder. Till exempel, när användare behöver ange ett telefonnummer, ska din webbplats visa numeriska 0 till 9 knappsatsen.

Ange HTML-ingångstyper för att visa rätt knappsats. Här är sju ingångstyper som är relevanta för att bilda design:

• Inmatningstyp = "Text" Visar mobilenhetens normala tangentbord.
• Input Type = "Email" Visar det normala tangentbordet och "@ 'och" .com ".
• Inmatningstyp = "Tel" Visar numeriska 0 till 9 knappsatsen.
• Inmatningstyp = "Nummer" Visar ett tangentbord med siffror och symboler.
• Inmatningstyp = "Datum" Visar mobilenhetens datumväljare.
• Input Type = "DateTime" Visar mobilenhetens datum och tidväljare.
• Ingångstyp = "Månad" Visar mobilenhetens månad och årsväljare.

Låt användarna ändra platsfältet: Många webbplatser automatiskt detektera användarplatsen och använda denna information för att sedan ge relevant innehåll. Det är viktigt att låta användarna ändra platsen eftersom i vissa fall kan användarna se resultat för en annan plats.

07. Sträva efter att skapa en konsekvent upplevelse

Konsistens är en av de viktigaste pelarna för användarupplevelse. Konsekvent design är användarvänlig design - genom att fokusera på att skapa konsekvent design, skapar du mer intuitiv design. Sträva alltid efter att göra webbplatsen både internt och externt konsekvent.

Intern konsistens: Skapa ett konsekvent bibliotek med designtillgångar och använd det för alla sidor på din webbplats. Teckensnitt, knappar, länkar, ikoner och alla andra UI-element måste vara konsekventa över webbplatsen för att hålla visuell konsistens.

Extern konsistens: Se till att webbplatsen du designar ser ut som en del av en större produktfamilj. Om du till exempel har en mobilapp, bör din mobila webbplats förmedla en känsla av förtrogenhet för användare som använder den.

08. Bygg din bästa mobila webbplats

Alla punkter som nämns här kan betraktas som industriella bästa praxis. Men bara för att något kallas en "bästa praxis" betyder inte att det är den optimala lösningen för din webbplats. Därför är det alltid viktigt att testa dina designbeslut. Gör användbarhetstestning en obligatorisk del av din designprocess och förbättra upplevelsen regelbundet.

Denna artikel publicerades ursprungligen i utgåva 317 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp Issue 317 eller Prenumerera på nätet .

Relaterade artiklar:

• 6 trender som förändrar ansiktet på mobil UI-design
• 10 tips för bättre mobil UX-design
• Så här utformar du användarvänliga mobilgränssnitt