2.3. Los elementos
Los elementos del diseño de interfaces se pueden dividir en cinco capas dependientes; cada nivel se basa en el nivel anterior y progresan de un nivel más abstracto a uno más concreto (de abajo hacia arriba):
Fuente: Jesse James Garrett (2002). The Elements of User Experience: User-Centered Design for the Web (cap. 5). https://www.oreilly.com/library/view/the-elements-of/9780321688651/.
Aunque en general los planos son dependientes de abajo arriba, esto no quiere decir que tengamos que decidir cada aspecto de las capas inferiores antes de ponernos a trabajar sobre los elementos de las capas superiores. Algunas dependencias son bidireccionales, de abajo arriba y de arriba abajo, y necesitan correcciones de forma iterativa.
A continuación, resumimos los elementos de cada una de estas cinco capas, de la más abstracta a la más concreta.
La estrategia responde al motivo del producto, la aplicación o el sitio, por qué lo creamos, para quién lo hacemos, por qué las personas están dispuestas a usarlo, por qué lo necesitan. El objetivo aquí es definir las necesidades del usuario y los objetivos comerciales.
Esto podría hacerse a través del proceso de investigación estratégica, donde se entrevista a los usuarios y a todas las partes interesadas, además de revisar los productos o las empresas de la competencia.
El ámbito define los requisitos funcionales y de contenido. ¿Cuáles son las características y el contenido de la aplicación o producto? Los requisitos deben cumplir y estar alineados con los objetivos estratégicos.
- Requisitos funcionales se refieren a las funciones o características del producto, cómo funcionan las características entre sí y cómo se interrelacionan entre sí. Estas características son lo que el usuario necesita para alcanzar los objetivos.
- Requisitos de contenido se refieren a la información que necesitamos para proporcionar el valor. Información como texto, imágenes, audio, vídeos, etc. Sin definir el contenido, no tenemos idea del tamaño o el tiempo requerido para completar el proyecto.
Por ejemplo, la característica es tener un reproductor multimedia para canciones, mientras que el contenido son los archivos de audio para estas canciones.
La estructura define cómo interactúa el usuario con el producto, cómo se comporta el sistema cuando interactúa, cómo está organizado, priorizado y cuánto.
La estructura se divide en dos componentes, diseño de interacción y arquitectura de la información.
- El diseño de interacción, dados los requisitos funcionales, define cómo el usuario puede interactuar con el producto y cómo se comporta el sistema en respuesta a las interacciones del usuario.
- La arquitectura de la información, dados los requisitos de contenido, define la disposición de los elementos de contenido y su organización, para facilitar la comprensión humana. Existen dos acercamientos distintos para crear el esquema de categorías que estructurará la información que presentemos al usuario: de arriba abajo y de abajo arriba. La primera consiste en crear la arquitectura directamente desde la estrategia, teniendo en cuenta los objetivos del producto y las necesidades del usuario. La segunda, de abajo arriba, deriva del ámbito y se basa en el análisis de contenidos y los requerimientos funcionales de la interfaz. A menudo estos dos métodos se combinan en diferentes niveles de la arquitectura; más adelante veremos algunos ejemplos.
El esqueleto determina la forma visual en la pantalla, la presentación y la disposición de todos los elementos que nos hacen interactuar con la funcionalidad del sistema que existe en la interfaz. También cómo se mueve el usuario a través de la información y cómo se presenta la información para que sea efectiva, clara y obvia.
Los wireframes se usan ampliamente para crear un formato visual, que es un diagrama estático que representa un formato visual del producto, que incluye contenido, navegación y formas de interacción.
El esqueleto se divide en tres componentes:
- El diseño de interfaz presenta y organiza elementos de interfaz para permitir a los usuarios interactuar con la funcionalidad del sistema.
- La navegación diseña cómo navegar a través de la información utilizando la interfaz.
- El diseño de información define la presentación de información de una manera que facilita la comprensión.
La superficie es la suma total de todo el trabajo y las decisiones que hemos tomado. Determina cómo se verá el producto y elige el diseño gráfico, la tipografía, los colores, etc.
En este nivel tratamos el diseño visual (o sensorial); nos ocupamos de la apariencia visual del contenido, los controles, que dan una idea de lo que el usuario puede hacer y cómo interactuar con ellos. Debería facilitar la comprensión de las cosas, aumentar la capacidad cognitiva para absorber lo que los usuarios ven en la pantalla.
Ejercicio
Reflexionad sobre cuáles son los elementos de la estrategia y el ámbito de la página web de Netflix. Para analizar la estrategia tratad de responder las siguientes preguntas:
- ¿Por qué nosotros y el resto del mundo podríamos necesitar este producto?
- ¿Qué se quiere lograr con este producto?
- ¿Quiénes son los usuarios potenciales de este producto?
- ¿Cómo satisface las necesidades y deseos de los usuarios?
Cuando analicéis el ámbito, tratad de trasladar los aspectos de la estrategia a un listado de requisitos. Para ello, considerad todos los casos de uso. Al final, dividid todos los requisitos en requisitos de funciones (características) y requisitos de datos (contenido).