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
Publicado el 07.07.2008 por Yerko Pezzopane
Archivado en: Diseño, Interacción, Interfaz
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!)
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……….
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.
muy buenoo
Quiero felicitar a Martin y a Analia por ser de mucha bendicion para mi vida, QUE EL sE
pi<dwfvnwaijvripov
oñhafaiejfoqeifj´9w0ua94fg
hola soy el dise
Hola!
hola borther
alguien que sepa como instalar en una pagina un sistema de comentarios en codigo de Html?? de verdad ya no se donde buscar..
qwdqwdqwd
Odio a Justin Bieber
Es verdaderamete útil la información. Sin embargo hubiera estado bueno que usaras un título mas adecuado, como “estrategias de diseño para formularios”, ya que el tema de los patrones de diseño alude a la, digamos, “estructura” del software que desarrollamos, de cada uno de sus componentes y de los mecanismos de interacción que usan dichos componentes entre ellos. Entré porque estaba buscando ése tipo de info, igual a favoritos porque, como ya dije, es muy útil el artículo. Gracias y saludos!
…igual, entiendo que hayas respetado el título original.
Qué excelente post Yerko, un buen ejemplo de cómo mantener la usabilidad intacta al hacer formularios de contacto.
Un abrazo
muy chulo