Atlas de interacción con IA

Presentar

Señal visual de IA

Un icono, un color o una forma que identifica las funciones con IA de manera consistente.

Patrón transversal: acompaña a cualquier otro.

Maqueta de ejemplo. Los nombres y productos son ficticios.

Qué es

La persona necesita reconocer de un vistazo qué acciones pasan por la IA: para saber que el resultado hay que revisarlo, que puede tardar y que puede fallar. Un identificador consistente (icono, color de borde, forma del botón) lo resuelve sin texto. La consistencia importa más que la originalidad del símbolo.

Lo ves en

  • El icono de destellos de GoogleEl destello de cuatro puntas se repite en Gmail, Docs, Android y otros productos de Google para señalar las acciones que pasan por Gemini.
  • El degradado de CopilotUn logotipo con degradado de colores que se repite en Windows, Office y Edge, distinto de cualquier icono monocromo de la interfaz.
  • El color propio de las funciones de IA en NotionLas acciones de IA en el menú llevan un violeta propio, distinto del gris del resto de las opciones.
  • El borde animado de Gemini mientras generaMientras procesa, un brillo de color animado enmarca la zona de respuesta y se detiene al terminar, así se ve el estado sin texto.

Funciona cuando

  • El mismo identificador aparece en todas las funciones con IA del producto.
  • Se distingue de los iconos de acciones deterministas.
  • Cumple contraste y funciona sin color.

Falla cuando

  • Cada función con IA tiene su propio icono.
  • Se usa el identificador como decoración en cosas que no tienen IA.
  • El color es el único indicador y falla en modo oscuro o sin visión de color.

Cómo diseñarlo

  • Verbo primero, icono despuésEn menús y botones, la etiqueta es el verbo ("Resumir") y el icono de IA va pequeño a su lado; el icono solo con tooltip queda para barras donde ya no cabe texto. La persona busca acciones por nombre y reconoce la IA por el símbolo, en ese orden.
  • Reserva un color secundarioSi sumas color, elige uno que la interfaz no use para ningún otro estado y aplícalo siempre junto al icono. Un color reservado se aprende rápido; uno compartido con los enlaces o los avisos se confunde a la primera.
  • Documéntalo como componenteUn componente con reglas: dónde va, qué tamaño, qué texto lo acompaña, dónde está prohibido. Sin reglas escritas aparece en el primer banner de marketing.
  • Anima la señal al generarEl icono quieto en reposo, en movimiento mientras genera y quieto otra vez al terminar: la misma señal cuenta el estado. Corta la animación en cuanto llega el resultado y respeta la preferencia de menos movimiento del sistema.
  • Mide el reconocimientoMuestra el icono sin texto ni contexto a cinco personas y pregunta qué creen que hace. Si menos de cuatro hablan de IA o de generar, el símbolo necesita texto al lado o un cambio.

Cuándo se vuelve obligatorio

Este patrón acompaña a cualquier otro. Se exige cuando la persona deshace un error en un clic, o peor.

Relacionados

Marcar lo generadoSon la misma señal en dos momentos: en el botón dice "esto usa IA" y en el resultado dice "esto lo hizo la IA"; conviene que compartan icono.Nombre y vozEl icono es la cara del nombre; cuando la IA del producto tiene nombre, el símbolo aparece donde aparece el nombre y con la misma promesa.Acción de un clicUn botón de IA se distingue de un botón normal por esta señal: la persona sabe que el resultado varía y que conviene revisarlo.Comando en contextoEn un menú con "/" o Cmd+K, la señal separa las acciones con IA de las deterministas, y la persona elige sabiendo cuál puede fallar.