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

1. PROTOTIPADO
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015
WIREFRAMES Y MOCKUPS
CLASE 02

2. TIPOS DE WIREFRAMES

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. BAJA FIDELIDAD

5. ALTA FIDELIDAD

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. http://www.uxpin.com/guide-to-wireframing.html
WIREFRAMES

8. GUÍAS VISUALES

9. GUÍAS VISUALES
Son estructuras simples conformados principalmente
de líneas y cajas.

10. Están diseñados en escala de grises.
GUÍAS VISUALES

11. Todos los elementos que lo componen están representados de
forma esquemática.
GUÍAS VISUALES

12. Se utiliza una sola familia tipográfica.
1234567890¿?
abcdefghijklmn
ñopqrstuvwxyz
GUÍAS VISUALES

13. Se debe usar contenido real.
Lorem ipsum
¿o no?...
GUÍAS VISUALES

14. PROTOTIPO DE PAPEL

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. https://www.youtube.com/watch?v=GrV2SZuRPv0
PROTOTIPO DE PAPEL

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. PROTOTIPO DE PAPEL
con§tel - Memoria de Título Diseño Gráfico Rodrigo Vera

19. PROTOTIPO DE PAPEL
con§tel - Memoria de Título Diseño Gráfico Rodrigo Vera

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. 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. 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. 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. 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. SICOLOGÍA DE LAS
FORMAS

26. GESTALT

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. 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. QUÉ ES GESTALT
¿Pueden contar la cantidad de puntos blancos?

30. QUÉ ES GESTALT
¿Estructura con tres extremidades?

31. ILUSIONESÓPTICAS
¿copas?

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. 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. 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. 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. LEYES DE GESTALT

37. Proximidad
LEYES GESTALT
1
Similitud
2
Cierre
3

38. 1. PROXIMIDAD
Objetos cercanos entre si tienden
a ser percibidos como un grupo

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. Objetos cercanos entre si tienden
a ser percibidos como un grupo
1. PROXIMIDAD

41. Objetos cercanos entre si tienden
a ser percibidos como un grupo
1. PROXIMIDAD

42. Objetos similares entre si tienden a
ser percibidos como un grupo
2. SIMILITUD

43. Objetos similares entre si tienden a
ser percibidos como un grupo
2. SIMILITUD

44. Objetos similares entre si tienden a
ser percibidos como un grupo
2. SIMILITUD

45. Objetos similares entre si tienden a
ser percibidos como un grupo
2. SIMILITUD

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. Bastan algunas partes del objeto
para percibir el objeto competo
3. CIERRE
Lo Ineludible

48. 3.CIERRE
Bastan algunas partes del objeto
para percibir el objeto competo

49. 3.CIERRE
Bastan algunas partes del objeto
para percibir el objeto competo

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. ACTIVIDAD

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. ACTIVIDAD

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. ACTIVIDAD
• Reunirse en grupos.
• Crear supuestos de entrevistas, benchmark, etc.
• Discutir estrategia.
• Crear un wireframe.

56. • Exponer supuestos
• Exponer estrategia
• Presentar wireframe
ACTIVIDAD PARTE 2

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. 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. ACTIVIDAD PARTE 4 (HOY)
• Alguien graba.
• El resto hace las interacciones
• Todos vemos.
• Alguien testea (usuario).

60. FIN CLASE