Capas y Elementos de la UX

Cuando hablamos de diseño de UX (UXD) debemos contemplar que nos referimos a un proceso que consta de diferentes fases para alcanzar un resultado de diseño “final”.

Para construir una experiencia de usuario sólida y bien trabajada no podemos centrarnos únicamente en el diseño de la interfaz visual. La capa visual es justamente una de las etapas finales del diseño de una UX, pero si buscamos crear una experiencia de usuario óptima y sólida deberemos escalar por las diferentes «capas» de la UX.

Capas y elementos de la experiencia de usuario

Para generar una experiencia de usuario consistente en un producto se deben desarrollar diversas capas a través de las que se materializará esa experiencia de usuario.

Jesse James Garrett definió los elementos necesarios que intervienen en el desarrollo y construcción de la experiencia de usuario en un producto o servicio digital a través de una estructura en forma de capas.

Ejemplo de las capas UX definidas por Jesse James

Capa 1 – Estrategia

En esta primera capa se determinan y definen las necesidades del usuario y los objetivos del sitio o del producto a crear.

Para obtener esta información realizaremos un Proceso de Investigación Estratégica , mediante entrevistas a usuarios y las partes interesadas, además de realizar un estudio de mercado, competencia y productos similares.

Capa 2 – Alcance

En la segunda capa abordamos las características y requisitos que necesitaremos que haga el sistema para satisfacer las necesidades de los usuarios y alinearlos con los objetivos estratégicos.

En esta capa podemos dividir en dos los tipos de requisitos necesarios a definir:

  • Requisitos funcionales: Incluyen las funciones y características que serán necesarias para que los usuarios puedan alcanzar sus objetivos con el producto.
  • Requisitos de contenido: Estos requisitos agruparán la información en formato de texto, imágenes, audio, video… con la que aportar valor. Definir este contenido permite disponer de una visión acerca de tamaño y el tiempo a dedicar para completar el proyecto.

Un ejemplo: en una app de reproducción de música un requisito funcional son las funciones de pausar y adelantar las canciones, y un requisito de contenido es disponer de archivos de música reproducibles, y documentación sobre el sistema.

Capa 3 – Estructura

En la capa de estructura se define cómo será la interacción del usuario con el producto y cómo se organizará el contenido. Esta estructura la generamos a través de:

  • Diseño de Interacción (IXD): Una vez definidos los requisitos funcionales, se plantea y determinan las respuestas del sistema a las interacciones del usuario.
  • Arquitectura de la información: Una vez planteados los requisitos de contenido, se diseña una arquitectura de la información a través de la que organizar la estructura interna del producto y facilitar al usuario el acceso al contenido.

Capa 4 – Esqueleto

Esta es la capa en la que ya empezamos con una parte algo más “visual”. Para ello en la capa de esqueleto se crea la navegación y las formas de interacción con el sistema, para lo que se realizan diagramas (wireframes) mediante los que interactuar con el contenido y las funcionalidades del producto.

Los tres componentes que forman esta capa son:

  • Diseño de la Interfaz: presenta y organiza los elementos de la interfaz para permitir que los usuarios interactúen con la funcionalidad del sistema.
  • El diseño de Navegación: cómo navegar a través de la información usando la interfaz.
  • Diseño de la Información: define la presentación de la información de manera que facilite la comprensión.

Para validar que correcto esqueleto UX de un producto, deberíamos hacernos las siguiente preguntas:

¿Cómo se moverán y desplazarán los usuarios a través del producto?

¿Cómo se presentarán y organizaran las interacciones que puede realizar el usuario?

¿Qué elementos debemos presentar de manera visual en la pantalla o interfaz de usuario?

Capa 5 – Superficie

En esta capa de superficie se define y se crea el diseño visual del producto digital. Es la capa que verá y con la que interactuará el usuario a través de una UI.

Para crearla se definen componentes visuales, colores, tipografías, jerarquías y se crean las micro interacciones visuales del producto final.

Relación entre las capas UX

Trabajar cada capa de manera individual no tendría sentido debido a que no conseguiremos aprovechar el trabajo realizado en las capas inferiores de una manera efectiva.

En este modelo de capas, los elementos creados con anterioridad influenciarán a la capa siguiente. Por lo que si no se realiza un buen trabajo de estrategia, la parte del diseño visual podrá ser muy bonita y estética, pero aportará poco o nulo valor funcional al usuario, repercutiendo en una mala experiencia de usuario final.

La mejor manera de trabajar estos elementos en UX es de una manera secuencial y permeable, de manera que cada paso que demos tenga un sentido y se apoye en la investigación y elementos creados previamente, consiguiendo una interfaz y UX mucho más afín a la estrategia definida, además de reducir el esfuerzo final lo que facilita que se pueda poner un mayor mimo y enfoque en los resultados finales.


Óscar López Poveda

Diseñador UX/UI y de producto digital.

Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.

Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail👇🏼👇🏼

Sigue leyendo...

  • Atajos de teclado en Figma

    Si eres diseñador digital y trabajas en el mundo de producto digital…. fijo que conoces y utilizas Figma. Como en…
  • Regla 60 30 10

    En el momento de diseñar, ya sea para interfaces de usuario o publicaciones en redes sociales, existe un momento crucial:…
  • Qué es el No Code

    El No Code, también conocido como desarrollo Sin Código, se refiere a un movimiento y un conjunto de herramientas y…