Essentiële navigatiepatronen in 2016
Je navigatiemenu maakt of breekt de UX van je website, waar je in de eerste plaats voor moet ontwerpen. Er is geen betere service die u uw klanten als ontwerper kunt bieden dan om ervoor te zorgen dat de sites die u voor hen bouwt een verbluffende en zeer functionele gebruikerservaring bieden.
Een uitstekende UX garandeert dat de sites van uw klanten meer leads, bezoekers en lezers krijgen, om nog te zwijgen van het behouden van vaste bezoekers. Het is het belangrijkste onderdeel van het maken van een site en u hebt er geweldige controle over, op basis van de manier waarop u het navigatiemenu van uw site ontwerpt.
Helaas hebben niet alle ontwerpers een hoge prioriteit bij het ontwerpen voor uitstekende navigatie, wat een slechte service is voor klanten en bezoekers.
Om een zeer geloofwaardige reputatie als ontwerper te creëren - en om een gevorderde ontwerper te zijn - moet u een van de meest elementaire aspecten van webontwerp beheersen. Dat is een geweldige navigatie voor de sites van uw klanten.
Hier is hoe.
Kleverige navigatie
Kleverige navigatie is een essentieel onderdeel van navigatie, omdat het uw gebruikers in staat stelt om direct toegang te krijgen tot het menu en eenvoudig te vinden wat ze willen op uw site. Kleverige navigatie blijft op zijn plaats als gebruikers naar beneden scrollen op een pagina. Niets frustrerender - vooral in het geval van pagina's met lang scrollen - dan dat je helemaal opnieuw omhoog moet scrollen om naar een andere pagina op de site te gaan.
Onthoud dat snelheid op het web alles is (pagina's laden, gewenste inhoud vinden, enz.) Zodat gebruikers sneller toegang hebben tot het navigatiemenu is een goede gewoonte.
Door een plakkerige navigatiebalk op te nemen, help je ook de cognitieve belasting van je gebruikers te verminderen door hun navigatiekeuzes altijd vlak voor hen neer te zetten.
Alternatieve pers is een goed voorbeeld van het opnemen van plakkerige navigatie in uw pagina's. Merk op hoe alle belangrijke secties gemakkelijk toegankelijk en herkenbaar zijn, door effectief kleurcontrast, in de navigatiebalk, ongeacht hoe ver u naar beneden scrolt.
Duidelijke hypertekst
Hypertekst is elke tekstverwijzing op uw pagina's waarop gebruikers kunnen klikken om extra informatie te krijgen, meestal op een andere pagina, ongeacht of deze zich op dezelfde site of op een andere site bevindt. Hyperlinks zijn waarschijnlijk het meest herkenbare voorbeeld van hypertekst.
Omdat hypertekst informatie bevat die de gebruikerservaring zal helpen verbeteren door meer informatie te verstrekken, is het alleen maar logisch dat dergelijke nuttige verwijzingen zeer duidelijk worden gemaakt. Over het algemeen draagt dit bij aan de navigeerbaarheid van de site die u bouwt.
Ik raad aan om hypertext flagrant te maken door twee, eenvoudige, ontwerpkenmerken:
- onderstreping
- De kleur veranderen
Wanneer u een woord op uw pagina-inhoud onderstreept (laten we zeggen dat het een hyperlink is naar de pagina van uw klant), trekt dit onmiddellijk de aandacht van bezoekers van de site, waardoor ze eenvoudiger naar belangrijke informatie kunnen navigeren.
Evenzo, als u de kleur van hyperlinks anders maakt dan de tekst en achtergrond van uw pagina's, zorgt u ervoor dat deze opvalt op de pagina, zodat gebruikers deze gemakkelijk kunnen herkennen en erop kunnen klikken.
Marketing site The Daily Egg gebruikt zowel onderstreping als verschillende kleuren voor zijn hypertext, waardoor het voor gebruikers heel gemakkelijk is om links te identificeren.
Mega-menu's
Mega-menu's zijn een geweldig idee voor navigatie, vooral als de site die u voor uw klant ontwerpt veel inhoud en categorieën bevat. E-commerce winkels komen voor de geest. Dit zijn in feite enorme vervolgkeuzepanelen die aanvullende navigatielagen openen om uw gebruikers te helpen specifiek te vinden wat ze sneller willen.
Dergelijke menu's verbeteren de gebruikerservaring door voordelen zoals:
- eliminatie van scrollen;
- tooltips;
- ordelijke structurering van de inhoud door middel van pictogrammen, lay-out of typografie.
Alles bij elkaar maken deze functies het een stuk eenvoudiger om het navigatiemenu te gebruiken.
Voor een stevig voorbeeld van een megamenu gaat u naar Voedsel netwerk Site. Merk op hoe het vervolgmenu een van de meest gewilde stukjes inhoud van de site toont - de recepten - in een gemakkelijk te zien formaat waarmee gebruikers direct kunnen kiezen waar ze naartoe willen in plaats van scrollen of paginering voor meer opties.
Patronen en taaleigenschappen
Een patroonvoorwaarde is het gebruik van een conventioneel symbool dat de meerderheid van de sitebezoekers onmiddellijk begrijpt, zoals een huispictogram dat de startpagina van uw site weergeeft. Een taaltoelating is het expliciete gebruik van een woord, zoals 'thuis', om te verduidelijken dat klikken op dat tabblad gebruikers naar de startpagina van de site zal leiden.
Affordances communiceren met gebruikers hoe zij kunnen communiceren met de elementen in uw ontwerp. Hoewel dit zeker Design Basics 101 is, is het nog steeds net zo belangrijk om vandaag te oefenen als in de allereerste dagen van het internet.
In een functioneel navigatiemenu moet het huissymbool of het woord "home" op de allereerste navigatietab aan de linkerkant staan. Sommige ontwerpers kiezen er misschien voor om een bedrijfslogo toe te voegen als het "thuis" -pictogram of -knop, maar dat laat nog steeds te veel ruimte voor gebruikersfouten.
eTailer Frame magazijn demonstreert dit ontwerpprincipe op zijn best, met zijn gebruik van "home" om er geen twijfel over te laten bestaan waar dat tabblad sitebezoekers zal brengen.
Snelle laadtijd
Snelheid = geweldige gebruikerservaring. Ontwerpers van alle strepen moeten dat noteren als een van de meest cruciale ontwerpregels die ze simpelweg niet kunnen en niet moeten degraderen. Volgens Wired Magazine , bijna 50% van de kopers wil dat de gemiddelde pagina binnen twee seconden of minder wordt geladen! Anders gezegd, als de pagina's die u ontwerpt voor uw klanten meer dan twee seconden nodig hebben om te laden ... is er een grote kans dat ze de sites van uw klanten verlaten en nooit meer terugkeren, waardoor ernstige nachtmerries over conversie worden veroorzaakt.
Dit is zeker een zorgwekkende statistiek, maar er zijn iets dat ontwerpers eraan kunnen doen om ervoor te zorgen dat ze paginaprestaties van hoge kwaliteit leveren aan hun klanten. Test eenvoudig de paginasnelheid van pagina's die u ontwerpt. Er zijn een aantal betrouwbare hulpmiddelen om u te helpen bij het bepalen van de laadtijd van de pagina:
Voor een voorbeeld van een zeer snelle laadtijd van de pagina gaan we naar Enchanted Learning's Wat is een walvis? pagina. Het ontwerp kan wat werk gebruiken, maar de pagina laadt in iets meer dan een seconde, volgens de Alexa analytics-werkbalk.
Geweldige navigatie is geweldige UX
Een groot deel van een geweldige gebruikerservaring is de navigatie van uw site. Het is de basis waarop de hele gebruikerservaring rust, als je er echt over nadenkt. Wanneer uw gebruikers niet gemakkelijk hun weg op de site van uw klant kunnen vinden, wordt het frustrerend voor hen, waardoor ze snel weggaan. Een uitstekende navigatie zou het voor mensen eenvoudig moeten maken om elke site die u maakt te gebruiken; dat is de maatstaf voor een fijne gebruikerservaring.
Hoewel het verleidelijk kan zijn om de navigatie de korte weg te wijzen in de ontwerpstadia, omdat er steeds nieuwe ontwerptrends ontstaan, is het niet aan te raden. Uw gebruikers zullen merken, net als uw klanten. Om uw klanten tevreden te stellen, moet u hun gebruikers tevreden stellen. Dat kun je alleen doen als je in de eerste plaats ontwerpt voor een geweldige gebruikerservaring, met als belangrijkste doel de navigatie vanaf het allereerste begin te krijgen.