Navigointikuvioita kymmeneen yleiseen tyyppisiin verkkosivustoihin
Navigointi on yksi verkkosivujen tärkeimmistä näkökohdista. Ilman hyvää navigointia sivusto tulee hyödytön vierailijoille. He eivät löydä tarvitsemiaan tietoja, vaan etsivät sen sijaan kilpailevia sivustoja. On erittäin tärkeää, että sivustosi on helppo navigoida, jos haluat olla onnistunut suunnittelija.
iMutta ei ole olemassa yhden kokoisia ratkaisuja navigointiin. Mikä toimii hyvin uutissivustossa, ei välttämättä toimi hyvin henkilökohtaiselle sivustolle. Jotain, joka on erittäin käyttäjäystävällinen blogissa, saattaa olla turhauttavaa sähköisen kaupankäynnin sivustolla.
Alla on kymmenen yleistä verkkosivustoa, joissa on ehdotuksia sellaisista navigointimalleista, jotka toimivat hyvin jokaiselle.
On myös esimerkkejä, jotka antavat sinulle paremman käsityksen siitä, mistä puhumme. Voit jakaa parempia esimerkkejä kommentteihin!
Kaikki sivustot
On olemassa tiettyjä navigointikuvioita, jotka toimivat lähes kaikilla sivustoilla. Sen sijaan, että uudelleen jakattaisiin samat tiedot kustakin alla olevista luokista, liittäisin ne vain tänne.
Ensimmäinen kuvio on välilehtien navigointi. Välilehdet sopivat täydellisesti navigointiin, koska ne muistuttavat psykologisesti paperiliittimien kävijöitä ja siirtyvät uuden kannen tai sideaineen osiin, jotain, mitä painikkeet tai tavalliset tekstilinkit eivät tee. Välilehdet ovat melkein aina suosituin keino muotoilla tärkeimpiä navigointiyhteyksiä, mutta tietenkin ne toimivat parhaiten, kun valikossa on rajallinen määrä linkkejä.
Toinen kuvio on otsikon navigointi. Jos sivustossasi on otsikko (ja useimmat sivustot tekevät), otsakkeen navigointi on hyvä idea. Vierailijat ovat tottuneet tarkastelemaan navigointiyhteyksien otsikkoa. Tämä ennalta määrätty käytös tekee sivustosi helpommaksi tekemällä verkkosivustosi helppokäyttöisemmäksi sijoittamalla navigoinnin otsikon sisällä tai lähellä.
Lopullinen malli, joka koskee lähes kaikkia sivustoja, on alatunnisteen navigointi. Monet käyttäjät (mutta eivät kaikki) katsovat linkin alatunnistetta, jos he eivät löydä etsimääsi toisesta navigointiasi. Useat perussivut on usein linkitetty alatunnisteelta, kuten "noin", "yhteystiedot" ja "sivukartta" -linkit riippumatta siitä, ovatko ne linkitetty muualle navigointiin vai eivät.
1. Blogit
Blogeilla on yleensä paljon sisältöä, käänteisessä aikajärjestyksessä. Tämä sisältää sekä loogisen puitteet navigointiin että eräisiin ainutlaatuisiin haasteisiin blogin tyypistä riippuen.
Useimmat blogit käyttävät yhdistelmää sivutunnistuksesta (tai jatkuvasta vierittämisestä), arkistosivusta, sivupalkin navigoinnista luokkiin ja / tai tunnisteisiin sekä mahdollisesti otsikon ja alatunnisteen navigointiin. On tärkeää ajatella tarkalleen miten kävijät todennäköisesti haluavat käyttää blogissasi olevaa sisältöä.
Esimerkiksi henkilökohtainen blogi ei välttämättä tarvitse luokan tai tunnisteen navigointia linkkien ulkopuolelle jokaisen viestin sisällönkuvauksessa. Näissä tapauksissa haluat, että kävijät pääsevät sisältöön käänteisen kronologisen järjestyksen puitteissa, eikä hyppäämällä aiheittain. Aihepiirissä on toisaalta oltava luokkien ja merkintöjen navigointi, koska kävijät todennäköisesti etsivät tietoa tietyistä aiheista yleisai- heessa.
Pienimmillään blogeilla pitäisi olla navigointi, joka kulkee kronologisesti sisällön kautta (joko sivutunnistus, seuraava / edellinen linkki tai jatkuva vieritys) sekä otsakkeen tai sivupalkin navigointi tietyille sivuille tärkeimmän blogin sivun ulkopuolella.
Aiheen (ja joskus yritysten) blogeissa pitäisi olla myös otsikko- tai sivupalkissa luokka- tai tagien valikoita. Erityisen suuria blogeja tulisi myös harkita hakutoiminnon käyttöönottamiseksi, jotta käyttäjät voivat helpommin löytää täsmälleen mitä he etsivät. Varmista vain, että hakutoiminto toimii tarkoitetulla tavalla ja tuo todella kaikki asiaankuuluvat tulokset.
Ecoki , alla, sisältää ylätason luokkia otsikon navigointiin, navigoinnin tärkeisiin sivuihin toissijaisen otsikon navigointipalkissa. Se on tehokas asettelu, joka selvästi korostaa useimmin käytettyjä linkkejä.
2. Uutissivustot
Uutissivustot ovat samanlaisia kuin blogit, koska ne yleensä esittävät tarinoita käänteisessä aikajärjestyksessä. Uutissivustot ovat usein hyvin luokiteltuja, ja niillä on monimutkaisempi tietorakenne kuin monilla muilla sivustoilla. Tämän vuoksi niiden navigaatiomallit ovat usein monimutkaisempia.
Avain ei auta navigointia monimutkaisemmaksi kuin sen täytyy olla. Pudotusvalikot ja -lähtövalikot ovat molemmat hyviä tapoja käsitellä suurempia valikkoja ilman, että sivut häiritsevät. Jos katsot laajempia uutissivustoja (kuten esimerkiksi Google Newsin alla), ne jakavat uutiset laajaan luokkaan, kuten politiikkaan, paikalliseen, maailmaan, urheiluun, viihdeohjelmaan jne. Mitä kategorioita käytät riippuu siitä, onko sivusto on yleinen uutissivusto tai ajankohtainen uutissivusto.
Tunnisteet voivat myös parantaa navigointia merkittävästi. Tunnistamalla kunkin tarinan avulla käyttäjät voivat helposti löytää tarinoita luomatta monimutkaista tai paisutettua luokkarakennetta. On hyvä, että artikkeliin ei liity ainoastaan tag-linkkejä, vaan sisällytetään myös tagitunniste tai tag-pilvi (vain suosituimmat tunnisteet voivat olla hyvä sivustoille, joissa on satoja tunnisteita).
Linkittäminen artikkeleihin sisäisesti parantaa käyttäjien kokemuksia huomattavasti. Monet suurimmista uutissivustoista tekevät tämän, jolloin käyttäjät voivat heti päästä käsiksi kaikkiin aiheeseen liittyviin artikkeleihin. Se on hyvin samanlainen kuin tunnisteiden lisääminen, mutta sen sijaan, että artikkeli on alussa tai lopussa, linkit ovat itse tekstin sisällä.
3. Verkkokauppasivustot
Verkkokauppasivustot ovat joskus erittäin monimutkaisia ja niissä on satoja (tai tuhansia) yksittäisiä sivuja tuotteisiin ja muihin tietoihin. Tästä syystä, miten navigointia hoidetaan, on elintärkeää sekä käyttökokemukselle että alimmalle riville. Ilman erinomaista navigointirakennetta sähköisen kaupankäynnin sivuston kävijöillä on vaikeampi aika löytää etsimäsi tuotteita, mikä tarkoittaa, että heillä on hyvät mahdollisuudet kääntyä kilpailijoihin turhautumisen vuoksi.
Tärkeintä jokaisessa verkkokaupassa, jossa on enemmän kuin kourallinen tuotteiden tarpeita, on hyvä hakujärjestelmä. Avustettu haku on avain, jossa käyttäjät eivät voi vain etsiä avainsanoilla, vaan myös tarkentaa niiden tuloksia hinnan, koon, luokan tai muiden tietojen perusteella (tiettyjen tuotteiden mukaan).
Luokka navigointi on myös oltava käyttäjille, jotka haluavat selata. Riippuen siitä, käytätkö alaluokkia, myös breadcrumb-navigointi voi olla hyvä idea (jos sivustosi on yli kaksi tai kolme tasoa syvälle, leipäpalaset voivat parantaa käytettävyyttä).
Antaa kävijöille useita tapoja löytää haluamasi tuotteet on erinomainen tapa lisätä myyntiä, mutta varmista, että jokainen menetelmä näyttää kaikki asiaankuuluvat tuotteet. Jos kävijät havaitsevat, että haku palauttaa yhden tuotesarjan selaamisen aikana, se palauttaa toisen joukon, se vain johtaa turhautumiseen.
Blik Blik alla oleva sivusto on erinomainen esimerkki sivustosta, joka käyttää sivupalkkia suodattimilla tuotetulosten tarkentamiseksi. Se on ohjattu hakukuvio ilman hakua.
4. Tieto- ja viitetietokannat
Viitesivustoilla on yleensä yksi yhteinen asia: tietojoukko on paljon sivuja. Tämän ansiosta on vaikeaa luoda minkä tahansa standardivalikon. Luokat voivat olla hyödyllisiä selaamiseen, mutta kun aloitat tuhansia, kymmeniä tuhansia tai jopa miljoonia sivuja (kuten Wikipediasta), luokkajärjestelmä hajoaa. Plus, useimmat ihmiset menevät viite sivustoja tiettyyn tarkoitukseen, eikä selata, luokat eivät ole erityisen hyödyllisiä.
On erittäin tärkeää, että referenssikohteilla on erinomaiset hakuominaisuudet. Opastettu haku, aivan kuten sähköisten kaupankäyntien sivustoissa käytettävät, voi olla hyödyllistä myös varsinkin, kun sitä käytetään hyvien tunnisteiden ja luokkajärjestelyjen yhteydessä.
Se on ilmeistä Reference.com , alla haluaa kävijöitä käyttämään hakua etsimään mitä he etsivät, koska se on sijoitettu näkyvästi näytön yläreunaan.
Vertailusivuilla olevien sivujen tulisi myös käyttää inline-linkkejä asiaan liittyviin tietoihin. Tämän ansiosta kävijät voivat löytää kaiken materiaalin, jota he tarvitsevat ymmärtääkseen, mitä he lukevat, tekemättä useita hakuja. Inline-linkittämisen tarve johtuu siitä, että wiki-alustoilla on yleensä standardin syntaksi linkittämiseen artikkelin tekstissä, joten sisällön luojien ei tarvitse käyttää aikaa etsiä asiaankuuluvia linkkejä.
wikipedia , alla ja muut wiki-sivustot hyödyntävät inline-linkittämistä lisäämällä artikkelin kontekstia.
5. Yrityssivusto
Yrityssivustojen rakenteessa ja koossa on valtava valikoima. Jotkut yksinkertaisesti houkuttelevat uusia asiakkaita. Toiset on luotu pitämään nykyiset asiakkaat ajan tasalla. Toisten on oltava sekä houkuttelevuutta uusille asiakkaille, uutisportaalia olemassa oleville asiakkaille että yrityksen intranetin etupäähän.
Riippumatta yrityksen sivuston tarkoituksesta selkeät navigointi on avainasemassa. Et halua, että käyttäjät tarvitsevat aikaa etsimään navigointiasi tai yrittää selvittää, mitä linkkiä napsauttamalla pääset siihen, missä he tarvitsevat. Varmista, että linkit on järjestetty loogisesti, että niillä kaikilla on helposti ymmärrettävä merkitys ja että ne sijaitsevat loogisissa paikoissa (otsikko ja sivupalkki ovat täällä ystäväsi).
Kaikki alla olevat sivustot osoittavat, että vain siksi, että navigointi sijaitsee tavallisimmissa paikoissa, ei tarkoita sitä, ettei se voi olla luova. Niin kauan kuin se on käyttökelpoinen ja helppo löytää, voit luoda jotain ainutlaatuista.
Sivustoissa, joissa on yli kymmeniä sivuja, on hyvä sisällyttää hakutoiminnot. On myös hyvä sisällyttää sivukartta, jotta käyttäjät, joilla on vaikeuksia säännöllisen navigoinnin avulla, voivat löytää täsmälleen mitä he etsivät.
6. Yhteisön tai sosiaalisen verkoston sivustoja
Yleensä suurilla sosiaalisen verkostoitumisen sivustoilla haku on ensisijainen navigointi. On järkevää, kun sivustossa on miljoonia (tai jopa miljardeja) sivuja. Tavallinen valikkopohjainen navigointi on melko turha, kun käsitellään kyseistä tietomäärää.
Joten haku huolehtii koko sivuston navigoinnista. Mutta se jättää edelleen jäsenprofiilisivuja. Täällä on tärkeää, että koko sivusto on johdonmukaista. Riippumatta siitä, anna sivustosi jäsenille mahdollisuuden muokata profiilejaan vai ei, on välttämätöntä, että linkit sijaitsevat samassa paikassa jokaisen sivun yli.
Ota esimerkiksi Facebook: jokainen jäsenprofiili ja jokainen sivu on linkkejä asioihin, kuten valokuvia ja tietoja vasemmalle. Ilmoitukset, viestit ja ystäväpyynnöt linkitetään aina yläosaan, samoin kuin linkit tiliasetuksiin ja uloskirjautuminen. Vakiopäätyinen ylin navigointipalkki, joka aina liittää kävijän tiliin ja tieto on tullut hyvin suunnitelluille sosiaalisille verkostoille.
Inline-yhteyksien pitäisi olla myös johdonmukaisia. Esimerkiksi milloin käyttäjätunnus näkyy linkkinä, sen pitäisi linkittää kyseisen käyttäjän profiiliin riippumatta siitä, mihin sisältöön se liittyy. Ajattele, mitä tietoja pitäisi loogisesti linkittää mihin sivuihin, ja varmista, että se on johdonmukainen riippumatta siitä, missä linkit näkyvät.
7. Tapahtumapaikat
Tapahtumapaikat ovat yleensä yksinkertaisia ja niillä ei ole valtavaa määrää sivuja. Mutta on tärkeää miettiä, miten kävijät käyttävät sivustoa. On todennäköistä, että he haluavat tehdä jonkin seuraavista: rekisteröidy tapahtumaan, näet, kuka osallistuu tai puhuu, saada tietoja osallistumisesta (mukaan lukien kulut ja asiat, kuten sijainti ja hotellien alueet) ja katso tapahtuman aikataulu.
Tapahtumaan rekisteröityminen, vaikka se olisi ilmainen tapahtuma, olisi katsottava sähköisen kaupankäynnin tapahtumaksi. Tästä syystä haluat näkyviin näkyvän kutsun toimintapainikkeelle.
Standardin otsikon ja / tai sivupalkin navigointi on erinomainen valinta linkkien muille sivuille. Paikallinen navigointi voi olla tarpeen myös, jos aiot sisällyttää yksittäisiä sivuja esimerkiksi työpajoihin tai kaiuttimiin. Avattavat tai lentävät valikot voivat toimia tässä tapauksessa vain, jos sinulla on rajoitettu määrä alilinkkejä. Muutoin kannattaa käyttää alavalikointia sivupalkissa tai pääsivulla.
Hull Digital Live 10 Hull Digital Live 10 verkkosivustolla on tiivis, helppokäyttöinen otsikonavigointi, jonka avulla on helppo löytää tarkalleen mitä kävijä voi etsiä.
Vihje: Jos tapahtumasi sivusto sisältää osanottajien alueen tai intranetin, katso navigointiohjeita sosiaalisen verkoston tai yhteisön sivuston navigointiin.
8. Tarkastele sivustoja
Verkkosivustoja käytetään yleensä kahdella tavalla. Ensimmäinen on, kun käyttäjät ovat kiinnostuneita tietystä tuotteesta ja haluat nähdä kyseisen kohteen arvosteluja. Tällöin erinomainen hakutoiminto on paras navigointia. Sen avulla käyttäjät voivat nopeasti käyttää juuri etsimääsi tuotetta.
Toinen käyttö on tutkia tietynlaisia tuotteita. Tätä käyttöä varten haku on edelleen arvokas navigointitapa. Luokat ja ohjattu haku ovat yhtä tärkeitä. Kun käyttäjät voivat selata arvosteluja luokan ja alaryhmän mukaan, he voivat löytää erilaisia tuotteita, jotka sopivat heidän tarpeisiinsa. Jatkamalla näiden tulosten täsmentämistä esimerkiksi hintojen tai brändien pohjalta paremman käyttökokemuksen ansiosta.
Blippr , sisältää sekä kategorian navigoinnin (jossa on pudotusvalikkoja alivalikon navigointiin) ja näkyvä hakupalkki.
9. Henkilökohtaiset sivustot
Henkilökohtaiset sivustot ovat todellakin web design -ympäristön villikortteja. Voit käyttää melko paljon haluamaasi navigointikuvioon. Pääruudut, kuten otsikko ja sivupalkin navigointi, ovat yhä käyttökelpoisimpia, mutta ei ole mitään väärää tekemällä jotain täysin erilaista.
Henkilökohtaisten sivustojen tulee kuvastaa sivuston omistajaa. Jos jotain yllättävää sopii sivuston persoonallisuuteen, niin kaikin keinoin: mene siihen. On kuitenkin silti hyvä sisällyttää sivukartta-linkki jonnekin, jos käytät tavanomaista navigointia, jotta vierailijat, jotka eivät "saa sitä", voivat helposti löytää etsimäsi.
Daniel Mallin portfoliosivulla on yksi ainutlaatuisimmista navigointimalleista, joita olen nähnyt. Se on helppokäyttöinen ja silti hyvin erilainen kuin normi.
10. Gallerioita
Kuvagallerioita ja salkun sivustojen tulisi yleensä käyttää yhdistelmää standardin otsikon tai sivupalkin navigoinnin, koodauksen ja luokkien kanssa. Kun kävijät kutistuvat kuvat, jotka näkyvät tunnisteen tai kategorian perusteella, on tärkeää hyvän käyttökokemuksen kannalta, varsinkin kun kuvien määrä kasvaa.
Pagination on myös elintärkeää suurille sivustoille. Jatkuva vieritys voi tuntua hyvältä, mutta koska galleriat ja portfolio-sivustot ovat luonteeltaan täynnä mediaa, jatkuva vieritys voi päätyä useisiin järjestelmäresursseihin. Suosittelisin sitä mistään sivustosta, jossa on enemmän kuin muutama kymmenen kuvaa (vaikkakin pienemmissä galleriassa ja salkun sivustoissa se voi olla todella mukava kosketus).
Minimaalinen esitys käyttää luokkia, hakuja ja sivutöitä.
Take-away
Jos on olemassa yksi navigointikonsepti, joka on ehdottomasti riippumatta siitä, millainen sivusto olet suunnittelemassa, se on tämä: johdonmukaisuus!
Voit päästä eroon useimmista loogisista navigointivaihtoehdoista niin kauan kuin se on johdonmukainen koko sivustossasi. Älä aloita sivupalkin navigoinnilla puolelle sivustollesi ja otsikon navigointi toiselle puolelle ilman mitään loogista syytä siihen. Jos kotilinkki on aina vasemmassa yläkulmassa, varmista, että se pysyy vasemmassa yläkulmassa. Tämä koskee kaikkia navigoinnin elementtejä, ja siitä tulee eksponentiaalisesti tärkeämpää sivuston koon kasvaessa.
Muuten kuin johdonmukaisuus, tärkein tekijä suunnitteluratkaisujen suunnittelussa on ajatella, miten kävijät todella käyttävät sivustosi. Älä pelkää A / B- tai monimuuttujakokeet, jotta voit selvittää, ovatko navigointikuvasi todellisuudessa oikein toimivalla tavalla.
Riippumatta siitä, kuinka viileä tai uusi navigointi on, jos se ei suorita sitä, se on perustoiminto, jonka avulla kävijät voivat siirtyä sivustosi tietystä alueesta toiselle haluamallasi tavalla, navigointi on epäonnistunut.
Voit jakaa esimerkkejä hyvistä navigointikuvista seuraavissa kommentteissa! Kerro myös meille, onko sinulla muita vinkkejä sopiviin navigointiominaisuuksiin tietyntyyppisille sivustoille.