Mobil webbdesign 10 tips för bättre användbarhet

Mobil webbsurfning förväntas bli till nästa stora Internetplattform. Det är nu enkelt att surfa på nätet från nästan var som helst som använder mobila enheter som passar i handen på grund av teknik. Att vara kort med bra användarvänlighet implementering i mobil webbdesign gör det svårt att surfa på olika populära mobila webbplatser. Att designa för mobila enheter måste vara enklare än sin vanliga webbplats och mer uppgiftsbaserad för att få jobbet gjort eftersom användarna letar efter något specifikt och brådskande.

Du bör ta hänsyn till hur du använder det minsta tillåtna läget för ledigt utrymme för ditt stora innehåll och förblir intressant för mobila användare. Undvik stora bilder och flashanimering eftersom det kommer att sakta ner din webbplats. Kom ihåg att funktionalitet är viktigare än stil för mobila webbplatser. Om din webbplats inte är kodad och utformad korrekt kan den se bättre ut på en telefon, värst på en annan eller sämre, inte alls. Testa, validera och kontrollera om den är kompatibel med alla mobila enheter.

För att hjälpa dig att skapa webbplats som är tillgänglig inte bara på stationära eller bärbara datorer utan även mobila enheter, här är några av de saker du bör tänka på på mobil webbdesign med exempelbilder tillsammans med den mobila webbplatsversionens direkta länk.

1. Bestäm på skärmupplösningen

Den mobila världen innehåller en stor variation av design överväganden från olika skärmstorlekar och upplösning till olika former. Syfte att hitta en balans mellan tillräcklig skärmbredd och publikstorlek. Ta reda på specifikationerna för nuvarande mobila enheter och använd din bästa bedömning. Vad som är utmanande för mobilutvecklare är sättet att få en att visa på lämpligt sätt över en rad skärmstorlekar utan att behöva återskapa sidor för olika plattformar.

Här är en lista över webbupplösningar som är populära på mobila enheter från och med februari 2011 presenterad av Uxbooth.com med sin publicerade artikel, Överväganden för mobil webbdesign (Del 2): ​​Mått, av David Leggett. Författaren förklarar några punkter om visningsdimensioner och lösningar för layoutdesign.

2. Bryt upp webbsidor i små portioner

Långa sektioner av text kan vara svåra att läsa, så att placera dem på flera sidor begränsar rullningen till en riktning. Bli av med lågprioriterat innehåll. Håll dig till en enda kolumn med text som wraps så det finns ingen horisontell rullning.

För exemplet nedan visar CBS News mobilwebbversion endast den stora nyhetssektionen och bryter nyhetsartiklarna i små portioner. Medan Treehugger presenterar sig med sina senaste artiklar och senaste tweets med några av funktionerna på hela webbplatsen. Båda webbplatser har användaren klickar på en textlänk för att visa resten av artikeln.

CBS News

Trädkramare

3. Förenkla designen

Enkelhet motsvarar användbarheten. Låt dem flytta runt på platsen utan problem. Undvik att inkludera tabeller, ramar och annan formatering. Om du använder vaddering, kom ihåg att behålla det till ett absolut minimum, mycket mindre än vad du skulle använda för en vanlig webbsida. Jämfört med stationära datorer, ju mer du klickar på länkarna på mobila webbplatser, desto mer väntar du på grund av laddningstiden. Med det måste du ta bort och förenkla din webbplats med balans mellan innehåll och navigering.

För vårt exempel, den mobila versionen av Best Buy-listan, är det bara de viktigaste produktkategorierna som trimmer ner hierarkinivå för innehåll. Medan YouTube-mobilhemsida visar bara de fyra senaste spotlight-videon.

Bästa köp

Youtube

4. Alternativ för att se hela hemsidan

Ge en länk för dina mobila besökare att byta tillbaka till din fullständiga webbplats för att användaren ska hitta och visa det andra innehållet och funktionerna som bara är tillgängliga för den stationära versionen av webbplatsen. Dina tittare kommer säkert att göra mycket vertikal rullning, så hjälp dem ut med länkarna "Back to Top" så att de kan hoppa överst på sidan.

Som ett exempel har Ars Technica sin länkknapp till standardwebbplatsen placerad på rubriken. Medan Shangri-La har sin fullständiga hemsida länk placerad på sidfoten.

Ars Technica

Shangri La

5. Navigationsplacering

Lär känna din publik och vara medveten om vad de letar efter. Ta reda på hur de vill navigera på din webbplats. Placera din navigationsmeny under innehållet om dina riktade mobilanvändare vill se innehållet snabbt. Innehållet och rubriken måste vara synliga först för att inte komma i vägen för att visa sidinnehållet. För användare som vill navigera i en viss kategori direkt placera navigationen längst upp på sidan. Nedan finns olika exempel på navigationsplacering som används i mobil webbdesign.

D & G

Politico

Dagligt Horoskop

6. Använd textlänkar

Din huvudsakliga webbplats kan använda whizzy fly-out menyer, rollovers eller andra fina gadgetry, men en mobil webbläsare kommer sannolikt inte. Var medveten om att dynamiska sidelement och grafiska länkar förbrukar resurser, så välj väl märkta textlänkar.

En lista bortsett från

Reddit

7. Siffror mellan den valda länken

Om du flyttar markören ner rullar du på sidan och markerar länkarna samtidigt. Så det är viktigt att klart rekommendera användaren vilken produkt som är i fokus. Detta kan göras genom att ändra teckensnitt och bakgrundsfärg på länkar och knappar eller genom att helt enkelt lägga till några vadderingar runt länkar för att göra det klickbara området större ca 44px med 44px. Geek Squad och Diesel använde stora teckensnitt för klickbar text.

Nördgänget

Diesel

8. Balansförbindelser

Varje sidladdning förbrukar tid och systemresurser, vars senare är bristfällig, så försök att inte tvinga besökaren att gräva igenom en mängd sidor för att få tillgång till informationen som sökts. Slå en balans mellan antalet länkar på varje sida och djupet på webbplatsen.

Flickr

Twitter

9. Minska användarens textinmatning

Det är svårt att skriva in text i mobila versioner av webbplatser. Byt ut med radioknappar eller lista istället så att de kan välja från vad de behöver med lätthet. Kom ihåg att mobila användare inte har tillgång till konventionellt tangentbord och mus. Ju kortare URL: n, desto bättre eftersom det är monotont att skriva in långa webbadresser.

För vårt exempel nedan använde Fedex checklista och nedrullningsmenyer. Medan Tumblr fick dig att välja ditt språk med hjälp av rullgardinsmenyn.

Fedex

tumblr

10. Nej pops eller uppdateras

Mobila webbläsare stöder normalt inte popup-fönster. Och om de gjorde det skulle de ha mycket smalt utrymme att dyka in. Håll dig borta från att använda dem för att undvika oförutsägbara resultat. Också, har inte sidor som uppdateras regelbundet för att undvika att fylla i det begränsade minnet. Låt användaren uppdatera innehållet.

I ett nötskal

Få kreativ och använd din mobila webbdesign på ett nytt sätt. Gör ditt innehåll tvingande nog och användbart. Ge dina användare vad de vill ha, när de vill ha det. Användare vill inte gräva djupare på webbplatsen bara för att hitta vad de letar efter i mobilwebben.

Har du några favoritwebbplatser som verkligen inspirerade dig? Kan du dela några av dina mobila webbdesign tips? Låt oss veta!

Vidare läsning

1. Responsive Web Design (Alistapart.com)
2. Gör din webbplats mobilvänlig (Thinkvitamin.com)
3. W3C mobilOK Checker (W3.org)
4. iPhone Simulator