Knappar och länkar
Knappar och länkar ger användaren olika förväntningar på vad som ska ske när vid klick på dem. Eftersom en användare ska förstå innan vad som kommer att hända efter ett klick är det viktigt att välja rätt komponenttyp.
Länk eller knapp?
- Använd länk för att navigera till en annan del av webben. Länkar möjliggör att man kan knyta ihop relaterade sidor.
- Använd knapp för att
- initiera en aktivitet. Ett klick på en knapp får något att hända. Det kan vara att ett formulär man fyllt i skickas in eller att en sökning utförs. Nästan alltid är en del av händelsen att användaren kommer till en ny sida – men det måste hända mer än så.
- i enstaka specifika fall navigera till en sida. Se vad Previous, Next och Go-to button används för under "Knappar" nedan.
Knappar
Det finns finns åtta olika typer av knappar. Välj komponenttyp utifrån användning (se tabellen nedan).
Se Buttons (i KTH Style, på engelska).
| Komponent | Används för |
|---|---|
| Primary button | Aktiviteter som man vill uppmuntra användaren att göra. Exempel: "Prenumerera på sidan". |
| Ok button | Aktiviteter som användaren har påbörjat och som man vill uppmuntra användaren att slutföra. Exempel: "Spara sidan". |
| Secondary button | Sekundära aktiviteter som användaren kan utföra men inte direkt uppmuntras till. Exempel 1: Bekräfta-dialoger där inget av alternativen som kan väljas ska uppmuntras. Exempel 2: "Avbryt". |
| Danger button | Aktiviteter som är destruktiva som man vill förhindra att användaren gör av misstag. Exempel: "Ta bort sidan". |
| Go-to button | Används endast för länkar som behöver extra uppmärksamhet. Exempel: "Till kursval". |
| Previous button | Används i wizard för att gå till föregående stegi wizarden. Exempel: "Tillbaka" |
| Next button | Används i wizard för att gå vidare till nästa setg i wizarden. Exempel: "Nästa" |
| Disabled button | Aktiviteter som inte är möjliga i ett specifikt tillstånd. Exempel: knappen "Spara formuläret" när inte alla nödvändiga uppgifter har fyllts i. |
Placering knapp
- Knappar ska ligga till höger (på sidor, formulär, dialogboxar)
- Se hur man kombinerar knappar på sidan Dialoger
- Använd inte ovanför listor då knappen kan tas för dekoration
Namngivning knapp
- Läs om namngivning under Gemensamma riktlinjer för komponenter
- Var specifik och beskriv vad som händer när du klickar på knappen. Exempel:
- "Spara sidan"
- "Skicka kursenkät"
- "Avsluta"
- För följande knappar gäller namngivning:
- Previous button:
- "Previous" (en), "Tillbaka" (sv).
- Next-button:
- "Next" (en), "Nästa" (sv).
- Go-to button:
- "Till" + namnet på aktiviteten. Exempel: "Till kursval".
- Aktiviteten ska således inte uttryckas som ett verb ("Välj kurs"). Det beror på att användaren inte utför en aktivitet utan endast länkas vidare till en sida där aktiviteten sedan kan utföras.
- Previous button:
Felhantering
Läs om att förhindra att fel uppkommer under Övergripande riktlinjer
Ta bort-knapp:
- Användaren måste bekräfta
- Använd så kallad "confirm modal"
Spara-knapp:
- Komplettera med ett avbryt-alternativ (se "Choose modal" på sidan Modaler )
- Var försiktig att göra knappen till default-val då slutanvändaren kan råka göra valet oavsiktligt genom att använda Enter på tangentbordet
- Använd inte för destruktiva aktiviteter som till exempel att ta bort fil (se "Confirm modal" på sidan Modaler )
Länk
Det finns fem olika typer av länkar. Välj komponenttyp utifrån användning (se tabellen nedan).
Se Links (i KTH Style, på engelska).
| Komponent | Används för |
|---|---|
| Blue link | Infogad länk i svart innehållstext på vit bakgrund. |
| White link | Infogad länk i vit innehållstext på färgad bakgrund. |
| Back link | Navigera tillbaka till föregående menyalternativ i de fall då menyn inte erbjuder det. |
| New tab link | Sekundär information som man vill länka till i ett flöde och som användaren inte ska avbryta. Öppnas därför i ny flik. (Länken avslutas med en ikon som visar att informationen presenteras i en ny flik. Förtydliga även med hover på ikonen att länken öppnas i ny flik.) |
| Pdf link | Länk till pdf-dokument. Öppnas i ny flik. (Pdf-ikon innan länken. Förtydliga även med hover på ikonen att länken öppnas i ny flik.) |
| Up link | Navigera till toppen på sidan då långa sidor. |
Namngivning länk
Generellt:
- Läs om namngivning under Gemensamma riktlinjer för komponenter
Back link:
- Namnge länken med rubriken på sidan dit länken går
Länk till dokument:
- Ge relevant information om vad innehållet länkar till; documenttyp och storlek. Exempel "Proposal Documents (rtf, 20mb)".
Placering länk
"Blue link", "White link" och "Away link":
- Om sekundär länk (för exempelvis kompletterande information som inte är nödvändig för tillgodogörandet av budskapet på sidan):
- Infoga länken i ett textstycke
- Om primär länk (för att uppmuntra användaren att gå vidare till ytterligare information):
- Avsluta med länken. En avslutande länk läggs på egen rad efter avslutande stycke.
- Om flera olika val i form av länkar:
- Lägg länkar i en länklista. Se Listor .
"Up link":
- Placeras längst ner på sidan till höger
"Back link":
- Om vänstermeny: Placera ovanför menyn, under headern på sidan.
- Om ingen vänstermeny: Placera under headern till vänster på sidan.
Öppna i ny flik?
"Blue link", "White link" och "Back link":
- Öppnas i samma flik
"Away link" och "Pdf-link":
- öppnas i ny flik