AYUDAR A LA IA A VER CON CLARIDAD: UN ESTUDIO DE CASO DE DISEÑO DE PANEL

La inteligencia artificial (IA) está trabajando duro en muchas industrias hoy en día. Ayuda a los minoristas a administrar el inventario y predecir la demanda, facilita que los médicos identifiquen el cáncer en las exploraciones pulmonares y permite que los automóviles se conduzcan solos.

Pero la automatización impulsada por IA continúa evolucionando y aún requiere la intervención humana. En este estudio de caso de diseño de tablero, detallo cómo desarrollé interfaces de usuario que ayudan a los operadores humanos a mejorar los procesos de reconocimiento de IA.

EL CLIENTE

El cliente era una startup de EE. UU. que ayuda a sus clientes a resolver errores de reconocimiento de imágenes de IA para múltiples industrias en tiempo real. Las soluciones que proporciona mejoran los sistemas automatizados que permiten el mapeo del terreno, la clasificación de plantas, la identificación de productos minoristas, el escaneo de códigos de barras y más.

Los sistemas de reconocimiento de imágenes de IA están capacitados para reconocer e interpretar entradas visuales y tomar decisiones basadas en lo que “ven”. Pero a veces estos sistemas encuentran excepciones: imágenes que no pueden procesar porque el objeto tiene una apariencia inesperada. Una excepción puede hacer que un sistema de IA no identifique información crucial o identifique erróneamente lo que ve. Por ejemplo, es posible que un escáner de productos de supermercado no reconozca un cartón de jugo de naranja porque el contenedor ha cambiado o un robot agrícola autónomo puede confundirse con un obstáculo. Problemas como estos pueden causar retrasos o interrupciones en las operaciones de una empresa.

Para resolver estos problemas, el software del cliente se integra con los sistemas de inteligencia artificial de sus clientes, lo que permite a los operadores humanos revisar y resolver problemas de reconocimiento en tiempo real. Pero los operadores hacen más que resolver excepciones: también enseñan a los sistemas de IA qué hacer la próxima vez que se encuentren con algo similar. Esto da como resultado sistemas de IA que están mejor equipados para identificar una gama más amplia de imágenes.

LA BREVE

En el transcurso de dos meses, trabajé con el cliente para entregar diseños para un panel de operador y un panel de control para el cliente. También preparé una biblioteca de componentes y una guía de estilo que acompañaba a estos entregables.

Mi enfoque sigue el proceso de pensamiento de diseño, que implica investigación, intercambio de ideas, creación de prototipos de baja fidelidad, creación de prototipos de alta fidelidad y pruebas de usuario. Siempre adapto este proceso en función de la disponibilidad de tiempo, capital y personas.

Durante el proyecto, trabajé de cerca con el equipo fundador y el desarrollador front-end del cliente, compartiendo actualizaciones diarias que ayudaron a todos a mantenerse informados sobre mi progreso. También colaboré con dos operadores que me proporcionaron información valiosa sobre su trabajo diario.

MEJORA DEL PANEL DEL OPERADOR

En el corazón del producto del cliente se encuentra el panel del operador, la interfaz que utilizan sus especialistas en IA para resolver problemas de reconocimiento de imágenes. Cuando un sistema de IA tiene problemas para identificar una imagen, esa imagen se envía al tablero del operador. El operador etiqueta manualmente la imagen marcando cada objeto y clasificándolo según etiquetas predeterminadas, como “humano”, “árbol” u “obstáculo grande”.

Un concepto inicial del tablero del operador proporcionado por el cliente

Cuando entrevisté a los operadores del cliente, me mostraron el estado actual del software que estaban usando y me permitieron observarlos hacer su trabajo. A partir de esta investigación inicial, recopilé ideas, puntos débiles y oportunidades de mejora que informarían mis diseños.

Descubrí que faltaba una funcionalidad importante y que ciertas tareas eran innecesariamente complicadas, lo que dificultaba el uso de la interfaz. Por ejemplo, para etiquetar una imagen, el operador necesitaba ir y venir entre la barra de herramientas y la imagen cada vez para seleccionar, etiquetar, revisar y enviar. Del mismo modo, también faltaba la capacidad de deshacer o rehacer una acción, lo que significaba que los operadores tenían que repetir tareas o tomar medidas adicionales cuando cometían un error.

Otra preocupación era que la interfaz no tenía una apariencia unificada, ya que se basaba principalmente en una combinación de componentes listos para usar. Estas inconsistencias hicieron que ciertos elementos y funciones fueran difíciles de encontrar o usar.

Con estas oportunidades de mejora en mente, hice una lluvia de ideas sobre los conceptos iniciales y creé esquemas, que compartí con los dos operadores. Todos los días, en el transcurso de una semana, presenté wireframes a los operadores y discutí sus impresiones iniciales a través de sesiones de comentarios virtuales. Las sesiones fueron muy colaborativas y me ayudaron a recopilar ideas para refinar el tablero.

Un punto interesante que surgió durante la sesión de retroalimentación fue la cantidad de información que se muestra en la barra de herramientas de la derecha, donde los operadores seleccionan sus acciones. Mi diseño original sugería una solución muy minimalista: una barra de herramientas que pudiera contraerse en un panel angosto que mostrara solo íconos. Esto, creía, permitiría que el foco estuviera en la imagen central.

Sin embargo, a los operadores no les gustó la idea porque era difícil entender de un vistazo qué significaban los íconos y cuáles eran las acciones principales. Con esa idea importante, me di cuenta de que más simple no siempre es mejor. En este caso, dejar más información visible ayudó a los operadores a trabajar de manera más eficiente.

Después de mejorar y refinar los wireframes iniciales, creé un prototipo interactivo de baja fidelidad en Figma y lo envié a los operadores y partes interesadas para que pudieran probarlo. Una vez que recibí sus comentarios, iteré el diseño hasta que todos quedaron satisfechos.

Un prototipo de baja fidelidad de la interfaz del operador

Como mencioné, el tablero original se creó usando una combinación de componentes de interfaz de usuario listos para usar, y la experiencia en el producto no fue uniforme en todo momento.

Sin embargo, en aras del tiempo y el presupuesto, las partes interesadas querían conservar los componentes listos para usar cuando fuera posible. Entonces, trabajando con el desarrollador front-end, personalicé los componentes existentes, que incluían botones, formularios y campos, y otros elementos de la interfaz de usuario, para que coincidieran con la apariencia de los nuevos tableros. Estos ajustes afectaron los colores, las tipografías, el espaciado y otros detalles. En los casos en los que era imposible actualizar los componentes existentes, como las animaciones de progreso de vista en vivo, creamos otros nuevos. La mayor parte del tablero del operador se construyó desde cero de esta manera.

Luego produje un prototipo navegable de alta fidelidad que incorporaba color y los tipos de fotos que los operadores verían normalmente en el software. También incluí herramientas de selección como rectángulos, lápices y polígonos, y agregué un panel en la parte inferior de la pantalla donde los operadores podían realizar mejoras en la imagen. Finalmente, envié el prototipo, junto con las especificaciones para microinteracciones animadas en After Effects, al desarrollador front-end para que pudieran construir el tablero.

 

El prototipo de alta fidelidad que representa el tablero del operador final

DISEÑAR UN PANEL DE CONTROL DEL CLIENTE DESDE CERO

La segunda fase del proyecto fue un panel de clientes que permite a los propietarios de los sistemas de IA observar el progreso de la resolución de sus problemas. El cliente quería mejorar esta experiencia antes de lanzar el producto a más clientes.

Originalmente, los clientes del cliente tenían que solicitar informes de progreso por correo electrónico. Cada informe era un archivo PDF o CSV que indicaba qué excepciones se resolvieron o aún estaban en curso. El cliente necesitaba una forma de que los clientes comprobaran el estado de cada excepción de un vistazo.

Un prototipo de baja fidelidad del tablero del cliente

Con el tablero que diseñé, los clientes pueden iniciar sesión y monitorear el progreso de cada excepción en tiempo real. Pueden ver las imágenes que han entrado, las que están en revisión y las excepciones que ya han sido resueltas. También pueden ver los detalles de cada solución para comprender mejor cómo se resolvió el problema.

El tablero presenta gráficos y visualizaciones para ayudar a los clientes a comprender mejor los datos resumidos, como las interacciones totales y las resoluciones totales. Los clientes también pueden acceder y administrar fácilmente los aspectos comerciales de sus cuentas, incluidos los métodos de pago y la información de inicio de sesión.

Para el prototipo del tablero del cliente, creé animaciones en After Effects para demostrar cómo se comportarían ciertos elementos de la interfaz de usuario. Por ejemplo, creé una animación de progreso para mostrar una excepción en revisión, que se convierte en una marca de verificación cuando se resuelve la excepción. También diseñé un punto pulsante para mostrar cuando un proyecto está activo.

Una vista del panel final del cliente, con las animaciones de progreso que diseñé. Las resoluciones en curso aparecen en gris y se indican con ruedas de progreso azules. Las resoluciones completadas están a todo color con marcas de verificación verdes.

CONSTRUYENDO UNA BIBLIOTECA DE COMPONENTES EN FIGMA

Un aspecto importante del diseño de productos escalables y fáciles de mantener es crear una biblioteca de componentes y una guía de estilo. Tener componentes de diseño estandarizados y reutilizables garantiza la consistencia y la velocidad al escalar y agregar funciones a un producto digital.

Elegí albergar la biblioteca del cliente en Figma porque facilita la modificación de componentes y su actualización dondequiera que aparezcan en un diseño. Todos los componentes y estilos se documentaron mediante una cuadrícula de ocho puntos . La biblioteca incluía componentes básicos como menús, barras laterales, pestañas, íconos de entrada y botones, mientras que la guía de estilo cubría elementos como tipografía, colores, íconos, espaciado y cuadrículas.

En el futuro, la biblioteca de componentes puede evolucionar hasta convertirse en un sistema de diseño completo. Pero por ahora, sirve como base para hacer crecer el producto y como referencia para futuros diseñadores, ya sean empleados internos, autónomos o profesionales de agencias.

La biblioteca de componentes combinados y la guía de estilo

ASUNTOS DE INVESTIGACIÓN DE USUARIOS

Este proyecto fue gratificante porque me brindó la oportunidad de refinar un producto digital que está mejorando los sistemas automatizados en múltiples industrias y dando forma a la forma en que la IA interpreta el mundo. También reforzó la importancia de la investigación del usuario y la observación directa . Poder ver a los operadores hacer su trabajo y hacer preguntas fue esencial para entregar tableros que les permitieran trabajar de manera más eficiente y efectiva. Un diseñador no puede mejorar la forma en que alguien trabaja hasta que comprenda su experiencia en primer lugar.

Lectura Adicional En El Blog De Toptal:

  • Diseño de tablero: consideraciones y mejores prácticas
  • La consistencia es clave: cómo construir un sistema de diseño de Figma
  • Técnicas de investigación de UX y sus aplicaciones
  • El valor de la investigación de usuarios
  • El verdadero ROI de UX: Convenciendo a la Suite Ejecutiva

 

 

 

Leave a Comment