Explicación del modelo de desarrollo de contenido y estructuras para web basado en la experiencia de usuario

1. PERFIL DE USUARIOS
{ Taller
Diseño Gráfico 6
ANALISIS DE USO Y DISEÑO
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

2. PERFIL DE USUARIOS
{ POR QUÉ EL DISEÑO DEBE DE PREOCUPARSE DE
LA AI?
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

3. PERFIL DE USUARIOS
“debemos ser capaces de
transformar la información
en comunicación”
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

4. PERFIL DE USUARIOS
{
Un buen diseño de la información, desde el punto de
vista organizativo y de su usabilidad, será aquel que
ayude al usuario a encontrar la información que
busca de la forma más fácil, rápida y cómoda
posible.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

5. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

6. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

7. PERFIL DE USUARIOS
{ Hay una diferencia sustancial entre
presentación y organización.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

8. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

9. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

10. PERFIL DE USUARIOS
{ CONTRASTE
DE COLORES
para discriminar y distribuir información
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

11. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

12. PERFIL DE USUARIOS
{ POSICIONANDO
INFORMACIÓN
relevante en zonas visuales superiores
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

13. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

14. PERFIL DE USUARIOS
{ TODO ESTO SE DEBE DE HACER
PENSANDO EN LA PROYECCIÓN DE LA
INFORMACIÓN DEL SITIO
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

15. PERFIL DE USUARIOS
RECUPERACIÓN
DE LA INFORMACIÓN
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

16. PERFIL DE USUARIOS
{
HACER QUE LA INTERFACE SEA UNA GUIA
PARA EL USUARIO, DEFINIENDO
METÁFORAS, MAPAS Y PATRONES DE
ACERCAMIENTO A LA INFORMACION
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

17. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

18. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

19. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

20. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

21. PERFIL DE USUARIOS
{ LA EXPERIENCIA
DE USUARIO
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

22. PERFIL DE USUARIOS
"LO QUE SE PERSIGUE ES GENERAR
{
SENSACIONES Y VALORACIONES DE LOS
USUARIOS HACIA NUESTRO SITIO WEB LO MÁS
AGRADABLES, POSITIVAS Y SATISFACTORIAS
POSIBLES"-, ADEMÁS DE RESEÑAR LA "FIDELIDAD
DEL USUARIO" COMO CONSECUENCIA DE
ALCANZAR ESTE OBJETIVO.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

23. PERFIL DE USUARIOS
"LO QUE SE PERSIGUE ES GENERAR
{
SENSACIONES Y VALORACIONES DE LOS
USUARIOS HACIA NUESTRO SITIO WEB LO MÁS
AGRADABLES, POSITIVAS Y SATISFACTORIAS
POSIBLES"-, ADEMÁS DE RESEÑAR LA "FIDELIDAD
DEL USUARIO" COMO CONSECUENCIA DE
ALCANZAR ESTE OBJETIVO.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

24. PERFIL DE USUARIOS
La visión que un
producto o servicio
puede acompañar al
Cliente en todo el
ciclo de vida del
mismo.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

25. PERFIL DE USUARIOS
La visión que un
producto o servicio
puede acompañar al
Cliente en todo el
ciclo de vida del
mismo.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

26. PERFIL DE USUARIOS
La visión que un
producto o servicio
puede acompañar al
Cliente en todo el
ciclo de vida del
mismo.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

27. PERFIL DE USUARIOS
La visión que un
producto o servicio
puede acompañar al
Cliente en todo el
ciclo de vida del
mismo.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

28. PERFIL DE USUARIOS
La visión que un
producto o servicio
puede acompañar al
Cliente en todo el
ciclo de vida del
mismo.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

29. PERFIL DE USUARIOS
La visión que un
producto o servicio
puede acompañar al
Cliente en todo el
ciclo de vida del
mismo.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

30. PERFIL DE USUARIOS
{
EL PLANTEAMIENTO DEBE ABORDAR EL SITIO
DESDE SU IDEA (ESPACIO ABSTRACTO) HASTA SU
VISUALIZACIÓN Y RECORRIDO (ESPACIO
CONCRETO)
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

31. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

32. PERFIL DE USUARIOS
{ EJEMPLO
HIPERTEXTUAL.COM
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

33. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

34. PERFIL DE USUARIOS
LA EXPERIENCIA DE USUARIO EN ESTE SITIO SE DEFINE
POR 5 PUNTOS DESDE EL PLANTEAMIENTO
HIPERTEXTUAL:
•Claridad y amabilidad en el diseño, con líneas curvas, sin
estridencias.
•Alto contraste entre la navegación y el contenido
•Máxima relevancia del mensaje con alta jerarquía visual
•Zonas de relax, para descansar la vista (gráfico y espacios en
blanco)
•Muestra de todo el producto, compatibilizando la utilidad
(enlaces a los RSS) con la publicidad (del producto)
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

35. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

36. PERFIL DE USUARIOS
QUE SE CONSIGUE CON TODO ESTO?
•Se enseña todo el producto (blogs sectoriales)
•La cantidad y la diversidad de la temática de su producto
•No se agobia al usuario con mucha información,
independientemente de cuál sea su perfil
•Es sencillo moverse y navegar por el sitio
•En general la primera impresión permite leer todo el contenido
de la home
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

37. PERFIL DE USUARIOS
{ FACTORES
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

38. PERFIL DE USUARIOS
Para Kankainen (2002) la Experiencia del Usuario es
resultado de una acción motivada en un contexto
determinado, haciendo especial énfasis en la importancia
condicionante de las expectativas del usuario y las
experiencias previas, y por tanto en la capacidad de
influencia de la actual experiencia en sus expectativas y
futuras experiencias.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

39. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

40. PERFIL DE USUARIOS
{ METODOS DE APLICACIÓN
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

41. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

42. PERFIL DE USUARIOS
necesidades
del usuario { reuniones formativas e informativas
encuestas
entrevistas
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

43. PERFIL DE USUARIOS
análisis del
entorno { análisis de la competencia
condicionantes de los contenidos
alcance de la información
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

44. PERFIL DE USUARIOS
arquitectura
de la
información
{ card sorting
mapas (navegación, conceptuales)
indización social
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

45. PERFIL DE USUARIOS
diseño de la
información { blueprints
mock ups
wireframes
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

46. PERFIL DE USUARIOS
{
los niveles de prototipos son:
diseño de la Prototipos de baja fidelidad o estáticos
información (wireframes, mockup)
Prototipos de fidelidad intermedia (diseño
gráfico)
Prototipos de alta fidelidad o dinámicos (Web,
HTML)
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

47. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

48. PERFIL DE USUARIOS
diseño de la
información { blueprints
mock ups
wireframes
vocabulario visual de J.J Garrett
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

49. PERFIL DE USUARIOS
Los diagramas son una herramienta esencial para
comunicar arquitectura de información y diseño de
interacción en equipos de desarrollo Web.
vocabulario visual de J.J Garrett
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

50. PERFIL DE USUARIOS
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

51. PERFIL DE USUARIOS
Elementos simples: páginas, documentos y
pilas de éstos
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

52. PERFIL DE USUARIOS
Creando relaciones: conectores y flechas
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

53. PERFIL DE USUARIOS
Creando relaciones: conectores y flechas
Nótese que estas flechas no son como las flechas que indican una calle de un solo
sentido, más bien son como las flechas de una señalética. El usuario no está
impedido de moverse en dirección opuesta; la flecha indica solamente la dirección
en la cual el usuario probablemente querrá ir.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

54. PERFIL DE USUARIOS
Todo de una vez: conjuntos concurrentes
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

55. PERFIL DE USUARIOS
Separándolo: puntos de continuación
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

56. PERFIL DE USUARIOS
Elementos comunes: áreas y áreas iterativas
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

57. PERFIL DE USUARIOS
Elementos comunes: áreas y áreas iterativas
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

58. PERFIL DE USUARIOS
Haciendo elecciones: puntos de decisión
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

59. PERFIL DE USUARIOS
Elección múltiple: ramas condicionales
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

60. PERFIL DE USUARIOS
Descargar la galería de formas de garrett para los
trabajos a desarrollar la siguientes clases:
http://www.jjg.net/ia/visvocab/spanish.html#download
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

61. PERFIL DE USUARIOS
diagramas de funcionamiento y los diagramas
de presentación
Se proponen otros iconos
más trabajados visualmente,
con el objetivo de representar
el comportamiento interactivo
del producto.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

62. PERFIL DE USUARIOS
diagrama de funcionamiento
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

63. PERFIL DE USUARIOS
diagrama de presentación
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

64. PERFIL DE USUARIOS
diseño de la
información { blueprints
mock ups
wireframes
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

65. PERFIL DE USUARIOS
{
En diseño web, un wireframe es una representación
esquemática de una página web sin elementos gráficos
que muestran contenido y comportamiento de las páginas.
Sirven como herramienta de comunicación y discusión
entre arquitectos de información, programadores,
diseñadores y clientes.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

66. PERFIL DE USUARIOS
Un wireframe grafica básicamente:
Elementos de navegación: menús, accesos directos e
hipervínculos.
Elementos de información: contenidos de texto e imágenes.
Elementos de interacción: herramientas o funcionalidades que el
usuario puede realizar.
Elementos de apoyo: ítems de ayuda y orientación, como mapas
de navegación o faqs.
Elementos promocionales: espacio dedicado a banners
publicitarios o a destacados internos del propio producto.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

67. PERFIL DE USUARIOS
wireframe home bancochile.cl
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

68. PERFIL DE USUARIOS
mockup home bancochile.cl
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

69. PERFIL DE USUARIOS
wireframe home
duckpoolroad.org
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

70. PERFIL DE USUARIOS
mockup home
duckpoolroad.org
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

71. PERFIL DE USUARIOS
{ ENCARGO
BLUEPRINT MOVIL
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

72. PERFIL DE USUARIOS
{ Basado en el encargo de uso de su teléfono móvil, se
solicita crear diagrama de las funciones del aparato
utilizando el vocabulario visual de Garrett.
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

73. PERFIL DE USUARIOS
{ ENCARGO
BLUEPRINT+WIREFRAME
lunes 13/09
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010

74. PERFIL DE USUARIOS
De los sitios seleccionados como buenos por ustedes en la
clase 2 de internet, elegir el mejor logrado y crear para entrega
en taller:
01. Diagrama del sitio con el vocabulario visual de Garrett
02. Wireframe de al menos tres tipos de pantallas diferentes
03. Diagrama de funcionamiento del sitio
04. Análisis de las variables visuales como tipografías
utilizadas, paleta de colores descompuesta por relevancias y
significancia, lenguaje de las imágenes utilizadas.
{
Se entrega informe en formato PDF para ser revisado a pantalla completa en
clases.
El diagrama de sitio y diagrama de funcionamiento impresos en formato
doble carta / tabloide
TALLER DISEÑO GRÁFICO VI DUOC UC AGOSTO2010
jueves 9 de septiembre de 2010