‘MineAftaler’ Reimagined
Ved første øjekast, virker MineAftaler til at gøre det, den skal. Brugeren kan finde sin næste hospitalsaftale og information om hvor man skal være og hvad det handler om.
Det interessante er, at MineAftaler’ servicerer en bred gruppe af borgere på tværs af alder og udfordringer. De kan have kognitive udfordringer, fysiske udfordringer, synsproblemer mm., men hvor inkluderende er app’ens UX og UI design?
Case Study: Redesign af app’en ‘MineAftaler’.
Fokus punkter: UX, UI og Tilgængelighedsdesign.
Platform: Mobil app.
Værktøjer: Figma, Illustrator, Photoshop.
Designprocessens faser
Research
Hvad er platformens formål?
Capgemini skriver, at platformens formål er:
At hjælpe patienterne i deres møde med hospitalet.
At fungere som et nyttigt værktøj for sundhedspersonalet.
At det skal fungere både på mobil og computer.
At lade patienten selv booke tider.
At lade patienter holde sikre videokonsultationer.
At fungere som check-in ved ankomst på hospitalet.
At lade patienten ringe til hospitalet.
At effektivisere det medicinske og administrative personales arbejdsgange.
Hvem er brugerne?
Målgruppen for denne app er utrolig bred, da det er samtlige borgere i Region Midtjylland, som har en mobil og benytter app’en enten som patient eller pårørende.
Derfor har jeg udviklet ‘proto-personaer’. Disse er udviklet på baggrund af egne antagelser og erfaringer, og de er derfor ikke baseret på nye undersøgelser. Ikke desto mindre er det et nyttigt værktøj til at kickstarte produktudviklingen med begrænsede ressourcer.
Proto Personaer
Mindmap over tilgængelighedsstrategier
Mindmappet er i denne case den første guide for designstrategien og rummer både visuelle og strukturelle designgreb.
Det bliver tydeligt her, at visse strategier går igen både på brugerens kognitive og fysiske udfordringer. En strategi kan hjælpe én brugertypes kognitive udfordringer og hos en anden type brugere hjælper den samme strategi på de fysiske udfordringer.
Designanalyse af eksisterende app
Designanalysen er her et værktøj til at lære af den eksisterende app. Ved at undersøge app’en fra et tilgængelighedsperspektiv bliver det tydeligt hvilke designgreb, der kan styrke app’en.
Ingen understøttelse af skalerende skriftstørrelser
Uanset hvilken skriftstørrelse mobilens systemindstillinger er, har ‘MineAftaler’ kun én skriftstørrelse indstilling.
Tilgængeligheds-udfordring
En lille skriftstørrelse sænker læsbarheden især for brugere med synsudfordringer.
Overvældende information
På ‘Aftaler’ siden, får brugeren overblik over alle kommende aftaler.
Liste/kalender visning
Tilpas visning = kommende og gamle aftaler
Dato og tid
Emne
Afdeling
Adresse
Flyt og aflys tid
Dato for frist
Vis mere
Tilgængeligheds-udfordring
Hvis målet er at give overblik over alle kommende aftalers tider, så kan det overvælde brugeren med kognitive udfordringer.
Unødvendig information
Fra ‘Aftaler’ til ‘Vis mere’ til ‘Vis mere’ (igen!) får patienten information, vedkommende ikke kan handle på:
En række tal - mon det er et telefon nr. til afdelingen? Hvad mon telefontiden er?
‘Ansvarlig’ (afdeling) samt ‘Dokumentationsansvarlige’ - Afdelingen står højere oppe også.
Tilgængeligheds-udfordring
Formålet er at give mere information - spørgsmålet er, om denne information er til gavn for brugeren. Mere unødig information kan virke overvældende for brugere med kognitive udfordringer.
Mangeartede interaktive knapper
Der er virkelig mange typer af knapper, bare på siden ‘Aftaler’:
Menu-knap
Profil ikon/menu-knap
Toggle mellem liste- og kalendervisning
Knap der åbner en modal
Knap der leder til ny side
Knap der åbner en modal
‘Vis mere’ link-design åbner modal
Igennem app’en findes der endnu flere forskellige designs.
Tilgængeligheds-udfordring
Manglende konsekvent UI design kan skabe forvirring. Især når det samme design både kan lede til en ny side og åbne en modal. Dette kan virke overvældende for brugere med kognitive udfordringer.
Mange knapper i samme område
Under ‘Vis mere’ er der 7 knapper placeret tæt sammen på et lille område.
Tilgængeligheds-udfordring
Da knapperne er små og placeret tæt sammen, kan det være en udfordring for brugere med begrænsede fingerfærdigheder at ramme det de vil.
Derudover er dette også en udfordring for brugere med kognitive udfordringer at holde fokus på hvad de skal med app’en.
Manglende navn på aktiv profil
I app’en kan man have adgang til flere brugere. Designet forklarer dog ikke hvilken profil, der er aktiv.
Tilgængeligheds-udfordring
Det kan være en udfordring for brugere med kognitive udfordringer, at huske hvilken profil, der er aktiv.
Forvirrende UX Writing
Nogle af ordene er ikke sigende for funktionen, og man må som bruger teste sig frem til at forstå funktionen.
Eksempel A
‘Kommende aftaler - Tilpas visning’: Funktion til at skifte mellem gamle og kommende aftaler
Eksempel B
‘Kommunikation’: Læs brev fra Regionen, men man kan ikke besvare - det er derfor kun en énvejs-kommunikation fra regionens side.
Tilgængeligheds-udfordring
Det kan være en udfordring for brugere med kognitive udfordringer, at huske hvilken profil, der er aktiv.
Anti-pattern
Der er steder i app’en, hvor grafik og forventninger ikke passer sammen.
Grafikken til ‘Tilpas visninger’ vil mange forvente en liste rulle ned ved tryk, men i stedet får man en modal med en blok af tekst.
Tilgængeligheds-udfordring
Det kan være forvirrende for brugere med kognitive udfordringer, at interaktionen ikke er som brugeren forventer.
Lave farvekontraster
For at nå WCAG 2.2 level AA skal grafik og tekst/baggrund have en farvekontrast på:
Normal tekst - 4,5:1
Stor tekst - 3:1
Grafik - 3:1
Eksempel A
Grå tekst på lyserød baggrund (normal tekst): 3,33:1
Eksempel B
Grå knap med hvid tekst: 2,81:1
Tilgængeligheds-udfordring
For brugere med synsudfordringer kan det være svært at læse, når farvekontrasten ikke er høj nok.
Kompliceret brugerrejse
Brugerrejsen for visse funktioner har mange trin.
Tilgængelighedsudfordring:
- Brugerrejsen og informations-arkitekturen virker kompliceret, hvilket kan gøre det svært for brugere med kognitive udfordringer.
Definering
Hvad skal der designes i studiet?
Som en del af problemafgrænsningen, så vil jeg gerne arbejde med:
at øge læsbarheden
forkorte trin i 'user journeys'
begrænse skjulte funktioner såsom ikoner, skjult hover effekter, alment accepteret gestures
at alting er beskrevet med ord, og trykbare links og features er knapper.
at designe med højere farve kontraster
at designe til større tekststørrelser
at designe store knapper for folk med motoriske udfordringer.
at sørge for kortere scroll områder for folk med motoriske udfordringer
Brugerrejse
Mapping af eksisterende brugerrejse
For at få en bedre forståelse af app’ens struktur, har jeg mappet den del, hvor brugeren ser deres aftaler og finder informationen om aftalen.
Ny brugerrejse
I den nye brugerrejse og informationsarkitektur har jeg delt informationen op i primær og sekundær information. Under oversigten ser brugeren kun den primære og i den sekundære ser brugeren det hele, men emne opdelt. Funktioner under den sekundære del, skal emne inddeles med den rette information.
1, 2, 3 - Go!
I den samme brugerrejse, er der blevet prioriteret, at den sekundære information og funktioner kan findes med maks 3 trin.
Koncept-udvikling
Indledende håndskitser
Konceptudviklingen startede med en langt række håndskitser sideløbende med hurtige figma skitser. Blyant og papir giver mig oftest en hurtig start på konceptudviklingen.
Hvad skal bevares fra den eksisterende app?
Ved at holde den nye brugerejse op mod den eksisterende app, kan der tages valg omkring hvilke funktioner og informationer, der skal med videre.
Lo-Fi wire frames
Accesibility first
Dette projekt er tænkt med en ‘accesibility first’ koncept. Særligt i dette projekt betyder det:
at der er blevet designet efter den største tekst størrelse i iOS’s ‘Dynamic Type Size’ feature.
at en side er liniær bygget op.
at knapper er store og kan bruges både af venstre- og højrehåndet brugere.
at tekster på især funktioner er tydeligere beskrevet.
Informations arkitektur
Hele informations strukturen er tilpasset den nye brugerrejses principper.
Design-udvikling
UI design koncepter
Eksisterende farver
I studiet har jeg kortlagt eksisterende farver og udvalgt 5, for at mindske grafisk støj.
Flat design vs Neu-brutalism
Nutidens designtrends læner sig op ad ‘flat design’, men er det mon den rette stil til en sundhedsapp? Fx. for ældre borgere og andre brugere som ikke er glade for teknik, kan det være svært at se hvad der er links og knapper.
I dette studie kigger jeg derfor lidt tilbage i tiden, og på andre design trends som Neu-brutalisme. Neu-brutalisme stilen benytter sig mere af skygger, for at tydeliggøre hvilke elementer der er knapper.
Gå linen ud med neu-brutalisme og et skridt tilbage
I en designtest undersøgte jeg hvordan UI’et ville se ud, hvis man arbejdede helt stringent med principperne fra neu-brutalisme. Jeg ønskede at alle knapper tydeligt var knapper med hvid baggrund, rød tekst og en sort skygge. Dog blev især menu-baren i bunden meget grafisk tung og opleves rodet.
Jeg søgte derfor en lidt mildere og venligere neu-brutalistisk stil og menubaren fik et mere fladt design.
Reducering af kognitiv belastning
‘Aftale’ siden
Som en del af optimering af tilgængelighed, så har jeg givet et bud på, hvordan en reducering af interaktion og information giver et hurtigere overblik over kommende aftaler, da denne er reduceret til en mere kompakt listeform. Som en ekstra ting har jeg tilføjet ugedag også, for at give brugeren mulighed for knytte aftalen til en ugedag og revurdere om vedkommende har tid til aftalen.
‘Vis mere’ siden
Den eksisterende app, har en gruppering af mange knapper nederst. ‘Vis mere’ knappen, viser egentlig ikke meget mere og jeg stiller spørgsmåltegn ved nytteværdien af den sekundære 'vis mere' knap på en 'Vis mere' side.
Mit design forslag er væsentlig længere, men med en synlig tydelig scrollbar, som kan benyttes i stedet for scroll.
Derudover har jeg grupperet og tematiseret informationen mere og knyttet funktionerne til grupperingerne.
Endeligt Design
Herunder har jeg samlet de tre skærmbilleder med hver 3 forskellige ‘dynamic type’ størrelser.
Min dag
Aftaler
Vis mere
Evaluering
Opsummering
Gennem undersøgelser af de anderledes behov sårbare borgere kan have, har jeg designet en sundshedsapp, der i højere grad kan aflæses nemmere. Knapperne er større, informationen er grupperet og reduceret visse steder for at skabe bedre overblik.
Især ved at designe efter den største skriftstørrelse, har formet UI designet anderledes end den nutidige designtrends.
Udfordringer under design fasen
Det har været en udfordring at arbejde med 3 tekststørrelser på en gang, men det har vist sig at være muligt og give merværdi, især til den ældre brugegruppe. Man kan stlile spørgsmål tegn ved den anderledes design-stil, men jeg føler vi er nød til at spørge os selv, om ‘flat’ design giver mening i alle sammenhænge og om knapper kan blive for små.
Til slut har farverne også været en udfordring, og de lidt stærke kontraster, kan virke hårde og få et rodet udtryk. Det har krævet mange forsøg at finde et behagligt og roligt udtryk.
Opsummering af udfordringer:
at arbejde med 3 tekststørrelser på en gang.
at arbejde med en grafisk stil, der går imod design tendensen.
at arbejde mere større knap-elementer.
at arbejde med eksisterende farver og store kontraster.
Hvad har jeg lært?
At det bestemt ikke er en hindring at indtænke dynamiske tekststørrelser, højere kontraster og tydelige knapper. Det har derimod givet plads til nytænkning, og stiller spørgsmålstegn ved designtrends.
Det har været en god øvelse i at tænke på mange typer brugere, der ikke ligner mig selv og stillet større krav til struktur og formål med given information.
Til slut har det været lærerigt, designe aktivt for at mindske den kognitive belastning, og tænke over i hvilke situationer en given information er meningsfuld.
Opsummering af læringspunkter:
at arbejde med dynamiske tekststørrelser, højere konstraster og med tydelige knapper.
arbejde med tydelig struktur og formål.
at mindske den kognitive belastning.
Hvad kan gøres bedre?
Som så mange andre native apps, ville det give mening at lave en ‘dark mode’. For nogen brugere kan ‘dark mode’ mindske stress i øjnene. Dernæst kan en yderligere bearbejdning af UI designet give en bedre sammenhæng med Region Midtjyllands øvrige grafiske identitet.
I dette studie har der også været et overvejende fokus på visuelt design, hvorimod der mangler fokus på om designet er funktionelt nok for blinde og svagtseende.
Opsummering af forbedringer:
Designe en ‘dark mode’.
Forbedre sammenhæng med Region Midtjyllands grafiske identitet.
Bearbejdninger i konceptet i forhold til blinde og svagtseende.
De næste skridt
De næste skridt bør være en bearbejdning af animationer, interaction og brugerfeedback i en interaktiv prototype. Det vil give brugeren en bedre oplevelse af, at når de trykker på en knap, så er der trykket og man kommer ikke til at trykke igen eller forkert.
Med den interaktive prototype, vil det være naturligt at teste med forskellige bruger med forskelligartet udfordringer. Det vil også gavne at teste igennem om informationen er grupperet fornuftigt og om der er for lidt information nu.
Opsummering af de næste skridt:
Interaktive protyper med animationer og lign.
test med flere typer brugere i forhold til navigering i app’en.
en test med brugere i forhold til informationsarkitekturen.
Tak fordi I så med, jeg håber det har givet jer nye indsigter :)
Skal vi tage en uforpligtende snak?
info@xxw.dk
(+45) 42425074