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

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
 

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

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
 
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
jose880240
 

Último (13)

tabla-de-organelos-celulares-de-celulas-eucariotas-y-procariotas.docx
tabla-de-organelos-celulares-de-celulas-eucariotas-y-procariotas.docxtabla-de-organelos-celulares-de-celulas-eucariotas-y-procariotas.docx
tabla-de-organelos-celulares-de-celulas-eucariotas-y-procariotas.docx
 
word-ejercicios-tabulaciones-taller..doc
word-ejercicios-tabulaciones-taller..docword-ejercicios-tabulaciones-taller..doc
word-ejercicios-tabulaciones-taller..doc
 
La Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráficoLa Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráfico
 
TECNOLOGIA ARQUITECTONICA - CASO IQUITOS - PERU
TECNOLOGIA ARQUITECTONICA - CASO IQUITOS - PERUTECNOLOGIA ARQUITECTONICA - CASO IQUITOS - PERU
TECNOLOGIA ARQUITECTONICA - CASO IQUITOS - PERU
 
ARTE PARTE DE LA ARQUITECTURA, EN QUE INFLUYE MAS
ARTE PARTE DE LA ARQUITECTURA, EN QUE INFLUYE MASARTE PARTE DE LA ARQUITECTURA, EN QUE INFLUYE MAS
ARTE PARTE DE LA ARQUITECTURA, EN QUE INFLUYE MAS
 
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
 
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
7.2 -La guerra civil. Evolución de los bandos y consecuencias-Marta y Elena (...
 
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
 
Metodo-cuadricula-HyST para medicion con luxometro
Metodo-cuadricula-HyST para medicion con luxometroMetodo-cuadricula-HyST para medicion con luxometro
Metodo-cuadricula-HyST para medicion con luxometro
 
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptxLA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
LA DEONTOLOGIA PROFESIONAL EN DISEÑO DE INTERIORES .pptx
 
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTALLA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
LA NEUROARQUITECTURA COMO ESTRATEGIA DE DISEŇO PARA LA SALUD MENTAL
 
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdfTríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
 
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdfBlue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
Blue_Aesthetic_Mood_Board_Brand_Inspiration_Poster.pdf
 

Diseño de Interfaces