call to action

Call to action7 pequeños detalles

Verónica Traynor @verotraynor

¿Cómo logramos que los usuarios comprendan dónde hacer click?

1/7 - Incluyendo affordances

Affordances

"¿Paso el mouse para ver si aparece la manito?"

"¿Cuál es el link?"

Affordances

Un link no puede parecer un texto y un texto no puede parecer un link.

Affordances

Claro + obvio + diferenciado

Affordances

(... del modo que sea, pero diferenciado).

2/7 - Generando suficiente contraste

Contraste

El contraste no se "siente",se mide :)

Contraste

WCAG 2.OWeb Content Accessibility Guidelines (WCAG) 2.0

W3C - Diciembre 2008

PerceptiblesOperablesComprensiblesRobustos

Contraste

"1.4.3 Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1 ..."(WCAG) 2.0

La W3C nos ofrece una fórmula ;)

3/7 - Distinguiendo la acción principal de la secundaria

Distinguiendo acciones 1° y 2°

claramente distinguidas

4/7 - Incluyendo un feedback para cada acción del usuario

Feeback

Se oscurece en el estado hover(feedback de interacción)

Feeback

Estado hoverSe muestra un mensaje (humano!)

al realizarse la acción(feedback de interacción)

5/7 - Cuidando el scroll

Scroll

Scroll

¿Terminé?

Scroll

Último paso haciendo scroll...

6/7 - Ubicando cada link en la frase correcta.

Links orientativos

Links orientativos

Para consultar el estado de deuda haga click aquí

¿Cuál es el estado de mi deuda?

7/7 - Manteniendo consistencia(en la funcionalidad y en la ubicación)

Consistencia

Correo: la acción "Deshacer" implica que NO se le envía el e-mail al destinatario.

Consistencia

Calendar: la acción "Deshacer" implica que se le envía una invitación al

destinatario y que luego se le envía un e-mail automático de rechazo.

Consistencia

El mismo call to action no puede utilizarse para funciones distintas.

Consistencia

"¿La acción principal va a la derecha o a la izquierda?"

Consistencia

Acción principal

Acción principal

Acción secundaria

Acción secundaria

Consistencia

... donde sea,pero siempre manteniendo consistencia

Consistencia

... en el sitio completo ;)

Verónica Traynor @verotraynor

Call to action7 pequeños detalles