Landing Page. La primera impresión es lo que cuenta. 30 Tips
Se denomina página de aterrizaje (landing page) a una página web a la que una persona llega, después de haber pulsado en el enlace de algún banner o anuncio de texto situado en otra página web o portal de internet.
(Fuente: Wikipedia)
Como hacer una landing page efectiva
- Contenido seleccionado y enfocado para:
- Dar motivos
- Resolver dudas
- Dar la opción de convertir
Si algún texto o imagen no da información sobre alguno de estos tres objetivos no debería estar.
- Textos claros y simples, pero convincentes. Lo que se diga debe reflejar el motivo de búsqueda del usuario.
- Informaciones de apoyo: Incluir también los contenidos que puedan apoyar el valor añadido de la oferta como mencionar la gama completa de productos, incluir testimonios o referencias, experiencia de la empresa, etc.
- Trabajar teniendo en cuenta el “look and feel”: debe apoyarse la oferta con logos, sellos de calidad, etc.
- Crea unos contenidos centrados en el usuario, en los beneficios de la propuesta de valor de tu producto o servicio. Asegúrate que en el texto del mensaje de la página diga más veces “túZ” que “nosotros”.
- Una página, un producto: Información detallada sobre un producto específico solamente. Muestra una oferta clara y llamando a tu cliente potencial a la acción.
- Sin scroll: Presentación del producto sin necesidad de scroll y asegurarse que el “Call to Action” esté dentro del primer scroll.
- Links repetidos: Si el texto principal es muy extenso, incluir botones o links repetidos que conduzcan al objetivo de conversión.
- Coloca muchos puntos de conversión.
- Orientarlas al tipo de usuario: Estudiar detalladamente los perfiles de usuario y crear páginas distintas para cada uno, según el origen, las palabras claves de búsqueda, etc…
- Transmitir credibilidad y profesionalidad: La gente es muy reticente a comprar en páginas web que por su apariencia no transmiten confianza.
- Evita errores ortográficos o gramaticales: ya que reportan una mala imagen del vendedor
- Redacción del título de la página y del titular : Son los elementos principales a la hora de que un usuario conozca la información que la página le va a ofrecer.
- El título de la landing page con las palabras clave: debe corresponderse con las palabras clave que la gente busca para encontrar tu producto o servicio.
- Minimizar el tiempo de carga: La carga de la web es un elemento especialmente crítico cuando estás navegando hacia una página que no conoces ni sabes lo que vas a encontrar.
- Pedir explícitamente lo que queremos que haga el usuario.
Estos son las famosas call-to-action: “Haga clic aquí para añadir al carrito”, “Suscríbase aquí”, “Rellene este formulario para recibir el regalo”… - Botones de acción: Los botones largos y rojos suelen mejorar la conversión.
- Información actualizada: Mantén siempre la información de caracterísiticas y precios actualizada.
- Actualización periódica: Para mejorar la indexación en los buscadores y para comparar con las versiones anteriores.
- Diseño simple y limpio. Evita el uso de popups, popunders, u otros elementos que puedan obstaculizar la navegación del usuario.
- Eliminar elementos que distraen, por ejemplo, botones de navegación, banners de autopromoción.
- Usable: Asegúrate de que estás utilizando buenas prácticas.
- Mostrar el precio o un rango de precios ayudará al comprador a continuar en el proceso.
- Ofertas especiales: Vincular descuentos o regalos especiales a la campaña específica.
- Sin necesidad de registro: Permite al usuario avanzar lo más posible en el proceso, sin necesidad de registrarse o iniciar una sesión de usuario.
- Minimizar la cantidad de clics en el redireccionamiento de los “pasos” hacia la conversión
- Dar varios canales para generar la conversión: formularios en la misma página, teléfonos, MSN, Skype, etc. Mostrar estas vías
de comunicación en forma destacada. - Prueba diferentes modelos de landing page, mide y compara los resultados.
- Optimización por prueba-error: Compara resultados cambiando los titulares, la distribución de los contenidos, las fotos, etc…
- Realiza un seguimiento de las conversiones latentes, de las diferidas y del abandono.
Te puede interesar
Referencias y recursos
- Landing pages : Diseño de landing pages
- The Landing Page Design Toolbox: 100 Tools, Tips and Resources: 100 herramientas para medir la efectividad de tu landing page
- El porqué invertir esfuerzos en un landing page
- Herramientas para Evaluar tus Páginas de Aterrizaje
- Diseño de una Landing Page
- Los 10 Principios de la optimización de páginas de conversión B2B
- Landing pages
- No hacen falta landing pages
Redactar web para una lectura rápida
El usuario web siempre intenta optimizar su tiempo y velocidad de lectura pero sin comprometer una buena comprensión del texto (puede perder algún detalle, pero no quiere perder una información esencial).
Desarrolla técnicas de lectura rápida para conseguir encontrar lo más relevante en una web en segundos y conseguir extraer la mayor cantidad de información en el menor tiempo posible.
Facilitar esta labor al usuario nos permitirá:
- Que encuentre en nuestra web el contenido que le interesa.
- Que no pierda el tiempo en nuestra web si no podemos ofrecerle lo que busca.
Redacción web para un lectura rápida
- El título debe estar redactado de la forma más directa posible y estar claramente destacado.
- La utilización de subtítulos dentro de cada página también constituye un importante elemento que ayudará al usuario a leer más fácilmente el contenido del mensaje.
- Usar encabezados para organizar el textos.
- Crear una clara jerarquía visual en cada página.
- Utilizar estilo de redacción de pirámide invertida, comenzando por la conclusión y finalizando con los detalles.
- Utilizar cuadros destacados de resumen.
- Incluir negritas para remarcar palabras clave que puedan guiar la lectura dentro de cada párrafo.
- Los bullets (viñetas) y las listas numeradas detienen el efecto “scanning” y llaman la atención hacia puntos importantes del texto. En general se acostumbra utilizar listas numeradas cuando el orden de los ítems es relevante y viñetas cuando la secuencia de lectura no lo es. En una misma lista, se sugiere un límite de nueve ítems.
- Separar las páginas en áreas cláramente definidas.
- Minimizar el ruido.
- Los párrafos deben contener una única idea.
- Aprovechar las imágenes y gráficos (una imagen vale más que mil palabras).
- Usar ladillos. En textos largos deben insertarse una o varias palabras que anticipen el contenido de los párrafos siguientes. Deben ser cortos (escribir pensando en lo visual)
Fuentes
- Redactar para la web
- Escribir y redactar contenidos para internet
- 10 principios de un diseño web accesible
- Escribir para la red
Dislexia. La bew bara dobos.
Se llama dislexia al trastorno de la lectura que imposibilita su realización correcta.
La dislexia provoca
- Confusión de letras de sonidos semejantes: Quienes padecen dislexia confunden sonidos, como “d” por “p”, “t” por “d”, “l” por “n”, etc. Escriben “lata” por “nata” “enefante” por “elefante” “dita” por “tita” “alimales” por “animales”, “Anfonso” por “Alfonso”, “data” por “pata”, etc.
- Confusión de letras de formas semejantes: confunden los siguientes grafemas: “b” con “t”, “l” con “t”, “f” con “g”, “m” con “n”, “m” con “u”, etc. Leen “bropecé” por “tropecé”, “tome” por “toma”, “garra” por “jarra”.
- Rotación de letra: En horizontal confunde “d” por “b”, “p” por “q”. En vertical confunde “n” por “u”, “M” por ” W”. Escribe o lee “qocos” por “pocos”, “uada” por “nada”, “doba” por “boda”, “ardol” por “árbol”, “drazo” por “brazo”, “brisa” por “prisa”, “proma” por “broma”, etc.
- Omisión de letras, sílabas, e incluso palabras: Ejemplos “ni” por “niño”, “chocoate” por “chocolate”, “sodado” por “soldado”, “faol” por “farol”, “deo” por “dedo”, “jarin” por “jardín”, etc.
- Mezcla de letras y sílabas: Escribe “tanvena” por “ventana”, “diosen” por “desde”, etc.
- Transposición de letras y sílaba: Así por ejemplo: se escribe “el” por “le”, “sol” por “los”, “plumón” por “pulmón”, “calvo” por “clavo”, “blanco” por “balcón”, “tirbus” por “tribus”, “tradan” por “tardan”, etc.
- Sustituciones semánticas: Consisten en la confusión entre palabras parecidas u opuestas en su significado, tanto en la lectura como en la escritura. Ejemplo: cuando leen o escriben “suelo” por “piso”, “blanco” por “negro”, “hombre” por “señor”, “cura” por “sacerdote”.
- Agregado de letras y sílaba: Por ejemplo: “alumnos” por “alumnos”,”resuluto” por “resulto” , “salire” por “salir”.
- Cambios o sustituciones: Leen “temblo” por “templo”, escriben “plase” por “clase”.
- Contaminaciones: Por ejemplo: “La casa de juanaca” por “la casaca de juana”, “junetea” por “juanete”
- Separaciones o disociaciones: Ejemplo: “la car-pe-ti-ta” por “la carpetita”, “lape-lo-ta-dema-un-el” por “la pelota de Manuel”.
Recomendaciones para facilitar el acceso a los contenidos a personas con dislexia
- No ‘justificar’ los textos: El ‘justificado’ crea patrones de espacios desiguales entre las palabras, patrones que resultan difíciles de ignorar.
- Colores de fondo: Muchos lectores disléxicos son especialmente sensibles al brillo del fondo blanco lo que provoca que vean las letras como nubladas. El color negro puro puede provocar tambien un efecto similar. SE reomienda facilitar un color gris oscuro (#FFFFE5)
- Fuentes: Las letras con Serif provocan mayores dificultades para leer.
- Tamaño de fuentes: Un tamaño de fuente pequeño aumentará los problemas de lectura.
- No utilizar letras en cursiva.
- Imágenes de apoyo: Las imágenes ayudan a centrar la atención, y sirven de apoyo al texto.
- Destacados: Las cajas destacadas para resumir la información ayudan a comprender el texto. Las lista con sus ‘bullets’ ayudan a destacar informaciones, y si se acompañan con un espacio intelineal mayor, ayudan más.
- Evitar las imágenes en movimiento: Provocan distracción.
- No utilizar textos en mayúsculas.
- Utilizar frases cortas y que solo contengan una idea.
- Escriba utilizando párrafos cortos.
- La navegación debe ser simple:
- Trate de no hacer las páginas con mucha profundidad de navegación
- No utilice imágenes que necesitan que el usuario pase el ratón para ver el destino de la relación de los elementos de navegación.
- Diferencie los enlaces visitados.
- Destacar los hipervínculos.
- Utilice el color de dividir en varias páginas la navegación o secciones de contenido.
- Utilice iconografía adecuada para el texto de los elementos de navegación.
- Velar por la coherencia entre todas las páginas en todo el sitio, con una indicación de donde se encuentra el usuario en un momento determinado; por ejemplo, puede utilizarse miga de pan o dispositivo similar.
- Agrupe de manera lógica los enlaces.
- Facilite un buscador simple para navegar por la web.
Enlaces de interés
- Simulador
- ¿Qué es la dislexia?
- Designing web pages for dyslexic readers
- A Dyslexic Perspective on e-Content Accessibility
Quiero un menú desplegable
Contextualizamos
Un cliente de un desarrollo en el que estamos trabajando nos pide que creemos menús desplegables, porque los responsables de la web opinan (sabemos que hay temas en las que todo el mundo puede opinar y tiene razón, como cuando hablamos de fútbol) son más cómodos y las otras webs del grupo los tienen. En el documento de requisitos técnicos aparecía el de cumplir el nivel AA de las normas de la WAI.
Ante la primera negativa que le damos, alegando motivos de accesibilidad y usabilidad, consultan con su departamento informático y la respuesta es que hagamos los menús desplegables y una versión sólo texto. Ante esta disyuntiva la decisión es clara.
Estando de acuerdo a priori con Juan Carlos García
“Si no tienes más remedio que hacer un menú desplegable (aunque, salvo capricho del cliente no parece haber una razón lo suficientemente buena para hacerlo)”
en su artículo Menús deplegables. Más problemas que soluciones, intento hacer un balance de las ventajas y desventajas que aportan, para decidir si realmente es una cuestión de moda (poco sites actualmente los utilizan, aunque Amazon sí, y se presupone que estudian a fondo la usabilidad de su web) o si hay argumentos objetivos para utilizarlos o no utilizarlos.
Problemas de usabilidad de los menús deplegables
- Opciones Ocultas: Las opciones del menú se encuentran ocultas, lo que hace que para conocer todas las opciones que te ofrecen tengas que recorrer todos los menús.
- Doble esfuerzo: Si quieres recorrer los elementos de una categoría tienes que desplegar el menú, una y otra vez, para seleccionar la siguiente opción. Lo que parecía una ventaja, tener a dos clics todos los elementos (desplegar el menú, y elegir la opción), se convierte en no tener nada a un clic.
Problemas de Accesibilidad en menús desplegables
- Uso JavaScript: Muchas soluciones empleadas son dependientes de que el navegador soporte javascript; es decir, en caso contrario no se pueden desplegar.
- Necesidad de Precisión: Para personas con problemas psicomotrices, la necesidad de utilizar el ratón de manera tan exacta se convierte en algo muy complicado, a veces imposible, y además frustante, ya que necesitan realizar muchos intentos para conseguir el objetivo de hacer clic en la opción que desean.
- Lectores de pantalla: Los menús desplegables cargan todas las opciones de las distintas categorías. Normalmente este menú está presente en todas las páginas, sean de la categoría que sean. Esto hace que el usuario que navega con un lector de pantalla tenga que soportar en todas las páginas la enumeración de categorías.
Solución a desarrollar
- Hacemos caso al cliente y creamos los menús deplegables.
- Utilizamos un sistema para menús desplegables que se despliegue aunque el navegador no soporte javascript y cumpla los criterios de accesibilidad.
- Introducimos el enlace de Saltar Navegación para evitar la repetición innecesaria de la opciones una y otra vez.
- Hacemos que la primera opción de cabecera del menú conduzca a una página en la que se describe la sección, y se ofrecen enlaces al resto de opciones que existen dentro esa opción del menú desplegable.
- Repetimos las otras opciones de navegación de esa categoría en cada una de las páginas de la sección.
- Reforzamos la navegación con la miga de pan.
En resumen: intentamos que la navegación por menús desplegables se convierta en otra opción más para navegar, pero que no sea la única.
Más información
Diseño para usuarios con discapacidad cognitiva
Piensa que: Las personas discapacitadas deben ser tratadas
igual que cualquier otro
si trabajamos juntos hablando, compartiendo recursos y enseñando
podemos romper las barreras a las que se enfrentan los discapacitados
y hacer que las cosas sean mejores.
Written using Mayer-Johnson Symbols. [1]
Esta es una actitud que nosotros, como creadores y ciudadanos de este mundo Web necesitamos adoptar y seguir.
Así empieza Think Like (Abril 2001) un artículo que trata de marcar pautas para el desarrolo de webs orientadas a personas con discapacidad cognitiva (problemas de aprendizaje de la lectura, Alzheimer, retraso mental, demencia).
Resumo y traduzco algunos puntos que me parecen interesantes.
Problemas encontrados
- Para interactuar y cubrir datos debido a las dificultades del uso del ratón y teclado
- De atención
- Para comprender archivos sonoros
- Con operaciones de varios pasos
Recomendaciones generales
- Introducción a la página web: Un resumen claro de los contenidos de la página web y de los servicios que se ofrecen.
- Lenguaje y definiciones: Aportar definiciones de los términos poco comunes que se utilicen.
- Navegación clara y consistente: Evitar la sensación de fracaso, llevando a páginas en la que única alternativa sea volver atrás.
- Uso de gráficos: Para apoyar el contenido textual y ayudar en la comprensión.
Recomendaciones específicas
Entradas de datos
- Permitir la introducción de un código pequeño de una secuencia mayor. Simplificar las secuencias limitando el número de pasos.
Es necesario señalizar la acción de esas secuencias. Presentar y vocalizar una serie de pasos para completar una tarea. Cuando sea práctico, limitar el nº de opciones que el usuario debe hacer. - Utilizar multiples técnicas de selección para las diferentes necesidades de los diferentes usuarios. Emplear técnicas de selección directa (por ejemplo tecnicas de selección que requiren únicamente un único y simple movimiento sin límite de tiempo) siempre que sea posible. Ejemplo: entrada de datos, proporcionar una lista de entradas.
- Facilitar una fácil (así como destacada y limpia) salida que lleve al usuario al punto inicial desde cualquier paso de la secuencia.
- Estandarizar dentro de la web empleando la misma forma, color, iconos, etiquetas para la misma function y acción. Facilitar salidas desde cualquier situación. Incorporar métodos de premedida cuando sea necesaria una operación cuantificable.
- Coherencia de comandos y sus características de pantalla a pantalla.
- Menús breves.
- Empleo de sistemas de símbolos pictográficos o ideográficos que ayudarán a estos usuarios a construir frases complejas, responder y hacer preguntas.
Salidas
- Utilizar pantallas claras. Layouts que faciliten al usuario la opción de ver una cosa de cada vez. Simplificar el lenguaje. Dar la opción de ajustar el tamaño.
- El diseño gráfico y la animación deben contribuir a esta tarea, no a distraer. Acompañar las palabras con dibujos o fotos. Colocar la descripcion textual al lado de cada imagen
- Combinar el uso de imágenes y audio para facilitar la navegación.
- Utilizar comentarios de audio tanto para corregir errores como para animar. Tener la información disponible en formato audio. La información en audio debe ser visible en la pantalla. Facilitar un ajuste de volumen (mejor si tiene un indicador de volumen visual) a través del cual el sonido sea inteligible a cualquier nivel auditivo. La presentaciones audio y su volumen deben ser tan claros como prácticos. Presentar la información en audio continua o periódicamente hasta que el mensaje deseado sea confirmado o se actúe sobre él (el mensaje auditivo podrá ser repetido automáticamente o el sistema permitirá al usuario pedir que se repita). Facilitar la información auditiva (incluyendo la salida de audio, señales y avisos) tanto de manera visual como táctil. Antes de la presentacion del audio, facilitar sonidos o palabras para llamar la atención del usuario. Las presentaciones de audio serán breves. Incluir la función o botón de repetir el audio.
- Utilizar presentaciones multisensoriales de la información asegurando que todos los mensajes y alertas permanecen en pantalla hasta que cumplen su cometido.
- Garantizar la compatibilidad con lectores de pantalla y programas para resaltar las pantallas. Estos dipositivos pueden facilitar el acceso a los usuarios con discapacidad cognitiva. Las hojas de estilo Aurales permiten a los diseñadores web y a sus usuarios marcar propiedades específicas (voz familiar, tipos discuros, pausas, tonos, volumen, efectos de sonido y otras propiedades del habla) para representar esas características.
- Evitar aplicaciones en las que el texto aparece cuando el ratón toca determinado punto de la pantalla y desaparece cuando el ratón se mueve.
- Utilizar un contraste elevado entre el texto o gráficos con el fondo.
- Presentar tanto las letras como otros símbolos en pantalla tan grandes como sea posible. Asegurarse de que hay espacio entre las letras de una palabra y que la distancia entre mensajes diferentes sea lo suficientemente clara como para permitir al usuario su discriminación. Hacer que las letras y otros símbolos sean visualmente tan simples como sea posible (utilizar tipografia sans serif para lo que no sea texto, ejemplo, etiquetas)
- Destacar la información clave. Colocar la información más importante al principio del escrito (pero no del audio)
- Presentar el material en tantas formas como sea práctico/posible o facilitar tantas opciones de salida como sea posible.
- Facilitar herramientas de información al usuario acerca del origen de los errores, conduciéndolos a las acciones que deben tomar para solventarlos. Utilizar herramientas de minimización de errores, tales como retirar botones de la pantalla que en determinados momentos no son necesarios y su uso sería inadecuado.
