Feature: Toolbar
De toolbar is een onderdeel van 8.0 Brain Map Viewer. Deze toolbar bevat functionaliteiten die gaan over het visueel manipuleren van de MRI-scan.
Uitdaging voor mij als ontwerper
Het structureren van de informatie was een grote uitdaging tijdens het ontwikkelen van de oplossing. Naar mate de tijd vorderde en het project meer vorm begon te krijgen kwamen er steeds meer functionaliteiten bij. Waar ik deze moest plaatsen in de interface was een grote uitdaging.
Er kwamen steeds meer functionaliteiten bij: waardoor het te onoverzichtelijk was om dit in het midden bij de MRI-scan zelf te zetten.
Er is weinig plek in het scherm: alle functionaliteiten die er op dit moment in zitten zijn noodzakelijk. Om de functionaliteiten toch logisch te structureren en de plaatsen op een plek die handig was voor de gebruiker.
Om deze bak aan functionaliteiten in één scherm te krijgen heb ik verschillende keren geïtereerd en heb ik gekeken naar bestaande good, best and bad practises van Photoshop. Ook heb ik naar aanleiding van de expert review besloten dat alle functionaliteiten los in het midden van het scherm te plaatsen veel ruimte in beslag neemt en rommelig overkomt.
Relevante links
Kades en keuzes
Er zijn nu zoveel functionaliteiten die in het midden van het scherm zouden moeten waardoor er nu geen plek meer is.
De hoeveelheid aan functionaliteiten in het midden zorgde ervoor dat het er rommelig uit kwam te zien. Tijdens de usability test met Raymond gaf hij ook aan dat de buttons groot leken en veel ruimte in beslag namen. Met het verwijderen van de prefilter kwamen hier ook twee functionaliteiten uit die gingen over het bewerken en wijzigen van de MRI-scan. Deze twee hoorden dus ook bij het midden van het scherm. Om deze reden ben ik opzoek gegaan naar een mogelijkheid om deze informatie in een toolbar te zetten over het gehele scherm zodat deze functionaliteiten de ruimte krijgen.
De toolbar maakt het mogelijk om te switchen tussen scan type en sessie type.
Uit de co-creatie sessie bleek dat het mogelijk moest zijn om de view van de scan aan te passen en een andere scan binnen je dossier te openen. Zonder de toolbar vond ik het lastig om een logische plek uit te zoeken voor deze twee functionaliteiten. Door een overkoepelende toolbar te maken over de gehele lengte van het scherm hoop ik een herkenbaar patroon te gebruiken om bestanden te openen/switchen.
Onderzoek naar locatie van de toolbar.
In een nieuwe iteraties heb ik de locatie van de toolbar getest. Ik heb een variatie gemaakt aan de rechter kant van het scherm. Deze heb ik voorgelegd aan Jan-Jaap tijdens een coachingsessie en ik ben erachter gekomen dat de toolbar aan de rechter kant van het scherm toch verwarrend kan zijn. Het komt over alsof het bij de visualisaties hoort. Met deze inzichten ben ik opzoek gegaan naar design patterns die vergelijkbaar zijn met mijn concept.
Design keuzes
Locatie toolbar
Naar aanleiding van mijn onderzoek naar vergelijkbare tools, zoals Photoshop, Word en Sketch, heb ik ervoor gekozen om de toolbar bovenaan te zetten. Het openen, opslaan en manipuleren van bestanden gaat vaak via een toolbar bovenaan het scherm. De meest voorkomende use cases van een toolbar zijn:
Openen van bestanden
Opslaan van bestanden
Wijzigen van de view
Object wijzigen
Aangezien mijn functionaliteiten voor een groot deel overeenkomen met bestaande patterns van vergelijkbare tools heb ik ervoor gekozen om deze locatie over te nemen.
Ordening van de functionaliteiten
Door middel van een divider heb ik de data gestructureerd in 5 verschillende gedeeltes:
File: alles over het opslaan, openen van bestanden en aanmaken van presets.
Switchen tussen presets: shortcuts om gemakkelijk.
Adjust coördinates: het wijzigen van de coördinaten van de cursor op het scherm.
Manipuleren van de scan: switchen tussen scan binnen het dossier, toggle masking.
Brain default: switch om de achtergrond te verwijderen.
Verder heb ik ervoor gekozen om de functionaliteiten uit te schrijven. Het is lastig om een duidelijk icoon uit te kiezen voor de functionaliteit. Om deze reden heb ik alles uitgeschreven. Hierdoor ben ik wel meer ruimte kwijt maar weer de gebruiker wel wat hij/zij aan het doen is. Het wijzigen van de coördinaten heb ik wel door middel van een icoon gedaan omdat ik hier wel een duidelijk icoon voor kon vinden.
File dropdown
Ik heb lang gepuzzeld met de locatie van de filter preset. Ik heb ervoor gekozen om uiteindelijk het aanmaken van een filter preset binnen het bestand dropdown menu te zetten. Omdat het aanmaken van een nieuwe preset geen key-functionaliteit is en niet dagelijks gebruiken zal worden heb ik dit onder file gezet. Echter heb ik de aangemaakte presets wel in de toolbar gezet omdat de gebruiker snel wil switchen tussen preset. In eerdere iteraties had ik het aanmaken en openen van een preset onder de filter geplaatst maar daar liep ik tegen het probleem aan dat de locatie niet logisch was of over het hoofd werd gezien.
Ik vond het lastig om te bepalen wat de juiste plek was voor het aanmaken van een preset omdat je zowel de filter als de coördinaten opslaat. Om dit probleem op te lossen heb ik overleg gehad met mijn coach op UX gebied en heb ik weer naar vergelijkbare tools gekeken. Uiteindelijk is het onder het bestand de beste keuze omdat het hoort bij de variabelen die gaan over het bewerken of manipuleren van het bestand.
Dropdown
Ik heb verschillende dropdown menu's in de toolbar gezet. Ik heb hiervoor gekozen omdat een smalle dropdown die over alle content heen komt te liggen het minste ruimte in beslag zou nemen. Als ik ervoor had gekozen om een pop up te openen bij bijvoorbeeld het wijzigen van het toggle mask dan zal dit weer veel ruimte in beslag nemen en ziet niet wat het effect is van zij/hij aanpassing. Door een zo klein mogelijk dropdown is alle content zichtbaar en blijven de MRI-scans zichtbaar en heeft de gebruiker dus overzicht in wat er aangepast wordt.
Adjust coördinates
Ik heb ervoor gekozen om adjust coördinates als enige niet volledig uit te schrijven om twee redenen:
Het is een lang woord en zou heel veel ruimte in beslag nemen.
Er zijn goed begrijpbare iconen voor te vinden die veel mensen zullen herkennen.
Last updated
Was this helpful?