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!