Designsystem för beslutsstödjande AI-gränssnitt
- Kalibrerad tillit som uttalat designmål
- Förklarbarhet i varje rekommendation, inte bara ett svar
- Handläggaren behåller beslutet och ansvaret genom hela flödet
- ROLL
- Interaktionsdesigner, ansvarig för hela arbetet
- TIDSLINJE
- 5 veckor
- VERKTYG
- Figma, Claude Code
- LEVERANS
- Kodad prototyp och ett designsystem
Kontext
AI-stöd flyttar just nu in i arbeten där besluten har verkliga konsekvenser, exempelvis vård, rättsväsende, försäkring och kredit. I de domänerna räcker det inte att ett gränssnitt är effektivt. Det måste också hjälpa människan att fatta ett bra beslut, och att stå för det.
Jag valde att fördjupa mig i hur ett sådant gränssnitt bör designas. Som konkret scenario använde jag Sara, kredithandläggare på en bank, som bedömer kreditansökningar med hjälp av ett AI-system som föreslår en riskbedömning. Scenariot är specifikt nog att tvinga fram tydliga designbeslut, men principerna är tänkta att gälla bredare för högriskbeslut.
Arbetet är ett solo-fördjupningsarbete. Jag arbetade själv genom hela processen, det vill säga jag ramade problemet utifrån forskning, formulerade designprinciper, byggde ett designsystem och en testbar prototyp i Figma. Därefter tog designen vidare till en fungerande kodad prototyp. Besluten bygger på teori, och inte på egen användarresearch.
Problemet
Saras problem är inte att AI:n säger fel. Det är att hon inte vet när hon ska lita på den.
När ett AI-system ger Sara en färdig rekommendation uppstår två motsatta risker, och båda försämrar beslutet.
Den ena är automation bias, alltså att hon litar på systemet även när hon borde när hon kanske inte borde, och till slut bara godkänner förslaget. Den andra är misstro, det vill säga att hon avfärdar ett system som faktiskt hade hjälpt henne och därför inte får ut något värde av det. Ett dåligt designat AI-stöd drar henne mot misstro eller blind tillit, bort från mitten där omdömet finns.
I en högriskdomän får besluten konsekvenser. Ett kreditbeslut påverkar en enskild persons ekonomi och är ofta reglerat, vilket gör att ansvaret ligger hos handläggaren och inte hos modellen. Målet blev därför att hjälpa Sara veta när AI:n är värd att lita på och när den inte är det. Det vill säga att designa för kalibrerad tillit.
Misstro
Stödet avfärdas och värdet går förlorat
Kalibrerad tillit
Tilliten matchar systemets faktiska tillförlitlighet
Blind tillit
Förslag godkänns utan egen granskning
Teori och principer
Fyra forskningsinsikter blev fyra principer som hela gränssnittet prövades mot.
Jag byggde problemförståelsen på etablerad forskning om människa–AI-interaktion. Fyra spår styrde designen, och jag översatte dem till fyra principer som varje designbeslut fick motiveras mot.
Transparens
Användaren ska alltid kunna se vad AI:n baserar sin rekommendation på.
Hela underlaget och osäkerheten ligger framme, inte bara svaret.
Trust calibration · Steyvers & Kumar, 2024
Förklarbarhet
Det ska vara tydligt varför AI:n rekommenderar något, inte bara vad den rekommenderar.
Skäl före slutsats. De drivande faktorerna går att väga mot egen kunskap om fallet.
Explainable AI · Ribeiro et al., 2016; Jung et al., 2026
Human-in-the-loop
AI:n är ett stöd, inte en beslutsfattare. Människan fattar alltid det slutgiltiga beslutet.
Friktion på rätt ställe, och beslutet kräver en aktiv handling från handläggaren.
Automation bias · Romeo & Conti, 2026; Horsky et al., 2012
Spårbarhet
Alla händelser och beslut loggas och kan granskas i efterhand.
Avvikelser fångas och motiveras, så beslutet blir granskningsbart.
EU:s AI-förordning, 2024
Insikterna ledde till att gränssnittet skulle visa hur AI:n resonerar, så att Sara kunde granska underlaget och själv fatta beslutet. Den tanken styrde resten av designen.
Designprocessen
Från koncept till kod, med teorin som testpartner när användare inte fanns att tillgå.
FAS 1
Koncept & Principer
FAS 2
Designsystem + Figma-prototyp
FAS 3
Kodad prototyp
Processen gick i tre steg. Jag började med konceptskisser där jag prövade olika sätt att förhålla rekommendationen till beslutet, från att AI:n syns först till att den ligger sammanvävd med ansökan. Därefter byggde jag upp ett designsystem så att besluten blev konsekventa och återanvändbara, och en hi-fi-prototyp i Figma av Saras huvudflöde. Till sist tog jag prototypen vidare till en fungerande kodad version för att pröva hur interaktionerna faktiskt kändes.
Teorin fick agera testpartner. Ett designval förkastades om det drog mot automation bias eller dold osäkerhet.
Att bygga både ett designsystem och en kodad prototyp var ett medvetet val. Designsystemet tvingade fram konsekventa mönster för återkommande AI-moment, och den kodade prototypen visade att mönstren går att bygga på riktigt, inte bara att de ser bra ut i Figma.
Lösningen
En vy där AI:n resonerar öppet och handläggaren behåller sista ordet.
Tre designbeslut bär lösningen. Var och en går att spåra till en princip och en forskningsinsikt.
Ett underlag som kräver ett aktivt beslut
AI:ns förslag visas tydligt men ligger underordnat användarens beslutsyta. Jag formade det som ett underlag som kräver en aktiv handling. Skälet är automation bias. Om gränssnittet avgör ärendet åt användaren försvinner den granskning som verktyget bygger på. Därför äger användaren beslutsytan, och förslaget får sin plats bredvid den.
Hur mycket användaren litar på förslaget styrs också av hur säkert det ser ut. Därför gjorde jag konfidens till ett eget tillstånd i designsystemet, med tre kategoriska nivåer (hög, medel och låg) som var och en bär egna tokens, exempelvis ai/confidence/low/bg. Samma nivå ramas då in likadant varje gång, och ett förslag med låg konfidens får en avvikande inramning som uppmanar till granskning. Nivåerna är kategoriska eftersom procenttal lätt tolkas som exaktare än de är, så att tilliten följer systemets faktiska tillförlitlighet.
Skälen alltid framme
Varje rekommendation visar de faktorer som drev den, så att användaren kan väga dem mot sin egen kunskap om fallet. Det gör förslaget granskningsbart. Jag prioriterade ett fåtal begripliga faktorer så att förklaringen går att läsa på några sekunder.
Varje faktor visar nyckelvärde, riktning och hur säkert underlaget är. Säkerhet och status bygger på samma tokens som resten av systemet (ai/confidence/* och status/*), vilket gör att användaren känner igen signalen direkt och att svaga källor flaggas tydligt. Längst ned väger systemet ihop faktorerna till en samlad bild, vilket gör resonemanget spårbart från enskild faktor till slutlig rekommendation.
Friktion och spårbarhet mot automation bias
Automation bias var den största risken i projektet. Därför lät jag friktion och spårbarhet gälla på de två ställen där det betyder mest.
När konfidensen är låg bromsar systemet beslutet. Jag låste beslutsknapparna, både Godkänn och Avslå, tills användaren aktivt bekräftat att det kritiska underlaget granskats, så att en svag rekommendation aldrig godkänns på autopilot. Att bara låsa knappen hade gjort användaren osäker på vad som krävdes, så systemet pekar ut nästa steg och namnger källorna som behöver granskas, exempelvis oreviderat bokslut och otillgänglig branschdata.
Innan ett beslut med stor påverkan slutförs möter användaren ett bekräftelse- och sammanfattningssteg som visar vad som beslutats och på vilka grunder. Extra steg kostar klick, men vid ett avgörande beslut är det värt det. Steget visar också vad som loggas, det vill säga beslutet, motiveringen och underlaget som låg framme. Det gör beslutet granskningsbart i efterhand och skyddar både användaren och den sökande. Spårbarhet är dessutom ett krav i EU:s AI-förordning för högrisksystem, så loggningen är ett designkrav.
Genom att kryssa i rutan bekräftar du att du tagit del av och värderat AI-rekommendationen. Detta val loggas med din tidsstämpel och identitet.
Designsystemet
Mönster för AI-moment som går att återanvända i hela domänen.
Designsystemet standardiserar de återkommande momenten i ett betrott AI-gränssnitt, det vill säga rekommendationskortet, säkerhetsindikatorn, förklaringspanelen, avvikelseflödet och beslutssammanfattningen. När de byggs som komponenter med tydliga regler blir samma mönster igenkännbart oavsett var i flödet det dyker upp, och principerna byggs in i systemet i stället för att hänga på enskilda skärmar.
Systemet omfattar 21 komponenter, varav 10 AI-specifika, med drygt 230 varianter och tokens i två nivåer (foundation och semantiska) där AI är en egen semantisk domän om 38 tokens. AI-mönstren bygger på samma grund som de generella komponenterna och ärver deras regler för färg, typografi och spacing.
Det är här fördjupningen pekar bortom det enskilda scenariot. Mönstren är formulerade så att de ska kunna återanvändas i andra högriskbeslut, inte bara i kredithandläggning.
Färger
Färgsystemet är byggt i två nivåer. Foundation håller råvärdena, det vill säga kulörramper i grått, blått, grönt, rött och orange där varje kulör går från ljus till mörk i fasta steg. De värdena väljs en gång och allt annat i systemet bygger på dem.
Det semantiska lagret ger färgerna en roll. Varje komponent pekar på en token som bakgrund, kant eller text, och token hämtar sitt värde ur en foundation-ramp. På så sätt betyder samma färg samma sak överallt, vilket gör att en ändring i foundation slår igenom i alla komponenter som refererar värdet. AI använder samma logik med ett eget färgspråk. AI-märkningen bygger på blått och låg konfidens på rött, där bakgrund, kant och text dras ur samma ramp.
Satoshi
Typografi
Hela systemet bygger på en enda typsnittsfamilj, Satoshi Variable. Det är ett variabelt typsnitt, det vill säga att hela viktspannet från Light 300 till Bold 700 kommer ur en och samma fil. Satoshi är en neutral geometrisk grotesk som håller ihop systemet och är läsbar i små storlekar och täta vyer.
Varje vikt har en egen uppgift. Regular används för brödtext och resonemang, medium för korttitlar och etiketter, semibold för rubriker och bold för nyckeltal. Storlekarna ligger i en namngiven skala från Heading 1 till Caption, där varje steg är en token som binder ihop storlek, radavstånd och vikt. På så sätt betyder hierarkin samma sak i hela systemet, vilket gör täta underlag som belopp, krav och källor snabba att skanna och modellens resonemang lätt att läsa.
Skala
Spacing styr padding, mellanrum och marginaler. Skalan är px-baserad och bygger på fasta steg om fyra pixlar, med ett par finsteg på två, från noll upp till åttio. Samma steg används i hela systemet, så att avstånd betyder samma sak oavsett vy.
Radius mjukar upp hörnen. De flesta komponenter ligger på radius/md, åtta pixlar. Effekterna är en skugg-skala i fyra steg som lyfter ytor, från diskreta kort till modaler. Fokus markeras i stället med en ring på en pixel. Nedan visas det tillämpat på ett faktorkort, med spacing, radie och skugga utpekade direkt på komponenten.
Källa / Ladda upp underlag
Handläggaren laddar upp och importerar underlag till analysen.
Konfidensindikator
AI:ns säkerhet som ett kategoriskt tillstånd, inte en exakt siffra.
Påverkansnivå
Bedömd påverkan som ett kategoriskt läge — Låg, Medel eller Hög.
Avvikelse → beslut
Datakvalitetsvarningen växer till en beslutspanel; besluten låsta tills AI-underlaget granskats.
Underlag → tokens
Källstatus-tabellens tillstånd färgsatta av semantiska tokens.
Från design till kod
Den kodade prototypen var ett sätt att pröva att mönstren håller på riktigt.
Jag tog prototypen vidare till en fungerande version i kod med hjälp av Claude Code. Syftet var dels att känna hur interaktionerna fungerar i ett levande gränssnitt, något en statisk Figma-prototyp döljer, dels att visa att designsystemets mönster går att implementera. Huvudflödet går att klicka igenom, och prototypen rymmer vyerna underlag, överblick och spårlogg. Interaktionerna var planerade i Figma, men det var först i verklig kod som de gick att bedöma i verkligt tempo.
Kodsteget gav också en lärdom om designsystemet självt. Eftersom tokens och komponenter har semantiska namn kunde AI-verktyget läsa designens avsikt direkt: ai/confidence/high berättar vad färgen betyder och behöver aldrig hårdkodas. Tydlig metadata över designelementen gjorde prototypen både snabbare att bygga och mer trogen designen. Jag tror att designsystem får en ny roll här, det vill säga som en uppsättning regler som AI kan utgå ifrån när den bygger.
Lärdomar och nästa steg
Det starkaste jag tar med mig är att tillit är något man designar för, inte något som uppstår av sig självt.
När jag började projektet trodde jag att bra AI-UX handlade om att presentera svaret tydligt. Under arbetet förstod jag att det viktigaste ofta är något annat, det vill säga att göra osäkerheten synlig, lägga friktion där den behövs och skydda användarens omdöme. I en högriskdomän är kalibrerad tillit den svåra designutmaningen.
Jag lärde mig också att tänka i mönster, inte i enskilda skärmar. De beslut jag är mest nöjd med är de som blev återanvändbara komponenter i designsystemet, eftersom de bär principerna vidare bortom det enskilda fallet. Att ta designen hela vägen till kod ändrade dessutom hur jag bedömde mina egna val. Det som ser övertygande ut i Figma är inte alltid det som känns rätt i handen.
Samtidigt är jag tydlig med var designen står. Det här är ett teoridrivet fördjupningsarbete och prototypen har ännu inte prövats med användare, så jag har inga mätvärden och att påstå effekt vore en överdrift. Det jag kan stå för är att varje designbeslut är spårbart till forskning om människa–AI-samspel och prövat mot fyra principer, och att lösningen finns både som designsystem och som körbar prototyp.
Så skulle designen prövas
Tillitskalibrering
Följer handläggaren AI:n när den har rätt, och går emot den när den har fel? Mäts med fall där facit är känt.
När förslaget inte följs
Hur ofta blir beslutet ett annat än förslaget, och med vilka motiveringar? Spårloggen gör mönstren synliga.
Används förklaringarna?
Öppnas de faktorer som driver förslaget och påverkar de beslutet? Det syns i interaktionsdata och uppföljande intervjuer.
Nästa steg är därför att utvärdera prototypen mot de måtten och låta resultaten ifrågasätta principerna. Därefter vore det intressant att pröva om AI-mönstren håller i en annan högriskdomän än kredit, eftersom det är där deras verkliga värde skulle visa sig.