Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on? Mihin sivulta pääsee? Navigointipalkit sijaitsevat selkeällä paikalla ja joka sivulla samassa kohtaa. Miten sivulle tultiin? Navigointia helpotetaan ristiinlinkityksillä Sivulta voidaan siirtyä suoraan saman aiheen sivuihin. Muista kohderyhmälle tutut termit myös navigoinnissa. Navigaation ja otsikoiden avulla pystytään esittää käyttäjän sijainti. Siirtyminen sivuston etusivulle ja edelliselle sivulle onnistuu kaikilta sivuilta.
Päävalikko Valikot Navigointielementit: Valikot Leivänmurupolut Muut linkit Sisältöalueen linkit Koko sivustossa samassa paikassa Pääsee sivuston eri osiin Paikka yleensä Vaakavalikkona sivun ylälaidassa Etu: selkeys Pystyvalikkona sivun vasemmassa laidassa Etu: laajennettavuus Mahtuu enemmän elementtejä kuin vaakavalikkoon Oikeassa reunassa ja sivun alalaidassa olevat valikot jäävät usein käyttäjältä huomaamatta.
Alivalikot Erilainen jokaisella sivulla/sivuston osassa Jos päävalikko on vaakavalikkona, niin alivalikko on yleensä päävalikon alla vaakavalikkona vasemmassa reunassa pystyvalikkona Jos päävalikko on pystyvalikkona, niin alavalikko on yleensä päävalikon elementtien välissä pystyvalikossa Erilaiset pudotusvalikot
Leivänmurupolut Leivänmurupolku kertoo sivun sijainnin sivustossa sivuhierarkian mukaan. antaa mahdollisuuden siirtyä sivustossa suoraan ylöspäin. Murupolun paikka yleensä on yläotsikkoalueella mahdollisen vaakavalikon alapuolella. Kotterot -> vaihtoautot -> pakettiautot Toteutuksesta Linkkisanojen oltava samoja kuin valikossa. Ei kannata käyttää, jos sivustohierarkia on matala. Sivu, jolla ollaan. Ei ole linkki. Muut linkit Varsinainen navigointivalikon lisäksi sivulla voi olla muita linkkejä: linkit muihin kieliversioihin suomeksi, på svenska linkit vakiosisältöön sivukartta ohjeet palaute hakutoiminnot tulostettava versio Apulinkkien paikka voi olla esimerkiksi otsikko-osassa oikeassa reunassa tai sivun alapalkissa. Sisältöalueen linkit tarkentavat asiaa tai antavan siitä lisää tietoa. Sijoitetaan yleensä tekstin alle, jonka aiheeseen linkki kuuluu.
Sivustokartta Sivustokarttaan tulee näkyviin kaikki sivut. Kartta esittää sivuston sisältörakenteen. Kartasta voi siirtyä mille sivulle hyvänsä. Miksi kannattaa tehdä sivustokartta? Antaa kokonaiskuvan sivustosta. Auttaa löytämään tietoa. Jos sivusto on erittäin laaja, niin kartan sijasta voi tehdä aakkosellisen tai asiakohtaisen hakemiston. Kotterot Vaihtokotterot henkilöauto pakettiautot erikoisuudet Jätä ilmoitus Yhteystiedot kotterot vaihtokotterot jätä ilmoitus yhteystiedot henkilöautot pakettiautot erikoisuudet
Linkkien ulkoasusta Linkit täytyy tunnistaa Linkit joko sijaitsevat navigointialueella tai näyttävät linkeiltä. Muualla kuin navigointialueella alleviivattuna ja yleensä sinisenä. Linkit sivuston ulkopuolelle Merkittävä sopivalla tavalla (->->) Linkkilistat Linkit tiedostoihin Kerro tiedoston muoto ja koko Auton esittely (pdf, 900kt) Navigointitehtävä 1 <div id="navigointi"> <ul> <li class="ollaan"> <a href="index.html">kotisivu</a> <a href="vaihto.html">vaihtokotterot</a> <a href="ilmoitus.html">jätä ilmoitus</a> <a href="tiedot.html">yhteystiedot</a> </ul> </div>
#navigointi { background-color:rgb(210,244,236); border-bottom: solid 2px rgb(153,153,153); height:2.3em; min-width:29em;} Korkeudet ja leveydet tilanteen mukaan. /* poistetaan listamerkit ja sisennykset */ #navigointiul{ list-style-type:none; margin:0px; padding:0px 0px 5px 10px;} /* muutetaan li-elementti käyttäytymään inline-elementin tavoin eli esim. rivinvaihto poistuu */ #navigointili{ display:inline; margin:0; padding:0} Tehdään kaksi kuvaa: - välilehdet, vasen ja oikea reuna - Kannattaa tehdä kuvista suuremmat, mitä tarvitaan, että välilehdet pysyvät kasassa, jos fonttia suurennetaan. <!-- span välilehden oikean puolen kaarta varten -- > <a href="vaihto.html"><span>vaihtokotterot</span></a> #navigointi a { text-decoration:none; float:left; color:rgb(00,00,00); background:url(navi_vasen.gif) no-repeat left top; padding:0px 0px 0px 4px; } #navigointi a span { display:block; float:left; color:rgb(00,00,00); background:url(navi_oikea.gif) no-repeat right top; padding:15px 15px 4px 6px; }
Tehdään vielä kuvat välilehdelle osoittamaan sivua jolla ollaan. <a href="vaihto.html class= ollaan > <span>vaihtokotterot</span></a> #navigointi.ollaan { text-decoration:none; float:left; color:rgb(00,00,00); background: url(navi_vasen_valkoinen.gif) no-repeat left top; margin:0; padding:0px 0px 0px 4px; } #navigointi.ollaan span { float:left; display:block; color:rgb(00,00,00); background: url(navi_oikea_valkoinen.gif) no-repeat right top; margin-left:10px; padding:15px 15px 4px 6px; } Navigointitehtävä 2 <div id="navigointi"> <ul> <a href= ">kotisivu</a> <a href="">vaihtokotterot</a> <ul> <a href="">henkilöautot</a> <a href="">pakettiautot</a> <a href="">erikoisuudet</a> </ul> <a href="">jätä ilmoitus</a> <a href="">yhteystiedot</a> </ul> Testattu: </div>
Piilotetaan alivalikko. #navigointi ul {margin-left:0; padding-left:0;} #navigointiliul{display:none} #navigointi li {float:left; width:7em; list-style-type:none; background-color:rgb(0,204,255); border: solid 1px rgb(204,204,204); text-align:center; padding:2px;} #navigointi a {text-decoration:none; color:rgb(255,255,255);} #navigointi li:hover ul {display:block; position:absolute; width:7em} Alivalikko näkyviin, kun hiiri tulee päävalikossa tietyn linkin päälle. Position:absolute -> alivalikko ei vie sivulta paikkaa vaan asettuu alla olevan sisällön päälle