I denna sektion får du som är ny den information du behöver för att komma igång med UX på Inera. Det är också här du kan fråga om access till användbara verktyg och även svara på frågor i vår UX-certifiering, som hjälper dig bedöma hur väl du tagit till dig av innehållet på dessa sidor.
Vi rekommenderar att du börjar läsa igenom informationen i detta avsnitt, innan du tar dig an nästa, som innehåller mer praktisk information om Arbetssätt.
Innehåll:
Steg vi går igenom när du kommer som konsult eller nyanställd till Inera för att du skall få en bra introduktion och grundkunskap. |
Inera bygger sedan många år tillbaka många olika webbtjänster. Här kan du lära känna Ineras varumärken och tjänsterna vi utvecklar. |
När du har läst igenom materialet i UX-ramverket är det dags för certifiering, för att stämma av att du vet det viktigaste om UX på Inera. |
I vår FAQ har vi samlat vanliga frågor och svar. Kanske finns svaret på just det du undrar här. |
Platsindex
|
|||||||||||||||||||||||||||||||
0-91177 - varumärkeEtt varumärke som 1177 står för ett stort ekonomiskt värde då det har 99% kännedom (mätning våren 2021), en sådan kännedom i Sverige värderas i miljarder kronor inte miljoner kronor varför dess omvårdnad är mycket viktig. Innehåll Varumärket 1177 Designsy
|
AAgent banner (ombud)Agent banner (ombudsbanner) visar information då en användare agerar som ombud för en annan person i inloggat läge och är specifik för de inloggade tjänsterna på 1177. Ombudsbanner ihopfälld, 1177 Image (10).png Innehållsförteckning Innehållsförteckning
Alert
Alert kan användas på en sida för tillfällig information eller för att meddela status i en tjänst eller funktion. 1177 Image - 2024-02-12T111926.824.png Inera Image - 2024-02-12T111931.248.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg
Alerts
Här finns olika typer av komponenter för alerts/meddelanden, samt ombudsbanner för 1177. Se till att du använder rätt typ av meddelande för rätt sak: Alert: meddelanden som förmedlar en typ av status på något sätt (error, attention, success, information)
Android-enheter
Testning med mobil enhet (Android) Här kommer lite saker som kan vara nyttiga att veta om du planerar att testa med en Android-telefon. BankID En testversion av BankID-appen måste installeras och för att detta ska fungera måste du tillåta att installera p
Ansvarsmatris digital tillgänglighet
Matrisen beskriver processen för manuella och automatiska tester i olika miljöer och hur testrapporter ska utformas. Kodningsstandarder: Frontendutvecklare ansvarar för att följa riktlinjer för tillgänglig kodning och användning av IDS-komponenter. Tillgä
Användningstester
Återanvända.png Vi bör regelbundet utföra olika typer av användarundersökningar för att kontrollera att våra tjänsters funktionalitet och design motsvarar användarnas prioriterade behov. Undersökningarna sker i form av enkäter, intervjuer eller användning
App eller Webb - beslutsträd
Ibland får vi en beställning på att ta fram en App för mobila enheter. Då är det viktigt att komma ihåg att det ur ett UX-perspektiv tillkommer en del krav rörande appens livscykel. Det är därför viktigt att fundera igenom mervärdet av en app jämfört med
Arbetssätt
I denna sektion får du information om hur vi arbetar med UX inom Inera, tips för användningstester, design reviews, hjälp med beslut i strategiska frågor och hur du avslutar ett projekt eller uppdrag. Innehåll: Designarbete Överblick av designprocess, met
Article footer (Tipsa och dela)
I slutet av en artikel finns en Tipsa och dela-sektion samt artikelfot. 1177 articlefooter-1177.png Inera articlefooter-inera.png Innehållsförteckning Komponentkällor Artikelfooter finns endast som exempel, inte som komponent. Därför finns den bara i Figm
Artikelsida - 1177
Artikelsidan är en sida som innehåller redaktionellt material, dvs text, bild, film, bildspel, tabeller eller olika former av länklistor. Innehållsförteckning Figma Figma Knapp 1177.jpg https://www.figma.com/design/mG2D5R8VolIKNIaRGmvuXF/1177-Komponentbib
Artikelsida - Inera
Artikelsidan är en sida som innehåller redaktionellt material, dvs text, bild, film, bildspel, tabeller eller olika former av länklistor. Innehållsförteckning Figma Figma Knapp Inera.jpg https://www.figma.com/design/TUpmxR3MeCVPsxxOp6JXeJ/Inera-Komponentb
Att ta reda på när du är UX-resurs
Du ska onboardas i ett projekt eller uppdrag. Det kan vara ett projekt som har drivits en tid eller något helt nytt. För att ditt UX-arbete ska flyta så smidigt som möjligt, tänk igenom punkterna vi har satt ihop som hjälp vid onboarding. Innehåll Vad är
Autocomplete i inmatningsfält
Baserat på WCAG krav: 1.3.5 Identify Input Purpose Källor: https://webbriktlinjer.se/riktlinjer/154-mark-upp-vanliga-formularfalt-i-koden/ https://webbriktlinjer.se/riktlinjer/154-mark-upp-vanliga-formularfalt-i-koden/ https://www.w3.org/WAI/WCAG21/Und
Avstånd mellan klickytor
Introduktion WCAG 2.2 har ett nytt krav som heter 2.5.8 Target Size (Minimum) Nivå AA https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#changes-from-wcag-21-to-wcag-22 https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#changes-from-wcag
Avvikelser
Nuvarande Avvikelser.png Nuvarande Avvikelser synkronisering Avvikelser synkronisering 1.0.png Avvikelser synkronisering 1.0 Detta har ändrats Ett-till-ett till enligt nya designriktlinjerna Avvikelser synkronisering 2.0.png Avvikelser synkronisering 2.0
|
||||||||||||||||||||||||||||||
BBadgeBadge är en färgad markör med text som används för att informera användaren om status på exempelvis ett objekt. image-20240717-111947.png 1177 image-20240717-111953.png Inera Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma
Badges & tags
Här finns övriga komponenter så som badges, date label och notis-badges.
Beslut - strategiskt viktiga frågor
Beslutsträd.png Här hittar du stöd för att ta beslut kring strategiskt viktiga frågor, ofta vid val av plattform eller teknik, eller hur information ska presenteras. Du kan använda frågorna för att skapa argument för ditt beslut eller beslutsförslag.
Beslut om avsteg från UX-ramverk - [projekt/tjänstnamn 4]
Anledning till att UX-ramverk inte används Roller och personer inblandade i beslut Namn Roll i projekt/tjänst/Inera Informerad om avsteg Andreas Melin UX-strateg Godkännande Har avstegen godkänts av sektionschef 35 incomplete Ja 36 incomplete Nej Har avst
Beslut om avsteg från UX-ramverk - [projekt/tjänstnamn 5]
Anledning till att UX-ramverk inte används Roller och personer inblandade i beslut Namn Roll i projekt/tjänst/Inera Informerad om avsteg Andreas Melin UX-strateg Godkännande Har avstegen godkänts av sektionschef 35 incomplete Ja 36 incomplete Nej Har avst
Beslut om avsteg från UX-ramverk - Mobilt SITHS
Anledning till att UX-ramverk inte används Appen togs fram innan det att UX-ramverket fanns klart. Uppdateringar av appen har inte tagit med i budget att bygga om utifrån Ineras standardiserade arbetssätt. För varje utbyggnad av appen blir den tekniska sk
Beslut om avsteg från UX-ramverk - NPÖ
Anledning till att UX-ramverk inte används De färger som finns i designsystemet uppfyller inte de behov som finns för funktionen (markerad rad i tabell) Roller och personer inblandade i beslut Namn Roll i projekt/tjänst/Inera Informerad om avsteg Andreas
Beslut om enstaka avsteg från UX-ramverk - Verksamhetsstöd telefonrådgivning
Anledning till att delar av UX-ramverk inte används: För att minska ytan som upptas är vissa ramar förenklade utan skuggning för att minska grafisk impact. För att snabbt förstå vad som är en Lyft luren och lägg på luren knapp i systemet är CTA-knappar in
Beslutsstöd
image-20200226-104531.png Nuvarande Beslutsstöd Förenklad sök.png Beslutsstöd 1.0 Detta har ändrats Förenklad och tydligare sökruta Förslag på sökord baserat på input Resonemang Ska gå snabbt att hitta sökrutan och förstå vad man får träff på. Dessa riske
Beställa UX-resurs - för projektledare
Försök svara på nedanstående frågor så gott du kan. Var gärna så specifik du kan i dina svar. Vad är det för tjänst ni behöver hjälp med? Är det en ny tjänst eller helt nytt projekt/uppdrag, eller är det en redan befintlig tjänst som ska vidareutvecklas?
Bifogade dokument
Fråga: Det är väldigt enkelt att lägga till ett dokument så som PDF, en Powerpoint-fil eller annat på en webbsida, varför är det fel? Är det inte bättre att vi har informationen tillgänglig än att den inte kommer upp alls? Svar: Det är mycket svårare för
Bifogade dokument eller filer på webben - beslutsträd
BifDokument.png Skall du bifoga ett dokument eller fil på en webbplats? Då skall du först gå igenom denna guide. Bäst är alltid att publicera informationen direkt på webbsidan istället för att bifoga dokument. I de fall dokument och filer måste användas
Bläddra
Nuvarande bläddra 1.pngNuvarande bläddra 2.pngNuvarande bläddra 3.png Nuvarande Bläddra Bläddra 1.0 1.pngBläddra 1.0 2.png Bläddra 1.0 Detta har ändrats Direktöversättning av utseende i kodprototyp med UX-ramverket. Lagt in enheter som hamnar under t
Bokade tider
screencapture-at-bokadetider-1177-se-2020-06-26-11_31_45.png screencapture-at-bokadetider-1177-se-2020-06-26-11_33_37.png Nuvarande Bokade tider Bokade tider - Desktop - 2.0@1x.pngBokade tider - Desktop - 2.0 Utan tider@1x.png Bokade tider - Mobile - 2.0@
Breadcrumb
Breadcrumb visar sidan man befinner sig på och var den hierarkiskt bor i strukturen, även om sidan inte visas i lokalnavigeringen. I mobil och tablet används istället en tillbakalänk (truncated breadcrumb), som länkar tillbaka stegvis upp till översta sek
Brytpunkter
Brytpunkter avgör hur innehållet på en sida anpassas vid större och mindre skärmar. Kod Brytpunkt Bredd IDS-namn Small < 640px S Medium > 640px M Large > 1024px Default Figma Mode Min-bredd Variabel Mobile 320px min-width Desktop 1440px min-width
Button
Med knappar kan användare utföra en åtgärd eller navigera till en annan sida. 1177 knappar_1177.png Inera inera-button.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-Komponen
Buttons
Här finns dokumentation för alla våra knappar. Innehåll:
|
CCAPTCHA - Ur tillgänglighetsperspektivDetta är en sammanfattning kring CAPTCHA från ett tillgänglighetsperspektiv. På sidan så förklaras det vad Captcha är för något, lite om olika sorter som finns samt en rekommendation. Rekommendation Rekommendationen när de gäller Captcha är att undvika at
Cards
Cards används både som navigationskort i redaktionellt innehåll och som behållare för olika typer av innehåll eller information. 1177 Image (70).png Inera inera-cards.png Innehållsförteckning Komponentkällor 1177 1177 Figma Knapp 1177.jpg https://www.figm
Cards & expandables
Här hittar du komponenter som hör till cards och expandables. Innehåll:
Carousel
Carousel är ett bildspel för stillbilder och text man kan bläddra mellan. 1177 carousel-1177.png Inera carousel-inera.png Innehållsförteckning Komponentkällor 1177 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-Komponent
Certifiering UX-strategi
För att arbeta med UX-området på Inera behöver du bekanta dig med informationen i UX-ramverket här på Confluence. När du känner dig bekväm med innehållet skall du genomgå certifieringen nedan. Du behöver inte plugga in detaljer men du behöver ha koll på v
Checkbox
Checkboxar tillåter användare att välja flera objekt från en lista med enskilda objekt, eller att markera ett enskilt objekt som valt. 1177 Checkbox - 1177.png Inera inera-check.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://ww
Content navigation
Content navigation används för att lista utvalda länkar till olika kapitel i artikeln som besökaren befinner sig i. Syftet är att skapa en bra översikt av innehållet samt underlätta navigering på långa artikelsidor med flera rubriker. 1177 Image - 2024-05
Copy
Det är oerhört viktigt att tänka över vilka ord och begrepp som du använder i gränssnitten. Vi skall här försöka lyfta fram några allmänna riktlinjer för språk och vanligt förekommande termer och meningar som vi rekommenderar att du använder. Copy.png Inn
|
||||||||||||||||||||||||||||||
DData tableDatatabeller används för att visa större mängder data eller information. Oftast kan användaren även göra någonting med tabellinformationen, som att markera och hantera rader. 1177 Image (43).png Inera Image (44).png Innehållsförteckning Komponentkällor
Date label
Date label är en grafisk datummarkör som kan användas för att på en bricka visualisera dag, månad och år. 1177 date-label-1177.png Inera inera-datelabel.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8V
Datepicker
Datepicker låter användaren välja datum, antingen genom att välja i en kalender eller genom fritext. 1177 Image (62).png Inera Image (63).png Innehållsförteckning Komponentkällor Observera att ramverket inte har en egen datepicker, utan endast erbjuder st
Deltagare
Vi har en egen användarpanel vi kan återanvända. Panelen samlades in under våren 2023 via 1177.se http://1177.se och UMO.se http://UMO.se. Det finns möjlighet att göra urval på vissa kriterer som kön, typ av stad (stor, medel, liten), ålder, internetvana,
Design review
När skall vi göra design reviews? Det är en fråga som ofta behöver tas upp med projektledare eller motsvarande men det måste vara en del av det återkommande arbetet. Det spelar ingen roll hur duktig en frontendutvecklare är, det är först i produktionslik
Designarbete
Innehåll: Designprocess för användning och användarupplevelse Det går att arbeta med design från tidig fas i ett förändringsinitiativ till en tjänst i användning. Aktiviteter kan genomföras mer eller mindre omfattande och med olika metoder beroende på fa
Designhistorik
För att kunna följa hur design vidareutvecklas i olika stadier, inkrement, versioner, releaser före och efter utvärdering eller test så skall vi ha en designhistorik. På underliggande sidor hittar du exempel på hur designhistoriken på ett enkelt sätt kan
Designhistorik - Stöd och behandling
Snabbguiden image-20210701-055924.pngimage-20210701-055858.pngimage-20210701-055910.png image-20210701-060002.png image-20210701-060021.png image-20210701-060029.png Nuvarande Snabbguide, några exempel Snabbguiden används som ett stöd för att förklara tjä
Designrevision
Ibland behöver man se över grafiska gränssnittet för att kolla om det är samtida, passar målgruppen helt enkelt att det ligger rätt i tiden. Denna typ av genomgång kallar vi Revision. En revision är ett större arbete och det efterföljs ofta av att man byg
Designriktlinjer
Denna samling med sidor är under uppbyggnad. På underliggande sidor har vi samlat riktlinjer för hur vi designar olika lösningar. Saknar du något? Kontakta ux@inera.se mailto:ux@inera.se, så ser vi hur vi kan komplettera informationen. Innehåll:
Designriktlinjer - tillgänglighet
Här har vi samlat tips och vägledning kring hur du kan tänka för att det du bygger ska bli tillgängligt i vissa givna scenarion som inte går att styra genom komponenter, som till exempel hur man kan tänka kring autocomplete eller CAPTCHA. Innehåll:
Designsystem
Komponentsystem.png Om vårt designsystem Ineras Designsystem består av komponentbibliotek i Figma och kod (IDS) samt riktlinjer för gränssnittsdesign. Sedan år 2020 skall alla projekt och tjänster använda men också bidra till komponentbiblioteken. Hur öve
Digital tillgänglighet
Tillgänglighet1.png Vi på Inera jobbar med inkluderande tjänster och produkter. Vi designar för alla och därför är det självklart att vi bygger våra tjänster tillgängligt. För offentliga aktörer, som Inera, är det dessutom lagkrav (genom Webbtillgänglighe
Digital tillgänglighet och vårt ansvar
Vårt ansvar Vi ansvarar för våra produkter tjänster oavsett vem som utvecklat, skapat dem Vi måste se till att vi följer lagen om tillgänglighet, vad som gäller kan du läsa om hos DIGG. https://www.digg.se/digital-tillganglighet/om-lagen Faser under en li
Divider
Divider är en linje som kan användas för att dela upp innehåll. image-20240516-132843.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/design/mG2D5R8VolIKNIaRGmvuXF/1177-Komponentbibliotek?m=auto&node-id=11850%3A494
|
EEnkla/enfärgade ikonerDessa ikoner är gjorda för att passa till Ineras grafiska profil Ladda antingen ner mappen med samtliga ikoner som finns högst upp (finns som zip-fil med både PNG- och SVG-format) eller ladda ner enskilda ikoner (enbart PNG) från galleriet eller från tabe
Enkätpuff
En enkätpuff är ett statiskt kort genom vilket vi kan bjuda in användare att svara på kundundersökningar på våra olika sajter. 1177 Invånare image-20240104-141001.png Inera image-20240104-141016.png Innehållsförteckning Komponentkällor 1177 1177 Fig
Examples - sidmallar
Här finns exempel på hur vanligt förekommande sidtyper kan se ut, exempelvis en artikelsida, inloggningssida eller felsida. Innehåll:
Expandables
Expandable är en komponent som låter användaren fälla in eller ut (visa/dölja) information i en eller flera nivåer. 1177 expandable-1177.png Inera inera-expandable.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.co
|
||||||||||||||||||||||||||||||
FFAB (floating action button / back to top)FAB (floating action button) eller back to top-button är en variant av en icon button. Knappen är rund med uppåtpil som vid klick tar användaren högst upp i innehållet på den aktuella sidan. Image - 2024-05-16T093342.533.png 1177 Image - 2024-05-16T093344
FAQ - vanliga frågor
FAQ.png Här samlar vi ihop de vanligaste frågorna som vi fått in kring UX-ramverket. Saknar du svar på din fråga så sök gärna också i sökfunktionen som finns på vår startsida https://inera.atlassian.net/wiki/spaces/USI
Felanmälan
felanmälan nuvarande.png Nuvarande Felanmälan felanmälan 1.0.pngfelanmälan 1.0 (mobil).png Felanmälan 1.0 Detta har ändrats Applicerat Ineras nya designriktlinjer. För att få en känsla av att Ineras produkter hör ihop och har samma funktioner med samma
Felsidor - 1177 & Inera
Här finns designexempel för felsidor för både 1177 och Inera. Figma 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-Komponentbibliotek?node-id=11779%3A50487&t=8qIwtVaXX4pAEMLZ-1 Inera Figma Knapp Inera.jpg https://www.f
Figma komponentbibliotek
Här finns information om komponentbiblioteket i Figma, där komponenterna finns samlade. Figmabiblioteket är ett designverktyg för UX/UI och ska säkerställa att rätt komponenter används redan i skisserna. Innehåll Så här gör du OBS! Du behöver ha ett Figma
Focus marker
Fokus är visuella markörer som visar vilket (oftast interaktivt) element på en sida som är fokuserat, i vårt fall genom en solid linje runt elementet. Endast ett element på en sida kan fokuseras åt gången. 1177 1177fokus.png Inera inerafokus.png Innehålls
Fokusmarkering
I detta dokument så går vi igenom krav och tips om fokusmarkeringar utifrån ett tillgänglighetsperspektiv. Källa: https://webbriktlinjer.se/ https://webbriktlinjer.se/ https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html https://www.w
Footer
Footern syns längst ned på webbplatsen och innehåller namnet på varumärket webbplatsen tillhör och vanligtvis länkar till andra delar av eller information om webbplatsen. image-20240516-071027.png 1177 image-20240516-071000.png Inera (Admin) Innehållsfört
Forms
Här hittar du alla formulärelement. Innehåll:
Färger - 1177
1177:s färgpalett består av en röd primärfärg, sekundärfärgerna mörkröd och ljusrosa samt ett antal komplementfärger. Färger 1177:s varumärkesmanua https://www.1177.se/riktlinjer-och-material/om-varumarket/Varumarkesmanual/visuell-identitet/farger/l är de
Färger - Inera
Ineras varumärke använder i huvudsak tre färger, en primär (rödrosa)- en sekundär (beige)- och en accentfärg (grön). Två komplementfärger (turkos, orange) finns också, men bör användas mycket sparsamt (exempelvis i diagram och statistik). Innehållsförteck
Färger, logotyper & typsnitt
Favikon.png Här hittar du information om färgpalett, logotyper och favikoner för inera.se http://inera.se, 1177.se http://1177.se och digitala tjänster som ligger under dessa varumärken. Innehåll:
Får vi använda komponentbiblioteket?
Fråga: Vi undrar om vi får använda komponentbiblioteket och vad som gäller för varumärkena 1177 och Inera? Svar: Första kontrollen är om ni har rätt att använda varumärket som är kopplat till komponentbiblioteket. Läs mer om dessa: Varumärken Om ni fått g
Förstå behov av tillgänglighet
Olika människor med olika förmågor vi är alla olika.jpg Att få perspektiv och förståelse hur något är för någon annan får vi genom att ta del av någon annans upplevelse. Användarupplevelse är hur en användare interagerar med och upplever en produkt, ett s
|
GGDPR vid testAlla verksamheter som hanterar personuppgifter måste följa dataskyddsförordningen (GDPR). Det innebär att vi behöver följa de grundläggande principerna och informera de registrerade om hur ni hanterar deras personuppgifter. Innehåll Några enkla principer
Gemensam CSS (end-of-life 2025)
Viktig information om Gemensam CSS I all nyutveckling framöver rekommenderas IDS, och vår CSS kommer ha end of life 2025. Beslut har fattats baserat på tekniska och ekonomiska överväganden. Fortsatt användning av Gemensam CSS är varken kostnadseffektivt e
Global alert
Global alerts hanterar meddelanden som påverkar hela tjänsten och som är viktiga att lyfta till alla besökare. 1177 Image (11).png Inera Image (14).png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIKN
Godkända avsteg - Design Authority
Det är inte alltid det går att anpassa ett grafiskt gränssnitt till UX-ramverket av olika anledningar. I de fall det inte går skall ett beslutsunderlag skapas och läggas in under denna sida här i Confluence. @self
Grid, gridsystem och griddar
Fråga: Vi får inte plats med allt innehåll i den grid som finns i UX-ramverket måste vi använda den? Svar: Ja, vi skall hålla oss till de gridsystem som finns i UX-ramverket (observera att det sedan 2022 har möjlighet till utökad bredd, se mer på komponen
Grid, margins & distances
Grid.png Här hittar du exempel på den grid som används till 1177.se http://1177.se och inera.se http://inera.se. Även exempel på marginaler/avstånd och brytpunkter. Observera att mått i bilden/skisserna kan variera från vad som är utvecklat. Innehåll:
Grids
Grids skapar ramen inom vilken innehåll kan placeras. Gridens kolumner och mellanrum styr hur innehållet kan placeras på den givna ytan. Desktop - Grid (1).png Desktop Grid Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.c
|
||||||||||||||||||||||||||||||
HHeaderHeadern syns högst upp på webbplatsen och innehåller varumärkets logotyp, färger och huvudnavigation. Utseendet skiljer sig åt beroende på vilket varumärke webbplatsen tillhör och målgruppen den riktar sig till. image-20240716-133728.png 1177 image-202407
Header & Footer
Här hittar du sidhuvud och sidfot för desktop, tablet respektive mobil. För 1177 skiljer sig dessa åt beroende på målgrupper: riktad mot invånare eller mot profession. För Inera skiljer de sig beroende på om det gäller Inera eller admintjänster/verktyg me
HSA
Här finns designhistorik för olika vyer i HSA
Hänvisning
|
IIcon buttonIcon buttons är runda knappar som kan användas med en bokstav, siffra eller ikon för att indikera något användaren kan göra. 1177 Image (64).png Inera Image (65).png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file
Icons
Ikoner är visuella, grafiska symboler som används för att för att enskilt eller tillsammans med text förmedla ett budskap. 1177 icons-1177.png Inera icons-inera.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/d
IDS för designers
Här följer en kortare guide för att börja utforska IDS och React och hur man skulle kunna bygga prototyper. Börja med att besöka den här länken: https://codesandbox.io/s/s9zl9n https://codesandbox.io/s/s9zl9n Du har nu öppnat en webbaserad utvecklingsmilj
IE 11, Internet Explorer 11
Fråga: Behöver vi ta hänsyn till att många använder IE11 i regionerna? Svar: Nej, vi följer eKlients rekommendationer och där är inte IE11 inkluderat sedan januari 2020. Läs mer: https://inera.atlassian.net/wiki/spaces/USI/pages/233052408/Webbl+sarst+d?sr
Image
Bilder kan användas för att förstärka information eller budskap, eller i dekorativa syften. Det finns ett antal fasta bildstorlekar vi använder för respektive varumärke. 1177 image-1177.png Inera image-inera.png Innehållsförteckning Komponentkällor Denna
Image, video & carousel
Här hittar du komponenter för bildstorlekar, bildtext, bildspel och video. Innehåll:
In- och utloggningssidor - admin
Sidexempel för in- och utloggningssidor samt felsida för misslyckad inloggning. Exempel visar 1177 Admin och Inera Admin. Innehållsförteckning Designexempel - 1177 Inloggning image-20240717-143620.png image-20240717-143738.png Utloggning - bekräftelse ima
Inaktiva komponenter - Disabled states
Introduktion Denna sidan beskriver de riktlinjer UX-ramverket har angående disabled states (inaktiva komponenter) och hur man ska tänka innan man väljer att använda det. Källor som har använts https://axesslab.com/disabled-buttons-suck/ https://axesslab.c
Inera - varumärke
Inera som varumärke är mer av typen B2B (Business to business) och kan därför inte värderas utifrån samma kriterier som allmän kännedom. Innehåll Varumärket Inera Ibland kan ett administrativt gränssnitt finnas som inte enbart vänder sig till användare av
Inera Design System (IDS) - kod
IDS.png Inera Design System (IDS) är ett komponentbibliotek i kod vars grundtanke är att fungera med alla olika typer av ramverk, samt öka återanvändningen bland kodkomponenter i projekten. IDS är kodmotsvarigheten till designsystemet i Figma. Innehåll: O
Information table
Tabeller används för att visa information eller data strukturerat i rader och kolumner. 1177 table-1177.png Inera inera-table.png Innehållsförteckning Komponentkällor Observera att komponenten i Storybook endast är ett CSS-exempel för styling av HTML-
Input
Ett inmatningsfält för kortare text, exempelvis namn, e-postadress eller telefonnummer. 1177 Textfält - 1177.png Inera inera-input.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-Ko
Inställningar
Desktop - Nuvarande.png Mobile - Nuvarande.png Nuvarande Inställningar Desktop - 1-1.png Mobile - 1-1.png Inställningar 1.0 Detta har ändrats En “ett till ett” lösning med de nya designriktlinjern Inställningar - Desktop - 2.0.png Inställningar - Mobile -
Intro till Ineras webuniversum
Inera bygger sedan många år tillbaka många olika webbtjänster. Allt fler av de tjänster som tidigare varit så kallade klienter övergår i och med UX-ramverket till att bli webbklienter eller webbplatser. Fördelen med detta är att installationer inte behöve
Intygsstatistik
intygsstatistik-nuvarande.png Nuvarande Intygsstatistik intygsstatistik-1.0.png Intygsstatistik 1.0 Detta har ändrats Överföring ett till ett till UX-ramverket. Försökt återanvända headern från förslaget på Pascal då det är lite oklart hur en Inera-header
iOS-enheter
Testning med mobil enhet (iOS) Här kommer lite saker som kan vara nyttiga att veta om du planerar att testa med en iOS-telefon. BankID När du ska testa en tjänst med en BankID-inloggning mot en testmiljö så är det bra att veta att appen antingen kan gå mo
|
||||||||||||||||||||||||||||||
JJournalenNuvarande Journal.png Nuvarande rådgivningsstödet Journal 1.0.png Journal 1.0 Detta har ändrats Anpassa till webbaserat gränssnitt. Konverterat nuvarande interaktioner och komponenter till webben för att få en förståelse hur de skulle kunna ersättas/funge
|
KKakor (cookies)EU:s direktiv om cookies (en del av ePrivacy directive https://ec.europa.eu/digital-single-market/en/news/eprivacy-directive) anger sedan 2009 att webbplatser som använder cookies måste kommunicera detta till besökare, och ge dem ett sätt att välja bort c
KKA
nuvarande KKA.png Nuvarande KKA KKA 1.0.pngKKA 1.0 mobil.png KKA 1.0 Detta har ändrats En 1 till 1 översättning enligt UX-ramverket KKA 2.0.pngKKA 2.0 mobil.png KKA 2.0 Detta har ändrats Bytt ut rubiken “Alla mottagningar du har rätt att administera” till
Komponent saknas
Fråga: Den komponent vi behöver finns inte med i systemet, får vi hitta på en egen? Svar: Ja, man får hitta på sin egen men det skall göras i samråd med UX-ramverket. Först bör vi gemensamt se över om den behövs eller om det finns andra sätt att lösa prob
Komponenter
komponenter.png Här hittar du grafiska element och komponenter som tillhör varumärkena 1177 och Inera. Till varje komponent finns: en beskrivning, visuell gestaltning, länkar till Figma och Storybook samt tillgänglighetsinformation. Se mer information om
Kontakt
UX-teamet Du når oss enklast genom att mejla till ux@inera.se mailto:ux@inera.se. Teamet Anna Serrander Rebecka Näsström Joakim Bengtson Ulrika Roslund Gidlöf Michaela Holmgren Andreas Melin Jonatan.JohanssonOkomdal Pelle Östberg Designsystem-teamet Desig
Konto i Figma för andra resurser än UX-resurser
Fråga: Kan mina utvecklare i projektet få tillgång till Figma och hur fungerar det? Svar: Ja självklart. Det är en av styrkorna i Figma att kunna dela skisser och prototyper på ett enkelt sätt. Du kan som UI-designer dela en skiss på lite olika sätt som l
Kontrast på text och komponenter
På denna sida så beskrivs riktlinjerna för hur man ska tänka med kontraster för olika storlekar av text och icke-textobjekt som exempelvis knappar, inputfält med mera. Källor för riktlinjen: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.htm
|
||||||||||||||||||||||||||||||
LLaddning av innehållFör att arbeta på liknande sätt med laddning av innehåll i våra olika tjänster finns riktlinjer för hur vi kan visualisera och informera om laddning. Fyra olika case har identifierats: Knapp när en användare ska skicka något (där vi inte vill att knappen
Lagar och regler
LagarRegler.png Här hittar du länkar till lagar och regler som påverkar arbete med digitala tjänster, både generellt och inom vården. Övergripande RRI - Responsible Research and Innovation https://re-cognition-project.eu/responsible-research-innovation/ G
Link
Länkar låter användaren navigera till en annan sida eller länkar till dokument (t. ex. en Word-fil). Länkarna kan användas enskilt eller i exempelvis länklistor. Image - 2024-04-29T091012.774.png 1177 Image - 2024-04-29T091015.169.png Inera Innehållsförte
List
Listkomponenten används för att visa en lista med information, exempelvis ett sökresultat. Det finns flera varianter av listkomponenten för olika användningsområden. 1177 Image - 2024-05-16T092214.400.png Inera Image - 2024-05-16T092216.225.png Innehållsf
Loaders & scroll
Här finns alla komponenter som hanterar laddning (spinner, loader) samt scroll-komponenten. Innehåll:
Local navigation
Lokalnavigationen är en desktopkomponent som visar artiklar som finns inom samma ämnesområde. 1177 Image (86).png Inera Image (87).png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-Ko
Logotyp och favikoner - Inera
Ineras logotyp består av en grafisk symbol och ett ordmärke/namn. Logotypen används primärt med röd huvudfärg. Logotyp för Inera logoinera.png Innehållsförteckning Komponentkällor Figma Knapp Inera.jpg https://www.figma.com/file/TUpmxR3MeCVPsxxOp6JXeJ/Ine
Logotyper och favikoner - 1177
Vår logotyp består av siffermärket 1177. Den primära tillämpningen av logotypen är vit mot röd bakgrund. Sekundärt kan logotypen användas i rött mot vit, ljusröd eller ljusgrå bakgrund efter behov. Image - 2024-04-23T171111.672.png Logotyp för 1177 Innehå
Läkarutlåtanden
Läkarutlåtanden nuvarande.png Nuvarande Läkarutlåtanden Läkarutlåtanden 1.0.png Läkarutlåtanden 1.0 Detta har ändrats Direktöversättning av utseende i nuvarande testmiljön med UX-ramverket. Läkarutlåtanden 2.0.png Läkarutlåtanden 2.0 Detta har ändra
Läkemedelslistan Pascal
Pascal nuvarande.png Nuvarande Läkemedelslistan Pascal Pascal 1.0.png LM i Pascal 1.0 Detta har ändrats Överföring ett till ett. Dock med lite tweaks och merge:ande av olika komponenter för att försöka få det att se ganska likt ut det gamla. Dessa risker
Lämna ut SITHS-kort
nuvarande-kortutlämning.png Nuvarande Lämna ut SITHS-kort Detta är en del i “Utför” i personvyn kortutlämning-1.0.png Lämna ut SITHS-kort 1.0 Detta har ändrats Ett till ett av Lämna ut kort så som den ser ut i SITHS Admin idag Dessa risker är identifierad
|
MMarginaler och avståndHär visas hur marginaler och avstånd har strukturerats i designskisserna. Tänk på att det kan skilja mot hur det har utvecklats samt vad som ligger live. Innehållsförteckning Komponentkällor Resursfilen i Figma innehåller en komponent för spacing som kan
Material inför test
Här lägger vi upp inbjudningar, sammanställningar, länkar till formulär med mera som använts i samband med användarundersökningar. Tänk på att namnge filen tydligt, gärna enligt exempel: PROJEKTNAMN-ANVÄNDARTEST-INBJUDAN.doc PROJEKTNAMN-ANVÄNDARTEST-EFTER
Mina Sidor (inloggat läge)
siths-mina-sidor-nuvarande.png Nuvarande Mina Sidor I inloggat läge siths-mina-sidor-1.0.png Mina Sidor 1.0 Detta har ändrats Ett till ett-lösning på nuvarande design genom att använda konceptet för samlingssida och kort, dock utan bild eller stor ikon. s
Mobile/Desktop first
Det är i huvudsak mobil som används av våra användare då de surfar till våra tjänster vi skall därför alltid tänka Mobile First. Hur? När vi tänker Mobile first innebär det att vi utgår från mobilen: när vi skapar skisser när vi tänker ut hur tjänsten ska
Modal
En modal används för att informera användaren om något och kan innehålla viktig information, kräva att ett beslut tas eller kräva att användaren utför vissa uppgifter (t ex fyller i ett formulär, gör ett val i en radiogrupp eller godkänner villkor). 117
Modal, popover & tooltip
Här finns komponenter för modaler, popovers och tooltips. Innehåll:
Modaler
Modal (om samtycke) nuvarande.png Nuvarande Modal (Om samtycke) Modal (om samtycke) 1.0.png Modal (Om samtycke) 1.0 Detta har ändrats Ett till ett-översättning med komponentbiblioteket Modal (inställningar) nuvarande.png Nuvarande Modal (Inställningar) M
Måste vi bygga responsivt?
Fråga: Vår tjänst/projekt riktar sig inte till mobila användare. Måste vi bygga responsivt? Svar: Det enkla svaret på frågan är JA. Vi bygger inte bara responsiva lösningar för att fungera för mobilanvändare utan också av tillgänglighetsskäl. I en respons
Möten med stakeholders
Det är svårt att få tag på rätt personer i vår organisation med kort varsel. Följ rekommendationerna nedan. Ett ofta återkommande “problem” i projekt på Inera är att de som sitter inne på kunskap är svåra att få tid med. Det gäller roller så som tjänstean
|
||||||||||||||||||||||||||||||
NNavigationHär hittar du komponenter som rör navigation. Innehåll:
Nivå av digital tillgänglighet?
Pratbubbla-tillg.png Lagen om tillgänglighet är relativt ny och det är inte ännu helt klart hur den skall tolkas. Beslutsträdet nedan är till för att hjälpa till att avgöra hur mycket som skall satsas på tillgänglighet i olika projekt. På Inera är det VD-
Notification badge
En notification badge kan användas för att visa användaren när något nytt hänt, t.ex. vid nya meddelanden. 1177 notification-badge-1177.png Inera Image - 2024-03-11T154047.739.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.
Ny flik, nytt fönster vid länkar
En fråga som dyker upp med jämna mellanrum är om externa länkar skall öppnas i ny flik, nytt fönster eller inte. Den huvudsakliga rekommendationen som man också kan läsa om på Webbriktlinjer https://webbriktlinjer.se/2017/05/15/target-blank/är att att öpp
Ny inom UX på Inera
Att göra. todo.jpg Följande steg går vi igenom när du kommer som konsult eller nyanställd till Inera för att du skall få en bra introduktion och grundkunskap om “vår värld”. Har du jobbat med oss tidigare ser vi över vilka steg som fortfarande är relevant
Nytt SITHS e-id kort
nuvarande-nytt-sithskort.png Nuvarande Nytt SITHS e-id kort Detta är en del i “Utför” i personvyn nytt-sithskort-1.0.png Nytt SITHS e-id-kort 1.0 Detta har ändrats Ett till ett av nytt kort så som den ser ut i SITHS Admin idag Resonemang Skillnaden är gil
När du är ny
Välkommen.png I denna sektion får du som är ny den information du behöver för att komma igång med UX på Inera. Informationen passar både för dig som är ny på Inera och för dig som påbörjar ett nytt projekt eller uppdrag. Det är också här du kan fråga om a
|
OObligatoriska fältIntroduktion: Det finns flera olika metoder för att indikera obligatoriska fält i formulär. Det finns varianter där man kan lägga till symboler eller bilder för att indikera att ett fält är obligatoriskt, eller så kan man använda sig utav vanlig text. Mål
Om UX-ramverket
Vad är UX-ramverket? UX-ramverket är en samling med tips, resurser och verktyg för att skapa högkvalitativa användargränssnitt på ett snabbt och effektivt sätt. Vi har en beprövad metodik och ett starkt designsystem som uppfyller höga krav på tillgängligh
|
||||||||||||||||||||||||||||||
PPagination button (visa NN till)Istället för att lista alla träffsidor i t.ex. en träfflista 1-nnn så används en knapp med texten ”Visa nn till”. pag-list-1177.png 1177 Image (30).png Inera Innehållsförteckning Designspecifikation Användning av komponenten Paginering består av komponent
Pagination, article (icon button)
Paginering för exempelvis informationstext i en artikelsida för att ta sig till nästa steg. 1177 pag-article-1177.png Inera Image (29).png Innehållsförteckning Designspecifikation Användning av komponenten Paginering består av komponenten Icon button i pr
Patientvy
Patientvy (sjukfall) nuvarande.png Nuvarande Patientvy (Sjukfall) Patientvy (sjukfall) 1.0.png Patientvy (Sjukfall) 1.0 Detta har ändrats Direktöversättning av utseende i nuvarande testmiljön med UX-ramverket. Använt vår skapade tabellkomponent med grund
Personuppgifter
image-20200226-103721.png Nuvarande Personuppgifter image-20200226-103809.png Personuppgifter 1.0 Detta har ändrats Koncept för att testa hur gränssnittet beter sig i webbform Gjort om allt innehåll som är statiskt och inte går att andra till just text oc
Personvy
siths-personvy-nuvarande.png Nuvarande personvy i SITHS Arbetet med denna version av SITHS utgick från ett antal redan definierade behov där nuvarande lösning inte ansågs passa funktionalitetsmässigt. Därför började designförslagen i en slags “ett till et
Popover
Popover är små overlays som öppnas av användaren genom att klicka på ett element (exempelvis en info-ikon). De ger användaren extra (icke kritisk) information om någonting på sidan. 1177 popover-1177.png Inera inera-popover.png Innehållsförteckning Komp
Presentations- och spaceikoner Inera
Här hittar du ikoner till presentationer som är uppdaterade till nya grafiska profilen. Det finns också ikoner att använda som “Avatarer” för projekt och tjänster till exempel “Space-ikoner” för Confluence. Exempel på presentationsikon Lakare_grupp.png Ex
Presentationsikoner
Dessa presentationsikoner är gjorda för att passa till Ineras grafiska profil Ladda antingen ner mappen med samtliga ikoner som finns högst upp (finns som zip-fil med både PNG- och SVG-format) eller ladda ner enskilda ikoner (enbart PNG) från galleriet el
Primär och sekundär knapp
Fråga: Hur placerar vi sekundära respektive primära knappar och varför? Svar: Primärknappen som också används för Call to action, CTA placeras i de fall den kombineras med sekundära val så att den upplevs som den som för användaren framåt det vill säga i
Process för överlämning, avslut
När en designer ska lämna ett projekt måste de spara sitt arbete så andra kan fortsätta eller ta del av det arbetet som är gjort. Leveransen är uppdelad i grundläggande samt utökad-leverans. Exit.png Innehåll Grundläggande leverans Den grundläggande lever
Progress bar
En progress bar används för att visuellt representera slutförandet av en uppgift eller process. Den visar hur mycket av uppgiften/processen som har slutförts och hur mycket som fortfarande är kvar. 1177 Image (85).png inera-progressbar.png Inera Innehålls
Puffar (relaterade artikelpuffar)
Här finns exempel på relaterade artikelpuffar och kombinationer av dessa för 1177 och Inera. Innehåll:
Pågående arbete
Följ ärenden Vi tycker det är viktigt med transparens. Vi tar in många synpunkter och önskemål och prioriterar dessa utifrån kriterier som antal användande tjänster/projekt och hur bråttom det är. För att vara transparenta med vad vi arbetar med så är vår
Pågående sjukfall
Pågående sjukfall nuvarande.png Nuvarande Pågående sjukfall Pågående sjukfall 1.0.png Pågående sjukfall 1.0 Detta har ändrats Direktöversättning av utseende i nuvarande testmiljön med UX-ramverket. Skapat tabellkomponent med grund i komponentbibliotek
|
Q |
||||||||||||||||||||||||||||||
RRadioRadioknappar är grafiska element i användargränssnittet som gör att användaren endast kan välja ett alternativ från en fördefinierad uppsättning alternativ. En radioknapp kan aldrig förekomma ensam utan endast i en radiogrupp, då det behöver finnas minst
Range
Range låter användaren ange ett numeriskt värde som inte får vara mindre eller större än ett givet värde. 1177 Range - 1177.png Inera inera-range.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/design/mG2D5R8VolIKN
Redigera
Denna sida visar ett exempel på en redigeravy, redigera person. Det finns ett flertal redigeravyer med liknande utseende och funktionalitet. Nuvarande Redigera.png Nuvarande Redigera Redigera 1.0.png Redigera 1.0 Detta har ändrats Översatt gränssnittet fr
Rehabstöd
Här finns designhistorik för olika vyer i Rehabstöd:
Relaterade artikelpuffar - 1177
Komponenten är responsiv. Ändra bredd på webbläsarfönstret för att se komponenten i dess olika lägen. Bred skärm kan behövas för att se desktopläget. Exempel Puffar Designspecifikation Artikelpuffar ligger i ett puffblock där puffarna kan placeras upp til
Relaterade artikelpuffar - Inera
Komponenten är responsiv. Ändra bredd på webbläsarfönstret för att se komponenten i dess olika lägen. Bred skärm kan behövas för att se desktopläget. Exempel Designspecifikation Artikelpuffar ligger i ett puffblock där puffarna kan placeras upp till fyra
Resurser
På dessa sidor har vi samlat resurser som underlättar UX-arbetet, allt från verktyg till tidigare designlösningar, statistik och resultat från tidigare undersökningar. Innehåll: Verktyg som underlättar UX Tips på verktyg du kan använda i ditt arbete som u
Rikshandboken Barnhälsovård
rikshandboken-nuvarande.png Nuvarande Rikshandboken BHV Rikshandboken 1.0.pngRikshandboken Mobile 1.0.png Rikshandboken BHV 1.0 Detta har ändrats Överföring ett till ett. Ändrat om baserat på UX-ramverket och riktlinjerna för 1177 Profession. Version för
Riktlinjer för att designa/jobba med infographics
Vid användning av grafiska verktyg så som: grafer, kartor, diagram med mera, så kan det uppstå problem om färgerna är för låga i kontrast eller alldeles för lika. En person med exempelvis färgblindhet, nedsatt synförmåga, som använder en monokrom skärm el
Rubrikstruktur
Källor: Funka https://www.funka.com/ Introduktion Detta dokument kommer att förklara varför rubrikstruktur är viktigt och hur det gynnar flera användare från ett tillgänglighetsperspektiv när det kodas rätt. Informationen har hämtats ifrån Funkas webbinar
|
SSaknar knappvariantFråga: Jag tycker det saknas varianter av knappar, kan jag ta fram en egen? Svar: Vi har medvetet valt ut vissa varianter av knappar för att skapa en tydlighet i designsystemet och göra det enkelt att använda. Vi lyssnar hela tiden på inkommande behov och
Samlingssida - 1177
En samlingssida är en navigationssida som samlar och ger användarna en överblick av underliggande sidor i strukturen/ämnesområdet. Innehållsförteckning Figma Figma Knapp 1177.jpg https://www.figma.com/design/mG2D5R8VolIKNIaRGmvuXF/1177-Komponentbibliotek?
Samlingssida - Inera
En samlingssida är en navigationssida som samlar och ger användarna en överblick av underliggande sidor i strukturen/ämnesområdet. Figma Figma Knapp Inera.jpg https://www.figma.com/design/TUpmxR3MeCVPsxxOp6JXeJ/Inera-Komponentbibliotek?node-id=10255-7203&
Sammanställning av användare vid test
Se formuläret: Formulär användare vid test .
SCS Beställningar
scs-nuvarande.pngscs-sis-nuvarande.png Nuvarande SCS Beställningar 1: Nuvarande SCS Beställningar med lista 2: Koppling till SIS Capture Station scs-1.0.png SCS Beställningar 1.0 Detta har ändrats Ett till ett-lösning på nuvarande design Användning av kon
Search
Search är en komponent som används specifikt för sök, med specifik placeholdertext och ikon med förstoringsglas. 1177 search-1177.png Inera inera-search.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8V
Sektionsstartsida - 1177
En sektionsstartsida är en navigationssida som samlar och ger en överblick över innehållet och underliggande sidor inom en hel huvudingång, så kallad sektion. En sektion motsvarar en huvudingång i toppmenyn. Innehållsförteckning Figma Figma Knapp 1177.jp
Sektionsstartsida - Inera
En sektionsstartsida är en navigationssida som samlar och ger en överblick över innehållet och underliggande sidor inom en hel huvudingång, så kallad sektion. En sektion motsvarar en huvudingång i toppmenyn. Innehållsförteckning Figma Figma Knapp Inera.
Select
Select är en lista med valbara alternativ som fälls ut när användaren klickar på den. 1177 Dropdown - 1177.png Inera inera-select.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/design/mG2D5R8VolIKNIaRGmvuXF/1177-K
Select multiple
Select multiple är en lista med valbara alternativ som fälls ut när användaren klickar på den. Användaren kan välja flera alternativ genom att klicka i checkboxar. 1177 Select multiple - 1177.png Inera inera-multiselect.png Innehållsförteckning Komponentk
Sidomenyn
I kodprototypen som ligger live idag så finns det en sidomeny som har plockats bort i de nya designförslagen. På denna sida redogörs vad som har hänt med de olika delarna som tidigare fanns i sidomenyn. Kontrollera (sidomeny) nuvarande.png Nuvarande sidom
Signering
image-20200402-120321.png Nuvarande Signering image-20200402-123528.png Signering 1.0 Detta har ändrats Funktionen för att skriva ut har tagits bort Kontaktorsak har lagts så den kommer upp när man väljer upplysningssamtal Resonemang Utskrift av journal g
SITHS
Här finns designhistorik för olika vyer i SITHS:
Skapa acceptans för tillgänglighet
Ibland kan vi uppleva att det är svårt att få acceptans för arbetet med tillgänglighet. Det är svårt att få budget för att verifiera tjänst för invånare med tredje part osv. I dessa fall kan vi göra två saker, hänvisa till lagstiftningen som är tvingande
Skapa rapport
Nuvarande skapa rapport.png Nuvarande Skapa rapport Skapa rapport 1.0.png Skapa rapport 1.0 Detta har ändrats Direktöversättning av utseende i kodprototyp med UX-ramverket Skapa rapport 2.0.png Skapa rapport 2.0 Detta har ändrats Sidomenyn är borttagen Ny
Space-ikoner Confluence
Här hittar du ikoner du kan ladda ner och välja att sätta på ditt “space” här på Confluence. instruktion spaceikoner.png Ikoner för nedladdning Ladda ner en hel mapp med alla ikoner genom att klicka “Hämta alla” längst ner i följande tabell. Spara enstaka
Spinner
Spinner uttrycker en ospecificerad väntetid när något laddas. 1177 Spinner - 1177.png Inera inera-spinner.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-Komponentbibliotek?node-id=
Statistik & Loggar
statistikloggar-start-nuvarande.pngstatistik-loggar-nuvarande.png Nuvarande Statistik & Loggar 1: Nuvarande samlingssida med kort och ikoner. 2: Inne på statistiksida (här Kortstatistik: Just nu, som exempel) statistikloggar-start-1.1.pngstatistikloggar-s
Stepper
Stepper visar var användaren befinner sig i ett numrerat flöde. Den visar även vad som är klart, om något saknas och vilka steg som är kvar att göra för att slutföra flödet. 1177 stepper-1177.png Inera stepper-inera (2).png Innehållsförteckning Komponentk
Stora fonter (typsnitt)
Fråga: Måste vi använda fonterna så som de är skapade i komponentbiblioteket? Vi tycker de är väldigt stora. Svar: Ja, vi vill att ni använder CSS och komponenter (IDS) så som de är utformade. Idag finns dock flera varianter på t ex H1, se dem här: https:
Stöd och Behandling (SoB)
SoB nuvarande.png Nuvarande Stöd och Behandling SoB 1.0.pngSoB 1.0 (mobil).png Stöd och Behandling 1.0 Detta har ändrats Applicerat Ineras nya designriktlinjer (för 1177 invånare). För att få en känsla av att Ineras produkter hör ihop och har samma funkti
Stödja olika webbläsare
Vi skall stödja de webbläsare som används av 5% eller fler av användarna. Om mycket små justeringar krävs för att inkludera webbläsare med färre användare kan detta göras men tänk på att anpassning, test och buggrättning ofta blir betydligt mer kostsamt ä
System för professionen, vad gäller?
Fråga: Vi skall skapa ett system/tjänst som primärt skall användas av professionen, alltså inte för invånarna. Vad gäller för regler? Vilka regler gäller för Digital tillgänglighet? Vilka regler gäller för UX generellt? Vilket varumärke skall användas? Sv
Sök (enkel och detaljerad)
enkel_sök_HSA_nuvarande.png Nuvarande Enkel sökning Enkel sökning 1.0.png Enkel sökning 1.0 Detta har ändrats Direktöversättning av utseende i kodprototyp med UX-ramverket. Enkel sök 2.0.png Enkel sökning 2.0 Detta har ändrats Arbetat om filtreringen s
Sök och sökresultat
nuvarande-sok-sokresultat.png Nuvarande Sök och sökresultat i SITHS sok-1.0.png Sök och sökresultat 1.0 Detta har ändrats Ett till ett-lösning från originalet med Inera-utseende Dessa risker är identifierade i den nya lösningen och/eller hypoteser som mås
Sökresultat
Nuvarande Sökresultat 1.pngNuvarande Sökresultat 2.png Nuvarande Sökresultat Sökresultat 1.0.pngSökresultat 1.0 inforuta.png Sökresultat 1.0 Detta har ändrats Direktöversättning av utseende i kodprototyp med UX-ramverket. Sökresultat 2.0.png Sökresul
|
||||||||||||||||||||||||||||||
TTabeller blir stora och saknar funktionalitetFråga: Tabellerna passar inte riktigt i vårt projekt, kan vi ha egna? Svar: Vi väljer kontinuerligt ut vilka komponenter som skapar mest nytta i vårt UX-ramverk och dess komponentbibliotek. När det gäller tabeller har vi beslutat att vi har två typtabelle
Table
Vi har två olika typer av tabeller: informationstabell och datatabell.
Tabs
Tabs är en uppsättning flikar (med eller utan ikoner) som låter användaren navigera mellan olika typer av sidinnehåll. Image - 2024-04-04T093715.370.png 1177 Inera Image - 2024-04-04T093717.908.png Innehållsförteckning Komponentkällor 1177 1177 Figma Knap
Tag
Tag-komponenten representerar specifika ord som hjälper till att märka, organisera och kategorisera innehåll. En tag kan vara både statisk, interaktiv och flera taggar visas ofta tillsammans i grupp. 1177 Image (40).png Inera Image (41).png Innehållsför
Teknisk lösning på hur vi kan skriva länkar i kod
För att beskriva externa länkar och länkar som öppnas i ny flik för skärmläsare är en väg att gå något i stil med den här lösningen: Först, börja med att lägga in en gömd div med beskrivningar: <div hidden> <span id="new-window-0">Öppnas i en ny flik</spa
Tekniska frågor att tänka på innan test
Denna sida och undersidor är till för att vägleda dig som vill testa tjänster inom Inera. Du hittar här information om saker du kan behöva för att få åtkomst för att testa som bland annat: Utfärdande av BankID för test Mobilt BankID för test (installation
Telefoni
image-20200226-102328.png Nuvarande Telefoni image-20200226-102447.png Telefoni 1.0 Detta har ändrats Anpassat för webbgränsitt Flyttat den “nuvarande baren” till ett eget fält ovan journalen Lagt till funktionalitet som stäng av mikrofon i gränsittet. Re
Test med känsliga data
Vi utför ofta tester där känsliga data kan bli synliga i de fall användaren loggar in på sitt eget konto. Med känsliga data menar vi personuppgifter generellt, det behöver inte vara data som personen upplever som känsligt. I de fall det är möjligt är det
Testa ditt test
Genomförandet av undersökningen behöver flyta på bra för att ge det värde som du är ute efter. Därför är det viktigt att du har gått igenom upplägget ordentligt innan de faktiska deltagarna anländer. Du vill inte upptäcka problem mitt under ett pågående t
Testa tillgänglighet
Här finns information och tips som hjälper dig när du ska testa tillgängligheten i det du byggt. Test med hjälp av Inera Test och utveckling (före detta NMT) För test av tillgänglighet använder vi Inera test och Utveckling i projekt och förvaltning och i
Testpersoner (fiktiva personer)
Invånare Om du ska testa invånarsidor och behöver en person som är invånare så behöver du få tag i en testperson. Det är en person knuten till ett fiktivt personnummer som går att använda i testmiljön. Om du ska testa 1177 e-tjänster behöver du även ett p
Textarea
Textarea ger användaren möjlighet att skriva en längre text. 1177 Textarea - 1177.png Inera inera-textarea.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIKNIaRGmvuXF/1177-Komponentbibliotek?node-id
Tillgänglighetsredogörelse
Innehåll: Vad är en tillgänglighetsredogörelse? Tillgänglighetsredogörelsen ska ses som en bredare sammanfattning av de hinder användargrupper kan stöta på. Alltså inte full med kodexempel, men kanske i stil med “Vi jobbar med att fixa passande alt-texter
Tillgänglighetsredogörelse 1177:s e-tjänster
Då 1177:s e-tjänster (nedan kallad e-tjänster) är komplext att hantera både för avsändare och mottagare följer här en extra genomgång för att förklara tänkt upplägg. Innehållsförteckning Upplägg Struktur för tillgänglighetsredogörelser 1177:s e-tjänster t
Tillgänglighetstänk runt Dropdown knappar
Källor: Fly-out Menus | Web Accessibility Initiative (WAI) | W3C https://www.w3.org/WAI/tutorials/menus/flyout/ Select dropdown - Web accessibility checklist - MagentaA11y https://www.magentaa11y.com/checklist-web/select/ Understanding WCAG 2.2 | WAI | W3
Time
Time låter användaren välja en tid, antingen genom att välja klockslag i en lista eller genom att skriva siffror i fritext. 1177 Time - 1177.png Inera inera-time.png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file
Tips hur man testar tillgänglighet
Detta dokument tar upp tips för hur man testar diverse olika områden inom tillgänglighet. Det finns mycket att kolla på inom tillgänglighet och detta dokument täcker tyvärr inte allt men det är en bra start om man vill lära sig mer om att testa tillgängli
Toastmeddelanden
Toast-meddelanden är små flytande popup-fönster som visas längst ned på skärmen i några sekunder. Meddelandet som visas i en toast är i regel kort information som exempelvis en bekräftelse på att något har gått bra eller att något har misslyckats. Detta k
Toggle
Toggle switch låter användaren växla mellan två lägen, på eller av. Den används när effekten är direkt och ingen ytterligare bekräftelse görs. 1177 Image (47).png Inera Image (48).png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https:/
Tooltip
Tooltip är en enkel popupruta som kan visas när användaren hovrar med muspekaren över ett element eller text. 1177 tooltip-1177.png Inera Image (15).png Innehållsförteckning Komponentkällor 1177 Figma Knapp 1177.jpg https://www.figma.com/file/mG2D5R8VolIK
Typografi & textelement
Här hittar du information om vad som gäller för typografi och textelement för 1177 och Inera. Observera att det finns specifika riktlinjer för delar av det innehåll på 1177 som finns på andra språk. Innehåll:
Typografi på andra språk - 1177
Delar av innehållet på 1177 finns på andra språk så som arabiska, polska, thailändska, tigrinska m.m. Det kräver vissa justeringar av typografin. Typografi för andra språk Arabiska, persiska och soranî Här har vi valt att använda Arial som är en standardf
Typografi: generella riktlinjer
Typografin ska lyfta och stärka våra budskap. Här presenteras hur vi arbetar med typografi för varumärkena 1177 och Inera. 1177 - invånare typografi-1177-citizen.png 1177 - profession/admin typografi-1177-profession.png Inera Typografi Inera.png Innehålls
|
UUMO & Youmo, målgrupp - ungaUMO och Youmo är starka och inarbetade undervarumärken och måste därför skyddas noga från att solkas genom felaktig användning. Ansvarig för dessa undervarumärken till 1177 är Lotta, Liselotte.Nordh.Rubulis@inera.se mailto:Liselotte.Nordh.Rubulis@inera.se
Uppdateringar
NyKomponent.png Ineras UX-ramverk (instruktioner, designsystem och komponenter) utvecklas löpande. Denna sida visar nya komponenter och större förändringar i UX-ramverket samt direktlänkar till sidorna.. 2024 Juli I juli har IDS-teamet semester. Mellan må
Utfärda BankID för testning
Om tjänsten du ska testa använder sig av BankID så ska du utfärda ett test ID. Då går du först till https://demo.bankid.com https://demo.bankid.com på din dator Sedan loggar du in med ett befintligt BankID, så som ditt personliga BankID. image-20200915-10
Utskriftsfunktioner, Skriv ut
Fråga: Hur skapar vi bra utskriftsfunktion för vår tjänst? Skall vi ha “Skapa PDF”? Svar: Inera har tagit beslut att minska vårt klimatavtryck i de fall där det är möjligt. Detta gör vi på flera sätt men ett av dem är att inte marknadsföra utskrifter. Vi
UX-ramverket
ux header.png Vi bidrar till att utveckla framtidens välfärd med design som är enkel, inkluderande, förtroendeingivande och framåtblickande. UX-ramverket är grunden för den design och de gränssnitt som skapas på Inera. En stor del är vårt designsystem som
|
||||||||||||||||||||||||||||||
VVarumärkenPå Inera finns enbart två huvudvarumärken, Inera och 1177. På sikt kommer alla våra tjänster troligt att anpassas till något av dessa två. I Ineras webbvärld finns i dagsläget flera grafiska profiler till exempel Vårdhandboken och Rikshandboken i barnhäls
Verktyg för tillgänglighet
Kontrollera befintlig webb: https://accessmonitor.acessibilidade.gov.pt https://accessmonitor.acessibilidade.gov.pt (välj engelska nere till höger) Kontrollera kontrastvärden: https://www.tpgi.com/color-contrast-checker/ https://www.tpgi.com/color-contras
Verktyg som underlättar UX
Tänk på att de verktyg du använder skall skapa filer som är läsbara för de som kommer efter dig i ett projekt eller i efterkommande förvaltning. Det är därför viktigt att du har leverabler avstämda med din beställare. Kontrollera att det du skapar går att
Video
Video används för att visa rörlig bild och kan kompletteras med en förtydligande bildtext. Exempel för 1177 Image (20).png Innehållsförteckning Komponentkällor Denna komponent finns inte i kod (IDS) ännu. 1177 Figma Knapp 1177.jpg https://www.figma.com/
Video - Ur tillgänglighetsperspektiv
I dagsläget finns det inte någon videokomponent i komponentbiblioteket. Syftet med denna text är därför att beskriva vad man ska ta hänsyn till videos från ett tillgänglighetsperspektiv. Komponenterna ska uppnå AA-nivå av tillgänglighet och AAA-nivå om de
Video och formulär - effektiv feedback
En video-enkät är en metod som innebär att du skickar iväg en skärminspelning av ett nytt gränssnitt där du förklarar vad som är nytt och hur det är tänkt att fungera genom att du klickar runt i en prototyp. Metoden används med fördel för att nå många män
Visa mer/visa mindre (fälla in och ut)
Hur hanterar vi visa mer/visa mindre-funktionalitet som visar och döljer innehåll, exempelvis längre texter? Att visa mer/mindre information kan hanteras på olika sätt beroende på kontext. UX-ramverket rekommenderar någon av dessa alternativ: Expandables
Visa person
Nuvarande visa person.png Nuvarande Visa person Visa person 1.0.png Visa person 1.0 Detta har ändrats Ett till ett-lösning baserat på kodprototypen Utseende och funktion relativt oförändrat Visa person 2.0.png Visa person 2.0 Detta har ändrats Bytt ut fli
|
WWCAGVad är WCAG? WCAG https://www.w3.org/WAI/standards-guidelines/wcag/ är riktlinjer för tillgänglighet för webbinnehåll som har tagits fram genom W3C i samarbete med individer och organisationer runt om i världen, med målet att tillhandahålla en gemensam st
WCAG 2.2
WCAG’s huvudkategorier: Perceivable - Möjlig att uppfatta Operable – Hanterbar Understandable – Begriplig Robust – Robust __________________________________________________________________________________________________________ Introduktion Detta dokumen
|
||||||||||||||||||||||||||||||
X |
Y |
||||||||||||||||||||||||||||||
Z |
!@#$ |
||||||||||||||||||||||||||||||