Væsentlige navigationsmønstre i 2016
Din navigationsmenu laver eller ødelægger dit websteds UX, hvilket er det, du bør være at designe for altid. Der er ingen bedre service, du kan give dine kunder som designer end at sikre, at de websteder, du opbygger for dem, prale af en fantastisk og yderst funktionel brugeroplevelse.
En fantastisk UX garanterer, at dine kunders websteder får flere kundeemner, besøgende og læsere, for ikke at nævne at beholde regelmæssige besøgende. Det er den vigtigste del af oprettelsen af et websted, og du har stor kontrol over det, baseret på hvordan du designer dit websteds navigationsmenu.
Desværre har ikke alle designere høj prioritet på design for fremragende navigation, hvilket gør en disservice til kunder og besøgende.
For at skabe et meget troværdigt ry som designer - og at være en efterspurgt designer - skal du mestre et af de mest grundlæggende aspekter af webdesign. Det skaber stjernernes navigation til dine kunders websteder.
Sådan er det.
Sticky navigation
Sticky navigation er en vigtig del af navigationen, da det giver dine brugere mulighed for øjeblikkeligt at få adgang til menuen og nemt finde hvad de vil have på dit websted. Sticky navigation forbliver låst på plads, da brugere ruller ned på en side. Der er ikke noget mere frustrerende - især i tilfælde af langrulle sider - end at skulle rulle helt op igen for at navigere til en anden side på hjemmesiden.
Husk, at på internettet er hastigheden alt (lastning af sider, søgning efter ønsket indhold osv.), Så brugerne hurtigere får adgang til navigationsmenuen, er en god praksis.
Ved at inkludere en klæbrig navigationslinje hjælper du også med at reducere kognitive belastninger på dine brugere ved konstant at sætte deres navigationsvalg lige foran dem.
Alternativ Tryk indeholder et godt eksempel på, hvordan du indarbejder klæbrig navigation til dine sider. Bemærk, hvordan alle de vigtigste sektioner er let tilgængelige og identificerbare ved hjælp af effektiv farvekontrast i navigationslinjen, uanset hvor langt du ruller ned på siden.
Tydelig hypertekst
Hypertekst er en tekstreference på dine sider, som brugerne kan klikke på for at få yderligere information, normalt på en anden side, om det er på samme websted eller off-site. Hyperlinks er nok det mest identificerbare eksempel på hypertekst.
Da hypertekst indeholder oplysninger, der hjælper brugeroplevelsen ved at give flere oplysninger, står det kun for, at sådanne nyttige referencer gøres meget mærkbare. Samlet set tilføjer dette navigationsevnen til det websted, du opbygger.
Jeg anbefaler at lave hypertekstblatant med to enkle designfunktioner:
- understregning
- Ændring af farven
Når du understreger et hvilket som helst ord på dit sideindhold, lad os sige, at det er et hyperlink til din klients side om siden. Det gør straks opmærksomheden hos besøgende på webstedet, hvilket hjælper dem med at navigere til vigtige oplysninger med større lethed.
På samme måde, når du gør farven på hyperlinks forskellig fra tekst og baggrund på dine sider, gør du det igen på den måde, så brugerne nemt kan identificere og klikke på den.
Markedsplads The Daily Egg bruger både understregning og forskellige farver til sin hypertekst, hvilket gør det meget nemt for brugerne at identificere links.
Mega menuer
Mega menuer er en god ide til navigation, især hvis det websted du designer for din klient har meget indhold og kategorier. e-handel butikker kommer til at tænke på. Disse er i det store og hele store drop-down-paneler, der åbner yderligere lag af navigation for at hjælpe dine brugere med at finde specifikt, hvad de vil have hurtigere.
Sådanne menuer forbedrer brugeroplevelsen ved at inkludere fordele som:
- eliminering af rullning
- tooltips;
- ordnet strukturering af indhold ved hjælp af ikoner, layout eller typografi.
Alt sagt, disse funktioner gør det meget nemmere at bruge navigationsmenuen.
For et solidt eksempel på en mega-menu, gå til Food Network S websted. Bemærk, hvordan flyvemenuen viser et af de mest efterspurgte stykker indhold på webstedet - opskrifterne - i et let at se format, som lader brugerne omgående vælge, hvor de vil gå i stedet for at rulle eller paginere for flere muligheder.
Mønster og sproglige tilbud
Et mønsterydelse bruger et konventionelt symbol, som de fleste besøgende vil forstå straks, såsom et husikon, der repræsenterer hjemmesiden til dit websted. En sprogydelse er den udtrykkelige brug af et ord, som "hjem", for at præcisere, at klik på fanen vil bringe brugere til hjemmesiden for hjemmesiden.
Affordances kommunikerer til brugerne, hvordan de kan interagere med elementerne i dit design. Selv om dette er bestemt Design Basics 101, er det stadig så vigtigt at øve sig i dag som det var i de meget tidlige dage af internettet.
En funktionel navigationsmenu skal have husets symbol eller ordet "hjemme" placeret på den allerførste navigationsfane til venstre. Mens nogle designere måske vælger at inkludere et firmalogo som "hjem" ikon eller knap, forlader det stadig for meget plads til brugerfejl.
etailer Rammehus demonstrerer dette designprincip til en tee, med brug af "hjem" for at være uden tvivl om, hvor denne fane vil tage besøgende på stedet.
Hurtig belastningstid
Speed = stor brugeroplevelse. Designere af alle striber bør skrive det ned som et af de mest afgørende designregler, som de simpelthen ikke kan og bør ikke henvise til. Ifølge Wired Magazine , vil næsten 50% af kunderne have den gennemsnitlige side at indlæse om to sekunder eller mindre! Sæt på en anden måde, hvis de sider, du designer til dine kunder, tager mere end to sekunder at indlæse ... er der en rigtig god chance for, at de vil forlade dine kunders websteder og aldrig vende tilbage, hvilket medfører alvorlige konvertering mareridt.
Dette er en bekymrende statistik, helt sikkert, men der er noget designere kan gøre ved at sikre, at de leverer højkvalitets sideydelse til deres kunder. Du skal blot teste sidens hastighed på sider, du designer. Der er en række pålidelige værktøjer til at hjælpe dig med at bestemme sideindlæsningstider:
For et eksempel på en meget hurtig sideindlæsningstid går vi til Enchanted Learning's Hvad er en hval? side. Designet kunne bruge noget arbejde, men siden laster på lidt over et sekund, ifølge Alexa analytics værktøjslinje.
Fantastisk navigation er fantastisk UX
En stor del af en stor brugeroplevelse er dit websteds navigation. Det er grundlaget for hele brugeroplevelsen hviler, hvis du virkelig tænker på det. Når dine brugere ikke let kan finde vej rundt på din kundes websted, bliver det frustrerende for dem, så de får travlt. Således bør fremragende navigation gøre det nemt for folk at bruge et hvilket som helst websted, du opretter. Det er benchmark for en fin brugeroplevelse.
Selvom det kan være fristende at give navigationen den korte drift i designfasen - på grund af nye designtendenser, der dukker op hele tiden - det er ikke tilrådeligt. Dine brugere vil lægge mærke til, ligesom dine kunder. For at tilfredsstille dine kunder, skal du behage deres brugere. Du kan kun gøre det, når du designer for en stor brugeroplevelse først og fremmest, med den primære vægt på at få navigationen lige fra start.