Call to action

3,986 views
3,950 views

Published on

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,986
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Call to action

  1. 1. Call to action7 pequeños detallesVerónica Traynor @verotraynor
  2. 2. ¿Cómo logramos quelos usuarioscomprendan dóndehacer click?
  3. 3. 1/7 - Incluyendoaffordances
  4. 4. "¿Cuál es el link?" "¿Paso el mouse para ver si aparece la manito?"Affordances
  5. 5. Un link no puede parecer untexto y un texto no puedeparecer un link.Affordances
  6. 6. Claro + obvio + diferenciadoAffordances
  7. 7. (... del modo que sea, perodiferenciado).Affordances
  8. 8. 2/7 - Generandosuficiente contraste
  9. 9. El contraste no se "siente",se mide :)Contraste
  10. 10. WCAG 2.O PerceptiblesWeb Content Accessibility OperablesGuidelines (WCAG) 2.0 ComprensiblesW3C - Diciembre 2008 RobustosContraste
  11. 11. "1.4.3 Contraste (mínimo): La presentaciónvisual de texto e imágenes de texto tiene unarelación de contraste de, al menos, 4.5:1 ..."(WCAG) 2.0Contraste
  12. 12. La W3C nos ofrece una fórmula ;)
  13. 13. 3/7 - Distinguiendo laacción principal de lasecundaria
  14. 14. claramente distinguidasDistinguiendo acciones 1° y 2°
  15. 15. 4/7 - Incluyendo unfeedback para cadaacción del usuario
  16. 16. Se oscurece en el estado hover (feedback de interacción)Feeback
  17. 17. Se muestra un mensaje (humano!) Estado hover al realizarse la acción (feedback de interacción)Feeback
  18. 18. 5/7 - Cuidando el scroll
  19. 19. Scroll
  20. 20. ¿Terminé?Scroll
  21. 21. Último paso haciendo scroll...Scroll
  22. 22. 6/7 - Ubicando cada linken la frase correcta.
  23. 23. Links orientativos
  24. 24. Para consultar el estado de deuda haga click aquí ¿Cuál es el estado de mi deuda?Links orientativos
  25. 25. 7/7 - Manteniendoconsistencia(en la funcionalidad y en la ubicación)
  26. 26. Correo: la acción "Deshacer" implica que NO se le envía el e-mail al destinatario.Consistencia
  27. 27. 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
  28. 28. El mismo call to action nopuede utilizarse parafunciones distintas.Consistencia
  29. 29. "¿La acción principal va a la derecha o a la izquierda?"Consistencia
  30. 30. Acción principal Acción secundaria Acción secundaria Acción principalConsistencia
  31. 31. ... donde sea,pero siempre manteniendoconsistenciaConsistencia
  32. 32. ... en el sitio completo ;)Consistencia
  33. 33. Call to action7 pequeños detallesVerónica Traynor @verotraynor

×