• Start

  • Blogg

  • Kom igång

  • Riktlinjer

  • Komponenter

  • Changelog

  • Tillgänglighet

  • Statistik

  • Inställningar

Riktlinjer

Riktlinjer

​
​

Inga resultat hittade, prova med andra sökvillkor.

Personlighet

Principer

Identitet

Bildmanér
Färger
Ikonografi
Logotyp
Rörelse
Typografi
UX-writing

Layout

Angränsande ytor
Anpassning av komponenter
Avstånd
Brytpunkter
Grid
Layout
Layoutregioner
Säkert område

Mönster

Destruktiva val
Elevation
Hjälp
Inloggning
Landningssidor
Launch screen
Mörkt läge
Navigering
Offline
Onboarding
Progress
Prominens
Sök
Textinmatning
Tomma tillstånd
Validering

Produkter och tjänster

Chattbot och chatt
Digitala skärmar
Html-mejl
Kläder

Rörelse

Rörelse

Rörelse är en bärande del av SJs digitala upplevelse. Både utifrån ett övergripande perspektiv: vi designar för människor i rörelse och för att sätta människor i rörelse, men också utifrån våra UX-principer, vi tänker flöden och är inkännande och dynamiska i tempo och känsloläge.

Rätt använt kan animation, tillsammans med ljud och vibration, addera det lilla extra till kundupplevelsen. Animation kan förstärka och stötta vår ambition i användarupplevelsen, men det får aldrig ta över eller finnas där bara för sakens skull; målet är fortfarande målet.


Animation används för att förstärka en önskad interaktion eller handling.


Animation används för att guida och driva flödet framåt för användaren.


Animation används för att skapa en känsla av kontroll och överblick i ett flöde och tydligt visa vad som händer mellan en interaktion till en annan.


Animation används för att bekräfta/förstärka användarens val eller interaktion.


En bra animation är aldrig statisk eller linjär. Den har fysik, acceleration, spänst eller puls.


Animationer speglar känslolägen och sinnesstämningar. En stressad situation kräver lugn, konsistens och tydlighet i animationer medan en mer avslappnad situation kan ge utrymme för mer lekfull animation eller rörelse.


Animationer som loopar eller spelar ska alltid kunna pausas eller stängas av. Tänk på att överdriven, för snabb eller för oregelbundna rörelser kan skapa stress och förvirring, snarare än engagemang och intresse.


Exempel

Navigera mellan huvudingångar

Navigera till undersida

Navigera till liten modal

Navigera till mellanstor modal

Navigera till undersida i mellanstor modal

Navigera i flöde i mellanstor modal

Navigera till stor modal

Navigera till undersida i stor modal

Navigera i flöde i stor modal