Post on 03-Aug-2015
PROTOTIPADO
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015
WIREFRAMES Y MOCKUPS
CLASE 02
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.
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
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
https://www.youtube.com/watch?v=GrV2SZuRPv0
PROTOTIPO DE PAPEL
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
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
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
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
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
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
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.
QUÉ ES GESTALTMEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011Rodrigo 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
MEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011Rodrigo 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
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
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.
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
1. PROXIMIDAD
Objetos cercanos entre si tienden a ser percibidos como un grupo
MEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011Rodrigo García R.
ENTENDER A LAS PERSONAS
Fuentes:http://www.webdesignerdepot.com/2011/08/strengthening-behavioral-cues-in-ux-web-design-with-gestalt-principles/
Proximidad
Gestalt: 3 Principios
Objetos cercanos entre sí tienden a ser percibidos como un grupo.
1
Thursday, November 10, 11
MEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011Rodrigo García R.
ENTENDER A LAS PERSONAS
Gestalt: 3 Principios
SimilaridadObjetos similares entre sí entre sí tienden a ser percibidos como un grupo.
2
Thursday, November 10, 11
Objetos similares entre si tienden a ser percibidos como un grupo
2. SIMILITUD
SOBRE GESTALTCada 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.
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
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
ACTIVIDAD
• Reunirse en grupos. • Crear supuestos de entrevistas, benchmark, etc.• Discutir estrategia.• Crear un wireframe.
• 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
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
ACTIVIDAD PARTE 4 (HOY)
• Alguien graba.• El resto hace las interacciones • Todos vemos.• Alguien testea (usuario).