CONCEPTOS DE DISEÑO DE INTERACCIÓN
-
Upload
veronica-traynor -
Category
Internet
-
view
1.620 -
download
1
description
Transcript of CONCEPTOS DE DISEÑO DE INTERACCIÓN
![Page 1: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/1.jpg)
TÉCNICAS DE USABILIDAD + INVESTIGACIÓN DE USUARIOS!!PARTE 3: !CONCEPTOS DE DISEÑO !DE INTERACCIÓN!09.2014 VERÓNICA TRAYNOR!
![Page 2: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/2.jpg)
Í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!!
![Page 3: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/3.jpg)
01 / 07 !
AFFORDANCE!
![Page 4: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/4.jpg)
“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!
![Page 5: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/5.jpg)
![Page 6: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/6.jpg)
![Page 7: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/7.jpg)
![Page 8: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/8.jpg)
![Page 9: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/9.jpg)
![Page 10: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/10.jpg)
EJEMPLO DE FALSO
AFFORDANCE DE BOTÓN!
![Page 11: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/11.jpg)
EJEMPLO DE FALSO
AFFORDANCE DE BOTÓN!
![Page 12: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/12.jpg)
![Page 13: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/13.jpg)
![Page 14: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/14.jpg)
![Page 15: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/15.jpg)
TSUNAMI DE FALSOS
AFFORDANCES :)!
![Page 16: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/16.jpg)
02 / 07 !
DIFERENCIACIÓN DEL CALL TO ACTION PRINCIPAL!
![Page 17: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/17.jpg)
EL CALL TO ACTION
PRINCIPAL ES DISTINTO DEL SECUNDARIO!
![Page 18: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/18.jpg)
NO HAY DIFERENCIACIÓN!
![Page 19: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/19.jpg)
“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!
![Page 20: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/20.jpg)
03 / 07 !
DIFERENCIACIÓN DE LOS LINKS VS. LOS TEXTOS!
![Page 21: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/21.jpg)
UN LINK NO PUEDE PARECER UN TEXTO NI UN TEXTO PUEDE PARECER UN LINK.!
UX | Verónica Traynor | @verotraynor!
![Page 22: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/22.jpg)
![Page 23: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/23.jpg)
¿CÓMO SE DIFERENCIAN TUS
LINKS?!
![Page 24: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/24.jpg)
04 / 07 !
CONSISTENCIA!
![Page 25: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/25.jpg)
¿PARA QUÉ NOS SIRVE LA
CONSISTENCIA?!
![Page 26: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/26.jpg)
![Page 27: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/27.jpg)
ESTE ÍCONO LLEVA A LA
PÁGINA DEL CARRITO!
AQUÍ EL MISMO ÍCONO
DESPLIEGA EL BOX!
![Page 28: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/28.jpg)
“SHARE” NO ES UN BOTÓN!
![Page 29: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/29.jpg)
05 / 07 !
CONTRASTE!
![Page 30: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/30.jpg)
hola, soy un texto sin mucho contraste.!
![Page 31: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/31.jpg)
![Page 32: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/32.jpg)
06 / 07 !
FEEDBACK DE INTERACCIÓN!
![Page 33: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/33.jpg)
![Page 34: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/34.jpg)
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!
![Page 35: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/35.jpg)
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.!
![Page 36: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/36.jpg)
CONVERSANDO CON GOOGLE+:!!- SUBO UNA IMAGEN Y VOY
CONVERSANDO así ;)!
![Page 37: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/37.jpg)
CALL TO ACTION CON
AFFORDANCE DE BOTÓN!
![Page 38: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/38.jpg)
FEEDBACK DE INTERACCIÓN!
“HOLA! AQUÍ ESTOY Y ENTENDÍ QUE
QUIERES VER ESTA OPCIÓN!”!
![Page 39: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/39.jpg)
FEEDBACK DE INTERACCIÓN: “OK, ESTOY SUBIENDO
LA IMAGEN, ESPÉRAME!”!
![Page 40: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/40.jpg)
FEEDBACK DE INTERACCIÓN:
“TERMINÉ! AHORA LA PUEDES
EDITAR”!
![Page 41: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/41.jpg)
FEEDBACK DE INTERACCIÓN: “OK!
TE ENTENDÍ! ESPÉRAME QUE
ESTOY COMPARTIENDO!”!
![Page 42: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/42.jpg)
FEEDBACK DE INTERACCIÓN: “LISTO! MIRÁ
COMO QUEDÓ!”!
![Page 43: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/43.jpg)
CALL TO ACTION + FEEDBACK DE INTERACCIÓN!
![Page 44: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/44.jpg)
CALL TO ACTION PRINCIPAL
DIFERENCIADO DEL
SECUNDARIO ;)!
![Page 45: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/45.jpg)
FEEDBACK DE INTERACCIÓN + CALL TO ACTION
PARA VOLVER ATRÁS ;)!
![Page 46: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/46.jpg)
07 / 07 !
MODELO CONCEPTUAL!
![Page 47: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/47.jpg)
![Page 48: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/48.jpg)
SI ESTAMOS IMITANDO UN OBJETO DE LA
“REALIDAD” SIEMPRE CUIDEMOS QUE SEA
CONCORDANTE ;)!
![Page 49: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/49.jpg)
![Page 50: CONCEPTOS DE DISEÑO DE INTERACCIÓN](https://reader034.fdocumento.com/reader034/viewer/2022042512/559436931a28ab9a628b4599/html5/thumbnails/50.jpg)
TÉCNICAS DE USABILIDAD + INVESTIGACIÓN DE USUARIOS!!PARTE 3: !CONCEPTOS DE DISEÑO !DE INTERACCIÓN!09.2014 VERÓNICA TRAYNOR!