WIREFRAMES 
clase 01 
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
INTRODUCCIÓN
PRESENTACIÓN 
Hola, soy Yerko Pezzopane, y 
bienvenidos al taller de 
Wireframes.
RODRIGO VERA YERKO PEZZOPANE 
Diseñador Gráfico 
Diseñador UX Diseñador UX 
@rots @ypezzopane
RODRIGO VERA YERKO PEZZOPANE 
Diseñador Gráfico 
Diseñador UX Diseñador UX 
@rots @ypezzopane
¿Diseñadores? 
¿Periodistas? 
¿Ingenieros? 
¿Bibliotecarios?
LO QUE VEREMOS HOY 
User Experience 
HCI y principios del diseño universal 
Sicología de las formas
¿ux?
USER EXPERIENCE
USER EXPERIENCE 
Es un conjunto de factores, cuyo resultado es la 
creación de un producto o servicio. 
! 
No depende sólo...
USER EXPERIENCE 
Para hacer UX hay que entender el producto, la 
situación, el contexto y los hábitos de uso de un 
determ...
USER EXPERIENCE 
https://www.youtube.com/watch?v=m9R9z7P1eME
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE
USER EXPERIENCE 
Usabilidad 
USER 
EXPERIENCE 
Factores humanos 
Utilidad 
HCI 
Ergonomía 
Diseño 
Accesibilidad 
Marketin...
INTERACCIÓN HUMANO 
COMPUTADOR
INTERACCIÓN HUMANO COMPUTADOR 
Es la disciplina que estudia el intercambio de 
información mediante software entre las per...
INTERACCIÓN HUMANO COMPUTADOR 
Lo primero y principal es la persona, el usuario 
que utiliza el sistema.
INTERACCIÓN HUMANO COMPUTADOR 
El buen diseño ayuda a la gente a hacer 
cosas que nos importan.
INTERACCIÓN HUMANO COMPUTADOR 
El buen diseño ayuda a la gente a hacer 
cosas que nos importan.
INTERACCIÓN HUMANO COMPUTADOR 
El buen diseño ayuda a la gente a hacer 
cosas que nos importan.
INTERACCIÓN HUMANO COMPUTADOR 
El buen diseño ayuda a la gente a hacer 
cosas que nos importan.
INTERACCIÓN HUMANO COMPUTADOR 
El mal diseño es frustrante.
INTERACCIÓN HUMANO COMPUTADOR 
El mal diseño es frustrante e incluso cuesta vidas.
INTERACCIÓN HUMANO COMPUTADOR 
El mal diseño es frustrante e incluso cuesta vidas.
INTERACCIÓN HUMANO COMPUTADOR 
…e incluso cuesta vidas.
INTERACCIÓN HUMANO COMPUTADOR 
A veces, las mejores interfaces 
se convierten en invisibles 
para nosotros, cuando 
pasamo...
INTERACCIÓN HUMANO COMPUTADOR
INTERACCIÓN HUMANO COMPUTADOR
7 PRINCIPIOS DEL 
DISEÑO UNIVERSAL
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
1. Igualdad de uso 
El diseño debe ser fácil de usar y adecuado para todas las personas...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
1. Igualdad de uso 
El diseño debe ser fácil de usar y adecuado para todas las personas...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
2. Flexibilidad 
El diseño debe poder adecuarse a un amplio rango de preferencias 
y ha...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
2. Flexibilidad 
El diseño debe poder adecuarse a un amplio rango de preferencias 
y ha...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
3. Simple e intuitivo 
El diseño debe ser fácil de entender independientemente de la ex...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
3. Simple e intuitivo 
El diseño debe ser fácil de entender independientemente de la ex...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
4. Información fácil de percibir 
El diseño comunica de manera eficaz la información ne...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
4. Información fácil de percibir 
El diseño comunica de manera eficaz la información ne...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
5. Tolerante a errores 
El diseño debe minimizar las acciones accidentales o fortuitas ...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
5. Tolerante a errores 
El diseño debe minimizar las acciones accidentales o fortuitas ...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
6. Escaso esfuerzo 
El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
6. Escaso esfuerzo 
El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
7. Dimensiones apropiadas 
Los tamaños y espacios deben ser apropiados para el alcance,...
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
7. Dimensiones apropiadas 
Los tamaños y espacios deben ser apropiados para el alcance,...
SICOLOGÍA DE LAS FORMAS
GESTALT
QUÉ ES GESTALT 
Gestalt es un término introducido por primera vez 
por Christian von Ehrenfels que a su vez es un 
vocablo...
QUÉM EESD GIOESS TDAIGLITTALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011 
Rodrigo García R. 
ENTENDER A LAS...
ILUSIONES ÓPTICAS 
¿Pueden contar la cantidad de puntos blancos?
ILUSIONES ÓPTICAS 
¿Estructura con tres extremidades?
ILUSIONES ÓPTICAS 
¿copas?
MEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011 
Rodrigo García R. 
ENTENDER A LAS PERSONAS 
Fue...
ESTO NOS LLEVA A QUE... 
La mente configura, a través de ciertas leyes, los 
elementos que llegan a ella a través de los c...
ESTO NOS LLEVA A QUE... 
! 
La percepción humana pasa por un proceso de 
reestructuración que configura a partir de esa 
i...
EN RESUMEN 
El campo de la sicología de la Gestalt explica cómo la mente 
humana percibe y organiza los estímulos visuales...
LEYES DE GESTALT
Proximidad 
LEYES GESTALT 
1 
2 Similitud 
3 Cierre
1. PROXIMIDAD 
Objetos cercanos entre si tienden 
a ser percibidos como un grupo
1. PROXIMIDAD 
DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011 
Rodrigo García R. 
ENTENDER A LAS PERSO...
1. PROXIMIDAD 
Objetos cercanos entre si tienden 
a ser percibidos como un grupo
1. PROXIMIDAD 
Objetos cercanos entre si tienden 
a ser percibidos como un grupo
2. SIMILITUD 
Objetos similares entre si tienden a 
ser percibidos como un grupo
2. SIMILITUD 
Objetos similares entre si tienden a 
ser percibidos como un grupo
2. SIMILITUD 
Objetos similares entre si tienden a 
ser percibidos como un grupo
2. SIMILITUD 
Objetos similares entre si tienden a 
ser percibidos como un grupo
2. SIMILITUD 
MEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011 
Rodrigo García R. 
ENTENDER A LAS...
3. CIERRE 
Bastan algunas partes del objeto 
para percibir el objeto competo
3. CIERRE 
Bastan algunas partes del objeto 
para percibir el objeto competo
3. CIERRE 
Bastan algunas partes del objeto 
para percibir el objeto competo
SOBRE GESTALT 
Cada vez que enfrentamos el diseño 
de una interfaz digital estamos 
poniendo a prueba estas leyes. 
Por es...
FIN CLASE 01
Próxima SlideShare
Cargando en…5
×

Introducción a los Wireframes

732 visualizaciones

Publicado el

Clase 01 de Wireframes, Diplomado Arquitectura de Información y Experiencia de Usuario 2014 #daiux14

Publicado en: Diseño
0 comentarios
4 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
732
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
32
Comentarios
0
Recomendaciones
4
Insertados 0
No insertados

No hay notas en la diapositiva.

Introducción a los Wireframes

  1. 1. WIREFRAMES clase 01 DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
  2. 2. INTRODUCCIÓN
  3. 3. PRESENTACIÓN Hola, soy Yerko Pezzopane, y bienvenidos al taller de Wireframes.
  4. 4. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
  5. 5. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
  6. 6. ¿Diseñadores? ¿Periodistas? ¿Ingenieros? ¿Bibliotecarios?
  7. 7. LO QUE VEREMOS HOY User Experience HCI y principios del diseño universal Sicología de las formas
  8. 8. ¿ux?
  9. 9. USER EXPERIENCE
  10. 10. USER EXPERIENCE 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. 11. USER EXPERIENCE Para hacer UX hay que entender el producto, la situación, el contexto y los hábitos de uso de un determinado grupo de personas.
  12. 12. USER EXPERIENCE https://www.youtube.com/watch?v=m9R9z7P1eME
  13. 13. USER EXPERIENCE
  14. 14. USER EXPERIENCE
  15. 15. USER EXPERIENCE
  16. 16. USER EXPERIENCE
  17. 17. USER EXPERIENCE
  18. 18. USER EXPERIENCE
  19. 19. USER EXPERIENCE
  20. 20. USER EXPERIENCE
  21. 21. USER EXPERIENCE Usabilidad USER EXPERIENCE Factores humanos Utilidad HCI Ergonomía Diseño Accesibilidad Marketing Rendimiento del sistema
  22. 22. INTERACCIÓN HUMANO COMPUTADOR
  23. 23. INTERACCIÓN HUMANO COMPUTADOR Es la disciplina que estudia el intercambio de información mediante software entre las personas y las computadoras. Se encarga del diseño, evaluación e implementación de los aparatos tecnológicos interactivos con el objetivo de que el intercambio sea más eficiente: minimizar errores, incrementar la satisfacción, disminuir la frustración y, en definitiva, hacer más productivas las tareas que rodean a las personas y los computadores.
  24. 24. INTERACCIÓN HUMANO COMPUTADOR Lo primero y principal es la persona, el usuario que utiliza el sistema.
  25. 25. INTERACCIÓN HUMANO COMPUTADOR El buen diseño ayuda a la gente a hacer cosas que nos importan.
  26. 26. INTERACCIÓN HUMANO COMPUTADOR El buen diseño ayuda a la gente a hacer cosas que nos importan.
  27. 27. INTERACCIÓN HUMANO COMPUTADOR El buen diseño ayuda a la gente a hacer cosas que nos importan.
  28. 28. INTERACCIÓN HUMANO COMPUTADOR El buen diseño ayuda a la gente a hacer cosas que nos importan.
  29. 29. INTERACCIÓN HUMANO COMPUTADOR El mal diseño es frustrante.
  30. 30. INTERACCIÓN HUMANO COMPUTADOR El mal diseño es frustrante e incluso cuesta vidas.
  31. 31. INTERACCIÓN HUMANO COMPUTADOR El mal diseño es frustrante e incluso cuesta vidas.
  32. 32. INTERACCIÓN HUMANO COMPUTADOR …e incluso cuesta vidas.
  33. 33. INTERACCIÓN HUMANO COMPUTADOR A veces, las mejores interfaces se convierten en invisibles para nosotros, cuando pasamos de manipular la interfaz, a realizar tareas.
  34. 34. INTERACCIÓN HUMANO COMPUTADOR
  35. 35. INTERACCIÓN HUMANO COMPUTADOR
  36. 36. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  37. 37. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 1. Igualdad de uso El diseño debe ser fácil de usar y adecuado para todas las personas independientemente de sus capacidades y habilidades.
  38. 38. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 1. Igualdad de uso El diseño debe ser fácil de usar y adecuado para todas las personas independientemente de sus capacidades y habilidades.
  39. 39. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 2. Flexibilidad El diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales.
  40. 40. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 2. Flexibilidad El diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales.
  41. 41. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 3. Simple e intuitivo El diseño debe ser fácil de entender independientemente de la experiencia, los conocimientos, las habilidades o el nivel del usuario.
  42. 42. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 3. Simple e intuitivo El diseño debe ser fácil de entender independientemente de la experiencia, los conocimientos, las habilidades o el nivel del usuario.
  43. 43. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 4. Información fácil de percibir El diseño comunica de manera eficaz la información necesaria para el usuario.
  44. 44. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 4. Información fácil de percibir El diseño comunica de manera eficaz la información necesaria para el usuario.
  45. 45. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 5. Tolerante a errores El diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas.
  46. 46. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 5. Tolerante a errores El diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias fatales o no deseadas.
  47. 47. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 6. Escaso esfuerzo El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
  48. 48. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 6. Escaso esfuerzo El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
  49. 49. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 7. Dimensiones apropiadas Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso por parte del usuario, independientemente de su tamaño, posición, y movilidad.
  50. 50. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 7. Dimensiones apropiadas Los tamaños y espacios deben ser apropiados para el alcance, manipulación y uso por parte del usuario, independientemente de su tamaño, posición, y movilidad.
  51. 51. SICOLOGÍA DE LAS FORMAS
  52. 52. GESTALT
  53. 53. QUÉ ES GESTALT Gestalt es un término introducido por primera vez por Christian von Ehrenfels que a su vez es un vocablo alemán que no tiene una traducción única, aunque se lo entiende generalmente como "forma", "totalidad", "configuración“, “unión”. es una corriente de la psicología moderna, surgida en Alemania a principios del siglo XX y cuyos exponentes más reconocidos han sido los teóricos Max Wertheimer, Wolfgang Köhler, Kurt Koffka y Kurt Lewin.
  54. 54. QUÉM EESD GIOESS TDAIGLITTALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011 Rodrigo García R. ENTENDER A LAS PERSONAS El campo de la sicología de la Gestalt explica cómo la mente Gestalt (Forma) humana percibe y organiza los estímulos visuales El campo de la psicología de la Gestalt explica cómo la mente percibe y organiza los estímulos visuales. Estímulos Respuestas Fuentes: http://www.webdesignerdepot.com/2011/08/strengthening-behavioral-cues-in-ux-web-design-with-gestalt-principles/ Thursday, November 10, 11
  55. 55. ILUSIONES ÓPTICAS ¿Pueden contar la cantidad de puntos blancos?
  56. 56. ILUSIONES ÓPTICAS ¿Estructura con tres extremidades?
  57. 57. ILUSIONES ÓPTICAS ¿copas?
  58. 58. MEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011 Rodrigo García R. ENTENDER A LAS PERSONAS Fuentes: http://www.sapdesignguild.org/resources/optical_illusions/index.html Thursday, November 10, 11 ¿Se mueve? ILUSIONES ÓPTICAS
  59. 59. ESTO NOS LLEVA A QUE... La mente configura, a través de ciertas leyes, los elementos que llegan a ella a través de los canales sensoriales (percepción) o de la memoria (pensamiento, inteligencia y resolución de problemas).
  60. 60. ESTO NOS LLEVA A QUE... ! La percepción humana pasa por un proceso de reestructuración que configura a partir de esa información una forma, un gestalt, que se destruye cuando se intenta analizar.
  61. 61. EN RESUMEN El campo de la sicología de la Gestalt explica cómo la mente humana percibe y organiza los estímulos visuales ✓Relación entre las partes y el todo en la percepción visual: “El todo es algo mas que la suma de sus partes” ✓Los estímulos visuales son complejos por lo que nuestra mente tiende a simplificar y buscar el orden. ✓Podríamos referirnos a la Experiencia de Usuario es saber cómo percibimos el mundo y sus estímulos
  62. 62. LEYES DE GESTALT
  63. 63. Proximidad LEYES GESTALT 1 2 Similitud 3 Cierre
  64. 64. 1. PROXIMIDAD Objetos cercanos entre si tienden a ser percibidos como un grupo
  65. 65. 1. PROXIMIDAD DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011 Rodrigo García R. ENTENDER A LAS PERSONAS Objetos cercanos entre si tienden a ser percibidos como un grupo Gestalt: 3 Principios 1 Proximidad cercanos entre sí ser percibidos grupo. webdesignerdepot.com/2011/08/strengthening-behavioral-cues-in-ux-web-design-with-gestalt-principles/
  66. 66. 1. PROXIMIDAD Objetos cercanos entre si tienden a ser percibidos como un grupo
  67. 67. 1. PROXIMIDAD Objetos cercanos entre si tienden a ser percibidos como un grupo
  68. 68. 2. SIMILITUD Objetos similares entre si tienden a ser percibidos como un grupo
  69. 69. 2. SIMILITUD Objetos similares entre si tienden a ser percibidos como un grupo
  70. 70. 2. SIMILITUD Objetos similares entre si tienden a ser percibidos como un grupo
  71. 71. 2. SIMILITUD Objetos similares entre si tienden a ser percibidos como un grupo
  72. 72. 2. SIMILITUD MEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011 Rodrigo García R. ENTENDER A LAS PERSONAS Gestalt: 3 Principios 2 Similaridad Objetos similares entre sí entre sí tienden a ser percibidos como un grupo. Thursday, November 10, 11 Objetos similares entre si tienden a ser percibidos como un grupo
  73. 73. 3. CIERRE Bastan algunas partes del objeto para percibir el objeto competo
  74. 74. 3. CIERRE Bastan algunas partes del objeto para percibir el objeto competo
  75. 75. 3. CIERRE Bastan algunas partes del objeto para percibir el objeto competo
  76. 76. SOBRE GESTALT Cada vez que enfrentamos el diseño de una interfaz digital estamos poniendo a prueba estas leyes. Por eso es importante que desiciones tomamos a la hora de desarrollar una interfaz Debemos ponernos en el lugar de los usuarios.
  77. 77. FIN CLASE 01

×