Brugeroplevelse og interface-design til teknisk software

Design til professionel simuleringssoftware

Professionelle brugere

UX Design

UI Design

KLIENTGexcon
PLACERINGLondon, UK
TEAMUX-designer, UI-designer, interaktionsdesigner, projektleder, produktejer, researcher
HJEMMESIDE

Softwaren er anerkendt som den mest kraftfulde computational fluid dynamics-software på grund af dens simuleringsfunktioner. Det kommer ikke som nogen overraskelse, eftersom det blev udviklet i 90'erne af Chr. Michelsens Institut for Videnskab.

Men her er problemet: De oprindelige brugere er nu gået på pension, og deres nyere kolleger foretrækker mindre effektive softwarealternativer på grund af lettere indlæringsprocesser.

Dette problem førte dem til vores UX-designbureau. Vi fik til opgave at gentænke hele brugeroplevelsen og dermed give softwaren endnu 25 år på hylden.

VORES BIDRAG

Kortlægning af krav

Brugerundersøgelse

Benchmarking

UX Design

Prototyping

UI Design - Light and Dark

Design System

Kvalitetssikring

BRYDE DEN ONDE CIRKEL AF GENSIDIG AFHÆNGIGHED

Softwaren havde eksisteret i 25 år, og dens historie manifesterede sig som et net af komplekse indbyrdes afhængigheder. Hvordan overvinder man det som UX-designer?

Først og fremmest overbeviste vi produktcheferne om, at hvis vi skulle designe til fremtiden, ville vi være nødt til at bevæge os ud over deres intuitioner om, hvad brugerne havde brug for i fortiden.

Vi foretog fire ugers brugerundersøgelser og kortlagde de fremtidige brugeres behov. Det andet hack, vi brugte i vores proces, var at starte på midten, før vi faktisk gik i gang med et uforudsigeligt end-to-end-design. Vi identificerede 10 centrale UX-designudfordringer og udviklede et par mulige løsninger til hver af dem - på seks uger kortlagde vi et UX-designs mulighedsrum.

Det førte til tilfredshed i begge ender: Præmissen for den bredere UX-transformation var på plads, og den fremtidsorienterede forståelse af brugernes behov understøttede den. Derudover var der også en grov fornemmelse af, hvordan de vigtigste brugergrænsefladeområder kunne se ud, hvilket hjalp os på vores designrejse.

Diagram, der viser processen med UX- og UI-design til teknisk software.
Quotes
Jeg kan ikke tro, hvor meget du lærte på egen hånd på tre dage, selv nogle af de eksperter, jeg uddanner, har brug for mere tid.
UX research user
Franz Zdravistch
Ph.D.​​ Chief Training Engineer

FORSTÅELSE AF 15 ÅRS TEKNISK GÆLD

Det siges, at "designere hader teknisk gæld og foretrækker en blank tavle".

Det er ikke sandt for vores UX-designbureau. Historien er og vil altid være en rig kilde til information, der bare venter på at blive brugt til design af professionel software.

Spørgsmålet er: Hvordan tilegner man sig så meget på så kort tid? Man sætter sig ned og lærer.

Styrken ligger i selvstyret læring, hvilket i tilfældet med dette designprojekt betød: At læse manualerne, studere med Youtube-tutorials, køre tests/øvelser i softwaren og vigtigst af alt, at indsamle en masse spørgsmål.

Vi stillede disse spørgsmål til de vigtigste interessenter. Nogle af dem var beregnet til produktchefer, andre til udviklere. I sidste ende brugte de omkring fire timer sammen med os i løbet af en uge. Det var præcis nok til at få os op at køre.

Skærmbilleder fra en gammel brugergrænseflade til CFD-simuleringssoftware.

KORTLÆGNING AF PROFESSIONELLE BRUGERES BEHOV

Sagen med professionelle softwarebrugere er, at deres behov er indviklede. Workflows involverer mange trin og er sjældent lineære. Brugerne ønsker og har brug for at gøre en masse forskellige ting. Men der ser ikke ud til at være nogen mønstre. I modsætning til webdashboards foregår alle interaktioner på én skærm uden linkede sider.

Produktchefer ser måske ud til at have en dyb forståelse af en rutine, men de forstår kun en brøkdel af den reelle mangfoldighed af brugerbehov.

Med den viden gik vi i dialog med rigtige brugere for at finde de nødvendige nuancer. Vi udnyttede vores erfaring med brugerundersøgelser og tekniske undersøgelser til at gribe projektet an på en pragmatisk og effektiv måde.

Diagram over analyse af brugerbehov til GUI-design af kompleks software.
Abstrakt grafik med mørk kube og lys kugle til at bryde et UX-casestudie op.

FORSKNING AFSLØRER PRODUKTMULIGHEDER

Interessenterne blev overraskede, da undersøgelsen afslørede, at visse funktioner, som er de dyreste at vedligeholde, næppe er vigtige for brugerne.

Det er et tydeligt eksempel på, at det i det lange løb kan betale sig at gentænke produktkonceptet, selv om det undergår større eller mindre ændringer. Øvelsen tager ikke lang tid, men den giver meget værdi:

• Det tilpasser udviklingens tidslinjer til markedets behov; • Det forhindrer spild af ressourcer; • Det afslører relative prioriteter og muliggør designbeslutninger senere i designfasen; • Det forynger teamets entusiasme for det vanskelige arbejde, der venter forude; • Det hjælper marketing med at forstå, hvordan produktet vil være relevant for kunderne i fremtiden.

Ville det ikke være mærkeligt, hvis professionel software forblev den samme, mens design, kode, brugere og endda hele verden udviklede og ændrede sig?

Diagram, der specificerer funktionerne i en teknisk professionel software i produktudviklingsprocessen.
Diagram, der viser designprocessen for miniprototyper til en professionel softwarebrugergrænseflade.

DESIGNUDFORSKNING MED MINIPROTOTYPER

I stedet for at springe hovedkulds ud i en lang, åben designrejse tog det os seks uger at skabe rygraden i den nye UX. Vores tilgang var uventet.

Vi identificerede de ti vigtigste UI-udfordringer, der former brugeroplevelsen af hele applikationen. Bagefter skabte vi en række miniprototyper for hver udfordring og kortlagde de tilgængelige designmuligheder.

I løbet af seks uger udviklede vi i alt 45 løsninger. Vi indsamlede feedback fra brugere, ingeniører og interessenter. Derefter gennemgik vi omhyggeligt fordele og ulemper ved hver enkelt løsning. Denne sammenligning hjalp os med at se, hvilke der fungerede godt sammen.

Efter seks uger havde vi udviklet rygraden for brugeroplevelsen af softwaren, baseret på tests, eksperimenter og faktuelle data. Dette markerer det punkt, hvor resten af designprocessen bliver forudsigelig.

En skriftlig brief til design af en UI-komponent til teknisk software

SMART UX-DESIGN OPDAGES, IKKE SKABES

Som ethvert andet resultat af ingeniørarbejde skal en brugergrænseflade afspejle virkeligheden. Den skal være baseret på, hvad brugerne har brug for i hverdagen, hvad koden kan, og hvad der sælger på markedet.

Fordelene ved at kortlægge designmuligheder for de vigtigste dele af brugeroplevelsen er: • Det etablerer fakta som et fundament for design; • Det giver klarhed for alle interessenter med visualiseringer; • Det går ud over klichéer, i modsætning til en lineær proces; • Det understøtter sammenhængen;

I sidste ende gør denne tilgang til brugeroplevelsesdesign produktudviklingen forudsigelig, samtidig med at den løser dilemmaet med hønen og ægget, når man skal transformere komplekse professionelle software-brugergrænseflader.

01 /06
arrow left
arrow right

I END-TO-END-DESIGNET AF BRUGEROPLEVELSEN

Efter at have etableret det grundlæggende koncept for de vanskeligste 20 % af brugeroplevelsen, manglede de resterende 80 % stadig at blive løst.

Det tog os fire måneder at udvikle end-to-end-brugeroplevelsen for hele softwareapplikationen og dens moduler.

På dette tidspunkt af rejsen var alt forudsigeligt, og der var næsten ingen nævneværdige overraskelser for produktteamet. Men bag kulisserne var vi nødt til at håndtere udfordringer hver uge. Vores mål var at få grænsefladen til at inkorporere alle funktionerne på en problemfri måde.

I denne fase var vores leverancer high-fidelity wireframes og prototyper. Men den virkelige kerne lå i at indsamle feedback og iterere på designene for at dække alle baser.

BALANCERER ROBUSTE LAYOUTS MED FLEKSIBILITET

Professionel software er vanskelig, fordi der i bund og grund kun er én visning og ikke en masse sider. Derfor skal denne ene visning rumme alle de funktioner, som softwaren har, både nu og i fremtiden.

Som designere stræber vi efter et layout og en brugeroplevelsesarkitektur, der har en logisk struktur. Det hjælper brugerne med at bruge deres intuition, når de spørger sig selv "hvor er hvad" og "hvad sker der, hvis".

Samtidig sigter vi efter fleksibilitet - en brugergrænseflade, der til enhver tid kan rumme alle funktioner. Desuden skal brugergrænsefladen til professionel software være praktisk i alle brugssituationer, så man undgår en rigid tilgang.

At opnå den rette balance mellem robusthed og fleksibilitet er det, vi har arbejdet hårdt på i fire måneder.

VISUALISERING AF DATA OG TEKNISKE DETALJER

At gøre denne tekniske software brugervenlig indebar at visualisere data på en måde, der var relevant for ingeniører. Det indebar også at skabe UI-komponenter, der udtrykker tekniske koncepter tydeligt. For eksempel:

• Definition af scenarieparametre; • Vinddiagrammer; • Kemiske blandinger; • Teksturbiblioteker; • Overvågningspunkter; • Projekt skitser; • Statusbjælker; • Filtrering;

Endnu en gang gav vores designtilgang med valgmuligheder gode resultater. Det gjorde det nemt at sammenligne forskellige designmuligheder baseret på deres faktiske fordele: "Hjælper de tekniske brugere med lettere at forstå, eller gør de ikke?

Denne proces giver små designdetaljer, der ikke kun forbedrer brugeroplevelsen, men også integreres problemfrit i den overordnede ramme, løfter brugernes humør og sikrer en sammenhængende oplevelse.

Skærmbillede af en brugergrænseflade til teknisk simuleringssoftware med en fremhævet UI-komponent
UI-komponent til at definere blandingen af et kemisk stof, side om side med et diagram over parametre.
Diagram, der forklarer et UI-designprincip kaldet mnemonisk konvention

OMHYGGELIGT DESIGN AF UI-KOMPONENTER

Brugergrænsefladens design af den professionelle software blev udformet baseret på målrettede principper for at sikre konsistens, der tilfredsstiller tekniske brugere.

Da vi for eksempel designede komponenter til interaktion med 3D-geometri, brugte vi farveprincipper, der understøtter hukommelse. Desuden sikrer vores grid, at UI-komponenterne er konsistente, uanset brugernes interaktion med 3D-geometrien.

Vi itererede gennem flere designmuligheder for brugergrænsefladen og eksperimenterede med forskellige kombinationer af streger og uigennemsigtighed. Derefter testede vi komponenterne på tværs af alle mulige scenarier for at finde den optimale løsning. Denne forskning sikrer, at ingen uønskede, defekte UI-elementer er til stede i nogen af varianterne.

Designet af brugergrænsefladen går længere end blot at anvende brandets farver. I stedet forbedrer det aktivt brugernes workflow, samtidig med at softwaren får et tidløst udseende.

Diagram, der viser, hvordan designbureauet udviklede og testede en UI-komponent til software

SUPPORT TIL SOFTWAREUDVIKLERE

Brugergrænsefladedesignet blev udformet til at være responsivt og let skalerbart til fremtidig udvikling. For at sikre, at designet fungerer problemfrit i virkelige scenarier, gav vi udviklerne omfattende support.

I stedet for at give vage principper og lade udviklerne selv finde ud af, hvordan de skal anvende dem, når de koder, tilbød vi for eksempel et designsystem, der giver et overblik over alle mulige scenarier. Det indeholder detaljerede eksempler for at sikre, at brugergrænsefladen fungerer effektivt under alle omstændigheder.

Ved at dykke ned i dette detaljeniveau sikrer vi, at det underliggende system i designet er logisk og dækker alle tilfælde. Ved at give udviklerne et detaljeret indblik i systemet strømlinede vi deres arbejde, så de udelukkende kunne fokusere på kodning.

Screenshot af et detaljeret designsystem til native software, der bruges af professionelle brugere.
Diagram, der sammenligner den lyse og mørke tilstand af en GUI skabt af et UX-designbureau

DESIGN TIL LYSE OG MØRKE UI

Vi udviklede brugergrænsefladen til denne professionelle software med både mørke og lyse brugergrænsefladevarianter. Det henvender sig til forskellige brugergrupper, der arbejder i meget forskellige miljøer.

Et system med regler er på plads for at etablere den direkte forbindelse mellem UI-tilstandene. Som et resultat har hver farve i den lyse UI-tilstand et tilsvarende modstykke i den mørke UI-tilstand. Dette forhold er baseret på en formel.

De konsekvente farvedefinitioner sikrer, at der ikke opstår uoverensstemmelser, når der skiftes mellem lyse og mørke UI-tilstande.

Denne tilgang letter også udviklernes arbejdsbyrde, da de ikke behøver at kode separate brugergrænseflader.

Mørk
Lys
Screenshot af et detaljeret designsystem til native software, der bruges af professionelle brugere.
Designelementer

UX OG UI DESIGN TIL PROFESSIONEL SOFTWARE

I betragtning af denne professionelle softwares rige historie var hovedambitionen under dette projekt at genopfinde brugergrænsefladen og samtidig bevare de funktioner, der har stået deres prøve gennem tiden.

Den største udfordring var at håndtere systemets kompleksitet. Det introducerede usikkerhed i UX-transformationsprojektet.

Vi implementerede tidsbegrænsede faser for at afhjælpe noget af kompleksiteten. Under disse sessioner undersøgte vi potentielle løsninger på de vigtigste UX-udfordringer. Inden for to måneder nåede vi et punkt, hvor design- og udviklingsplanen for det følgende år blev forudsigelig.

Den sidste fase var centreret omkring det præcise og omhyggelige arbejde med at udrulle den forestillede brugergrænseflade. Det indebar at studere tekniske detaljer og arbejde sammen med tekniske brugere for at finde ud af, hvilke udtryksfulde komponenter der kunne passe ind i den fleksible brugergrænsefladestruktur.