Viktige navigasjonsmønstre i 2016
Din navigasjonsmeny lager eller bryter nettstedets UX, som er det du bør være i hovedsak å designe for hele tiden. Det er ingen bedre service du kan tilby kundene dine som designer enn å sikre at nettstedene du bygger for dem, har en fantastisk og svært funksjonell brukeropplevelse.
En fantastisk UX garanterer at kundenes nettsteder får flere kunder, besøkende og lesere, for ikke å nevne å beholde vanlige besøkende. Det er den viktigste delen av å skape et nettsted, og du har god kontroll over det basert på hvordan du designer navigasjonsmenyen til nettstedet ditt.
Dessverre har ikke alle designere høy prioritet på design for utmerket navigasjon, noe som gjør en disservice til kunder og besøkende.
For å skape et svært troverdig rykte som designer - og å være en etterspurt designer - må du mestre en av de mest grunnleggende aspektene av webdesign. Det skaper stjerneskjerming for kundens nettsteder.
Dette er hvordan.
Klebrig navigasjon
Klebrig navigasjon er en viktig del av navigasjonen, siden den gir brukerne mulighet til å få tilgang til menyen, og kan lett finne det de vil ha på nettstedet ditt. Sticky navigasjon forblir låst på plass mens brukere ruller ned en side. Det er ikke noe mer frustrerende - spesielt når det gjelder langrulle sider - enn å måtte rulle helt opp igjen for å navigere til en annen side på nettstedet.
Husk at på nettet er hastighet alt (lasting av sider, å finne ønsket innhold osv.), Slik at brukerne får tilgang til navigasjonsmenyen raskere, er en god praksis.
Ved å inkludere en klebrig navigasjonslinje bidrar du også til å redusere kognitiv belastning på brukerne ved å kontinuerlig sette sine navigasjonsvalg rett foran dem.
Alternativ Press har et godt eksempel på hvordan du tar med klebrig navigasjon i sidene dine. Legg merke til hvordan alle de viktigste delene er lett tilgjengelige og identifiserbare, med effektiv fargekontrast, i navigasjonslinjen, uansett hvor langt du ruller nedover siden.
Tydelig hypertekst
Hypertekst er en tekstreferanse på sidene dine som brukere kan klikke på for å få mer informasjon, vanligvis på en annen side, om det er på samme nettsted eller off-site. Hyperlinks er trolig det mest identifiserbare eksemplet på hypertekst.
Siden hypertekst inneholder informasjon som skal hjelpe brukeropplevelsen ved å gi mer informasjon, er det bare grunn til at slike nyttige referanser gjøres svært merkbare. Samlet sett legger dette til navigering av nettstedet du bygger.
Jeg anbefaler å lage hypertekst blatant av to enkle designfunksjoner:
- understreking
- Endre fargen
Når du understreker hvilket som helst ord på sidens innhold, la oss si at det er en hyperkobling til klientens side om siden. Den legger øyeblikkelig oppmerksomheten til besøkende på nettstedet, noe som hjelper dem med å navigere til viktig informasjon med større letthet.
På samme måte, når du gjør fargene på hyperkoblinger annerledes enn teksten og bakgrunnen til sidene dine, gjør du det igjen på en slik måte at brukerne enkelt kan identifisere og klikke på den.
Markedsføringssted The Daily Egg bruker både understreke og forskjellige farger for sin hypertekst, noe som gjør det veldig enkelt for brukerne å identifisere koblinger.
Mega-menyer
Mega-menyer er en god ide for navigasjon, spesielt hvis nettstedet du designer for kunden din, har mye innhold og kategorier. e-handel butikker kommer til tankene. Dette er i hovedsak store, rullegardinpaneler som åpner opp ekstra lag med navigering for å hjelpe brukerne med å finne spesifikt hva de vil ha raskere.
Slike menyer forbedrer brukeropplevelsen ved å inkludere fordeler som:
- eliminering av rulling;
- verktøytips;
- ordentlig strukturering av innhold ved hjelp av ikoner, layout eller typografi.
Alt sagt, disse funksjonene gjør det mye enklere å bruke navigasjonsmenyen.
For et solid eksempel på en mega-meny, gå til Food Network S nettsted. Legg merke til hvordan fly-menyen viser en av de mest etterspurte innholdsstykkene på nettstedet - oppskriftene - i et enkelt å se format som lar brukerne umiddelbart velge hvor de vil gå i stedet for å bla eller paginere for flere alternativer.
Mønster og språkfordeler
Et mønsterutbytte bruker et konvensjonelt symbol som de fleste besøkende vil forstå umiddelbart, for eksempel et husikon som representerer hjemmesiden til nettstedet ditt. Et språkutbytte er den eksplisitte bruken av et ord, som "hjemme", for å klargjøre at klikke på den kategorien vil føre brukere til hjemmesiden til nettstedet.
Affordances kommuniserer til brukerne hvordan de kan samhandle med elementene i designet. Selv om dette er absolutt Design Basics 101, er det fortsatt like viktig å trene i dag som det var i de aller første dagene av Internett.
En funksjonell navigasjonsmeny skal ha husets symbol eller ordet "hjemme" plassert på den aller første navigasjonsfanen til venstre. Mens noen designere kanskje velger å inkludere en firmalogo som «hjem» -ikonet eller -knappen, går det fortsatt for mye plass til brukerfeil.
Dokumentsenteret Rammehus demonstrerer dette designprinsippet til en tee, med bruk av "hjemme" for å ikke la være i tvil hvor den kategorien vil ta besøkende på stedet.
Rask lastetid
Hastighet = god brukeropplevelse. Designere av alle striper bør skrive det ned som en av de mest avgjørende designreglene som de ganske enkelt ikke kan og ikke bør henvise til. Ifølge Wired Magazine , vil nesten 50% av kundene ha den gjennomsnittlige siden å laste inn i to sekunder eller mindre! Sett på en annen måte, hvis sidene du designer for kundene dine, tar mer enn to sekunder å laste ... det er en veldig god sjanse for at de forlater kundenes nettsteder og aldri kommer tilbake, og dermed forårsaker alvorlige konvertering mareritt.
Dette er en bekymringsfull statistikk, for å være sikker, men det er noe designere kan gjøre med det for å sikre at de gir sidene av høy kvalitet til sine kunder. Bare test sidens hastighet på sider du designer. Det finnes en rekke pålitelige verktøy for å hjelpe deg med å bestemme sidetilpasningstider:
For et eksempel på en svært rask sidetilpasningstid går vi til Enchanted Learning Hva er en hval? side. Designet kan bruke litt arbeid, men siden laster på litt over et sekund, ifølge Alexa analytics verktøylinje.
Flott navigasjon er flott UX
En stor del av en flott brukeropplevelse er sidens navigasjon. Det er grunnlaget som hele brukeropplevelsen hviler på, hvis du virkelig tenker på det. Når brukerne dine ikke finner veien rundt kundens nettsted med letthet, blir det frustrerende for dem, noe som får dem til å ha det travelt. Dermed bør utmerket navigasjon gjøre det enkelt for folk å bruke et hvilket som helst nettsted du lager Det er referansen til en fin brukeropplevelse.
Selv om det kan være fristende å gi navigasjonen den korte driften i designstadiene - på grunn av nye designtrender som dukker opp hele tiden, er det ikke tilrådelig. Brukerne vil legge merke til, som vil kundene dine. For å tilfredsstille dine kunder, må du vær så snill som brukerne deres. Du kan bare gjøre det når du designer for en flott brukeropplevelse først og fremst, med hovedvekt på å få navigasjonen rett fra farten.