Välilehti käyttöliittymässä — määritelmä, toiminta ja esimerkit

Oppaa välilehtien määritelmä, käyttöliittymätoiminta ja selkeät esimerkit — käytännöllinen opas välilehtien suunnitteluun ja käyttöön.

Tietokoneissa, joiden käyttöliittymässä käytetään grafiikkaa, välilehti on tapa siirtyä eri ohjaimien (kuten määritysnäytön) tai asiakirjojen (kuten verkkoselaimen tai tekstinkäsittelyohjelman) välillä. Vain yksi välilehti voi olla aktiivinen kerrallaan.

Määritelmä ja perusperiaatteet

Välilehti (engl. tab) on käyttöliittymäkomponentti, joka ryhmittelee eri näkymiä tai sisältöjä samaan tilaan siten, että kerrallaan näkyvissä on vain yksi näkymä. Välilehti koostuu tyypillisesti kahdesta osasta: välilehtien valikosta (tab bar) ja välilehtipaneelista (tab panel), jossa valitun välilehden sisältö näytetään.

Toiminta ja käyttäytyminen

Välilehdet toimivat yleensä seuraavasti:

• Käyttäjä klikkaa tai aktivoi halutun välilehden, jolloin siihen liittyvä paneeli tulee näkyviin.
• Edellinen välilehti sulkeutuu tai piilotetaan, ja vain aktiivinen välilehti on vuorovaikutettavissa.
• Joissain toteutuksissa välilehtien sisältö ladataan vasta, kun välilehti aktivoidaan (lazy loading).
• Välilehtiä voi olla useita tyyppimuunnelmia: kiinteät välilehdet, vieritettävät välilehtipalkit, suljettavat välilehdet (esim. selainvälilehdet) tai uudelleenjärjiteltävät drag & drop -toiminnolla.

Saavutettavuus ja näppäimistön käyttö

Saavutettavuus on tärkeä osa välilehtien suunnittelua. Webissä kannattaa noudattaa WAI-ARIA -suosituksia:

• Rakenna välilehdet rooleilla role="tablist", role="tab" ja role="tabpanel".
• Käytä attribuutteja kuten aria-selected, aria-controls ja tabindex selkeyttämään tilaa ruudunlukijoille.
• Näppäimistönavigaatioksi yleisiä käytäntöjä: vasen/oikea nuoli siirtää fokusta välilehdistä toiseen, Home/End siirtävät ensimmäiseen/viimeiseen, Esc voi sulkea modaalissa välilehdellisessä dialogissa. Sivuston sisäisessä navigoinnissa Tab-näppäin siirtää fokusin sisältöalueeseen.

Suunnittelu- ja käytettävyysvinkkejä

• Pidä välilehtien määrä kohtuullisena — liian monta välilehteä vaikeuttaa valintaa. Tarvittaessa käytä alivalikkoja tai ryhmittelyä.
• Käytä selkeitä otsikoita ja lyhyitä kuvauksia, jotta käyttäjä ymmärtää, mitä kukin välilehti sisältää.
• Ilmoita aktiivinen tila visuaalisesti (korostus, väri, alleviivaus) ja varmista kontrasti.
• Mahdollista välilehtien sulkeminen ja uudelleenjärjestely vain silloin, kun se palvelee tehtävää (esim. selain tai editointiympäristö).
• Mobiilissa välilehtipalkki saattaa tarvita vierityksen tai pudotusvalikon pienen näytön vuoksi.

Esimerkkejä ja käyttötilanteita

• Verkkoselaimen välilehdet, joissa jokainen välilehti edustaa avattua verkkosivua.
• Moni-dokumenttieditorit ja koodieditorit, joissa eri asiakirjat tai tiedostot avataan välilehtiin.
• Asetus- tai määritysikkunat, joissa eri välilehdet jakavat asetukset loogisiin osioihin (yleistä, tietosuoja, lisäasetukset jne.).
• Sovellusten näkymien vaihto, esimerkiksi keskustelut, tiedostot ja asetukset samassa käyttöliittymässä.

Teknisiä huomioita ja toteutus

Useimmissa web-kehyksissä on valmiita komponentteja välilehdille (esim. Bootstrap, Material Design), mutta omia kannattaa rakentaa, jos tarvitset räätälöityä käyttäytymistä. Toteutuksessa huomioi:

• Ilmoita DOM:ssa näkyvästi, mikä paneeli kuuluu mille välilehdelle (id/aria-controls).
• Hallinnoi tilaa (aktiivinen välilehti) siten, että se voidaan myös linkittää suoraan URL:iin (deep linking) tai säilyttää istunnon aikana.
• Suunnittele suorituskykyä varten lazy loading, jos välilehtien sisältö on raskasta renderöidä kerralla.

Yhteenveto

Välilehti on hyödyllinen käyttöliittymäelementti, joka auttaa ryhmittelemään ja järjestämään sisältöä tilan säästämiseksi. Hyvin suunniteltuna ja saavutettavasti toteutettuna se parantaa käytettävyyttä ja tekee monimutkaisesta käyttöliittymästä selkeämmän. Huomioi aina käyttäjän tarpeet, näppäimistönavigointi ja mobiilikäyttö sovellusta suunnitellessasi.

Käyttö selaimissa

Viime aikoina välilehdistä on tullut suosittu ominaisuus useimmissa verkkoselaimissa. Näin voit pitää useampaa kuin yhtä verkkosivustoa auki samassa ikkunassa.

 
Esimerkki Mozilla Firefoxista (versio 2), jossa on kolme välilehteä auki.  

Hae kirjaimella