USABILIDAD Y EXPERIENCIA DE USUARIO

QUIENES SOMOSRODRIGO VERA Diseñador Gráfico especialista en UX/AI/IXD. Trabaja actualmente en Chilexpress como Diseñador Experiencia Cliente en la Sub Gerencia de Canal Digital. Co-Leader de IxDA Santiago y entusiasta evangelizador UX.

SOFÍA SAVOY Diseñadora gráfica especialista en UX/AI. Trabaja actualmente en IDA, destacada consultora de experiencia de usuario, en donde está a cargo de la arquitectura de información, usabilidad y experiencia de usuario.

AGENDA• DISEÑO CENTRADO EN EL USUARIO (DCU)

• METODOLOGÍAS DEL DCU

• TALLER PRÁCTICO

DCU / UXDISEÑO CENTRADO EN EL USUARIO

EXPERIENCIA DE USUARIO

–Steve Krug

“Por norma tenemos que a la gente, en general, no le gusta sentirse desconcertada cuando se pone a pensar en cómo hacer las cosas.

El que las personas que crean los sitios no se preocupen demasiado de facilitar el trabajo (y hacerlo evidente) puede llegar a minar

nuestra confianza en el sitio y sus editores.”

DISEÑO CENTRADO EN EL USUARIO

• El DCU es el proceso de diseño de

productos o servicios enfocados a las

necesidades de los usuarios, para

brindarles satisfacción, cumplir sus

expectativas y generarles una buena

experiencia.

Existen algunas preguntas que se hacen en este proceso y sobre las cuales se

aplican metodologías para obtener sus respuestas:

!

• Quiénes son los usuarios

• Cuáles son las tareas y metas

• Cuál es su nivel de experiencia

• Cuáles son los casos extremos

• Qué información se necesita de los usuarios

• Cómo se espera que el producto funcione y sea entendido

EXPERIENCIA DE USUARIO (UX)

La Experiencia de Usuario va de la mano con

el DCU, pues esta metodología se enfoca a

generar una buena experiencia... experiencia

que debe ser diseñada y que apunta al grado

de satisfacción que tienen los usuarios al

utilizar un producto o servicio.

Se requiere empatía para entender las

emociones y motivaciones de los usuarios

respecto a la interacción que tengan con los

productos, además de considerar los

aspectos técnicos y logísticos que ayudarán

a diseñar la experiencia.

!

Es un conjunto de factores, cuyo resultado es

la creación de un producto o servicio.

No depende sólo de factores de diseño, sino

también de las emociones y sentimientos que

genera una marca en los usuarios.

METODOLOGÍAS DEL DCU

–Louis Rosenfeld y Peter Morville

“Clasificar la misión y visión del sitio, equilibrando las necesidades del patrocinador, y las necesidades de la audiencia.”

La etapa de estrategia consiste en planear los proceso y acciones para el desarrollo

de un proyecto, donde se define lo siguiente:

!

• Objetivos y metas

• Marco funcional y especificaciones

• Hitos, plazos y entregables (carta gantt)

• Análisis comparativo de referentes (benchmark)

• Casos de uso y público objetivo (personas y escenarios)

ESTRATEGIA

ESTRATEGIA | Benchmark

En sí vemos lo que hacemos y cómo

lo hacemos, contra lo que hacen los

mejores en su clase y cómo lo hacen.

El Benchmarking es una herramienta

estratégica que consiste en la búsqueda

de referentes en la competencia de una

marca u organización midiendo de forma

comparativa elementos destacables

(a favor y en contra).

ESTRATEGIA | Benchmark

Algunos de los criterios y elementos a analizar son:

!

• Estructura de navegación

• Aspectos de usabilidad

• Definiciones de diseño

• Elementos propios del contenido

ESTRATEGIA | PersonasLos usuario que se representan en la ficha no son

usuario reales, pero si construidos a partir de ellos.

Los personajes representados no deben superar

los ocho, y deben representar tus usuarios 100%

potenciales.

!

El objetivo de este documento es que facilita a los

diseñadores y arquitectos la comprensión de los

diferentes modelos mentales de los usuario

potenciales para la toma de decisiones en el

modelo de diseño centrado en el usuario.

ESTRATEGIA | EscenariosSuelen identificar aspectos importantes que afectan

a la utilización de un producto en el mundo real y

que no se pueden identificar ni tenerse en cuenta de

otro modo. Son útiles a lo largo del proceso de

diseño, especialmente al desarrollar descripciones

de tareas para las pruebas de usabilidad.

Los escenarios suelen basarse en la información

reunida durante el análisis del flujo de trabajo del

DCU. Algunos se centran en el nivel funcional,

mientras que otros proporcionan información

detallada sobre el nivel de una tarea.

ESTRATEGIA | Personas y Escenarios

–Richard Saul Wurman

“El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el

conocimiento y la compresión de la información.”

ARQUITECTURA DE INFORMACIÓN (AI)Es la disciplina encargada de estudiar, analizar,

organizar y estructurar la información de un

sistema, logrando que el acceso a ella sea eficiente.

!

La arquitectura de la información es fundamental

para la estructuración un producto, pues es la base

a partir de la cual se piensan las interacciones y es

una guía para el diseño de interfaz.

ARQUITECTURA DE INFORMACIÓN (AI)Sirve para que cualquier espacio de información,

ya sea simple o complejo, permita al usuario:

!

• Acceder sin dificultades y de manera amigable

• Encontrar lo que buscaba o utilizar el sistema

sin complicaciones

• Obtener una grata experiencia

AI | CardsortingEs una técnica participativa que permite organizar y

definir la distribución de las categorías y contenidos,

donde se observa cómo los usuarios o clientes

agrupan estos elementos según su criterio.

!

De esta forma se obtienen resultados eficaces para

estructurar un sitio.

AI | Inventario de contenidoEs la documentación que concentra todo el contenido a incluir en un proyecto,

tras el análisis de cliente y de las áreas involucradas, considerando los contenidos

nuevos y existentes.

!

El inventario ordenará la jerarquía del contenido en términos de importancia

relativa, detallando el por qué de su relevancia y la proyección que tiene o podría

tener en el proyecto.

AI | Mapa de navegación

Esta distribución debe estar detallada

según los niveles de navegación, lo

que permite una lectura fácil y una

visión general de cómo se

estructurará nuestro espacio digital.

Es el resultado final de los pasos mencionados anteriormente,

donde se jerarquizan y etiquetan los contenidos adecuadamente

en secciones según criterios de búsqueda.

PARTITURAS DE INTERACCIÓNLas partituras conforman un lenguaje visual que define y modela la

interacción de proyectos digitales. Esta notación gráfica articula la

relación entre el usuario, la interfaz y el sistema.

!

Se componen de tres capas u horizontes:

!

• Acciones del usuario: intención del usuario.

• Contacto directo: acción que el usuario realiza en el sitio o aplicación.

• Sistema: proceso interno como respuesta a la acción del usuario.

!

[ Ref: http://eadpucv.github.io/pix/ ]

PARTITURAS DE INTERACCIÓN

WIREFRAMESLos wireframes son la jerarquización visual de los

contenidos de nuestro espacio digital, y nos

servirán para definir su estructura, funcionalidades y

conectar lo conceptual con lo visual, considerando:

!

• Ser simples, pero no descuidados

• Representar los elementos gráficos

esquemáticamente

• Utilizar escala de grises

• Evitar utilizar más de una tipografía

• Usar contenido real siempre que sea posible

DISEÑO RESPONSIVE

• Mejora la experiencia de navegación

• Favorece el posicionamiento en buscadores

• Ahorra costos de mantención al ser una

sola web

• Ayuda a la accesibilidad del contenido

Es un modo de diseño que permite que un sitio web se adapte a la

resolución de cualquier dispositivo, visualizándose perfectamente.

Este diseño además proporciona ventajas significativas:

Existen diferencias en el modo de diseñar los sitios web para que sean visualizados

en distintos dispositivos:

Responsive Design Se basa en una grilla fluida y media queries para controlar el diseño y su contenido al ser visualizado en distintos dispositivos.

Liquid Design Utiliza porcentajes para los anchos, permitiendo que las columnas sean relativas unas a otras y que el diseño se escale fluidamente.

Web Mobile Es la versión de un sitio web para dispositivos móviles. Se presenta según el tamaño de pantalla preestablecido.

DISEÑO RESPONSIVE

TEST DE USUARIOUn test de usuarios es una prueba de usabilidad

que se basa en la observación y análisis de

cómo un grupo de usuarios reales utiliza el

sitio web, anotando los problemas de uso con

los que se encuentran para poder solucionarlos

posteriormente.

!

Se trata de una prueba llevada a cabo en

laboratorio. Además de descubrir problemas y

potenciales mejoras para un sitio web o

aplicación, es la manera más cercana de

aproximarse al uso real de éste.

TEST DE USUARIO•El número óptimo de participantes en la prueba debe ser al menos 5.

!

•En la medida de lo posible, los participantes deberían tener perfiles y características

acordes con la audiencia potencial del sitio web.

!

•Se elabora un guión en el que se describa: qué le va a decir a cada participante; que

le va a pedir que haga; cómo va a hacerlo; cuánto tiempo estima necesario para

cada paso en la prueba (su función es orientativa)

!

•Antes de enfrentar al usuario con la interfaz debemos establecer un ambiente

amigable y confortable.

TEST HEURÍSTICOLos heurísticos son una serie de factores de

usabilidad que deben ser considerados a la hora de

realizar un análisis de una web. Se trata de un análisis

realizado por expertos, el número ideal de expertos va

de 3 a 5. A los expertos se les entrega una pauta de

corrección y un sitio a evaluar.

!

Posteriormente se recomienda realizar un test de

usuarios para completar la evaluación. Es un análisis

por expertos, el número ideal de expertos va de 3 a 5.

TEST HEURÍSTICOPara evaluar usaremos la siguiente escala con notas del 1 al 5:

!

1. Se da la mínima expresión del heurístico en las páginas evaluadas

(insatisfactorio)

2. Se da una expresión baja del heurístico en las páginas evaluadas

3. Se da una expresión media del heurístico en las páginas evaluadas

4. Se da una expresión alta del heurístico en las páginas evaluadas

5. Se da la máxima expresión del heurístico en las páginas evaluadas

(satisfactorio)

REFERENCIAS

INFORMATION ARCHITECTURE FOR DE WORLD WIDE WEB

(Morville & Rosenfeld)

THE ELEMENTS OF USER EXPERIENCE

(Jesse James Garret)

THE GUIDE TO WIREFRAMING (Chris Bank)

!http://uxpin.com/guide-to-wireframing.html

VOCABULARIO VISUAL PARA DESCRIBIR LA

ARQUITECTURA DE INFORMACIÓN !

http://www.jjg.net/ia/visvocab/spanish.html

PARTITURAS DE INTERACCIÓN PIX !

http://eadpucv.github.io/pix/

TALLER¡MANOS A LA OBRA!

GRACIAS :)