ORflow in control.
C-touch applicatie: functionaliteit ontwikkeling – 2020
ORflow is het centrale overzichts- en bedieningssysteem voor in de operatiekamer dat zorg specialisten voorziet van juiste informatie in elke fase van het operatieproces.
In deze opdracht ontwerp ik de koppeling van ORflow aan het EPD dat de Sint Maartenskliniek gebruikt om alles vast te leggen wat tijdens de operatie (en daarbuiten) gebeurt met de patient.
01 Mijn rol
Bij het totstandkomen van de koppeling heb ik als interaction designer een cruciale rol gespeeld bij de ontwikkeling van de koppeling tussen ORflow en HiX.
Vanuit de opdrachtformulering ben ik vanuit mijn rol gaat praten met verschillende stakeholders. In het begin vooral met mijn team en de opdrachtgever maar ook met de eindgebruiker. Verder heb ik Orflow leren kennen door het grondig te analyseren aan de hand van de 10 usability heuristieken van Jacob Nielsen. Dit is een krachtige methode om alle verschillende aspecten van een interactief product te doorgronden.
Tijdens mijn stageperiode heb ik de nieuwe functionaliteit van ORflow in control van A tot Z ontworpen in samenwerking met mijn collega interaction designer tevens product-owner Jens. Hierbij heb ik geschetst, gespard met collega’s, ontwerpen gemaakt in Sketch, weer geschetst, nog wat gespard met de opdrachtgever, geïtereerd, eindgebruikers gesproken, nog meer geïtereerd. Uiteindelijk heb ik een getest prototype opgeleverd en is mijn ontwerp geïmplementeerd in de software die nu draait, yeah!
02 Why tho?
Ik ben blij dat je het vraagt. Een volledige case study wijden aan een product dat niet eens useful is klinkt niet erg productief.
Een koppeling tussen ORflow en het EPD heeft een aantal waardevolle voordelen ten opzichte van een losse, read only applicatie. Hierin ligt ook het doel van de opdracht en de criteria waar het aan moet voldoen.
De reden dat hier een interaction designer aan te pas moet komen is dat dit een grote update is in een product dat al propvol belangrijke functionaliteiten zit. Deze nieuwe feature moet niet afleidend zijn en door de eindgebruiker doordat de eindgebruiker bezig is met een cruciale baan waar letterlijk levens op het spel staan.
Hiernaast vindt je de belangrijkste motivaties vanuit het ziekenhuis om dit te implementeren.
De oude fasebalk vormt de basis voor de nieuwe versie
Hierin is te zien dat een operatie uit verschillende fases bestaat. Elke fase heeft zijn eigen stappen die doorlopen moeten worden.
03 Design criteria
- ORflow schrijft data zoals timestamps en ingevulde checklijsten automatisch weg in het HiX die nu nog handmatig moeten worden ingevoerd.
- Orflow ondersteunt de gebruiker in het operatieproces, er moet geen verwarring en onnodige frictie ontstaan waardoor de gebruiker vast kan lopen of wordt geremd in zijn werkzaamheden. Als dit het geval is gaat men het niet gebruiken omdat het het proces meer remt dan helpt.
- Binnen ORflow moet er een ‘way back’ zijn wanneer een timestamp per ongeluk is geplaatst door de timestamp te verwijderen en opnieuw te kunnen plaatsen
- Er moet feedback zijn dat een timestamp daadwerkelijk is geplaatst zodat hierover geen twijfel kan bestaan wat later alsnog in het EPD gecontroleerd moet worden.
Voordat ik ga schetsen en bedenken hoe de opdracht kan worden uitgevoerd zet ik eerst op een rijtje wat de ontwerpcriteria zijn. Het doel hiervan is om scherp te hebben waar de oplossing aan moet voldoen en daarop terug te kunnen vallen om het overzicht te bewaren.
Het helpt mij als ontwerper om methodisch te werk te gaan en het ontwerp later beter te kunnen presenteren aan de hand van deze punten. De design criteria zijn bij de briefing van de opdracht scherp geworden en hieronder beschreven.
Keuzemomenten door schetsen
De conclusie die uit het schetsen is dat de timestamps in de fasebalk moeten komen.
De reden hiervoor is dat het (tijds)verloop van de operatie in de huidige situatie daar al wordt weergegeven. De gebruiker zal daarom de timestamps ook beter kunnen koppelen aan de fasebalk en dus weten dat ze bij elkaar horen. Dit heeft te maken van het Gestaltprincipe “common region” waarin elementen die dicht bij elkaar staan als een groep worden gezien (7 Gestalt Principles of Visual Perception: Cognitive Psychology for UX | UserTesting Blog, 2019). De locatie van de timestamps komen op de plek te staan waar de timestamp bij hoort. De timestamp “Start inleiding” komt dus te staan ter hoogte van de fase “Inleiding” en de timestamp “Start incisie” hoort bij de “Operatie” fase dus komt daarbij te staan.
Om het doel te bereiken dat de gebruiker niet wordt belet zijn werk goed te doen door afleidende interface elementen probeer ik de tekst zo compact mogelijk te maken. Hierdoor heb ik ervoor gekozen om alleen de tijd weer te geven en hierbij de titel van de timestamp weg te laten. De positie van de timestamp geeft dan weer waar de timestamp bij hoort. De timestamps blijven hierdoor compact en zijn minder overheersend.
De start en stop incisie knoppen zijn gepositioneerd op dezelfde plek als waar de timestamps verschijnen om te zorgen dat alle belangrijke fases en momenten in de fasebalk blijven.
De start en stop incisie knoppen hebben een ander uiterlijk dan de timestamps omdat het triggers zijn die op het moment van de incisie en het sluiten van de wond ingedrukt moeten worden door de gebruikers. Dit afwijkende uiterlijk is een signifier voor de gebruiker dat er een andere interactie nodig is, namelijk het drukken op de knop. Door de knoppen zo te plaatsen blijven ze in de flow van de timestamps en is ook duidelijk voor de gebruiker dat het bij de timestamps hoort. Tijdens de gebruikerssessie is naar voren gekomen dat de stop incisie knop moet kunnen worden ingedrukt in meerdere fases, hierdoor kunnen ze niet in de content van een fase geplaatst worden.
05 Ontwerp
Mijn doel is om te onderzoeken hoe de interactie van het verwijderen van de timestamp het best kan worden weergegeven. De reden hiervoor is dat de operatie een protocol volgt waarin aan een volgende acties elkaar opvolgen. De verwijder-interactie zorgt voor een way back voor de gebruiker bij een timestamp die te vroeg is gezet. Hierop heb ik systematisch het ontwerp steeds verder ontwikkeld door eerst meerdere low-fidelity iteraties door te voeren, vervolgens mid-fidelity en als laatste een high-fidelity prototype op te leveren. Elk prototype is gepresenteerd aan de eindgebruiker welke daar vervolgens feedback op kon geven. Daarnaast hebben de gebruikers het prototype ook zelf gekregen om later nog te kunnen testen.
De conclusie die uit de iteraties kwam is dat de timestamps niet afleidend moeten zijn. Het is geen core-feature en mag dus niet opvallender zijn dan features die essentieel zijn voor het verloop van de operatie. Bij een happy flow zal de gebruiker hier niet naar kijken en is enkel feedback van belang, maar bij een fout moet men echter snel weten waar en hoe dit te herstellen is. Om niet teveel af te leiden is alleen de laatste gezette timestamp zichtbaar. Wel is het door middel van progressive disclosure mogelijk om een overzicht van alle timestamps te bekijken door op de timestamp in de fasebalk te tikken. De laatst gezette timestamp is de enige die verwijderd kan worden. Als er namelijk een paar stappen terug iets wordt verwijderd kan dit gevolgen hebben voor de andere fases. Daarom is het van belang dat de gebruiker alleen stapsgewijs terug kan. Het definitieve ontwerp van de nieuwe fasebalk is weergegeven in de afbeelding: Definitief timestamp ontwerp.
06 Low fidelity
Om tot het eindontwerp te komen heb ik veel verschillende iteraties doorlopen om aan de ontwerpcriteria te voldoen. Hieronder staan een aantal low fidelity ontwerpen waar ik mee ben begonnen.
Keuzemomenten low fidelity
In de low fidelity versies was het doel om te bepalen waar de timestamps in de interface verwerkt moesten worden. In de schetsfase is dit al globaal bepaald maar in de echte interface zit minder ruimte dan verwacht. De posities worden weergegeven op basis van fase overgang. De timestamp staat tussen deze fases in in de fasebalk. In afbeelding “Low fidelity prototype iteratie 1” betekent dus dat de timestamp “einde operatie” vertegenwoordigd, en bij “Low fidelity prototype iteratie 2” staat de timestamp voor “einde inleiding”. In low fidelity prototype iteratie 3 heb ik extra ruimte gemaakt tussen de faseknoppen en de tijdbalk. De reden hiervoor is zodat de faseknoppen altijd volledig klikbaar blijven, er geen tekst overlap kan ontstaan, een rustiger beeld ontstaat waarin niet alle elementen bij elkaar gepropt zitten. Daarnaast is de geplande tijdsbalk statisch, deze is altijd 1 kleur (grijs) en vooral de tijdstippen zijn van belang. Hierdoor kon ik deze een stuk smaller maken en hierdoor veel ruimte besparen waardoor de timestamps een volledig eigen plek hebben kunnen krijgen.
Zoals bij de schetsen is alleen de tijd van de timestamp zichtbaar, met daarnaast een meer info knop. Dit houdt rekening met het interactie ontwerp patroon progressive disclosure waarin geavanceerde of zelden gebruikte functies naar een ander scherm verplaatst worden waardoor de applicatie beter te leren kennen wordt (Nielsen, 2006).
De start en stop incisie knoppen heb ik in dit ontwerp een andere kleur gegeven (groen) dan de timestamps (donkergrijs). Het doel hiervan is dat duidelijk wordt gemaakt dat de timestamps informatie weergeven en de knop een actie vereist. De start en stop incisie knop verandert in een timestamp wanneer deze is ingedrukt. Daarnaast horen deze acties bij elkaar, daarom zijn ze aan elkaar gekoppeld. Hierdoor weet de gebruiker dat de actie tweedelig is.
De kleur van de timestamp is van een bijna zwart naar wit gegaan. De reden hiervoor is dat de timestamp te druk werd doordat de vullende kleur veel contrast veroorzaakte. De timestamp heeft een ondersteunende functie en moet aanwezig zijn, maar niet afleiden. De meer info knop is blauw geworden. Dit is hetzelfde blauw als dat al in de software zit, en zorgt voor een signifier dat de knop kan worden ingedrukt voor meer informatie. Ook de achtergrond schaduw zorgt ervoor dat het duidelijker wordt dat de timestamp klikbaar is.
07 Mid fidelity
Om tot het eindontwerp te komen heb ik veel verschillende iteraties doorlopen om aan de ontwerpcriteria te voldoen. Hieronder staan een aantal mid fidelity ontwerpen nav low fidelity en gebruikerssessies.
Keuzemomenten mid fidelity
Doordat er nu een hele rij aan ruimte is vrijgemaakt waarin de timestamps passen heb ik een aantal iteraties gewijd aan het onderzoeken of alle timestamps tegelijk tonen een optie is. Het is hierbij nog steeds de bedoeling dat alleen de laatste timestamp te verwijderen is, waardoor ik verschillende states heb ontworpen, namelijk waarin de timestamp klikbaar is en niet klikbaar is. Dit werd echter snel te druk en rommelig en de oorspronkelijke reden van het tonen van de timestamps, namelijk het kunnen verwijderen, kon niet worden bereikt door de niet-klikbare timestamps. Om deze redenen zijn we teruggegaan naar het tonen van 1 timestamp, namelijk de laatst gezette.
De start en stop incisie hebben een andere vorm gekregen om meer in lijn te zijn met de rondingen van de timestamps. Ze zijn nog wel onderscheidend als knop doordat ze een schaduw hebben en een andere kleur. Het doel hiervan is zodat de gebruiker weet dat dat een call to action is, en geen weergave van een gebeurtenis.
Om ervoor te zorgen dat de timestamps beter gekoppeld kunnen worden aan de fase van de operatie waar ze bij horen heb ik een aantal varianten ontworpen waarin de timestamps de kleur kregen van de bijbehorende fase. Dit werd echter te druk en afleidend waardoor ik weer terugging naar neutrale kleuren.
Om duidelijker te maken dat de timestamp klikbaar is en een signifier te geven dat er een lijst tevoorschijn komt wanneer op de timestamp wordt geklikt heb ik het “i” icoon vervangen door een lijst icoon.
08 Gebruikers input
De eindgebruikers zijn meerdere keren gesproken om feedback te kunnen krijgen van de gemaakte interactie ontwerpen. Deze gebruikers bestaan uit artsen, omloopmedewekers en per sessie zaten er hier ongeveer 5 tot 10 van in de meeting. Het doel hiervan is dat ik wilde weten of we nog op de juiste weg zaten, of het proces op de OK echt zo gebeurd zoals wij het in ORflow bedacht hebben en of we vaktermen en dergelijke goed hebben geïnterpreteerd. Hier hebben we dus ook gericht naar gevraagd. Hierdoor kan ik nog snel bijsturen wanneer blijkt dat iets niet kan of werkt op de manier waarop we het hebben ontworpen. We hebben hierbij gebruik gemaakt van semi-gestructureerde interviews en deze aan de hand van het prototype doorlopen. Elke vraag, onduidelijkheid of feedback heb ik meegenomen om vervolgens daarop weer iteraties door te voeren. Ook heb ik regelmatig om feedback gevraagd en hebben Jens en ik vaak gespard om tot conclusies te komen over onder andere kleuren, copy, vormen en iconen.
Het effect hiervan was dat ik doelgericht aanpassingen heb kunnen doorvoeren en kon bijsturen die direct als feedback waren genoemd in de gebruikerssessies.
09 High fidelity
Om tot het eindontwerp te komen heb ik veel verschillende iteraties doorlopen om aan de ontwerpcriteria te voldoen. Hieronder staan de high fidelity ontwerpen.
Keuzemomenten high fidelity
In de gebruikerssessie gaven de gebruikers aan dat ze de term ‘stop incisie’ niet gebruiken, en dat de timestamp gezet moet worden wanneer de wond dicht is.
Hierop hebben we de term ‘stop incisie’ aangepast naar ‘wond gesloten’ om het tijdstip aan te geven wanneer de wond dicht is. Daarnaast hebben we de acties gekoppeld aan het versturen van de checklijsten in de operatiefase.
De gebruikers kunnen namelijk de checklijst al afvinken en hiermee de sluiting van de wond voorbereiden, maar wanneer ze de wond sluiten wordt de checklijst pas verstuurd Het is namelijk niet relevant wanneer de checklijst is gedaan, als deze maar gedaan wordt. Het is alleen relevant om te weten wanneer de wond echt gesloten is. De gebruiker kan dus ook de checklijst deels afvinken, navigeren naar de sign-out fase en vervolgens terug navigeren naar de operatiefase om de wond te sluiten. Dit is dezelfde interactie als die van het starten van de incisie. Door dit gelijk te trekken houden we de interactie meer in lijn met de rest van de software, waardoor de software gebruiksvriendelijker wordt door de consistentie die hiermee verhoogt wordt. Zie afbeelding: High fidelity start incisie en afbeelding: High fidelity wond gesloten.
De positie van de timestamps is aangepast om duidelijker te maken waar de timestamp bij hoort.
De timestamps wijzen het onderdeel aan waar ze bij horen om deze meer met elkaar te koppelen. De positie van de Start en stop incisie (vanaf nu wond gesloten) is verplaatst naar binnen de operatie fase. Hier moet namelijk eerst een checklijst worden afgevinkt voordat de incisie gestart kan worden of voordat de wond gesloten kan worden. De operatiefase houdt een rood uitroepteken wanneer de wond nog niet is gesloten zodat de gebruiker weet dat daar nog een actie is vereist.
In de timestamp is de tekst toegevoegd met de titel van de timestamp.
De reden hiervoor is dat er meerdere timestamps per fase gezet kunnen worden (start incisie en wond gesloten) en alleen de locatie van de timestamp hierdoor niet meer genoeg is om te kunnen zien waar deze bij hoort. Dit houdt rekening met de usability heuristic #6: “Recognition rather than recall” waarin de cognitieve belasting van de gebruiker wordt geminimaliseerd door objecten zichtbaar te maken en de gebruiker dus minder hoeft na te denken over wat het object betekent.
De timestamps hebben een wat hoekiger uiterlijk gekregen. Hierdoor kon de aanwijzer (het puntje) in de vormgeving worden meegenomen. Het doel hiervan is om duidelijker te maken dat de timestamp bij die fasewisseling of fase hoort. Verder is er een verwijder knop bijgekomen om een shortcut te hebben naar het verwijderen van de timestamp. Dit houdt rekening met de usability heuristic #7: “Flexibility and efficiency of use” waarin interacties versneld kunnen worden uitgevoerd door expert gebruikers. Hierdoor wordt het dialoog met het overzicht van de timestamps overgeslagen en gaat de gebruiker direct door naar het dialoog waarin gevraagd wordt of de gebruiker de timestamp wilt verwijderen.
Het klok icoontje zorgt ervoor dat nog duidelijker wordt dat het label om een tijdsweergave gaat. Daarnaast houdt het rekening met de consistentie van de software, andere knoppen en labels hebben ook iconen die de betekenis ondersteunen. Hierdoor wordt ook verduidelijkt dat de timestamp niet alleen een tekstlabel is maar er ook op geklikt kan worden.
Het prullenbak icoontje is een losse knop om het overzicht van alle timestamps over te slaan en deze direct te kunnen verwijderen. Deze heeft een vullende achtergrond gekregen (meer contrast) om duidelijk te maken dat deze een andere actie uitvoert dan de timestamp zelf, en dus ook los aan te klikken is. Doordat de timestamp nog wel aan de verwijder knop vast zit is duidelijk dat ze bij elkaar horen en elkaar beïnvloeden.
De laatste slag die ik heb geslagen voordat het ontwerp genoeg gevorderd was om aan de ontwikkelaars te geven. Er is een high fidelity prototype beschikbaar. Deze is echter niet openbaar. Maak een afspraak om deze in te kunnen zien.