Användarupplevelse och gränssnittsdesign för teknisk programvara

Design för professionell simuleringsprogramvara

Professionella användare

UX Design

UI Design

KLIENTGexcon
PLATSLondon, UK
TEAMUX-designer, UI-designer, interaktionsdesigner, projektledare, produktägare, researcher
WEBBPLATS

Programvaran är erkänd som den mest kraftfulla programvaran för beräkningsströmningsdynamik på grund av dess simuleringskapacitet. Detta är ingen överraskning med tanke på att den utvecklades på 90-talet av Chr. Michelsens institut för vetenskap.

Men här är problemet: de ursprungliga användarna är nu pensionerade, och deras nyare motsvarigheter föredrar mindre kapabla programvarualternativ på grund av enklare inlärningsprocesser.

Detta problem ledde dem till vår byrå för UX-design. Vi fick i uppdrag att tänka om hela användarupplevelsen och därmed ge programvaran ytterligare 25 år på hyllan.

VÅRA BIDRAG

Requirements Mapping

Användarforskning

Benchmarking

UX Design

Prototypframställning

UI Design - Ljus och mörk

System för utformning

Kvalitetssäkring

BRYTA DEN ONDA CIRKELN AV ÖMSESIDIGT BEROENDE

Programvaran hade funnits i 25 år och dess historia manifesterades som en väv av komplexa ömsesidiga beroenden. Hur hanterar man detta som UX-designer?

Först och främst övertygade vi produktcheferna om att om vi skulle designa för framtiden så skulle vi behöva gå förbi deras intuitioner om vad användarna behövde i det förflutna.

Vi genomförde fyra veckors användarundersökningar och kartlade framtida användares behov. Det andra hacket vi använde i vår process var att börja i mitten innan vi faktiskt började med en oförutsägbar end-to-end-design. Vi identifierade 10 viktiga utmaningar för UX-design och utvecklade några möjliga lösningar för var och en av dem - på sex veckor kartlade vi ett alternativutrymme för UX-design.

Detta ledde till tillfredsställelse i båda ändar: förutsättningen för den bredare UX-omvandlingen var på plats och den framtidsorienterade förståelsen av användarnas behov stödde den. Dessutom fanns det också en grov uppfattning om hur viktiga gränssnittsområden skulle kunna se ut, vilket hjälpte oss i vår designresa.

Diagram som visar processen för UX- och UI-design för teknisk programvara.
Quotes
Jag kan inte fatta hur mycket du lärde dig på egen hand på tre dagar, till och med vissa av de experter jag utbildar behöver mer tid.
UX research user
Franz Zdravistch
Ph.D.​​ Chief Training Engineer

15 ÅRS ERFARENHET AV TEKNISK SKULD

Det sägs att "designers hatar teknisk skuld och föredrar ett oskrivet blad".

Det är inte sant för vår UX-designbyrå. Historien är och kommer alltid att vara en rik källa till information som bara väntar på att användas för att utforma professionell programvara

Frågan är: Hur tillgodogör man sig så mycket på så kort tid? Man sätter sig ner och lär sig.

Kraften ligger i självstyrt lärande, vilket i fallet med detta designprojekt innebar: Läsa manualerna, studera med Youtube tutorials, köra tester/övningar i programvaran och viktigast av allt, samla en massa frågor.

Vi ställde dessa frågor till viktiga intressenter. Vissa av dem var avsedda för produktchefer, andra för utvecklare. I slutändan tillbringade de ungefär fyra timmar med oss under en vecka. Det var precis tillräckligt för att vi skulle komma igång.

Skärmdumpar från ett gammalt användargränssnitt för CFD-simuleringsprogram.

KARTLÄGGA BEHOVEN HOS PROFESSIONELLA ANVÄNDARE

Problemet med professionella användare av programvara är att deras behov är komplexa. Arbetsflödena består av många steg och är sällan linjära. Användarna vill och behöver göra många olika saker. Men det verkar inte finnas några mönster. Till skillnad från webbaserade dashboards sker all interaktion på en skärm utan länkade sidor.

Produktchefer kan tyckas ha en djup förståelse för en rutin, men de förstår bara en bråkdel av den verkliga mångfalden av användarbehov.

Med detta i åtanke samarbetade vi med riktiga användare för att hitta de nödvändiga nyanserna. Med hjälp av vår erfarenhet av användarundersökningar och teknisk forskning tog vi oss an projektet på ett pragmatiskt och effektivt sätt.

Diagram över analys av användarbehov för GUI-design av komplex programvara.
Abstrakt grafik med mörk kub och ljus sfär för att bryta upp en UX-fallstudie.

FORSKNING AVSLÖJAR PRODUKTMÖJLIGHETER

Intressenterna blev förvånade när forskningen visade att vissa funktioner, de som är dyrast att underhålla, knappast är viktiga för användarna

Detta är ett tydligt exempel på varför det lönar sig i längden att ompröva produktkonceptet, även om det genomgår mindre eller större förändringar. Övningen tar inte lång tid, men den ger mycket värde:

• Det anpassar utvecklingstiderna till marknadens behov; • Det förhindrar att resurser slösas bort; • Det avslöjar relativa prioriteringar, vilket möjliggör designbeslut senare i designfasen; • Det förnyar teamets entusiasm inför det svåra arbete som väntar; • Det hjälper marknadsföringen att förstå hur produkten kommer att vara relevant för kunderna i framtiden.

Vore det inte konstigt om professionell programvara förblev densamma medan design, kod, användare och till och med hela världen utvecklades och förändrades?

Diagram som specificerar egenskaperna hos en teknisk professionell programvara i produktutvecklingsprocessen.
Diagram som visar designprocessen för miniprototyper av ett användargränssnitt för professionell programvara.

DESIGNUTFORSKNING MED MINIPROTOTYPER

Istället för att kasta oss in i en lång och öppen designresa tog vi sex veckor på oss att skapa stommen i den nya UX. Vårt tillvägagångssätt var oväntat.

Vi identifierade de tio viktigaste utmaningarna för användargränssnittet som formar användarupplevelsen för hela applikationen. Därefter skapade vi en serie miniprototyper för varje utmaning och kartlade de tillgängliga designalternativen.

Under sex veckor utvecklade vi totalt 45 lösningar. Vi samlade in feedback från användare, ingenjörer och intressenter. Sedan granskade vi noggrant för- och nackdelarna med varje enskild lösning. Jämförelsen hjälpte oss att se vilka som fungerade bra tillsammans.

Efter sex veckor hade vi utvecklat ryggraden för användarupplevelsen av programvaran, baserat på tester, experiment och faktauppgifter. Detta är den punkt där resten av designprocessen blir förutsägbar.

En skriftlig brief för utformningen av en UI-komponent för teknisk programvara

SMART UX DESIGN ÄR UPPTÄCKT, INTE SKAPAD

Precis som alla andra resultat av ingenjörsarbete måste ett användargränssnitt återspegla verkligheten. Det ska baseras på vad användarna behöver i vardagen, vad koden kan göra och vad som säljs på marknaden.

Fördelarna med att kartlägga designalternativ för de viktigaste delarna av användarupplevelsen är följande: • Det etablerar fakta som en grund för design; • Det ger tydlighet för alla intressenter med hjälp av visuella bilder; • Det går bortom klichéer, i motsats till en linjär process; • Det stöder samstämmighet;

I slutändan gör denna metod för design av användarupplevelser produktutvecklingen förutsägbar samtidigt som den löser dilemmat med att omvandla komplexa användargränssnitt för professionell programvara.

01 /06
arrow left
arrow right

I UTFORMNINGEN AV ANVÄNDARUPPLEVELSEN FRÅN BÖRJAN TILL SLUT

Efter att ha fastställt grundkonceptet för de svåraste 20 procenten av användarupplevelsen behövde de återstående 80 procenten fortfarande hanteras.

Det tog oss fyra månader att utveckla den heltäckande användarupplevelsen för hela programvaruapplikationen och dess moduler.

Vid den här tidpunkten på resan var allt förutsägbart, och det fanns knappast några större överraskningar för produktteamet. Men bakom kulisserna var vi tvungna att hantera utmaningar varje vecka. Vårt mål var att få gränssnittet att integrera alla funktioner på ett sömlöst sätt.

Under denna fas var våra leveranser high-fidelity wireframes och prototyper. Men den verkliga kärnan låg i att samla in feedback och iterera på designen för att täcka alla baser.

BALANSERA ROBUSTA LAYOUTER MED FLEXIBILITET

Professionell programvara är knepig eftersom det i princip bara finns en vy och inte en massa sidor. Följaktligen måste denna enda vy rymma alla funktioner som programvaran har, både nu och i framtiden.

Som designers strävar vi efter en layout och en arkitektur för användarupplevelsen som har en logisk struktur. Detta hjälper användarna att använda sin intuition när de frågar sig själva "var är vad" och "vad händer om".

Samtidigt strävar vi efter flexibilitet - ett användargränssnitt som kan hantera alla funktioner när som helst. Dessutom måste användargränssnittet för professionell programvara vara praktiskt i alla användningsfall, så att man undviker ett stelt tillvägagångssätt.

Att uppnå rätt balans mellan robusthet och flexibilitet är vad som upptar fyra månader av vårt hårda arbete.

VISUALISERING AV DATA OCH TEKNISKA DETALJER

Att göra denna tekniska programvara användarvänlig innebar att visualisera data på ett sätt som är relevant för ingenjörer. Det innebar också att skapa UI-komponenter som tydligt uttrycker tekniska koncept. Till exempel:

• Definition av scenarioparametrar; • Vinddiagram; • Kemiska blandningar; • Bibliotek för texturer; • Övervakningspunkter; • Projektskisser; • Statusfält; • Filtrering;

Än en gång gav vår designmetod med att ta fram alternativ fantastiska resultat. Detta gjorde det möjligt att enkelt jämföra olika designalternativ baserat på deras faktiska fördelar: "Hjälper de tekniska användarna att förstå lättare, eller inte?

Denna process ger små designdetaljer som inte bara förbättrar användarupplevelsen utan också sömlöst integreras i det övergripande ramverket, vilket höjer användarnas stämning och säkerställer en sammanhängande upplevelse.

Skärmdump av ett användargränssnitt för programvara för teknisk simulering, med en markerad gränssnittskomponent
UI-komponent för att definiera blandningen av ett kemiskt ämne, sida vid sida med ett diagram över parametrar.
Diagram som förklarar en designprincip för användargränssnittet som kallas mnemonisk konvention

NOGGRANN UTFORMNING AV UI KOMPONENTER

Användargränssnittet för den professionella programvaran utformades baserat på ändamålsenliga principer för att säkerställa en konsekvent design som tillfredsställer tekniska användare.

När vi till exempel utformade komponenter för interaktion med 3D-geometri använde vi färgprinciper som stödjer minnet. Dessutom säkerställer vårt rutnät att UI-komponenterna är konsekventa, oavsett hur användarna interagerar med 3D-geometrin.

Vi itererade genom flera designalternativ för användargränssnittet och experimenterade med olika kombinationer av streck och opacitet. Sedan testade vi komponenterna i alla möjliga scenarier för att fastställa den optimala lösningen. Denna forskning säkerställer att inga oönskade, felaktiga gränssnittselement finns i någon av varianterna.

UI:s design går längre än en enkel tillämpning av varumärkets färger. Istället förbättrar den aktivt användarnas arbetsflöde samtidigt som den ger programvaran ett tidlöst utseende och känsla.

Diagram som visar hur designbyrån utvecklade och testade en UI-komponent för programvara

STÖD TILL PROGRAMVARUUTVECKLARE

UI-designen utformades för att vara responsiv och lätt skalbar för framtida utveckling. För att säkerställa att designen fungerar sömlöst i verkliga scenarier gav vi utvecklarna omfattande support.

Istället för att tillhandahålla vaga principer och låta utvecklarna själva ta reda på hur de ska tillämpa dem när de kodar, erbjöd vi till exempel ett designsystem som ger en översikt över alla möjliga scenarier. Det innehåller detaljerade exempel för att säkerställa att användargränssnittet fungerar effektivt under alla omständigheter.

Genom att gå in på denna detaljnivå säkerställer vi att det underliggande systemet i designen är logiskt och täcker alla fall. Genom att ge utvecklarna en detaljerad inblick i systemet effektiviserade vi deras arbete så att de kunde fokusera enbart på kodningen.

Skärmdump av ett detaljerat designsystem för inbyggd programvara som används av professionella användare.
Diagram som jämför det ljusa och mörka läget i ett GUI skapat av en UX-designbyrå

DESIGN FÖR LJUS OCH MÖRK UI

Vi utvecklade användargränssnittet för denna professionella programvara med både mörka och ljusa användargränssnittsvarianter. Detta tillgodoser olika användarkategorier som arbetar i mycket olika miljöer.

Ett system med regler finns på plats för att upprätta den direkta kopplingen mellan gränssnittslägena. Som ett resultat har varje färg i det ljusa UI-läget en motsvarande motsvarighet i det mörka UI-läget. Detta förhållande baseras på en formel.

De konsekventa färgdefinitionerna säkerställer att det inte blir några inkonsekvenser när du växlar mellan ljusa och mörka gränssnittslägen.

Detta tillvägagångssätt underlättar också utvecklarnas arbetsbörda eftersom de inte behöver koda separata användargränssnitt.

Mörk
Ljus
Skärmdump av ett detaljerat designsystem för inbyggd programvara som används av professionella användare.
Designelement

UX- OCH UI-DESIGN FÖR PROFESSIONELL PROGRAMVARA

Med tanke på den här professionella programvarans långa historia var den främsta ambitionen under projektet att förnya användargränssnittet och samtidigt bevara de funktioner som stått sig genom tiderna.

Den största utmaningen var att hantera systemets komplexitet. Detta medförde osäkerhet i UX-transformationsprojektet.

Vi införde tidsbestämda faser för att lindra en del av komplexiteten. Under dessa sessioner studerade vi potentiella lösningar för de viktigaste UX-utmaningarna. Inom två månader hade vi nått en punkt där färdplanen för design och utveckling för det följande året blev förutsägbar.

Den sista fasen var inriktad på exakt och noggrant arbete för att lansera det tänkta användargränssnittet. Det innebar att vi studerade tekniska detaljer och arbetade tillsammans med tekniska användare för att ta reda på vilka uttrycksfulla komponenter som kunde passa in i den flexibla användargränssnittsstrukturen.