# Användarcentrerad design Arbetssätt och checklistor. # Användardriven utveckling ## [![workshop.jpg](https://rfdesign.xbm.se/uploads/images/gallery/2025-09/scaled-1680-/23673170.jpg)](https://rfdesign.xbm.se/uploads/images/gallery/2025-09/23673170.jpg) ## Övergripande arbetssätt - Bilda en referensgrupp som kan agera bollplank för snabba beslut. - Använd referensgruppen/referenspersoner - För frågor om behov/arbetssätt - För frågor om detaljer i gränssnitt (använd digitala mini-enkäter för feedback) - För frågor om begrepp/ordval - När det är möjligt, genomför [användningstester](https://www.uxtweak.com/usability-testing/) där deltagarna får givna uppgifter att slutföra - Dokumentera utfallet - Använd enkät för SUS (System Usability Scale) som avslutande aktivitet för att få en känsla för upplevd användarvänlighet ### Exempelformulär/enkäter - [Exempel på att fråga efter referenspersoner](https://q.axbom.se/refia01) - [Exempel på frågor om LOK-processen](https://q.axbom.se/lokprocess) - [Exempel på specifik fråga om ärendestatusar (Ekonomiska stöd)](https://q.axbom.se/rfstatus) - [Exempel på enkel rapport från användningstest](https://q.axbom.se/r/npRv01) - [Exempel på System Usability Scale](https://q.axbom.se/rf10) ### Metoder för specifika utmaningar - [Card sorting](https://www.uxtweak.com/card-sorting/) – när det uppstår frågetecken kring benämningar och/eller struktur i menyer. ### Långsiktighet Överväg att skapa ett [Voice of Customer](https://www.uxtweak.com/voice-of-customer/) (VOC)-program. Kundens röst (eller VoC) är en term som används för att beskriva processen att samla in användarfeedback och samla in mer information om deras upplevelse av produkten/tjänsten, liksom deras unika behov, preferenser och förväntningar. # Saker att testa #### Flöden - Närvarorapportera LOK #### Begrepp - Överliggande/överordnade/organisationskopplingar #### Prioriterat innehåll - Innehåll i headern på "föreningskortet" # Granskning av Dynamics #### Bredd på sidan Bredden på sidan bör följa ett givet mönster. - Om endast en kolumn används, dela upp sidan i 70/30 och lägg innehållet i 70-kolumnen. - Om två kolumner används, dela upp sidan i 50/50. Eftersträva balans i sidan snarare än att en kolumn har innehåll som sträcker sig mycket längre än den andra kolumnen. Undantag: om sidan består av en tabell så kan tabellen vara 100% bred. #### Innehåll i horisontella menyer Det dyker ibland upp innehåll i horisontella menyer som är en del av sådant som Dynamics skapar upp automatiskt. Ha inställningen att minimera antalet menyval för att minska mängden information, genom att dölja dem. Ta hellre bort för mycket än att bara slentrianmässigt låta det ligga kvar i gränssnittet. Som regel är det lätt att ta tillbaka något som är dolt, och det är bättre att göra det när det finns ett specifikt uttryckt behov av innehållet/menyvalet. #### Formulär Säkerställ att utseendet på inmatningsfält motsvarar förväntad längd på inmatning, där det går. Typiskt: Ett stort fält vill ha mycket innehåll och ett litet fält vill ha lite innehåll. #### Färger Där vi kan påverka färger, i egna felmeddelanden och i bakgrundsfärg på statusar, bekräfta att vi använder de [rekommenderade färgerna](https://rfdesign.xbm.se/books/designriktlinjer/page/farger "Färger"). #### Ordning Bekräfta att ordningen på fälten är motiverad och följer ett uttryckt mönster som är lämpligt för det aktuella arbetsflödet, till exempel: - Alfabetisk - De mest använda, och obligatoriska, fälten högst upp. - Fält som har samma typ av inmatning (radioknappar, textfält, med mera) grupperade tillsammans så att användaren inte behöver byta inmatningsmetod alltför ofta. #### Kolumnrubriker - Säkerställ att namngivningen av kolumnrubriker är konsekvent och lättförståelig. - Säkerställ att det är lagom antal kolumnrubriker och/eller att de överensstämmer med det som förväntas i det aktuella arbetsmomentet. - Säkerställ att ordningen på kolumnerna (från höger till vänster) känns rätt och logisk. - Säkerställ att sorteringsordningen är som förväntas, och att det går att ändra sortering baserat på egna val. #### Felmeddelanden Säkerställ att felmeddelanden är hjälpsamma. De ska tydligt förklara vad som orsakar felmeddelandet och hur användaren åtgärdar felet. För hjälp med att formulera felmeddelanden, kontakta UX-teamet. ### OBS! Mobilläge När man går till mobilläge, håll ögonen på i vilken ordning innehållet "travas". Alla kort som ligger till höger kommer falla under alla kort som ligger till vänster. Det här påverkar också till exempel i vilken ordning som innehåll blir uppläst med en skärmläsare som hjälpmedel - vilket oftast motsvarar ordningen som innehållet kommer i mobilen. Här är en förklaring i videoformat. # UX-skuld #### När användarupplevelsen blir en kostnad När vi gör designval som löser omedelbara problem, men som skapar långsiktiga brister i användarupplevelsen. Precis som teknisk skuld innebär det att vi tar genvägar, eller ignorerar problem, som vi vet kommer kräva mer arbete senare. - Otydliga flöden som "funkar för tillfället" men förvirrar användare - Inkonsekvent design som växer fram bit för bit - Tillgänglighetsproblem som skjuts på framtiden - Funktioner som läggs till utan att fundera på helheten #### Inte alltid dåligt UX-skuld är inte alltid dåligt – ibland måste vi välja snabba lösningar för att hinna lansera. Problemet uppstår när skulden växer okontrollerat och vi tappar överblicken. Konsekvenserna blir påtagliga: användare blir frustrerade, supportärenden ökar, och varje ny funktion tar längre tid att bygga eftersom den måste passa in i ett alltmer rörigt system. Till slut kostar det mer att underhålla det vi har än vad det skulle ha kostat att göra rätt från början. Lösningen är att synliggöra UX-skulden, prioritera den som vilken annan skuld som helst, och avsätta tid för att kontinuerligt förbättra användarupplevelsen – inte bara lägga till nytt. # Ramverk för krav [MALL Ramverk för krav.docx](https://svenskidrott.sharepoint.com/:w:/s/Nyttverksamhetssystem/IQAkjXOWdvQqRZkx9oD_2txxAfTZiy_Gyl88r81-nurW8gE?email=Michelle.Oskarsson%40rfsisu.se&e=Cvw0gp&isSPOFile=1&xsdata=MDV8MDJ8fDZiOGZjMGJlYWMxNzQ3MDQxODNiMDhkZTVlNzU3YjY4fGViNWIyZDZlMDI4ZTQ1NGRiODc4MGMwNTVhZGJlYjJhfDB8MHw2MzkwNTIwNTU4MDc3OTMyMTF8VW5rbm93bnxWR1ZoYlhOVFpXTjFjbWwwZVZObGNuWnBZMlY4ZXlKRFFTSTZJbFJsWVcxelgwRlVVRk5sY25acFkyVmZVMUJQVEU5R0lpd2lWaUk2SWpBdU1DNHdNREF3SWl3aVVDSTZJbGRwYmpNeUlpd2lRVTRpT2lKUGRHaGxjaUlzSWxkVUlqb3hNWDA9fDF8TDJOb1lYUnpMekU1T20xbFpYUnBibWRmVDFkTmVVOUVRbXROYlZsMFRucFdhbGw1TURCYVJHdDVURlJvYkU1cVZYUlpiVTE2VG5wRmVVNVVXbWhOYlVwb1FIUm9jbVZoWkM1Mk1pOXRaWE56WVdkbGN5OHhOelk1TmpBNE56STVORGczfGY0NjRlMTcyZThlMzQ2ZTIxODNiMDhkZTVlNzU3YjY4fDJhNjIzODBlNGZkMjQwZjNiZmRjMWQ3NDg5ZWU1ZmE4&sdata=WHUwZS9iWkxHZFdOVEwxT3JVWjhrYlZUZExNNmNEZS9LempiaXA5bHg1Yz0%3D&ovuser=eb5b2d6e-028e-454d-b878-0c055adbeb2a%2Cper.axbom%40rfsisu.se)