Patrones de diseño para formularios [actualizado]

El útil y popular sitio web de diseño www.smashingmagazine.com a liberado la primera de 2 partes dedicado a los patrones usados en los formularios de suscripción de 100 sitios web de alta popularidad, donde el uso del formulario es indispensable. Han hecho un estudio para identificar problemas y aciertos en usabilidad, experiencia de usuario y diseño de interfaz.

Algunos de los puntos más importantes que se estudian son:

  • Ubicación y etiquetado del link (o botón) hacia el formulario
  • Simpleza en el diseño de formularios
  • Formularios de una sola página versus multi-página
  • Alineación de los títulos (label) de cada input
  • Campos obligatorios y opcionales

Es un articulo muy interesante para todos los que estamos interesados en mejorar el diseño de formularios o seguir tendencias y patrones de diseño efectivos y usables.

Enlace al articulo completo: Web Form Design Patterns: Sign-Up Forms

SmashingMagazine ya lanzó la segunda parte y final del estudio. Con esto, tenemos las conclusiones más importantes de los patrones de diseño de formularios de registro:

  • 40% de los links hacia los formularios de registro tienen como nombre “sign up” y están ubicados en la esquina superior derecha
  • 61% de los formularios tienen un diseño simplificado para evitar distracciones del usuario
  • 93% de los formularios están desarrollados en una sola página
  • 62% de los títulos de los campos están en negrita
  • Hay una leve tendencia a usar las etiquetas al lado izquierdo, alineadas a la derecha
  • Los diseñadores tienden a usar algunos campos obligatorios, como también algunos opcionales
  • 84% de los formularios no tienen efectos de hover, active ni focus
  • Sugerencias y ayudas
    • 57% son estáticas
    • 33% son dinámicas
    • 57% están ubicadas debajo del campo
    • 26% están ubicadas al lado derecho del campo
  • Las validaciones estáticas son tan populares cono las dinámicas (no hay tendencia al uso de ajax)
  • 82% de los formularios no utiliza email de confirmación
  • 72% de los formularios utiliza confirmación de contraseña
  • 48% de los formularios utiliza captcha
  • 92% de los formularios no utiliza el botón “Cancelar”
  • 56% de los formularios utiliza el botón “Submit” alineado a la izquierda
  • 45% de os formularios utiliza la página de respuesta para invitar al usuario a continuar con la exploración de los servicios que ofrece el sitio

3 Comentarios en “Patrones de diseño para formularios [actualizado]”

  1. Muy buen dato! ya está en mis favoritos :)
    (este formulario -para dejar comentarios- tiene los input a la izquierda y los requerimientos a la derecha! tun!)

  2. hola quiero un formulario como esta en donde he puesto este mensaje
    ”observa que al poner el mouse ensima del boton _Enviar comentario_
    en la barra de estado (parte inferior de la pagina) aparece algo asi
    wp-comments-post.php significa que esta hecho en wordpress. pero no logro saber como……….

  3. Yesi: ¿Necesitas un formulario para WordPress?. Al instalar WordPress en un servidor, automáticamente tienes los formularios de comentarios disponibles en cada post. Los diseños, disposición o qué muestra el “over” en los links o botones, lo define el theme (que puede ser modificado con algún software de edición de código).

    Saludos.

Deja un comentario