5 UX-mønstre, der hjælper dine brugere med at navigere

Måske er den vigtigste ting at huske på, når man designer en mobilapplikation, at sikre sig, at den er både nyttig og intuitiv. Hvis appen ikke er nyttig, har den ingen yderligere værdi, og ingen har nogen grund til at bruge den. Hvis det er nyttigt, men medfører en stejl indlæringskurve, gider folk ikke at lære at bruge den. Godt UI-design adresserer begge disse designproblemer, de formaliserede bedste fremgangsmåder til løsning af almindelige designproblemer er kendt som designmønstre. At forstå og genkende dagens nyeste og mest trendy designmønstre kan give dig en enorm opstart i branchen med mobilapplikationsdesign, så din næste app bliver frisk og konkurrencedygtig.

Dette indlæg fokuserer på designmønstre, der bruges til at navigere i en mobilapplikation. Uanset hvilken type applikation, du designer, har du brug for brugere til at navigere i de forskellige funktioner på appen effektivt og effektivt - hvordan brugere navigerer gennem din app kan bestemme, om de vil lide den nok til at fortsætte med at bruge den.

Eksempler på, hvordan forskellige apps implementerer walkthroughs

1. Walkthroughs & Coach Marks

Nyttelighed er nøglen til en vellykket app. Nogle gange betyder det dog en temmelig kompliceret applikation med mange forskellige typer værktøjer og indhold. En god måde at løse dette problem er ved en indledende gennemgang eller en tutorial for at demonstrere, hvordan hver funktion fungerer. Secret og Youtube fremhæver vigtige sektioner i brugergrænsefladen med coach-mærker, der forklarer, hvad de gør, mens Carousel og Duolingo viser et slideshow, der går brugerne gennem den typiske brugeroplevelse. Dette designmønster kan også bruges til at indsamle yderligere oplysninger fra brugeren, hvilket giver mulighed for en lettere initial registrering / tilmeldingsoplevelse og mere intuitiv integration i appen.
Hvis de forskellige funktioner i din app ikke umiddelbart er åbenlyse for brugeren, er gennemgang og coach-mærker gode designmønstre for at forenkle brugeroplevelsen og appens kompleksitet.

2. Indholdsbaseret navigation

Uanset hvilken slags indhold du vil inkludere i designet til din app, vil du altid gøre brugeroplevelsen og flowet af det indhold så flydende som muligt. Indholdsbaseret navigation er et designmønster, der bruges til at inkorporere sømløse overgange mellem oversigt og detaljerede tilstande. Tinder giver et godt eksempel på dette mønster: du kan skifte mellem to tilstande på en brugerprofil - den vigtigste oversigtstilstand, der i det væsentlige er et billede, der udfylder det meste af skærmen, og en detaljeret visning, der gør billedet kun lidt mindre og inkluderer nogle faktuelle oplysninger. Du kan skifte mellem begge tilstande ved blot at klikke på skærmen i begge visninger samt skubbe gennem billeder, uanset hvilken tilstand du vælger.

3. Gliderne

I Uber kan du se, at der er fire typer ride-tjenester, og i stedet for at kræve fire separate skærme for at levere de nødvendige oplysninger, bruger Uber skyderens designmønster for at muliggøre let skift mellem hver ride-service. Dette genererer en problemfri overgang mellem indstillinger med en finger-svejse, hvilket gør visningen af ​​disse funktioner meget intuitiv for brugeren.

4. Popovers

Undertiden kan underretninger eller yderligere oplysninger midt i brugen af ​​appen hjælpe brugerne med at interagere bedre med appen. I dette tilfælde kan brugere muligvis se de relevante oplysninger uden at miste deres nuværende sted i brugergrænsefladen. Popover-designmønsteret kan løse dette problem på flere måder:
 Popovers “pop-up”, når brugeren udfører en bestemt handling eller kommer til et bestemt sted i appen, og viser de relevante oplysninger / kontroller, der er knyttet til den pågældende handling / sted i brugergrænsefladen.

Det originale indhold eller sted i appen er stadig synlig i baggrunden, men popoveren giver dig muligheden for at finpusse visse ting eller lære om, hvad der kommer næste. Popover får brugerens opmærksomhed og giver vigtige underretninger, hvor det er nødvendigt. Samtidig kan brugerne imidlertid let afvise popoveren og vende tilbage til det, de oprindeligt gjorde, ved blot at tappe eller skubbe på skærmen

Et eksempel på popovers kan ses i den officielle TED-app, der har en popover-afspilningskontrol, der falder ud fra baggrunden, så brugerne kan interagere med denne kontrol uden at miste deres plads i indholds browseren. Secret og Swarm bruger popovers til at forklare, hvad der vil ske dernæst, hvis brugerne fortsætter med en bestemt handling.

5. Slidesouts, Sidebars & skuffer

Sammenlignet med computere og tv'er har mobiltelefoner relativt små skærme, hvilket betyder, at en af ​​udfordringerne ved mobildesign er at passe en masse information til et lille brugergrænseflade. For at undgå rod fra en stor mængde information på en enkelt skærm på én gang kan du bruge lysbilleder, sidebjælker og skuffer til at navigere mellem forskellige dele af appen. Disse mønstre er sekundære sektioner af applikationen, såsom kort, chat, brugerprofiler osv., Gemt i sammenklappelige “hamburgermenuer”, pileknapper, der glider ud eller sideskuffer. På denne måde kan brugerne interagere med de vigtigste oplysninger på hver skærm ved at vælge fokusområdet fra disse skjulte paneler.

Har du brugt nogle af de mønstre, vi har nævnt ovenfor, og har de bidraget til at øge dit daglige antal aktive brugere? Lad os vide.

Du kan følge os på Facebook / LinkedIn / Twitter

Oprindeligt offentliggjort på monsoonfish.com.

Denne historie er offentliggjort i The Startup, Medium's største iværksætterpublikation efterfulgt af 277.994 personer.

Abonner for at modtage vores tophistorier her.