UX- und UI-Design für medizinische Geräte

UX UI Design für Chirurgen

Medizinische Geräte

User Experience

Interface Design

Cover einer UX-Design-Fallstudie, die Chirurgen im Operationssaal mit Lichtern an der Decke zeigt.
KUNDEdeSoutter Medical / Zethon
ORTAylesbury, UK
TEAMUX-Designer, UX-Forscher, UI-Designer, Interaktionsdesigner, Projektmanager, Produktmanager
Video summary
Greg will show you how the new user interface makes a difference to surgeons who use the ultrasonic cutter.
Video-Miniaturbild
Symbol für die Wiedergabetaste
2:32

Das Unternehmen hat ein innovatives medizinisches Gerät entwickelt, nämlich einen Ultraschallschneider. Sie standen kurz vor der Markteinführung und benötigten eine Benutzeroberfläche, um Benutzer zu unterstützen und die Compliance zu gewährleisten. Sie entschieden sich, unserer UX-Designagentur zu vertrauen, weil sie ein grösseres Ziel hatten: Sie wollten, dass das UI-Design ein Merkmal ihrer Marke ist, etwas, das Chirurgen als Markenzeichen in der Medizinbranche erkennen lernen.

Täglich arbeiteten wir mit einem kleinen Kundenteam zusammen, das aus einem Produktbesitzer und einem Ingenieur bestand. In diesem Format konnten wir Designs schnell iterieren und gewagte Ideen ausprobieren, um die gesuchte Innovation herauszukitzeln. Der aus mehreren weiteren Stakeholdern bestehende Lenkungsausschuss wurde alle zwei Wochen auf dem Laufenden gehalten.

UNSER BEITRAG

Informationsarchitektur

UX Flows

User Research

Akademische Literaturrezension

Technische Workshops

Wireframing

UX Design

Design für Prototyp

User Testing

Human Factors

UI Design

Design System

Medizinisches Gerät mit GUI-Design im Vordergrund, über einem dunklen Operationssaal im Hintergrund

THE OLD GUI DESIGN OF THE MEDICAL DEVICE

Ingenieure hatten eine Benutzeroberfläche für das medizinische Gerät entwickelt, doch die Chirurgen waren mit dem Design nicht zufrieden. Ärzte haben ganz besondere Bedürfnisse, wenn sie sich mitten in einer Operation befinden. Es reicht nicht aus, Elemente der Benutzeroberfläche einfach so anzuordnen, dass sie in einem medizinischen Gerät sinnvoll erscheinen.

Andere Stakeholder waren unzufrieden, weil dieses Design der Benutzeroberfläche nicht ansprechend ist. Es zeigt nicht die Leistung des medizinischen Geräts und fördert nicht den Verkauf.

Auch wenn das vom Entwickler erstellte UI-Design alles andere als brauchbar ist, war es für uns ein konstruktiver Ausgangspunkt, da es die wichtigsten Funktionen zeigte. Als Team einer externen UX-Designagentur konnten wir also direkt einsteigen.

Vorheriges Design
Benutzeroberfläche eines von Ingenieuren entwickelten medizinischen Geräts

SYSTEMATIZING THE NEEDS OF SURGEONS

Produktmanager hatten ein ausgeprägtes Gespür für die Bedürfnisse der Benutzer. Aber das User Experience Design für medizinische Geräte ist ein umfassender Entscheidungsprozess und die Intuition kann nicht viel vorgeben. Stattdessen bestimmt die Art und Weise, wie Sie Ihr Wissen organisieren, ob Sie dazu neigen, Designentscheidungen auf positive Ergebnisse im Designprozess auszurichten.

Wir haben drei Dinge getan, um fundierte UX-Designentscheidungen zu unterstützen. Zuerst systematisieren wir die verfügbaren Informationen. Dann finden wir heraus, was wir nicht wissen, und finden es dann heraus, zum Beispiel durch Nutzerforschung mit Ärzten. Drittens haben wir alle Informationen organisiert und verglichen, um die bevorstehenden Designentscheidungen vorzubereiten.

Discovery und Feature Kartierung
Tabelle mit 7 Spalten, die die Funktionen eines medizinischen Geräts für den UX- und UI-Designprozess zusammenfassen

DESIGNING AN INTUITIVE UX ARCHITECTURE

Sie möchten nicht, dass ein Chirurg an der Navigation eines medizinischen Geräts herumfummelt. Typischerweise besteht die Herausforderung beim UX-Design für Embedded GUIs darin, dass zu wenige UI-Komponenten in eine Ansicht passen, sodass die Navigation ziemlich tiefgreifend wird.

Wir haben acht Strukturen getestet, um zu sehen, wie sie das Benutzererlebnis beeinflussen. Wir haben untersucht, wie sich jede Option auf die Leistung von Ärzten auswirkt. Ziel war es, eine Informationsarchitektur zu finden, die dem medizinischen Gerät ein möglichst einfaches User Experience bietet.

Funktionen, Interaktionen und Inhalte werden der Struktur zugeordnet und zeigen, was Sie in jeder Ansicht der Benutzeroberfläche tun können und was nicht.

Information Architecture
Diagramm, das die Informationsarchitektur für die Benutzererfahrung eines medizinischen Geräts zeigt.

BENCHMARKING OF MEDICAL DEVICE INTERFACES

Um ein erstklassiges UI-Design zu erstellen, mussten wir als UI Designer den Status Quo in der Nische der medizinischen Geräte für die Chirurgie untersuchen.

Als spezialisierte UX-Designagentur für medizinische Geräte können wir teilweise auf unsere Bibliothek mit Dutzenden Arten von Benutzeroberflächen für medizinische Geräte zurückgreifen. Doch der Teufel steckt im Detail.

Anstatt bei generischen Perspektiven zu bleiben, haben wir tief gegraben und die Details untersucht, die einen Ultraschallschneider einzigartig machen – etwa die Fingerfertigkeit bei der Handhabung, die Art und Weise, wie die Aufmerksamkeit durch die Schnittstelle gelenkt wird, oder die Interaktionen, die für Chirurgen gut funktionieren.

Bei dieser sorgfältigen Designanalyse geht es sowohl darum, herauszufinden, was nicht funktioniert, als auch darum, die Muster zu entdecken, die bei Benutzern Vertrautheit schaffen.

UX Research
Beispiel für eine Benutzeroberfläche eines medizinischen Geräts

INTERACTIONS: GUI, PHYSICAL PRODUCT AND CONTEXT

Die Verwendung medizinischer Geräte ist eine sehr physikalische Angelegenheit, die das Design menschlicher Faktoren komplex macht.

Der Ultraschallschneider verfügt über physische Tasten für wichtige Funktionen und Schlitze zum Einsetzen von Kartuschen. Diese sind ein integraler Bestandteil des Benutzererlebnisses.

Die UX dieses medizinischen Geräts hat eine zusätzliche Besonderheit: Ärzte berühren das Display mit der nicht dominanten Hand (links). Das verändert alles.

Im evidenzbasierten Prozess des GUI-Designs mussten wir Folgendes berücksichtigen:

(1) Welche Interaktionsmuster kennen Ärzte von anderen Medizinprodukten?

(2) Wie wirkt sich die Verlagerung der Aufmerksamkeit vom Patienten auf die Benutzeroberfläche auf kognitive Ressourcen aus?

(3)Wie funktioniert die Feinmotorik unter diesen Bedingungen?

All diese Faktoren haben die Benutzeroberfläche im grossen und kleinen Masse beeinflusst. Sie bestimmten beispielsweise die Grösse von UI-Komponenten, ihre Positionierung und die Interaktionsmuster, aus denen sich die GUI zusammensetzt.

Merkmale Physische Konsole
Links ein Diagramm, das das physische Design eines medizinischen Geräts zeigt, und rechts ein Auszug aus einer Tabelle mit Anforderungen an das GUI-Design.
Links ein Diagramm, das das physische Design eines medizinischen Geräts zeigt, und rechts ein Auszug aus einer Tabelle mit Anforderungen an das GUI-Design.

THE ROLE OF HUMAN FACTORS RESEARCH

Studien aus der Kognitionswissenschaft haben unseren evidenzbasierten Designprozess beeinflusst.

Im täglichen Prozess der Zusammenarbeit mit Stakeholdern teilten wir den Produktmanagern jene Erkenntnisse mit, die dabei helfen, einen Überblick über die Vor- und Nachteile dieses oder jenes bestimmten Designdetails der Benutzeroberfläche zu gewinnen. Interessengruppen können diese Forschung verstehen, weil wir zeigen, wie ein Prinzip pragmatisch beim Design der GUI ihres medizinischen Geräts angewendet wird.

Die Erforschung menschlicher Faktoren hilft Produktteams, fundierte Designentscheidungen zu treffen, die die Sicherheit und Benutzerfreundlichkeit von Schnittstellen medizinischer Geräte verbessern. Es ist nicht die einzige Informationsquelle im evidenzbasierten Design, aber es verleiht dem Prozess sicherlich Robustheit, da es dabei hilft, andere Datenpunkte in ein kohärentes Ganzes zu integrieren.

Evidenz Basiertes Design
Auszüge aus der Designforschung zu menschlichen Faktoren, die als Grundlage für das UX-Design für medizinische Geräte dient.
Colle, H. A., & Hiszem, K. J. (2004). Standing at a kiosk: Effects of key size and spacing on touch screen numeric keypad performance and user preference. Ergonomics, 47(13), 1406-1423.
Auszüge aus der Designforschung zu menschlichen Faktoren, die als Grundlage für das UX-Design für medizinische Geräte dient.
Tao, D., Yuan, J., Liu, S., & Qu, X. (2018). Effects of button design characteristics on performance and perceptions of touchscreen use. International Journal of Industrial Ergonomics, 64, 59-68.
Diagramm der Ausrichtung von GUI-Komponenten auf dem Touch-Display

THE USER EXPERIENCE EVOLVES COLLABORATIVELY

Skizzen und Wireframes sind Ergebnisse, die wir zur Umsetzung von Ideen und zur Kommunikation von Designoptionen an Produktmanager, Benutzer und Ingenieure verwenden. Als sich das Design der Benutzeroberfläche weiterentwickelte, gingen wir von einfachen Skizzen zu immer ausgefeilteren Wireframes über.

in überraschender Aspekt dieser Entwicklung ist, wie wir zwischen verschiedenen Perspektiven der Benutzeroberfläche schwanken. Beispielsweise können wir in einem Sprint das Layout der Benutzeroberfläche als Ganzes überarbeiten, während wir in einem anderen Sprint möglicherweise Optionen für eine bestimmte Komponente untersuchen.

Nach und nach stabilisiert sich das User Experience des Medizinprodukts, sodass sowohl das Ganze als auch die kleinsten Details ihre ideale Form finden.

Prototype & Produkt Denken
Wireframe-Prototyping der Benutzererfahrung eines medizinischen Geräts

METICULOUS UI DESIGN MAKES IMPLEMENTATION EASY

ie visuelle Gestaltung der Benutzeroberfläche mit Ästhetik und Markenidentität bildet die letzte Phase. Das visuelle UI-Design verändert die Struktur der Benutzeroberfläche nicht, verleiht dem medizinischen Gerät jedoch Charakter.

Bei diesem Ultraschallschneider spielt das UI-Design zwei Schlüsselrollen.

Erstens verbessert es die Benutzerfreundlichkeit, indem es die Aufmerksamkeit der Chirurgen lenkt, wenn sie einen Blick auf die Benutzeroberfläche werfen. Zweitens fügt es die emotionale Ebene hinzu, die bei Verkaufspräsentationen des Medizinprodukts eine ansprechende Wirkung hat.

ngenieure implementieren dieses endgültige UI-Design. Deshalb bereiten wir als Designer die Ressourcen für sie vor, um ihren Aufwand zu minimieren.

UI Design
GUI-Design des Hauptbildschirms eines medizinischen Geräts mit Schaltflächen.
UI-Design-Ergebnis einer UX-Agentur, die für einen Medizintechnik-Kunden arbeitet.
Beispiel für ein GUI-Design einer UX- und UI-Designagentur
UX UI Design Deliverables von einer medizinischen UX-Agentur
Schwarzer Klecks, der sich spiralförmig bewegt.
Quotes
Diese Schnittstelle würde mir die Arbeit erleichtern. Ich müsste mir darüber überhaupt keine Sorgen machen. Es ist alles klar und unkompliziert, wie bei meinem Tesla.
UX research user
Tom Frilling, MSc MBBS FRCS(Tr&Orth)
Hüft- und Knietrauma- und orthopädischer Chirurg
GUI-Design für den Einstellungsbildschirm eines medizinischen Geräts
UI-Design für einen Setup-Bildschirm für ein medizinisches Gerät mit UI-Komponenten
Probier es
Spiel mit den Buttons
HDS-121
connected
running
RUNNING
Pump
Paired
Unpaired
Speed (RPM)8,500

THE HIGHLY DETAILED DESIGN SYSTEM

Das Designsystem, das wir den Ingenieuren zur Verfügung gestellt haben, ist sehr detailliert und lässt keinen Interpretationsspielraum zu. Das Designsystem berücksichtigt akribisch Zustände, Verhaltensweisen und Beziehungen zwischen allen UI-Designkomponenten, die das Benutzererlebnis ausmachen. Ingenieure sind hochproduktiv, wenn sie mit dieser Unterstützung programmieren.

Das Designsystem stellt aber auch Assets und die Logik bereit, die diese GUI-Sprache für den Einsatz in anderen Produkten im Portfolio des Medizingeräteherstellers bereit machen.

Auszug mit Symbolen und Schaltflächen aus dem Designsystem eines Ultraschallschneiders.
Auszug mit Symbolen und Schaltflächen aus dem Designsystem eines Ultraschallschneiders.
Cover einer UX-Design-Fallstudie, die Chirurgen im Operationssaal mit Lichtern an der Decke zeigt.
Cover einer UX-Design-Fallstudie, die Chirurgen im Operationssaal mit Lichtern an der Decke zeigt.
Design-Elemente

UX AND UI DESIGN FOR MEDICAL DEVICES

Schauen Sie sich das GUI-Design dieses medizinischen Geräts an: Es positioniert es sofort als Branchenführer. Aber das ist nur die Spitze des Eisbergs.

Wenn Chirurgen das medizinische Gerät ausprobieren, fühlen sie sich schnell mit der Benutzererfahrung wohl: Es ist, als ob alle wichtigen Feinheiten kennt die für Chirurgen wichtig sind.

Dieses Mass an Benutzererfahrung ist kein Zufall. Es ist das Ergebnis eines sorgfältigen Prozesses, der eine Fülle von Informationen in den Design-Entscheidungsprozess integriert. Der Prozess wird von erfahrenen Designern mit beträchtlicher Erfahrung mit eingebetteten GUIs und medizinischen Geräten geleitet, sodass Produktmanager und andere Interessengruppen sehen können, welche Optionen für die Benutzeroberfläche mit ihren Vor- und Nachteilen bestehen.

Das richtige GUI-Design ist keine subjektive Vermutung. Es ergibt sich als offensichtliche und rationale Wahl aus der Schnittstelle zwischen Benutzerbedürfnissen, Technologie und Geschäftsstrategie.

ERGEBNISSE

Erster klickbarer Prototyp innerhalb von 3 Wochen geliefert

Einhaltung von ISO 62366 und IEC 62366-1

Branchendefinierendes GUI-Design

Vollständiges Designsystem zur Verwendung im gesamten Produktportfolio

Reibungslose Übergabe und Unterstützung des Engineering-Teams