ExeBlog, desarrollo de videojuegos y más

Blog de Exelweiss dedicado al desarrollo de videojuegos, industria del videojuego, advergaming, juegos online, etc

Artículos por tema: diseño web

6 errores clásicos en los formularios de registro.

Por Daniel G. Blázquez
16 noviembre 2009

Muchos de los esfuerzos de una web van encaminados a que el usuario acabe registrándose. Es la base de toda buena fidelización.

Muchas veces todo el esfuerzo para conseguir este objetivo, se derrumba en el formulario de registro. Estos son algunos errores que he observado (incluso en páginas importantes):

1. Solicitar más datos de los necesarios.

Pide los datos estrictamente necesarios. Es muy tentador recopilar el mayor número de datos, sobre todo la gente de marketing se pirra por esto. Es uno de los factores que más influye en el índice de abandono.

Por ej., se puede eliminar el nombre de usuario (nick) si  basta con la dirección de correo. El usuario siempre puede ampliar la información de su perfil más adelante.

O por ejemplo, si solicitas el código postal, no será necesario preguntar por la ciudad.

2. Campo email no estándar

El campo email debe ser lo suficientemente largo y admitir letras y números, pero también los siguientes símbolos (según especificación RFC):

! # $ % & ‘ * + – / = ? ^ _ ` { | } ~ .

Por ej., Gmail admite como dirección alternativa [tu email]+[cualquier cosa]@gmail.com

3. Marear con las contraseñas

La seguridad es importante, pero no debe prevalecer por encima de la usabilidad. No tiene sentido que algo sea muy seguro si luego nadie lo utiliza.

  1. La contraseña la debe elegir el usuario. Debe tener un mínimo de caracteres, pero no deben ser obligatorios números, símbolos o mayúsculas.
  2. Otro error es no permitir incorporar en la contraseña ciertas palabras, como el propio nick.
  3. Permitir contraseña largas. Si el campo es muy pequeño, es muy difícil darse cuenta si la contraseña se trunca mientras se escribe.
  4. Por defecto, los navegadores ocultan la contraseña con asteriscos. Esto provoca más problemas de usabilidad que beneficios en la seguridad. Se recomienda no ocultar los caracteres de la contraseña o, en todo caso, que el usuario pueda seleccionarlo.

En definitiva, si el usuario cambia la contraseña que había elegido originalmente, hay más probabilidades que en un futuro la olvide.

Si te preocupa la seguridad, lo ideal advertir al usuario sobre el nivel de solidez de su contraseña.

4. Borrar algún campo del formulario.

Una ley no escrita de los formularios dice que: “cualquier selección o campo definido por el usuario es sagrado“. No hay nada que moleste más que rellenar varias veces un mismo formulario porque has cometido un error.

  • Si el formulario devuelve un error, se deberían dejar los campos tal cual los he dejado el usuario, e indicar claramente el tipo de error (con excepción de la contraseña).
  • Nunca borres un campo cuando haces clic en él (en serio, lo he visto en portales con millones de visitas… :-( )
  • Nunca pongas un botón “limpiar/borrar formulario”.

5. No seguir las convenciones

Las convenciones ayudan a la usabilidad. El usuario está habituado a un tipo de estructura en los formularios y reconoce los elementos del mismo.

Pasarse de original o alterar demasiado los competentes de un formulario puede llevar a confusión. ¡Pónselo fácil al usuario! ¡No le hagas pensar!

6. Campos demasiado restrictivos

Haz que sea sencillo introducir la información. Algunos errores comunes:

  • Separar el email en 2 campos, para introducir por separado la dirección (antes de la @) y el domino. (mal)
  • Obligar a poner el número de teléfono sin espacios o con espacios o… (mal)
  • Obligar a poner el número de tarjeta sin espacios o con guiones o en varios campos separados o… (mal)
  • etc.

Por último, algunas recomendaciones…

  • Usar la etiqueta label
  • Evitar poner la descripción de un input dentro del propio campo (por ej., “Escribe tu nombre de usuario”), aunque quede muy cool y ocupe poquito espacio.
  • Validar los campos a medida que se rellenen (con AJAX si es preciso).
  • Validar siempre en servidor todo los campos al enviar el formulario (para los programadores perezosos).
  • Nunca usar Flash si el propio navegador te permite hacer lo mismo de forma nativa.
  • Añadir un campo extra para confirmar el email como en la contraseña (la gente se equivoca a menudo al poner su email)

[Cita] Propongo una nueva etiqueta para HTML…

Por Daniel G. Blázquez
8 agosto 2008

Me gustaría proponer una nueva etiqueta opcional para HTML:
IMG. Argumento necesario SRC=’URL’ [...]

1993, Marc Andreessen,
cofundador Netscape Communications Corporation

Comentarios desactivados

Cómo evitar que los usuarios abandonen tu web…

Por Daniel G. Blázquez
6 agosto 2008

Leo en Webtaller InformaticaMilenium un artículo muy interesante (aunque un poco antiguo) sobre las principales razones por las que un usuario abandona una página web.

Estos puntos están basados en una encuesta realizada por Jupiter Research en EE.UU., pero desgraciadamente el artículo no enlaza la fuente.

Las principales motivaciones que impulsan a un usuario a abandonar una web son:

  1. La página es lenta o el enlace no funciona. (84%)
  2. No se encuentra la información que se buscaba. (68%)
  3. No se encontró la información de la empresa. (31%)
  4. Búsquedas limitada o nulas.  (23%)
  5. Enlaces difíciles de identificar. (16%)
  6. Información no actualizada. (6%)
  7. Mapa del sitio demasiado general. (4%)
  8. El sitio contiene publicidad que abre automáticamente otras ventanas. (4%)
  9. Otras… (3%)

Ya hemos hablado en otras ocasiones sobre alguno de estos puntos en el blog. Por ejemplo sobre el punto 1, puede venir bien saber por qué diseñar con tablas es estúpido y como haciendo un buen uso de CSS se puede ahorrar mucho ancho de banda.

También hemos hablado del punto 5 y la necesidad de identificar claramente los enlaces de tu web.

Resumiendo “sencillez, claridad y acceso rápido”.

Visto en Usable y accesible

Nueva versión “IE PNG Fix” mejorada.

Por Daniel G. Blázquez
17 julio 2008

El año pasado os comentábamos cómo utilizar “IE PNG fix“  para conseguir PNG’s de 32 bits con transparencia en Internet Explorer 6. (Ver demo)

Ahora ha salido una nueva versión IEPNGFix v2.0 Alpha que admite también las propiedades CSS repeat y position.

Aunque suelo utilizar este parche para IE6, en muchas ocasiones recurro a un formato especial de PNG en 8 bits que aunque no admite valores de alfa intermedios, supone una alternativa si no queremos usar scripts.

Vía anieto2k

Subraya tus enlaces.

Por Daniel G. Blázquez
25 marzo 2008

Cada día visito alguna web donde me encuentro con este grave problema de accesibilidad. Los enlaces (links), aunque utilicen un color de letra diferente, no están subrayados y en muchas ocasiones no se distinguen del resto del texto.

Lo peor es que cualquiera puede sufrir este problema. Ya no es necesario que el usuario tenga un deficiencia visual. El problema se presenta de una forma inesperada: debido a las modernas pantallas LCD.

Muchas de estás pantallas planas se venden con unos valores por defecto para el brillo o el contraste muy altos o muy bajos. Y como suele pasar, muchos usuarios noveles no suelen cambiarlos.

He podido observar este defecto en los monitores planos de familiares y amigos. Y nadie lo encuentra raro (si fuera la tele del comedor seguro que la cosa cambiaba). Debido a esto tuvimos algunos problemas en Mundijuegos al utilizar texto de color gris. Pese a ser un gris relativamente oscuro (60%), muchos usuarios no podían leerlo por este problema.

Otras veces es difícil diferenciar el negro de otros colores, como rojos o verdes oscuros, y el enlace se hace casi ilocalizable. Justamente la web de alzado.org, que trata temas de diseño, usabilidad, etc, peca de este problema. En mi modesto portátil me cuesta horrores distinguir los enlaces de color (rojo oscuro sin subrayar) del resto de texto (negro).

Haz visibles tus enlaces. Además de utilizar un color diferente al resto del texto, subráyalos. Y si no quieres subrayarlos, asegúrate que sean totalmente reconocibles de un simple vistazo. Tus lectores te lo agradecerán.

Artículo relacionado: “Guidelines for Visualizing Links” de Jakob Nielsen

La clave para un buen rediseño web

Por Daniel G. Blázquez
24 febrero 2008

En el rediseño de una web [...] es tan importante lo que permanece como lo que cambia. No puedes tirar por la borda las muchas horas que los usuarios han invertido en aprender a utilizar tu web hasta sentirse cómodos con ella. Por respeto al usuario es crítico que los cambios sean lo más sutiles e imperceptibles posible. Para nosotros el éxito de un rediseño es que los usuarios encuentren la página más fácil de usar sin darse cuenta de qué ha cambiado exactamente. En las pruebas con usuarios buscábamos que los usuarios pensasen que no ha cambiado nada. Mejorar sin molestar. Esa es la clave de un buen rediseño.

Jesus Encinar
Ceo de idealista.com
Comentando el rediseño de dicho portal.

Internet Explorer 8 utilizará 3 modos de presentación.

Por Daniel G. Blázquez
23 enero 2008

Antes de que finalizará el año se anunció que Internet Explorer 8 pasaba el Acid Test (¡yuju!). Para los que no lo conozcan, esta prueba se utiliza para saber si un navegador respeta los estándares CSS de la W3C.

Ya que esta nueva versión será compatible con IE6 y IE7, los desarrolladores web aún no sabíamos cómo se iba a activar este nuevo modo de representación. Hasta ahora se recurría al DOCTYPE para definir el tipo de render: el famoso “Quirks Mode” (también llamado modo chapuzas) o en “modo estándar“.

Gracias a Josep, me entero que para utilizar este modo superestándar se utilizará una etiqueta Meta adicional:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Actualizado (4 de marzo de 2008):
Parece que al final Microsoft a echado marcha atrás y no será necesaria esta etiqueta.


  • icono rss RSS