El documento de Verónica Traynor aborda conceptos clave en el diseño de interacción, como la affordance, la diferenciación entre llamadas a la acción y enlaces, y la importancia de la consistencia y el contraste. Se enfatiza que el diseño debe permitir una comunicación clara y un feedback efectivo para mejorar la experiencia del usuario. También se discute cómo el modelo conceptual debe alinear los objetos de diseño con su representación en la realidad para asegurar una mejor usabilidad.

1. TÉCNICAS DE
USABILIDAD +
INVESTIGACIÓN DE
USUARIOS!
!
PARTE 3: !
CONCEPTOS DE DISEÑO !
DE INTERACCIÓN!
09.2014 VERÓNICA TRAYNOR!

2. Índice!
!
1. AFFORDANCE!
2. DIFERENCIACIÓN DEL CALL TO ACTION PRINCIPAL!
3. DIFERENCIACIÓN DE LOS LINKS VS. LOS TEXTOS!
4. CONSISTENCIA!
5. CONTRASTE!
6. FEEDBACK DE INTERACCIÓN!
7. MODELO CONCEPTUAL!
!

3. 01 / 07 !
AFFORDANCE!

4. “El diseño es un acto de
comunicación entre el diseñador y el
usuario, donde toda la comunicación
proviene de la apariencia del objeto;
el cual necesita explicarse por sí
mismo”. !
UX | Verónica Traynor | @verotraynor!

10. EJEMPLO DE
FALSO
AFFORDANCE
DE BOTÓN!

11. EJEMPLO DE
FALSO
AFFORDANCE
DE BOTÓN!

15. TSUNAMI DE
FALSOS
AFFORDANCES :)!

16. 02 / 07 !
DIFERENCIACIÓN DEL
CALL TO ACTION
PRINCIPAL!

17. EL CALL TO
ACTION
PRINCIPAL ES
DISTINTO DEL
SECUNDARIO!

18. NO HAY
DIFERENCIACIÓN!

19. “Cuanto más cerca de miro y
entiendo, más fácil de usar”.!
!
Daniel Mordecki en el artículo: “Miro,
leo, luego pienso”. !
UX | Verónica Traynor | @verotraynor!

20. 03 / 07 !
DIFERENCIACIÓN DE
LOS LINKS VS. LOS
TEXTOS!

21. UN LINK NO PUEDE
PARECER UN TEXTO NI
UN TEXTO PUEDE
PARECER UN LINK.!
UX | Verónica Traynor | @verotraynor!

23. ¿CÓMO SE
DIFERENCIAN TUS
LINKS?!

24. 04 / 07 !
CONSISTENCIA!

25. ¿PARA QUÉ NOS
SIRVE LA
CONSISTENCIA?!

27. ESTE ÍCONO
LLEVA A LA
PÁGINA DEL
CARRITO!
AQUÍ EL MISMO
ÍCONO
DESPLIEGA EL
BOX!

28. “SHARE” NO ES
UN BOTÓN!

29. 05 / 07 !
CONTRASTE!

30. hola, soy un texto sin
mucho contraste.!

32. 06 / 07 !
FEEDBACK DE
INTERACCIÓN!

34. CONVERSANDO
CON LA
CAFETERA :)!
!
- SELECCIONO CAFÉ LARGO !
- NO DA FEEDBACK!
- SELECCIONO A CAFÉ CORTADO!
- NO DA FEEDBACK!
- SELECCIONO “OK” (SIN ESTAR
SEGURA DE QUÉ TIPO DE CAFÉ
VA A SALIR)!
- SALE CAFÉ CORTADO!

35. CONVERSANDO
CON EL FLUJO
DE UN TRÁMITE:!
!
- HAGO UN TRÁMITE ONLINE!
- ME DICE: “GRACIAS POR
UTILIZAR NUESTROS
SERVICIOS”.!
- NO ENTIENDO. LO HAGO DE
NUEVO.!
- ME DICE: “GRACIAS POR
UTILIZAR NUESTROS
SERVICIOS”.!
- LLAMO AL CALL CENTER.!

36. CONVERSANDO
CON GOOGLE+:!
!
- SUBO UNA IMAGEN Y VOY
CONVERSANDO así ;)!

37. CALL TO
ACTION CON
AFFORDANCE
DE BOTÓN!

38. FEEDBACK DE
INTERACCIÓN!
“HOLA! AQUÍ ESTOY Y
ENTENDÍ QUE
QUIERES VER ESTA
OPCIÓN!”!

39. FEEDBACK DE
INTERACCIÓN: “OK,
ESTOY SUBIENDO
LA IMAGEN,
ESPÉRAME!”!

40. FEEDBACK DE
INTERACCIÓN:
“TERMINÉ! AHORA
LA PUEDES
EDITAR”!

41. FEEDBACK DE
INTERACCIÓN: “OK!
TE ENTENDÍ!
ESPÉRAME QUE
ESTOY
COMPARTIENDO!”!

42. FEEDBACK DE
INTERACCIÓN:
“LISTO! MIRÁ
COMO QUEDÓ!”!

43. CALL TO ACTION +
FEEDBACK DE
INTERACCIÓN!

44. CALL TO ACTION
PRINCIPAL
DIFERENCIADO
DEL
SECUNDARIO ;)!

45. FEEDBACK DE
INTERACCIÓN +
CALL TO ACTION
PARA VOLVER
ATRÁS ;)!

46. 07 / 07 !
MODELO
CONCEPTUAL!

48. SI ESTAMOS IMITANDO
UN OBJETO DE LA
“REALIDAD” SIEMPRE
CUIDEMOS QUE SEA
CONCORDANTE ;)!

50. TÉCNICAS DE
USABILIDAD +
INVESTIGACIÓN DE
USUARIOS!
!
PARTE 3: !
CONCEPTOS DE DISEÑO !
DE INTERACCIÓN!
09.2014 VERÓNICA TRAYNOR!