Diseño de experiencia de usuario para técnicos audiovisuales

Nuevos estándares de interfaz gráfica para la electrónica profesional

Electrónica

Diseño de productos

Diseño GUI

Detalle del diseño de la interfaz gráfica de usuario en la pantalla de un dispositivo electrónico
CLIENTMSolutions
LOCATIONIsrael
EQUIPOUX designer, UI designer, interaction designer, project manager, product owner, software architect
WEBSITE

MSolutions ha creado un dispositivo innovador que utilizan los ingenieros audiovisuales para comprobar el rendimiento de instalaciones complejas. A pesar de la amplia gama de funciones que ofrece el dispositivo, la mayor parte quedaba sin utilizar debido a una experiencia de usuario deficiente. La empresa había intentado mejorar la usabilidad varias veces, incluso trabajando con otros diseñadores, pero había fracasado.

La empresa contrató a nuestra agencia de diseño UX para que les ayudara a redefinir la usabilidad del dispositivo y a remodelar la interfaz gráfica de usuario en un diseño que demostrara el rendimiento de la ingeniería.

NUESTRAS CONTRIBUCIONES

UX Design

Flujo UX

Creación de prototipos

Diseño conceptual

Diseño de productos

Diseño de interacción

UI Design - Design System

Garantía de calidad

Primer plano de un técnico manipulando el panel de control de audio y vídeo

UNA PANTALLA TÁCTIL QUE DIFICULTA LA USABILIDAD

Los técnicos diagnostican problemas y optimizan el funcionamiento de los equipos audiovisuales. El dispositivo puede medir instalaciones complejas con múltiples monitores, pantallas y fuentes de señal.

Sin embargo, el dispositivo también viene con las limitaciones de hardware de una pantalla que con una interactividad táctil limitada y un tamaño de pantalla diminuto de sólo 480x320 píxeles.

Primer plano de un dispositivo de prueba de audio y vídeo sobre fondo oscuro.
Equipo de pruebas electrónicas sobre fondo oscuro

UN PROCESO METICULOSO Y PREDECIBLE

Para cumplir la promesa de una experiencia de usuario que cambie las reglas del juego, llevamos a cabo un proceso sistemático de diseño del producto. Empezamos con la recopilación de requisitos y organizamos las opiniones de todas las partes interesadas.

Evaluamos los datos existentes sobre los usuarios y luego creamos conjuntos de prioridades, agrupando los objetivos en lanzamientos. Este plan de juego detallado y meticuloso fue la condición previa para una fase de diseño de la experiencia de usuario centrada.

Tabla con los requisitos de diseño de la experiencia del usuario asignados a las fases del proyecto.

POR QUÉ FALLARON SUS INTENTOS ANTERIORES DE DISEÑO

La pantalla tiene sus limitaciones técnicas, pero los anteriores intentos de la empresa de realizar un diseño de interfaz gráfica intuitivo fracasaron por otros motivos. Realizamos una detallada auditoría de usabilidad y trazamos un conjunto de resultados deseados para cada pantalla.

El motivo principal del fracaso anterior fue que el diseño inicial de la interfaz gráfica de usuario fue creado por ingenieros que diseñaron la funcionalidad tal y como era en el backend, no como los usuarios esperaban que funcionara. En su segundo intento de mejorar la usabilidad del dispositivo, el diseñador se limitó a mejorar la interfaz de usuario. Esto estaba condenado al fracaso, porque un diseño de interfaz de usuario nunca puede ser estético, cuando el pensamiento UX subyacente es defectuoso.

Diseño por desarrolladores
Cinco diseños de GUI para equipos de pruebas electrónicas.
Diseño del diseñador anterior
Mejora del diseño de la interfaz gráfica de usuario con fallos en la experiencia del usuario.
Extractos de la auditoría de diseño
Detalle del informe de auditoría de usabilidad de un dispositivo electrónico con 8 conclusiones

EL CONCEPTO DE NUEVA EXPERIENCIA DE USUARIO

El pensamiento de diseño se guió por las necesidades del usuario y por lo que representa un flujo lógico para los técnicos en su práctica diaria. Como resultado, los usuarios no tienen que pensar mucho, porque en cada paso la atención se centra en la siguiente cosa lógica que un técnico puede querer hacer.

A nivel de pantalla, la orientación se traduce en una jerarquía visual clara para que la lógica general del flujo continúe en el micronivel. El nuevo diseño de la experiencia de usuario es un reflejo de las prioridades de los usuarios, no del backend.

Cinco wireframes para la interfaz gráfica de usuario de un equipo de pruebas electrónicas
Ejemplos de wireframes

PRUEBAS E ITERACIONES MEJORAN LA UX

La nueva experiencia de usuario era muy diferente del paradigma de usabilidad anterior. A pesar de que surgió de un meticuloso proceso de documentación de las necesidades de los usuarios, era fundamental obtener al menos un nivel básico de validación por parte de los usuarios. En total, las pruebas con los usuarios y los ajustes del diseño sólo llevaron dos días.

Creamos prototipos y organizamos varias sesiones de pruebas con usuarios. Los usuarios pudieron aportar abundantes comentarios. No supuso un cambio en la lógica fundamental de la experiencia de usuario, pero sí impulsó pequeños cambios que, en última instancia, llevarían la interfaz de usuario a un nivel superior de calidad.

Hombre interactuando con la nueva experiencia de usuario en una sesión de pruebas de usuario

LA GUI VISUAL ILUSTRA EL RENDIMIENTO

El diseño visual de la interfaz gráfica de usuario fue una oportunidad para dar vida al pensamiento inteligente tanto de los ingenieros como de los diseñadores de UX. Es minimalista con un toque sobrio, pero combinado con el acabado superior del dispositivo físico, sí parece una herramienta de alto rendimiento para profesionales.

Más allá del aspecto de marca y del objetivo de inspirar confianza, el diseño de la interfaz gráfica de usuario también cumple desde el punto de vista de la accesibilidad y ofrece todos los estados necesarios para facilitar el desarrollo.

Diseño de GUI para 9 pantallas que muestran detalles de la interfaz de usuario de equipos electrónicos profesionales
Diseño GUI responsivo en maqueta de portátil sobre fondo oscuro
Elementos del diseño

COMPLETE RESPONSIVE GUI DESIGN IN 6 WEEKS

La entrega del proyecto duró 6 semanas en total, desde el inicio de la auditoría inicial de usabilidad hasta la entrega del diseño de la interfaz gráfica de usuario al equipo de ingeniería. El resultado final es una interfaz de usuario en la que los técnicos solo tienen que hacer la mitad de trabajo para obtener los resultados que necesitan.

El proceso de interacción racionalizado creó oportunidades para simplificar la pila de código. El diseño de la interfaz gráfica de usuario es adaptativo, de modo que los técnicos pueden controlar el dispositivo desde un ordenador portátil o un teléfono móvil, in situ o a distancia. Esto abre un mundo de posibilidades.

El resultado final para la empresa es un producto en el que la calidad de la ingeniería queda patente por el aspecto y el tacto del dispositivo. Además, los técnicos necesitan menos formación, por lo que los grandes clientes pueden implantar la solución más fácilmente.

RESULTADOS

Diseño integral en 6 semanas

Documentación completa para desarrolladores

Diseño totalmente adaptable

La interfaz gráfica de usuario se ha convertido en una referencia en el sector