taller de prototipos #daieu15 - clase 02

PROTOTIPADO

DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2015

WIREFRAMES Y MOCKUPS

CLASE 02

TIPOS DE WIREFRAMES

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.

BAJA FIDELIDAD

ALTA FIDELIDAD

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

http://www.uxpin.com/guide-to-wireframing.html

WIREFRAMES

GUÍAS VISUALES

GUÍAS VISUALES

Son estructuras simples conformados principalmente de líneas y cajas.

Están diseñados en escala de grises.

GUÍAS VISUALES

Todos los elementos que lo componen están representados de forma esquemática.

GUÍAS VISUALES

Se utiliza una sola familia tipográfica.

1234567890¿? abcdefghijklmnñopqrstuvwxyz

GUÍAS VISUALES

Se debe usar contenido real.

Lorem ipsum

¿o no?...

GUÍAS VISUALES

PROTOTIPO DE PAPEL

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

https://www.youtube.com/watch?v=GrV2SZuRPv0

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

con§tel - Memoria de Título Diseño Gráfico Rodrigo Vera

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

http://www.amazon.es/Paper-Prototyping-Interfaces-Interactive-Technologies/dp/1558608702

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

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

SICOLOGÍA DE LAS FORMAS

GESTALT

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

QUÉ ES GESTALT

¿Pueden contar la cantidad de puntos blancos?

QUÉ ES GESTALT

¿Estructura con tres extremidades?

ILUSIONES ÓPTICAS

¿copas?

MEDIOS DIGITALES: ENTENDER A LAS PERSONAS, CONSTRUIR PARA ELLLAS DMU 2011Rodrigo García R.


Fuentes: http://www.sapdesignguild.org/resources/optical_illusions/index.html


¿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

LEYES DE GESTALT

Proximidad

LEYES GESTALT

1Similitud2Cierre3

1. PROXIMIDAD

Objetos cercanos entre si tienden a ser percibidos como un grupo

1. PROXIMIDAD




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



1. PROXIMIDAD

Objetos similares entre si tienden a ser percibidos como un grupo

2. SIMILITUD



Gestalt: 3 Principios

SimilaridadObjetos similares entre sí entre sí tienden a ser percibidos como un grupo.

2


Objetos similares entre si tienden a ser percibidos como un grupo

2. SIMILITUD

Bastan algunas partes del objeto para percibir el objeto competo

3. CIERRE

Lo Ineludible

3. CIERRE

Bastan algunas partes del objeto para percibir el objeto competo

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

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

ACTIVIDAD

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.

• Exponer supuestos• Exponer estrategia• Presentar wireframe

ACTIVIDAD PARTE 2

• 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).

FIN CLASE