Bästa praxis för navigering på mobilen
Det sätt på vilket människor får tillgång till information på nätet förändras. Google rapporterar att nästa år (2013) kommer mer än hälften av webbplatsbesök kommer från mobila enheter i stället för stationära eller bärbara datorer.
Det är inte bara mediet att få tillgång till webben, de flesta mobilanvändares behov att gå online med sin smartphone eller handdator ändras också; bli mer fokuserad och uppgiftsorienterad.
Dagens smartphone-ägare använder sina telefoner för att utföra specifika uppgifter, såsom kontroll av destinationer, kollektivtrafikplaner och bankbalanser. Medan internetbläddring på handhållna enheter sker (speciellt när de står i riktigt långa rader eller väntar på en buss) föredrar många människor att surfa på nätet från bekvämligheten av sitt hem eller kontor.
Skärmutrymmet är begränsat på handhållna enheter, och mobila användare är upptagna, ofta med flera uppdrag eftersom de söker information online med en tum eller ett finger.
Av dessa skäl är mobilnavigering ännu viktigare än navigering på en traditionell webbplats. Att förstå frågor och behov hos den typiska webbplatsbesökaren, begränsningarna av deras enhet och vad som kommer att frustrera dem är avgörande för effektiv navigationsdesign på en mobil webbplats.
Vad frågar mobilanvändare när de går online?
Compuware 2011 års studie Vad användare vill ha från mobil fann att 95% av användarna letade efter lokal information med sina smartphones eller handhållna enheter. Det skulle därför vara bra för tegel och murbruk att navigera till deras plats, timmar och kontaktinformation framträdande på mobila webbplatser.
Sätt dig själv i den typiska webbplatsanvändarens skor. Ta en titt på analyserna för mobiltrafiken. Välj de tre eller fyra kategorierna som användare letar efter och välj kategorinamn som återspeglar de vanligaste sökningarna.
Om det här är en mobil plats för en tegel och murbruk, visa en knapp för platsen och kontaktinformationen framträdande.
Du kan alltid lägga till en länk till "Besök vår hemsida" och den riktigt intresserade kan titta på en mer utförlig version av mobilplatsen i bekvämligheten av deras kontor eller hemma med sin bärbara dator.
7 För hela mänskligheten vet sina användare.
Designa för en annan miljö
Utöver parametrarna och distraheringarna av den yttre miljön måste webbdesigners också utvärdera enheterna själva vid utformning av navigeringselement.
En arkitekt skulle inte förespråka exakt samma byggnadskonstruktion för mitten av staden, öknen eller skogen. En bra webbdesigner anser möjligheterna och begränsningarna i mobilmiljön att skapa den mest användbara navigationen för mobilitet.
Problemet är naturligtvis att konstruktören inte vet vilken enhet slutanvändaren håller när han besöker webbplatsen, en situation som kan lösas med hjälp av responsiva designverktyg som CSS-mediafrågor för att ta itu med frågor om plats, storlek och anpassningsbart innehåll. Oavsett om du designar en helt ny mobilwebbplats med hjälp av lyhörd design eller anpassning av en befintlig webbplats för mobil, finns det fortfarande vissa bästa metoder som gäller för navigering.
Navigationsmenyer för den lilla skärmen
Webbdesigners vet att mobila användare beter sig olika när de använder webben på sina smartphones och handhållna enheter än de gör på sina skrivbords- eller bärbara datorer. Att hitta utrymme för navigering på en liten skärm kan vara knepigt, men med en noggrann planering kan mobilnavigationsdesign uppnås.
Med bara fyra navigeringsknappar och det avgiftsfria bokningsnumret, visas Loews Hotels mobila webbplats användarvänligt och enkelt att navigera.
Bästa praxis 1: Minska antalet menyknappar
Detta kan vara knepigt när du utformar en mobilvänlig version av en befintlig webbplats, särskilt en som har många länkar i skrivbordet. Begränsa dina huvudnavigeringsknappar till fem eller mindre, om du vill lägga till kapslade menyer.
Bästa praxis 2: minska antalet kranar
Håll antalet åtgärder som ska utföras på en mobilenhet till ett minimum. Ju färre kranar och klick för att hitta vad användaren letar efter bättre. Det är för lätt att göra ett misstag. Ta alltid med en lätt att hitta tillbaka-knapp: du vill inte frustrera användaren ytterligare.
Bästa praxis 3: rullningsnavigering
Håll de mest avgörande navigeringselementen högst upp. Mobila enheter har olika skärmstorlekar, så tänk noga på vikten av varje kategori, eftersom de längre ner i listan kan kräva att du rullar på smartphones med mindre skärmutrymme.
Bästa praxis 4: stapelbara knappar
Mobila användare ser din webbplats i porträtt istället för landskap som de gör på ett skrivbord. Anpassa din navigering till mobilbanan genom att presentera den vertikalt. Läs ner istället för över. Det här fungerar bäst för webbplatser med högst fem kategorier i menyn, och när det är osannolikt kommer fler kategorier att läggas till.
Bästa praxis 5: nestad meny
Ibland kallas hopfällbar navigering, det här är ett bra alternativ för webbplatser som kräver innehåll på skärmen och en meny och de som förväntar sig att lägga till kategorier och menyalternativ.
Optimera mobilitetsnavigering för pekskärm och små knappar
Pekskärmar och små knappar betyder nya överväganden för webbdesigners. Mobila användare har inte lyxen för en klickbar mus för att hitta en liten menyknapp eller länk. De är nöjda med sina fingrar och tummar, vilket innebär att de pekar på områden på skärmen med mycket mindre precision än om de använde en mus och kan bli lätt frustrerad om deras tappning inte ger omedelbara resultat.
Webbdesigners kan göra navigering enklare för mobila användare genom att lägga till mer utrymme runt meny länkar eller genom att ersätta länkarna med knappar för menykategorier.
Att göra det större gör det lättare att hitta ett område snabbt och klicka på det med en liten telefonknapp eller knacka på det med ett finger eller en tumme. Eftersom det genomsnittliga fingeret kräver ett klickbart område på minst 44px x 44px kan det leda till att knapparna och navigeringsområdena överskuggar resten av innehållet på skärmen. Men detta kan passa syftet med webbplatsen och användaren, speciellt om innehållet på hemsidan är sekundärt för de stora menyalternativen.
Idealt sett bör designen tillåta pekskärmens användare att göra navigeringsknappen större om det behövs.
Tips för optimering
- Ställ in menyn längst upp eller längst ner på skärmen beroende på huvudsyftet med webbplatsanvändare. Om de letar efter innehåll och sannolikt kommer att rulla, ger menyn längst ner dem en annan plats att gå på din webbplats än att lämna webbplatsen för en sökmotor eller en konkurrerande webbplats.
- Göm delvis menyn för att rymma annat innehåll på skärmen, vilket visar hela menyn när användarna trycker på den. Detta håller menyn fram och mitt utan att utplåna användbar innehåll.
- Placera en menyknapp längst upp på skärmen och lägg till en navigeringsknapp längst ner.
- Hög och tunn kan vara bra för supermodeller, men i mobil webbnavigering är kort och bred vacker. Bred kortnavigering hjälper också när du har längre kategori titlar - texten passar bättre.
- Minska höjden på huvudbilden eller ersätt dem helt med en mindre logotyp för att öka rymden för navigering.
- Behåll varumärkes- och designproblemen konsekvent genom att uppmärksamma typografi, färg och stilen på navigeringsknapparna istället för att använda värdefullt utrymme med stor grafik och bilder.
- Förkorta texten, särskilt på menyknappar och kategorititlar. I vissa fall är det extremt svårt, och en stapelbar meny med plats för mer text på varje rad är ett föredraget alternativ.
- Förenkla så mycket som möjligt. Ta bort så mycket från hemsidan som möjligt för att fokusera på att bara ge de bästa få objekten de flesta användare vill ha.
Mobilnavigering no-nos
Mobila användare är upptagna, distraherade och på språng. De vill inte ha variation i valet av vilka knappar som ska väljas och du vill inte att de ska bli frustrerade och lämna platsen på grund av analysförlamning.
Ge dem inte mycket val.
Undvik horisontell rullning och ingen svängning! Skärmmenyerna kan också vara frustrerande för mobila användare. I din strävan att förenkla och effektivisera navigering, tror du inte att du behöver vara tråkig. Kreativ navigering är inte en dålig sak, men det måste vara intuitivt. Användaren borde enkelt kunna se var de ska gå för att hitta den information de vill ha snabbt.
Slutsats
Den relativa nyheten av mobila enheter som en metod för att komma åt webben innebär att mobilnavigering ständigt utvecklas, eftersom olika mönster försöker, tweaked eller kastas ut helt och hållet.
Vad som fungerar för en uppsättning användare på en webbplats kan vara en katastrof med en annan webbplats eftersom informationen som användaren söker efter är helt annorlunda. Dessutom använder samma användare olika webbplatser med olika ändamål: en mobilanvändare som tittar på en nyhetswebbplats på hennes telefon vill troligen ha rubriker, inte kontaktinformation, vilket är precis vad hon vill ha när hon besöker mobilplatsen för sin tandläkare eller frisör.
Medan navigationselement för en mobilwebbplats kan skilja sig från en traditionell webbplats är syftet detsamma: Webbesökare har en fråga när de går online. Var är affären? Vad händer i världen? Vad är mitt bankkonto? Stor navigering leder användarna snabbt och enkelt till svaren.
Möt sina omedelbara behov och de kommer att återvända, öka trafiken till webbplatsen, göra dina kunder glada och leda till remisser och mer mobil webbdesign för dig.
Vilka metoder för mobilnavigering föredrar du som designer? Vad sägs om som användare? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, mobil internet bild via Shutterstock.