Allan Day
aday@gnome.org
Calum Benson
Adam Elman
Seth Nickell
Colin Robertson

This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.

Anders Jonsson
anders.jonsson@norsjovallen.se 2015, 2018
Sebastian Rasmussen
sebras@gmail.com 2017, 2018

# Knappar

Knappar är ett av de vanligaste och mest grundläggande användargränssnittselementen. Knappar kan användas för att utföra åtgärder, justera inställningar eller vyer, aktivera verktyg eller för att visa dialoger, kontextfönster eller andra användargränssnittselement.

# Allmänna riktlinjer

En knapp kan innehålla en ikon, knapp eller, mer sällan, en bild. Följ riktlinjerna för ikoner och grafik när du beslutar vilken som ska användas.

Efter att en knapp tryckts ned bör en användare kunna förväntas se resultatet av deras åtgärd inom en sekund.

Använd inte mer än en eller två olika bredder för knappar i samma fönster, och se till att alla har samma höjd. Detta hjälper till att ge ett behagligt, likformigt visuellt utseende till ditt fönster, vilket gör det enklare att använda.

Tilldela inte åtgärder till dubbelklick eller högerklick på en knapp. Det är osannolikt att användare kommer att hitta dessa åtgärder, och om de gör det kommer det att förvränga deras förväntning på andra knappar på skrivbordet.

Gör ogiltiga knappar okänsliga snarare än att visa ett felmeddelande när användaren klickar på dem.

När flera knappar placeras intill varandra, säkerställ att de har samma bredd. Detta är särskilt viktigt för par av knappar så som Avbryt och OK.

I en dialog kan en knapp vara utpekad som standardknapp, vilket visas med en annorlunda ram och den aktiveras genom att trycka på Retur. Detta kommer ofta att vara OK-knappen eller något motsvarande. Om data skulle kunna gå förlorad om denna knapp trycks på av misstag, ställ inte in en standardknapp för fönstret.

# Textknappar

Etikettera alla knappar med verb i imperativ, använd rubrikversalisering (Detta gäller för engelska. För svenska är meningsversalisering att föredra). Till exempel, Spara, Sortera eller Uppdatera nu.

Använd ellips när en knapp kräver vidare inmatning från användaren för att slutföra en åtgärd.

Tillhandahåll en snabbtangent i etiketten som låter användaren direktaktivera knappen från tangentbordet.

Håll etiketter korta så att de inte förorsakar att en knapp använder för mycket utrymme. Det är också viktigt att ta hänsyn till hur etiketter kommer att ändra längd när de översätts.

# Växlingsknappar

Växlingsknappar ser likadana ut som vanliga knappar, men används för att visa eller indikera ett tillstånd snarare än att initiera en åtgärd. En växlingsknapps två tillstånd, satt och osatt, visas genom att den ser ”intryckt” eller ”ointryckt” ut.

# Länkade knappar

Grupper av knappar med samma funktion kan grupperas. Detta hjälper till att kommunicera deras likheter. Länkning är en vanlig teknik för uppsättningar av växlingsknappar.

# Föreslagna och destruktiva åtgärder

I de fall när en knapp har en särskilt viktigt bekräftande roll kan den ges en föreslagen stil. Detta markerar knappen och hjälper till att särskilja den från andra synliga komponenter.

Knappar som har en destruktiv konsekvens, så som att rensa eller ta bort ett innehållsobjekt, kan ges en destruktiv stil. Detta markerar knappen genom att färgsätta den och fungerar som en varning för användaren.

Varje vy bör endast ha en enda föreslagen eller destruktiv knapp.

# API-referens

GtkButton

GtkToggleButton