Taller de Prototipos #DAIEU15 - Clase 02

412 visualizaciones

Publicado el

Primera clase del "Taller de Prototipos" del "Diplomado de Arquitectura de Información y Experiencia de Usuario" 2015 en Universidad Central.

Publicado en: Diseño
1 comentario
2 recomendaciones
Estadísticas
Notas
Sin descargas
Visualizaciones
Visualizaciones totales
412
En SlideShare
0
De insertados
0
Número de insertados
8
Acciones
Compartido
0
Descargas
21
Comentarios
1
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

Taller de Prototipos #DAIEU15 - Clase 02

  1. 1. PROTOTIPADO DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015 WIREFRAMES Y MOCKUPS CLASE 02
  2. 2. TIPOS DE WIREFRAMES
  3. 3. BAJA FIDELIDAD Caracterizado por un dibujo en bruto o un boceto rápido, los wireframes de baja fidelidad tienen menos detalles y son rápidos de producir. Ayudan a un equipo de proyecto a colaborar más efectivamente debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido. Muestra o contenido simbólico son utilizados para representar datos cuando el contenido real no está disponible.
  4. 4. BAJA FIDELIDAD
  5. 5. ALTA FIDELIDAD
  6. 6. Los wireframes de alta fidelidad son usados a menudo para documentar, porque ellos incorporan un nivel de detalle que se acerca más al diseño final de una página web, pero toma más tiempo para ser creado. ALTA FIDELIDAD
  7. 7. http://www.uxpin.com/guide-to-wireframing.html WIREFRAMES
  8. 8. GUÍAS VISUALES
  9. 9. GUÍAS VISUALES Son estructuras simples conformados principalmente de líneas y cajas.
  10. 10. Están diseñados en escala de grises. GUÍAS VISUALES
  11. 11. Todos los elementos que lo componen están representados de forma esquemática. GUÍAS VISUALES
  12. 12. Se utiliza una sola familia tipográfica. 1234567890¿? abcdefghijklmn ñopqrstuvwxyz GUÍAS VISUALES
  13. 13. Se debe usar contenido real. Lorem ipsum ¿o no?... GUÍAS VISUALES
  14. 14. PROTOTIPO DE PAPEL
  15. 15. Es ideal para hacer los primeros esbozos del funcionamiento de una futura aplicación constituyéndose en un elemento de testeado y debate rápido (económico) que evitará futuros y costosos errores en fases posteriores de desarrollo. PROTOTIPO DE PAPEL
  16. 16. https://www.youtube.com/watch?v=GrV2SZuRPv0 PROTOTIPO DE PAPEL
  17. 17. Profundidad: El prototipo de papel ayuda a entender tanto interacciones así como también profundodad de las mismas y de los elementos de la interfaz. PROTOTIPO DE PAPEL
  18. 18. PROTOTIPO DE PAPEL con§tel - Memoria de Título Diseño Gráfico Rodrigo Vera
  19. 19. PROTOTIPO DE PAPEL con§tel - Memoria de Título Diseño Gráfico Rodrigo Vera
  20. 20. PROTOTIPO DE PAPEL http://www.amazon.es/Paper-Prototyping-Interfaces-Interactive-Technologies/dp/1558608702 Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces (Interactive Technologies) - 2003
  21. 21. PROTOTIPO DE PAPEL http://es.gizmodo.com/asi-se-diseno-sobre-papel-cuadriculado-el-primer-supe-1711919268?utm_campaign=Gizmodo_facebook_SF_es&utm_source=Gizmodo_facebook_es&utm_medium=Socialflow http://www.businessinsider.com/super-mario-bros-creators-on-game-story-2015-6
  22. 22. PROTOTIPO DE PAPEL http://es.gizmodo.com/asi-se-diseno-sobre-papel-cuadriculado-el-primer-supe-1711919268?utm_campaign=Gizmodo_facebook_SF_es&utm_source=Gizmodo_facebook_es&utm_medium=Socialflow http://www.businessinsider.com/super-mario-bros-creators-on-game-story-2015-6
  23. 23. PROTOTIPO DE PAPEL http://es.gizmodo.com/asi-se-diseno-sobre-papel-cuadriculado-el-primer-supe-1711919268?utm_campaign=Gizmodo_facebook_SF_es&utm_source=Gizmodo_facebook_es&utm_medium=Socialflow http://www.businessinsider.com/super-mario-bros-creators-on-game-story-2015-6
  24. 24. PROTOTIPO DE PAPEL http://es.gizmodo.com/asi-se-diseno-sobre-papel-cuadriculado-el-primer-supe-1711919268?utm_campaign=Gizmodo_facebook_SF_es&utm_source=Gizmodo_facebook_es&utm_medium=Socialflow http://www.businessinsider.com/super-mario-bros-creators-on-game-story-2015-6
  25. 25. SICOLOGÍA DE LAS FORMAS
  26. 26. GESTALT
  27. 27. QUÉ ES GESTALT 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.
  28. 28. QUÉ ES GESTALTMEDIOSDIGITALES:ENTENDERALASPERSONAS,CONSTRUIRPARAELLLAS DMU 2011 Rodrigo García R. ENTENDER A LAS PERSONAS Fuentes: http://www.webdesignerdepot.com/2011/08/strengthening-behavioral-cues-in-ux-web-design-with-gestalt-principles/ Estímulos Respuestas Gestalt (Forma) El campo de la psicología de la Gestalt explica cómo la mente percibe y organiza los estímulos visuales. Thursday, November 10, 11 El campo de la sicología de la Gestalt explica cómo la mente humana percibe y organiza los estímulos visuales
  29. 29. QUÉ ES GESTALT ¿Pueden contar la cantidad de puntos blancos?
  30. 30. QUÉ ES GESTALT ¿Estructura con tres extremidades?
  31. 31. ILUSIONESÓPTICAS ¿copas?
  32. 32. MEDIOSDIGITALES:ENTENDERALASPERSONAS,CONSTRUIRPARAELLLAS 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? QUÉ ES GESTALT
  33. 33. 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). QUÉ ES GESTALT
  34. 34. 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.
  35. 35. 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
  36. 36. LEYES DE GESTALT
  37. 37. Proximidad LEYES GESTALT 1 Similitud 2 Cierre 3
  38. 38. 1. PROXIMIDAD Objetos cercanos entre si tienden a ser percibidos como un grupo
  39. 39. 1. PROXIMIDAD Objetos cercanos entre si tienden a ser percibidos como un grupo DIGITALES:ENTENDERALASPERSONAS,CONSTRUIRPARAELLLAS DMU 2011 Rodrigo García R. NDER A LAS PERSONAS designerdepot.com/2011/08/strengthening-behavioral-cues-in-ux-web-design-with-gestalt-principles/ imidad t: 3 Principios ercanosentresí serpercibidos grupo. 1
  40. 40. Objetos cercanos entre si tienden a ser percibidos como un grupo 1. PROXIMIDAD
  41. 41. Objetos cercanos entre si tienden a ser percibidos como un grupo 1. PROXIMIDAD
  42. 42. Objetos similares entre si tienden a ser percibidos como un grupo 2. SIMILITUD
  43. 43. Objetos similares entre si tienden a ser percibidos como un grupo 2. SIMILITUD
  44. 44. Objetos similares entre si tienden a ser percibidos como un grupo 2. SIMILITUD
  45. 45. Objetos similares entre si tienden a ser percibidos como un grupo 2. SIMILITUD
  46. 46. MEDIOSDIGITALES:ENTENDERALASPERSONAS,CONSTRUIRPARAELLLAS DMU 2011 Rodrigo García R. ENTENDER A LAS PERSONAS Gestalt: 3 Principios Similaridad Objetossimilaresentresí entresítiendenaser percibidoscomoungrupo. 2 Objetos similares entre si tienden a ser percibidos como un grupo 2. SIMILITUD
  47. 47. Bastan algunas partes del objeto para percibir el objeto competo 3. CIERRE Lo Ineludible
  48. 48. 3.CIERRE Bastan algunas partes del objeto para percibir el objeto competo
  49. 49. 3.CIERRE Bastan algunas partes del objeto para percibir el objeto competo
  50. 50. 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.
  51. 51. ACTIVIDAD
  52. 52. ACTIVIDAD La señora Juana tiene un negocio de abarrotes, y resulta que le hablaron de internet y quiere que su comunidad que es en la mayoría un barrio universitario ingrese a la “página web” de su negocio para saber que productos tiene y los precios que maneja Ella nos contó que quiere que su negocio se instale en internet y le ayude a llegar a muchos mas usuarios de los que puede llegar hoy en día. En su local ella vende: • Verduras • Jugos y Bebidas • Comida no Perecible • Fiambres y quesos • Artículos de Aseo
  53. 53. ACTIVIDAD
  54. 54. INICIO No Perecibles Fiambres y QuesosJugos y Bebidas Nivel Auxiliar Marca Ubicación Primer Nivel Verduras Artículos de Aseo Doña Juana Contacto Jugos Bebidas Segundo Nivel Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina Tercer Nivel Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Preguntas Frecuentes ACTIVIDAD
  55. 55. ACTIVIDAD • Reunirse en grupos. • Crear supuestos de entrevistas, benchmark, etc. • Discutir estrategia. • Crear un wireframe.
  56. 56. • Exponer supuestos • Exponer estrategia • Presentar wireframe ACTIVIDAD PARTE 2
  57. 57. • Evaluar trabajos de compañeros • Comparar trabajo propio y los revisados • Listar comparativo (pseudo benchmark) • Crear en drive carpeta del grupo (con los apellidos) • Subir a drive registro propio de wireframes (fotos) • Subir a drive supuestos y comparativo (texto) ACTIVIDAD PARTE 3
  58. 58. ACTIVIDAD PARTE 4 (HOY) • Construir prototipo de papel. • Seguir con caso Doña Juanita. • Desarrollar un flujo de interacción. • Definir profundidades (que elementos están mas cerca del usuario). • Testear prototipo con usuario de otro grupo y grabar
  59. 59. ACTIVIDAD PARTE 4 (HOY) • Alguien graba. • El resto hace las interacciones • Todos vemos. • Alguien testea (usuario).
  60. 60. FIN CLASE

×