106.9K+Descargar
Ir a la guía de uso
Interfaces That Feelpor owl-listener

Interfaces That Feel Skill.

Conecta los textos y las animaciones de la interfaz con el estado emocional del usuario.

  • Diseño de interacción
  • Estados emocionales
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · interfaces-that-feelSKILL.md
Tarea Conecta los textos y las animaciones de la interfaz con el estado emocional del usuario. Resultados Una descripción del estado que probablemente perciba el usuario en determinados momentos de la interfaz. Antes de empezar Aporta el estado real de carga, error o finalización, con sus textos y tiempos. Incluye estudios del público cuando existan para separar las emociones inferidas del comportamiento observado.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Conecta los textos y las animaciones de la interfaz con el estado emocional del usuario

Revisa el ritmo emocional, la recuperación de errores y las respuestas de la interfaz; convierte los estados del usuario en decisiones concretas de texto y animación.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Interfaces That Feel examina un momento del producto desde el estado de la persona que lo utiliza. Esperar un resultado, recuperarse de un error y completar una tarea requieren señales distintas. El skill relaciona esos momentos con decisiones concretas de texto, tiempos, curvas de aceleración y comportamiento interactivo.

La fuente emplea un proceso de traducción: nombrar el estado percibido, encontrar una analogía física, extraer una cualidad de comportamiento y aplicarla a la interfaz. También comprueba si la animación tiene una razón de ser y si la experiencia sigue funcionando con movimiento reducido. Por ello, resulta adecuado para revisar de forma focalizada interfaces que funcionan correctamente pero comunican mal.

Entregables esperados

  • Una descripción del estado que probablemente perciba el usuario en determinados momentos de la interfaz.
  • Recomendaciones específicas de texto y tiempos vinculadas a esos momentos.
  • Una revisión del antes y el después de las señales emocionales y del comportamiento con movimiento reducido.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Identificar el momento

    Elige un estado de carga, vacío, error, éxito o incorporación. Describe lo que puede estar experimentando la persona y distingue esa valoración de las observaciones directas de usuarios.

  2. 02
    Traducir la sensación en comportamiento

    Busca una analogía física útil, como resistencia o estabilización. Extrae la cualidad pertinente y relaciónala con una decisión de curva de aceleración, duración, espaciado o texto.

  3. 03
    Revisar la señal de la interfaz

    Haz que la recuperación de errores sea clara y no culpabilice al usuario, mantén proporcionada la confirmación de éxito y da una intención clara al texto de carga. Elimina las animaciones que solo rellenan tiempo.

  4. 04
    Revisar el resultado

    Compara la experiencia antes y después, incluidas las preferencias de movimiento reducido. Pregúntate si la señal emocional sigue percibiéndose al eliminar el color y las imágenes.

02 Cuándo usarlo

Cuándo usarlo

Aporta el estado real de carga, error o finalización, con sus textos y tiempos. Incluye estudios del público cuando existan para separar las emociones inferidas del comportamiento observado.

Buen encaje

  • Respuestas de interfaz fríasUna pantalla técnicamente correcta apenas reconoce la situación del usuario mientras espera o se recupera de un error.
  • Afinar textos y animaciónEl equipo necesita un tratamiento razonado de los momentos de error, éxito o incorporación.

Límites que conviene comprobar

  • La interpretación requiere contextoLa lectura emocional del skill es una valoración de diseño, no una prueba de cómo se siente cada usuario.
  • Animación con moderaciónLa fuente recomienda reducir las animaciones antes de añadirlas y probar las preferencias de movimiento reducido.
  • Orientación, no prueba de resultadosSin evidencias de usuarios, las recomendaciones de tiempos no demuestran una mejora de la satisfacción.

Aporta estos datos

  • Estados seleccionadosProporciona los momentos de carga, error, éxito u otros que se deban revisar.
  • Contexto del usuarioExplica la tarea, lo que está en juego y los estudios conocidos sobre el público.
  • Implementación existenteAporta los textos, los tiempos y el comportamiento actual de las animaciones.

03 Decisiones importantes

Decisiones importantes

  1. Tiempos justificados

    La duración y la curva de aceleración se vinculan a la señal de comportamiento deseada.

  2. Textos útiles para recuperarse

    Los mensajes de error pueden asumir la responsabilidad e indicar una siguiente acción concreta.

  3. Animación contenida

    La revisión pregunta qué aporta una animación antes de conservarla.

04 Ejemplo de brief

Prueba con un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

Proporciona los momentos de carga, error, éxito u otros que se deban revisar.

Archivo fuente original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa interfaces-that-feel para revisar nuestro flujo de generación de informes, incluidos los estados de espera, fallo y finalización. Lee los textos existentes e inspecciona los tiempos reales. Empieza por describir el contexto emocional probable del usuario y señala las suposiciones que no estén respaldadas por estudios. Propón textos concisos y un número reducido de cambios de animación, explicando qué comunica cada uno. Conserva la rapidez y la claridad de la tarea. Compara la experiencia con el movimiento reducido activado e identifica las señales que deben seguir entendiéndose sin animaciones. Limita las recomendaciones a estos tres estados.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Cada propuesta de texto o animación tiene un propósito declarado en el estado seleccionado.
  • Las emociones supuestas se distinguen de los resultados reales de investigación.
  • El comportamiento con movimiento reducido conserva las respuestas necesarias y la claridad de la tarea.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
owl-listener
Repositorio
owl-listener/designer-skills
Archivo del skill
SKILL.md
Licencia
MIT
Versión revisada
2026-11-02 · 9a6930cf84a8
Resumen editorial de la fuente
Conecta los textos y las animaciones de la interfaz con el estado emocional del usuario.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿El skill se limita a añadir animación?

No. La fuente pide al agente reducir primero las animaciones y dar una razón a cada una de las que permanezcan.

¿Qué aspectos de la interfaz pueden cambiar?

La fuente trata el tono del texto, los tiempos, las curvas de aceleración, la temperatura del color, el espaciado y la duración de la animación.

¿Incluye la revisión con movimiento reducido?

Sí. Probar las preferencias de movimiento reducido forma parte de sus prácticas recomendadas.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md