Gebruikerservaring en interfaceontwerp voor technische software

Ontwerp voor professionele simulatiesoftware

Professionele gebruikers

UX-ontwerp

UI-ontwerp

KLANTGexcon
LOCATIELondon, UK
TEAMUX-ontwerper, UI-ontwerper, interactie-ontwerper, projectmanager, producteigenaar, onderzoeker
WEBSOTE

De software wordt erkend als de krachtigste computational fluid dynamics-software dankzij de simulatiemogelijkheden. Dit is geen verrassing als je bedenkt dat het in de jaren 90 is ontwikkeld door het Chr. Michelsen Institute for Science.

Hier is echter het probleem: de oorspronkelijke gebruikers zijn nu met pensioen en hun nieuwere tegenhangers geven de voorkeur aan minder capabele software-alternatieven vanwege het eenvoudigere leerproces.

Dit probleem leidde hen naar ons UX-ontwerpbureau. We kregen de taak om de hele gebruikerservaring te herzien en zo de software nog 25 jaar op de plank te krijgen.

ONZE BIJDRAGEN

Eisen in kaart brengen

Gebruikersonderzoek

Benchmarking

UX-ontwerp

Prototyping

UI Design - licht en donker

Ontwerp systeem

Kwaliteitsborging

DE VICIEUZE CIRKEL VAN ONDERLINGE AFHANKELIJKHEID DOORBREKEN

De software bestond al 25 jaar en de geschiedenis ervan manifesteerde zich als een web van complexe onderlinge afhankelijkheden. Hoe overwin je dat als UX-ontwerper?

Allereerst overtuigden we de productmanagers ervan dat als we voor de toekomst wilden ontwerpen, we verder moesten gaan dan hun intuïties over wat gebruikers in het verleden nodig hadden.

We deden vier weken lang gebruikersonderzoek en brachten de behoeften van toekomstige gebruikers in kaart. De tweede hack die we in ons proces gebruikten, was om in het midden te beginnen voordat we aan een onvoorspelbaar end-to-end ontwerp begonnen. We identificeerden 10 belangrijke UX ontwerpuitdagingen en ontwikkelden voor elk daarvan een paar mogelijke oplossingen - in zes weken brachten we een UX ontwerpoptie-ruimte in kaart.

Dit leidde tot tevredenheid aan beide kanten: het uitgangspunt van de bredere UX-transformatie was aanwezig en het toekomstgerichte begrip van de gebruikersbehoeften ondersteunde het. Meer nog, er was ook een ruw idee van hoe de belangrijkste UI-gebieden eruit zouden kunnen zien, wat ons hielp bij onze ontwerpreis.

Diagram dat het proces van UX- en UI-ontwerp voor technische software laat zien.
Quotes
Ik kan niet geloven hoeveel je in drie dagen in je eentje hebt geleerd, zelfs sommige experts die ik train hebben meer tijd nodig.
UX research user
Franz Zdravistch
Ph.D.​​ Chief Training Engineer

15 JAAR TECHNISCHE SCHULD BEGRIJPEN

Er wordt wel gezegd dat "ontwerpers technische schulden haten en de voorkeur geven aan een lege lei".

Dat is niet waar voor ons UX ontwerpbureau. De geschiedenis is en blijft een rijke bron van informatie die er gewoon op wacht om gebruikt te worden voor het ontwerp van professionele software.

De vraag is: Hoe kun je in zo weinig tijd zoveel opnemen? Je gaat zitten en leert.

De kracht ligt in zelfgestuurd leren, wat in het geval van dit ontwerpproject betekende: Het lezen van de handleidingen, het bestuderen met Youtube tutorials, het uitvoeren van testen/oefeningen in de software en vooral veel vragen verzamelen.

We hebben deze vragen voorgelegd aan de belangrijkste belanghebbenden. Sommige waren bedoeld voor productmanagers, andere voor ontwikkelaars. Uiteindelijk hebben ze in de loop van een week ongeveer vier uur met ons doorgebracht. Dat was precies genoeg om ons op weg te helpen.

Schermafbeeldingen van een oude gebruikersinterface van CFD-simulatiesoftware.

DE BEHOEFTEN VAN PROFESSIONELE GEBRUIKERS IN KAART BRENGEN

Het probleem met professionele softwaregebruikers is dat hun behoeften ingewikkeld zijn. Workflows bestaan uit talloze stappen en zijn zelden lineair. Gebruikers willen en moeten veel verschillende dingen doen. Er lijken echter geen patronen te bestaan. Alle interacties vinden, in tegenstelling tot webdashboards, plaats op één scherm zonder gekoppelde pagina's.

Productmanagers lijken misschien een grondige kennis te hebben van één routine, maar ze begrijpen slechts een fractie van de werkelijke diversiteit aan gebruikersbehoeften.

Dit wetende, gingen we aan de slag met echte gebruikers om de nodige nuance te ontdekken. Door gebruik te maken van onze ervaring in gebruikersonderzoek en technisch onderzoek hebben we het project pragmatisch en efficiënt aangepakt.

Schema van analyse van gebruikersbehoeften voor het GUI-ontwerp van complexe software.
Abstracte grafiek met donkere kubus en lichte bol om een UX-casestudy op te breken.

ONDERZOEK ONTHULT PRODUCTKANSEN

De belanghebbenden waren verrast toen uit het onderzoek bleek dat bepaalde functies, die het duurst zijn om te onderhouden, nauwelijks belangrijk zijn voor de gebruikers.

Dit is een duidelijk voorbeeld van waarom het heroverwegen van het productconcept op de lange termijn loont, zelfs als het kleine of grote veranderingen ondergaat. De oefening duurt niet lang, maar levert wel veel op:

• Het stemt de tijdlijnen voor ontwikkeling af op de behoeften van de markt; • Het voorkomt verspilling van middelen; • Het onthult relatieve prioriteiten, wat ontwerpbeslissingen later in de ontwerpfase mogelijk maakt; • Het verjongt het enthousiasme van het team voor het moeilijke werk dat voor ons ligt; • Het helpt marketing te begrijpen hoe het product in de toekomst relevant zal zijn voor klanten.

Zou het niet vreemd zijn als professionele software hetzelfde zou blijven terwijl het ontwerp, de code, de gebruikers en zelfs de hele wereld evolueren en veranderen?

Diagram dat de kenmerken van een technische professionele software in het proces van productontwikkeling weergeeft.
Schema van het ontwerpproces van miniprototypes voor een professionele gebruikersinterface voor software.

ONTWERPVERKENNING MET MINIPROTOTYPES

In plaats van halsoverkop in een lang, open ontwerptraject te springen, namen we zes weken de tijd om de ruggengraat van de nieuwe UX te smeden. Onze aanpak was onverwacht.

We identificeerden de tien belangrijkste UI-uitdagingen die de gebruikerservaring van de hele applicatie bepalen. Daarna hebben we voor elke uitdaging een reeks miniprototypes gemaakt en de beschikbare ontwerpopties in kaart gebracht.

In zes weken tijd ontwikkelden we in totaal 45 oplossingen. We verzamelden feedback van gebruikers, technici en belanghebbenden. Daarna hebben we zorgvuldig de voor- en nadelen van elke individuele oplossing bekeken. Deze vergelijking hielp ons om te zien welke oplossingen goed samenwerkten.

Na zes weken hadden we de ruggengraat ontwikkeld voor de gebruikerservaring van de software, gebaseerd op tests, experimenten en feitelijke gegevens. Dit markeert het punt waarop de rest van het ontwerpproces voorspelbaar wordt.

Een geschreven opdracht voor het ontwerp van een UI-component voor technische software

SLIM UX-ONTWERP WORDT ONTDEKT, NIET GEMAAKT

Zoals elk resultaat van technische inspanningen, moet een gebruikersinterface de realiteit weerspiegelen. Het moet gebaseerd zijn op wat gebruikers dagelijks nodig hebben, wat de code kan en wat verkoopt op de markt.

De voordelen van het in kaart brengen van ontwerpopties voor de belangrijkste onderdelen van de gebruikerservaring zijn: • Het legt feiten vast als basis voor het ontwerp; • Het biedt duidelijkheid voor alle belanghebbenden met visuals; • Het gaat verder dan clichés, in tegenstelling tot een lineair proces; • Het ondersteunt samenhang;

Uiteindelijk maakt deze user experience design aanpak productontwikkeling voorspelbaar, terwijl het ook het kip-en-ei dilemma oplost van het transformeren van complexe professionele software UI's.

01 /06
arrow left
arrow right

IN HET END-TO-END ONTWERP VAN DE GEBRUIKERSERVARING

Na het vaststellen van het basisconcept voor de lastigste 20% van de gebruikerservaring, moest de resterende 80% nog worden aangepakt.

Het kostte ons vier maanden om de end-to-end gebruikerservaring voor de hele softwareapplicatie en de bijbehorende modules te ontwikkelen.

Op dit punt in het traject was alles voorspelbaar en waren er nauwelijks noemenswaardige verrassingen voor het productteam. Achter de schermen hadden we echter elke week te maken met uitdagingen. Ons doel was om alle functies naadloos in de interface te integreren.

Tijdens deze fase waren onze deliverables high-fidelity wireframes en prototypes. De echte crux lag echter in het verzamelen van feedback en het itereren van de ontwerpen om alle bases te dekken.

ROBUUSTE LAY-OUTS IN EVENWICHT BRENGEN MET FLEXIBILITEIT

Professionele software is lastig omdat er in wezen maar één weergave is en niet een heleboel pagina's. Deze enkele weergave moet dus alle mogelijkheden van de software bevatten, zowel nu als in de toekomst. Deze enkele weergave moet dus alle functies van de software bevatten, zowel de huidige als de toekomstige.

Als ontwerpers streven we naar een lay-out en een gebruikerservaringarchitectuur met een logische structuur. Dit helpt gebruikers hun intuïtie te gebruiken wanneer ze zich afvragen "waar is wat" en "wat gebeurt er als".

Tegelijkertijd streven we naar flexibiliteit - een gebruikersinterface die op elk moment alle functies ondersteunt. Bovendien moet de gebruikersinterface voor professionele software praktisch zijn in alle gebruikssituaties, zodat een rigide aanpak wordt vermeden.

Het bereiken van de juiste balans tussen robuustheid en flexibiliteit is waar we vier maanden hard aan hebben gewerkt.

VISUALISATIE VAN GEGEVENS EN TECHNISCHE DETAILS

Om deze technische software gebruiksvriendelijk te maken, moesten gegevens worden gevisualiseerd op een manier die relevant is voor ingenieurs. Het hield ook in dat er UI-componenten moesten worden gemaakt die technische concepten duidelijk uitdrukken. Bijvoorbeeld:

• Scenario parameter definitie; • Winddiagrammen; • Chemische mengsels; • Textuurbibliotheken; • Monitor punten; • Projectoverzichten; • Statusbalken; • Filteren;

Wederom leverde onze ontwerpaanpak van het uittesten van opties geweldige resultaten op. Dit maakte het mogelijk om verschillende ontwerpopties gemakkelijk te vergelijken op basis van hun werkelijke verdiensten: "Helpen ze technische gebruikers om het makkelijker te begrijpen, of niet?".

Dit proces levert kleine ontwerpdetails op die niet alleen de gebruikerservaring verbeteren, maar ook naadloos integreren in het algehele raamwerk, waardoor de stemming van gebruikers verbetert en een samenhangende ervaring wordt gegarandeerd.

Screenshot van een gebruikersinterface voor technische simulatiesoftware, met een gemarkeerde UI-component
UI-component om de mix van een chemische stof te definiëren, naast een diagram met parameters.
Diagram waarin een UI-ontwerpprincipe wordt uitgelegd dat mnemonische conventie wordt genoemd

NAUWGEZET ONTWERP VAN UI COMPONENTEN

Het UI-ontwerp van de professionele software is gemaakt op basis van doelgerichte principes om consistentie te garanderen die technische gebruikers tevreden stelt.

Bij het ontwerpen van componenten voor interactie met 3D-geometrie hebben we bijvoorbeeld kleurprincipes gebruikt die het geheugen ondersteunen. Bovendien zorgt ons raster voor consistentie van UI-componenten, ongeacht de interacties van gebruikers met de 3D-geometrie.

We hebben verschillende ontwerpopties voor de UI geïtereerd en geëxperimenteerd met verschillende combinaties van strepen en opaciteit. Vervolgens hebben we de onderdelen in alle mogelijke scenario's getest om de optimale oplossing te bepalen. Dit onderzoek zorgt ervoor dat er geen ongewenste, foutieve UI-elementen aanwezig zijn in de varianten.

Het UI-ontwerp gaat verder dan alleen het toepassen van merkkleuren. In plaats daarvan verbetert het actief de workflow van de gebruiker terwijl het de software een tijdloze uitstraling geeft.

Diagram dat laat zien hoe het ontwerpbureau een UI-component voor software ontwikkelde en testte

ONDERSTEUNING VOOR SOFTWAREONTWIKKELAARS

Het UI-ontwerp was responsive en eenvoudig schaalbaar voor toekomstige ontwikkeling. Om ervoor te zorgen dat het ontwerp naadloos werkt in real-life scenario's, boden we ontwikkelaars uitgebreide ondersteuning.

In plaats van vage principes aan te bieden en de ontwikkelaars zelf te laten uitzoeken hoe ze deze moeten toepassen tijdens het coderen, hebben we bijvoorbeeld een ontwerpsysteem aangeboden dat een overzicht biedt van alle mogelijke scenario's. Het bevat gedetailleerde voorbeelden om ervoor te zorgen dat de UI onder alle omstandigheden goed functioneert. Het bevat gedetailleerde voorbeelden om ervoor te zorgen dat de UI onder alle omstandigheden effectief functioneert.

Door zo gedetailleerd te werk te gaan, zorgen we ervoor dat het onderliggende systeem van het ontwerp logisch is en alle gevallen dekt. Door ontwikkelaars gedetailleerd bloot te stellen aan het systeem, stroomlijnen we hun inspanningen, zodat ze zich alleen op het coderen kunnen richten.

Schermafbeelding van een gedetailleerd ontwerpsysteem voor native software gebruikt door professionele gebruikers.
Diagram waarin de lichte en donkere modus van een GUI worden vergeleken, gemaakt door een UX-ontwerpbureau

ONTWERP VOOR LICHTE EN DONKERE UI

We ontwikkelden de gebruikersinterface van deze professionele software met zowel donkere als lichte UI-varianten. Dit is geschikt voor verschillende gebruikersgroepen die in zeer verschillende omgevingen werken.

Er is een systeem met regels om de directe verbinding tussen de UI-toestanden tot stand te brengen. Hierdoor heeft elke kleur in de lichte UI-modus een overeenkomstige tegenhanger in de donkere UI-modus. Deze relatie is gebaseerd op een formule.

De consistente kleurdefinities zorgen ervoor dat er geen inconsistenties zijn bij het schakelen tussen lichte en donkere UI-modi.

Deze aanpak verlicht ook de werklast van de ontwikkelaars, omdat ze geen afzonderlijke UI's meer hoeven te coderen.

Donker
Licht
Schermafbeelding van een gedetailleerd ontwerpsysteem voor native software gebruikt door professionele gebruikers.
Ontwerpelementen

UX EN UI-ONTWERP VOOR PROFESSIONELE SOFTWARE

Gezien de rijke geschiedenis van deze professionele software was de belangrijkste ambitie tijdens dit project om de gebruikersinterface opnieuw uit te vinden met behoud van de functies die de tand des tijds hebben doorstaan.

De grootste uitdaging lag in het omgaan met de complexiteit van het systeem. Dit bracht onzekerheid in het UX-transformatieproject.

We implementeerden tijdgebonden fasen om de complexiteit enigszins te verminderen. Tijdens deze sessies bestudeerden we potentiële oplossingen voor de belangrijkste UX-uitdagingen. Binnen twee maanden bereikten we een punt waarop het stappenplan voor ontwerp en ontwikkeling voor het volgende jaar voorspelbaar werd.

De laatste fase draaide om nauwkeurig en nauwgezet werk om de beoogde gebruikersinterface uit te rollen. Dit omvatte het bestuderen van technische details en het samenwerken met technische gebruikers om uit te zoeken welke expressieve componenten in de flexibele UI-structuur konden worden ingepast.