Se dice que al usuario le toma sólo 0,2 segundos decidir si leer o no un artículo en un blog o en una red SNS. No importa la calidad del texto que escribas, si la imagen llamativa no capta la atención de las personas, se ignorará la existencia misma del artículo.

Explicaremos en formato de gráfico los principios de diseño de esquemas de color y diseños que mejorarán drásticamente las tasas de clics (CTR), derivados de datos obtenidos de cientos de pruebas A/B en miniatura.

“Ley de Z” y colocación de letras para controlar la línea de visión

El ojo humano se mueve en una trayectoria “Z” desde la parte superior izquierda de la pantalla hasta la parte superior derecha, la parte inferior izquierda y la parte inferior derecha. Las siguientes son las reglas básicas de diseño para transmitir mensajes instantáneamente en la estrecha pantalla de un teléfono inteligente.

• Coloca la copia principal en la parte superior izquierda: coloca el gancho más grande (signo de interrogación o número) que capte la atención del lector en la parte superior izquierda, donde aterriza la vista por primera vez.
• La cantidad máxima de caracteres es de 13 a 15 caracteres: limite la cantidad de caracteres que se pueden leer de un vistazo y divídala en 2 a 3 líneas para agregar contraste. Con solo hacer las partículas (~no, ~wa) más pequeñas y los sustantivos de palabras clave el doble de tamaño, se puede mejorar enormemente la legibilidad.
• Colocar un “ancla visual” en la parte inferior derecha: Al colocar una foto de la expresión facial de una persona o una ilustración de un icono con efecto tridimensional en el lado derecho, se estabiliza el centro de gravedad de toda la pantalla.

Diseño con “contraste de color complementario” que no quedará oculto en la pantalla de su teléfono inteligente

Los llamativos con contraste insuficiente entre el fondo y el texto se combinarán perfectamente con el fondo de su feed.

• Garantizar el contraste con una diferencia de brillo del 60% o más: Como regla básica, se usa texto oscuro sobre fondos claros y texto blanco sobre fondos oscuros, y los “colores complementarios (por ejemplo, amarillo o naranja como acento sobre un fondo azul)” ubicados en el lado opuesto de la rueda de colores se organizan de manera efectiva.
• Utilice cojines (obi) y sombras paralelas: al colocar texto encima de una foto o una imagen de fondo compleja, asegúrese de colocar una banda negra translúcida (cojín) o utilice un borde o una sombra paralela para que el contorno del texto sea claramente independiente.

Ejemplos típicos de malos diseños a evitar

“Hay demasiado espacio en blanco y la fuente es demasiado pequeña para leerla en un teléfono inteligente” y “Pongo demasiado énfasis en la moda y uso fuentes Mincho delgadas” son errores comunes. Un elemento llamativo no es una obra de arte, sino un “letrero que anima a la gente a hacer clic”. Verifique siempre la vista previa reducida en su teléfono inteligente para asegurarse de tener la fuerza para detener el pulgar.