Presentación de la primera jornada del Workshop Digital donde se abaracaron las temáticas del diseño centrado en el usuario y sus metodologías, experiencia de usuario, y diseño responsive.

1. USABILIDAD Y
EXPERIENCIA DE USUARIO

2. QUIENES SOMOS
RODRIGO 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.

3. AGENDA
• DISEÑO CENTRADO EN EL USUARIO (DCU)
• METODOLOGÍAS DEL DCU
• TALLER PRÁCTICO

4. DCU / UX
DISEÑO CENTRADO EN EL USUARIO
EXPERIENCIA DE USUARIO

5. –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.”

6. 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.

7. 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

9. 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.

10. 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.

11. METODOLOGÍAS DEL DCU

12. –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.”

13. 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

14. 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).

15. 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

16. 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
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.

17. ESTRATEGIA | Escenarios
Suelen 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.

18. ESTRATEGIA | Personas y Escenarios

19. –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.”

20. 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.

21. 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

22. AI | Cardsorting
Es 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.

23. AI | Inventario de contenido
Es 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.

24. 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.

26. PARTITURAS DE INTERACCIÓN
Las 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/ ]

27. PARTITURAS DE INTERACCIÓN

28. WIREFRAMES
Los 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

30. 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:

31. 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

33. TEST DE USUARIO
Un 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.

34. 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.

35. TEST HEURÍSTICO
Los 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.

36. TEST HEURÍSTICO
Para 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)

37. REFERENCIAS

38. 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

39. 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/

40. TALLER
¡MANOS A LA OBRA!

41. GRACIAS :)