Sinun navigointi-valikko tekee tai katkaisee verkkosivustosi UX: n, joka sinun tulisi ensisijaisesti suunnitella kaikkina aikoina. Ei ole parempaa palvelua, jota voit tarjota asiakkaillesi suunnittelijana, kuin sen varmistamiseksi, että niille rakennetuilla sivustoilla on upea ja erittäin toimiva käyttökokemus.

Loistava UX takaa, että asiakkaasi sivustot saavat lisää viestejä, kävijöitä ja lukijoita, puhumattakaan säännöllisten kävijöiden säilyttämisestä. Se on tärkein osa sivuston luomista ja sinulla on suuri määräysvalta sen perusteella, miten suunnittelet sivustosi navigointivalikkoa.

Valitettavasti kaikki suunnittelijat eivät aseta suurta painoarvoa suunnittelemaan erinomaista navigointia, mikä tekee palvelua asiakkaille ja vierailijoille.

Luodaksesi erittäin uskottavan maineen suunnittelija-ja olla vaatimaton suunnittelija-sinun täytyy hallita yksi peruspiirteistä web design. Tämä luo tähtienvälisen navigoinnin asiakkaasi sivustoille.

Näin on.

Sticky navigointi

Sticky navigointi on navigointimenettelyn olennainen osa, koska se antaa käyttäjille mahdollisuuden päästä valikkoon heti ja löytää helposti haluamasi sivustosi. Sticky-navigointi pysyy paikallaan, kun käyttäjät selaa sivua alaspäin. Ei ole mitään turhauttavaa - varsinkin jos on kyse pitkästä rullata olevista sivuista - kuin selata koko matkaa uudelleen, jotta voit siirtyä sivun toiseen sivuun.

Muista, että verkossa nopeus on kaikki (latausmateriaalin lataaminen, haluamasi sisällön löytäminen jne.), Jotta käyttäjät voivat siirtyä navigointivalikkoon nopeammin.

Lisäämällä tahmea navigointipalkki auttaa myös vähentämään käyttäjien kognitiivista kuormaa asettamalla navigointivalinnat jatkuvasti eteenpäin.

Vaihtoehtoinen lehdistö on hyvä esimerkki siitä, miten tarttuva navigointi sisällytetään sivuillesi. Huomaa, kuinka kaikki tärkeimmät osat ovat helppokäyttöisiä ja tunnistettavissa tehokkaalla värinkontrastilla navigointipalkissa riippumatta siitä, kuinka pitkälle vierität sivua alaspäin.

Vaihtoehtoinen-Press-Screen-Shot

Ilmeinen hyperteksti

Hyperteksti on sivujesi tekstiviite, jonka käyttäjät voivat klikata saadakseen lisätietoja, tavallisesti toisella sivulla, olipa kyse samasta sivustosta tai off-site-sivustosta. Hyperlinkit ovat luultavasti tunnistettavissa oleva hypertekstin esimerkki.

Koska hyperteksti sisältää tietoja, jotka auttavat käyttäjäkokemusta antamalla lisää tietoa, on vain syytä ymmärtää, että tällaiset hyödylliset viitteet ovat hyvin havaittavissa. Kaiken kaikkiaan tämä lisää sivuston rakentamista.

Suosittelen, että hypertekstistä paljastuu kaksi yksinkertaista, muotoilua:

  • alleviivaus
  • Värin vaihtaminen

Kun painat sanaasi sivusi sisällöstä - sanotaan, että se on hyperlinkki asiakkaasi sivuun - se kiinnittää välittömästi sivuston kävijöiden huomion, mikä auttaa heitä navigoimaan tärkeisiin tietoihin helpommin.

Samoin, kun teet hyperlinkien värin eri kuin sivusi tekstin ja taustan, anna jälleen erottua sivulle, jotta käyttäjät voivat helposti tunnistaa ja napsauttaa sitä.

Markkinointipaikka Daily Muna käyttää sekä alivaihtoehtoja että eri värejä sen hypertekstissä, jolloin käyttäjät voivat helposti tunnistaa linkkejä.

The-Daily-Muna-Screen-Shot

Mega-valikot

Mega-valikot on hyvä idea navigointiin, varsinkin jos asiakkaalle suunnittelemasi sivusto on paljon sisältöä ja luokkia. Verkkokaupat tulevat mieleen. Nämä ovat olennaisesti valtavia, pudotuspaneeleja, jotka avaavat ylimääräisiä navigointikerroksia auttaakseen käyttäjiä löytämään nimenomaan haluamansa nopeammin.

Tällaiset valikot parantavat käyttökokemusta tuomalla edut, kuten:

  • rullaamisen poistaminen;
  • työkaluvihjeet;
  • sisällön järjestäytyminen kuvakkeiden, ulkoasun tai typografian avulla.

Kaiken kaikkiaan nämä ominaisuudet helpottavat navigointivalikon käyttöä.

Vahva esimerkki mega-valikosta päätä kohtaan Ruokaverkosto Sivustolla. Huomaa, miten flyout-valikko näyttää yhden sivuston haetuimmista osista - reseptit - helposti nähtävissä olevassa muodossa, jonka avulla käyttäjät voivat välittömästi valita, mihin he haluavat mennä vierittämällä tai sivuttamalla sen sijaan, että lisää vaihtoehtoja.

Ruoka-verkko-Screen-Shot

Kuvio ja kieliominaisuudet

Kuvion edullisuus on tavanomainen symboli, jonka suurin osa sivuston kävijöistä ymmärtää välittömästi, kuten kodin kuvake, joka edustaa sivustosi kotisivua. Kielitaito on sana nimenomainen käyttö, kuten "koti", selventää, että kyseisen välilehden klikkaaminen tuo käyttäjiä sivuston etusivulle.

Tilaukset ilmoittavat käyttäjille, miten he voivat vuorovaikuttaa suunnittelusi elementtien kanssa. Vaikka tämä on varmasti Design Basics 101, se on yhtä tärkeää harjoitella tänään kuin Internetin alkuvaiheessa.

Toimiva navigointivalikossa pitäisi olla talon symboli tai sana "koti", joka sijaitsee vasemmalla ensimmäisellä navigointipaneelilla. Vaikka jotkut suunnittelijat voivat sen sijaan valita yrityksen logoa "koti" -kuvakkeena tai -painikkeena, se jättää liikaa tilaa käyttäjän virheelle.

Etailer Kehysvarasto osoittaa tämän suunnitteluperusteen tee, jossa käytetään "koti" jättää epäilemättä, missä välilehti vie sivuston kävijöitä.

Frame-Varasto-Screen-Shot

Nopea latausaika

Nopeus = hieno käyttäjäkokemus. Kaikkien raidoittajien suunnittelijoiden on pidettävä kiinni yhtenä tärkeimmistä suunnittelusäännöistä, joita he eivät yksinkertaisesti pysty ja eivät saa hylätä. Mukaan Wired Magazine , lähes 50% kuluttajista haluaa keskimääräisen sivun latautuvan vähintään kaksi sekuntia! Toinen tapa, jos asiakkaillesi suunnitellut sivut kestävät kauemmin kuin kaksi sekuntia ... on todella hyvät mahdollisuudet, että he jättävät asiakkaidesi sivustoja ja eivät koskaan palaa aiheuttaen näin vakavia tulonmuodostuksen.

Tämä on huolestuttavaa tilastotietoa, mutta jotain suunnittelijat voivat tehdä sen varmistaakseen, että he tarjoavat asiakkailleen korkealaatuisia sivujen suorituskykyä. Yksinkertaisesti testata suunnittelemiesi sivujen nopeusnopeutta. On olemassa useita luotettavia työkaluja, joiden avulla voit määrittää sivun latausaikoja:

Esimerkkinä erittäin nopeasta sivun latausaikasta menemme Enchanted Learning -ohjelmaan Mikä on valas? sivu. Suunnittelu voisi käyttää jotain työtä, mutta sivu latautuu hieman yli sekunnissa Alexa-analyysityökalupalkin mukaan.

Enchanted-Learning-Screen-Shot

Suuri navigointi on hieno UX

Suuri osa hyvää käyttökokemusta on sivustosi navigointi. Se on perusta, jolla koko käyttökokemus on, jos todella ajattelet sitä. Kun käyttäjät eivät pääse helposti asiakkaan sivustoon, heistä tulee turhauttavaa, jolloin he voivat lähteä kiireellisiksi. Siksi erinomaisen navigoinnin pitäisi helpottaa ihmisten käyttämistä sivustolla, jonka luot; se on hieno käyttäjäkokemus.

Vaikka se voi olla houkuttelevaa antaa navigointi lyhyt takaisku suunnitteluvaiheessa - koska uudet suunnittelutrendit popping koko ajan - se ei ole suositeltavaa. Käyttäjät huomaavat, samoin kuin asiakkaillesi. Asiakkaidesi miellyttämiseksi sinun on tyydytettävä heidän käyttäjiään. Voit tehdä sen vain silloin, kun suunnittelet suurta käyttäjäkokemusta ensi sijassa ja ensisijaisesti painotat navigoinnin aloittamista.