SlideShare una empresa de Scribd logo
1 de 77
Descargar para leer sin conexión
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 de factores de diseño, sino 
también de las emociones y sentimientos que 
genera una marca en los usuarios.
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.
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 
Marketing 
Rendimiento del sistema
INTERACCIÓN HUMANO 
COMPUTADOR
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.
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 
pasamos de manipular la 
interfaz, a realizar tareas.
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 
independientemente de sus capacidades y habilidades.
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.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
2. Flexibilidad 
El diseño debe poder adecuarse a un amplio rango de preferencias 
y habilidades individuales.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
2. Flexibilidad 
El diseño debe poder adecuarse a un amplio rango de preferencias 
y habilidades individuales.
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.
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.
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.
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.
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.
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.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
6. Escaso esfuerzo 
El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
7 PRINCIPIOS DEL DISEÑO UNIVERSAL 
6. Escaso esfuerzo 
El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.
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.
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.
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 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.
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
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 
Fuentes: http://www.sapdesignguild.org/resources/optical_illusions/index.html 
Thursday, November 10, 11 
¿Se mueve? 
ILUSIONES ÓPTICAS
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).
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 
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 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/
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 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
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 eso es importante que 
desiciones tomamos a la hora de 
desarrollar una interfaz 
Debemos ponernos en el lugar de 
los usuarios.
FIN CLASE 01

Más contenido relacionado

La actualidad más candente

El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
Santiago Bustelo
 
UX no es lo mismo que UI
UX no es lo mismo que UIUX no es lo mismo que UI
UX no es lo mismo que UI
Andrea Cantú
 

La actualidad más candente (20)

Juan Marcos Ortiz - Hospital Italiano de Bs. As. - UX en Salud
Juan Marcos Ortiz - Hospital Italiano de Bs. As. - UX en SaludJuan Marcos Ortiz - Hospital Italiano de Bs. As. - UX en Salud
Juan Marcos Ortiz - Hospital Italiano de Bs. As. - UX en Salud
 
Ux, Experiencia de Usuario
Ux, Experiencia de UsuarioUx, Experiencia de Usuario
Ux, Experiencia de Usuario
 
¿Diseñar para los usuarios o diseñar con los usuarios?
¿Diseñar para los usuarios o diseñar con los usuarios?¿Diseñar para los usuarios o diseñar con los usuarios?
¿Diseñar para los usuarios o diseñar con los usuarios?
 
Introducción Taller UX-Mayo 2016
Introducción Taller UX-Mayo 2016Introducción Taller UX-Mayo 2016
Introducción Taller UX-Mayo 2016
 
5 Presentación Taller UX - Heurísticas 2017
5  Presentación Taller UX - Heurísticas 20175  Presentación Taller UX - Heurísticas 2017
5 Presentación Taller UX - Heurísticas 2017
 
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparmeUsabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
Usabilidad, UX y accesibilidad: qué son y por qué deberían preocuparme
 
6 Presentación Taller UX - Patrones y Prototipado 2017
6  Presentación Taller UX - Patrones y Prototipado 20176  Presentación Taller UX - Patrones y Prototipado 2017
6 Presentación Taller UX - Patrones y Prototipado 2017
 
Arquitectura de la información, Taller UX - Junio 2016
Arquitectura de la información, Taller UX - Junio 2016Arquitectura de la información, Taller UX - Junio 2016
Arquitectura de la información, Taller UX - Junio 2016
 
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
 
User Experience, UX & UI
User Experience, UX & UIUser Experience, UX & UI
User Experience, UX & UI
 
Arquitectura de Información
Arquitectura de InformaciónArquitectura de Información
Arquitectura de Información
 
1 Presentación - Introducción a Taller UX 2017
1  Presentación - Introducción a Taller UX 20171  Presentación - Introducción a Taller UX 2017
1 Presentación - Introducción a Taller UX 2017
 
UX Industry Survey Spain 2016 _ Highlights
UX Industry Survey Spain 2016 _ HighlightsUX Industry Survey Spain 2016 _ Highlights
UX Industry Survey Spain 2016 _ Highlights
 
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...
 
Introducción a Experiencia de usuario y Usabilidad
Introducción a Experiencia de usuario y UsabilidadIntroducción a Experiencia de usuario y Usabilidad
Introducción a Experiencia de usuario y Usabilidad
 
UX no es lo mismo que UI
UX no es lo mismo que UIUX no es lo mismo que UI
UX no es lo mismo que UI
 
Hablemos de UX - José Ma. Medina, UX UI designer
Hablemos de UX - José Ma. Medina, UX UI designerHablemos de UX - José Ma. Medina, UX UI designer
Hablemos de UX - José Ma. Medina, UX UI designer
 
Diseño universal. (diseño industrial conoce lo nuevo).
Diseño universal. (diseño industrial conoce lo nuevo).Diseño universal. (diseño industrial conoce lo nuevo).
Diseño universal. (diseño industrial conoce lo nuevo).
 
Ux en 30 minutos
Ux en 30 minutosUx en 30 minutos
Ux en 30 minutos
 
Taller Fundamentos de Experiencia de Usuario 01/03
Taller Fundamentos de Experiencia de Usuario 01/03Taller Fundamentos de Experiencia de Usuario 01/03
Taller Fundamentos de Experiencia de Usuario 01/03
 

Similar a Introducción a los Wireframes

Hci curso comsocial-2014
Hci curso comsocial-2014Hci curso comsocial-2014
Hci curso comsocial-2014
Tm-CS
 
Objetos, PresentacióNfda Soto
Objetos, PresentacióNfda SotoObjetos, PresentacióNfda Soto
Objetos, PresentacióNfda Soto
karla79
 
Oscar Reyes - Diseño centrado en el usuario UX, Café Digital
Oscar Reyes - Diseño centrado en el usuario UX, Café DigitalOscar Reyes - Diseño centrado en el usuario UX, Café Digital
Oscar Reyes - Diseño centrado en el usuario UX, Café Digital
IAB_PERU
 
BarCamp Costa Rica 2014 - La ciencia detras del ux design 02
BarCamp Costa Rica 2014 - La ciencia detras del ux design 02BarCamp Costa Rica 2014 - La ciencia detras del ux design 02
BarCamp Costa Rica 2014 - La ciencia detras del ux design 02
barcampcr
 

Similar a Introducción a los Wireframes (20)

Diseño de interfaces Fundamentos de UI y UX
Diseño de interfaces    Fundamentos de UI y UXDiseño de interfaces    Fundamentos de UI y UX
Diseño de interfaces Fundamentos de UI y UX
 
DISEÑO UX_UI123456789023456789023456789.pdf
DISEÑO UX_UI123456789023456789023456789.pdfDISEÑO UX_UI123456789023456789023456789.pdf
DISEÑO UX_UI123456789023456789023456789.pdf
 
DISEÑO UX_UI123456789023456789023456789.pdf
DISEÑO UX_UI123456789023456789023456789.pdfDISEÑO UX_UI123456789023456789023456789.pdf
DISEÑO UX_UI123456789023456789023456789.pdf
 
DISEÑO UX_UI 1134567789012345678892.pdf
DISEÑO UX_UI 1134567789012345678892.pdfDISEÑO UX_UI 1134567789012345678892.pdf
DISEÑO UX_UI 1134567789012345678892.pdf
 
Introducción a la Arquitectura de Información - Taller UX La Plata 2016
Introducción a la Arquitectura de Información - Taller UX La Plata 2016Introducción a la Arquitectura de Información - Taller UX La Plata 2016
Introducción a la Arquitectura de Información - Taller UX La Plata 2016
 
Hci curso comsocial-2014
Hci curso comsocial-2014Hci curso comsocial-2014
Hci curso comsocial-2014
 
UX para dispositivos móviles
UX para dispositivos móvilesUX para dispositivos móviles
UX para dispositivos móviles
 
Human centered design
Human centered designHuman centered design
Human centered design
 
Objetos, PresentacióNfda Soto
Objetos, PresentacióNfda SotoObjetos, PresentacióNfda Soto
Objetos, PresentacióNfda Soto
 
Clase en la Universidad Mayor HERRAMIENTAS OBSERVACION
Clase en la Universidad Mayor HERRAMIENTAS OBSERVACIONClase en la Universidad Mayor HERRAMIENTAS OBSERVACION
Clase en la Universidad Mayor HERRAMIENTAS OBSERVACION
 
Desarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobileDesarrollo de interfaz de usuario en un contexto mobile
Desarrollo de interfaz de usuario en un contexto mobile
 
Los superpoderes de la interfaz. cómo el diseño convierte al usuario en super...
Los superpoderes de la interfaz. cómo el diseño convierte al usuario en super...Los superpoderes de la interfaz. cómo el diseño convierte al usuario en super...
Los superpoderes de la interfaz. cómo el diseño convierte al usuario en super...
 
Oscar Reyes - Diseño centrado en el usuario UX, Café Digital
Oscar Reyes - Diseño centrado en el usuario UX, Café DigitalOscar Reyes - Diseño centrado en el usuario UX, Café Digital
Oscar Reyes - Diseño centrado en el usuario UX, Café Digital
 
Todavía no he desayunado
Todavía no he desayunadoTodavía no he desayunado
Todavía no he desayunado
 
BarCamp Costa Rica 2014 - La ciencia detras del ux design 02
BarCamp Costa Rica 2014 - La ciencia detras del ux design 02BarCamp Costa Rica 2014 - La ciencia detras del ux design 02
BarCamp Costa Rica 2014 - La ciencia detras del ux design 02
 
UX para todos
UX para todosUX para todos
UX para todos
 
Analisis de sistemas 1(usabilidad)
Analisis de sistemas 1(usabilidad)Analisis de sistemas 1(usabilidad)
Analisis de sistemas 1(usabilidad)
 
Conferencia diseño accesible
Conferencia diseño accesibleConferencia diseño accesible
Conferencia diseño accesible
 
Qué es Design Thinking y cómo aplicarlo para crear productos memorables
Qué es Design Thinking y cómo aplicarlo para crear productos memorablesQué es Design Thinking y cómo aplicarlo para crear productos memorables
Qué es Design Thinking y cómo aplicarlo para crear productos memorables
 
Emotional Design + Neurociencias ¿Porqué nos enamoramos de un producto, servi...
Emotional Design + Neurociencias ¿Porqué nos enamoramos de un producto, servi...Emotional Design + Neurociencias ¿Porqué nos enamoramos de un producto, servi...
Emotional Design + Neurociencias ¿Porqué nos enamoramos de un producto, servi...
 

Más de Rodrigo Vera

Más de Rodrigo Vera (20)

Introduction to Interaction Awards 2018
Introduction to Interaction Awards 2018Introduction to Interaction Awards 2018
Introduction to Interaction Awards 2018
 
Transformación Digital Emeritis MIT: Caso SAP
Transformación Digital Emeritis MIT: Caso SAPTransformación Digital Emeritis MIT: Caso SAP
Transformación Digital Emeritis MIT: Caso SAP
 
Education Summit Latin America 2019
Education Summit Latin America 2019Education Summit Latin America 2019
Education Summit Latin America 2019
 
Introduction to Interaction Awards 2019
Introduction to Interaction Awards 2019Introduction to Interaction Awards 2019
Introduction to Interaction Awards 2019
 
DSUC 01: UX Research
DSUC 01: UX ResearchDSUC 01: UX Research
DSUC 01: UX Research
 
Mada UX Interaxion 2017
Mada UX Interaxion 2017Mada UX Interaxion 2017
Mada UX Interaxion 2017
 
Forjando Comunidad: 20 años de UX en Chile
Forjando Comunidad: 20 años de UX en ChileForjando Comunidad: 20 años de UX en Chile
Forjando Comunidad: 20 años de UX en Chile
 
Mumiko final
Mumiko finalMumiko final
Mumiko final
 
Mumiko: Users and journey maps
Mumiko: Users and journey mapsMumiko: Users and journey maps
Mumiko: Users and journey maps
 
Interaction South America 14 Redux Santiago
Interaction South America 14 Redux SantiagoInteraction South America 14 Redux Santiago
Interaction South America 14 Redux Santiago
 
Encargo 02 Vizualización de Datos MADA
Encargo 02 Vizualización de Datos MADAEncargo 02 Vizualización de Datos MADA
Encargo 02 Vizualización de Datos MADA
 
Mi estadística de Sueño, Primer Semestra MADA
Mi estadística de Sueño, Primer Semestra MADAMi estadística de Sueño, Primer Semestra MADA
Mi estadística de Sueño, Primer Semestra MADA
 
GAMO | Diseño Orientado a la Manufactura, MADA
GAMO | Diseño Orientado a la Manufactura, MADAGAMO | Diseño Orientado a la Manufactura, MADA
GAMO | Diseño Orientado a la Manufactura, MADA
 
Jer Thorp | Visualización de Datos, MADA
Jer Thorp | Visualización de Datos, MADAJer Thorp | Visualización de Datos, MADA
Jer Thorp | Visualización de Datos, MADA
 
Diseño de Interacción
Diseño de InteracciónDiseño de Interacción
Diseño de Interacción
 
Con§tel: Flujo Prototipo 2004
Con§tel: Flujo Prototipo 2004Con§tel: Flujo Prototipo 2004
Con§tel: Flujo Prototipo 2004
 
Wireframes, Definiciones.
Wireframes, Definiciones.Wireframes, Definiciones.
Wireframes, Definiciones.
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica Wireframes
 
Partituras de Interacción
Partituras de InteracciónPartituras de Interacción
Partituras de Interacción
 
Redes Sociales - Experiencia de Usuario
Redes Sociales - Experiencia de UsuarioRedes Sociales - Experiencia de Usuario
Redes Sociales - Experiencia de Usuario
 

Último

GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
irenecarmona12
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
EdisonCondesoDelgado1
 

Último (20)

GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
 
414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
Anexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo  Nivel 3 Ficha  Lectura pptjsbdkksAnexo  Nivel 3 Ficha  Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkks
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHEDIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Triptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jajaTriptico de los derechos humanos pe señorees jaja
Triptico de los derechos humanos pe señorees jaja
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptxATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
ATENCION INTEGRAL DEL ADULTO Y ADULTO MAYOR.pptx
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdfCATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
 

Introducción a los Wireframes

  • 1. WIREFRAMES clase 01 DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
  • 3. PRESENTACIÓN Hola, soy Yerko Pezzopane, y bienvenidos al taller de Wireframes.
  • 4. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
  • 5. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
  • 7. LO QUE VEREMOS HOY User Experience HCI y principios del diseño universal Sicología de las formas
  • 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. 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.
  • 21. USER EXPERIENCE Usabilidad USER EXPERIENCE Factores humanos Utilidad HCI Ergonomía Diseño Accesibilidad Marketing Rendimiento del sistema
  • 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. INTERACCIÓN HUMANO COMPUTADOR Lo primero y principal es la persona, el usuario que utiliza el sistema.
  • 25. INTERACCIÓN HUMANO COMPUTADOR El buen diseño ayuda a la gente a hacer cosas que nos importan.
  • 26. INTERACCIÓN HUMANO COMPUTADOR El buen diseño ayuda a la gente a hacer cosas que nos importan.
  • 27. INTERACCIÓN HUMANO COMPUTADOR El buen diseño ayuda a la gente a hacer cosas que nos importan.
  • 28. INTERACCIÓN HUMANO COMPUTADOR El buen diseño ayuda a la gente a hacer cosas que nos importan.
  • 29. INTERACCIÓN HUMANO COMPUTADOR El mal diseño es frustrante.
  • 30. INTERACCIÓN HUMANO COMPUTADOR El mal diseño es frustrante e incluso cuesta vidas.
  • 31. INTERACCIÓN HUMANO COMPUTADOR El mal diseño es frustrante e incluso cuesta vidas.
  • 32. INTERACCIÓN HUMANO COMPUTADOR …e incluso cuesta vidas.
  • 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.
  • 36. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL
  • 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. 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. 7 PRINCIPIOS DEL DISEÑO UNIVERSAL 2. Flexibilidad El diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  • 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. 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. ILUSIONES ÓPTICAS ¿Pueden contar la cantidad de puntos blancos?
  • 56. ILUSIONES ÓPTICAS ¿Estructura con tres extremidades?
  • 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. 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. 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. 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
  • 63. Proximidad LEYES GESTALT 1 2 Similitud 3 Cierre
  • 64. 1. PROXIMIDAD Objetos cercanos entre si tienden a ser percibidos como un grupo
  • 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. 1. PROXIMIDAD Objetos cercanos entre si tienden a ser percibidos como un grupo
  • 67. 1. PROXIMIDAD Objetos cercanos entre si tienden a ser percibidos como un grupo
  • 68. 2. SIMILITUD Objetos similares entre si tienden a ser percibidos como un grupo
  • 69. 2. SIMILITUD Objetos similares entre si tienden a ser percibidos como un grupo
  • 70. 2. SIMILITUD Objetos similares entre si tienden a ser percibidos como un grupo
  • 71. 2. SIMILITUD Objetos similares entre si tienden a ser percibidos como un grupo
  • 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. 3. CIERRE Bastan algunas partes del objeto para percibir el objeto competo
  • 74. 3. CIERRE Bastan algunas partes del objeto para percibir el objeto competo
  • 75. 3. CIERRE Bastan algunas partes del objeto para percibir el objeto competo
  • 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.