ElForro | Blog
Volver a ElForro.com

Usabilidad y Diseño

25 de Septiembre de 2007

Día a día me sorprende la cantidad de gente que parece ser incapaz de comprender una consigna simple; gente que se niega a forzar su cerebro e incluso se enoja por sus propias limitaciones. Personas que responden a un E-mail que contiene todas las respuestas a sus inquietudes sin leerlo; que piden ayuda tan sólo expresando “no funciona”; o que directamente ignoran un letrero luminoso que parpadea en rojo ante sus propios ojos…

Después de una introducción quizá un tanto violenta y concentrándome más que nada en la última línea, hoy quiero hablar del diseño y su rol en la usabilidad de cualquier proyecto web.

Decidí escribir sobre esto por un hecho concreto que pone de manifiesto la real importancia del diseño a la hora de comunicar y guiar a estos usuarios despistados; el diseño de formularios.

ElForro.com tuvo desde sus inicios el formulario de registro default (por defecto) del sistema de foros VBulletin. Un día decidí mejorar y aclarar ciertos parámetros del formulario, y la cantidad de registros se triplicó. Hoy nuevamente realicé algunos retoques y -para mi sorpresa- el promedio de usuarios registrados en el día aumentó notablemente.

Es por eso que me interesaría remarcar algunos puntos que hacen a un buen formulario de registro:

  • Sólo datos esenciales

Nadie quiere completar su Nombre y Apellido, ni su fecha de nacimiento. De ser necesario, esos datos deberían ser complementarios y en lo posible no se mostrarían hasta después de completar el proceso de registro. De esta manera todos los datos adicionales quedarían pendientes para que el usuario edite su perfil cuando lo crea conveniente.

  • Textos explicativos

A pesar de ser generalmente ignorados, los textos explicativos de cada campo son una buena alternativa ante una eventual duda del usuario. En lo posible deberían no interferir con la fluidez del relleno de datos.

  • Campos Grandes [Inputs]

Al utilizar campos grandes con tipografía espaciada y bien visible, el usuario se siente más cómodo y parece que la información a completar es mucho más sencilla.

  • Feedback / Guías

Con el advenimiento del AJAX y la Web 2.0 resulta realmente útil el chequeo y comprobación de campos de manera asincrónica (sin necesidad de recargar la página). Esto se puede reforzar con íconos que comuniquen claramente “bien” y “mal”, en conjunto con colores “verde” y “rojo” (un estándar comunicacional para errores y aciertos) tanto en los avisos de comprobación como en los mismos campos completados por el usuario. Esto ahorra muchísimo tiempo (segundos) y puede ser determinante para no perder a un potencial futuro usuario. Nadie quiere completar un formulario 5 veces por completar mal un campo.

  • ¿Captchas? Comprobación Anti Bots

Lamentablemente el SPAM y los Bots sobran, y hay que protegerse de alguna manera; Una forma es utilizar las imágenes denominadas Captcha. El problema con este método es que muchas veces las imágenes son pobres y los caracteres indistinguibles. Hay nuevos métodos que están surgiendo en su reemplazo, como la utilización de fotografías o textos como “Complete el resultado de 2 + 2″ para confundir a los Bots, pero las CAPTCHAs siguen siendo el método preferido. Afortunadamente, la comprobación de caracteres también se puede realizar mediante AJAX [ver captura], incluso con una actualización automática de la imagen CAPTCHA al ingresar mal los caracteres.

Teniendo todo eso en cuenta, el formulario de registro de ElForro.com fue rediseñado y cuidado en cada detalle; logrando incrementar (aún más) la tasa de conversiones a la hora de enfrentar a un usuario a la ardua tarea de completar un formulario.

Formulario

Además, utilizando hojas de estilo CSS (Cascading Style Sheets) se puede dar aún más vida a cada movimiento del formulario, logrando que cada celda se ilumine de distinto color, pudiendo hasta comportarse de 4 maneras distintas según sus instancias: inactiva, activa, correcta, incorrecta.

Utilizando a conciencia todos estos recursos de diseño, mas una correcta disposición y elección de la información solicitada al usuario, los formularios pueden dejar de espantar a los usuarios con fatiga mental.

Afortunadamente, los formularios son molestos para todos los usuarios por igual, y ya se está trabajando en una forma de estandarización para estos datos mediante un OpenID, donde cada uno pueda guardar su información, logrando que los formularios se completen automáticamente o directamente no sean necesarios. Pero para eso faltan unos años, y mientras tanto debemos intentar mejorar la experiencia del usuario en cada uno de sus movimiento; siendo el Registro su primer paso, debería ser el menos doloroso.

12 Comentarios en “Usabilidad y Diseño”

  1. Comentario de PablinEEK:

    Me lo tenes que pasar para Frags santi! :) Por que actualizé vBulletin y se me desactivo. Y ahora lo perdí

    Un abrazo, y segui asi :)
    Frags ya esta en las paginas amigas de El Forro! :D

  2. Comentario de legalizenla:

    Muy groso el nuevo diseño del formulario de registro…

  3. Comentario de Mauro Calamardo:

    La idea de Microsoft con el Passport.net es la misma que el openid, de hecho hay un sdk del passport para quien lo quiera poner al sitio.

    De todas formas yo diferencio algunas cosas.

    Por un lado a veces se dá que un usuario no quiera llenar miles de campos o les pone fruta porque realmente no quiere publicar sus datos o por fiaca.

    Después está el tema de la registración. Si uno es habitué a un lugar, bueno registrate, pero me ha pasado de querer postear una solución para un problema X y desistí por la registración obligada, aunque lamentablemente sea una necesidad para aminorar la cantidad de spammers.

    Y por último está el tema de que los sistemas tienen que ser APB (a prueba de b…) Generalmente el usuario NO lee la pantalla ni menos los mensajes es por eso que el ingreso de datos debe ser dinámico y simple y la información (o resultados) a mostrar tiene que ser la necesaria y la justa. Por ej. para un nene le va a resultar más fácil dibujar en el Paint que en el Photoshop ya que para él todas las herramientas extras que trae el programa de Adobe sobran.

    Saludos, Mauro.

  4. Comentario de Ju@n:

    Muy bueno, la verdadera clave de la eficacia del nuevo formulario de registro está en la supresión de datos personales secundarios que no son indispensables.
    Estan aquellos que al ver mucho texto se asustan y cierran el sitio.
    Ultimamente parece que nadie lee, o leen y aún así no entienden.
    Otra prueba de eso es la del país de los usuarios, donde muchos tienen configurado Afghanistan, por el solo hecho de que nunca lo notaron al registrarse, y es el país que viene por defecto.
    En ese caso, es mejor que por default no sea ninguno, a menos que el usuario elija su país.

    Saludos!

  5. Comentario de EHDLB:

    Jajajaja, que cosa esto de que uno simplifica el formulario y mas gente se registra.
    A mi nunca me pasó (bah, yo no recuerdo) alguna situacion en donde al intentar registrarme desistí por el formulario, de ultima si eran muchos campos los famosos “sarasa sarasa”. “asd” o “qwerty” entraban en acción, pero se ve que hay gente que se fastidia o se oprime, que se yo, raro.
    Igualmente es mejor que el formulario para llenar sea simple, y el nuevo formulario es muy simple y que tenga ajax esta barbaro, porque si hay algo que me cansa es cuando te equivocas o falta algo boludo (esto ultimo en esos formularios largos y que te piden hasta el nombre de tu perro) es que recargue, o si no la tipica, que no era muy claro el captcha y tenias que completar de vuelta ¬¬.

    Felicitaciones por el nuevo formulario (hasta es lindo) y por el nuevo promedio (mas alto) de nuevos usuarios:p

    pd: Una pregunta santiago: Hoy en una expo de las universidades estuve sentando en una mac :baba:, las cuales tenian en su monitor-cpu incorporada una cámara tipo webcam (no se si es en todas la macs nuevas o en el modelo que use especificamente), las cuales tenian una definición barbara y uno se veia perfecto. Para jugar con esta cámara habia cargado un programa, que si mal no recuerdo el nombre era Photo.. Photo… bueh, no lo recuerdo, Photoalgo era, el cual me permitia jugar con las imagenes captada por la cámara (Estilos de colores, deformaciones, etc), y estaba muy bueno..
    La cuestión es: No sabes si hay algún programa similar para PC?

  6. Comentario de Santiago:

    El problema con los formularios largos es que por momentos hasta el método “qwerty” resulta molesto para completarlos. Por otro lado, realmente la intención es que no sólo se registren, sino que lo hagan a consciencia, ingresando datos correctos y no “mail@mail.com” o cosas similares.
    La cantidad de registros siguió aumentando día a día desde la creación de esta entrada; lo que queda por solucionar y/o facilitar ahora es la definición de datos extras, quizá agregándo un nuevo formulario opcional a la hora de notificar que la cuenta se activó exitosamente.

    PS: Todas las notebooks de Apple con procesadores Intel (macbook y macbook pro) vienen con cámara iSight incorporada, con una resolución de 640×480. El software que comentas se llama PhotoBooth, y realmente no uso Windows por lo que no sé si hay algún soft similar para PC, aunque seguramente exista.

  7. Comentario de Edise:

    Esta nueva forma, me recuerda a la que utiliza De Remate en el campo ventas, para ir completando.
    Te va informando cuantos caracteres te quedan para el titulo, te calcula la comision en relacion con el precio del producto, te carga la foto del producto instantaneamente. Son cosas que te dan mas ganas de vender.

  8. Comentario de Nichiren:

    Muchas gracias por compartir tus ideas, yo trabajo con Vbuleltin y es 100% verdad lo que dices sobre los registros, mil gracias :D

  9. Comentario de shaggy:

    Muy buena la iniciativa, pero…

    cada vez el forro anda peor por la sobresaturación de usuarios, creo que si bien la idea de agrandar la comunidad es muy interesante y ambiciosa, hay que hacerlo de mejor manera, cosa que pueda soportar el incremento de usuarios…

    Mi humilde opinión :)

  10. Comentario de Santiago:

    Tenemos todo para soportar la cantidad de usuarios que hay y muchos mas. Los problemas son independientes a eso.

  11. Comentario de Links:

    en pocas palabras simple y complejo :)

  12. Comentario de Sergio Melzner:

    Estoy totalmente de acuerdo con el artículo Santiago. Incluso para un blog hace no mucho tiempo intenté resumir pero me encontré con errores, quilombos con la validación y demás errores que probablemente estaba provocando yo pero sin poder identificar cómo. ¿Resultado? Por falta de tiempo terminé dejando el default.

    También hay que tener en cuenta que simplificarle todo al usuario implica que se pueda registrar para bajar un link solo para registrados y después no vuelva nunca más. Aunque tampoco se le puede imponer una hazaña para registrarse… son los típicos problemas de comunidades en general.

    Me ENCANTA elForro.com así que nada más que mis felicitaciones.


Trackback URl | Seguir comentarios vía RSS

Comentar