Mobila webbdesign tips mobil bör komma först
NyheterJag kommer bara ut och säger det: webbplatser och webbapplikationer ska utformas för mobil först.
I flera år gjorde de flesta lag motsatsen. Mobil, om det hände alls, var en port i skrivbordsversionen som var utformad, konstruerad och byggd innan någon ens ansåg mobilupplevelsen.
Och under lång tid gjorde detta perfekt mening: surfar på webben på mobiltelefoner var smärtsamt; bärare kontrollerade tillgång till webben på sina enheter; och mobila nätverkshastigheter gjorde allt för att mala alltför ofta.
Ändra tider
Men sakerna har förändrats så dramatiskt de senaste åren att det börjar med skrivbordet vara en alltmer bakåtgående tanke. Att designa för mobila först kan öppna nya möjligheter till tillväxt och leda till en bättre övergripande användarupplevelse.
Låt oss gräva i de tre huvudorsakerna varför: mobil ser explosiv tillväxt; mobil tvingar dig att fokusera och mobil utökar dina möjligheter.
Först tillväxt. Om du inte har uppdaterat den senaste statistiken ger jag dig en snabb uppsättning: mobilen växer som galen. Medan analytiker länge har utropat mobilen som "nästa stora sak", är deras profetior äntligen bärande av frukt.
Kanske den mest kompletta och inspirerande uppsättningen statistik kommer från Morgan Stanley Researchs mobila internetrapport. Denna skattkista av data om vad som händer i mobil framhäver några riktigt chockerande siffror: Adoption av mobilt internet överträffar den häpnadsväckande tillväxten av skrivbordsinternet adoption. smartphones förväntas överträffa den globala PC-marknaden under 2012; och tunga mobila datanvändare kommer att tredubblas till en miljard år 2013. Det är en stor publik som växer fram snabbt. Så nu är det dags att ta tillfället i akt på mobilen!
Men det här är inte bara en möjlighet att skapa en mobilversion av en webbprodukt för att dra nytta av denna tillväxt. Det är en möjlighet att ge en väldigt förbättrad upplevelse för dina användare.
Tänk på den sociala nätverkstjänsten Facebook. Det finns mer än 100 miljoner aktiva användare som nu använder Facebook via sina mobila enheter. Dessa användare är dubbelt så aktiva på Facebook som icke-mobila användare.
Kombinationen av mobila och stationära upplevelser resulterar i mer engagerade användare på båda enheterna. Det beror på att Facebook inte bara tänker på sin mobila upplevelse som en port på skrivbordssidan. Det omfamnar det som ett sätt att göra hela Facebook-upplevelsen bättre.
Med Joe Hewitts ordförande, ledande utvecklare av Facebooks iPhone-applikation: "Mitt mål var först och främst att bara göra en mobil följeslagare, men jag blev övertygad om att det var möjligt att skapa en version av Facebook som faktiskt var bättre än webbplatsen." Det är verkligen den mobila möjligheten i ett nötskal.
Nu ... hur hjälper begränsningarna och kapaciteten hos mobila enheter dig till det?
Tvingas att fokusera
Att utforma för mobilmiljön levereras med en naturlig uppsättning begränsningar. Medan vissa kan argumentera för att dessa begränsningar begränsar mobil design tror jag att de är inneboende bra för användarupplevelse och som ett resultat affärsövergripande.
I synnerhet de små skärmarna, långsamma anslutningar och användningsförhållanden för mobila enheter är starka katalysatorer för bra webbdesign.
Kanske är den mest effektiva av dessa begränsningar skärmutrymme. När du arbetar med en 480x320 pixel skärm (hittade på de första tre generationerna av Apples iPhone, den första generationen Android-telefoner och Palm Pre), 80 procent av skärmutrymmet du hade vid 1024x768 (vanligt för de flesta webbplatser på skrivbordet) är borta.
Det betyder att 80 procent av innehållet, navigering, kampanjer och interaktioner du kan passa på skrivbordet behöver gå. Och det är ... bra.
Att förlora så mycket skärmutrymme tvingar webblag att fokusera. Du måste se till att det som stannar kvar på skärmen är det viktigaste särdraget för dina kunder och ditt företag. Det finns helt enkelt inte utrymme för några gränssnittsavbrott eller innehåll av tvivelaktigt värde. Du behöver veta vad som är viktigast.
För att kunna göra det måste du verkligen veta dina kunder och ditt företag. Vilket är bra design 101. Att designa för mobilen tvingar dig att komma dit, som det eller inte. Tänk på skillnaden mellan Expedias resvägsskärm på skrivbordets hemsida och dess iPhone-upplevelse.
Huvudsyftet med denna sida är att låta en kund granska sina reseplaner. Om du ser väldigt nära mitt på denna webbsida kan du kanske fånga denna information.
I skarp kontrast lägger Expedia iPhone-upplevelsen samma information framför och centrum och med bättre visuell hierarki - vilket gör att användaren snabbt kan kontrollera ankomst- och avgångstider. Borta är alla gränssnittskräp, kampanjer och cruft närvarande på skrivbordet. Allt som är kvar är vad Expedia-användare behöver utföra sin uppgift. Varför kunde inte skrivbordssidan göra detsamma?
Som ett annat exempel, överväga skillnaden mellan Southwest Airlines hemsida på skrivbordet och dess iPhone-upplevelse. Eftersom det finns många pixlar tillgängliga på skrivbordet, har de blivit fyllda med många kampanjer, funktioner, alternativ och mer - för att de kan vara.
Den mobila upplevelsen har å andra sidan en laserliknande inriktning på vad kunderna behöver och vad Southwest gör: bokresor, checka in, kontrollera flygstatus, kolla mil och få varningar. Inget utrymme för något annat. Det enda som betyder mest.
Att fokusera på det som betyder mest hjälper till att ta itu med ett av de längsta stående problemen i webbdesign: "Allt inklusive diskbänk" -problemet. Det här problemet finns eftersom det är relativt enkelt att lägga till saker på en webbplats. Många saker läggs till - speciellt när flera intressenter är inblandade.
Olika interna avdelningar, egenskaper ägare, företag och individer har olika krav på webbplatser. Så webbteam kvarstår ofta för att balansera många kampanjer, interaktioner, innehållsmoduler, navigationsalternativ och mer i en enda layout. På en 1024x768 skärm finns det många pixlar att fylla på!
Om du designar för mobil först kan du skapa ett avtal först om det som är mest viktigt. Du kan sedan tillämpa samma motivering till skrivbordsversionen av din webbprodukt. "Vi kom överens om att detta var den viktigaste uppsättningen funktioner och innehåll för våra kunder och företag" - varför skulle det förändras med mer skärmutrymme?
Det finns naturligtvis skillnader baserade på mobil och skrivbordssammanhang. Men kärnvärdet för en webbtjänst är likadant i båda formaten. När ett team designar för mobil först är slutresultatet en upplevelse som är inriktad på de nyckeluppgifter som användarna vill uppnå utan de yttre omkörningarna och det allmänna gränssnittet som krossar många av dagens webbplatser. Det finns helt enkelt inte plats på en 320 x 480 pixel skärm för externa element. Du måste prioritera.