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.

1. “Si la experiencia es
satisfactoria, la
tecnología es exitosa”.

2. Diseñar para
la acción
¡No más clic aquí!
Natalia Vivas Velasco
Consultora en Experiencia de Usuario
www.usaria.co

3. «El grado en que una persona logra
cumplir una objetivo en una
aplicación o sitio web, justifica la
existencia de éste»

4. ¿Cuál es el propósito,
objetivo, necesidad o deseo
que tienen los usuarios del
software o sitios web que
ustedes desarrollan?

5. Vender
Enterarse
Informarse
Conocer
Opinar
Participar
HablarExpresarse
Mirar
Encontrar
Jugar
Buscar
Cotizar
Pagar
Reservar
Comprar
Administrar
Agendar
¡Piensa en un verbo!

6. Mejor piensa en 3
tipos de acciones

7. Web
Usability
MX
-­‐
Todos
los
derechos
reservados
Lo que tu quieres
que haga
¡Que compre!
¡Que me deje sus datos!
¡Que vuelva a comprar!
¡Que le cuente a sus amigos!
Lo que el sistema
permite
Buscar
Registrarse
Pagar
Lo que el usuario quiere
Tener una camisa nueva
UX

8. El usuario
No 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ía
Personas
Interfaces
*

10. *Aclaro:
UX no se trata de la interfaz.
Pero se vale de interfaces para
posibilitar experiencias, a través de
la investigación, análisis y pruebas con
usuarios finales.
.

11. ¿Pero qué es una interfaz?

12. "La interfaz es un dispositivo semiótico
de producción de sentido” Carlos Scolari
“La interfaz como el espacio en que el
ser humano y las máquinas se
encuentran” Nicholas Negroponte

13. La interfaz no es simplemente una imagen.
NO es look and feel, se trata de interact
and feel, search and feel, read and feel….

14. El diseño web digital es integrador
y creador de escenarios, espacios,
ambientes, lugares de interacción
que apoyan las labores de los
seres humanos.

15. Un tipo de diseño más
cercano a la arquitectura, al
diseño industrial…
Y a la gente en relación con
su entorno.

16. Capacidad técnica de conceder el máximo de
posibilidades de comunicación entre el
usuario y la máquina, conseguir que el tiempo
de la máquina en relación de las acciones del
usuario sea reducido (Coomans 1995)
¿Qué es interactividad?

17. Interactividad es la capacidad del usuario para
controlar un mensaje no-lineal hasta el grado
establecido por el productor/diseñador dentro de los
límites de un sistema o medio de comunicación.
¿Qué es interactividad?

18. ¿Interactividad = interacción?

20. Problemas de interacción

21. Problemas de interacción

22. Problemas de interacción

24. "We need to be more aware of why we think how
we do, what triggers interactions and behaviors
in people to make choices. As UX people we
need to be aware of why as much as how systems
should be designed. Getting the why will allow us
to improve the experience beyond the audience's
anticipation."
- James Kelway

26. ¿Qué es Diseño de Interacción?
h:p://www.doc.ic.ac.uk/~frk/frank/da/hci/What%20is%20InteracFon%20Design.pdf

27. “El Diseño de espacios para la comunicación
e interacción humana” Terry Winograd
¿Qué es Diseño de Interacción?

28. Diseño de Interacción y UX

29. El Contexto UXEl Contexto
UX

30. La realidad

31. Web
Usability
MX
-­‐
Todos
los
derechos
reservados
¿Cómo se diseña la
interacción?

32. “Como todo en diseño es una conversación con
materiales, es importante entender las
limitaciones y oportunidades asociados a cada
tecnología”
Alan Cooper - About Face

33. ¿Qué es Diseño de Interacción?
Entendiendo el problema del espacio

34. “El principio mismo del
hiperenlace, que constituye la
base de los medios interactivos,
objetiva el proceso de
asociación, a menudo tomado
como central en el
pensamiento humano”
Lev Manovich – The language of New Media

35. Modelos mentales
h:p://www.jnd.org/

36. Basado en Acciones:
1. Instruccional
2. Conversacional
3. Manipulación y Navegación
4. Exploración y Navegación
Basado en Objetos:

38. Web
Usability
MX
-­‐
Todos
los
derechos
reservados
Determinantes
1. Pagar
2. Comprar
3. Enviar
4. Descargar
5. Guardar
6. …
Transitivas
1. Continuar
2. Saltar
3. Avanzar
4. Siguiente
5. Volver
6. …
De Enganche
1. Probar
2. Empezar
3. Contactar
4. Únirse
5. ….
De ampliación
1. Seguir leyendo
2. Ver más productos
3. 45 items
4. ….
Tipos de acciones

39. Filtrar
Prender
Apagar
Activar
Visualizar
Ordenar
Aumentar
Disminuir
Ampliar
Acercar
Alejar
…
Controles

43. “Consistency makes the
interface familiar and
predictable”

44. Consejos

45. # 1
No todas las
acciones son
botones.

46. # 2
Diferencias las acciones
determinantes con las informativas

47. # 3
Resalta la acción
importante

48. # 4
Crea tu propia kit UI y
tus criterios de
interacción.
E investiga sobre patrones de
interacción

49. #5
Cualquier cosa que
parezca un objeto, es
suceptible de ser
cliqueado

50. Web
Usability
MX
-­‐
Todos
los
derechos
reservados
Y sobre todo
responde estas
preguntas antes de
cualquier decisión

51. ¿Para quién
diseñas?

52. ¿Cuál es su
contexto?
thereifixedit.com

53. ¿Qué siente?
Tomado
de:
inexcess.tv/

54. ¿Qué
espera?

55. ¿Cómo
lo usa?
thereifixedit.com

56. @UsariaUX
natalia.vivas@usaria.co
@nataliavivas