View
1.620
Download
1
Category
Preview:
DESCRIPTION
AFFORDANCE DIFERENCIACIÓN DEL CALL TO ACTION PRINCIPAL DIFERENCIACIÓN DE LOS LINKS VS. LOS TEXTOS CONSISTENCIA FEEDBACK DE INTERACCIÓN MODELO CONCEPTUAL
Citation preview
TÉCNICAS DE USABILIDAD + INVESTIGACIÓN DE USUARIOS!!PARTE 3: !CONCEPTOS DE DISEÑO !DE INTERACCIÓN!09.2014 VERÓNICA TRAYNOR!
Í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!!
01 / 07 !
AFFORDANCE!
“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!
EJEMPLO DE FALSO
AFFORDANCE DE BOTÓN!
EJEMPLO DE FALSO
AFFORDANCE DE BOTÓN!
TSUNAMI DE FALSOS
AFFORDANCES :)!
02 / 07 !
DIFERENCIACIÓN DEL CALL TO ACTION PRINCIPAL!
EL CALL TO ACTION
PRINCIPAL ES DISTINTO DEL SECUNDARIO!
NO HAY DIFERENCIACIÓN!
“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!
03 / 07 !
DIFERENCIACIÓN DE LOS LINKS VS. LOS TEXTOS!
UN LINK NO PUEDE PARECER UN TEXTO NI UN TEXTO PUEDE PARECER UN LINK.!
UX | Verónica Traynor | @verotraynor!
¿CÓMO SE DIFERENCIAN TUS
LINKS?!
04 / 07 !
CONSISTENCIA!
¿PARA QUÉ NOS SIRVE LA
CONSISTENCIA?!
ESTE ÍCONO LLEVA A LA
PÁGINA DEL CARRITO!
AQUÍ EL MISMO ÍCONO
DESPLIEGA EL BOX!
“SHARE” NO ES UN BOTÓN!
05 / 07 !
CONTRASTE!
hola, soy un texto sin mucho contraste.!
06 / 07 !
FEEDBACK DE INTERACCIÓN!
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!
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.!
CONVERSANDO CON GOOGLE+:!!- SUBO UNA IMAGEN Y VOY
CONVERSANDO así ;)!
CALL TO ACTION CON
AFFORDANCE DE BOTÓN!
FEEDBACK DE INTERACCIÓN!
“HOLA! AQUÍ ESTOY Y ENTENDÍ QUE
QUIERES VER ESTA OPCIÓN!”!
FEEDBACK DE INTERACCIÓN: “OK, ESTOY SUBIENDO
LA IMAGEN, ESPÉRAME!”!
FEEDBACK DE INTERACCIÓN:
“TERMINÉ! AHORA LA PUEDES
EDITAR”!
FEEDBACK DE INTERACCIÓN: “OK!
TE ENTENDÍ! ESPÉRAME QUE
ESTOY COMPARTIENDO!”!
FEEDBACK DE INTERACCIÓN: “LISTO! MIRÁ
COMO QUEDÓ!”!
CALL TO ACTION + FEEDBACK DE INTERACCIÓN!
CALL TO ACTION PRINCIPAL
DIFERENCIADO DEL
SECUNDARIO ;)!
FEEDBACK DE INTERACCIÓN + CALL TO ACTION
PARA VOLVER ATRÁS ;)!
07 / 07 !
MODELO CONCEPTUAL!
SI ESTAMOS IMITANDO UN OBJETO DE LA
“REALIDAD” SIEMPRE CUIDEMOS QUE SEA
CONCORDANTE ;)!
TÉCNICAS DE USABILIDAD + INVESTIGACIÓN DE USUARIOS!!PARTE 3: !CONCEPTOS DE DISEÑO !DE INTERACCIÓN!09.2014 VERÓNICA TRAYNOR!
Recommended