Viktiga navigeringsmönster i 2016
Din navigationsmeny gör eller raderar din webbplats UX, vilket är vad du bör utforma för första gången för hela tiden. Det finns ingen bättre service du kan erbjuda dina kunder som designer än att se till att de webbplatser du bygger för dem har en fantastisk och mycket funktionell användarupplevelse.
En fantastisk UX garanterar att dina kunders webbplatser får fler kunder, besökare och läsare, för att inte tala om behålla regelbundna besökare. Det är den viktigaste delen av att skapa en webbplats, och du har stor kontroll över det baserat på hur du utformar webbplatsens navigationsmeny.
Tyvärr har inte alla designers hög prioritet vid designen för utmärkt navigering, vilket gör en missnöje till kunder och besökare.
För att skapa ett mycket trovärdigt rykte som designer - och vara en efterfrågan designer - måste du behärska en av de mest grundläggande aspekterna av webbdesign. Det skapar stellarnavigering för dina kunders webbplatser.
Här är hur.
Klibbig navigering
Klibbig navigering är en viktig del av navigationen eftersom det ger dina användare möjlighet att direkt komma till menyn och enkelt hitta vad de vill ha på din webbplats. Klibbig navigering hålls låst på plats eftersom användarna bläddra ner på en sida. Det finns inget mer frustrerande - speciellt när det gäller långbläddande sidor - än att behöva bläddra hela vägen upp igen för att navigera till en annan sida på webbplatsen.
Kom ihåg att på webben är hastigheten allting (lastning av sidor, hitta önskat innehåll etc.) så att användarna snabbt kan komma åt navigeringsmenyn är en bra metod.
Genom att inkludera en klibbig navigeringsfält hjälper du också till att minska kognitiv belastning på dina användare genom att ständigt lägga sina navigeringsval direkt framför dem.
Alternativ Press har ett bra exempel på hur du införlivar klibbig navigering i dina sidor. Observera hur alla viktiga sektioner är lättillgängliga och identifierbara, med effektiv färgkontrast, i navigeringsfältet, oavsett hur långt du bläddrar ner på sidan.
Tydlig hypertext
Hypertext är en textreferens på dina sidor som användare kan klicka på för att få ytterligare information, vanligtvis på en annan sida, oavsett om det är på samma webbplats eller på plats. Hyperlänkar är förmodligen det mest identifierbara exemplet på hypertext.
Eftersom hypertext innehåller information som kommer att hjälpa användarupplevelsen genom att ge mer information, står det bara för att sådana användbara referenser görs mycket märkbara. Sammantaget bidrar detta till att navigera på webbplatsen du bygger.
Jag rekommenderar att du gör hypertexten blatant med två enkla designfunktioner:
- strykning
- Byter färg
När du understryker något ord på ditt sidinnehåll - låt oss säga att det är en hyperlänk till din klients sida - det omedelbart drar uppmärksamheten hos besökare, vilket hjälper dem att navigera till viktig information med större lätthet.
På samma sätt, när du gör färgen på hyperlänkar annorlunda än texten och bakgrunden på dina sidor, gör du det igen på sidan, så att användarna enkelt kan identifiera och klicka på den.
Marknadsplats The Daily Egg använder både understrykning och olika färger för dess hypertext, vilket gör det väldigt lätt för användarna att identifiera länkar.
Mega menyer
Mega menyer är en bra idé för navigering, speciellt om den webbplats du designar för din klient har mycket innehåll och kategorier. e-handel butiker kommer i åtanke. Det här är i huvudsak stora, nedrullningsbara paneler som öppnar ytterligare lager av navigering för att hjälpa dina användare att hitta specifikt vad de vill ha snabbare.
Sådana menyer förbättrar användarupplevelsen genom att inkludera fördelar som:
- eliminering av rullning
- verktygstips;
- ordnad strukturering av innehåll med ikoner, layout eller typografi.
Allt sagt, dessa funktioner gör det mycket lättare att använda navigationsmenyn.
För ett solidt exempel på en mega-meny, gå till Matnätverk S webbplats. Lägg märke till hur flyktmenyn visar en av de mest efterfrågade innehållsdelarna på webbplatsen - recepten - i ett enkelt att se format som låter användarna omedelbart välja vart de vill gå istället för att bläddra eller paginera för fler alternativ.
Mönster och språkförmåner
En mönsterkostnad använder en konventionell symbol som de flesta besökare kommer att förstå omedelbart, till exempel en husikon som representerar hemsidan för din webbplats. Ett språkbidrag är det uttryckliga användandet av ett ord, som "hem", för att klargöra att klickar på den fliken kommer att ge användare till hemsidan för webbplatsen.
Affordances kommunicerar med användarna hur de kan interagera med elementen i din design. Även om detta verkligen är Design Basics 101, är det fortfarande lika viktigt att träna idag som det var i de allra allra första dagarna av Internet.
En funktionell navigationsmeny ska ha husets symbol eller ordet "hem" placerat på den första navigeringsfliken till vänster. Medan vissa designers kanske väljer att inkludera en företagslogotyp som "hem" -ikon eller -knapp, lämnar det fortfarande för mycket plats för användarfel.
Etailer Ramlager demonstrerar den här designprincipen för en tee, med användningen av "hem" för att inte tveka om där fliken kommer att ta besökare på plats.
Snabb laddningstid
Hastighet = bra användarupplevelse. Designers av alla ränder bör skaka det som en av de mest avgörande designreglerna som de helt enkelt inte kan och borde inte förkasta. Enligt Wired Magazine , nästan 50% av kunderna vill att den genomsnittliga sidan ska laddas om två sekunder eller mindre! Sätt på ett annat sätt om sidorna du designar för dina kunder tar längre tid än två sekunder att ladda ... det finns en riktigt bra chans att de lämnar dina kunders webbplatser och aldrig kommer tillbaka, vilket orsakar allvarliga omvandlingsmardrömmar.
Det här är en oroande statistik, för att vara säker, men det finns något som designers kan göra för att säkerställa att de ger högkvalitativ sidprestanda till sina kunder. Testa bara sidhastigheten för de sidor du designar. Det finns ett antal pålitliga verktyg som hjälper dig att bestämma sidladdningstider:
För ett exempel på en mycket snabb sidladdningstid går vi till Enchanted Learning Vad är en val? sida. Designen kan använda lite arbete, men sidan laddas på drygt en sekund, enligt Alexa Analytics verktygsfältet.
Bra navigering är bra UX
En stor del av en bra användarupplevelse är din webbplatss navigering. Det ligger till grund för hela användarupplevelsen vilar, om du verkligen tänker på det. När dina användare inte lätt kan hitta sig runt din kunds webbplats, blir det frustrerande för dem, vilket gör att de lämnar bråttom. Således ska utmärkt navigering göra det enkelt för människor att använda vilken webbplats du skapar. det är riktmärket för en bra användarupplevelse.
Medan det kan vara frestande att ge navigationen den korta driften i konstruktionsstadiet - på grund av att nya designtrender poppar upp hela tiden - det är inte tillrådligt. Dina användare kommer att märka, liksom dina kunder. För att behaga dina kunder, måste du behaga sina användare. Du kan bara göra det när du designar för en bra användarupplevelse först och främst, med huvudfokus på att få navigationen direkt från hämtningen.