“Si la experiencia essatisfactoria, latecnología es exitosa”.
Diseñar parala acción¡No más clic aquí!Natalia Vivas VelascoConsultora en Experiencia de Usuariowww.usaria.co
«El grado en que una persona logracumplir una objetivo en unaaplicación o sitio web, justifica laexistencia de éste»
¿Cuál es el propósito,objetivo, necesidad o deseoque tienen los usuarios delsoftware o sitios web queustedes desarrollan?
VenderEnterarseInformarseConocerOpinarParticiparHablarExpresarseMirarEncontrarJugarBuscarCotizarPagarReservarComprarAdmini...
Mejor piensa en 3tipos de acciones
Web	  Usability	  MX	  -­‐	  Todos	  los	  derechos	  reservados	  Lo que tu quieresque haga¡Que compre!¡Que me deje sus d...
El usuarioNo vino a hacer clic aquíTu no quieres que haga clic aquíLa acción del sistema jamás es hacer clic aquí
Web	  Usability	  MX	  -­‐	  Todos	  los	  derechos	  reservados	  Negocio TecnologíaPersonasInterfaces*	  
*Aclaro:UX no se trata de la interfaz.Pero se vale de interfaces paraposibilitar experiencias, a través dela investigación...
¿Pero qué es una interfaz?
"La interfaz es un dispositivo semióticode producción de sentido” Carlos Scolari“La interfaz como el espacio en que elser ...
La interfaz no es simplemente una imagen.NO es look and feel, se trata de interactand feel, search and feel, read and feel...
El diseño web digital es integradory creador de escenarios, espacios,ambientes, lugares de interacciónque apoyan las labor...
Un tipo de diseño máscercano a la arquitectura, aldiseño industrial…Y a la gente en relación consu entorno.
Capacidad técnica de conceder el máximo deposibilidades de comunicación entre elusuario y la máquina, conseguir que el tie...
Interactividad es la capacidad del usuario paracontrolar un mensaje no-lineal hasta el gradoestablecido por el productor/d...
¿Interactividad = interacción?
Problemas de interacción
Problemas de interacción
Problemas de interacción
"We need to be more aware of why we think howwe do, what triggers interactions and behaviorsin people to make choices. As ...
¿Qué es Diseño de Interacción?h:p://www.doc.ic.ac.uk/~frk/frank/da/hci/What%20is%20InteracFon%20Design.pdf	  	  	  
“El Diseño de espacios para la comunicacióne interacción humana” Terry Winograd¿Qué es Diseño de Interacción?
Diseño de Interacción y UX
El Contexto UXEl ContextoUX
La realidad
Web	  Usability	  MX	  -­‐	  Todos	  los	  derechos	  reservados	  ¿Cómo se diseña lainteracción?
“Como todo en diseño es una conversación conmateriales, es importante entender laslimitaciones y oportunidades asociados a...
¿Qué es Diseño de Interacción?Entendiendo el problema del espacio
“El principio mismo delhiperenlace, que constituye labase de los medios interactivos,objetiva el proceso deasociación, a m...
Modelos mentalesh:p://www.jnd.org/	  	  
Basado en Acciones:1. Instruccional2. Conversacional3. Manipulación y Navegación4. Exploración y NavegaciónBasado en Objet...
Web	  Usability	  MX	  -­‐	  Todos	  los	  derechos	  reservados	  Determinantes1.  Pagar2.  Comprar3.  Enviar4.  Descarga...
FiltrarPrenderApagarActivarVisualizarOrdenarAumentarDisminuirAmpliarAcercarAlejar…Controles
“Consistency makes theinterface familiar andpredictable” 
Consejos
# 1No todas lasacciones sonbotones.
# 2Diferencias las accionesdeterminantes con las informativas
# 3Resalta la acciónimportante
# 4Crea tu propia kit UI ytus criterios deinteracción.E investiga sobre patrones deinteracción
#5Cualquier cosa queparezca un objeto, essuceptible de sercliqueado
Web	  Usability	  MX	  -­‐	  Todos	  los	  derechos	  reservados	  Y sobre todoresponde estaspreguntas antes decualquier d...
¿Para quiéndiseñas?
¿Cuál es sucontexto?thereifixedit.com	  
¿Qué siente?Tomado	  de:	  inexcess.tv/	  
¿Quéespera?
¿Cómolo usa?thereifixedit.com	  
@UsariaUXnatalia.vivas@usaria.co@nataliavivas
Diseñar para la acción. ¡No más clic aquí!
Diseñar para la acción. ¡No más clic aquí!
Diseñar para la acción. ¡No más clic aquí!
Diseñar para la acción. ¡No más clic aquí!
Diseñar para la acción. ¡No más clic aquí!
Diseñar para la acción. ¡No más clic aquí!
Diseñar para la acción. ¡No más clic aquí!
Upcoming SlideShare
Loading in …5
×

Diseñar para la acción. ¡No más clic aquí!

1,468
-1

Published on

El diseño de interfaces gráficas para entornos digitales nunca ha sido sólo un tema de look and feel. Es necesario pasar de diseñar lo que se ve en una pantalla, a identificar y planear todas las acciones que queremos que realice el usuario en el sistema, en relación a sus necesidades.
Charla orientada en Congreso WEB 2013 - Zaragoza, España.

Published in: Design

Diseñar para la acción. ¡No más clic aquí!

  1. 1. “Si la experiencia essatisfactoria, latecnología es exitosa”.
  2. 2. Diseñar parala acción¡No más clic aquí!Natalia Vivas VelascoConsultora en Experiencia de Usuariowww.usaria.co
  3. 3. «El grado en que una persona logracumplir una objetivo en unaaplicación o sitio web, justifica laexistencia de éste»
  4. 4. ¿Cuál es el propósito,objetivo, necesidad o deseoque tienen los usuarios delsoftware o sitios web queustedes desarrollan?
  5. 5. VenderEnterarseInformarseConocerOpinarParticiparHablarExpresarseMirarEncontrarJugarBuscarCotizarPagarReservarComprarAdministrarAgendar¡Piensa en un verbo!
  6. 6. Mejor piensa en 3tipos de acciones
  7. 7. Web  Usability  MX  -­‐  Todos  los  derechos  reservados  Lo que tu quieresque haga¡Que compre!¡Que me deje sus datos!¡Que vuelva a comprar!¡Que le cuente a sus amigos!Lo que el sistemapermiteBuscarRegistrarsePagarLo que el usuario quiereTener una camisa nuevaUX  
  8. 8. El usuarioNo vino a hacer clic aquíTu no quieres que haga clic aquíLa acción del sistema jamás es hacer clic aquí
  9. 9. Web  Usability  MX  -­‐  Todos  los  derechos  reservados  Negocio TecnologíaPersonasInterfaces*  
  10. 10. *Aclaro:UX no se trata de la interfaz.Pero se vale de interfaces paraposibilitar experiencias, a través dela investigación, análisis y pruebas conusuarios finales..
  11. 11. ¿Pero qué es una interfaz?
  12. 12. "La interfaz es un dispositivo semióticode producción de sentido” Carlos Scolari“La interfaz como el espacio en que elser humano y las máquinas seencuentran” Nicholas Negroponte    
  13. 13. La interfaz no es simplemente una imagen.NO es look and feel, se trata de interactand feel, search and feel, read and feel….    
  14. 14. El diseño web digital es integradory creador de escenarios, espacios,ambientes, lugares de interacciónque apoyan las labores de losseres humanos.  
  15. 15. Un tipo de diseño máscercano a la arquitectura, aldiseño industrial…Y a la gente en relación consu entorno.
  16. 16. Capacidad técnica de conceder el máximo deposibilidades de comunicación entre elusuario y la máquina, conseguir que el tiempode la máquina en relación de las acciones delusuario sea reducido (Coomans 1995)¿Qué es interactividad?
  17. 17. Interactividad es la capacidad del usuario paracontrolar un mensaje no-lineal hasta el gradoestablecido por el productor/diseñador dentro de loslímites de un sistema o medio de comunicación.¿Qué es interactividad?
  18. 18. ¿Interactividad = interacción?
  19. 19. Problemas de interacción
  20. 20. Problemas de interacción
  21. 21. Problemas de interacción
  22. 22. "We need to be more aware of why we think howwe do, what triggers interactions and behaviorsin people to make choices. As UX people weneed to be aware of why as much as how systemsshould be designed. Getting the why will allow usto improve the experience beyond the audiencesanticipation."- James Kelway
  23. 23. ¿Qué es Diseño de Interacción?h:p://www.doc.ic.ac.uk/~frk/frank/da/hci/What%20is%20InteracFon%20Design.pdf      
  24. 24. “El Diseño de espacios para la comunicacióne interacción humana” Terry Winograd¿Qué es Diseño de Interacción?
  25. 25. Diseño de Interacción y UX
  26. 26. El Contexto UXEl ContextoUX
  27. 27. La realidad
  28. 28. Web  Usability  MX  -­‐  Todos  los  derechos  reservados  ¿Cómo se diseña lainteracción?
  29. 29. “Como todo en diseño es una conversación conmateriales, es importante entender laslimitaciones y oportunidades asociados a cadatecnología”Alan Cooper - About Face
  30. 30. ¿Qué es Diseño de Interacción?Entendiendo el problema del espacio
  31. 31. “El principio mismo delhiperenlace, que constituye labase de los medios interactivos,objetiva el proceso deasociación, a menudo tomadocomo central en elpensamiento humano”Lev Manovich – The language of New Media
  32. 32. Modelos mentalesh:p://www.jnd.org/    
  33. 33. Basado en Acciones:1. Instruccional2. Conversacional3. Manipulación y Navegación4. Exploración y NavegaciónBasado en Objetos:
  34. 34. Web  Usability  MX  -­‐  Todos  los  derechos  reservados  Determinantes1.  Pagar2.  Comprar3.  Enviar4.  Descargar5.  Guardar6.  …Transitivas1.  Continuar2.  Saltar3.  Avanzar4.  Siguiente5.  Volver6.  …De Enganche1.  Probar2.  Empezar3.  Contactar4.  Únirse5.  ….De ampliación1.  Seguir leyendo2.  Ver más productos3.  45 items4.  ….Tipos de acciones
  35. 35. FiltrarPrenderApagarActivarVisualizarOrdenarAumentarDisminuirAmpliarAcercarAlejar…Controles
  36. 36. “Consistency makes theinterface familiar andpredictable” 
  37. 37. Consejos
  38. 38. # 1No todas lasacciones sonbotones.
  39. 39. # 2Diferencias las accionesdeterminantes con las informativas
  40. 40. # 3Resalta la acciónimportante
  41. 41. # 4Crea tu propia kit UI ytus criterios deinteracción.E investiga sobre patrones deinteracción
  42. 42. #5Cualquier cosa queparezca un objeto, essuceptible de sercliqueado
  43. 43. Web  Usability  MX  -­‐  Todos  los  derechos  reservados  Y sobre todoresponde estaspreguntas antes decualquier decisión
  44. 44. ¿Para quiéndiseñas?
  45. 45. ¿Cuál es sucontexto?thereifixedit.com  
  46. 46. ¿Qué siente?Tomado  de:  inexcess.tv/  
  47. 47. ¿Quéespera?
  48. 48. ¿Cómolo usa?thereifixedit.com  
  49. 49. @UsariaUXnatalia.vivas@usaria.co@nataliavivas

×