Productos digitales con Alma

Cuando el diseño UX/UI y el Branding se abrazan

¿Con cuántos productos digitales podemos llegar a interactuar cada día? Veamos… gestores de correo, herramientas de trabajo, redes sociales, webs de todo tipo, videojuegos, aplicaciones de compras o comida a domicilio, incluso los propios navegadores o los sistemas operativos de nuestros dispositivos… Haciendo un recuento rápido, me salen casi 40 productos digitales cada día y la mayoría de los que me estáis leyendo tendréis cifras similares.

Hace unos años podríamos decir que conseguir hacer un producto digital con alma era algo diferenciador que te permitía posicionarte mucho mejor ante la competencia, pero hacer un producto digital con alma en 2022 ya es un standard, es lo mínimo que tienes que ofrecer. Si tu producto está vacío, será realmente complicado que seas capaz de competir en un entorno tan masificado.

Y bien, ¿cómo diseñamos un producto digital con alma? Aquí tendría que insertar otros 2 o 3 (o 40) artículos sobre diseño de servicio, estrategia, branding, comunicación, etc… pero vayamos un poco más abajo. Manchémonos las manos en el mundo del diseño de interfaces de usuario.

En ocasiones, los diseñadores UI pensamos que es sencillo (o al menos factible) realizar campañas publicitarias o piezas de diseño gráfico con un concepto muy potente de fondo, ese plus de mensaje que parece dotar de alma a un diseño y conseguir un resultado muy potente a nivel emocional y comunicativo, pero pensamos que es realmente difícil hacer este ejercicio en productos digitales del día a día. Esto se debe a que estos productos suelen ofrecer muchísimas funcionalidades, dejando muy poco espacio para la parte creativa, pero ¿es esto real?

Es cierto que en productos con mucha carga funcional como portales de banca u otros sectores complejos, herramientas de trabajo corporativas o incluso muchísimas aplicaciones móviles, nos vemos limitados a nivel creativo porque hay que priorizar la funcionalidad y su usabilidad. Pero no todo es blanco o negro, tenemos un gama enormes de grises por explorar.

Tal vez no podamos modificar a nuestro antojo el flujo de navegación para conseguir una experiencia más inmersiva, tampoco podremos incluir muchas pantallas de puro mensaje para que el cliente comprenda y empatice con la marca de manera directa y seguramente tampoco podamos incluir fotografías imponentes que hagan nuestros diseños mucho más llamativos y emocionales…

Pero sí podemos:

  • Definir el estilo de la iconografía y otros elementos gráficos.
  • Definir comportamientos de estos elementos cuando el usuario interactúe con ellos.
  • Añadir pequeños puntos de contacto que ayuden a reforzar la comunicación de la marca.
  • Elegir una tipografía que nos hable con el tono de la marca.
  • Modular los textos, haciendo que sean descriptivos e informativos, pero que también transmitan sensaciones.

Muchas de estas cosas que podemos hacer parecen muy pequeñas y en cierto modo lo son, pero si todas ellas están presentes y trabajan en la misma dirección es totalmente posible crear productos digitales complejos con alma.

Pero aún estoy siendo un poco abstracto y os he prometido mancharnos las manos. Vamos a ello.

Imaginemos que uno de los valores que quiere transmitir nuestro cliente en sus productos digitales es: “Movimiento”. ¿Cómo podemos representar ese valor en nuestra interfaz?:

  • Podemos priorizar el uso del vídeo o las animaciones por encima de la fotografía o la iconografía.
  • Si finalmente usamos fotografías, también podríamos modular el estilo de las mismas, rechazando imágenes de gente sentada, de espacios cerrados o de elementos verticales y eligiendo imágenes de personas en movimiento, en lugares abiertos o con escenarios y enfoques más dinámicos
  • Huyamos de tipografías geométricas y apostemos por otras que tengan rasgos más naturales o con un alto contraste entre sus partes más anchas y las más finas… o tal vez alguna que tenga una serifa muy exagerada para titulares. Incluso podemos jugar con la cursiva para momentos clave.
  • También podemos utilizar degradados por encima de colores planos. Los degradados se pueden interpretar como “colores en movimiento”, o un “viaje de colores”
  • Podemos “forzar” el uso de pequeñas animaciones en lugares donde normalmente habría sólo iconografía.
  • El uso de microinteracciones que refuercen la interacción (como cuando das un like en Twitter) es muy importante en todos los productos, pero aquí sería un absoluto imprescindible.

Con estos ejemplos, seguramente habréis visto de una forma más tangible cómo podemos representar conceptos en nuestros diseños, pero pongamos otro ejemplo más difícil. Imaginemos que uno de los valores que quiere transmitir nuestro cliente en sus productos digitales es: “Transparencia”. ¿Qué podemos hacer aquí?

  • Lo primero que nos viene a la cabeza: usar algunas cajas u otros recursos gráficos con un efecto transparente. Puede ser desde simular la más absoluta de las transparencias, imitando el cristal, hasta una caja de color plano con un 95% de opacidad que deja ver un poco lo que haya detrás.
  • Transparencia también puede ser la ausencia de “letra pequeña”, ofreciendo al usuario toda la información que necesita de manera explícita, sin esconderla en tamaños de texto pequeños, o dentro de desplegables, etc… Si tenemos que hacer esto en una página con bastante texto legal, seguramente nos veamos obligados a ofrecer esa información de forma fraccionada, por pasos e incluyendo atajos para que el usuario pueda decidir no leerlo.
  • Transparencia también es utilizar el mismo nivel de jerarquía visual para todos los productos, sin destacar ese producto más caro que haría al usuario caer en la trampa. Aquí no hay trampas.
  • También podemos reflejar esa transparencia empleando ilustraciones de trazo muy fino y con animaciones muy suaves y comprensibles, o jugando con elementos que se superpongan.

Cuando un usuario utilice nuestro producto digital y vea la página principal, seguramente no diga: “¡vaya, qué transparente!”, pero eso no importa. Lo realmente importante, es que va a percibir la intención de nuestro producto y a recibir su mensaje. Va a percibir que la marca no quiere engañarle, que pone toda la información a su disposición y que es el propio usuario quien toma la decisión. Y toda la interacción y línea gráfica va a reforzar ese mensaje creando una experiencia limpia, suave, transparente.

Recordemos:

“La gente olvidará lo que dijiste, lo que hiciste, pero nunca olvidará cómo la hiciste sentir”. (Maya Angelou)

Antes de irme, me gustaría poneros un ejemplo: la aplicación móvil de PlayStation.

Su principal competencia, la X-Box de Microsoft ofrece un ecosistema mucho más interesante para los jugadores de videojuegos, con funciones multidispositivo y un servicio de suscripción realmente potente, mientras que la consola de Sony apuesta por posicionarse en el mercado como un producto más elegante, con los mejores juegos exclusivos y que ofrece las experiencias más cuidadas. Si echamos un vistazo a la interfaz de la app de PlayStation vemos totalmente reflejados estos valores.

Su visual es elegante y de aspecto tecnológico. Sus elementos principales de interacción tienen formas muy diferentes a lo habitual, lo que le aporta ese aura de exclusividad y nos cuenta que la marca cuida los detalles y ofrece el producto de mayor calidad del mercado.

Dejando de lado la funcionalidad y la usabilidad, lo que está claro es que la interfaz de la app de PlayStation consigue transmitir al usuario todas las sensaciones que su marca quiere contar, y es especialmente palpable cuando comparamos ambas barras de navegación.

En definitiva, aunque tengamos ciertas limitaciones en nuestros proyectos, hay multitud de puntos de contacto donde sí podemos actuar. A través de la suma de todos estos pequeños (o no tan pequeños) elementos y equilibrando el peso de todos ellos, vamos a conseguir crear productos digitales con alma.

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA