Bedste praksis til navigation på mobilen
Den måde, hvorpå folk får adgang til information online, udvikler sig. Google rapporterer, at mere end halvdelen af webstedsbesøgene fra næste år (2013) kommer fra mobile enheder frem for stationære computere eller bærbare computere.
Ikke alene er mediet til at få adgang til internettet skiftende, og de fleste mobilbrugers behov for at gå online med deres smartphone eller håndholdte enhed ændrer sig også; bliver mere fokuseret og opgaveorienteret.
Dagens smartphone-ejere bruger deres telefoner til at udføre specifikke opgaver som f.eks. Kontrol af destinationer, offentlige transitplaner og bankbalancer. Mens internet browsing på håndholdte enheder forekommer (især når de står i meget lange linjer eller venter på en bus) foretrækker mange mennesker at surfe på internettet fra deres hjem eller kontor.
Skærmrum er begrænset på håndholdte enheder, og mobilbrugere er optaget, ofte med flere opgaver, da de søger information online med en tommelfinger eller en finger.
Af denne årsag er mobilnavigering endnu vigtigere end navigation på et traditionelt websted. Forståelse af spørgsmål og behov hos den typiske site besøgende, begrænsningerne af deres enhed, og hvad der vil frustrere dem, er afgørende for effektiv navigationsdesign på et mobilt websted.
Hvad spørger mobilbrugere, når de går online?
Compuware 2011 studie Hvad brugere ønsker fra Mobile fandt, at 95% af brugerne søgte efter lokal information med deres smartphones eller håndholdte enheder. Det ville derfor være en god praksis for mursten og mørtelvirksomheder at navigere til deres placering, timer og kontaktoplysninger fremtrædende på mobile websteder.
Sæt dig selv i den typiske sitebrugers sko. Se på analyserne for mobiltrafikken. Vælg de tre eller fire kategorier, brugerne kigger efter, og vælg kategorinavne, der afspejler de mest almindelige søgninger.
Hvis dette er et mobilt websted til en mursten- og mørtelvirksomhed, skal du vise en knap for placering og kontaktoplysninger fremhævet.
Du kan altid tilføje et link til "besøge vores hjemmeside", og den virkelig interesserede kan se på en mere udførlig version af mobilwebstedet i komforten af deres kontor eller hjemme med deres bærbare computer.
7 For hele menneskeheden kender deres brugere.
Design for et andet miljø
Ud over parametrene og distraktionerne i det eksterne miljø skal webdesignere også evaluere enhederne selv, når de designer navigationselementer.
En arkitekt ville ikke fortaler præcis det samme byggedesign for midten af byen, ørkenen eller skoven. En god webdesigner betragter mulighederne og begrænsningerne i mobilmiljøet for at skabe den mest brugbare navigation for mobilitet.
Problemet er selvfølgelig, at designeren ikke ved, hvilken enhed slutbrugeren holder, når han besøger webstedet, en situation der kan løses ved hjælp af lydhurtige designværktøjer som f.eks. CSS-medieforespørgsler til at løse problemer med placering, størrelse og tilpasningsbart indhold. Uanset om der designes et helt nyt mobilt websted ved hjælp af lydhørt design eller tilpasning af et eksisterende websted til mobil, er der stadig visse bedste fremgangsmåder, der gælder for navigation.
Navigation menuer til den lille skærm
Webdesignere ved, at mobile brugere opfører sig anderledes, når de får adgang til internettet på deres smartphones og håndholdte enheder, end de gør på deres stationære eller bærbare computere. At finde plads til navigation på en lille skærm kan være vanskelig, men med en lidt omhyggelig planlægning er mobilnavigationsdesign opnået.
Med kun fire navigationsknapper og det gratis nummer, der vises gratis, er Loews Hotels mobile site brugervenligt og nemt at navigere.
Bedste praksis 1: Reducer antallet af menuknapper
Dette kan være vanskeligt ved udformning af en mobilvenlig version af et eksisterende websted, især en der har mange links i desktopdesign. Begræns dine hovednavigeringsknapper til fem eller mindre, og tilføj indlejrede menuer, hvis det er nødvendigt.
Bedste praksis 2: Reducer antallet af vandhaner
Hold antallet af handlinger, der skal udføres på en mobil enhed, til et minimum. Jo færre vandhaner og klik for at finde, hvad brugeren er på udkig efter det bedre. Det er for nemt at lave en fejl. Medtag altid en let at finde tilbage-knap: du vil ikke frustrere brugeren yderligere.
Bedste praksis 3: Rulle navigation
Hold de mest afgørende navigeringselementer øverst. Mobile enheder har forskellige skærmstørrelser, så tænk om vigtigheden af hver kategori, da dem længere nede i listen kan kræve scrolling på smartphones med mindre skærmrum.
Bedste praksis 4: Stabelbare knapper
Mobilbrugere ser dit websted i portræt i stedet for landskab, som de gør på et skrivebord. Tilpas din navigation til mobilwebben ved at præsentere det lodret. Læs ned i stedet for på tværs. Dette fungerer bedst for websteder med højst fem kategorier i menuen, og når det er usandsynligt, tilføjes flere kategorier.
Bedste praksis 5: indlejret menu
Nogle gange kendt som sammenklappelig navigation, er dette en god mulighed for websteder, der kræver indhold på skærmen samt en menu, og dem, der forventer at tilføje kategorier og menupunkter.
Optimering af mobilitetsnavigation til touchscreen og små knapper
Touchscreens og små knapper betyder nye overvejelser for webdesignere. Mobilbrugere har ikke den luksus af en klikbar mus for at finde en lille menuknap eller et link. De er ved deres fingre og tommelfinger, hvilket betyder, at de peger på områder på skærmen med meget mindre præcision, end hvis de bruger en mus, og de kan nemt blive frustrerede, hvis deres tapping ikke giver øjeblikkelige resultater.
Webdesignere kan gøre navigationen nemmere for mobilbrugere ved at tilføje flere pladser omkring menulinieforbindelser eller ved at erstatte forbindelserne med knapper til menukategorier.
Gør det større gør det lettere at finde et område hurtigt og klikke på det med en lille telefonknap eller trykke på den med en finger eller en tommel. Da den gennemsnitlige finger kræver et klikbart område på mindst 44px x 44px, kan det medføre, at knapperne og navigationsområderne overskygger resten af indholdet på skærmen. Dette kan dog passe til formålet med hjemmesiden og brugeren, især hvis indholdet på hjemmesiden er sekundært for de store menupunkter.
Ideelt set bør designet give brugeren af berøringsskærmen mulighed for at gøre navigeringsknappen større, hvis det er nødvendigt.
Tips til optimering
- Indstil menuen øverst eller nederst på skærmen afhængigt af brugernes primære formål. Hvis de leder efter indhold og sandsynligvis vil rulle, giver menuen i bunden dem et andet sted at gå på dit websted i stedet for at forlade stedet til en søgemaskine eller et konkurrerende websted.
- Del skjul menuen for at rumme andet indhold på skærmen, og afslør hele menuen, når brugerne trykker på den. Dette holder menuen foran og center uden at udslette nyttigt indhold.
- Anbring et menu link øverst på skærmen, og tilføj en navigationsknap til bunden.
- Lang og tynd kan være fantastisk til supermodeller, men i mobilnavigering er kort og bred smuk. Bred kort navigation hjælper også, når du har længere kategorititler - teksten passer bedre.
- Reducer højden på header billeder eller erstat dem helt med et mindre logo for at øge pladsen til navigation.
- Hold branding og design problemer konsekvent ved at være opmærksom på typografi, farve og stil navigationsknapper i stedet for at bruge værdifuld plads med stor grafik og billeder.
- Forkort teksten, især på menuknapper og kategorititler. I nogle tilfælde er dette yderst vanskeligt, og en stabelbar menu med plads til mere tekst på hver linje er et foretrukket alternativ.
- Forenkle så meget som muligt. Fjern så meget fra hjemmesiden som muligt for at fokusere på kun at levere de øverste få ting, de fleste brugere vil have.
Mobilnavigation no-nos
Mobilbrugere er optaget, distraheret og på farten. De ønsker ikke variation i deres valg af hvilke knapper der skal vælges, og du vil ikke have, at de bliver frustreret og forlade stedet på grund af analyseforlamning.
Giv dem ikke mange valgmuligheder.
Undgå vandret rulning og ingen svævende! Slider menuer kan også være frustrerende for mobile brugere. I din søgen efter at forenkle og strømline navigationen, tror du ikke at du skal være kedelig. Kreativ navigation er ikke en dårlig ting, men det skal være intuitivt. Brugeren skal nemt kunne se, hvor de skal hen, for at finde de oplysninger, de ønsker hurtigt.
Konklusion
Den relative nyhed af mobile enheder som en metode til at få adgang til internettet betyder, at mobilnavigation konstant udvikler sig, da forskellige designs bliver prøvet, finjusteret eller helt udkastet.
Hvad der virker for et sæt brugere på et websted, kan være en katastrofe med et andet websted, da den information, brugeren søger efter, er helt anderledes. Derudover nærmer den samme bruger forskellige websteder med forskellige formål: En mobilbruger, der kigger på et nyhedswebsted på telefonen, vil sandsynligvis have overskrifter, ikke kontaktoplysninger; hvilket er netop det, hun ønsker, når hun besøger det mobile websted for sin tandlæge eller frisør.
Mens navigationselementer til en mobilwebsite kan afvige fra en traditionel hjemmeside, er formålet det samme: Web besøgende har et spørgsmål, når de går online. Hvor er butikken? Hvad sker der i verden? Hvad er min bankkonto saldo? Great navigation fører brugerne til svarene hurtigt og enkelt.
Mød deres umiddelbare behov, og de vil vende tilbage, øge trafikken til hjemmesiden, gøre dine kunder lykkelige og føre til henvisninger og mere mobil webdesign forretning for dig.
Hvilke tilgange til mobilnavigation foretrækker du som designer? Hvad med brugeren? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, mobil internet image via Shutterstock.