5 älykästä vaihtoehtoa hampurilainen-valikkoon
Näytön tila on arvokas resurssi mobiililaitteessa. Jotta pienikokoisen näytön tilaa haasteesta saataisiin yhä helpottamaan navigointia, suunnittelijat luottavat usein navigoinnin piilottamiseen hampurilaisen kuvakkeen takana, mikä on erinomainen esimerkki piilotetusta navigoinnista. Tässä artikkelissa näemme, miksi piilotettu navigointi aiheuttaa huonoja UX: ää ja mitä vaihtoehtoja suunnittelijoille on saatavilla.
Miksi Hampurilaisvalikko on huono UX: lle
Mobiililaitteessa näkyvää navigointia käytetään 1,5 kertaa enemmän kuin hampurilais
Jos olet tekemässä digitaalisia tuotteita, olet luultavasti jo lukenut kymmeniä artikkeleita, jotka kuvaavat kuinka hampurilainen valikko mobiililaitteessa vahingoittaa UX-tietoja. Tärkein haittapuoli on sen alhainen havaittavuus, ja tätä tukee todelliset numerot. Laadullisissa tutkimuksissa, NNGroup löytyi piilotettu navigointi on vähemmän havaittavissa kuin näkyvä tai osittain näkyvä navigointi. Tämä tarkoittaa, että navigoinnin ollessa piilossa käyttäjät eivät todennäköisesti käytä navigointipalveluja. Hampurilaiset valikot auttavat sitoutumista, hidastavat etsintää ja hämmentävät ihmisiä.
Joten mitä meidän pitäisi käyttää sijasta?
Vaikka mobiilisovelluksissa ja verkkosivustoissa ei ole kovia ja nopeita sääntöjä, yleinen suositus on käyttää joko näkyviä - tärkeimmät navigointiasetukset näkyvät näkyvillä navigointipalkissa - tai yhdistelmäavigointi , jossa jotkin päävalintavaihtoehdot ovat näkyvissä ja jotkut piilotetaan interaktiivisen elementin alle.
1. Välilehti
Jos sivustossasi tai sovelluksessasi on rajallinen määrä ylätason kohteita, välilehtien navigointi saattaa olla ratkaisu. Kun valikko on näkyvissä ylä- tai alareunassa, se ilmoittaa, että navigointi on olemassa ja ihmiset voivat nähdä navigointiasetukset heti alusta alkaen.
Välilehdet näyttävät olevan yksinkertaisin navigointikuvio. Kuitenkin muutamia asioita pitäisi ottaa huomioon tämäntyyppisen navigoinnin suunnittelussa:
- Välilehtipalkki näyttää 5 tai vähemmän navigointiasetuksia.
- Yksi vaihtoehdoista on aina oltava aktiivinen, ja sen pitäisi näkyä visuaalisesti esimerkiksi käyttämällä kontrastia väriä.
- Ensimmäisen välilehden on oltava kotisivun ja välilehtien järjestyksen tulisi liittyä niiden ensisijaiseen tai loogiseen järjestykseen käyttäjän virtauksessa.
- On parasta käyttää kuvakkeita yhdessä tarrojen kanssa jokaisen navigointivaihtoehdon kanssa. Kuvakkeet, joissa ei ole tarroja, toimivat vain yhteisten toimintojen, kuten suurennuslasi -kuvaketta varten, ja käyttäjien usein käyttämille rajapinnoille (esim. Instagram).
Vihje: Näyttötilan säästämiseksi navigointipalkki saatetaan piilottaa / paljastaa alaspäin ja ylöspäin vierittämällä.
2. Välilehtipalkki "Lisää" -vaihtoehdolla
Kun sinulla on yli 5 ylätason määränpäätä, käytännön ratkaisu saattaa olla näyttääksesi neljä priorisoitua osaa ja olla viides elementti luettelona jäljellä olevista vaihtoehdoista.
Tämän ratkaisun suunnitteluperiaatteet ovat periaatteessa samanlaiset kuin Tab-palkki. Vain yksi poikkeus: viimeinen elementti on "enemmän" kohde.
Lisää osa voi toimia pudotusvalikosta tai jopa linkittää erilliseen navigointisivulle jäljellä olevien osien kanssa. Ensimmäisestä silmäyksestä tämä ratkaisu ei ole paljon parempaa kuin hampurilaisvalikosta, koska se piilottaa myös sisällön ja sen etiketti ei sano liikaa siitä, mitä sen takana on. Jos valitset oikein navigointivaihtoehdoista, useimmilla käyttäjillä on kuitenkin 4 tai 5 näkyvää ensisijaista navigointivaihtoehtoa näytöllä koko ajan, jotta niiden navigointikokemusta parannetaan.
3. Progressively Collapsing -valikko
Menetelmä, joka tunnetaan myös nimellä "Priority +" -kuvio, on valikko, joka mukautuu ruudun leveyteen. Se näyttää niin paljon navigoinnin kuin mahdollista ja asettaa kaiken kaiken alle "lisää" -painiketta. Pohjimmiltaan tämä kuvio on hienostunut versio "Tab bar + more" -navigoinnista, jossa "lisää" -valikon taustalla olevien navigointiominaisuuksien määrä riippuu käytettävissä olevasta näytön tilasta. Tämän ratkaisun joustavuus tarjoaa paremman käyttökokemuksen kuin 'staattinen' 'välilehtipalkki + enemmän'.
4. vieritettävä navigointi
Samanlainen kuin edelliset kaksi mallia, tämä on toinen lähestymistapa pitempiin luetteloihin. Jos sinulla on useita navigointivaihtoehtoja ilman suurta eroa prioriteeteissa, esimerkiksi musiikkielementeissä, voit luetella kaikki kohteet vieritettävässä näkymässä. Luomalla luettelon vieritettäessä voit sallia käyttäjien siirtyvän sivulta toiselle.
Tämän ratkaisun huono puoli on se, että vain muutamat alimmat kohteet näkyvät ilman vieritystä ja kaikki jäljellä olevat ovat poissa näkyvistä. Tämä on kuitenkin hyväksyttävä ratkaisu, kun käyttäjien odotetaan tutkivan sisältöä, esimerkiksi uutisluokkia, musiikkiluokkia tai verkkokauppaa.
5. Koko näytön navigointi
Vaikka tässä artikkelissa mainituissa muissa kuvioissa taistelu on navigointijärjestelmien avaruuden minimoimiseksi, koko näytön kuvio on täysin päinvastainen. Tämä lähestymistapa yleensä käyttää kotisivua yksinomaan navigointiin. Käyttäjät napautuvat tai pyyhkäisevät portaittain, jotta paljastavat ylimääräiset valikkovaihtoehdot vierittämällä ylös ja alas.
Tämä malli toimii hyvin tehtäviä ja suunta-pohjaisia verkkosivustoja ja sovelluksia, varsinkin kun käyttäjät pyrkivät rajoittamaan itseään vain yhden haaran navigointihierarkia yhden istunnon aikana. Käyttäjien siirtyminen laajoista yleiskatsaus sivuista yksityiskohtaisiin sivuihin auttaa heitä pääsemään etsimään ja keskittymään yksittäisen osion sisältöön.
Koko näytön navigointi Yelpissa
Koko näytön navigoinnin avulla suunnittelijat voivat organisoida suuria osia informaatiosta johdonmukaisesti ja paljastaa tietoja ilman, että käyttäjä ylittää. Kun käyttäjä tekee päätöksen siitä, minne mennä, voit koko näyttötilaa kohdentaa sisältöön.
johtopäätös
Matkaviestinnän navigaatiomalleilla ei ole yhtä kokoa sopiva ratkaisu; se riippuu aina tuotteestasi, käyttäjillesi ja kontekstista. Jokaisen hyvin suunnitellun navigoinnin perusta on kuitenkin tietoarkkitehtuuri: selkeä rakenne, prioriteetit ja tarrat käyttäjien tarpeiden mukaan. Käyttäjien navigoinnin auttamisen olisi oltava kaikkien sovellusten suunnittelijoiden ensisijainen tavoite. Sekä ensimmäistä että paluuta käyttävien pitäisi pystyä selvittämään, miten voit siirtyä sovelluksestasi helposti.