Brukeropplevelse og grensesnittdesign for teknisk programvare

Design for profesjonell simuleringsprogramvare

Profesjonelle brukere

UX Design

UI Design

KLIENTGexcon
BELIGGENHETLondon, UK
TEAMUX-designer, brukergrensesnittdesigner, interaksjonsdesigner, prosjektleder, produkteier, researcher
NETTSIDE

Programvaren er anerkjent som den kraftigste programvaren for væskedynamikk på grunn av sine simuleringsegenskaper. Dette kommer ikke som noen overraskelse, med tanke på at det ble utviklet på 90-tallet av Chr. Michelsens Institutt for Naturvitenskap.

Problemet er imidlertid at de opprinnelige brukerne nå har gått av med pensjon, og at deres nyere kolleger foretrekker mindre effektive programvarealternativer fordi det er enklere å lære.

Dette problemet førte dem til UX-designbyrået vårt. Vi fikk i oppgave å revurdere hele brukeropplevelsen og dermed gi programvaren 25 år til på hyllen.

VÅRE BIDRAG

Kartlegging av krav

Brukerforskning

Benchmarking

UX Design

Prototyping

UI Design - Light and Dark

Design System

Kvalitetssikring

BRYTE DEN ONDE SIRKELEN AV GJENSIDIG AVHENGIGHET

Programvaren hadde eksistert i 25 år, og dens historie manifesterte seg som et nett av komplekse gjensidige avhengigheter. Hvordan håndterer man dette som UX-designer?

Først og fremst overbeviste vi produktsjefene om at hvis vi skulle designe for fremtiden, måtte vi gå bort fra deres intuisjon om hva brukerne trengte tidligere.

Vi gjennomførte fire uker med brukerundersøkelser og kartla behovene til fremtidige brukere. Det andre knepet vi brukte i prosessen, var å starte på midten før vi begynte på et uforutsigbart design fra ende til annen. Vi identifiserte 10 viktige UX-designutfordringer og utviklet noen mulige løsninger for hver av dem - på seks uker kartla vi et mulighetsrom for UX-design.

Dette førte til tilfredshet i begge ender: premissene for den større UX-transformasjonen var på plass, og den fremtidsrettede forståelsen av brukernes behov støttet opp om den. I tillegg fikk vi en grov oversikt over hvordan de viktigste brukergrensesnittene kunne se ut, noe som hjalp oss på designreisen.

Diagram som viser prosessen med UX- og brukergrensesnittdesign for teknisk programvare.
Quotes
Jeg kan ikke tro hvor mye du lærte på egen hånd på tre dager, selv noen av ekspertene jeg trener trenger mer tid.
UX research user
Franz Zdravistch
Ph.D.​​ Chief Training Engineer

FORSTÅ 15 ÅR MED TEKNISK GJELD

Det sies at "designere hater teknisk gjeld og foretrekker en blank tavle".

Det gjelder ikke for vårt UX-designbyrå. Historien er og vil alltid være en rik kilde til informasjon som bare venter på å bli brukt i utformingen av profesjonell programvare.

Spørsmålet er: Hvordan tilegner man seg så mye på så kort tid? Man setter seg ned og lærer.

Styrken ligger i å lære selv, noe som i dette designprosjektet innebar: Lesing av håndbøkene, studier med Youtube-veiledninger, kjøring av tester/øvelser i programvaren og, viktigst av alt, mange spørsmål.

Vi stilte disse spørsmålene til viktige interessenter. Noen av dem var ment for produktsjefer, andre for utviklere. I løpet av en uke tilbrakte de omtrent fire timer sammen med oss. Det var akkurat nok til å få oss i gang.

Skjermbilder fra et gammelt brukergrensesnitt for CFD-simuleringsprogramvare.

KARTLEGGE BEHOVENE TIL PROFESJONELLE BRUKERE

Problemet med profesjonelle programvarebrukere er at behovene deres er komplekse. Arbeidsflyten består av mange trinn og er sjelden lineær. Brukerne ønsker og har behov for å gjøre mange forskjellige ting. Det ser imidlertid ikke ut til å eksistere noen mønstre. I motsetning til nettbaserte dashbord skjer all interaksjon på ett skjermbilde uten koblede sider.

Produktsjefer kan se ut til å ha en dyp forståelse av én rutine, men de forstår bare en brøkdel av det virkelige mangfoldet av brukerbehov.

Derfor engasjerte vi oss i virkelige brukere for å finne de nødvendige nyansene. Med vår erfaring innen brukerundersøkelser og teknisk forskning gikk vi pragmatisk og effektivt til verks.

Diagram over brukerbehovsanalyse for GUI-design av kompleks programvare.
Abstrakt grafikk med mørk kube og lys kule for å bryte opp en UX-casestudie.

FORSKNING AVDEKKER PRODUKTMULIGHETER

Interessentene ble overrasket da undersøkelsen avslørte at visse funksjoner, som er de dyreste å vedlikeholde, knapt er viktige for brukerne.

Dette er et tydelig eksempel på hvorfor det lønner seg i det lange løp å tenke nytt om produktkonseptet, selv om det gjennomgår større eller mindre endringer. Øvelsen tar ikke lang tid, men den gir stor verdi:

• Den tilpasser tidsfrister for utvikling til markedets behov; • Det forhindrer at ressurser sløses bort; • Det avdekker relative prioriteringer, noe som gjør det mulig å ta designbeslutninger senere i designfasen; • Det forynger teamets entusiasme for det vanskelige arbeidet som ligger foran dem; • hjelper markedsavdelingen med å forstå hvordan produktet vil være relevant for kundene i fremtiden.

Ville det ikke vært rart om profesjonell programvare forble den samme mens design, kode, brukere og til og med hele verden utviklet og endret seg?

Diagram som viser funksjonene til en teknisk profesjonell programvare i produktutviklingsprosessen.
Diagram som viser designprosessen for miniprotototyper av et profesjonelt brukergrensesnitt for programvare.

DESIGNUTFORSKNING MED MINIPROTOTOTYPER

I stedet for å kaste oss ut i en lang, åpen designreise, brukte vi seks uker på å skape ryggraden i den nye brukergrensesnittet. Tilnærmingen vår var uventet.

Vi identifiserte de ti viktigste brukergrensesnittutfordringene som påvirker brukeropplevelsen av hele applikasjonen. Deretter laget vi en rekke miniprototyper for hver utfordring og kartla de tilgjengelige designalternativene.

I løpet av seks uker utviklet vi totalt 45 løsninger. Vi samlet inn tilbakemeldinger fra brukere, ingeniører og interessenter. Deretter gikk vi nøye gjennom fordeler og ulemper ved hver enkelt løsning. Denne sammenligningen hjalp oss med å se hvilke løsninger som fungerte godt sammen.

Etter seks uker hadde vi utviklet ryggraden for brukeropplevelsen av programvaren, basert på tester, eksperimenter og faktadata. Dette markerer det punktet hvor resten av designprosessen blir forutsigbar.

En skriftlig brief for design av en brukergrensesnittkomponent for teknisk programvare.

SMART UX-DESIGN OPPDAGES, IKKE SKAPES

Som alle andre resultater av ingeniørarbeid må et brukergrensesnitt gjenspeile virkeligheten. Det skal være basert på brukernes daglige behov, hva koden kan gjøre og hva som selger i markedet.

Fordelene med å kartlegge designalternativene for de viktigste delene av brukeropplevelsen er: • Det etablerer fakta som grunnlag for design; • Det gir klarhet for alle interessenter ved hjelp av visualiseringer; • Det går utover klisjeer, i motsetning til en lineær prosess; • Det bidrar til å skape sammenheng;

Til syvende og sist gjør denne tilnærmingen til brukeropplevelsesdesign produktutviklingen forutsigbar, samtidig som den løser høna-og-egget-dilemmaet med å transformere komplekse brukergrensesnitt for profesjonell programvare.

01 /06
arrow left
arrow right

INN I DEN HELHETLIGE UTFORMINGEN AV BRUKEROPPLEVELSEN

Etter å ha etablert grunnkonseptet for de vanskeligste 20 % av brukeropplevelsen, gjensto det fortsatt å løse de resterende 80 %.

Det tok oss fire måneder å utvikle en helhetlig brukeropplevelse for hele programvaren og dens moduler.

På dette tidspunktet på reisen var alt forutsigbart, og det var knapt noen nevneverdige overraskelser for produktteamet. Bak kulissene måtte vi imidlertid håndtere utfordringer hver uke. Målet vårt var å få grensesnittet til å integrere alle funksjonene på en sømløs måte.

I denne fasen leverte vi high-fidelity wireframes og prototyper. Det viktigste var imidlertid å samle inn tilbakemeldinger og iterere på designene for å dekke alle baser.

BALANSERE ROBUSTE LAYOUTER MED FLEKSIBILITET

Profesjonell programvare er vanskelig fordi det i hovedsak bare finnes én visning og ikke en rekke sider. Denne ene visningen må derfor romme alle funksjonene programvaren har, både i dag og i fremtiden.

Som designere etterstreber vi en layout og en brukeropplevelsesarkitektur som har en logisk struktur. Dette hjelper brukerne til å bruke intuisjonen når de spør seg selv "hvor er hva" og "hva skjer hvis".

Samtidig etterstreber vi fleksibilitet - et brukergrensesnitt som til enhver tid har plass til alle funksjoner. Dessuten må brukergrensesnittet for profesjonell programvare være praktisk i alle brukstilfeller, slik at man unngår en rigid tilnærming.

Fire måneders hardt arbeid har gått med til å finne den rette balansen mellom robusthet og fleksibilitet.

VISUALISERING AV DATA OG TEKNISKE DETALJER

For å gjøre denne tekniske programvaren brukervennlig måtte vi visualisere data på en måte som var relevant for ingeniører. Det innebar også å lage brukergrensesnittkomponenter som uttrykker tekniske konsepter på en tydelig måte. For eksempel:

• Definisjon av scenarioparametere; • Vinddiagrammer; • Kjemiske blandinger; • Teksturbibliotek; • Overvåkningspunkter; • Prosjektoversikter; • Statuslinjer; • Filtrering;

Nok en gang ga designtilnærmingen vår med utvelgelse av alternativer gode resultater. Dette gjorde det enkelt å sammenligne ulike designalternativer basert på deres faktiske fordeler: "Hjelper de tekniske brukerne til å forstå lettere, eller ikke?".

Denne prosessen gir små designdetaljer som ikke bare forbedrer brukeropplevelsen, men som også integreres sømløst i det overordnede rammeverket, noe som løfter brukernes humør og sikrer en helhetlig opplevelse.

Skjermbilde av et brukergrensesnitt for teknisk simuleringsprogramvare, med en uthevet brukergrensesnittkomponent.
UI-komponent for å definere blandingen av et kjemisk stoff, side om side med et diagram over parametere.
Diagram som forklarer et designprinsipp for brukergrensesnittet som kalles mnemoteknisk konvensjon

OMHYGGELIG DESIGN AV UI-KOMPONENTER

Brukergrensesnittet til den profesjonelle programvaren er utformet basert på målrettede prinsipper for å sikre konsistens som tilfredsstiller tekniske brukere.

I utformingen av komponenter for interaksjon med 3D-geometri har vi for eksempel brukt fargeprinsipper som støtter hukommelse. Dessuten sikrer rutenettet vårt at brukergrensesnittkomponentene er konsistente, uavhengig av brukernes interaksjon med 3D-geometrien.

Vi itererte gjennom flere designalternativer for brukergrensesnittet og eksperimenterte med ulike kombinasjoner av streker og uklarheter. Deretter testet vi komponentene i alle mulige scenarier for å finne den optimale løsningen. Denne undersøkelsen sikrer at ingen uønskede, feilaktige brukergrensesnittelementer finnes i noen av variantene.

Designet av brukergrensesnittet går lenger enn bare å bruke merkevarefarger. I stedet forbedrer den aktivt brukernes arbeidsflyt og gir programvaren et tidløst utseende.

Diagram som viser hvordan designbyrået utviklet og testet en brukergrensesnittkomponent for programvare

STØTTE TIL PROGRAMVAREUTVIKLERE

Brukergrensesnittet er responsivt og skalerbart for fremtidig utvikling. For å sikre at designet fungerer sømløst i praksis, ga vi utviklerne omfattende støtte.

I stedet for å gi vage prinsipper og la utviklerne selv finne ut hvordan de skal bruke dem når de koder, har vi for eksempel utviklet et designsystem som gir en oversikt over alle mulige scenarier. Det inneholder detaljerte eksempler for å sikre at brukergrensesnittet fungerer effektivt under alle omstendigheter.

Ved å gå så detaljert til verks sikrer vi at det underliggende systemet i designet er logisk og dekker alle tilfeller. Ved å gi utviklerne et detaljert innblikk i systemet effektiviserer vi arbeidet deres, slik at de kan fokusere utelukkende på koding.

Skjermbilde av et detaljert designsystem for innfødt programvare som brukes av profesjonelle brukere.
Diagram som sammenligner lys og mørk modus i en GUI laget av et UX-designbyrå

DESIGN FOR LYSE OG MØRKE UI

Vi utviklet brukergrensesnittet til denne profesjonelle programvaren med både mørke og lyse varianter. Dette er tilpasset ulike brukergrupper som arbeider i svært forskjellige miljøer.

Et system med regler er på plass for å etablere den direkte forbindelsen mellom UI-tilstandene. Resultatet er at hver farge i den lyse brukergrensesnittmodusen har et tilsvarende motstykke i den mørke brukergrensesnittmodusen. Dette forholdet er basert på en formel.

De konsistente fargedefinisjonene sikrer at det ikke oppstår inkonsekvenser når du bytter mellom lyse og mørke brukergrensesnittmoduser.

Denne tilnærmingen letter også utviklernes arbeidsbyrde ved at de slipper å kode separate brukergrensesnitt.

Mørk
Lys
Skjermbilde av et detaljert designsystem for innfødt programvare som brukes av profesjonelle brukere.
Designelementer

UX- OG UI-DESIGN FOR PROFESJONELL PROGRAMVARE

Med tanke på denne profesjonelle programvarens lange historie var hovedambisjonen i dette prosjektet å fornye brukergrensesnittet og samtidig bevare de funksjonene som har stått seg gjennom tidene.

Den største utfordringen var å håndtere systemets kompleksitet. Dette skapte usikkerhet i UX-transformasjonsprosjektet.

Vi innførte tidsavgrensede faser for å redusere noe av kompleksiteten. I løpet av disse øktene studerte vi potensielle løsninger på de viktigste UX-utfordringene. I løpet av to måneder nådde vi et punkt der veikartet for design og utvikling for det påfølgende året ble forutsigbart.

Den siste fasen dreide seg om nøyaktig og grundig arbeid for å lansere det planlagte brukergrensesnittet. Dette innebar å studere tekniske detaljer og samarbeide med tekniske brukere for å finne ut hvilke uttrykksfulle komponenter som kunne passe inn i den fleksible brukergrensesnittstrukturen.