Hulpprogramma Navigatie Hoe dit het Ontwerp van Gebruikerservaringen beïnvloedt

Om een ​​effectieve en gebruikersvriendelijke navigatie te ontwerpen, hoeven we niet alleen na te denken over hoe groepeer onze inhoud in goed gestructureerde menu's om gebruikers in staat te stellen gemakkelijk te vinden wat ze willen, maar ook over hoe ze dat kunnen doen ontwerp de hulpmiddelen die ze nodig hebben om met de site te communiceren

Navigatie die niet strikt gerelateerd is aan de inhoud en waarmee gebruikers verschillende acties kunnen uitvoeren, wordt genoemd hulpprogramma navigatie, en het is een minder vaak besproken maar enorm belangrijk aspect van het ontwerpen van gebruikerservaringen. Zoekbalken, aanmeldings- en aanmeldingsformulieren, abonneer-, deel- en afdrukknoppen, winkelwagentjes, contextuele menu's en hulpmiddelen waarmee gebruikers kunnen schakelen tussen talen of lettertypegrootte zijn typische voorbeelden van hulpprogramma-navigatie.

Het ontwerpen van hen is niet zo eenvoudig als het op het eerste gezicht lijkt aandacht vereist om erachter te komen welke elementen we nodig hebben, waar we moeten plaatsen en hoe we ze moeten weergeven om ervoor te zorgen dat onze bezoekers ze snel kunnen vinden en begrijpen hoe ze werken.

Hoe hulpprogramma navigatie invloed heeft op UX

Wanneer we utility-navigatie ontwerpen, moeten we bepalen hoe we willen dat onze gebruikers met onze site communiceren. We moeten hen voorzien van een interactiestructuur dat past bij onze bedrijfsdoelen, leidt gebruikers door de customer journey, geeft hen gemakkelijk te begrijpen opties en voorziet hen van een aangename gebruikerservaring.

Allereerst, ze moeten in staat zijn om snel de acties uit te voeren die ze willen. Als we hen in staat stellen om dit te doen, zal de klanttevredenheid groeien, en tevreden gebruikers hebben de neiging om meer tijd en meer geld aan websites te spenderen.

De startpagina van AirBnB volgt dit UX-principe en het bovenste menu bevat alleen hulpprogramma's. Het is geen gebruikelijke oplossing, maar als we de ongelooflijke groeisnelheid van AirBnB bekijken, is dit de perfecte keuze voor hen.

De 4 belangrijkste menu-items zijn gericht op de 4 belangrijkste persona's die meestal de website van AirBnB bezoeken: mensen die geïnteresseerd zijn om een ​​host te worden (“Word een gastheer”), mensen die een probleem willen oplossen dat plaatsvond terwijl ze de service gebruikten (“Helpen”), nieuwe en terugkerende gebruikers (“Inschrijven” en “Log in”). AirBnB's utility-gerichte startpagina bevat ook een snelle zoekbalk die een cruciale tool is op een huurwebsite voor accommodatie.

ten tweede, gebruikers hebben geen overbodige hulpprogramma's nodig, omdat te veel rommel de aandacht afleidt en de focus vermindert. Welke hulpmiddelen zijn nodig in onze hulpprogramma-navigatie en wat zijn niet afhankelijk van de aard van onze site. Het kan bijvoorbeeld handig zijn om een ​​afdrukweergave op een blog of een nieuwssite op te nemen, maar dezelfde functie kan een onnodige afleiding zijn op een forumbord of een sociale media-website..

Washington Post toont bijvoorbeeld de hulpprogramma-navigatie op de afzonderlijke berichtpagina's anders dan op de startpagina. Op deze manier ontmoeten gebruikers alleen hulpmiddelen die relevant zijn en worden niet lastig gevallen met opties die ze toch niet zouden willen gebruiken.

Er zijn 3 hulpprogramma-navigatie-items die bezoekers mogelijk willen gebruiken voor de hele site. Deze zijn slim opgenomen in de vaste balk bovenaan (zoekhulpmiddel), “Aanmelden”, en “abonneren”), maar gebruikers hoeven niet na te denken over opties met betrekking tot afzonderlijke berichten, zoals “Lees lijst” wanneer ze op de startpagina of een van de categoriepagina's bladeren.

Ten derde, gebruikers moeten snel begrijpen wat ze op onze site kunnen doen. Bezoekers hoeven niet per se te weten wat ze willen, dus we moeten hen altijd informeren over de opties die ze hebben.

Als u de onderstaande schermafbeelding bekijkt, ziet u dat The New York Times gebruikers informeert over de beschikbaarheid van 3 verschillende edities: Amerikaans, Internationale, en Chinese, en stelt hen ook in staat om snel schakelen tussen de drie. Dit geweldige voorbeeld van slimme hulpprogramma-navigatie toont gebruikers minder voor de hand liggende opties die ze waarschijnlijk niet alleen zouden vinden, op een niet-obstrusieve en elegante manier.

Vind de beste plaats

Er zijn typische plaatsingen voor hulpprogramma-navigatie waar gebruikers intuïtief op zoek zijn naar deze hulpmiddelen, daar zijn ze op de meeste websites aan gewend. Het verbreken van webdesignconventies wordt beschouwd als slechte praktijk van gebruikerservaringen, en dit geldt vooral voor hulpprogramma-navigatie die in de meeste gevallen meer te maken heeft met bruikbaarheid dan met creativiteit..

Omdat utility-navigatie op de meeste websites ondergeschikt is aan op inhoud gebaseerde navigatie, wordt deze vaak op minder prominente maar nog steeds zichtbare plaatsen geplaatst. Dit betekent meestal de (1) rechterbovenhoek van websites en het (2) onderste deel van de voettekst. Haar een goed idee om deze conventies te volgen, zoals dit zijn de plaatsen waar de meeste gebruikers eerst naar hulpprogramma's zoeken.

Zoals je hieronder kunt zien, heeft Reuters de meeste hulpprogramma's in deze twee typische gebieden geplaatst, de rechterbovenhoek van de site en het onderste deel van het voetgedeelte onder de op inhoud gebaseerde navigatie. De unieke oplossing hier is de vaste extra footer met 2 hulpprogrammaonderdelen waarvan ontwerpers dachten dat die het belangrijkst waren: “Log in of Registreer” en “Nieuwste van My Wire”.

Het is interessant om op te merken dat het extra hulpprogramma-navigatiegebied nog steeds in een soort footer wordt geplaatst waar gebruikers normaal gesproken naar vergelijkbare tools zouden zoeken, dus de ontwerpers van Reuters waren creatief op een manier maar nog steeds webconventies gevolgd om de bruikbaarheid te behouden.

Bouw een logische structuur

Toolhulpprogramma's groeperen in een logische structuur is cruciaal als we een site willen bouwen met een hoge conversieratio. Dit kan een uitdaging zijn, zelfs als we gebruikers niet veel opties willen bieden, maar Amazon neemt de complexiteit van hulpprogramma-navigatie naar een hoger niveau. Amazon heeft een ongelooflijk ingewikkelde hulpprogramma-navigatie met veel opties, maar als we Amazon regelmatig genoeg gebruiken, lijkt het niet zo. Dit is de magie van slim ontwerp.

Ze plaatsten niet alleen de gebruikersnavigatie in de rechterbovenhoek, waar gebruikers het verwachten te vinden, maar ze verdeelden het ook in 3 hoofdgroepen: (1) een zoekbalk, (2) gebruiker-gerelateerde informatie (onder de zoekbalk ) en (3) acties die gebruikers op de site kunnen uitvoeren.

Het is slim omdat klanten, dankzij de visuele aanwijzingen zoals het winkelwagentje of het zoekpictogram, in een oogwenk kunnen beslissen welke groep ze willen gebruiken, en vanaf dat moment kunnen ze de andere twee negeren. Er is maar één groep (“Jouw rekening”, “Probeer Prime”, “Mand”, en “Wenslijst”) met submenu's die ook logisch zijn gestructureerd, en de verschillende submenugroepen zijn gescheiden door discrete maar zichtbare scheidingstekens om gebruikers te helpen snel te vinden wat ze willen.

Creëer een effectief visueel ontwerp

Het visuele ontwerp van effectieve utiliteitsnavigatie moet het beroemde KISS-principe (Keep It Simple, Stupid) volgen. Het wordt aanbevolen om pictogrammen te voorzien van tekstlabels, zodat besturingselementen op bedieningselementen lijken en de belangrijkste acties visueel te benadrukken. Het kan ook een goed idee zijn om hulpprogramma- en inhoudgebaseerde navigatie te onderscheiden door een iets ander ontwerp te gebruiken.

Twee geweldige voorbeelden van effectief visueel ontwerp zijn te vinden op de website van Walmart en Etsy. Ontwerpers plaatsten utility-navigatie op de bovenste helft van beide sites en markeerden deze met kleuren die varieerden van de rest van de navigatie, Walmart met een blauwe achtergrond en Etsy met blauwe lettertypen.

Beide sites benadruk de belangrijkste gebruikersacties met verschillende visuele ontwerpelementen, Walmart gebruikt geel voor de knoppen Zoeken en Aanmeldingen, terwijl Etsy een discrete blauwe rand geeft aan de knop Aanmelden en bevat een grijs winkelwagentjepictogram boven het menu Cart.

Dit is de enige plaats waar Etsy een pictogram in het gebruikermenu gebruikt, terwijl Walmart een pictogram naast elk item weergeeft, maar vergeet toch niet om de benodigde tekstlabels direct naast de pictogrammen op te nemen.