Los Elementos de la experiencia de usuario. Presentación sobre propuesta de Jasse James Garret en función de los elementos y pilares del desarrollo de aplicaciones web apetecibles para los usuarios.

1. Manfred
Pérez
La experiencia
de usuario

2. 5
s nt
Lo e
em
el os

3. Estrategia Alcances Estructura Esqueleto Superficie

7. Diseño centrado en
Un proceso deusuario

el desarrollo de productos.
 El producto en sí mismo no es el fin.
 El producto final es el medio para brindar
una experiencia de usuario satisfactoria.
 Es un conjunto de métodos enfatizados
en entender al usuario más que a la
tecnología.

8. La Experiencia de
usuario
La sensación, sentimiento, respuesta emocional, valoración y
satisfacción del usuario respecto a un producto, resultado del
fenómeno de interacción con el producto y proveedor.
Experiencia de Usuario
Valores
Emociones Usabilidad
Expectativas Funcionalidad
Experiencias Previas Tamaño, Peso
Características físicas Lenguaje, Símbolos
Personalidad
Motivación
Usuario Interacción Producto
Características Estéticas
Utilidad
Habilidades Reputación
Años Adaptabilidad
etc… Movilidad
Factores Sociales Factores Contexto de uso etc…
Presión de tiempo Culturales Tiempo
Presión de Éxito y fracaso Sexo Símbolos Lugar
Requerimientos Explícitos e Implícitos Hábitos Religión Temperatura
etc… Normas Lenguaje, etc… Acompañamiento de Personas
etc…
Arhippainen y Tähti (2003)

9. g e n ie
In ría
re ve r sa

20. 5
s s
Lo no
p la

23. Diseño de la
Información

24. Especificaciones
Funcionales
Diseño de la
Información

25. Arquitectura de
Información
Especificaciones
Funcionales
Diseño de la
Información

26. Arquitectura de
Información
Especificaciones
FuncionalesDiseño
Interactivo
Diseño de la
Información

27. Arquitectura de
Información
Especificaciones
FuncionalesDiseño
Interactivo
Diseño de la
Información
Diseño de Interfaz

28. Arquitectura de
Información
Especificaciones
FuncionalesDiseño
Interactivo
Diseño de la
Información
Requerimientos de
Diseño de Interfaz
Contenido

29. Arquitectura de
Información
Especificaciones
FuncionalesDiseño
Interactivo
Diseño de la
Diseño de
Información
Navegación
Requerimientos de
Diseño de Interfaz
Contenido

34. l
ta s
e a
D l le
e as
d p
c a

35. Estrategia

36. Necesidades del usuario
 Que debe hacer el sitio para los que lo
utilizan.
Objetivos del sitio
 Que debe hacer el sitio para los que lo
construyen.

37. …funcionen
…se puedan utilizar
…cumplan con las expectativas

38. Lamejor forma de
descubrir las
necesidades del
usuario.
Muchas técnicas,
unas cortas y
baratas, otras
largas y costosas

39. Permite identificar
y manejar las
necesidades de los
usuarios.
Dividea su
audiencia en
segmentos
basados en
características
compartidas.

40. Permite identificar
y manejar las
necesidades de los
usuarios.
Dividea su
audiencia en
segmentos
basados en
características
compartidas.

41. Permite identificar
y manejar las
necesidades de los
usuarios.
Dividea su
audiencia en
segmentos
basados en
características
compartidas.

42.  Bosquejos
personalizados
basados en la
investigación del
usuario.
 Permite
extrapolarizar un
conjunto general
de características
a un caso
específico.

43. ...Metas de Negocios.
...Conductores de Negocios.
...Requerimientos de negocios.

44.  Laúnica manera
de saber si ha
habido cambios
en el sitio que
hagan la
diferencia.
 Que las métricas
estén ajustados a
la realidad de los
objetivos

45.  Necesidades
del usuario
 Investigación de
usuario
 Segmentación de
usuarios
 Personas
 Objetivos del
sitio
 Métricas de éxito

46. Alcances

47. Especificaciones
funcionales.
 Características de la aplicación que el sitio debe de
incluir.
Requerimientos de
contenido.
 Elementos de contenido que el sitio debe de incluir.

48.  Quécaracterísticas de la aplicación
concuerdan con las necesidades del
usuario y sus metas.
 Enfoque en “¿Qué hace esto?”
 No en “¿Cómo esto trabaja?”
 No en “¿Qué no hace esto?”
 Ser específico, sin dictar el diseño del
sistema.

49.  ¿Quéinformación los usuarios
necesitan o quieren del sitio?
 ¿Qué forma debe tomar?
 ¿De dónde viene?
 ¿Quién es el responsable?
 Definiciónde los elementos de acuerdo
con el propósito.

50. ¡Documentar!
80%

51.  Requerimeinto
de contenido
 Investigación de usuario
 Especificaciones
funcionales
 Mantener la
documentación siempre

52. Estructura

53. Diseño interactivo.
 Como se mueve el usuario desde el primer paso
en el proceso hacia el siguiente.
Arquitectura de
Información.
 Como se mueve el usuario desde un elemento de
contenido hacia el siguiente.

54. Diseño
interactivo.
 Acciones que el usuario
puede tomar en respuesta
al sistema.
 Acciones que el sistema
que puede tomar en
respuesta al usuario..

55. Arquitectura de
Información.
 Definición conceptual de la
relación entre los elementos
de contenido
 Refleja la manera en que los
usuarios piensan del tema.
 Comúnmente jerárquico,
pero no necesariamente.

56. Vehículo
Término
ampliado
Mecánico
Términos
Carro Automóvil Relacionados
Variante de
Término
Tráfico
Términos Relacionados
Doble Tracción Toyota

57. La Auditoría determina Tipos y
Metadatos.
Se enlista el inventario del contenido.
Examinar la Arquitectura permite ayuda a dimensionar el
alcance del contenido.

58.  Representaciones
visuales, hacen
que se trabaje
mejor.
 Losdiagramas
pueden ser tan
simples o
complejos, según
su necesidad.
 Vocabulario visual.

59.  Diseño
Interactivo.
 Arquitectura de
Información.
 Estructura
de la
documentación.

60. Esquema

61. Diseño de la información.
 Facilita la comprensión de la información.
Diseño de interfaz
 Ayuda las entradas del usuario y las salidas del
sistema.
Diseño de la navegación
 Favorece los movimientos a través del sitio.

62. Diseño de Información
 ¿Cómo podemos presentar la información para
que sea entendida y utilizada por la gente?
 Comunicar la importancia relativa de las
diferentes partes de la información.
 Guiar al usuario de una parte de información a
otra.
 Llamar la atención a los detalles importantes.
 Comunicar la relación entre los elementoso

66. Diseño de Interfaz

67. Diseño de Interfaz

70.  Diseñode la
información
 Diseño de
interfaz
 Diseño
de la
navegación
 Boceto
estructural
(Wireframe)

71. Apariencia

72. Look and Feel.
 Lo que la gente usualmente piensa cuando usted
dice “diseño web”.
 Es más que estética.

82.  Diseño visual.
 Apego a
identidad de
marca.
 Paleta
de
colores.
 Tipografía.

83. ®
© 2009-2010. Todos los derechos reservados. TransCyberiano® Seminario TransCyberiano S.A. Todos los Derechos Reservados.
El nombre Seminario TransCyberiano®, el logotipo Seminario TransCyberiano® y el símbolo de Seminario TransCyberiano® son marcas
registradas por Seminario TransCyberiano S.A. y se encuentran protegidas en Costa Rica (No.178289) y otros países.