Skip links

Patrón de diseño de la interfaz de IA – Revista Crush

Entonces necesitas Diseñar nuevas capacidades de IA Para tu producto. ¿Cómo comenzarás? ¿Cómo se diseña transmisiones e interacciones? ¿Cómo se asegura de que los usuarios no sean abandonados por los usuarios?

En este artículo, me gustaría compartir Un enfoque muy simple pero sistemático ¿Cómo pienso en diseñar una experiencia de IA? Espero que esto lo ayude a comenzar más claro para comenzar.

Este artículo es Parte de nuestra serie en curso existir ux. Puedes encontrar más sobre Patrones de diseño y estrategia de UX existir Modo de diseño de interfaz inteligente 🍣 Con el entrenamiento UX en tiempo real próximamente. Saltar al directorio.

Retiro de Ai Chat

Uno de los cambios recientes clave es mantenerse alejado de las transiciones lentas de tradición. Interfaz de IA «Chat». Como Luke Wroblewski EscribirCuando un proxy puede usar una variedad de herramientas, llame a otro proxy y ejecutelo en segundo plano Orquestación La inteligencia artificial funciona más, mucho menos chats de viaje redondo.

Luke Wroblewski escrito por AI Experience Paradigm
UI de mensaje Lentamente comienza a sentirse desactualizadoLa interfaz de chat se desvanece en el fondo. Luke Wroblewski. (Vista previa grande)

De hecho, el chatbot es Raramente tiene un gran paradigma de experiencia – Principalmente porque la carga de expresar intenciones depende efectivamente del usuario. Pero, de hecho, se hizo bien y que llevaba mucho tiempo.

Por supuesto, el chat no desaparecerá, pero está suplementado UI orientada a tareas – Control de temperatura, perillas, controles deslizantes, botones, hojas de cálculo semánticas, lienzos ilimitados – AI proporciona opciones predefinidas, preajuste y plantillas.

Luke Wroblewski escrito por AI Experience Paradigm
Modelo de diseño de agente aiuse más interfaz de usuario orientada a tareas que chat. Luke Wroblewski. (Vista previa grande)

Allí, la IA enfatiza el trabajo, el plan, el resultado de tareas, en lugar de la entrada de chat. El resultado es una experiencia real Amplificar el valor de los usuarios Al rociar un poco de IA donde proporciona un valor real a los usuarios reales.

Para diseñar una mejor experiencia de IA, necesitamos investigar 5 áreas clave Necesitamos ser formados.

Ingrese UX: Express Intent

Sesión AI Es uno Muy lento Formas de ayudar a los usuarios a expresar y expresar sus intenciones. Prueba de usabilidad anexo Los usuarios a menudo se pierden en la edición, revisión, escritura y reproducción. El dolor es lento y generalmente tarda entre 30 y 60 segundos en entrar.

Resulta que las personas tienen dificultades para expresar sus intenciones. En realidad, en lugar de escribir consejos manualmente, es una buena idea Pídale a AI que escriba indicaciones Apoya a ti mismo.

Ilustración: cómo los usuarios expresan intenciones en las interfaces de IA.
Tienes una flora Le permite modificar imágenes y videos a través de nodos. (Vista previa grande)

y Tienes una floralos usuarios aún pueden escribir indicaciones, pero ellos Visualizar sus intenciones Use nodos mediante la conexión intuitivamente de varias fuentes. En lugar de explicar cuidadosamente cómo necesitamos tuberías para que funcionen, adjuntamos nodos y comandos al lienzo.

Ilustración de salida UX
y Krea.aiel usuario puede mover formas abstractas (a la izquierda) para explicar sus objetivos a la IA y estudiar los resultados (a la derecha). (Vista previa grande)

Usando entradas de IA, precisamente es lento y desafiante. En cambio, podemos Permiso abstracto Queremos manipular el objeto y proporcionar la entrada de precisión de AI-AI moviendo ese objeto en el lienzo. Eso es todo Krea.ai Hacer.

En general, podemos Minimizar la carga de escribir Información manual: use extensiones prepotativas, generadas por IA, extensiones oportunas, constructores de consultas e entrada de voz.

Salida UX: resultados de visualización

La salida de IA no tiene que ser solo texto sin formato o listas con viñetas. Debe ser Ayuda a llevar a las personas a obtener informaciónapresúrate. Por ejemplo, podemos crear instrucciones adicionales basadas en los objetivos y motivaciones del usuario para visualizar el resultado.

Ilustración de salida UX
Visualice los resultados a través de lentes de estilo. Amelia Wattenberger. (Vista previa grande)

Por ejemplo, Amelia Wattenberger Salida de IA visual Agregado para su texto Editar Penpal Lente de estilo Explorar contenido. La salida se puede visualizar en la longitud y la escala de la oración. Tristeza – feliz,,,,, Concreto – Resumenetc.

Ilustración de salida UX
aino.aiAnalista de planificación urbana en AI GIS. (Vista previa grande)

Los resultados también se pueden visualizar en el mapa, por supuesto, esto se espera. Analista de AI GIS. Además, los usuarios pueden Acceder a una sola capa de datosactivarlos y apagarlos, así que explore los datos en el mapa.

También podemos usar Ranking forzado y priorizar Recomendar la mejor opción Y evite elegir la parálisis, incluso si el usuario solicita las diez principales sugerencias. Por ejemplo, podríamos considerar el método proporcionado utilizando los resultados como un archivo JSON visual o estructurado en una tabla de datos, tablero o mapa.

UX mejorado: ajustar la salida

Los usuarios a menudo necesitan cereza Algunos bits de la salida de IA, colóquelos en un nuevo lugar, generalmente requerido Expandir una partesintetice los escombros de otra parte, o simplemente perfeccione los resultados para satisfacer sus necesidades.

Ilustración de salida UX
Adobe Firefly Se recomienda seleccionar y control deslizante para ajustar los resultados. (Vista previa grande)

Generalmente refinado La parte más dolorosa de la experienciay quedan muchos detalles para que los usuarios expliquen en detalle. Sin embargo, podemos mejorar esta experiencia con los buenos controles de la interfaz de usuario antiguos, como perillas, controles deslizantes, botones, etc., similar a la forma en que funciona Adobe Firefly (en la foto de arriba).

Ilustración de salida UX
Vida preestablecida en un lado, uno ejemplo Maggie Appleton. (Vista previa grande)

También podemos usar presets, marcadores y permitir a los usuarios Resaltar partes específicas de los resultados Quieren cambiar, por aviso de contexto, al resaltar la parte de la salida en lugar de la solicitud global.

Ilustración de salida UX
Ajustar partes específicas de los resultados, gramática. (Vista previa grande)

Operaciones de IA: tareas completadas

Junto con los agentes de IA, podemos Permitir a los usuarios iniciar tareas AI puede ejecutar en su nombre, como programar eventos, planificación e investigación en profundidad. También podemos solicitar Ordenar o filtrar los resultados De manera específica.

Ilustración de salida UX
Proponer una acción relacionada con surgir de ejemplo Maggie Appleton. (Vista previa grande)

Pero también podemos agregar características para ayudar a los usuarios a usar mejor la salida de IA, por ejemplo, visualizándola, haciéndolo que se pueda usar, permitiendo que se use Transformación Entre formatos, o publicar para Slack, Jira, etc.

Integración de IA: donde lleva el trabajo

Muchas interacciones de IA están bloqueadas en productos específicos, pero se produce una buena experiencia de IA Donde se lleva a cabo el trabajo real. Es inusual esperar la parte especial Finalización automáticapor ejemplo, pero hacemos esto para las capacidades de IA.

Ilustraciones de UX integrado de IA
(Vista previa grande)
Ilustraciones de UX integrado de IA
Ovetail Ai Desde Jira y conceptos hasta Slack, Slack y equipos, muchas plataformas están integradas. (Vista previa grande)

Cuando los usuarios confían en la IA como copiloto o un ayudante pequeño, se producirán mejoras de productividad reales Herramientas que usan en el trabajo todos los días. Es una integración perfecta con Slack, Teams, Jira, Github, etc., como las herramientas que usan las personas. Navegador de diámetro y Tragar Tail Es un buen ejemplo de ello en acción.

Resumir

En estas cinco áreas, podemos explorar Reducir los costos de interacción Use cuadros de texto y permita que los usuarios interactúen directamente con las preocupaciones haciendo clic, haciendo clic, seleccionando, resaltando y marcados.

Muchos productos están obsesionados con la IA primero. Pero podrías ser mejor Tienes una secuencia en cambio. La diferencia es que nos centramos en las necesidades de los usuarios y rociamos un poco de IA en el viaje del cliente que realmente agrega valor.

Los productos de IA no tienen que ser AI. Hay mucho valor en dibujar patrones psicológicos que las personas han adoptado a lo largo de los años, y Mejora con IAsimilar a la forma en que usamos el autofill del navegador en lugar de permitir que los usuarios se encuentren en cuadros de texto aterradoras y ubicuos.

Recursos útiles

Cumplir con el «modo de diseño de interfaz inteligente»

Puedes encontrar más sobre Patrones de diseño y UX existir Modo de diseño de interfaz inteligentenuestro Curso de 15h-video Más adelante este año, se realizó una capacitación en UX en tiempo real con 100 instancias de la vida real. Desde Mega-Dropdown hasta complejas tablas empresariales, se agregan 5 nuevos segmentos de mercado cada año. Saltar a una vista previa gratuita. Código de uso Pájaro llegar Ahorrar 15% dejar.

Modo de diseño de interfaz inteligente
Encontrarse Modo de diseño de interfaz inteligentenuestro diseño de interfaz y cursos de video UX.
Aplastar editorial
(Yk)

Leave a comment

Home
Account
Cart
Search
¡Hola! ¡Pregúntame lo que quieras!
Explore
Drag