Voittavan navigointivalikon suunnittelu ja ideat
Sivuston navigointivalikko on kuin tienviitta kadulla tai taso-hakemistossa ostoskeskuksessa. Et pääse kohteeseen, ennen kuin tiedät, missä olet. Kuten todellisessa elämässä, web-suunnittelun navigointi on erittäin tärkeää, ja sillä on tärkeä rooli verkkosivuston käytettävyydessä sekä käyttäjäkokemuksessa.
Nykyään voit nähdä runsaasti erilaisia navigointivalikkoja, joissa on mielenkiintoisia, luovia ja epätavallisia malleja. Mutta miten tehokas navigointi verkkosivuilla, miltä se näyttää? miten se näyttää?
Tänään haluaisin jakaa huomautukseni ja tietoni web-suunnittelun navigoinnin merkityksestä. Paljastan muutamia yksinkertaisia vinkkejä, joiden avulla voit parantaa sivustosi navigointia ja käytettävyyttä. On myös joitakin esimerkkejä tehokkaista navigointivalikoista, jotka antavat sinulle käsityksen siitä, miten suunnitella seuraava muotoilu.
Informaatioarkkitehtuuri
Navigointisuunnittelun pitäisi alkaa tietojärjestelmällä. On tärkeää istua alas ja aivoriihi verkkosivuston tietorakenteesta. Sinun täytyy selvittää, millaisia ominaisuuksia sivusto tarjoaa, mikä on tärkeintä ja mitä voitaisiin sijoittaa alemmille tasoille tietohierarkiassa.
Tiedon arkkitehtuuri sisältää ominaisuuksia, käyttäjien tarpeita, sivustokarttaa, testausta ja langansyöttöä. Voit lukea lisää arkkitehtuurista Cameron Chapmanin artikkelissa Information Architecture 101: Tekniikat ja parhaat käytännöt.
Käyttäjän käyttämien tekniikoiden käyttäminen
Vältä käyttämästä Flash-, JavaScript-, jQuery- tai muuta sellaista, joka voi estää pääsyn verkkosivustosi navigointiin navigointipalkin rakentamisessa, tai ainakin varmista, että ne pystyvät hajottamaan sulavasti.
Lisää viitteitä javascriptin karkea hajoaminen, Tutustu tähän viestiin 10 Hyödyllinen Fallback Menetelmät CSS ja Javascript.
Käytä yksinkertaisia, käyttäjäystävällisiä termejä
On parempi käyttää yksinkertainen, ilmeinen ja ilmaisu, joka on helppo selvittää kuin säilyttää vain navigointivalikon toimialan ehdot. Mikä tahansa linkki, joka vie käyttäjiä yli toisen tai kahden selvittämään, on todennäköisesti käyttökelvoton.
Jos käyttäjän täytyy napsauttaa linkkiä selvittääkseen, mitä linkki johtaa, se auttaa käyttäjiä käyttämään huonosti.
esimerkit
Larissa Nessin verkkosivuston navigointivalikon termit ovat helposti ymmärrettäviä ja riittävän yleisiä. Käyttäjät eivät löydä sitä hämmentävinä, koska heillä on jo kokemusta tällaisista valikoista.
Tässä on toinen hyvä esimerkki siististä ja selkeästä verkkosivuston navigointivalikosta, jossa käytetään yleisiä termejä, osoitteessa csupport.
Luova toimisto Eighty8Four käyttää termiä "showroom", joka voi olla hämmentävää vierailijoille. Tämä termi voi merkitä salkun tai työn, mutta ei ole selvää, ja kävijöillä ei ole muuta vaihtoehtoa kuin klikata tarkistaa se.
Standardoi navigointisuunnittelu
Käytä samaa navigointimallia kaikissa sivuissasi. Se on erittäin tärkeää, koska ilman johdonmukaista suunnittelua käyttäjä voi itse asiassa uskoa olevansa toisessa sivustossa. Varmista, että käytät samaa navigointimallia, jotta käyttäjät voivat helposti mennä Web-sivustoosi menettämättä.
Bluegg, Seuraavassa on esitetty yksinkertainen ja puhdas navigointisuunnittelu, joka pysyy samana kaikissa alisivuissa. Ainoa ero on värin ilmaisin, joka näyttää sivun, jolla kävijä on tällä hetkellä.
Ilmoita, missä olet
On tärkeää, että käyttäjä tietää, missä hän on aina. Voit tehdä tämän linkin taustan muuttaminen, sivun nimen väri tai käännä tekstiä lihavoitu navigointivalikossa, jotta se poikkeaa muista.
Austin Eastciders käyttää eri väriä ja taustaa osoittamaan sivun, jossa käyttäjä on päällä. Tämä indikaattori voi toimia myös hienovaraisena suunnittelun muutoksena esimerkiksi käyttämällä a eri navigointi tausta joka luo tunteen, että muut valikkokohdat ovat syvällisiä.
Mediakirurgia käyttää tummempaa väriä avatun alisivun indikaattorina. Yksinkertainen mutta tehokas.
Käytä web-yleissopimuksia
Kyse on helppokäyttöisestä ja intuitiivisesta verkkosivuston navigoinnista. Web-yleissopimukset tekevät suunnittelijoille paljon helpompaa työskennellä suunnitelmiensa ympärillä. Useimmat käyttäjät napsauttavat verkkosivuston logoa palataksesi kotisivulle, joten suunnittele logo niin, että se tehdään.
Jos et, teet heidät viettämään aikaa oppia jotain uutta tai joissakin tapauksissa ne haittaavat niitä, koska ne eivät tarjoa sitä, mitä he odottavat olevan yleisesti hyväksyttyjä navigointisäännöksiä.
Saat lisätietoja web-yleissopimuksista täältä:
- 10 Web-suunnittelusopimuksia
- Älä keksi Web-suunnittelupyörää uudelleen
- Suunnittelu Web-yleissopimuksilla
Inject Design sijoittaa logon vasempaan yläkulmaan, joka sopii yhteen nykyisin käytetyistä web-yleissopimuksista.
Adams Creation käyttää yhtä yleisimmistä web-yleissopimuksista - logo on sijoitettu verkkosivuston vasempaan yläkulmaan ja linkit kotisivulle.
Testaa se: Ota mukaan kolmas osapuoli
Testaa navigointisuunnittelusi aina sellaisen henkilön kanssa, joka on käyttänyt Internetiä aiemmin. Haluat ehkä tuoda ihmisiä, jotka eivät liittyneet suunnitteluprosessiin testata sitä. Noudata heidän mieltymystään navigoidessaan sivustosi kautta ja analysoi aikaa, jonka he tarvitsivat niiden sivujen löytämiseksi, jotka he olivat etsimässä.
Parempi tarkkuus, lisää ihmisiä, kerää tietoja, analysoi ja tiivistää tiedot paremmaksi. Suorita jälkitutkimus, jos se on tarpeen. Saatat odottaa odottamattomia ideoita ja panoksia, jotka muuten jäävät huomiotta ilman tätä koeajoa.
Anna asiayhteys
Jotta sisältöä ja navigointia voitaisiin noudattaa, verkkosivuston käyttäjät voivat löytää asiaa, jota he tarvitsevat nopeasti. Voit sijoittaa pieniä kuvakkeita, jotka liittyvät linkitettyyn sisältöön, tai lyhyitä kuvauksia, jotta saat yleiskuvan siitä, mitä sivu on.
Oma pyöräni käyttää yksinkertaisia kuvakkeita antamaan käyttäjille lisätietoja siitä, mitä he löytävät tietystä alisivulta.
Sarah Parmenter käyttää päävalikossa lyhyitä ja mukavia otsikoita, jotta saat tietoja pääsivujen linkitettävistä alisivuista.
SEO-tarkoituksiin
Google haluaa johdonmukaisen navigoinnin. On hyvä olla johdonmukaista navigointia, jotta käyttäjät eivät ymmärrä ja saa käsityksen siitä, miten voit selata sivustosi kautta, mutta myös hakukoneiden avulla indeksoida sivustosi.
Hakukoneiden robotit indeksoivat verkkosivustosi indeksoimalla sivustosi ja asettamalla linkit hakukoneen hakutulossivulle. Jos haluat olla näkyvissä, kiinnitä huomiota hyvään navigointisuunnitteluun ja hanki lisää liikennettä.
Ilmaiset navigointisarjat (CSS ja jQuery)
Tässä on lyhyt luettelo uusimmista navigointivalikoista, jotka saatat olla hyödyllisiä projekteillesi. Nämä skriptit lisäävät tuotteen käyttäjäkokemusta entistä paremmin lisäämällä joitakin mukavia ominaisuuksia ja tekemällä sen mielihyväksi.
XML-ohjattu vertikaalisen uutisen vieritysskripti HTML- ja jQuery: vScrollerilla
Filtrify
Page Scroller
Timeline Portfolio
HorizontalNav
CSS3 Minimalistinen navigointivalikko
Circle Navigation Effect CSS3: n kanssa
Ruudukon navigointiefektit jQueryn kanssa
Ascensor
Luo tyylikäs CSS3-navigointivalikko
Näytä kaunis vaakasuuntainen navigointi
Ja viimeisenä, mutta ei vähäisimpänä, inspiroivia horisontaalisia navigointivalikkoja. Tarkista nämä uskomattomat sivustot ja niiden navigointivalikon ratkaisut löytääksesi uusia ideoita projekteillesi.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Golden Isles
Neil Carpenter
Marc Thomas
3D Polystyren
Liechtenecker
Adventure World
Arbutus Valokuvaus
OMDRL
4 Pines Beer
Metsästäjien viinit
Toivottavasti löydät tämän artikkelin hyödylliseksi ja informatiiviseksi. Jos sinulla on ajatuksia tai jos olet eri mieltä, kerro mielipiteesi kommenttien osiosta.
