Añadir ilustraciones/images al feedback component

[IvanBolufer]

Goal

Actualmente el componente feedback solo admite los iconos como elemento UI, para indicar ''X'' estado, pero desde producto (Smart Wifi) queremos enriquecer visualmente esas pantallas, para que sean más friendly y no tan ''apagadas''.

Como alternativa estaría el componente ''Empty State'', pero de usar ese en el caso de no poder añadir ni imágenes ni ilustraciones al componente Feedback ¿se podría añadir el componente ''ButtonFixedFooterLayout'' en el ''Empty State'' para tener CTAS a ''full width'' y con alineación vertical (ya que cuando hay dos ctas y uno de ellos tiene un nombre un poco más largo no cabe con ese alineamiento en horizontal)?

En definitiva, ¿se podría contemplar un ''hibrido'' para alguno de estos componentes y suplir la necesidad de añadir ilustraciones/imágenes pero manteniendo la maquetación inicial con el ''ButtonFixedFooterLayout'' ?

Gracias!
Un saludo 👋🏻

Context

Actualmente el componente feedback no permite el añadir ilustraciones o imágenes como elemento de apoyo visual para el texto que lo acompaña, y el componente empty tampoco admite actualmente el ''ButtonFixedFooterLayout''.

Impact

Dando la oportunidad de añadir ilustraciones/imágenes a los feedback screen, mejoraríamos el apartado visual e informativo de las páginas para poder transmitir con los elementos visuales un apoyo más claro y concreto de lo que se quiere comunicar, y por lo tanto hacer las páginas mucho más friendly y agradables visualmente para el usuario.

O dejando que el ''Empty state'' pueda tener ''ButtonFixedFooterLayout'', ganaríamos en consistencia respecto a otros flujos similares para indicar informaciones o contextos muy parecidos, como el ''Feedback Screen'', y aparte actualmente con el ''Empty Sate'' hay un problema con la colocación de los button groups, ya que están alineados horizontalmente, y cuando hay dos CTAs con texto un poco más largo de lo normal no cabe..

Discussion Questions

• ¿Se podría añadir lottifiles también a estás paginas?

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/file/bnQmcM4KzzXJp7M7MKgdA6/Login-TEST?node-id=1396%3A32192&t=rzopbvh6tqHB36In-4

[yceballost]

Buenas Iván!

Sorry por responderte tan tarde.

Te doy contexto sobre por qué actualmente los feedbacks y los empty states están definidos de esa manera.

Diferenciamos el componente Feedback y Empty como desde lo funcional hasta lo más "emocional". Creemos que los momentos de dar un feedback de success o de error deben ser más funcionales. Los motivos:

• Un feedback puede repetirse mucho a lo largo del producto. Añado aquí que tener un componente que se repite tanto en diferentes productos si abrimos la posibilidad de las imagenes.. cada producto dentro de un ecosistema estoy seguro que utilizaría una ilustración completamente diferente para dar los feedbacks 😄.
• Buscar una ilustración para un componente que puede repetirse tanto igual no aporta mucho al usuario, el usuario quiere saber si ha salido bien o mal. Ser directo es por lo que lo consideramos un componente más funcional. Usaría las ilustraciones para cuando de verdad aporten información al usuario.

Sin embargo, los empty state lo situamos en la parte más emocional, son componentes que no son taan usados como los feedbacks y normalmente las pantallas donde se usan los empty son bastante sensibles porque suelen aparecer sobretodo al inicio de la experiencia de un usuario con el producto y es aquí donde creemos que es el momento de usar ilustraciones y hablarle al usuario con un tono más emotivo.

Con estos dos extremos intentamos separar ambos componentes y experiencias para dejar claro a los usuarios cuándo se trata de "oye, ha salido todo guay" (feedback) de "aún no tienes elementos en tu carrito, haz tu primera compra" (empty state)

Con este approach, mi respuesta ante ese híbrido que comenta es que al contrario! no queremos tener componentes que se acerquen tanto, sino diferenciar más cuando se usa uno u otro

---

Por otra parte veo que también hablas del buttonFixedFooterLayout, esto da para otra discussion 😂. En un principio se barajó que el empty también pudiera llevar el buttonFixedFooterLayout, podría ser algo que le demos una vuelta.

Los motivos de esto es un poco más de lo de arriba, intentar diferenciar más los dos componentes y además que el Empty State, a diferencia del FeedbackScreen, no va a pantalla completa (de ahí el nombre de "screen" del FeedbackScreen)

Encima de un FeedbackScreen no podrías meter nada, sin embargo, encima de un Empty state podrías añadir más elementos. (no sé si esto lo he explicado muy bien.. pero si necesitas que te concrete más me dices)

---

En la librería nativa de Mística la librería de Lottie está incluida así que en principio si que podéis meter animaciones con lottie. Las animaciones del SuccessFeedbackScreen y la del ErrorFeedbackScreen usa Lottie... así que me aventuro a decir que deberíais de poder meter una ilustración en un Empty con animación

[yceballost]

Damos resuelta esta disucussion, puedes abrirla más adelante si lo necesitaras!