SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
DISEÑO DE INTERFACES
CREANDO PRODUCTOS AMABLES
Pablo Fernández Vallejo @ FADU.UBA 01.09.2016
¿Qué es una interfaz?
¿Cómo es el proceso de diseño?
Recursos
INTERFAZ
INTERACCIÓNUSUARIO OBJETO
“[El diseño de interfaces] se ocupa de describir el
comportamiento del usuario y definir cómo el sistema lo tendrá
en cuenta y dará respuesta al mismo”
“[Interaction design] is concerned with
describing user behaviour and defining how
the system will accommodate and respond
to that behaviour”
Jesse James Garrett, 2011
¿Qué hace a una buena interfaz?
UN BUEN MODELO CONCEPTUAL
Las personas, cuando usamos un objeto u
operamos con una interfaz de usuario, nos
formamos un modelo conceptual de su
funcionamiento.
MODELO
CONCEPTUAL
DEL USUARIO
UN BUEN MODELO CONCEPTUAL
IMAGEN
DEL
SISTEMA
SISTEMA
USUARIO
MODELO
CONCEPTUAL
DEL
DISEÑADOR
DISEÑADOR
La relación entre las intenciones del usuario, las acciones requeridas y los resultados son:
Razonables
No arbitrarias
Significativas
HACER LAS COSAS VISIBLES
HACER LAS COSAS VISIBLES
Es la cualidad de un objeto que
permite a un individuo percibir la
posibilidad realizar una acción.
AFFORDANCE
PRESTACIONES / OFRECIMIENTO
AFFORDANCE
PRESTACIONES / OFRECIMIENTO
Posibilidad de acción
Percepción
SINO
NO
SI
Rechazo
correcto
Affordance
escondido
Affordance
percibido
Affordance
falso
HACER LAS COSAS VISIBLES
¿Qué es una interfaz?
¿Cómo es el proceso de diseño?
Recursos
INVESTIGACIÓN
ARQUITECTURA DE LA INFORMACIÓN
DISEÑO DE INTERACCIÓN
TESTEO CON USUARIOS
INVESTIGACIÓN
INVESTIGACIÓN
OBTENER INFORMACIÓN
Entrevistas
Estudios de campo
Testeos con usuarios
INVESTIGACIÓN
INVESTIGACIÓN
MODELAR LA INFORMACIÓN
Definición de objetivos
Definición de usuarios
Personas
ARQUITECTURA DE LA INFORMACIÓN
ARQUITECTURA DE LA INFORMACIÓN
ARQUITECTURA DE LA INFORMACIÓN
ESTRUCTURAR LA EXPERIENCIA
Secuencia de Uso / Flujo
Mapa de experiencia
Card Sorting
DISEÑO DE INTERACCIÓN
DISEÑO DE INTERACCIÓN
DISEÑO DE INTERACCIÓN
Ideación
Bocetos
Definiciones
Modelado
Diseño Visual
Terminaciones
TESTEO CON USUARIOS
TESTEO CON USUARIOS
TESTEO CON USUARIOS
Prototipado
Testeo de Usabilidad
Iteraciones del diseño
INVESTIGACIÓN
ARQUITECTURA DE LA INFORMACIÓN
DISEÑO DE INTERACCIÓN
TESTEO CON USUARIOS
¿Qué es una interfaz?
¿Cómo es el proceso de diseño?
Recursos
DON
NORMAN
JAKOB
NIELSEN
100 cosas sobre la gente que
todo diseñador debe saber
SUSAN WEINSCHENK
No me hagas pensar
STEVE KRUG
La psicología de los objetos
cotidianos
DON NORMAN
Preguntas :)
GRACIAS!
Pablo Fernández Vallejo @ FADU.UBA 01.09.2016

Mais conteúdo relacionado

Semelhante a Diseño de Interfaces

Diseno de la Interfaz de Usuario
Diseno de la Interfaz de UsuarioDiseno de la Interfaz de Usuario
Diseno de la Interfaz de Usuario
UTPL
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
Eleny30
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
Eleny30
 

Semelhante a Diseño de Interfaces (20)

diseño de interacción.pdf
diseño de interacción.pdfdiseño de interacción.pdf
diseño de interacción.pdf
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
Diseno de la Interfaz de Usuario
Diseno de la Interfaz de UsuarioDiseno de la Interfaz de Usuario
Diseno de la Interfaz de Usuario
 
Tp metodología interfaz de usuario - UTN FRA
Tp metodología interfaz de usuario - UTN FRATp metodología interfaz de usuario - UTN FRA
Tp metodología interfaz de usuario - UTN FRA
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
Conceptos Básicos de interacción
Conceptos Básicos de interacciónConceptos Básicos de interacción
Conceptos Básicos de interacción
 
3490012.ppt
3490012.ppt3490012.ppt
3490012.ppt
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
 
Introducción a Experiencia de Usuario
Introducción a Experiencia de UsuarioIntroducción a Experiencia de Usuario
Introducción a Experiencia de Usuario
 
Interfaz Hombre-Máquina
Interfaz Hombre-MáquinaInterfaz Hombre-Máquina
Interfaz Hombre-Máquina
 
Interacción en el arte
Interacción en el arteInteracción en el arte
Interacción en el arte
 
Clase Diseño para la interacción
Clase Diseño para la interacciónClase Diseño para la interacción
Clase Diseño para la interacción
 
Jossue interacción WEB
Jossue interacción WEB Jossue interacción WEB
Jossue interacción WEB
 
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptxDISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
DISEÑO DE INTERFAZ DE USUARIO.ppt.pptx
 
La interfase
La interfaseLa interfase
La interfase
 
El Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger PressmanEl Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger Pressman
 
Diseño de interfaces
Diseño de interfacesDiseño de interfaces
Diseño de interfaces
 
UX para dispositivos móviles
UX para dispositivos móvilesUX para dispositivos móviles
UX para dispositivos móviles
 

Último

Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
meloamerica93
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
 
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
 

Último (20)

SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.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
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
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
 

Diseño de Interfaces