Upload
workshop-digital
View
754
Download
2
Embed Size (px)
Citation preview
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 :)