SlideShare una empresa de Scribd logo
1 de 38
Descargar para leer sin conexión
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

Más contenido relacionado

Similar a Diseño de Interfaces

diseño de interacción.pdf
diseño de interacción.pdfdiseño de interacción.pdf
diseño de interacción.pdfSandra Milena
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuarioManuel Mujica
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuarioManuel Mujica
 
Diseno de la Interfaz de Usuario
Diseno de la Interfaz de UsuarioDiseno de la Interfaz de Usuario
Diseno de la Interfaz de UsuarioUTPL
 
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 FRAGladys Cachi
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañottEleny30
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo bañoEleny30
 
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ónGustavo Soto Miño
 
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.pptxssuserffa00a
 
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 PressmanJuan Pablo Bustos Thames
 

Similar 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

Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxaurorialfonzo6
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)lemg25102006
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)LeonardoDantasRivas
 
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...mariaclaramb
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaJosAntonioFloresQuis
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAPjuanrincon129309
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docFICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docMerlyBrisetTorneroLu
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxMarcosAlvarezSalinas
 
Dia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoDia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoThaisAymeeTacucheBen
 
Calendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfCalendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfAsol7
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresKengYoshiIngaOchoa1
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos documminipuw
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabrielaMarcano12
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfMariaGabrielaSandova2
 
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfMARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfitssmalexa
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfBrbara57940
 
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital  (1).pdf, para estudiantes de nivel basicoLibro DIBUJO I digital  (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basicoJOSE645741
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfduf110205
 
Revista_de_Bioarquitectura_y_Construccio.pdf
Revista_de_Bioarquitectura_y_Construccio.pdfRevista_de_Bioarquitectura_y_Construccio.pdf
Revista_de_Bioarquitectura_y_Construccio.pdfANGELEMMANUELALBAAPA
 

Último (20)

Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
 
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzada
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAP
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docFICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptx
 
Dia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoDia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf triptico
 
Calendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfCalendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdf
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos docum
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimiento
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdf
 
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfMARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
 
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital  (1).pdf, para estudiantes de nivel basicoLibro DIBUJO I digital  (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
 
Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdf
 
Revista_de_Bioarquitectura_y_Construccio.pdf
Revista_de_Bioarquitectura_y_Construccio.pdfRevista_de_Bioarquitectura_y_Construccio.pdf
Revista_de_Bioarquitectura_y_Construccio.pdf
 

Diseño de Interfaces