Utility Navigation Hvordan det påvirker brugeroplevelsesdesign

For at designe en effektiv og brugervenlig navigation, behøver vi ikke kun at tænke på hvordan gruppere vores indhold i velstrukturerede menuer for at gøre det muligt for brugerne nemt at finde det, de ønsker, men også om hvordan man skal design de værktøjer, de skal bruge til at interagere med webstedet

Navigation, der ikke er strengt relateret til indholdet, og hjælper brugerne med at udføre forskellige handlinger, kaldes brugsnavigation, og det er et mindre diskuteret men meget vigtigt aspekt af brugeroplevelsesdesign. Søg barer, login og tilmeldingsskemaer, abonnere, deling og udskrivning knapper, indkøbsvogne, kontekstmenuer og værktøjer, der giver brugerne mulighed for at skifte sprog eller skriftstørrelse er typiske eksempler på brug af navigation.

Designe dem er ikke så let som det ser ud til at være ved første øjekast kræver overvejelse for at finde ud af, hvilke elementer vi har brug for, hvor de skal placeres og hvordan de skal vises for at sikre, at vores besøgende hurtigt kan finde dem og forstå, hvordan de virker.

Hvordan Utility Navigation påvirker UX

Når vi designer navigationsværktøjer, skal vi beslutte, hvordan vi ønsker, at vores brugere skal interagere med vores websted. Vi skal give dem en interaktionsstruktur der passer til vores forretningsmål, fører brugerne gennem kundens rejse, giver dem nemme at forstå muligheder og giver dem en behagelig brugeroplevelse.

Først og fremmest, de skal være i stand til hurtigt at udføre de handlinger, de ønsker. Hvis vi gør det muligt for dem at gøre det, vil kundetilfredsheden vokse, og tilfredse brugere har tendens til at bruge mere tid og flere penge på hjemmesider.

Hjemmesiden til AirBnB følger dette UX-princip, og dets topmenu indeholder kun værktøjsværktøjer. Det er ikke en sædvanlig løsning, men hvis vi tager et kig på AirBnBs utrolige væksthastighed, er det det perfekte valg for dem.

De 4 øverste menupunkter retter sig mod de 4 vigtigste personas, der normalt besøger AirBnBs websted: Folk, der er interesserede i at blive vært (“Bliv værter”), folk der vil løse et problem, der fandt sted, mens de brugte tjenesten (“Hjælp”), nye og tilbagevendende brugere (“Tilmelde” og “Log på”). AirBnBs brugsfokuserede startside indeholder også en hurtig søgefelt, der er et afgørende redskab på en boligleje hjemmeside.

For det andet, Brugere behøver ikke overflødige forsyningsselskaber, da alt for meget rod udleder opmærksomhed og reducerer fokus. Hvilke værktøjer er nødvendige i vores brugervenlighed og hvad der ikke er afhængig af arten af ​​vores hjemmeside. For eksempel kan det være nyttigt at medtage en udskrivningsvisning på en blog eller et nyhedswebsted, men det samme kan være en unødvendig distraktion på et forumkort eller en socialmediewebsted.

Washington Post viser f.eks. Brugsnavigering på dens enkelte indlægssider anderledes end på hjemmesiden. På den måde kan brugerne kun opfylde hjælpeværktøjer, der er relevante, og er ikke plaget med muligheder, som de ikke vil bruge i alligevel.

Der er 3 brugsnavigationsartikler, som besøgende måske vil bruge hele webstedet. Disse er medtages smart i den faste top bar (søgeværktøj, “Log ind”, og “Tilmeld”), men brugere behøver ikke at tænke på muligheder relateret til enkelte indlæg som f.eks “Læseliste” når de besøger hjemmesiden eller en af ​​kategorisiderne.

For det tredje, brugerne skal hurtigt forstå, hvad de kan gøre på vores websted. Besøgende ved ikke nødvendigvis, hvad de vil have, så vi skal altid give dem information om de muligheder, de har.

Hvis du kigger på skærmbilledet nedenfor, kan du se, at The New York Times informerer brugerne om tilgængeligheden af ​​3 forskellige udgaver: amerikansk, International, og kinesisk, og gør det også muligt for dem Skift hurtigt mellem de tre. Dette gode eksempel på smart navigation giver brugerne mindre indlysende muligheder, de sandsynligvis ikke ville finde på egen hånd på en ikke-krænkende og elegant måde.

Find det bedste sted

Der er typiske placeringer til brugsnavigation, hvor brugerne intuitivt leder efter disse værktøjer, da det er det, de har vænnet sig til på de fleste websteder. Brydning af webdesignkonventioner betragtes som dårligt brugeroplevelsespraksis, og det gælder især for brugsnavigation, der i de fleste tilfælde handler mere om brugervenlighed end kreativitet.

Da brugsnavigering er sekundær til indholdsbaseret navigation på de fleste websteder, placeres den ofte i mindre fremtrædende men stadig synlige områder. Dette betyder normalt (1) øverste højre hjørne af hjemmesider og (2) nederste del af sidefoden. Det er en god ide at følge disse konventioner, som Dette er de steder, hvor de fleste brugere først søger værktøjsværktøjer.

Som du kan se nedenfor har Reuters placeret det meste af dets hjælpeværktøjer i disse to typiske områder, øverste højre hjørne af siden og nederste del af footeren under indholdsbaseret navigation. Den unikke løsning her er den faste ekstra footer med 2 hjælpeposter, som designerne troede at være de vigtigste: “Log ind eller registrer” og “Seneste fra My Wire”.

Det er interessant at bemærke, at det ekstra værktøjsnavigationsområde stadig er placeret i en form for footer, hvor brugerne normalt søger lignende værktøjer, så Reuters 'designere var kreativ på en måde men Stadig fulgt webdesign konventioner for at opretholde brugervenlighed.

Byg en logisk struktur

Gruppering af værktøjsværktøjer til en logisk struktur er afgørende, hvis vi ønsker at opbygge et websted med en høj konverteringsfrekvens. Dette kan være en udfordring, selvom vi ikke ønsker at give brugerne mange muligheder, men Amazon tager kompleksiteten af ​​brugervenligheden til det næste niveau. Amazon har en utrolig kompliceret brugsnavigering med mange muligheder, men hvis vi bruger Amazon regelmæssigt nok, ser det ikke ud til det. Dette er magien i smart design.

De placerede ikke kun brugsnavigering i øverste højre hjørne, hvor brugerne forventer at finde det, men de opdelte det også i 3 hovedgrupper: (1) en søgelinje, (2) brugerrelaterede oplysninger (under søgefeltet ), og (3) handlinger, som brugere kan udføre på webstedet.

Det er smart, fordi kunderne, takket være de visuelle signaler som indkøbskurven eller søgeikonet, kan bestemme i et blik et øje, hvilken gruppe de vil bruge, og fra da af kan de ignorere de to andre. Der er kun én gruppe (“Din konto”, “Prøv Prime”, “Kurv”, og “Ønskeseddel”) der har undermenuer, der også er logisk strukturerede, og de forskellige undermenugrupper er opdelt af diskrete men synlige separatorer for at hjælpe brugerne med hurtigt at finde det, de vil have.

Lav et effektivt visuelt design

Det visuelle design af effektiv brugsnavigation skal følge det berømte KISS-princip (Keep It Simple, Stupid). Det anbefales at give ikoner med tekstetiketter, gøre kontroller ligne kontroller og visuelt understrege de vigtigste handlinger. Det kan også være en god idé at skelne mellem brugbar og indholdsbaseret navigation ved hjælp af et lidt andet design.

To gode eksempler på effektivt visuelt design findes på Walmart og Etsys hjemmeside. Designere placerede brugsnavigering øverst på begge sider og fremhævede det med farver, der varierer fra resten af ​​navigationen, Walmart med en blå baggrund og Etsy med blå skrifttyper.

Begge steder understrege de vigtigste brugerhandlinger med forskellige visuelle designelementer, Walmart bruger gul til knapperne Søg og Log på, mens Etsy giver en diskret blå grænse til knappen Log på, og indeholder en grå indkøbskurv ikon over kurvmenuen.

Dette er det eneste sted, hvor Etsy bruger et ikon i dens hjælpemenu, mens Walmart viser et ikon ved siden af ​​hvert element, men glemmer stadig ikke at medtage de nødvendige tekstetiketter ved siden af ​​ikonerne.