Kotisivu » UI / UX » Utility Navigation Miten se vaikuttaa käyttäjäkokemuksen suunnitteluun

    Utility Navigation Miten se vaikuttaa käyttäjäkokemuksen suunnitteluun

    Jotta voisimme suunnitella tehokkaan ja käyttäjäystävällisen navigoinnin, meidän ei tarvitse vain ajatella miten ryhmittele sisältöä hyvin jäsenneltyihin valikoihin jotta käyttäjät voivat helposti löytää haluamansa, mutta myös siitä, miten suunnittele työkalut, joita he tarvitsevat vuorovaikutuksessa sivuston kanssa

    Siihen kutsutaan navigointia, joka ei liity tiukasti sisältöön ja auttaa käyttäjiä suorittamaan erilaisia ​​toimintoja apuohjelman navigointi, ja se on harvemmin keskusteltu, mutta erittäin tärkeä osa käyttäjäkokemuksen suunnittelua. Hakupalkit, kirjautumis- ja kirjautumislomakkeet, tilaus-, jakamis- ja tulostuspainikkeet, ostoskärryt, kontekstuaaliset valikot ja työkalut, joiden avulla käyttäjät voivat vaihtaa kieliä tai kirjasinkokoa, ovat tyypillisiä esimerkkejä hyödyllisestä navigoinnista.

    Niiden suunnittelu ei ole niin helppoa kuin ensi näkemältä näyttää vaatii harkitsemaan, mitä elementtejä tarvitsemme, missä ja miten niitä näytetään varmistaa, että kävijämme voivat nopeasti löytää ne ja ymmärtää, miten he toimivat.

    Miten Utility Navigation vaikuttaa UX: ään

    Kun suunnittelemme apuohjelmaa, meidän on päätettävä, miten haluamme, että käyttäjät ovat vuorovaikutuksessa sivuston kanssa. Meidän on annettava heille vuorovaikutuksen rakenne joka sopii liiketoimintamme tavoitteisiin, johtaa käyttäjiä asiakkaan matkan kautta, antaa heille helposti ymmärrettäviä vaihtoehtoja ja antaa heille miellyttävän käyttäjäkokemuksen.

    Ensinnäkin, heidän täytyy pystyä nopeasti suorittamaan haluamansa toimet. Jos mahdollistamme niiden tekemisen, asiakastyytyväisyys kasvaa, ja tyytyväiset käyttäjät viettävät enemmän aikaa ja rahaa verkkosivuilla.

    AirBnB: n kotisivulla noudatetaan tätä UX-periaatetta, ja sen ylävalikossa on vain apuohjelmia. Se ei ole tavallinen ratkaisu, mutta jos katsomme AirBnB: n uskomattoman kasvuvauhdin, se on täydellinen valinta heille.

    Neljän ylimmän valikkokohdan kohteena on neljä päähenkilöä, jotka tavallisesti vierailevat AirBnB: n sivustolla: ihmiset, jotka ovat kiinnostuneita tulemaan isännäksi (“Ryhdy isännäksi”) ihmiset, jotka haluavat ratkaista ongelman, joka tapahtui, kun he käyttivät palvelua (“auta”), uudet ja palauttavat käyttäjät (“Kirjaudu” ja “Kirjaudu sisään”). AirBnB: n apuohjelmaan keskittyvä kotisivu sisältää myös nopean hakupalkin, joka on ratkaiseva työkalu majoitusvuokraamossa.

    toiseksi, käyttäjät eivät tarvitse tarpeettomia apuohjelmia, koska liikaa sotkua häiritsee huomiota ja vähentää tarkennusta. Mitä työkaluja tarvitaan hyödyllisessä navigoinnissamme ja mitkä eivät ole riippuvaisia ​​sivustomme luonteesta. Esimerkiksi voi olla hyödyllistä sisällyttää tulostusnäkymä blogiin tai uutissivustoon, mutta sama ominaisuus voi olla tarpeetonta häiriötä foorumilautakunnassa tai sosiaalisen median sivustossa.

    Washington Post näyttää esimerkiksi apuohjelman navigoinnin yksittäisillä postisivuillaan eri tavalla kuin kotisivulla. Näin käyttäjät täyttävät vain apuvälineet, jotka ovat merkityksellisiä, eikä niissä ole vaihtoehtoja, joita he eivät halua käyttää joka tapauksessa.

    On 3 apuohjelmaa, joita kävijät voivat halutessaan käyttää koko sivustolla. Nämä ovat älykkäästi mukana kiinteässä yläpalkissa (hakutyökalu, “Kirjaudu sisään”, ja “merkitä”), mutta käyttäjien ei tarvitse ajatella vaihtoehtoja, jotka liittyvät yksittäisiin viesteihin, kuten “Lukulista” kun he selailevat kotisivua tai jotakin kategorian sivua.

    Kolmanneksi, käyttäjien on ymmärrettävä nopeasti, mitä he voivat tehdä sivustollamme. Vierailijat eivät välttämättä tiedä, mitä he haluavat, joten meidän on aina annettava heille tietoa niistä vaihtoehdoista, joita heillä on.

    Jos tarkastelet alla olevaa kuvakaappausta, voit nähdä, että The New York Times ilmoittaa käyttäjille kolmen eri version saatavuudesta: amerikkalainen, kansainvälinen, ja Kiinalainen, ja myös antaa heille mahdollisuuden vaihtaa nopeasti kolmen välillä. Tämä hieno esimerkki älykkäästä hyödyllisestä navigoinnista näyttää käyttäjille vähemmän ilmeisiä vaihtoehtoja, joita he luultavasti eivät löytäisi itsestään, ei-obstrussiivisesti ja tyylikkäästi.

    Etsi paras paikka

    Apuohjelman navigointiin on tyypillisiä sijoitteluja, joissa käyttäjät etsivät intuitiivisesti näitä työkaluja, koska ne ovat tottuneet useimpiin sivustoihin. Web-suunnittelukäytäntöjen rikkominen pidetään huonona käyttökokemuksena, ja se koskee erityisesti hyödyllisyysvalvontaa, joka useimmissa tapauksissa koskee enemmän kuin käytettävyyttä kuin luovuutta.

    Koska useimpien verkkosivustojen apuohjelman navigointi on toissijainen sisältöpohjaiselle navigoinnille, se sijoitetaan usein vähemmän näkyviin mutta silti näkyviin alueisiin. Tämä tarkoittaa yleensä (1) verkkosivujen oikeaa yläkulmaa ja alatunnisteen (2) alaosaa. Sen hyvä ajatus noudattaa näitä yleissopimuksia, kuten nämä ovat paikkoja, joissa useimmat käyttäjät etsivät ensin apuohjelmia.

    Kuten alla näet, Reuters on sijoittanut suurimman osan apuohjelmistaan ​​näihin kahteen tyypilliseen alueeseen, sivuston oikeaan yläkulmaan ja alatunnisteen alaosaan sisältöpohjaisen navigoinnin alapuolella. Ainutlaatuinen ratkaisu tässä on kiinteä ylimääräinen alatunniste, jossa on kaksi apuohjelmaa, jotka suunnittelijoiden mielestä ovat tärkeimmät: “Kirjaudu tai rekisteröidy” ja “Viimeisin My Wire”.

    On mielenkiintoista huomata, että ylimääräisen apuohjelman navigointialue on edelleen eräänlainen alatunniste, jossa käyttäjät tavallisesti etsivät samanlaisia ​​työkaluja, joten Reutersin suunnittelijat olivat luova tavalla mutta noudattaa edelleen web-suunnittelusopimuksia käytettävyyden ylläpitämiseksi.

    Rakenna looginen rakenne

    Apuohjelmien ryhmittäminen loogiseen rakenteeseen on tärkeää, jos haluamme rakentaa sivuston, jolla on korkea muuntokerroin. Tämä voi olla haaste, vaikka emme halua tarjota käyttäjille monia vaihtoehtoja, mutta Amazon ottaa hyödyllisyysavun monimutkaisuuden seuraavalle tasolle. Amazonilla on uskomattoman monimutkainen apuohjelma, jossa on monia vaihtoehtoja, mutta jos käytämme Amazonia riittävän säännöllisesti, se ei näy niin. Tämä on älykäs muotoilu.

    He eivät vain asettaneet apuohjelman navigointia oikeassa yläkulmassa, jossa käyttäjät odottavat löytävänsä sen, mutta ne jakoivat sen myös kolmeen pääryhmään: (1) hakupalkki, (2) käyttäjätietoja (hakupalkin alapuolella) ) ja (3) toimet, joita käyttäjät voivat suorittaa sivustolla.

    Se on älykäs, koska visuaalisten vihjeiden, kuten ostoskorin tai hakukuvakkeen ansiosta asiakkaat voivat päättää, mikä silmä on siinä ryhmässä, jota he haluavat käyttää, ja siitä lähtien he voivat jättää huomiotta kaksi muuta. On vain yksi ryhmä (“Tilisi”, “Kokeile Prime”, “kori”, ja “Toivelista”), jossa on myös loogisesti jäsennettyjä alavalikkoja, ja eri alavalikkoryhmät jaetaan huomaamattomilla mutta näkyvillä erottimilla, joiden avulla käyttäjät voivat nopeasti löytää haluamansa.

    Luo tehokas visuaalinen suunnittelu

    Tehokkaan navigoinnin visuaalisen suunnittelun on noudatettava kuuluisaa KISS-periaatetta (Keep It Simple, Stupid). On suositeltavaa antaa kuvakkeita tekstimerkinnöillä, tehdä säätimistä tarkastuksia ja korostaa visuaalisesti tärkeimpiä toimia. Se voi myös olla hyvä idea erottaa hyödyllisyys- ja sisältöpohjainen navigointi käyttämällä hieman eri muotoilua.

    Walmartin ja Etsyn verkkosivuilta löytyy kaksi suurta esimerkkiä tehokkaasta visuaalisesta suunnittelusta. Suunnittelijat sijoittivat hyödyllisyysavun molempien sivustojen ylimmälle puolelle ja korostivat sitä väreillä, jotka vaihtelevat muusta navigoinnista, sinisellä pohjalla olevasta Walmartista ja sinistä fonttia sisältävästä Etsysta.

    Molemmat sivustot korostavat tärkeimpiä käyttäjätoimintoja eri visuaalisten elementtien avulla, Walmart käyttää keltaista hakua ja kirjautumispainikkeita, kun taas Etsy antaa huomaamattoman sinisen reunan Kirjaudu sisään -painikkeeseen, ja sisältää harmaa ostoskorin kuvakkeen Ostoskorin valikon yläpuolella.

    Tämä on ainoa paikka, jossa Etsy käyttää apuohjelman valikossa kuvaketta, kun taas Walmart näyttää kuvakkeen kunkin kohteen vieressä, mutta ei kuitenkaan unohda sisällyttää tarvittavia tekstimerkintöjä kuvakkeiden vieressä.