Feature: Visualisaties

Het visualisation panel geeft inzicht in de berekende data over radiologische variabelen. Met behulp van deze visualisaties kan er een voorspelling gedaan worden over bijvoorbeeld de tumor groeisnelheid om op basis hiervan te bepalen waneer, en welke patiënt eerst geopereerd moet worden.

Bij default staan beide panels opengeklapt omdat de gebruiker gelijk kan zien wat het effect is van de ingestelde filters op de visualisaties.

Uitdaging voor mij als ontwerper

Het begrijpen van de data was een ingewikkeld proces. Het maakte het ingewikkeld voor mij als ontwerper om een geschikte visualisatie te maken om twee redenen:

  1. Gebrek aan medische kennis: aangezien ik geen medische kennis heb op dit gebied, of ooit met een vergelijkbare use case in aanraking ben gekomen is het lastig om dit te visualiseren.

  2. Standaard UX patronen komen te vervallen: ik kan wel een inschatting maken of iets gebruiksvriendelijk is, maar dit in deze context wijkt dat soms af van de standaarden.

Om deze twee oplossingen uit de weg te ruimen heb ik veel overleg gehad met de opdrachtgever. Door veel samen te overleggen en te inspireren met voorbeelden en schetsen zijn we samen tot een concept gekomen en hebben we verschillende keren samen ge-itereerd.

Usability test

Co-creatie sessie

Co-reflectie sessie

Kades en keuzes

Patiënt visualisatie moet 1 vast punt hebben waar de patiënt zich nu bevindt op de lijn met een lijn met onzekerheid.

Aangezien de prefilter verwijderd wordt veranderen de namen van de visualisaties naar : total population, filter en patient. Verder is het op dit moment nog lastig om een patiënt lijn uit te tekenen en is dit eigenlijk een combinatie van de populatie + filter. Philip zou dus 1 vast punt willen waar de huidige patiënt zich nu bevindt in de grafiek. Verder gaf Roelant aan wel graag nog de lijn met onzekerheid zien. Uiteindelijk maak ik een combinatie van beide.

Visualisaties moeten uitgebreid worden naar 6 visualisaties in totaal.

Van elke grafiek zijn eigenlijk twee versies. Survival time heeft een probability en een hazard function, hetzelfde geldt voor progDate. Voor Tumor volume moet een verdeling komen tussen tumor volume in ml en groeisnelheid in mm. Eerst hebben we het er nog over gehad om een switch te maken tussen die twee versies. Uiteindelijk zijn we tot de conclusie gekomen, om ze allemaal onder elkaar te zetten en de mogelijkheid geven om dit in- en uit te klappen zoals de detailed filter nu ook werkt. Ik heb ervoor gekozen om dit op dezelfde manier om consistentie te behouden in mijn ontwerp en het niet nog ingewikkelder te maken.

Design keuzes

Locatie visualisatie panel

Ik heb ervoor gekozen om de visualisaties aan de rechterkant van het scherm te tonen. Logischerwijze vul je eerst de filtercriteria in, daarna bekijk je het resultaat in de visualisatie van de MRI-scan die inzicht geeft in de behandelbaarheid en als laatste de visualisaties van de berekenende data die is gedaan op basis van de gehele populatie en de van de filter.

Ordening van de checkboxes

Elke visualisatie heeft 3 lijnen die met elkaar vergeleken worden. De lijnen kunnen aan en uit gezet worden door middel van checkboxes. Ik heb hiervoor gekozen om de gebruiker de optie te geven om op deze manier lijnen overzichtelijker met elkaar te kunnen vergelijken. In verschillende use cases zijn verschillende lijnen wenselijk. De lijnen die dan overbodig zijn kunnen uitgeklikt worden. In overleg met de opdrachtgever hebben we ervoor gekozen om de patiënt lijn vooraan te zetten en deze lijn standaard te tonen in de grafiek. Daarnaast komt de detailed filter lijn die staat voor de gefilterde populatie, ook deze lijn wordt standaard getoond omdat je altijd wil zien wat het effect van de ingevulde filter is op de berekenende variabelen. De laatste checkbox is de totale populatie die vergeleken kan worden op basis van de geüploade scan. Deze staat niet standaard aan omdat deze lijn het algemeenste is en dus het minst nauwkeurig is omdat hier alle scans in mee worden genomen.

Verdeling van de assen

In de co-creatie sessie met Roelant heb ik gevraagd of ik alvast inzicht mocht hebben in een aantal van deze visualisaties omdat ik deze nog niet had gekregen. Ik heb twee visualisaties gekregen: een hazard-curve en een probability-curve. Beide grafieken worden op de x-as de tijd in dagen getoond, deze as-verdeling heb ik ook overgenomen in mijn ontwerp omdat dit het prettigste werkt voor de gebruiker. Verder is de y-as van de hazard-curve nauwkeuriger dan de survival probability dus heeft de hazard-curve 3 decimalen achter de komma en de probability-curve maar 2.

Afb 1. Grafieken survival- & hazard grafiek.