Textinmatning
Här har vi samlat exempel på hur vi vill att textinmatning ska upplevas i våra digitala produkter och tjänster.
Användaren skriver in ett stationsnamn.
1. Användaren trycker på inmatningsfältet.
2. Inmatningsfältet får fokus, markören blinkar och ett tangentbord visas. En lista med förslag på stationer visas under inmatningsfältet.
3. Användaren börjar skriva in ett stationsnamn. Listan visar matchande stationer.
4. Användaren trycker på en station i listan.
5. Inmatningsfältet visar den valda stationen.
Användaren skriver in ett datum.
1. Användaren trycker på inmatningsfältet.
2. Inmatningsfältet får fokus, markören blinkar och ett numeriskt tangentbord visas. En inmatningsmask antyder formatet på det som ska matas in.
3. Användaren börjar skriva in ett datum. Inmatningsmasken gör att det inmatade värdet presenteras på ett förväntat sätt.
4. Så snart värdet är korrekt ifyllt visas en grön checkmark.
Användaren skriver in ett mobilnummer.
1. Användaren trycker på inmatningsfältet.
2. Inmatningsfältet får fokus, markören blinkar och ett numeriskt tangentbord visas.
3. Användaren börjar skriva in ett mobilnummer.
4. En inmatningsmask gör att det inmatade värdet presenteras på ett förväntat sätt. Så snart värdet är korrekt ifyllt visas en grön checkmark.
Användaren skriver in ett medlemsnummer.
1. Hjälptexten under inmatningsfältet antyder formatet på det som ska matas in. Användaren trycker på inmatningsfältet.
2. Inmatningsfältet får fokus, markören blinkar och ett numeriskt tangentbord visas. En prefix text gör att användaren slipper fylla i de första åtta siffrorna i medlemsnumret.
3. Användaren börjar skriva in de sista åtta siffrorna i medlemsnumret.
4. En inmatningsmask gör att det inmatade värdet presenteras på ett förväntat sätt. Så snart värdet är korrekt ifyllt visas en grön checkmark.
Användaren skriver in ett kortnummer.
1. Användaren trycker på inmatningsfältet.
2. Inmatningsfältet får fokus, markören blinkar och ett numeriskt tangentbord visas.
3. Användaren börjar skriva in ett kortnummer. Så snart vi känner av vad det är för typ av kort visas en liten bild på kortet.
4. En inmatningsmask gör att det inmatade värdet presenteras på ett förväntat sätt. Så snart värdet är korrekt ifyllt visas en grön checkmark.
Användaren skriver in en giltighetstid.
1. Användaren trycker på inmatningsfältet.
2. Inmatningsfältet får fokus, markören blinkar och ett numeriskt tangentbord visas. En inmatningsmask antyder formatet på det som ska matas in.
3. Användaren börjar skriva in en giltighetstid. Inmatningsmasken gör att det inmatade värdet presenteras på ett förväntat sätt.
4. Så snart värdet är korrekt ifyllt visas en grön checkmark.
Användaren skriver in ett personnummer.
1. Hjälptexten under inmatningsfältet antyder formatet på det som ska matas in. Användaren trycker på inmatningsfältet.
2. Inmatningsfältet får fokus, markören blinkar och ett numeriskt tangentbord visas.
3. Användaren börja skriva in ett personnummer.
4. En inmatningsmask gör att det inmatade värdet presenteras på ett förväntat sätt. Så snart värdet är korrekt ifyllt visas en grön checkmark.
Användaren ändrar en e-postadress som är readonly.
1. Inmatningsfältet är förifyllt, maskat och readonly. Användaren trycker på Ändra-knappen.
2. Inmatningsfältet rensas, får fokus och blir editable. Markören blinkar och ett tangentbord visas.
3. Användaren börjar skriva in en e-postadress.
4. Så snart värdet är korrekt ifyllt visas en grön checkmark.