Gebruikersgerichte prototype-ontwerp beeldbeschrijvingssoftware voor Dedicon

Geschreven door Dennis Ulijn in juni 2024

Bij het ontwerp van de beeldbeschrijvingssoftware voor Dedicon heb ik een strategische projectaanpak gekozen, waarbij de nadruk lag op gebruiksvriendelijkheid en toegankelijkheid voor mensen met leesbeperkingen. Tijdens dit project heb ik in opeenvolgende verdiepende fasen een interface ontwikkeld die zowel intuïtief als toegankelijk is.

Projectaanpak

Ik heb het project uitgevoerd volgens het Enterprise Design Thinking- en Agile/Scrum-framework, waarmee ik de voortgang constant heb bewaakt en het ontwerp heb geoptimaliseerd op basis van voortdurende feedback. Mijn aanpak bestond uit verschillende fasen: van het opstellen van de requirements en het ontwikkelen van task flows, naar het creëren van low-fidelity prototypes en het testen van een high-fidelity prototype. Om mijn voortgang te volgen, heb ik gebruik gemaakt van de Stacey-matrix en een GANTT-planning.

GANTT-diagram met planning om mijn voortgang en aanpak in de gaten te houden. Dit helpt me hovast te hebben tijdens het project en bij te sturen als dat nodig is.
GANTT-diagram met planning om mijn voortgang en aanpak in de gaten te houden. Dit helpt me hovast te hebben tijdens het project en bij te sturen als dat nodig is.

Requirements opstellen

Ik begon met het definiëren van de opdracht en het verzamelen van vereisten via verschillende methoden, zoals 'Fly on the Wall' en expert interviews. Dit gaf mij waardevolle inzichten in de gebruikersbehoeften. Ik gebruikte Empathy maps en Mindmapping (WWWWWH) om de kernbehoeften van de doelgroep helder te krijgen. Vervolgens heb ik affinity mapping uitgevoerd om de gebruikersbehoeften om te zetten in user need statements, die ik heb gebruikt voor het ontwikkelen van de task flows. Deze task flows heb ik gevalideerd met gebruikers om te zorgen voor een praktische en efficiënte interactieflow.

Ik heb Tekst & Beeld-medewerkers geobserveerd aan hun bureau. Voor Contextual Inquiry bij Audioproductie moest ik qua aanpak wat afwijken: ik zat tegenover de opnamestudio, kon daarmee hun voorleeswerk horen en hun monitor mee inzien. Via microfoons kon ik inbreken in hun studio en vragen stellen.
Ik heb Tekst & Beeld-medewerkers geobserveerd aan hun bureau. Voor Contextual Inquiry bij Audioproductie moest ik qua aanpak wat afwijken: ik zat tegenover de opnamestudio, kon daarmee hun voorleeswerk horen en hun monitor mee inzien. Via microfoons kon ik inbreken in hun studio en vragen stellen.

Task Flow

Op basis van de requirements heb ik gedetailleerde task flows gecreëerd. Deze beschrijven de stappen die een gebruiker doorloopt om beeldbeschrijvingen toe te voegen, en zorgen voor een duidelijke, logische structuur in het gebruik van de software. De task flows zijn gevalideerd met gebruikers om er zeker van te zijn dat ze intuïtief en efficiënt zijn.

Taskflow overzicht: een met de stakeholders gevalideerde, schematische weergave van de stappen die een gebruiker doorloopt om beeldbeschrijvingen toe te voegen.
Taskflow overzicht: een met de stakeholders gevalideerde, schematische weergave van de stappen die een gebruiker doorloopt om beeldbeschrijvingen toe te voegen.

Low-Fidelity Papieren Prototype

De task flow vertaalde met gebruik van de Crazy 8's-techniek voor het genereren van schetsen die ik omzette naar een low-fidelity papieren prototype, dat ik testte met gebruikers. Dit vroege prototype bood inzicht in de functionaliteit en lay-out van de interface, door het te valideren met gebruikers om te zorgen voor de juiste richting voor het digitale ontwerp.

Low-fidelity papieren prototype - schematische weergave van de interface voor vroege feedback.
Low-fidelity papieren prototype - schematische weergave van de interface voor vroege feedback.

Mid-Fidelity Wireframes

Na de low-fidelity prototypefase heb ik de interacties getest met een mid-fidelity wireframe prototype. Dit klikbare prototype stelde gebruikers in staat om door de interface te navigeren en de interactie te testen. Op basis van de resultaten van deze usability testing heb ik het ontwerp verder geoptimaliseerd, waarbij ik het prototype verfijnde voordat ik doorging naar de high-fidelity fase.

Midfidelity-interactiviteit - interacties in schermen verwijzen veel naar nieuwe elementen, en niet naar nieuwe schermweergaven.
Midfidelity-interactiviteit - interacties in schermen verwijzen veel naar nieuwe elementen, en niet naar nieuwe schermweergaven.

High Fidelity: Het Visuele Prototype

De feedback uit de usability testing werd verwerkt in het high-fidelity prototype. In deze fase ben ik verder gegaan met het opstellen van een gedetailleerde informatie-hiërarchie en heb ik een heuristische analyse uitgevoerd om ervoor te zorgen dat het ontwerp gebruiksvriendelijk is. Dit alles werd uitgevoerd binnen de strikte richtlijnen voor toegankelijkheid van Dedicon.

High Fidelity-elementen: gebaseerd op Dedicon-huisstijl en toegankelijkheidseisen. Typografie van de website met tekstgroottes voorgesteld in de snelstartgidsen. Kleuren die gebruikt worden, en een onderzoek naar de contrastratio's om toegankelijk kleuren toe te passen.
High Fidelity-elementen: gebaseerd op Dedicon-huisstijl en toegankelijkheidseisen. Typografie van de website met tekstgroottes voorgesteld in de snelstartgidsen. Kleuren die gebruikt worden, en een onderzoek naar de contrastratio's om toegankelijk kleuren toe te passen.

Pitch en Eindresultaat

Na het afronden van het high-fidelity prototype heb ik mijn werk gepresenteerd aan Dedicon, waarbij ik het volledige proces van onderzoek en prototyping toelichtte. Het resultaat is een werkend prototype van een web-app dat voldoet aan de gestelde eisen. Dit prototype is nu beschikbaar voor Dedicon om te testen en verder te implementeren.

Bekijk het werkende prototype van Project Monet:

Aanverwante Artikelen