Evítele dolores de cabeza a su usuario

*Traducción libre y resumida del texto “Your website should stop doing this right now” de Goran Peuc.

El diseño gráfico en la Internet no sólo trata de cómo se ven las cosas, sino también cómo funcionan. En el mundo de la web el diseño busca que un sitio, además de funcionar de manera correcta, sea intuitivo y fácil de usar para el usuario. Es decir, que la experiencia de usuario sea completa.

Esta es una lista de recomendaciones y quejas sobre usabilidad y experiencia hecha por el experto irlandés Goran Peuc.

1. Pedir al usuario que ingrese su tarjeta de crédito correctamente.

Para empezar, no es necesario pedirle al usuario que elija qué tipo de tarjeta posee. Una vez alguien ingrese los primeros dos dígitos de la tarjeta es posible determinar a qué marca pertenece. Las tarjetas VISA empiezan con 4, las MasterCard van de 51 al 55, etcétera.

edc1

Luego viene el conocido “por favor ingrese el número sin espacios o guiones”. No sea perezoso: remueva los caracteres no deseados y use el número restante.

2. Pedir al usuario que cree una contraseña muy compleja

Pfff, pero claro que las contraseñas complejas son mucho más seguras. Seguro eres diseñador, ¿cierto?”

No, la complejidad de la contraseña no la hace segura: lo hace la longitud.

Pedir que una contraseña tenga al menos 7 caracteres en donde haya una mayúscula, una minúscula, un número y un carácter especial, no sólo la hace difícil de recordar sino que es un requerimiento innecesario.  La posibilidad de combinaciones para descifrar una clave “compleja” resulta menor a aquellas que se limitan a 8 caracteres alfabéticos y sólo usan mayúsculas y minúsculas: 20.971.520.000.000 contra 53.459.728.531.456 combinaciones.

Lo fundamental para recordar es:  no hacer la contraseña tan complicada y “segura” que el usuario tenga que anotarla en un post-it y luego cualquiera la pueda ver.

3. Redireccionar cualquier enlace a la versión móvil

Este es un problema común de los sitios “mira tengo una versión móvil”. Alguien comparte en Facebook o Twitter un enlace a un artículo de nuestro sitio web, pero cuando otro usuario hace clic desde su dispositivo móvil, el navegador lo redirecciona al inicio de la versión móvil. Resultado: el usuario se queda sin poder ver el artículo. Gracias.

La idea básica que queremos es que el usuario haga clic en el enlace y vea el contenido que se supone debe ver. La forma cómo lo hacemos (sitio adaptable, subdominio para móviles, conservar una misma estructura de URL, etcétera) no importa.

4. No dañar la naturaleza de los enlaces

Hacer clic en un hipervínculo o enlace es una de las interacciones más comunes de los usuarios en Internet. ¿Para qué cambiar cómo funcionan los enlaces?

Señores desarrolladores, ¿podemos dejar de utilizar JavaScript –o cualquier tipo de magia oscura– para crear los enlaces y botones de un sitio web?

edc2

Esto genera que el usuario no pueda abrir enlaces en una ventana externa, o copiar el enlace, o buscar en Google una parte, o guardar en favoritos. ¡No puede hacer nada de lo que, se supone, se hace con un enlace! Eso sin hablar de la incapacidad del robot de Google para leer estos enlaces mágicamente hechos. Si podemos hacer lo mismo con un anchor, ¿para qué complicarle la vida al usuario?

edc3

5. Dejar quieto el botón Volver

Jakob Nielsen escribió en 1999 que dañar o ralentizar el botón volver ya era el primer problema de ese tiempo. Eso fue hace 15 años, en mil novecientos noventa  y nueve. Hoy en día el botón volver es el segundo elemento de interfaz más utilizado en Internet. No son los scrolls, los rotadores, las ventanas emergentes o los carruseles. Nada de eso. El botón volver es el campeón.

¿Por qué hay algunas páginas en las que el botón volver nos saca de sesión? ¿Por qué nos lleva a la misma página donde ya estábamos?

Si es necesario hacer de nuevo la inserción de datos en el formulario, lleve al usuario allí y luego cargue el contenido al que el botón volver originalmente iba. Genere mejores direcciones/rutas, ahórrele tiempo al usuario y, de paso, mejore su SEO.

6. Use las listas desplegables nativas

edc4

Muy bonito, sí. Pero no funcionan como el resto.

Este es el escenario: el diseñador diseña un drowdown personalizado muy bonito y resplandeciente. El desarrollador le dice que las listas desplegables no son tan personalizables como los otros elementos. El diseñador se molesta y pide que la apariencia quede tal cual se ve en Photoshop. El desarrollador gasta un montón de líneas de código, llamados a una variedad de scripts y muchos, muchos trucos para que funcione en todos los navegadores. Resultado: el sitio carga lento y el tiempo de desarrollo aumentó.

Realmente no hay necesidad de cambiar las listas desplegables por defecto. Estas funcionan bien y traen ciertos beneficios que los dropdown maravillosamente resplandecientes no. El usuario puede teclear caracteres para que la lista se enfoque en la opción que él quiere. Además se puede hacer scroll nativo y, si la lista es muy grande, incluso puede salir de la ventana para verla completa.

edc5

Y lo mejor de todo: los navegadores móviles lo detectan como una lista desplegable. Natural. Gratis.

7. Dejar de enmascarar el contenido

Se trata de esa publicidad molesta que se ubica encima del contenido y te invita a una nueva aplicación, a que te registres, a que los visites en Facebook, a hacer cualquier cosa distinta a aquello que el usuario quiere ver.

foroalf

Para los publicistas: hay mejores formas de hacer dinero, que requieren menos clics y, lo más importante, que reducen el número de usuarios frustrados.

Para quienes nos recomiendan sus productos: si su aplicación es buena el flujo de usuarios orgánico hará que crezca en el mercado. No es necesario restregarnos la app por toda la pantalla.


Para ver la versión extendida, original y en inglés de este artículo, por @gpeuc, haz clic aquí.

perfil-plav

Por: Juan Plata

Diseñador Visual
@Juanplav