Your SlideShare is downloading. ×
  • Like
Call to action
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,822
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
12
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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