Mahdollisimman siedettävä web-pudotusvalikko

Web-sivujen navigaatioratkaisuissa näkee jonkin verran javasriptillä tai jopa pelkällä CSS:llä toteutettuja pudotusvalikkoja (drop-down menu). Ymmärtääkseni en ole ainoa, joka pääsääntöisesti vihaa näitä.

Jos unohdetaan nykyään harvinaistuvat tilanteet, joissa toteutus ei vain satu bugisuudeltaan toimimaan missään määrin koherentisti, inhon tunne tuntuu jälleen liittyvän kontrollin puutteeseen. Hoveroimalla aukeavat ja poistuvat valikot tuntuvat sekä aukeavan että sulkeutuvan pyytämättä. Tuntumaa voisi kaikkiaan kuvata sanalla hutera.

Pahimpia esimerkkejä ovat sellaiset valikkototeutukset, joissa alavalikko aukeaa valitun välilehden alapuolelle omaksi palkikseen. Näissä syntyvä palkki on tyypillisesti niin ohut, että hiiri heilahtaa helposti pois sen päältä, jolloin palkki häviää näkyvistä.

Esimerkkiä etsiessäni törmäsin HP:n sivuihin. Tuolla alapalkki ei ole varsinainen palkki vaan suurempi laatikko. Pinta-alaa on sikäli reilusti, että hiiri ei kovin helposti lipsahda ulos alueelta. Siitä huolimatta vierastan ajatusta, jossa navigaatiorakenteet muuttavat muotoaan pelkästään kursorini sijainnin mukaan. HP:n ratkaisussa yllätyksellisyyttä on pyritty vähentämään liittämällä mukaan viive. Navigaatio muuttuu vasta, kun hiiri on ollut linkin päällä noin puoli sekuntia. Näin se tekee kokemuksesta käyttäjän kannalta vielä epämääräisemmän. Kursorin täytyy myös olla juuri linkkisanan päällä, pelkkä välilehti ei riitä.

HP:lla välilehden voi valita suoraan ilman viivettä klikkaamalla sen nimeä. Tämän suhteen konventiot eivät ole aivan vakiintuneet. Tämän jutun ensimmäisessä esimerkissä otsikon klikkaaminen ohitti koko pudotusvalikon ja siirtyi suoraan aihepiirin pääsivulle. Tätä voisikin pitää ilman klikkaamista toimivien pudotusvalikkojen merkittävimpänä etuna: kun valikon avaaminen tapahtuu hoveroimalla, klikkaaminen voidaan säästää muuhun käyttöön. Näin voitaisiin sanoa, että valikko on vain oikotie eikä sitä ole kenenkään pakko käyttää. Jos navigointi on tosiaan toteutettu noin, ja alasivulta on linkit valikon kohteisiin, tuota voi pitää hyväksyttävänä.

Muutenkaan en pitäsi HP:n ratkaisua kopioimisen arvoisena. Perinteisen yksirivisen navigaatopalkin hyveisiin kuuluu, että sen lisäksi, että se antaa liikkua paikasta toiseen, se myös kertoo, missä käyttäjä kulloinkin on. HP:n palkki näkyy vain etusivulla, ja kohdesivulle päästyään käyttäjän tulee päätellä sijaintinsa toisin keinoin.

Minusta pudotusvalikoiden olisi sittenkin parasta toimia niin kuin on työpöytäkäyttöliittymissä totuttu. Valikko aukeaa klikkaamalla. Napin voi jättää joko pohjaan tai nostaa ylös. Kun valikko on klikattu auki, se ei vahingossa katoa näkyvistä ennen seuraavaa klikkausta.

Esimerkiksi Barebonesin valikko toimii lähes tähän tapaan. Old school -mäkistien tapaa avata valikko painamalla nappi pohjaan ja valita toiminto nappi hellittämällä se ei tosin osaa. [Ennen 90-luvun loppupuolen Mac OS 8.0:aa Macillä täytyi pitää nappi pohjassa valikoita käytettäessä. Tuki oikealle hiirennapille ei siis ollut ainoa tuon käyttöjärjelmän myötä tehty myönnytys.]

Toinen kysymys on, onko ylipäänsä oikein käyttää navigaatioon ratkaisua, joka muistuttaa valikkoa [tässä mielessä tuollainen välilehdiltä näyttävä toteutus on parempi, sillä se ei edes näytä perinteiseltä valikolta]. Navigaatioelementissähän kohteet ovat linkkejä, eivät toimintoja. Varsinaisesti valikkopalkin kohteet ovat kuin nappuloita, ja Satunnainen Björklund on kertonut meille useampaan otteeseen, että linkkejä ja painikkeita ei pidä mennä sekoittamaan.

2 kommenttia artikkeliin ”Mahdollisimman siedettävä web-pudotusvalikko

  1. Hyvä pointti. Kosketusnäyttö ei tue hoverointia, mutta painamalla avattava valikko toimii.

    (Mobile Safarissahan natiivit ponnahdusvalikot on korvattu pyöritettävällä rullalla sangen nokkelasti.)

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s