Von Null zum testbaren HMI

Blueprint für die realistische Produk­tentwicklung

Person bedient mit der Hand eine Laborwaage in einem Laborumfeld.

Welche Schritte braucht es, um ein Produkt von der ersten Idee bis zum Prototyp umzusetzen? Wir haben einen kompletten HMI-Entwicklungs­prozess mit Research, UX, UI und Produktdesign durchlaufen, um einen Blueprint für die realistische Produkt­entwicklung zu erstellen.

  • 10

    UX-Tests durchgeführt

  • 20

    Varianten entwickelt

  • 1

    einheitliche Designsprache

  • 10

    UX-Tests durchgeführt

  • 20

    Varianten entwickelt

  • 1

    einheitliche Designsprache

Das Bild zeigt eine Laborwaage mit einem Interface, das den aktuellen Wert der gemessenen Substanzen anzeigt.

Ausgangspunkt Laborwaage

Als Produktbeispiel dient eine Präzisions-Laborwaage im medizinischen Umfeld. Die Grundfunktion einer Waage ist wahrscheinlich allen bekannt. Der Einsatz in einem Laborumfeld stellt aber durch benötigte Präzision und den Funktionsumfang hohe Anforderungen an das HMI.


Wir haben den Ablauf end-to-end abgebildet. Das bedeutet von Personae und User Journeys über die Analyse von Informationsarchitektur und Bedienlogik bis zu Hardware-Varianten, Click-Dummy und Tests am physischen Prototyp. So entsteht ein beispielhafter Projektverlauf und gleichzeitig ein klares Learning, ab wann fachliche Expertise und der Kontakt zu Nutzer:innen unverzichtbar werden.

Kollaborative Tools ermöglichten asynchrones und gleichzeitiges Arbeiten an dem Projekt, auch über unterschiedliche Standorte hinweg.
Kollaborative Tools ermöglichten asynchrones und gleichzeitiges Arbeiten an dem Projekt, auch über unterschiedliche Standorte hinweg.

Vom Ist zum Soll

Um einen realistischen Entwicklungsprozess zu zeigen, müssen Grundlagen geklärt werden: Wer bedient eine Laborwaage und in welchen Situationen? Was muss dabei schnell, sicher und verständlich funktionieren?
Anhand von Personas und ihren „jobs-to-be-done“ haben wir User Journeys abgeleitet, die den Arbeitsablauf abbilden. Darauf aufbauend haben wir das HMI einer bestehende Laborwaage strukturell und entlang der Informationsarchitektur analysiert und daraus einen klaren Soll-Zustand formuliert: weniger Ebenen, logischere Gruppen und häufig genutzte Aktionen, die sich dort befinden, wo die Nutzer:innen sie erwarten.

Das Bild zeigt Skizzen der ersten Entwürfe für die Laborwaage in verschiedenen Stadien des Designprozesses.
Das Bild zeigt eine Variante einer neuen Laborwaage, die im Designprozess entstanden ist.
Das Bild zeigt eine weitere Variante einer Laborwaage, die im Designprozess entstanden ist.

Hardware, die Interaktion mitdenkt

Da bei HMIs die digitale Bedienlogik und physische Interaktion unmittelbar aufeinander treffen, haben wir parallel zum Interface auch die Hardware weiterentwickelt. In der Ideation-Phase haben wir unterschiedliche Konstruktionsweisen, Displayanordnungen und Details skizziert und die zentralen Aspekte rund um Grundvolumen, Lichtführung und Bedienelemente herausgearbeitet. Daraus entstanden zwei Vorzugsrichtungen: eine Keilform mit hinterlegtem Display, großen Radien und flachen Bedienelementen sowie ein technisch präziser Ansatz mit „schwebendem Kubus“, betonten Sensoren und innerem LED-Akzent. Am Ende haben wir uns für den ersten Entwurf entschieden, da die einfacheren, großflächigen Volumen hygienischer und einfacher zu reinigen sind.

Fokus auf den Messprozess

Auf Basis des Soll-Konzepts aus der Research-Phase haben wir das Interface zunächst in Wireframes strukturiert und als Click-Dummy erlebbar gemacht. Anschließend entwickelten wir verschiedene Designrichtungen, um zu definieren, wie viel Information in welcher Situation sichtbar sein sollte und wie der Messprozess konsequent im Mittelpunkt bleibt.

Das UI wurde dabei als geführter Arbeitsablauf gedacht: Ein geladenes „Rezept“ begleitet Nutzer:innen durch den Wiegeprozess und kombiniert Messwerte, Anweisungen und relevante Umgebungsinformationen, ohne den Screen zu überladen. Eine klare Farbführung unterstützt die schnelle Orientierung, sodass bereits im Augenwinkel erkennbar ist, ob sich der Messwert im Zielbereich befindet.
Die Varianten dienten als Grundlage für fundierte Designentscheidungen und bereiteten den anschließenden Test vor.

Das Bild zeigt einen Prototypen der Waage bei einem Wiegeprozess. Es ist bereits ein Interface zu erkennen, das den gemessenen Wert anzeigt.
Das Bild zeigt den Prototyp der Waage mit einem Interface im Dark-Mode.
Das Bild zeigt einen Prototypen mit einem Interface im Light-Mode.

Prototyp statt Theorie

Bevor wir ins finale UI gegangen sind, haben wir den typischen Nutzer:innenverlauf an einem physischen Prototypen getestet. Ganz nach dem Credo: testen, verstehen, verbessern. Dabei haben wir gezielt Bedingungen überprüft, die in Laborumgebungen den Unterschied machen: Light- und Darkmode, unterschiedliche Lichtverhältnisse und Schriftgrößen. Die Ergebnisse sind in die Ausarbeitung eingeflossen und haben geholfen, die Lesbarkeit, Bedienbarkeit und Entscheidungssicherheit zu stärken.

Das Bild zeigt die designte Laborwaage mit dem Interface.
Das Bild zeigt die App für das Smartphone, wobei ein geräteübergreifender Ansatz verfolgt wird. In der App können Rezepte geöffnet werden und die genauen Werte eingesehen werden, die für die Abmessungen mit der Laborwaage notwendig sind.

HMI endet nicht am Produkt-Display

Zum Abschluss haben wir das Konzept über das Gerät hinaus gedacht. Ein Multi-Device-Ansatz ermöglicht es Arbeitsschritte dort zu unterstützen, wo sie im Alltag gebraucht werden – zum Beispiel durch das Abrufen von Daten oder das Laden eines Rezepts am Smartphone. In einem exemplarischen Szenario wird so aus dem einzelnen Wiegevorgang ein durchgängiger Workflow: Rezept öffnen, Zielmasse festlegen und präzise abwiegen.

Meret Oppermann UX/UI Designer

  • 10

    UX-Tests durchgeführt

  • 20

    Varianten entwickelt

  • 1

    einheitliche Designsprache

Cases

Projektidee? Schreiben Sie uns!