Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Call to action7 pequeños detallesVerónica Traynor @verotraynor
¿Cómo logramos quelos usuarioscomprendan dóndehacer click?
1/7 - Incluyendoaffordances
"¿Cuál es el  link?"                 "¿Paso el                 mouse para ver                 si aparece la               ...
Un link no puede parecer untexto y un texto no puedeparecer un link.Affordances
Claro + obvio + diferenciadoAffordances
(... del modo que sea, perodiferenciado).Affordances
2/7 - Generandosuficiente contraste
El contraste no se "siente",se mide :)Contraste
WCAG 2.O                    PerceptiblesWeb Content Accessibility                            OperablesGuidelines (WCAG) 2....
"1.4.3 Contraste (mínimo): La presentaciónvisual de texto e imágenes de texto tiene unarelación de contraste de, al menos,...
La W3C nos ofrece  una fórmula ;)
3/7 - Distinguiendo laacción principal de lasecundaria
claramente                            distinguidasDistinguiendo acciones 1° y 2°
4/7 - Incluyendo unfeedback para cadaacción del usuario
Se oscurece en el estado hover            (feedback de interacción)Feeback
Se muestra un mensaje (humano!)                                    Estado hover                al realizarse la acción    ...
5/7 - Cuidando el scroll
Scroll
¿Terminé?Scroll
Último paso         haciendo scroll...Scroll
6/7 - Ubicando cada linken la frase correcta.
Links orientativos
Para consultar el estado de deuda haga click aquí            ¿Cuál es el estado de mi deuda?Links orientativos
7/7 - Manteniendoconsistencia(en la funcionalidad y en la ubicación)
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 ...
El mismo call to action nopuede utilizarse parafunciones distintas.Consistencia
"¿La acción               principal va a la               derecha o a la               izquierda?"Consistencia
Acción principal    Acción secundaria     Acción secundaria   Acción principalConsistencia
... donde sea,pero siempre manteniendoconsistenciaConsistencia
... en el sitio completo ;)Consistencia
Call to action7 pequeños detallesVerónica Traynor @verotraynor
Upcoming SlideShare
Loading in …5
×

Call to action

4,127 views

Published on

  • Be the first to comment

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

×