Charla para el Meetup de Inbound Marketing, Conversión y Redes de Stgo. Aprenderemos cómo optimizar y conseguir conversión utilizando adecuadamente los colores.

1. Optimizando
para tus ojos
#ClockWorkConversionColorModel
@sealmori
Club de
Conversión

2. Sebastián Morales
Riquelme
Consultor IT/Mobile, Growth
Hacking & Inbound Marketing
Mira lo que escribo Medium Mi Experiencia en Linkedin
¿Quién Soy?
Correo: s@4ptech.com Móvil: +569 8282 5127
www.4ptech.com AV. PROVIDENCIA 727 OF.414. PROVIDENCIA,
Profesional del Área de las Tecnologías de Información e Innovación
con 11 Años de Experiencia.
Consultor en Estrategias de crecimiento Growth Hacking,
Metodología Inbound Marketing, Usabilidad UX/UI, Arquitectura de
la Información, Apps Móviles y Sistemas Web, Dirección de Equipos
de Trabajo Multidisciplinarios con Metodologías Ágiles.
Experiencial en proyectos con

3. PIENSA MÓVIL
Buscar una dirección, pedir un taxi, denunciar, ocio,
contactarnos, buscar pareja, ordenar comida, jugar.
De las búsquedas de Google
provienen de Smartphones
+ 60%

4. AMIGABLE / USABLE
Diseño Amigable y Centrado en el usuario

5. MOBILE FRIENDLY

6. OPTIMIZACIÓN PARA SUS OJOS
Psicología de los colores

10. 100 Milisegundos
Impresión sobre una Persona

12. 17 a 50 Milisegundos
Impresión sobre un Sitio o Apps

14. ¿Desean continuar?
¿Algo anda mal?

15. Tip: Call To Action

16. ¿Que provoca este lugar?

17. ¿Que provoca este lugar?

18. Tip: Call To Action
¿Que botón da más confianza?

19. Colores Cálidos y Fríos

20. Clock color circle
Cada color puro representa una
hora del día

21. Clock color circle
Primario
Complementario
Amarillo
Purpura
Verde
RojoAzul
Naranjo

22. Clockwork
Conversion Color
Model

23. Usar color
complementario
PURO para CTA
Principio #1

24. Reserve 15 min
de colores
complementarios
para CTA
Principio #2
Nota: estos colores no
deben utilizarse en otras
partes o componentes de
la interfaz

25. Color puro es mas
efectivo a la vista
Principio #3
Sin opacidad, degradados
ni filtros.

26. Use Sombras,
Tonos y Matices
como colores
complementarios
NO-CTA
Principio #4
Menos es más, no
sobrecargar de colores ya
que puede neutralizar los
colores CTA.

27. Ejemplos No logrado

28. Ejemplos logrado

30. Las reglas de la moda
también se aplica en
estos casos
No vestirse con mas de 3
colores

31. REGLA DIGITAL:
4 Colores es suficiente para
un diseño web. Color
principal, Complementario
CTA, Color enlaces y una
opción de escala de grises
(*).
(*) Recordar el principio 4, no ocupar colores cercanos
a los CTA, ya que los neutraliza.

32. OPTIMIZAMOS, para
bajar la tasa de
abandono de usuarios
de nuestro proyecto.
“BOUNCE RATE”
Como todo se lo debemos a nuestro
público…

33. INFLUYE DIRECTAMENTE EN LA TOMA DE DECISIÓNES DEL USUARIOS FINAL
Fuente GOMO

34. Fuentes
s@4ptech.com
@sealmori
(Angie Shottmuller) Clockwork Model
http://www.threedeepmarketing.com/color-conversion-science-clockwork-model
Design Guideline
https://developer.android.com/intl/es/design/patterns/index.html
https://msdn.microsoft.com/es-es/library/windows/apps/xaml/dn632431.aspx
https://developer.apple.com/design/
Club de
Conversión