Un vistazo rápido a los 5 Elementos de la Experiencia de Usuario (UX)
Adaptación libre al español
El siguiente artículo es una adaptación libre al español del artículo UX — A quick glance at The 5 Elements of User Experience (Part 2) publicado por OmarElgabry en su blog personal el 15 de septiembre de 2016, y como tal, no pretende ser una traducción literal, si no, más bien literaria, es decir, adaptada según mi propio criterio y parecer. En cualquier caso, quien desee ver el articulo original, puede leerlo a través de este enlace al artículo original.
Los Cinco Elementos de la Experiencia de Usuario proceden del libro The Elements of User Experience escrito por Jesse James Garret, que es uno de los fundadores de Adaptive Path, una consultora de experiencia de usuario con sede en San Francisco.
Cuando uno visita un sitio web, quizás para comprar algo o hacer cualquier otra cosa, toma algunas decisiones mientras navega por él. Por tanto, si estudiamos los elementos que conforman esa experiencia (teniendo en cuenta todas las acciones que como usuarios podemos realizar), seremos capaces de empezar a entender cómo se toman dichas decisiones. Así, mejorando esa experiencia y satisfaciendo las necesidades del usuario, conseguiremos que la gente se sienta motivada a utilizar el producto e interactuar con él.
Los Cinco Elementos de la UX
Existen cinco niveles dependientes, cada uno de los cuales se basa en el nivel anterior, y que fluyen desde la abstracción hasta alcanzar la concreción (de abajo hacia arriba).
1. Estrategia
La razón de ser del producto, la aplicación o el sitio web; por qué lo hemos creado, para quién lo creamos, por qué la gente estaría dispuesta a utilizarlo, por qué lo necesitan. El objetivo de este nivel es definir tanto las necesidades del usuario como los objetivos empresariales.
Esto podría materializarse mediante un Proceso de Investigación Estratégica, en el que se entreviste tanto a los usuarios como a todas las partes interesadas, además de examinar los productos o empresas de la competencia.
2. Alcance
En este nivel se definen los requisitos funcionales y de contenido. Cuáles son las características y el contenido de la aplicación o el producto que estamos creando. Los requisitos deben cumplir los objetivos estratégicos y deben estar alineados con ellos.
Los Requisitos Funcionales son los requisitos relacionados con las funciones o características del producto, cómo funcionan entre sí y cómo se interrelacionan. Estas características conforman lo que los usuarios necesitan para lograr alcanzar los objetivos.
Los Requisitos de Contenido hacen referencia a la información que necesitamos para aportarle valor al producto. Información como texto, imágenes, audio, vídeos, etc. Si no definimos el contenido, no tendremos forma de hacernos una idea del tamaño ni del tiempo necesarios para completar el proyecto.
Requisitos Funcionales frente a Requisitos de Contenido
Un ejemplo de funcionalidad es implementar un reproductor multimedia con el que poder reproducir canciones, mientras que un ejemplo de contenido estaría representado por los archivos de audio que contienen dichas canciones.
3. Estructura
Aquí se definirá cómo interactúa el usuario con el producto, cómo se comporta el sistema cuando el usuario interactúa con él, cómo y cuánto está éste de organizado y priorizado. La Estructura se divide en dos componentes: Diseño de Interacción y Arquitectura de la Información.
Diseño de interacción: Dados los Requisitos Funcionales, este componente define cómo pueden interactuar los usuarios con el producto y cómo se comporta el sistema en respuesta a las interacciones efectuadas por el usuario.
Arquitectura de la Información: Dados los Requisitos de Contenido, este componente define la disposición de los elementos que conforman el contenido, cómo se organizan estos para facilitar la comprensión humana.
Un buen diseño de interacción
- Ayuda a las personas a alcanzar sus objetivos.
- Comunica eficazmente tanto la interactividad como la funcionalidad (lo que los usuarios pueden hacer).
- Informa a los usuarios de cualquier posible cambio de estado (el archivo se ha guardado, o cualquier otra retroalimentación), mientras estos interactúan.
- Evita errores o posibles equivocaciones llevadas a cabo por el usuario, como, por ejemplo, que el sistema le pida al usuario que confirme una acción potencialmente dañina (por ejemplo, borrar).
Una buena arquitectura de la información
- Organiza, categoriza y prioriza la información tanto en función de las necesidades del usuario como en función de los objetivos establecidos por la empresa.
- Facilita la comprensión y el desplazamiento a través de la información presentada.
- Es flexible para poder así adaptarse tanto al crecimiento como al cambio.
- Se adecúa a la audiencia.
4. Esqueleto
El Esqueleto determina el aspecto visual que se mostrará en la pantalla, es decir, la presentación y disposición de todos los elementos que nos permiten interactuar con las funcionalidades implementadas en el sistema que se encuentra detrás de la interfaz de usuario. También determina cómo se mueve el usuario por la información mostrada, y cómo se presenta dicha información para que resulte eficaz, clara, obvia.
A este respecto, es frecuente el uso de Wireframes que permiten crear una estructura visual, mediante el uso de diagramas estáticos, con los que mostrar el aspecto que tendrá el producto, incluyendo su contenido, la navegación, y los elementos que proporcionarán la interacción.
El Esqueleto se divide en tres componentes: Diseño de la Interfaz, Diseño de Navegación y Diseño de la Información.
El Diseño de la Interfaz consiste en presentar y organizar los elementos de la interfaz de usuario para que dichos usuarios puedan interactuar con las funcionalidades implementadas en el sistema.
El Diseño de Navegación define cómo navegará el usuario por la información mostrada mediante el uso de la interfaz de usuario.
El Diseño de la Información define cómo se presentará la información, de tal forma que facilite su comprensión.
Así pues, el Esqueleto debe responder a estas preguntas
- Qué aspecto visual se mostrará en la pantalla.
- Cómo se presentarán y organizarán las posibles interacciones.
- Cómo se moverán los usuarios por el sitio web o la aplicación.
- Cómo se presentará el contenido de forma clara.
5. Superficie
Este nivel es la suma total de todo el trabajo y todas las decisiones que hemos tomado con anterioridad. Determina el aspecto que tendrá el producto y la elección de un diseño adecuado: su tipografía, sus colores, etc.
En el nivel Superficie, nos ocuparemos del Diseño Visual (Diseño Sensorial), que hace referencia a todo aquello que tiene que ver con el aspecto visual del contenido, de los controles, es decir, de todo lo que pueda dar una pista sobre lo que los usuarios pueden llevar a cabo y de cómo interactuar con ellos. Este nivel debe facilitar la comprensión de las cosas, aumentar la capacidad cognitiva con la que poder asimilar lo que los usuarios ven en la pantalla.
Cómo trabajan juntos los elementos de UX
Cada nivel depende de los demás. Si metes la pata en el nivel donde se estableció la Estrategia, lo pagarás durante todo el proyecto. Cuando tomas una decisión o haces una elección en un nivel, esta decisión afectará a tus decisiones futuras en los siguientes niveles.
Tus decisiones pueden cambiar con el tiempo, y si consideras que las decisiones son inmutables, acabarás construyendo algo que nadie quiere. Si estás en el nivel donde se establece la Superficie, y necesitas hacer más efectiva la funcionalidad, puedes volver al nivel donde fijaste la Estructura con el fin mejorarlo.
Para resumir cómo funcionan juntos estos 5 elementos, empezamos con la Estrategia, que es la base que garantiza el éxito en el campo de la UX. La Estrategia se transforma en Alcance cuando, tanto las necesidades del usuario como los objetivos de la empresa, se traducen en Requisitos de Contenido y Requisitos de Funcionalidad.
El Alcance desemboca en Estructura cuando definimos las formas en que se producirá la interacción con las funcionalidades del sistema, la respuesta de este y cómo se organiza en el mismo la información. Esbozar cada pantalla de dicho sistema (es decir, utilizar los Wireframes) para mostrar las áreas de interacción y la estructura definida en el nivel Estructura, y cómo se presentará la información con claridad, es lo que hacemos en el nivel Esqueleto. Por último, en el nivel Superficie, llevamos todo el trabajo y las decisiones que hemos tomado a la presentación visual final.
