• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Usabilidad

Anatomía de una landing page perfecta [infografía]

Sebastián Thüer · 12.03.2011 ·

Técnicamente se conoce las «landing pages» (páginas de aterrizaje es una traducción horrible) es la página de entrada del usuario a nuestro producto o servicio. Normalmente, llega aquí luego de haber hecho clic en un aviso, resultado de Google o enlace publicado.

Hay muchas técnicas para persuadir usuarios y generar confianza pero todo puede arruinarse si no hay un buen diseño que permite ver con claridad cuál es la propuesta, su valor diferencial y permitir realizar la acción del usuario de forma rápida y efiza.

Esta infografía analiza algunos de los elementos más comunes de este tipo de páginas a la cual hay que prestarle especial interés porque de ella dependen que muchos empleados de empresas con negocios en la web cobren su sueldo a fin de mes.

Vía KissMetrics.com

Ubicación y diseño de botones en cuestionarios online

Sebastián Thüer · 10.03.2011 ·

En apariencia, ubicar un par de botones debajo de una encuesta para continuar o retroceder es una decisión sencilla. Tiempo atrás publicaba un post sobre la usabilidad y los botones atrás / adelante donde cuestionaba la solución que una prestigiosa consultora había implementado: ubicar el botón de siguiente a la izquierda, en lo que parece un lugar anti natural y extraño.

Ahora llega la evidencia a través de un estudio elaborado por Mick Couper, de la Universidad de Michigan y Reg Baker, de la consultora Market Strategies International. Los investigadores publicaron el artículo Placement and Design of Navigation Buttons in Web Surveys donde reconocen que la simple ubicación de estos botones es un tema de discusión y que hay muchas diferencias de criterio.

La decisión más habitual es colocar el botón siguiente a la derecha. Así lo hacen los navegdores web, los buscadores como Google y es normalmente como se paginan las pantallas en la web. Colocar el botón siguiente a la izquierda sigue otra convención: seguir los lineamientos de la interfaz de Windows que siempre coloca la opción más habitual sobre este lado.

Una tercera posibilidad es ubicar ambos botones alineados a la izquierda uno debajo de otro. Finalmente, la cuarta variante es directamente ocultar el botón de atrás lo cual anula la posibilidad que el usuario corrija sus respuestas.

En total, las cuatro opciones habituales son estas:

Siguiente a la derecha, Anterior a la izquierda.
Siguiente a la derecha, Anterior a la izquierda
Siguiente a la izquierda, Anterior a la derecha.
Siguiente a la izquierda, Anterior a la derecha
Siguiente y Atrás a la izquierda con Atrás al final.
Siguiente y Atrás a la izquierda con Atrás al final
Siguiente a la izquierda, sin botón Atrás
Siguiente a la izquierda, sin botón Atrás

El estudio

A partir de los objetivos del estudio y del análisis de investigaciones previas los autores presentaron 5 alternativas diferentes para el colocar los botones en formularios online:

  1. Botón Atrás en el extremo derecho, Siguiente en el extremo izquierdo
  2. mbos botones alineados a la izquierda, primero opción Siguiente
  3. Botón Siguiente a la izquierda, Botón Atrás a la izquierda debajo de Siguiente
  4. Botón Siguiente a la izquierda, Botón Atrás a la izquierda con hipertexto
  5. Ambos botones alineados a la izquierda, primero opción Atrás

El estudio empírico se realizó a través de un muestreo no probabilítisco entre usuarios mayores de 18 años en los Estados Unidos. A ellos se les solicitó que contestaran unas preguntas relacionadas con el consumo de energía. Utilizaron 3 herramientas online diferentes con un total de 1800 respuestas, 600 por cada una. 

Los resultados que encontraron los investigadores se resumen en la siguiente tabla (clic para ampliar la imagen):

Tabla comparativa de resultados por variantes.
Tabla comparativa de resultados por variantes.

Conclusiones

En primer lugar, parece no haber diferencias significativas en el tiempo que emplean los usuarios según la diferente distribución de botones. No se pudo verificar que colocar la opción Atrás en un hipertexto para hacerla menos visible sirviera de algo. Por el contrario, la opción 5 registró el menor tiempo.

En segundo término, sí se observaron diferencias entre la cantidad de personas que usan la opción de volver según donde se ubique el botón Atrás. En los 2 primeros casos 1 de cada 5 usuarios usó la opción de volver. En cambio, en los casos restantes el uso cayó a menos de 1 cada 10.

La opción ganadora.
La opción ganadora.

En síntesis, el estudio no permite establecer diferencias sustanciales según la ubicación de los botones. No obstante, hay que tomar nota que los usuarios que participaron del estudio están habituados a responder encuestas online. De todas maneras, la opción más razonable parece ser ubicar ambos botones alienados a la izquierda siguiendo el orden lógico de situar primero Atrás y luego Siguiente.

Estudio original: Placement and Design of Navigation Buttons in Web Surveys. Gracias a Sergio Ortega por el enlace.

Consejos para mejorar la usabilidad en el envío de formularios online

Sebastián Thüer · 10.02.2011 ·

Los formularios suelen ser el talón de Aquiles en la usabilidad de muchos sitios web. Después de una página clara, atractiva, bien organizada y de fácil lectura suele venir un formulario que no siempre tiene el mismo esmero que el resto del sitio.

En Six Revision dan 10 consejos de usabilidad para enviar formularios por la web con recomendaciones muy sencillas y, la mayoría, que se puede implementar sin grandes complicaciones. Aquí va la lista:

  1. Marcar claramente los campos requeridos
  2. Proporcionar mensajes amigables y claros en caso de error.
  3. Usar validación por JavaScript del lado del cliente
  4. Marcar el campo que se encuentra activo para ayudar al usuario a saber dónde está.
  5. Si hay varias páginas, mostrar claramente el proceso.
  6. Guardar o cachear los datos ingresados por el usuario regularmente
  7. Cambiar el texto «Enviar» por algo más directo y atractivo.
  8. No usar el botón «Cancelar»
  9. Mostrar claramente al usuario el formato de entrada de los datos (especialmente las fechas)
  10. Mejor formulario de una columna en lugar de dos.

¿Que otras cuestiones tenés en cuenta para tus diseños? ¿A qué aspectos de usabilidad prestás más atención en el diseño de formularios? Tus comentarios son bienvenidos.

La usabilidad en dispositivos táctiles

Sebastián Thüer · 02.12.2010 ·

No hay dudas que los dispositivos táctiles han revolucionado el mercado. Pero también afectaron ciertos principios de la experiencia del usuario. Áreas de interacción minúsculas o información escondida detrás de capas de botones y controles innecesarios terminan por frustrar al usuario.

Si estás pensando diseñar para dispositivos touch screen te recomiendo que leas este interesante post que me hace llegar la gente de Xperience Consulting donde se enumeran 10 principios de usabilidad para dispositivos táctiles a tener en cuenta:

  1. Utilizar eventos estándard
  2. Evitar eventos hover
  3. Evitar controles indirectos
  4. Áreas de interacción mayores
  5. Lo que no ve el usuario
  6. Considerar dónde interactúa el usuario para situar los elementos adecuadamente
  7. Considerar la posisión del dedo al poner mensajes
  8. Tener en cuenta el contexto
  9. Mejor el scroll que las capas
  10. Comunicar los resultados

¿Qué le falta o le sobra a esta lista? Me parece una buena síntesis, solamente indicaría que las áreas de interacción deben ser obvias y no dejar lugar a dudas. Mientras en el mouse nos posibilita «recorrer» el contenido con el puntero para ver en qué sitio el icono cambiar por una mano -y así reconocer que se trata de un área sensible-, el dedo no tiene esa posibilidad.

Nota: El gráfico es de la web de Xperience Consulting

Ejemplos de diseño de formularios de registro

Sebastián Thüer · 19.11.2010 ·


Los formularios de registro son imprescindibles para cualquier sitio o servicio 2.0. La clave es mantenerlos tan sencillos como sea posible, minimizar la información solicitada y, a la vez, no renunciar al estilo personalidad que refleja del sitio del sitio web en su conjunto.

En DJ Designer Lab han recopilado 25 buenos ejemplos de formularios de registro e inicio de sesión que siempre viene bien para inspirarse, aprender y encontrar elementos resulten de utilidad.

  • 25 Cool Sign Up and Login Form Designs

Si te interesa más el tema podés consultar la serie de post anteriores sobre Patrones de diseño para registro de usuarios basado en un trabajo de Adaptative Path:

  • Dar al usuario buenas razones para registrarse
  • Hacer el proceso de registro fácil
  • No dejar a tus nuevos usuarios colgados
  • Acelerar las conexiones iniciales
  • « Ir a la página anterior
  • Página 1
  • Página 2
  • Página 3
  • Página 4
  • Página 5
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder