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

  • 1,311 views
Uploaded 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 …

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,311
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
0
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. “Si la experiencia essatisfactoria, latecnología es exitosa”.
  • 2. Diseñar parala acción¡No más clic aquí!Natalia Vivas VelascoConsultora en Experiencia de Usuariowww.usaria.co
  • 3. «El grado en que una persona logracumplir una objetivo en unaaplicación o sitio web, justifica laexistencia de éste»
  • 4. ¿Cuál es el propósito,objetivo, necesidad o deseoque tienen los usuarios delsoftware o sitios web queustedes desarrollan?
  • 5. VenderEnterarseInformarseConocerOpinarParticiparHablarExpresarseMirarEncontrarJugarBuscarCotizarPagarReservarComprarAdministrarAgendar¡Piensa en un verbo!
  • 6. Mejor piensa en 3tipos de acciones
  • 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. 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. Web  Usability  MX  -­‐  Todos  los  derechos  reservados  Negocio TecnologíaPersonasInterfaces*  
  • 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. ¿Pero qué es una interfaz?
  • 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. La interfaz no es simplemente una imagen.NO es look and feel, se trata de interactand feel, search and feel, read and feel….    
  • 14. El diseño web digital es integradory creador de escenarios, espacios,ambientes, lugares de interacciónque apoyan las labores de losseres humanos.  
  • 15. Un tipo de diseño máscercano a la arquitectura, aldiseño industrial…Y a la gente en relación consu entorno.
  • 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. 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. ¿Interactividad = interacción?
  • 19. Problemas de interacción
  • 20. Problemas de interacción
  • 21. Problemas de interacción
  • 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. ¿Qué es Diseño de Interacción?h:p://www.doc.ic.ac.uk/~frk/frank/da/hci/What%20is%20InteracFon%20Design.pdf      
  • 24. “El Diseño de espacios para la comunicacióne interacción humana” Terry Winograd¿Qué es Diseño de Interacción?
  • 25. Diseño de Interacción y UX
  • 26. El Contexto UXEl ContextoUX
  • 27. La realidad
  • 28. Web  Usability  MX  -­‐  Todos  los  derechos  reservados  ¿Cómo se diseña lainteracción?
  • 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. ¿Qué es Diseño de Interacción?Entendiendo el problema del espacio
  • 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. Modelos mentalesh:p://www.jnd.org/    
  • 33. Basado en Acciones:1. Instruccional2. Conversacional3. Manipulación y Navegación4. Exploración y NavegaciónBasado en Objetos:
  • 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. FiltrarPrenderApagarActivarVisualizarOrdenarAumentarDisminuirAmpliarAcercarAlejar…Controles
  • 36. “Consistency makes theinterface familiar andpredictable” 
  • 37. Consejos
  • 38. # 1No todas lasacciones sonbotones.
  • 39. # 2Diferencias las accionesdeterminantes con las informativas
  • 40. # 3Resalta la acciónimportante
  • 41. # 4Crea tu propia kit UI ytus criterios deinteracción.E investiga sobre patrones deinteracción
  • 42. #5Cualquier cosa queparezca un objeto, essuceptible de sercliqueado
  • 43. Web  Usability  MX  -­‐  Todos  los  derechos  reservados  Y sobre todoresponde estaspreguntas antes decualquier decisión
  • 44. ¿Para quiéndiseñas?
  • 45. ¿Cuál es sucontexto?thereifixedit.com  
  • 46. ¿Qué siente?Tomado  de:  inexcess.tv/  
  • 47. ¿Quéespera?
  • 48. ¿Cómolo usa?thereifixedit.com  
  • 49. @UsariaUXnatalia.vivas@usaria.co@nataliavivas