Utility Navigation Hur det påverkar användarupplevelse design

För att skapa en effektiv och användarvänlig navigering behöver vi inte bara tänka på hur man ska gruppera vårt innehåll i välstrukturerade menyer så att användarna enkelt kan hitta vad de vill ha, men också om hur man ska utforma verktygen som de behöver för att interagera med webbplatsen

Navigation som inte är strikt relaterad till innehållet och hjälper användarna att utföra olika åtgärder kallas verktygsnavigering, och det är en mindre diskuterad men enormt viktig aspekt av användarupplevelse design. Sökfält, inloggnings- och registreringsformulär, prenumerera, dela och skriva ut knappar, kundvagnar, kontextmenyer och verktyg som låter användare byta språk eller teckensnitt är typiska exempel på verktygsnavigering.

Att utforma dem är inte lika lätt som det verkar vid första anblicken, det kräver överväganden för att ta reda på vilka delar vi behöver, var de ska placeras och hur de ska visas för att se till att våra besökare snabbt kan hitta dem och förstå hur de fungerar.

Hur Utility Navigation påverkar UX

När vi utformar verktygsnavigering måste vi bestämma hur vi vill att våra användare ska interagera med vår webbplats. Vi behöver förse dem med en interaktionsstruktur som passar våra affärsmål, leder användarna genom kundresan, ger dem lättillgängliga alternativ och ger dem en trevlig användarupplevelse.

För det första, de behöver snabbt kunna utföra de åtgärder de vill ha. Om vi ​​gör det möjligt för dem att göra det, kommer kundernas tillfredsställelse att växa, och nöjda användare brukar bruka mer tid och mer pengar på webbplatser.

Hemsidan för AirBnB följer den här UX-principen, och dess översta meny innehåller bara verktygsverktyg. Det är inte en vanlig lösning, men om vi tittar på AirBnBs otroliga tillväxthastighet är det det perfekta valet för dem.

De 4 översta menyalternativen riktar sig till de 4 huvudpersonerna som brukar besöka AirBnBs webbplats: personer som är intresserade av att bli värd (“Bli värd”), människor som vill lösa ett problem som ägde rum medan de använde tjänsten (“Hjälp”), nya och återkommande användare (“Bli Medlem” och “Logga in”). AirBnBs verktygsfokuserade hemsida innehåller också en snabb sökfält som är ett viktigt verktyg på en bostadshyreswebbplats.

För det andra, Användare behöver inte överflödiga verktyg, eftersom alltför mycket rodnad distraherar uppmärksamhet och minskar fokus. Vilka verktyg är nödvändiga i vår verktygsnavigering och vad som inte beror på vilken typ av webbplats vi har. Till exempel kan det vara bra att inkludera en utskriftsvy på en blogg eller en nyhetssida, men samma funktion kan vara en onödig distraktion på en forumbräde eller en social media webbplats.

Washington Post visar till exempel verktygsnavigering på dess enda inläggssidor annorlunda än på hemsidan. På detta sätt möter användare bara verktygsverktyg som är relevanta, och inte plågas med alternativ som de inte vill använda ändå.

Det finns 3 verktyg för navigering som besökare kanske vill använda hela webbplatsen. Dessa ingår smart i den fasta fältet (sökverktyg, “Logga in”, och “Prenumerera”), men användare behöver inte tänka på alternativ relaterade till enskilda inlägg som “Läslista” när de surfar på hemsidan eller på en av kategorins sidor.

För det tredje, Användare behöver snabbt förstå vad de kan göra på vår webbplats. Besökare vet inte nödvändigtvis vad de vill ha, så vi behöver alltid ge dem information om vilka alternativ de har.

Om du tittar på skärmdumpen nedan kan du se att The New York Times informerar användarna om tillgängligheten av 3 olika utgåvor: amerikan, Internationell, och kinesisk, och gör det också möjligt för dem att växla snabbt mellan de tre. Detta bra exempel på smarttjänstnavigering visar användare mindre uppenbara alternativ som de förmodligen inte skulle hitta på egen hand, på ett obegränsat och elegant sätt.

Hitta den bästa platsen

Det finns typiska placeringar för verktygsnavigering där användarna intuitivt letar efter dessa verktyg, eftersom det är vad de har väntat på de flesta webbplatser. Att bryta webbdesignkonventioner betraktas som dålig användarupplevelsepraxis, och det är särskilt sant för användningsnavigering som i de flesta fall handlar mer om användbarhet än kreativitet.

Eftersom användningsnavigeringen är sekundär till innehållsbaserad navigering på de flesta webbplatser placeras den ofta i mindre framträdande men fortfarande synliga områden. Detta betyder vanligtvis (1) högra högra hörnet på webbplatser och (2) nedre delen av sidfoten. Dess en bra idé att följa dessa konventioner, som Det här är de platser där de flesta användare letar efter verktygsverktyg först.

Som du kan se nedan har Reuters placerat de flesta av verktygsverktygen i dessa två typiska områden, högra högra hörnet på webbplatsen och den nedre delen av sidfoten under innehållsbaserad navigering. Den unika lösningen här är den fasta extrafoten med 2 verktyg som designers trodde var viktigast: “Logga in eller registrera dig” och “Senaste från min tråd”.

Det är intressant att notera att det extra verktyget navigering område fortfarande är placerad i en typ av footer där användarna normalt söker liknande verktyg, så Reuters designers var kreativ på ett sätt men följde fortfarande webbdesignkonventioner för att upprätthålla användbarheten.

Bygg en logisk struktur

Att gruppera verktyg i en logisk struktur är avgörande om vi vill bygga en webbplats med hög konverteringsfrekvens. Detta kan vara en utmaning, även om vi inte vill ge användarna många alternativ, men Amazon tar komplexiteten i användningsnavigeringen till nästa nivå. Amazon har en otroligt komplicerad verktygsnavigering med många alternativ, men om vi använder Amazon regelbundet nog, verkar det inte så. Detta är den magiska smarta designen.

De placerade inte bara verktygsnavigering i det övre högra hörnet där användarna förväntar sig att hitta den, men de delade den också i tre huvudgrupper: (1) en sökfält, (2) användarrelaterad information (under sökfältet ) och (3) åtgärder som användare kan utföra på webbplatsen.

Det är smart eftersom kunderna, tack vare de visuella signalerna, som kundvagnen eller sökikonen, kan bestämma sig i en blinkande öga vilken grupp de vill använda, och från och med då kan de ignorera de andra två. Det finns bara en grupp (“Ditt konto”, “Försök med Prime”, “Korg”, och “Önskelista”) som har undermenyer som också är logiskt strukturerade och de olika undermenygrupperna delas upp av diskreta men synliga separatorer för att hjälpa användarna att snabbt hitta vad de vill ha.

Skapa en effektiv visuell design

Den visuella utformningen av effektiv navigering måste följa den berömda KISS-principen (Keep It Simple, Dumbled). Det rekommenderas att tillhandahålla ikoner med textetiketter, göra kontroller ser ut som kontroller och visuellt betona de viktigaste åtgärderna. Det kan också vara en bra idé att skilja användbarhets- och innehållsbaserad navigering genom att använda en något annorlunda design.

Två bra exempel på effektiv visuell design finns på Walmarts och Etsys hemsida. Designers placerade nytta navigering på de översta av båda sidorna, och markerade den med färger som varierar från resten av navigationen, Walmart med en blå bakgrund och Etsy med blå teckensnitt.

Båda platserna betona de viktigaste användaråtgärderna med olika visuella designelement, Walmart använder gult för sök- och inloggningsknapparna, medan Etsy ger en diskret blå kant till inloggningsknappen och innehåller en grå kundvagnsikon ovanför kundvagnmenyn.

Det här är det enda stället där Etsy använder en ikon i verktygsmenyn, medan Walmart visar en ikon bredvid varje objekt, men glöm inte att inkludera nödvändiga textetiketter bredvid ikonerna.