USABILIDAD Y

EXPERIENCIA DE USUARIO

QUIENES SOMOS
RODRIGO VERA
Diseador Grfico especialista en UX/AI/IXD.
Trabaja actualmente en Chilexpress como Diseador Experiencia
Cliente en la Sub Gerencia de Canal Digital. Co-Leader de IxDA
Santiago y entusiasta evangelizador UX.

SOFA SAVOY
Diseadora grfica especialista en UX/AI.
Trabaja actualmente en IDA, destacada consultora de
experiencia de usuario, en donde est a cargo de la arquitectura
de informacin, usabilidad y experiencia de usuario.

AGENDA
DISEO CENTRADO EN EL USUARIO (DCU)
METODOLOGAS DEL DCU
TALLER PRCTICO

DCU / UX
DISEO CENTRADO EN EL USUARIO
EXPERIENCIA DE USUARIO

Por norma tenemos que a la gente, en general, no le gusta sentirse

desconcertada cuando se pone a pensar en cmo 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.
Steve Krug

DISEO CENTRADO EN EL USUARIO

El DCU es el proceso de diseo de

productos o servicios enfocados a las
necesidades de los usuarios, para
brindarles satisfaccin, cumplir sus
expectativas y generarles una buena
experiencia.

Existen algunas preguntas que se hacen en este proceso y sobre las cuales se
aplican metodologas para obtener sus respuestas:
!

Quines son los usuarios

Cules son las tareas y metas
Cul es su nivel de experiencia
Cules son los casos extremos
Qu informacin se necesita de los usuarios
Cmo 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 metodologa se enfoca a
generar una buena experiencia... experiencia
que debe ser diseada y que apunta al grado
de satisfaccin que tienen los usuarios al
utilizar un producto o servicio.

Se requiere empata para entender las

emociones y motivaciones de los usuarios
respecto a la interaccin que tengan con los
productos, adems de considerar los
aspectos tcnicos y logsticos que ayudarn
a disear la experiencia.
!

Es un conjunto de factores, cuyo resultado es

la creacin de un producto o servicio.
No depende slo de factores de diseo, sino
tambin de las emociones y sentimientos que
genera una marca en los usuarios.

METODOLOGAS DEL DCU

Clasificar la misin y visin del sitio, equilibrando las

necesidades del patrocinador, y las necesidades de la audiencia.

Louis Rosenfeld y Peter Morville

ESTRATEGIA
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)
Anlisis comparativo de referentes (benchmark)
Casos de uso y pblico objetivo (personas y escenarios)

ESTRATEGIA | Benchmark
El Benchmarking es una herramienta
estratgica que consiste en la bsqueda
de referentes en la competencia de una
marca u organizacin midiendo de forma
comparativa elementos destacables
(a favor y en contra).
En s vemos lo que hacemos y cmo
lo hacemos, contra lo que hacen los
mejores en su clase y cmo lo hacen.

ESTRATEGIA | Benchmark
Algunos de los criterios y elementos a analizar son:
!

Estructura de navegacin
Aspectos de usabilidad
Definiciones de diseo
Elementos propios del contenido

ESTRATEGIA | Personas
Los 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

diseadores y arquitectos la comprensin de los
diferentes modelos mentales de los usuario
potenciales para la toma de decisiones en el
modelo de diseo centrado en el usuario.

ESTRATEGIA | Escenarios
Suelen identificar aspectos importantes que afectan
a la utilizacin 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
diseo, especialmente al desarrollar descripciones
de tareas para las pruebas de usabilidad.
Los escenarios suelen basarse en la informacin
reunida durante el anlisis del flujo de trabajo del
DCU. Algunos se centran en el nivel funcional,
mientras que otros proporcionan informacin
detallada sobre el nivel de una tarea.

ESTRATEGIA | Personas y Escenarios

El estudio de la organizacin de la informacin con el objetivo

de permitir al usuario encontrar su va de navegacin hacia el
conocimiento y la compresin de la informacin.
Richard Saul Wurman

ARQUITECTURA DE INFORMACIN (AI)

Es la disciplina encargada de estudiar, analizar,
organizar y estructurar la informacin de un
sistema, logrando que el acceso a ella sea eficiente.
!

La arquitectura de la informacin es fundamental

para la estructuracin un producto, pues es la base
a partir de la cual se piensan las interacciones y es
una gua para el diseo de interfaz.

ARQUITECTURA DE INFORMACIN (AI)

Sirve para que cualquier espacio de informacin,
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 | Cardsorting
Es una tcnica participativa que permite organizar y
definir la distribucin de las categoras y contenidos,
donde se observa cmo los usuarios o clientes
agrupan estos elementos segn su criterio.
!

De esta forma se obtienen resultados eficaces para

estructurar un sitio.

AI | Inventario de contenido
Es la documentacin que concentra todo el contenido a incluir en un proyecto,
tras el anlisis de cliente y de las reas involucradas, considerando los contenidos
nuevos y existentes.
!

El inventario ordenar la jerarqua del contenido en trminos de importancia

relativa, detallando el por qu de su relevancia y la proyeccin que tiene o podra
tener en el proyecto.

AI | Mapa de navegacin
Es el resultado final de los pasos mencionados anteriormente,
donde se jerarquizan y etiquetan los contenidos adecuadamente
en secciones segn criterios de bsqueda.
Esta distribucin debe estar detallada
segn los niveles de navegacin, lo
que permite una lectura fcil y una
visin general de cmo se
estructurar nuestro espacio digital.

PARTITURAS DE INTERACCIN
Las partituras conforman un lenguaje visual que define y modela la
interaccin de proyectos digitales. Esta notacin grfica articula la
relacin entre el usuario, la interfaz y el sistema.
!

Se componen de tres capas u horizontes:

!

Acciones del usuario: intencin del usuario.

Contacto directo: accin que el usuario realiza en el sitio o aplicacin.
Sistema: proceso interno como respuesta a la accin del usuario.

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

PARTITURAS DE INTERACCIN

WIREFRAMES
Los wireframes son la jerarquizacin visual de los
contenidos de nuestro espacio digital, y nos
servirn para definir su estructura, funcionalidades y
conectar lo conceptual con lo visual, considerando:
!

Ser simples, pero no descuidados

Representar los elementos grficos
esquemticamente

Utilizar escala de grises

Evitar utilizar ms de una tipografa
Usar contenido real siempre que sea posible

DISEO RESPONSIVE
Es un modo de diseo que permite que un sitio web se adapte a la
resolucin de cualquier dispositivo, visualizndose perfectamente.
Este diseo adems proporciona ventajas significativas:

Mejora la experiencia de navegacin

Favorece el posicionamiento en buscadores
Ahorra costos de mantencin al ser una
sola web

Ayuda a la accesibilidad del contenido

DISEO RESPONSIVE
Existen diferencias en el modo de disear los sitios web para que sean visualizados
en distintos dispositivos:
Responsive Design

Liquid Design

Web Mobile

Se basa en una grilla fluida y

media queries para controlar
el diseo y su contenido al
ser visualizado en distintos
dispositivos.

Utiliza porcentajes para los

anchos, permitiendo que las
columnas sean relativas unas
a otras y que el diseo se
escale fluidamente.

Es la versin de un sitio web

para dispositivos mviles.
Se presenta segn el tamao
de pantalla preestablecido.

TEST DE USUARIO
Un test de usuarios es una prueba de usabilidad
que se basa en la observacin y anlisis de
cmo 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. Adems de descubrir problemas y
potenciales mejoras para un sitio web o
aplicacin, es la manera ms cercana de
aproximarse al uso real de ste.

TEST DE USUARIO
El nmero ptimo de participantes en la prueba debe ser al menos 5.
!

En la medida de lo posible, los participantes deberan tener perfiles y caractersticas

acordes con la audiencia potencial del sitio web.
!

Se elabora un guin en el que se describa: qu le va a decir a cada participante; que

le va a pedir que haga; cmo va a hacerlo; cunto tiempo estima necesario para
cada paso en la prueba (su funcin es orientativa)
!

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

amigable y confortable.

TEST HEURSTICO
Los heursticos son una serie de factores de
usabilidad que deben ser considerados a la hora de
realizar un anlisis de una web. Se trata de un anlisis
realizado por expertos, el nmero ideal de expertos va
de 3 a 5. A los expertos se les entrega una pauta de
correccin y un sitio a evaluar.
!

Posteriormente se recomienda realizar un test de

usuarios para completar la evaluacin. Es un anlisis
por expertos, el nmero ideal de expertos va de 3 a 5.

TEST HEURSTICO
Para evaluar usaremos la siguiente escala con notas del 1 al 5:
!

1.

Se da la mnima expresin del heurstico en las pginas evaluadas

(insatisfactorio)

2.

Se da una expresin baja del heurstico en las pginas evaluadas

3.

Se da una expresin media del heurstico en las pginas evaluadas

4.

Se da una expresin alta del heurstico en las pginas evaluadas

5.

Se da la mxima expresin del heurstico en las pginas 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 INFORMACIN

PARTITURAS DE INTERACCIN
PIX

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

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

TALLER
MANOS A LA OBRA!

GRACIAS :)