Bygger på:Röst↗ Foundation

Chat-bubbla

När du behöver det

Det visuella skalet runt ett chat-meddelande. chat-response-simple.md definierar orden; den här definierar bubblan som bär dem — form, färg, alignment, rolletikett, kolumnbredd och knappval inuti.

Principen

Patientens röst och Aleris röst får olika visuell tyngd. Aleris talar — bubblan är ett kort med vit yta, kant och skugga, som vilket annat informationsblock som helst på en kommunikativ yta. Patienten talar — bubblan är en mjuk färgad ton (petrol-100), inte ett kort. Två kort sida vid sida skulle få samtalet att kännas som en formell utväxling. En ton + ett kort gör att Aleris-svaret läser som svaret, inte som ena halvan av en dialog.

Strukturen

  1. Rolletikett — "Du" eller "Aleris assistent" (eller mottagningens namn). Liten, halvfetad, sekundärfärg.
  2. Bubbla
    • Patient (du): petrol-100-ton, ingen kant, ingen skugga, höger-justerad.
    • Aleris (assistent): kort-kluster — vit bakgrund (--card-bg), kant (--card-border-rule), skugga (--card-shadow), vänster-justerad.
  3. Innehåll — orden enligt chat-response-simple.md.
  4. (Valfritt) Nästa-steg-knapp — --button-outline-*, aldrig --button-primary-*. Se "Knappval" nedan.

Knappval i bubblan

Sidan har redan en primär CTA någon annanstans (hero, formulär, knapp i sidfoten). Chatten får inte konkurrera med den — det skulle bryta regeln om en primär CTA per skärm.

  • Konkret nästa-steg som länk: outline-knapp (--button-outline-bg/-text/-border/-padding-x/-padding-y/-font-size/-font-weight).
  • Information som inte kräver klick: ingen knapp. En kort fras med en inline-länk räcker.

Ingen primär (orange) knapp i en chat-bubbla på en sida som har en hero-CTA.

Layout

  • Bubbel-radius: --radius-m (8px). Interaktiv-tier — bubblan ligger mellan container och interaktivt element, och 8px läser varmare än container-tierens 4px utan att bli dekorativt.
  • Bubbel-padding: --spacing-md (24px).
  • Avstånd mellan bubblor: --spacing-sm (16px) som default; --spacing-md (24px) mellan turer (du → svar → du).
  • Maxbredd per bubbla: min(100%, 480px) — håller editorial-läsbarheten utan att sträcka rader för långt över skärmen.
  • Maxbredd för hela chat-kolumnen: 600px. Bredare än kort-mönstret (480px) eftersom svar är prosa, inte etikett/värde-par.
  • Inom-bubble-spacing: --spacing-2xs (8px) mellan rolletikett och innehåll, mellan stycken, och mellan sista stycket och knappen.

Exempel

✅

Du (petrol-100-bubbla, höger) Var hittar jag mitt provsvar?

Aleris assistent (vit bubbla med kant + skugga, vänster) Provsvaret finns på Mina sidor under fliken Provsvar. Det publiceras oftast 1–3 vardagar efter provtagningen, och du får ett mejl så snart svaret är klart.

Är det mer än fem vardagar sedan provet togs och svaret saknas? Skicka ett meddelande till din mottagning via Mina sidor, så följer vi upp det åt dig.

[Öppna Mina sidor] (outline-knapp)

— Aleris-svaret är ett kort, patientens fråga är en ton. Ingen primär knapp; outline för det konkreta nästa steget.

❌

Du (kort) Var hittar jag mitt provsvar?

Aleris assistent (kort) Hej! Tack för din fråga. Logga in på Mina sidor.

[Logga in] (orange primär knapp)

— två kort gör samtalet formellt; "Hej" och "Tack för din fråga" mot chat-response-simple; primär knapp konkurrerar med sidans CTA.

Tokens

Token Roll
--color-petrol-100 Patient-bubbla bakgrund
--card-bg / --card-border-rule / --card-shadow Aleris-bubbla (kort-kluster)
--color-petrol-500 Bubbel-textfärg (båda)
--text-secondary Rolletikett-färg
--type-small-size / --type-small-weight Rolletikett
--type-body-size / --type-body-line-height Bubbel-text
--radius-m Bubbel-radius
--spacing-md Bubbel-padding
--spacing-sm Avstånd mellan bubblor
--spacing-2xs Spacing inom bubbla
--button-outline-* Nästa-steg-knapp i bubbla (aldrig primary)

Tillgänglighet

  • Chat-listan är <ol role="list"> — ordningen är meningsfull (turerna i ett samtal).
  • Varje bubbla är en <article aria-labelledby="..."> så skärmläsare kan navigera mellan dem.
  • Rolletiketten har ett unikt id som aria-labelledby pekar på.
  • Färgen ensam bär aldrig avsändarrollen — texten "Du" / "Aleris assistent" ska alltid synas.
  • Outline-knappen i bubblan har minst 44px höjd och tydlig fokusring.

Snabbtest

Vet en skärmläsaranvändare på första bubblan vem som talar och vad svaret är? Och: konkurrerar den här bubblans nästa-steg med sidans primära CTA? Om någondera tvekar — tillbaka till strukturen.