Download - 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