<img height="1" width="1" style="display:none" alt="" src="https://px.ads.linkedin.com/collect/?pid=1603620&fmt=gif"/>
Diseño de UX y UI para dispositivos médicos

El cortador sónico más fácil de usar

Productos sanitarios

Experiencia del usuario

Interface Design

Portada de un caso práctico de diseño UX que muestra a cirujanos en el quirófano con luces por encima.
CLIENTdeSoutter Medical / Zethon
LOCATIONAylesbury, UK
EQUIPODiseñador de UX, investigador de UX, diseñador de UI, diseñador de interacción, gestor de proyectos, gestor de productos
Video summary
Greg will show you how the new user interface makes a difference to surgeons who use the ultrasonic cutter.
Imagen en miniatura del vídeo
Icono del botón de reproducción
2:32

La empresa de dispositivos médicos desarrolló un innovador cortador ultrasónico. Estaban a punto de lanzarlo al mercado y necesitaban una interfaz de usuario que sirviera de apoyo a los usuarios y cumpliera las normativas. Decidieron confiar en nuestra agencia de diseño UX porque tenían una ambición mayor: querían que el diseño de la interfaz de usuario fuera el buque insignia de su marca, algo que los cirujanos aprendieran a reconocer como un sello distintivo en el sector médico.

En el día a día trabajamos con un pequeño equipo formado por un propietario de producto y un ingeniero. Así podíamos iterar rápidamente los diseños y probar ideas atrevidas para dar con la innovación que buscaban. El comité de dirección, formado por otras partes interesadas, recibía información cada dos semanas.

NUESTRAS CONTRIBUCIONES

Arquitectura de la información

Flujos UX

Investigación de usuarios

Revisión de la literatura académica

Talleres técnicos

Wireframing

UX Design

Prototipos interactivos

Pruebas de usuario

Human Factors

UI Design

Design System

Dispositivo médico con diseño GUI en primer plano colocado sobre un quirófano oscuro en segundo plano.

THE OLD GUI DESIGN OF THE MEDICAL DEVICE

Los ingenieros habían creado una interfaz de usuario para el dispositivo médico, pero los cirujanos no estaban contentos con el diseño. Los médicos tienen necesidades muy específicas cuando están en medio de una operación. No basta con disponer los elementos de la interfaz de usuario de forma que parezcan tener sentido en un dispositivo médico.

Otras partes interesadas estaban descontentas porque este diseño de interfaz de usuario no es atractivo. No muestra las prestaciones del producto sanitario y no ayuda a venderlo.

Aunque el diseño de interfaz de usuario realizado por el desarrollador está lejos de ser utilizable, fue un punto de partida constructivo para nosotros, porque mostraba las funciones clave. Así que, como agencia de diseño UX externa, pudimos ponernos manos a la obra.

Diseño Anterior
Interfaz de usuario de un dispositivo médico desarrollado por ingenieros

SYSTEMATIZING THE NEEDS OF SURGEONS

Los jefes de producto tenían una gran intuición sobre las necesidades de los usuarios. Pero el diseño de la experiencia del usuario en dispositivos médicos es todo un proceso de toma de decisiones y la intuición no puede dictar mucho. En cambio, la forma de organizar el conocimiento determina si se tiende a sesgar las decisiones de diseño hacia resultados positivos en el proceso de diseño.

Hicimos tres cosas para respaldar unas decisiones de diseño UX acertadas. Primero pusimos sistema a la información disponible. Luego averiguamos lo que no sabíamos y nos pusimos a averiguarlo, por ejemplo mediante una investigación de usuarios con médicos. En tercer lugar, integramos todas las fuentes de información, troceándolas para preparar las próximas decisiones de diseño.

Descubrimiento y mapeo de funciones
Tabla con 7 columnas que resumen las características de un producto sanitario para el proceso de diseño de UX y UI

DESIGNING AN INTUITIVE UX ARCHITECTURE

No querrías que un cirujano jugara con la navegación de un dispositivo médico. Normalmente, el reto del diseño de interfaces gráficas de usuario integradas es que hay muy pocos componentes que quepan en una sola vista, por lo que la navegación es bastante profunda.

Probamos ocho estructuras para ver cómo influían en la experiencia del usuario. Examinamos cómo afectaba cada opción al rendimiento de los médicos. El objetivo era encontrar una arquitectura de la información que ofreciera la experiencia de usuario más sencilla para el dispositivo médico.

Las funciones, interacciones y contenidos se asignan a la estructura, sugiriendo lo que se puede y no se puede hacer en cada vista de la interfaz de usuario.

Arquitectura de la información
Diagrama que muestra la arquitectura de la información para la experiencia del usuario de un producto sanitario.

BENCHMARKING OF MEDICAL DEVICE INTERFACES

Para crear el mejor diseño de interfaz de usuario, los diseñadores tuvimos que estudiar meticulosamente el statu quo del sector de los dispositivos médicos para cirugía.

Como agencia de diseño UX especializada en dispositivos médicos, podemos confiar parcialmente en nuestra biblioteca de docenas de tipos de interfaces de usuario de dispositivos médicos. Pero el diablo está en los detalles.

En lugar de ceñirnos a perspectivas genéricas, profundizamos y escudriñamos los detalles que hacen único a un cortador ultrasónico, como la destreza en el manejo, cómo se dirige la atención a través de la interfaz o las interacciones que funcionan bien para los cirujanos.

Este meticuloso análisis del diseño consiste tanto en averiguar lo que no funciona como en descubrir aquellos patrones que crean familiaridad con los usuarios.

Investigación UX
Ejemplo de interfaz de usuario de un dispositivo médico

INTERACTIONS: GUI, PHYSICAL PRODUCT AND CONTEXT

El uso de un dispositivo médico es un asunto muy físico que hace complejo el diseño de los factores humanos.

La cortadora ultrasónica dispone de botones físicos para funciones clave y ranuras para insertar cartuchos. Forman parte integral de la experiencia del usuario.

La experiencia de usuario de este dispositivo médico tiene una particularidad: los médicos tocan la pantalla con la mano no dominante (la izquierda). Eso lo cambia todo.

Así que en el proceso de diseño de interfaces gráficas de usuario basado en pruebas tuvimos que tener en cuenta:

(1) ¿Qué patrones de interacción conocen los médicos de otros dispositivos médicos?

(2) ¿Cómo afecta a los recursos cognitivos cambiar la atención del paciente a la interfaz de usuario?

(3)¿Cómo funciona la motricidad fina en estas condiciones?

Todos estos factores han influido en la interfaz de usuario, tanto a lo grande como a lo pequeño. Por ejemplo, han determinado el tamaño de los componentes de la interfaz de usuario, su posicionamiento y los patrones de interacción que la componen.

Características de la consola física
Diagrama que muestra el diseño físico de un dispositivo médico, a la izquierda, y un extracto de una tabla con los requisitos de diseño de la interfaz gráfica de usuario, a la derecha.
Diagrama que muestra el diseño físico de un dispositivo médico, a la izquierda, y un extracto de una tabla con los requisitos de diseño de la interfaz gráfica de usuario, a la derecha.

THE ROLE OF HUMAN FACTORS RESEARCH

Los estudios de la ciencia cognitiva informaron nuestro proceso de diseño basado en pruebas.

En el proceso cotidiano de colaboración con las partes interesadas, compartimos con los jefes de producto aquellas ideas que ayudan a dar perspectiva sobre los pros y los contras de este o aquel detalle concreto del diseño de la interfaz de usuario. Las partes interesadas pueden dar sentido a esta investigación porque demostramos cómo un principio se aplica de forma pragmática en el diseño de la interfaz gráfica de su dispositivo médico.

La investigación de los factores humanos ayuda a los equipos de producto a tomar decisiones de diseño acertadas que mejoran la seguridad y la usabilidad de las interfaces de los productos sanitarios. No es la única fuente de información en el diseño basado en pruebas, pero sin duda aporta solidez al proceso porque ayuda a integrar otros puntos de datos en un todo coherente.

Diseño basado en la evidencia
Extractos de la investigación sobre el diseño de factores humanos que informa el diseño de ux para dispositivos médicos.
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.
Extractos de la investigación sobre el diseño de factores humanos que informa el diseño de ux para dispositivos médicos.
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.
Diagrama de alineación de los componentes de la interfaz gráfica de usuario en la pantalla táctil

THE USER EXPERIENCE EVOLVES COLLABORATIVELY

Los bocetos y wireframes son entregables que utilizamos para exponer ideas y comunicar opciones de diseño a los propietarios del producto, los usuarios y los ingenieros. A medida que evolucionaba el diseño de la interfaz de usuario, pasamos de simples bocetos a wireframes cada vez más sofisticados.

Un aspecto sorprendente de esta evolución es cómo oscilamos entre distintas perspectivas de la interfaz de usuario. Por ejemplo, en un sprint podemos revisar el diseño de la interfaz en su conjunto, mientras que en otro investigamos opciones para un componente concreto.

Poco a poco, la experiencia del usuario del dispositivo médico se estabiliza, lo que significa que tanto el conjunto como los detalles más pequeños encuentran su forma ideal.

Prototipo & Pensamiento de producto
Creación de prototipos alámbricos de la experiencia de usuario de un dispositivo médico

METICULOUS UI DESIGN MAKES IMPLEMENTATION EASY

El diseño visual de la interfaz de usuario, con la estética y la identidad de marca, constituye la fase final. El diseño visual de la interfaz de usuario no cambia la estructura de la interfaz, pero añade carácter al dispositivo médico.

En esta cortadora ultrasónica, el diseño de la interfaz de usuario desempeña dos papeles fundamentales.

En primer lugar, mejora la usabilidad al dirigir la atención de los cirujanos cuando echan un vistazo a la interfaz. En segundo lugar, añade la capa emocional que tiene un efecto atractivo en las presentaciones de venta del dispositivo médico.

Los ingenieros implementan este diseño final de la interfaz de usuario. Por eso, como diseñadores, les preparamos los activos para minimizar su esfuerzo.

UI Design
Diseño GUI de la pantalla principal de un dispositivo médico con botones.
Diseño de interfaz de usuario para un cliente del sector de la tecnología médica.
Ejemplo de diseño GUI de una agencia de diseño UX y UI
Diseño de interfaz de usuario de una agencia de UX médica
Mancha negra en espiral.
Quotes
Esta interfaz me facilitaría el trabajo. No tendría que preocuparme en absoluto. Todo es claro y directo, como mi Tesla.
UX research user
Tom Frilling, MSc MBBS FRCS(Tr&Orth)
Traumatólogo y cirujano ortopédico de cadera y rodilla
Diseño de la interfaz gráfica de usuario para la pantalla de ajustes de un dispositivo médico
Diseño de interfaz de usuario para una pantalla de configuración de un dispositivo médico con componentes de interfaz de usuario
Sentir
Prueba los botones
HDS-121
connected
running
RUNNING
Pump
Paired
Unpaired
Speed (RPM)8,500

THE HIGHLY DETAILED DESIGN SYSTEM

El sistema de diseño que proporcionamos a los ingenieros es muy detallado, no deja nada a la interpretación. El sistema de diseño tiene en cuenta meticulosamente los estados, comportamientos y relaciones entre todos los componentes de diseño de interfaz de usuario que conforman la experiencia del usuario. Los ingenieros son muy productivos cuando programan con este apoyo.

Pero el sistema de diseño también proporciona los activos y la lógica que hacen que este lenguaje GUI esté listo para ser utilizado en otros productos de la cartera del fabricante de dispositivos médicos.

Extracto que muestra iconos y botones del sistema de diseño de una cortadora ultrasónica.
Extracto que muestra iconos y botones del sistema de diseño de una cortadora ultrasónica.
Portada de un caso práctico de diseño UX que muestra a cirujanos en el quirófano con luces por encima.
Portada de un caso práctico de diseño UX que muestra a cirujanos en el quirófano con luces por encima.
Elementos del diseño

UX AND UI DESIGN FOR MEDICAL DEVICES

Fíjese en el diseño de la interfaz gráfica de este dispositivo médico: lo sitúa inmediatamente como líder del sector. Pero eso es solo la punta del iceberg.

Cuando los cirujanos prueban el dispositivo médico, rápidamente se sienten cómodos con la experiencia de uso: es como si anticipara los matices que son importantes para ellos y se comporta de una manera tranquilizadora.

Este nivel de experiencia de usuario no ocurre por casualidad. es el resultado de un proceso meticuloso que integra una gran cantidad de información en el proceso de toma de decisiones de diseño. El proceso está dirigido por diseñadores expertos con considerable experiencia en GUI integradas y dispositivos médicos, de modo que los gerentes de producto y otras partes interesadas puedan ver qué opciones existen para la interfaz de usuario, con sus ventajas y desventajas.

El diseño de GUI correcto no es una suposición subjetiva. Surge como la elección obvia y racional de la intersección entre las necesidades del usuario, la tecnología y la estrategia empresarial.

RESULTADOS

Primer prototipo en el que se puede hacer clic entregado en 3 semanas

Cumplimiento de ISO 62366 e IEC 62366-1

Diseño de GUI que define la industria

Sistema de diseño completo que se utilizará en todo el portafolio

Entrega y soporte perfectos para el equipo de ingeniería.