Flik (grafiskt användargränssnitt) — växla mellan dokument och kontroller

Lär dig hur flikar i grafiska gränssnitt effektivt växlar mellan dokument och kontroller — tips för användning, design och smidig multitasking i appar och webbläsare.

På datorer som använder grafik som gränssnitt är en flik ett sätt att växla mellan olika kontroller (t.ex. i en konfigurationsskärm) eller dokument (t.ex. i en webbläsare eller ordbehandlare). Endast en flik kan vara aktiv åt gången.

Vad är en flik?

En flik är ett grafiskt element i ett användargränssnitt som grupperar innehåll eller verktyg så att användaren kan byta mellan dem utan att öppna nya fönster. Flikar visar vanligen en rad eller kolumn med etiketter eller ikoner där den aktiva fliken visas som vald eller markerad.

Typer av flikar

• Dokumentsflikar – används för att hålla flera öppna dokument i ett fönster (vanligt i webbläsare, textredigerare och integrerade utvecklingsmiljöer).
• Inställnings- eller kontrollflikar – används i dialoger och inställningsfönster för att dela upp konfiguration i logiska sektioner.
• Pinnade flikar – små flikar som är "fastnade" för snabb åtkomst (vanligt i webbläsare för ofta använda sidor).
• Vertikala flikar – flikar i en kolumn i stället för en rad, användbart när fliknamnen är långa eller många.

Vanliga funktioner

• Stängknapp på varje flik för att stänga innehållet.
• Drag-och-släpp för att ordna om flikar eller separera dem till nya fönster.
• Overflow-hantering (t.ex. pilmenyer) när antalet flikar inte får plats i fönstret.
• Gruppning av relaterade flikar (t.ex. i webbläsare som låter skapa flikgrupper eller färgmarkera grupper).
• Sessionsering och återställning så att öppna flikar kan återställas efter omstart.

Tangentbordsgenvägar och navigering

Många program erbjuder tangentbordsgenvägar för att snabbt växla mellan flikar, till exempel:

• Ctrl/Cmd + Tab och Ctrl/Cmd + Shift + Tab för att gå framåt/bakåt mellan flikar.
• Ctrl/Cmd + T för att öppna en ny flik (i webbläsare).
• Ctrl/Cmd + W eller Ctrl/Cmd + F4 för att stänga aktuell flik.

Tillgänglighet

För att flikar ska vara tillgängliga bör de implementeras med semantiska roller och stöd för tangentbordsnavigering samt skärmläsare. Använd gärna ARIA-roller som tablist, tab och tabpanel och säkerställ att fokusmarkering är tydlig och kontrastrik.

Design och bästa praxis

• Tydliga etiketter: Använd korta, beskrivande namn på flikarna så att användaren lätt förstår innehållet.
• Synlig aktiv flik: Markera den valda fliken tydligt med färg, understrykning eller indikator.
• Hantera många flikar: Erbjud sätt att hitta och visa flikar när det finns många (sök, meny, grupper, vertikalt läge).
• Undvik för mycket innehåll i en flik: Dela upp logiskt — en flik bör ha ett tydligt fokus.
• Responsivitet: På mobila enheter kan flikar behöva omvandlas till en rullbar rad, en meny eller en annan navigationsmetafor.

Fördelar och nackdelar

• Fördelar: Sparar skärmutrymme, gör det lättare att växla mellan relaterat innehåll och minskar antalet öppna fönster.
• Nackdelar: Kan bli rörigt vid många flikar, svårare att överblicka alla öppna objekt och risk för att viktig information döljs bakom flikar.

Vanliga exempel

• Webbläsare som öppnar flera webbsidor i separata flikar.
• Ordbehandlare, kalkylprogram och redigeringsverktyg som låter arbeta med flera dokument i samma fönster.
• Inställningsdialoger i operativsystem och applikationer där olika inställningskategorier delas upp på flikar.

Flikar är ett etablerat och flexibelt gränssnittselement. Genomtänkt design och ordentligt stöd för navigering och åtkomst gör dem effektiva för både enkel och avancerad användning.

Användning i webbläsare

På senare tid har flikar blivit en populär funktion i de flesta webbläsare. Detta gör det möjligt att ha mer än en webbplats öppen i samma fönster.

 
Ett exempel på Mozilla Firefox (version 2) med tre öppna flikar.  

Sök med bokstav