Det er to aspekter for å designe navigasjon: Hvordan skal innholdet struktureres, og hvordan skal strukturen presenteres for brukeren. Tydeligvis er disse ikke separate, og strukturen (vanligvis) informerer presentasjonen.

Navigasjon innebærer kurering - selv om innholdet som må inkluderes, allerede er avgjort - hvordan innholdet er gruppert, hvordan grupperingene relaterer seg til hverandre, og hvordan brukeren beveger seg mellom dem, er det som utgjør navigasjonen.

Menyen, uansett hvilken form det krever, gir skilting for navigasjonen. Det forteller brukeren hvor de er på nettstedet og hvordan man kommer til et annet sted.

John Gall

John Gall er trolig best kjent for hans bokomslagdesign, og hans side spiller på dette. I stedet for en standardmeny får vi et rutenett av 'paperbacks', som hver er et klikkbart miniatyrbilde som åpner informasjon om det valgte prosjektet. Miniatyrbildet med hans initialer åpner informasjon om ham.

Hvis du vil bruke en tilnærming som dette, må du sørge for at arbeidet som presenteres er av høyeste kvalitet

Det er en veldig enkel, grunnleggende design både visuelt og i oppførsel. Den har lite tekstinnhold utover den aller korteste informasjonen om hvert stykke arbeid, og eksterne og sosiale medier. Dette nettstedet handler om arbeidet; Hvis du vil ha meninger og forklaringer, er det andre steder som har dem.

Og likevel føles det ikke kaldt, altfor formelt, eller mangler i personlighet. Navigasjonen, som den er, føles ikke vanskelig eller uklar. Innholdet er navigasjonen, og dette gir det en fin praktisk, nedsenkende, følelse.

Dessverre er det litt skuffende på mobilen når skrivebordet oppførsel er forlatt til fordel for tidligere, neste og indeks knapper øverst på skjermen. Tvilsomt skuffende, ettersom skrivebordet atferd ville fungere perfekt godt på mobilen.

Denne strippet tilbake stilen er vanskelig å trekke av, da den er helt avhengig av arbeidets kaliber. Hvis du vil bruke en tilnærming som dette, må du sørge for at arbeidet som presenteres er av høyeste kvalitet.

johngall

Jordan Sowers

Jordan Sowers 'porteføljesiden er en annen god ta på miniatyrbilder av arbeid som navigasjon. Her er bildene lagdelt på hverandre og brukeren ruller for å bevege seg gjennom stakken. Ved å klikke på et element åpnes en modal med flere bilder og noen detaljer. Ruller gjennom til bunnen av bunken avslører korteste karriere og kontaktinformasjon.

Oppførelsen på mobilen er identisk, i det minste så langt brukeren er klar over det, som er godt å se.

Siden hver modal også inneholder lenker til alle andre innholdsmodeller, så vel som en nær knapp, føles alt innhold umiddelbart tilgjengelig hvor som helst. Navigasjonen er enkel og klar, enkel å bruke, men forskjellig fra det vanlige, noe som gjør nettstedet minneverdig. Det fremkaller en følelse av brukerengasjement utover bare å klikke på en knapp, ved å etterligne handlingen med å bla gjennom en stabel med fysiske porteføljeprints.

Faktisk imponerer smartheten til nettstedets design, og den polerte utførelsen, så mye som noe av det arbeidet det viser.

jordansowers

Åpne kontinenter

Åpne kontinenter er en samling kortfilmer fra hele verden, og en sakte, roterende verden danner grunnlaget for navigasjonen. Et ikon øverst til venstre skifter visninger mellom globusnavigasjonen og en enkel horisontal liste over lenker.

Listen gir brukeren en enklere prosess, men det virker mangelfull. Tilgjengelighet er en god grunn til å gi et forenklet alternativ, men det er svært liten forskjell mellom de to her så langt som tilgjengelighet er bekymret. Instruksjonen under kloden forråder også en mangel på tillit til navigasjonsdesignet, eller det er kanskje mangel på tillit til brukerens intelligens.

Navigasjon bør aldri være så uklar at brukeren ikke kan gjøre det for seg selv

Dette er skuffende. Navigasjon bør aldri være så uklar at brukeren ikke kan gjøre det for seg selv, og i dette tilfellet er det ikke; hjelpen er ikke nødvendig. Den animerte kloden ser ut som det er ment å bli interaksjon med. I mangel av en tradisjonell meny, vil brukeren utforske skjermen.

Den mobile versjonen bruker ikke den spinnende kloden, bare den-denne gangen vertikal liste over historier som skal rulles gjennom og velges.

På et plan kan det være en god ide å bruke en klokke her, men det fungerer bra, og det er pent gjort. 'Exploring' Globen skaper en følelse av sammenheng; Lysene som er synlige på landet, og skylaget over jorden er flotte detaljer som trekker brukeren inn. Effekten er å føle seg som om du reiser til landene historiene er fra.

opencontinents

Glamuzina Arkitekter

Glamuzina Arkitekter bruk hele hjemmesiden som en meny med de tre hoveddelene som er spredt over skjermen. Prosjektets hovedside viser utvalgte prosjekter, som tekstkoblinger og så store miniatyrer.

Fordi hele siden er menyen, er det ikke nødvendig å ty til en hamburger-meny på mobilen. Mens det er noen nødvendige forskjeller i oppsett, er mobilopplevelsen visuelt konsistent med skrivebordet.

Alt i alt er opplevelsen her bra, og menyen er interessant, integrering pent med det generelle utseendet på nettstedet. Det er imidlertid et par problemer som svekker litt.

Det er en uorganisert følelse for navigasjonen på steder, og du blar gjennom de ulike prosjektene, det er lett å miste lagrene dine. Dette er egentlig ikke et problem, siden hver side har lenker til sin overordnede seksjonsside og hjemmesiden.

Mer problematisk er at eksterne koblinger og noen (ikke-meny) interne lenker åpnes i det nåværende vinduet, uten å returnere bortsett fra nettleserens tilbakeknapp. I beste fall forstyrrer dette innholdsstrømmen, noe som fører til en uoverensstemmende opplevelse, og i verste fall tar brukeren bort fra nettstedet.

Brukeren kan fortelle nettleseren å åpne lenken i en ny kategori eller et vindu, men egentlig burde de ikke.

Til tross for dette er det fortsatt et godt nettsted. Bruken av prikkpapirets bakgrunn og monospace-type skaper en strippet tilbake, skjelettflekk, slik at arbeidet virkelig skiller seg ut. Navigasjonen og menyen er fet og føles moderne med en åpen, snarere enn lineær, fortellende.

glamuzinaarchitects

Naviger ansvarlig

Hittil har områdene som er omtalt vært for presentasjon av kreativt arbeid, som naturlig nok tillater eller krever en mer kreativ tilnærming. Hva med flere corporate-stil nettsteder?

Naviger ansvarlig har blitt opprettet for Danske Shipping for å skissere hva medlemmene gjør for å redusere virkningen av shippingindustrien på miljøet. Som sådan involverer det mange fakta og figurer, som, mens det er viktig, kan gjøre for ganske tørt innhold.

Nettstedet innholdet er organisert i en enkelt side delt inn i seksjoner, med lenker til les mer eller casestudier. Hver seksjon kan rulles til eller åpnes med menyen.

designet oppnår den ofte utfordrende effekten av å være bedrift og menneske samtidig

Menyen tar sin visuelle signal fra Danish Shipping logo, som representerer morse-koden for DK (ISO 2-brevskoden for Danmark). Åpningsbelastningsanimasjonen blir menyen, noe som indikerer at nettstedet nå er klar til å bli utforsket. Ved å vende seg til tekst på hover, og endre farge i nedstanden, er menybrikkene både funksjonelt klare og visuelt minimal.

På mobil brukes et hamburger menyikon, men i dette tilfellet passer det faktisk med den generelle visuelle stilen.

Dette nettstedet gjør en veldig fin jobb med å organisere og presentere innholdet på en tiltalende måte, med ekstra interesse fra animasjon. Fordi animasjonen brukes primært for å forbedre navigasjonsdefinerte seksjonsoverskriftene og gi bevegelse til menyen, er det hensiktsmessig, ikke bare dekorativt.

Arkitekturen har blitt nøye utarbeidet og den generelle følelsen er godt organisert, forretningsmessig og klar. Menyen legger til et lekent element, med bevegelse som minner om fiskesvømming, mens seksjonens overskudd animasjoner ligner bølger. Som et resultat oppnår designet den ofte utfordrende effekten av å være bedrift og menneske samtidig.

navigationgresponsibly

Sagmeister & Walsh

Dette siste er ikke et eksempel på nyskapende navigasjon, men det er merkelig overbevisende likevel. For det meste benytter dette nettstedet en rett og slett standard horisontal meny i en klissete header, med en andre nivå meny som glir ned under den på de sidene der den er nødvendig. Så langt så vanlig, spesielt ettersom det endres til hamburger-ikon-åpner-til-liste på mobil.

Den morsomme / litt rare og ubehagelige biten er på hjemmesiden. Det er utsikt over en del av Sagmeister & Walsh kontorer med hvilket utseende, og arbeid, som menyknapper lagt over toppen.

I det minste er det slik det ser ut hvis du først ser denne siden, for eksempel klokka 09:30 GMT. Se på det igjen klokken 11.30 EST, og du vil innse at de "knappene" er tente tegn, og du ser virkelige mennesker som jobber, bor (nesten). Ved å klikke til høyre endres visningen for å vise en annen del av kontoret, med menyen malt på forsiden av skrivebordene.

Det er en gimmick, det forbedrer ikke navigasjonen i det hele tatt, men det er minneverdig. Sitter på skrivebordet foran en datamaskin som ser på et annet sted som sitter foran en datamaskin, høres bare rart, men jeg garanterer at du vil gjøre det, selv bare i 5 minutter. De forrige nettstedene innfører alle nivåer av brukerengasjement, men dette er helt forskjellig. Du ser bokstavelig talt på dem arbeidet.

sagmeisterwalsh

Konklusjon

God navigering er ubemerket, stor navigasjon skaper en minneverdig brukeropplevelse

Navigasjon er integrert i UX på et nettsted, fordi helbredelsen av navigasjonen skaper rammen for brukerens opplevelse. Navigasjon bør veilede brukeren gjennom innholdet på en måte som er enten logisk eller fortellende, avhengig av nettstedets formål.

Nettstedene som er undersøkt her, har gått utover bare 'klikk her for x', og har forsøkt å skape en hyggelig, minneverdig opplevelse for brukeren. God navigering er ubemerket, stor navigasjon skaper en minneverdig brukeropplevelse.