AFFORDANCE DIFERENCIACIÓN DEL CALL TO ACTION PRINCIPAL DIFERENCIACIÓN DE LOS LINKS VS. LOS TEXTOS CONSISTENCIA FEEDBACK DE INTERACCIÓN MODELO CONCEPTUAL

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!