User Experience und UI Design für technische Software

Design für professionelle Simulationssoftware

Professionelle Nutzer

UX Design

UI Design

KUNDEGexcon
ORTLondon, UK
TEAMUX-Designer, UI-Designer, Interaktionsdesigner, Projektmanager, Product Owner, Forscher
WEBSEITE

Die Software gilt aufgrund ihrer Simulationsfähigkeiten als die leistungsfähigste Software für Computational Fluid Dynamics. Das überrascht nicht, wenn man bedenkt, dass sie in den 90er Jahren aus dem Chr. Michelsen Institute for Science hervorgegangen ist.

Das Problem ist jedoch, dass die ursprünglichen Benutzer inzwischen im Ruhestand sind und ihre jüngeren Kollegen andere Softwarealternativen bevorzugen, weil sie einfacher zu benutzen sind.

Dieses Problem führte sie zu unserer UX Design Agentur. Wir wurden damit beauftragt, das gesamte Benutzererlebnis zu überdenken und der Software so weitere 25 Jahre auf dem Markt zu verschaffen.

UNSER BEITRAG

Mapping der Anforderungen

User Research

Benchmarking

UX Design

Design für Prototyp

UI Design - Hell und Dunkel

Design System

Qualitätskontrolle

BREAKING THE VICIOUS CYCLE OF INTERDEPENDENCE

Die Software existierte bereits seit 25 Jahren und ihre Geschichte manifestierte sich als ein Netz komplexer Abhängigkeiten. Wie überwindet man das als UX-Designer?

Zunächst haben wir die Produktmanager davon überzeugt wir über ihre Intuitionen hinaus gehen müssen, wenn wir für die Zukunft entwerfen wollen. Was die Nutzer in der Vergangenheit brauchten, müssen wir hinter uns lassen.

Wir haben vier Wochen lang Nutzerforschung betrieben und die Bedürfnisse der künftigen Nutzer kartiert. Der zweite Hack, den wir in unserem Prozess nutzten, bestand darin, in der Mitte zu beginnen, bevor wir uns an ein unvorhersehbares A-bis-Z-Design wagten. Wir identifizierten 10 wichtige UX Design Herausforderungen und entwickelten einige mögliche Lösungen für jede von ihnen - in sechs Wochen zeichneten wir einen UX-Design-Optionsraum auf.

Dies führte zu Zufriedenheit auf beiden Seiten: Die Prämisse der umfassenden UX Transformation stand fest und das zukunftsorientierte Verständnis der Nutzerbedürfnisse unterstützte sie. Darüber hinaus gab es auch eine grobe Vorstellung davon, wie die wichtigsten UI-Bereiche aussehen könnten, was uns bei unserer Designreise half.

Diagramm, das den Prozess des UX- und UI-Designs für technische Software zeigt.
Quotes
Ich kann nicht glauben, wie viel ihr in drei Tagen gelernt habt. Selbst einige der Experten, die ich ausbilde, brauchen mehr Zeit.
UX research user
Franz Zdravistch
Ph.D.​​ Chief Training Engineer

UNDERSTANDING 15 YEARS OF TECHNICAL DEBT

Es heißt: "Designer hassen technische Themen und bevorzugen immer von 0 anzufangen".

Für unsere UX Design Agentur trifft das nicht zu. Die Geschichte der Software ist und bleibt eine reiche Quelle von Informationen, die nur darauf warten, für die Gestaltung professioneller Software genutzt zu werden.

Die Frage ist: Wie nimmt man so viel in so kurzer Zeit auf? Man setzt sich hin und lernt.

Die Stärke liegt im selbstgesteuerten Lernen, was im Fall dieses Designprojekts bedeutete: Lesen der Handbücher, Studieren mit Youtube-Tutorials, Ausführen von Tests/Übungen in der Software und vor allem das Sammeln vieler Fragen.

Wir haben diese Fragen an die wichtigsten Interessengruppen gerichtet. Einige davon waren für Produktmanager gedacht, andere für Entwickler. Letztendlich verbrachten sie im Laufe einer Woche etwa vier Stunden mit uns.

Screenshots von einer alten Benutzeroberfläche einer CFD-Simulationssoftware.

MAPPING THE NEEDS OF PROFESSIONAL USERS

Die Bedürfnisse professioneller Software-Nutzer sind komplexer Natur. Arbeitsabläufe umfassen zahlreiche Schritte und sind selten linear. Die Benutzer wollen und müssen viele verschiedene Dinge tun. Es scheint jedoch keine Muster zu geben. Anders als bei Web-Dashboards finden alle Interaktionen auf einem einzigen Bildschirm ohne verknüpfte Seiten statt.

Produktmanager scheinen zwar ein tiefes Verständnis für eine Routine zu haben, aber sie erfassen nur einen Bruchteil der tatsächlichen Vielfalt der Nutzerbedürfnisse.

Mit diesem Wissen haben wir uns mit echten Nutzern beschäftigt, um die notwendigen Nuancen zu entdecken. Mit unserer Erfahrung in der Nutzerforschung und der technischen Forschung sind wir das Projekt pragmatisch und effizient angegangen.

Diagramm der Benutzerbedarfsanalyse für das GUI-Design einer komplexen Software.
Abstrakte Grafik mit dunklem Würfel und heller Kugel zur Auflockerung einer UX-Fallstudie.

RESEARCH REVEALS PRODUCT OPPORTUNITIES

Die Stakeholder waren überrascht, als die Untersuchung ergab, dass bestimmte Funktionen, die am teuersten zu unterhalten sind, für die Nutzer kaum wichtig sind.

Dies ist ein anschauliches Beispiel dafür, dass es sich langfristig lohnt, das Produktkonzept zu überdenken, auch wenn es kleinere oder größere Änderungen erfährt. Die Übung dauert nicht lange, aber sie ist von großem Nutzen:

• Sie stimmt die Entwicklungszeitpläne auf den Marktbedarf ab; • Es wird verhindert, dass Ressourcen verschwendet werden; • Sie zeigt die relativen Prioritäten auf und ermöglicht so Entscheidungen in der Entwurfsphase; • Es verjüngt den Enthusiasmus des Teams für die bevorstehende schwierige Arbeit; • Es hilft dem Marketing zu verstehen, wie das Produkt in Zukunft für die Kunden relevant sein wird.

Wäre es nicht seltsam, wenn professionelle Software gleich bliebe, während sich Design, Code, Benutzer und sogar die ganze Welt weiterentwickeln und verändern?

Diagramm, das die Merkmale einer technischen Fachsoftware im Prozess der Produktentwicklung aufschlüsselt.
Diagramm, das den Entwurfsprozess von Mini-Prototypen für eine professionelle Software-Benutzeroberfläche zeigt.

DESIGN EXPLORATION WITH MINI PROTOTYPES

Anstatt uns kopfüber in eine langwierige, ergebnisoffene Designreise zu stürzen, nahmen wir uns sechs Wochen Zeit, um das Rückgrat der neuen UX zu schmieden. Unser Ansatz war unerwartet.

Wir identifizierten die zehn wichtigsten UI-Herausforderungen, die das Benutzererlebnis der gesamten Anwendung bestimmen. Anschließend erstellten wir eine Reihe von Mini-Prototypen für jede Herausforderung und kartierten die verfügbaren Designoptionen.

In sechs Wochen haben wir insgesamt 45 Lösungen entwickelt. Wir sammelten Feedback von Nutzern, Ingenieuren und Interessengruppen. Dann haben wir die Vor- und Nachteile jeder einzelnen Lösung sorgfältig geprüft. Anhand dieses Vergleichs konnten wir erkennen, welche Lösungen gut zusammenarbeiten.

Nach sechs Wochen hatten wir das Grundgerüst für die Benutzererfahrung der Software entwickelt, basierend auf Tests, Experimenten und faktischen Daten. Dies ist der Punkt, an dem der Rest des Designprozesses vorhersehbar wird.

Ein schriftlicher Auftrag für den Entwurf einer UI-Komponente für technische Software

SMART UX DESIGN IS DISCOVERED, NOT CREATED

Wie jedes Ergebnis der Entwicklungsarbeit muss auch eine Benutzeroberfläche die Realität widerspiegeln. Sie sollte auf dem basieren, was die Benutzer täglich brauchen, was der Code leisten kann und was sich auf dem Markt verkauft.

Die Vorteile der Abbildung von Designoptionen für die wichtigsten Teile der Benutzererfahrung sind: • Sie schafft Fakten als Grundlage für die Gestaltung; • Es schafft Klarheit für alle Beteiligten durch visuelle Darstellungen; • Es geht über Klischees hinaus, im Gegensatz zu einem linearen Prozess; • Sie unterstützt die Kohärenz;

Letztendlich macht dieser User Experience Design-Ansatz die Produktentwicklung vorhersehbar und löst gleichzeitig das Dilemma wo man anfangen soll, bei der Umwandlung komplexer professioneller Software-UIs.

01 /06
arrow left
arrow right

INTO THE END-TO-END USER EXPERIENCE DESIGN

Nachdem das Grundkonzept für die schwierigsten 20 % der Benutzererfahrung festgelegt war, mussten die restlichen 80 % noch in Angriff genommen werden.

Wir haben vier Monate gebraucht, um die End-to-End-Benutzererfahrung für die gesamte Softwareanwendung und ihre Module zu entwickeln.

An diesem Punkt der Reise war alles vorhersehbar, und es gab kaum nennenswerte Überraschungen für das Produktteam. Hinter den Kulissen mussten wir jedoch jede Woche neue Herausforderungen meistern. Unser Ziel war es, die Schnittstelle so zu gestalten, dass alle Funktionen nahtlos ineinander übergehen.

In dieser Phase lieferten wir High-Fidelity-Wireframes und Prototypen. Der eigentliche Knackpunkt war jedoch das Sammeln von Feedback und die Iteration der Entwürfe, um alle Grundlagen abzudecken.

BALANCING ROBUST LAYOUTS WITH FLEXIBILITY

Professionelle Software ist knifflig, weil es im Wesentlichen nur eine Ansicht gibt und nicht eine Reihe von Seiten. Folglich muss diese eine Ansicht alle Funktionen der Software enthalten, sowohl aktuell als auch in Zukunft.

Als Designer bemühen wir uns um ein Layout und eine Architektur der Benutzererfahrung, die eine logische Struktur aufweist. Dies hilft den Nutzern, ihre Intuition zu nutzen, wenn sie sich fragen "wo ist was" und "was passiert, wenn".

Gleichzeitig streben wir Flexibilität an - eine Benutzeroberfläche, die jederzeit alle Funktionen aufnehmen kann. Außerdem muss die Benutzeroberfläche für professionelle Software in allen Anwendungsfällen praktikabel sein und einen starren Ansatz vermeiden.

Vier Monate lang haben wir hart daran gearbeitet, das richtige Gleichgewicht zwischen Robustheit und Flexibilität zu finden.

VISUALISATION OF DATA AND TECHNICAL DETAIL

Um diese technische Software benutzerfreundlich zu gestalten, mussten die Daten in einer für Ingenieure relevanten Weise visualisiert werden. Außerdem mussten UI-Komponenten entwickelt werden, die technische Konzepte klar zum Ausdruck bringen. Zum Beispiel:

• Definition der Szenario-Parameter; • Winddiagramme; • Chemikaliengemische; • Textur-Bibliotheken; • Monitor-Punkte; • Projektstrukturen; • Statusbars; • Filter;

Auch in diesem Fall hat unser Design-Ansatz, bei dem wir verschiedene Optionen ausprobiert haben, hervorragende Ergebnisse geliefert. Dies ermöglichte einen einfachen Vergleich verschiedener Gestaltungsoptionen auf der Grundlage ihrer tatsächlichen Vorzüge: "Helfen sie den technischen Nutzern, den Text besser zu verstehen, oder nicht?

Dieser Prozess führt zu kleinen Designdetails, die nicht nur die Benutzererfahrung verbessern, sondern sich auch nahtlos in den Gesamtrahmen einfügen, die Stimmung der Benutzer heben und ein kohärentes Erlebnis gewährleisten.

Screenshot einer Benutzeroberfläche für eine technische Simulationssoftware, mit einer hervorgehobenen UI-Komponente
UI-Komponente zur Definition der Mischung einer chemischen Substanz, Seite an Seite mit einem Diagramm der Parameter.
Diagramm zur Erläuterung eines UI-Gestaltungsprinzips, der so genannten mnemonischen Konvention

METICULOUS DESIGN OF UI COMPONENTS

Das UI-Design der professionellen Software wurde nach zielgerichteten Prinzipien gestaltet, um eine Konsistenz zu gewährleisten, die die technischen Benutzer zufriedenstellt.

Bei der Gestaltung von Komponenten für die Interaktion mit 3D-Geometrie haben wir zum Beispiel Farbprinzipien verwendet, die das Erinnerungsvermögen unterstützen. Außerdem gewährleistet unser Raster die Konsistenz der UI-Komponenten, unabhängig von den Interaktionen der Benutzer mit der 3D-Geometrie.

Wir haben mehrere Designoptionen für die Benutzeroberfläche durchgespielt und dabei mit verschiedenen Kombinationen von Strichen und Opakitäten experimentiert. Anschließend haben wir die Komponenten in allen möglichen Szenarien getestet, um die optimale Lösung zu ermitteln. Diese Untersuchung stellt sicher, dass keine unerwünschten, fehlerhaften UI-Elemente in einer der Varianten vorhanden sind.

Das UI-Design geht über die einfache Anwendung von Markenfarben hinaus. Stattdessen verbessert es aktiv die Arbeitsabläufe der Nutzer und verleiht der Software ein zeitloses Aussehen.

Diagramm, das zeigt, wie die Designagentur eine UI-Komponente für eine Software entwickelt und getestet hat

SUPPORT FOR SOFTWARE DEVELOPERS

Das UI-Design wurde so gestaltet, dass es reaktionsfähig und für zukünftige Entwicklungen leicht skalierbar ist. Um sicherzustellen, dass das Design in der Praxis nahtlos funktioniert, haben wir die Entwickler umfassend unterstützt.

Anstatt beispielsweise vage Prinzipien vorzugeben und die Entwickler selbst herausfinden zu lassen, wie sie diese beim Programmieren anwenden können, haben wir ein Designsystem angeboten, das einen Überblick über alle möglichen Szenarien bietet. Es enthält detaillierte Beispiele, um sicherzustellen, dass die Benutzeroberfläche unter allen Umständen effektiv funktioniert.

Indem wir uns mit dieser Detailtiefe befassen, stellen wir sicher, dass das dem Entwurf zugrunde liegende System logisch ist und alle Fälle abdeckt. Indem wir den Entwicklern einen detaillierten Einblick in das System geben, können sie sich ausschließlich auf die Programmierung konzentrieren.

Screenshot eines detaillierten Entwurfssystems für native Software, die von professionellen Nutzern verwendet wird.
Diagramm zum Vergleich des hellen und dunklen Modus einer von einer UX-Design-Agentur erstellten GUI

DESIGN FOR LIGHT AND DARK UI

Wir haben die Benutzeroberfläche dieser professionellen Software mit dunklen und hellen UI-Varianten entwickelt. Dies ist für verschiedene Benutzergruppen gedacht, die in sehr unterschiedlichen Umgebungen arbeiten.

Die direkte Verbindung zwischen den Zuständen der Benutzeroberfläche wird durch ein System mit Regeln hergestellt. So hat jede Farbe im hellen Modus der Benutzeroberfläche ein entsprechendes Gegenstück im dunklen Modus der Benutzeroberfläche. Diese Beziehung basiert auf einer Formel.

Die einheitlichen Farbdefinitionen sorgen dafür, dass es beim Wechsel zwischen hellen und dunklen UI-Modi keine Inkonsistenzen gibt.

Dieser Ansatz erleichtert auch die Arbeit der Entwickler, da sie keine separaten Benutzeroberflächen mehr programmieren müssen.

Dunkel
Hell
Screenshot eines detaillierten Entwurfssystems für native Software, die von professionellen Nutzern verwendet wird.
Design-Elemente

UX AND UI DESIGN FOR PROFESSIONAL SOFTWARE

In Anbetracht der langen Geschichte dieser professionellen Software bestand das Hauptziel dieses Projekts darin, die Benutzeroberfläche neu zu gestalten und gleichzeitig die bewährten Funktionen beizubehalten.

Die größte Herausforderung bestand darin, die Komplexität des Systems zu bewältigen. Dies brachte Unsicherheit in das UX-Transformationsprojekt.

Wir führten zeitlich begrenzte Phasen ein, um einen Teil der Komplexität abzumildern. Während dieser Sitzungen untersuchten wir mögliche Lösungen für die wichtigsten UX-Herausforderungen. Innerhalb von zwei Monaten erreichten wir einen Punkt, an dem die Design- und Entwicklungs-Roadmap für das folgende Jahr vorhersehbar wurde.

In der letzten Phase stand die präzise und sorgfältige Arbeit an der Umsetzung der geplanten Benutzeroberfläche im Mittelpunkt. Dazu gehörte das Studium technischer Details und die Zusammenarbeit mit technischen Nutzern, um herauszufinden, welche ausdrucksstarken Komponenten in die flexible UI-Struktur passen könnten.