01/12/2021
Forestil dig, at du træder ind i et ukendt, storslået palads. Hvis du kun har et svagt lys, der truer med at slukke, er det let at fare vild og miste interessen. Men tænk, hvis du blev budt velkommen og kyndigt guidet gennem hver eneste sal, så du kunne nyde paladsets fulde skønhed! Lyder det ikke meget bedre?
Præcis det samme gør korrekt mobilapp-navigation for din app: den tilbyder den rette vejledning! En klar og intuitiv navigation fungerer som en bro, der forbinder brugere med din virksomheds tilbud. I dag, med over 6 milliarder aktive smartphone-brugere globalt, er god app-navigation blevet en afgørende faktor for at fange og fastholde brugernes opmærksomhed. Folk foretrækker apps, der er designet simpelt og brugervenligt, frem for dem der er fancy, men komplekse. At skabe effektiv vejledning (app-navigation) kræver selv en grundig og forståelig guide. Derfor er vi her for at hjælpe dig med de bedste praksisser for at skabe den mest effektive mobilapp-navigation. Vi vil dække alt, hvad du behøver at vide om mobilnavigationsdesign, for at gøre din rejse lettere. Lad os begynde!
- Hvad er mobilapp-navigation?
- Hvorfor er mobilapp-navigation afgørende?
- 13 Populære Navigationsmønstre i Mobilapps
- 1. Den Diskutable Hamburger-menu
- 2. Flydende Navigationsknap (FAB)
- 3. Gestusbaseret Navigation
- 4. Sub-navigation
- 5. Fuldskærmsnavigation
- 6. Tab-navigation (Fanenavigation)
- 7. Top-navigation
- 8. Bund-navigation
- 9. Sidebar-navigation (Sidebjælke-navigation)
- 10. Grid-navigation (Gitter-navigation)
- 11. Stemme-navigation
- 12. Søgebaseret Navigation
- 13. Kort-navigation
- 7 Bedste Praksisser Enhver Designer Bør Følge
- Ofte Stillede Spørgsmål (FAQ) om Mobilapp-Navigation
- En Indpakning af Mobilapp-Navigation
Navigation handler generelt om at vise dig vejen til din destination. Når vi taler om mobilapp-navigation, refererer det til det samme koncept: vejledning. Mobilapp-navigation er måden, hvorpå brugere guides fra ét punkt til et andet inden for en app. Når navigationen udføres med alle relevante punkter i tankerne, kan den give de bedste resultater med hensyn til brugerengagement. Alt, hvad du skal gøre, er at fokusere på at guide dine brugere og hjælpe dem med at finde de vigtige knapper, der repræsenterer de områder, du ønsker, de skal besøge.
Lad os vende tilbage til vores indledende segment om paladset. Hvor anderledes ville situationen være, hvis vi havde nogen til at guide os igennem hele paladset, og omvendt! Med dette koncept i tankerne, lad os uddybe vigtigheden af app-navigation, for der er mere at sige om det.
Navigation er kilden, der fører brugere til alle de vigtige aspekter af mobilappen. Du har sandsynligvis stræbt efter at skabe en applikation, der tilbyder værdi til din målgruppe. Hvad nu hvis dine brugere ikke når alle de vitale aspekter af din app? Det føles som at gnide salt i såret. Dine brugere har brug for en sti, der fører dem i den rigtige retning hele vejen igennem, men den sti skal se lovende nok ud til at tvinge brugerne til at vælge den! Korrekt navigation sikrer netop dette.
At navigere brugere i henhold til dine forventninger starter med at opfylde deres forventninger. Du ønsker, at brugere skal se, hvad du har skabt til dem, men hvordan vil du overbevise dem om at gøre det? Selvfølgelig er en tiltalende app-navigation noget, der fungerer perfekt for dig. Den fører brugere til de aspekter af appen, hvor brugere finder noget af deres interesse. Dette øger deres engagement med applikationen.
Din applikations niche skal udføres på en måde, så den fanger brugernes opmærksomhed med det samme. Hvordan gør du det? Navigation tager ansvaret for at udføre din applikations niche på en effektiv måde. På denne måde lærer brugere, hvad du primært er god til. Men du skal vælge navigeringsmønsteret efter at have undersøgt din apps kategori og målgruppen.
Og derfor giver vi dig her nogle af de bedste praksisser og mønstre, der giver dig en dybdegående idé og klarhed over, hvordan du skaber klar og overbevisende navigation! Lad os navigere videre.
Her vil du lære om de 13 bedste navigationsmønstre, der vil hjælpe dig med at få din app til at skille sig ud:
Konceptet med en hamburger-menu er stadig usikkert og diskutabelt i designerfællesskabet. Nogle foretrækker den, mens andre ønsker at fjerne den fra designkonceptet. Men hvis vi taler om logikken bag hamburger-navigationens struktur, kan de tre enkle linjer, der ligger i hjørnet af siden, vise sig at være ekstremt nyttige uden at forstyrre hele designets æstetik. Hamburger-menuen er et ideelt koncept for UI/UX-designere, da den samler den altomfattende navigation mellem disse 3 linjer, hvilket hjælper publikum med at nyde resten af skærmpladsen. Desuden er dette ikke et nyt koncept inden for mobilapp-design; brugere kender allerede strukturen af dette design. Så du kan forvente, at brugere finder frem til din CTA (Call to Action).
Flydende ikoner er cirkulære ikoner, der bogstaveligt talt svæver over grænsefladen. Den flydende handlingsknap (FAB) udløser den primære handling i din mobilapps UI. Når en bruger kommer til en mobilskærm, der er statisk, kan alt, hvad de kan gøre, er at klikke på FAB og bevæge sig frem i den rigtige retning med den. Hvis prioritering af indhold er dit næste store træk, kan flydende knapikoner hjælpe dig med at fremhæve indholdet af vigtige layouts. Selvom flydende knapper optager lidt plads på skærmen, har de magten til at distrahere brugeren. I sådanne tilfælde kan indholdet nogle gange blive overset. Det er derfor ikke nødvendigt at placere en flydende knap på hver side. Når du bruger flydende ikoner, skal du sikre dig, at det efterlader et positivt indtryk på brugerne.
Gestusbaseret navigation har været dominerende, siden konceptet med touchskærm-mobiltelefonen blev lanceret. Denne navigation giver brugere mulighed for at swipe i enhver retning, de ønsker. Og dette har faktisk fungeret ret godt og vundet popularitet blandt mobilapp-brugere. Hvad der gør gestusbaseret navigation anderledes fra de andre, er, at den er ret nem for en bruger at anvende. Dette UI-designmønster er ret instinktivt for brugere derude; der skal blot en lille smule eksperimentering til.
Der er mange mobilapplikationer, der har flere hierarkiske niveauer i app-navigationen. Et af de mest populære eksempler på sub-navigation er Amazon. Hvis konceptet for din applikation ligner en app som Amazon, der kommer med forskellige kategorier sammen med dens underkategorier, så ville sub-navigation være et ideelt valg for din app-navigation.
Hidtil har vi lagt mere vægt på navigationsmønstre, der gjorde minimal brug af skærmplads. Men fuldskærmsnavigation kommer med et helt modsat koncept. Her bruger designere hele siden til navigation. Denne tilgang virker dog lidt overvældende i forhold til design. Nogle designere er eksperimenterende nok til at dedikere hele skærmen til navigation. Brugere kan blive påvirket, hvis designets visuelle hierarki ikke tages hånd om. Men hvis en designer anvender fuldskærmsnavigation på en klar måde (fjernelse af alle kompleksiteter), bliver det ret klart for en bruger at udforske. Desuden behøver brugere ikke at anstrenge sig for at søge efter noget, da de har alt på en enkelt side lige foran sig.
Tab-navigation vises øverst på Android-apps og nederst på iOS-applikationer. En fane er generelt en række af forskellige muligheder, der fører brugere til den respektive skærm/side. Mange designere bliver forvirrede, når de skal vælge mellem hamburger-menuen, navigationslinjen og fane-menuen. Tab-navigationsmenuer bruges generelt til at få brugere til at skifte mellem alternative sider med samme kontekst. Din Gmail-konto er et ideelt eksempel på dette; du er udstyret med muligheder for at sende mail: 1. mulighed er primære afsendere, 2. er de kontakter, du måske ikke kender.
Dette navigationsmønster indeholder en bjælke med primære ikoner øverst på skærmen. Dette mønster er ret let for brugerens øje, da du ikke behøver at søge her og der; alt er øverst for at blive udforsket yderligere. Desuden er den største fordel ved denne navigation, at den er ret klar og enkel for brugere at udforske. Chancerne for, at brugere bliver forvirrede med navigationen, er intet mindre end lave. Generelt kombineres top-navigation med andre navigationer. Du kan antyde over for brugere, hvad der er de vigtigste ting, der skal henvises til på forhånd, samtidig med at det ser æstetisk ud med hjælp fra et andet navigationsmønster.
Dette er den anden side af mønten: bund-navigation. Vi kan roligt sige, at der er mindre forskelle mellem disse to navigationsmønstre (top og bund). Men den største fordel ved bund-navigation er, at den er ret nem for brugerens fingre, eller rettere tommelfingre. Vi bruger generelt vores tommelfingre mest, når vi bruger mobiltelefoner, og bund-navigation er der, hvor din tommelfinger kan hjælpe dig mest. Med et par tryk er du præcis, hvor du vil være; ingen kompleksitet. Denne funktion gør den ret populær!
Sidebar-navigation er det perfekte mønster for designere, der ønsker at placere flere kategorier, i modsætning til den generelle måde. Med dette mønster kan du fange brugernes opmærksomhed til at udforske bestemte kategorier, da ikonerne får tilstrækkelig plads til at blive vist korrekt uden at forstyrre designets appel. Du kan udnytte dette mønster fuldt ud ved at placere ikonerne, hvor CTA'en ligger, på den måde kan du manipulere brugere til at nå dertil. Dette er blot en af de fordele, vi taler om; jo mere du analyserer, jo mere lærer du.
I gitter-navigation præsenteres flere kategorier samtidigt; brugere har et valg om, hvilken de vil udforske først. Et populært eksempel på dette mønster er Spotify. I dette navigationsmønster skal du tage dig af farveskemaer og skrifttyper, da brugere nu har mulighed for at udforske flere kategorier samtidigt. Du skal sikre dig, at brugerne føler sig tvunget til at besøge hver eneste af disse og endelig nå CTA'en.
Stemme-navigation bruges stadig ikke så almindeligt som andre UI-mønstre; det er stadig en udviklende teknologi, men bestemt en lovende en. Du kan drage fordel af det ved at implementere denne teknologi for din brugerbase. Til det skal brugere give deres stemmeinput for at få deres stemme identificeret. Derefter er det en leg for dem at søge efter noget i den applikation; alt, hvad de skal gøre, er at "tale", og appen vil præsentere det for dem. Ingen grund til at udforske menuer, bjælker eller ikoner.
Du vil generelt se to typer brugere: 1. Dem, der er fristet af et godt design og udforsker appen, og 2. Dem, der blot ønsker at søge efter det, de leder efter. Du bør overveje at ansætte UI/UX-designere, der kan bruge det på en klog måde for at opnå stor opmærksomhed, da brugere forventer at blive behandlet bekvemt, mens de udforsker applikationen. En velfungerende søgefelt vil gøre en stor forskel. Så hvis en søgefelt er alt, hvad der skal til for at se bemærkelsesværdige forbedringer i resultaterne, hvorfor så ikke implementere det?
Kort-navigation er en af de mest gunstige muligheder, hvis du vil vise flere elementer som tekst, billeder og links alt på ét sted. De fås i alle former og størrelser. Brugere har brug for indhold i form af vejledning for at lære mere om appen og dens funktioner. Her er kort perfekte til at repræsentere indhold på en personlig måde ved at samle enkelte stykker information ét sted. Det stopper ikke der; kort er absolut tilpasningsdygtige til forskellige skærmstørrelser, hvilket gør dem til et topvalg for responsiv app-navigation.
Sammenligning af Populære Navigationsmønstre
| Mønster | Fordele | Ulemper | Bedst egnet til |
|---|---|---|---|
| Hamburger-menu | Pladsbesparende, samler mange links. | Kan skjule vigtige funktioner, færre opdagelser. | Apps med mange menupunkter og begrænset plads. |
| Tab-navigation | Altid synlig, let at skifte mellem hovedsektioner. | Begrænset antal punkter (typisk 3-5). | Apps med få, men centrale hovedsektioner. |
| Bund-navigation | Nem at nå med tommelfingeren, altid synlig. | Begrænset antal punkter, kan dække indhold. | Apps med fokus på hurtig adgang til primære funktioner. |
| Søgebaseret navigation | Effektiv for brugere der ved, hvad de søger. | Mindre effektiv for "udforskende" brugere. | Indholdstunge apps med specifikke søgebehov. |
7 Bedste Praksisser Enhver Designer Bør Følge
Lige fra indholdsklarhed til design og klog placering af ikoner – du vil lære alt, hvad du behøver for at skabe et mesterværk. Her er de 7 bedste praksisser, du bør følge, når du designer mobilapp-navigation:
1. Læsbarheden af Indhold er Afgørende
Når det kommer til indhold i mobilapplikationer, bliver spørgsmålet om indholdets læsbarhed undertiden ikke taget hånd om. Navigationen i en applikation er for det meste baseret på indhold, uanset hvilket mønster af mobilapp-navigation det er. At lade brugere kæmpe med at læse indhold, hvad enten det er informativt eller blot en tekst på et ikon, vil have en negativ indvirkning på appens engagement. Dette er et af de almindelige problemer, publikum står over for på grund af forskellen i skærmstørrelse. Det er altid en god idé at give dit bedste, når du prototyper din apps design, herunder navigation, for at se, hvordan brugerne interagerer med det.
Rækkefølgen af din navigationsmenu bliver ofte overset. Ironisk nok er det den vigtigste faktor, der påvirker brugernes tanker om din app. Formålet med bevidst at indstille rækkefølgen af din navigationsmenu er at afspejle dine mål. Hvis du for eksempel vil have brugere til at nå appens nichefunktion først, vil du indstille rækkefølgen derefter. Brugere har generelt en tendens til at være mere opmærksomme på information, der præsenteres for dem før andre aspekter af appen. Så hvis du placerer din applikations niche før nogle mindre vigtige aspekter, øges chancerne for brugerens interesse i dit projekt.
3. Tag Højde for Brugerens Finger- og Håndpositionering
Dette gør en kæmpe forskel. Forestil dig, at du gentagne gange klikker på et tilfældigt link, og det åbner ikke; din oplevelse bliver forfærdelig på ingen tid. Du skal holde dine ikoner og knapper store og klare nok, så en bruger nemt kan udforske videre. Hvis dette aspekt ikke tages i betragtning, kan teamets hårde arbejde med at give en så holistisk oplevelse gennem appen møde fiasko. Ideelt set passer knapper på 10 mm godt til appen, og brugere vil heller ikke finde problemer med det. Jo mere personlig og opdateret oplevelse du tilbyder, jo mere interesse vil brugere have i dit projekt. At holde sig opdateret med designtrends er altid fordelagtigt.
4. Vælg Labels og Ikoner Meningsfuldt
Hvis vi taler om ikonerne, er deres relevans for appens niche ret vigtig. Prøv at holde det simpelt og let at forstå, så hvis en bruger når et bestemt ikon i appen, kan han nemt gætte, hvad ikonet handler om. Den næste vigtige ting at tage sig af er størrelsen på menulabels; du behøver ikke at krympe skrifttypestørrelsen på indholdet, og juster indholdet og menulabels på en passende måde.
5. Reducer Kognitiv Belastning
Du har arbejdet på at give dine brugere en skræddersyet oplevelse af din applikation. Hvis det hårde arbejde bag designet af appen ikke afspejles i selve appen, så forestil dig situationen? Alt dit hårde arbejde kan være spildt. Sigt efter at holde alt simpelt og let at forstå for brugerne. Chancerne for, at brugere nyder appen, fordobles, når du har holdt alt glat og simpelt. Gør deres rejse gladere og lettere! En god brugeroplevelse er nøglen.
6. Ryd op i Skærmpladsen
Nogle gange kan jagten på visuel tiltrækningskraft få designere til at overdrive visse ting, hvilket resulterer i et rodet design. Nogle gange er det bedste, du kan gøre for at få app-designet til at se attraktivt ud, at holde det rent. Appens designlayout bør ikke se overfyldt ud, da det ikke kun får designet til at se rodet ud, men det fjerner også relevansen. Så gør det bevidst.
7. Tilføj en Søgefelt
Selvom designet af din navigation er ret simpelt og klart, er der altid en lille chance for, at brugere søger hjælp. Efterlad aldrig en sten uvendt for at give dit publikum en personlig oplevelse; husk, én mangel er nok til at mindske brugerengagementet. Så sørg altid for at tage dig af alt, der gør brugerne tilfredse. Et velplaceret søgefelt forbedrer funktionaliteten betydeligt.
Det primære mål med mobilapp-navigation er at guide brugere problemfrit gennem appens indhold og funktionaliteter, så de nemt kan finde det, de søger, og udføre ønskede handlinger. En god navigation sikrer en intuitiv og friktionsfri brugerrejse, hvilket øger engagement og tilfredshed.
UX er afgørende for mobilapp-navigation, fordi den direkte påvirker, hvordan brugere interagerer med og opfatter appen. En dårlig navigation kan føre til frustration og tidlig afinstallation, mens en veldesignet UX-navigation fremmer engagement, gør appen nem at bruge og sikrer, at brugere opdager og anvender appens fulde potentiale. Det er fundamentet for en positiv oplevelse.
Der findes ikke ét "bedste" navigationsmønster, da det ideelle valg afhænger af appens specifikke formål, indholdsmængde, målgruppe og de primære funktioner. For apps med mange kategorier kan hamburger-menuer eller sidebar-navigation være passende. For apps med få, men centrale funktioner, er tab- eller bund-navigation ofte mere effektive. Analyser din app's behov og brugernes adfærd for at træffe det bedste valg.
Kognitiv belastning refererer til den mentale anstrengelse, en bruger skal yde for at forstå og interagere med en app. I forbindelse med navigation betyder det, hvor let eller svært det er for en bruger at finde rundt og forstå appens struktur. En høj kognitiv belastning opstår, når navigationen er rodet, ulogisk eller for kompleks, hvilket fører til forvirring og frustration. Målet er at reducere kognitiv belastning for at skabe en ubesværet interaktion.
For at teste effektiviteten af din app-navigation kan du anvende brugertest. Observér virkelige brugere, mens de udfører specifikke opgaver i appen. Spørg dem om deres oplevelse, og læg mærke til, hvor de tøver eller har svært ved at finde ting. A/B-test af forskellige navigationsmønstre eller elementer kan også give værdifuld indsigt. Analyser data om brugeradfærd, såsom klikrater og gennemførelsesprocenter, for at identificere forbedringsområder.
Så, her er vi efter denne omfattende gennemgang af mobilapp-navigation. Mobilapp-navigation er et ret interessant og omfattende koncept, og vi håber, at vi har været til hjælp for dig indtil videre. En veludført navigation er ikke blot en teknisk detalje; den er hjørnestenen i en succesfuld mobilapp, der kan fastholde brugere og drive vækst. Husk, at kernen i god navigation er at skabe et ubesværet og glædeligt brugerflow.
Hvis du vil læse andre artikler, der ligner Mobilapp-Navigation: Din Guide til Perfekt Brugerflow, kan du besøge kategorien Mobilapps.