Utility Navigation Hvordan det påvirker brukeropplevelsesdesign

For å designe en effektiv og brukervennlig navigasjon, trenger vi ikke bare å tenke på hvordan gruppere innholdet vårt i velstrukturerte menyer slik at brukerne enkelt kan finne det de vil ha, men også om hvordan de skal utform verktøyene de trenger for å samhandle med nettstedet

Navigasjon som ikke er strengt knyttet til innholdet, og hjelper brukerne til å utføre forskjellige handlinger, kalles verktøynavigering, og det er et mindre diskutert men enormt viktig aspekt av brukeropplevelsesdesign. Søkefelt, innloggings- og påmeldingsskjemaer, abonnere, deling og utskriftsknapper, handlekurver, kontekstuelle menyer og verktøy som tillater brukere å bytte språk eller skriftstørrelse, er typiske eksempler på verktøynavigasjon.

Å designe dem er ikke så lett som det ser ut til å være ved første øyekast krever omtanke for å finne ut hvilke elementer vi trenger, hvor de skal plasseres og hvordan de skal vises for å sikre at våre besøkende raskt kan finne dem og forstå hvordan de fungerer.

Hvordan Utility Navigation påvirker UX

Når vi utformer verktøynavigasjon, må vi bestemme hvordan vi vil at brukerne skal samhandle med nettstedet vårt. Vi må gi dem en interaksjonsstruktur som passer til våre forretningsmål, fører brukere gjennom kundenes reise, gir dem enkle å forstå alternativer, og gir dem en hyggelig brukeropplevelse.

Først av alt, de må kunne utføre de handlingene de vil ha raskt. Hvis vi gjør dem i stand til å gjøre det, vil kundetilfredsheten vokse, og glede brukere pleier å bruke mer tid og mer penger på nettsteder.

Hjemmesiden til AirBnB følger dette UX-prinsippet, og den øverste menyen inneholder bare verktøyverktøy. Det er ikke en vanlig løsning, men hvis vi tar en titt på AirBnBs utrolige vekstraten, er det det perfekte valget for dem.

De 4 øverste menypunktene retter seg mot de 4 viktigste personasene som vanligvis besøker AirBnBs nettsted: folk som er interessert i å bli vert (“Bli vert”), folk som vil løse et problem som fant sted mens de brukte tjenesten (“Hjelp”), nye og tilbakevendte brukere (“Melde deg på” og “Logg Inn”). AirBnBs bruksfokuserte hjemmeside inneholder også en rask søkefelt som er et viktig verktøy på en leieleilighet for overnatting.

for det andre, Brukerne trenger ikke overflødige verktøy, da for mye rot gjør distraher oppmerksomheten og reduserer fokus. Hvilke verktøy er nødvendige i vår navigasjonsverktøy og hva som ikke er avhengig av innholdet på nettstedet vårt. For eksempel kan det være nyttig å inkludere en utskriftsvisning på en blogg eller en nyhetsside, men den samme funksjonen kan være en unødvendig forstyrrelse på et forumbrett eller en nettside for sosiale medier..

Washington Post for eksempel viser verktøynavigering på sine enkelt innleggssider annerledes enn på hjemmesiden. På denne måten oppfyller brukerne kun verktøyverktøy som er relevante, og blir ikke plaget med alternativer som de ikke vil bruke i det hele tatt.

Det er 3 verktøynavigasjonselementer som besøkende kanskje vil bruke hele nettstedet. Disse er smart inkludert i den faste øverste linjen (søkeverktøy, “Logg inn”, og “Abonnere”), men brukerne trenger ikke å tenke på alternativer relatert til enkelt innlegg som “Leseliste” når de surfer på hjemmesiden eller en av kategorisidene.

For det tredje, brukerne må raskt forstå hva de kan gjøre på nettstedet vårt. Besøkende vet ikke nødvendigvis hva de vil, så vi må alltid gi dem informasjon om alternativene de har.

Hvis du ser på skjermbildet under, kan du se at The New York Times informerer brukerne om tilgjengeligheten av 3 forskjellige utgaver: amerikansk, Internasjonal, og kinesisk, og gjør det også mulig for dem raskt bytte mellom de tre. Dette flotte eksempelet på smart verktøynavigasjon viser brukerne mindre åpenbare alternativer de antagelig ikke ville finne på egenhånd, på en ubeskrivelig og elegant måte.

Finn det beste stedet

Det er typiske plasseringer for verktøynavigasjon der brukerne intuitivt ser etter disse verktøyene, som det er det de har vant til på de fleste nettsteder. Brudd på webkonvensjonskonvensjoner regnes som dårlig brukeropplevelse, og det gjelder spesielt for navigering av verktøy som i de fleste tilfeller handler mer om brukervennlighet enn kreativitet.

Siden navigering av navigasjon er sekundær til innholdsbasert navigering på de fleste nettsteder, plasseres den ofte i mindre fremtredende men fortsatt synlige områder. Dette betyr vanligvis (1) øverste høyre hjørne av nettsteder og (2) nedre del av bunnteksten. Det er en god ide å følge disse konvensjonene, som Dette er de stedene hvor de fleste brukere først ser etter verktøyverktøy.

Som du ser nedenfor, har Reuters plassert de fleste verktøyverktøyene i disse to typiske områdene, øverst til høyre på siden og nederste del av bunnteksten under innholdsbasert navigasjon. Den unike løsningen her er den faste ekstra bunnteksten med 2 verktøy som designerne trodde å være de viktigste: “Logg inn eller registrer deg” og “Siste fra My Wire”.

Det er interessant å merke seg at det ekstra verktøynavigasjonsområdet fortsatt er plassert i en slags bunntekst der brukerne normalt ville se etter lignende verktøy, så Reuters 'designere var kreativ på en måte men følger fortsatt webdesignkonvensjoner for å opprettholde brukervennlighet.

Bygg en logisk struktur

Gruppering av verktøyverktøy til en logisk struktur er avgjørende hvis vi ønsker å bygge et nettsted med høy konverteringsfrekvens. Dette kan være en utfordring, selv om vi ikke ønsker å gi brukerne mange alternativer, men Amazon tar kompleksiteten til verktøynavigering til neste nivå. Amazon har en utrolig komplisert navigering med mange muligheter, men hvis vi bruker Amazon regelmessig nok, ser det ikke ut som det. Dette er det magiske av smart design.

De plasserte ikke bare verktøynavigasjon øverst til høyre der brukerne forventer å finne den, men de delt også opp i 3 hovedgrupper: (1) en søkefelt, (2) brukerrelatert informasjon (under søkefeltet ), og (3) handlinger som brukere kan utføre på nettstedet.

Det er smart fordi, takket være de visuelle tegnene som handlekurven eller søkeikonet, kan kundene bestemme seg for å se på hvilken gruppe de vil bruke, og fra da av kan de ignorere de to andre. Det er bare en gruppe (“Kontoen din”, “Prøv Prime”, “Kurv”, og “Ønskeliste”) som har undermenyer som også er logisk strukturert, og de forskjellige undermenygruppene er delt opp med diskrete men synlige separatorer for å hjelpe brukerne til raskt å finne det de vil ha.

Lag en effektiv visuell design

Den visuelle utformingen av effektiv verktøynavigasjon må følge det berømte KISS-prinsippet (Keep It Simple, Stupid). Det anbefales å gi ikoner med tekstetiketter, gjøre kontroller ser ut som kontroller, og visuelt understreke de viktigste handlingene. Det kan også være en god ide å skille mellom bruks- og innholdsbasert navigasjon ved å bruke en litt annen design.

To gode eksempler på effektiv visuell design finnes på Walmart og Etsys nettside. Designere lagde verktøynavigasjon øverst på begge sider, og markerte den med farger som varierer fra resten av navigasjonen, Walmart med en blå bakgrunn og Etsy med blå skrifter.

Begge steder understreke de viktigste brukerhandlinger med ulike visuelle designelementer, Walmart bruker gul for søk og påloggingsknappene, mens Etsy gir en diskret blå ramme til påloggingsknappen, og inkluderer et grått handlekurv-ikon over handlekurvmenyen.

Dette er det eneste stedet hvor Etsy bruker et ikon i verktøylinjen, mens Walmart viser et ikon ved siden av hvert element, men glemmer fortsatt ikke å inkludere de nødvendige tekstetikettene ved siden av ikonene.