Skip to main content

En el panorama actual, la creación de productos digitales se ha convertido en una fusión intrincada de diseño de interfaz de usuario (UI) y experiencia de usuario (UX). Estas disciplinas se estrelazan para dar vida a aplicaciones, sitios web y plataformas que no solo sean visualmente atractivos, sino que también ofrezcan una navegación fluida. En este artículo, exploraremos los fundamentos de la creación de productos digitales a través de un enfoque de UI/UX.

¿Qué es UX y UI en un producto digital?

La UX o ‘User Experience’ se define como la sensación del usuario al consumir un producto o servicio digital. Actualmente, vivimos de forma diaria en un entorno focalizado en esta Experiencia del Usuario en prácticamente todas las aplicaciones y plataformas que utilizamos. En ella entran en juego diferentes factores como pueden ser los tiempos de carga, la comodidad del usuario a la hora de navegar por la plataforma o la facilidad de visualización de la app.

La UI se define, en cambio, como ‘User Interface’ o la disciplina centrada en el diseño visual y gráfico del producto digital creado, como pueden ser los colores, tipografía, efectos o la disposición en bloques del producto.

El ‘Design Thinking’ o Pensamiento de Diseño

Otro concepto relacionado con estas dos disciplinas se trata del ‘Design Thinking’, definido como la metodología que pone al usuario o usuaria en el centro a la hora de crear un producto digital. Aunque cada producto requiere unas necesidades específicas, generalmente la creación de un producto digital siguiendo esta estrategia sigue las fases de:

  • Empatizar, es decir, comprender las necesidades del usuario. Este diagnóstico es útil para no desviarse de la finalidad de cubrir una o varias necesidades del usuario.
  • Definir, es decir, conceptualizar los problemas y verlos como oportunidades para generar claridad y enfoque sobre el proyecto en que estemos trabajando.
  • Idear, que se focaliza en crear una amplia gama de posibles soluciones creativas e innovadoras teniendo en cuenta las limitaciones técnicas, al igual que valorando posibles cambios o alternativas por parte del equipo.
  • Prototipar o darle forma al estudio de las fases anteriores, comenzando así a crear propuestas visuales o un producto tangible. Estos esqueletos o matrices permitirán visualizar el producto y acabar de darle forma siendo fiel al producto final.
  • Testear, es decir, realizar pruebas de los prototipos con los usuarios y diferentes stakeholders. Este proceso permitirá anticiparse a futuros problemas que puedan aparecer una vez ya esté desarrollado el producto.

La metodología ‘Atomic Design’ en un producto digital

El siguiente concepto relevante es el ‘Atomic Design’, considerado como una intersección entre diseño y desarrollo creada por el diseñador web Brad Frost que viene a unir ambas disciplinas bajo un mismo concepto: diseñar por componentes. Estos pueden ser de cinco tipos o niveles:

  • Átomos: pequeños elementos gráficos con alguna finalidad, como tipografías, colores, espaciados, párrafos, avatares o inputs de formulario.
  • Moléculas: unión de diferentes átomos para crear un elemento gráfico más complejo, como un campo de texto libre.
  • Organismos: elementos gráficos más complejos que se suman a niveles anteriores para dar integridad a un bloque de componentes, como un correo electrónico o una contraseña.
  • Templates: unión de diferentes organismos que conforman una página o componente. Este es un entregable de alta fidelidad que, aunque no termina de ser un diseño final, se trata de un esqueleto de la aplicación o página web.
  • Pages: diseño final que incluye imágenes y otros detalles que hacen que el archivo esté listo para su desarrollo.

El ‘Collaborative Product Development’ o el proceso de diseñar en equipo

A la hora de crear productos, es esencial la colaboración de todos los equipos involucrados. Este proceso se conoce como ‘Collaborative Product Development’ e incrementa la alineación dentro del equipo, a la vez que permite obtener productos de más calidad y mejor enfocados al usuario final. Este desarrollo colaborativo de producto tiene otros múltiples beneficios, como pueden ser:

  • Una mayor efectividad
  • La creación de productos más cohesivos
  • Un mayor compromiso entre los componentes del equipo
  • Una mayor alineación en el proyecto

Todos estos conceptos y procesos de creación de un producto digital vienen a confirmar un mismo hecho, que se trata del cambio de paradigma en la figura del diseñador: este ya no se limita simplemente a “pintar” sino que, hoy en día, empieza a adoptar una mentalidad que promueva el Data-Driven-Design (DDD), es decir, la toma de decisiones de diseño basadas en datos. Por ello, es esencial disponer de métricas en todas las aplicaciones que se creen que permitan desarrollar evolutivos con base en los comportamientos del usuario.