Cuando nos enfrentamos a cualquier proyecto podemos hacerlo de muchas formas, pero el resultado siempre queremos que sea satisfactorio.
Muchas generaciones recordamos la famosa frase de John Hannibal Smith de la serie “El equipo A” que titula este artículo. Podría haber usado otras series míticas como MacGyver como hilo conductor, pero necesitaba algo más potente. Me tentó también Michael Knight que encajaba bien como ejemplo de tecnología, pero improvisaba mucho.
Por eso el equipo A para lo que os quiero contar me pareció perfecto. ¿Os imagináis a Hannibal sin pensar una forma imaginativa para resolver las aventuras de cada episodio? ¿Sin definir un plan con sus compañeros de equipo? ¿Sin apoyarse en su experiencia previa como miembro de los cuerpos de élite del ejército?
Cuando abordamos un proyecto de usabilidad y experiencia de usuario cometemos errores básicos y simples, producto casi siempre de una insuficiente planificación y de repetir lo que vemos en otros proyectos. Planear bien las cosas tiene un montón de ventajas como evitar el retrabajo, acortar los tiempos de ejecución, asegurar la calidad del resultado, etc.
Os facilito en este artículo algunos ejemplos de buenas prácticas y recomendaciones, para que veáis que con poco que le deis al coco… ¡los planes siempre salen bien!
Mobile First, tatúatelo
Mobile First ha dejado de ser una tendencia y actualmente es un patrón obligatorio para diseñar un proyecto web.
Haz como MA Barracus y tatúatelo. El modo en que los usuarios actuales asumen ver los contenidos está basado en experiencias móviles. Estas experiencias se basan en pantallas sencillas con scroll vertical.
La mayoría de los proyectos ya son responsive, pero no podemos confundir ese término con Mobile First.
Hay un gran error de usabilidad que se sigue cometiendo y es el contenido en las pantallas. Se sigue haciendo contenido para pantalla de escritorio y se desarrollan responsive. El resultado será un sitio web que se verá bien en otros dispositivos, pero tendrá un exceso de contenido en una única pantalla y elementos poco accesibles para operar con una mano.
Por ello hay que recalcar que Mobile First denota también que las pantallas han de ser sencillas, concisas y fáciles de usar desde cualquier dispositivo.
El Header, nuestro vehículo en una web
¿Qué pensaríais si la furgoneta del equipo A se pareciese a ésta?
Es importante hacer un buen estudio del Header ya que es el primer elemento que tocar y se repite en todo el sitio web que estéis diseñando.
Hay varios errores que se repiten y son tan fáciles de corregir con el objetivo de simplificar tus propuestas y centrarte en lo esencial. Estos son algunos de los consejos para crear un Header que funcione:
- Entre 5 y 10 items en el header. Muchos botones restan.
- Que su altura no sea mayor de 150px. El header es importante, pero se va a repetir en toda la website y por lo tanto ha de ser ligero.
- Que contrasten el fondo con las letras y si tu menú permanecerá fijado en la parte superior de la ventana, que contraste muy bien en todo el scroll vertical.
- Ordenar por importancia los ítems en el header. No sigas tendencias, si lo importante son tus productos, no pongas en primer lugar “Mi compañía”. O si prevés que la búsqueda será el fuerte del sitio, no la dejes escondida al final con un icono de lupa.
- El uso excesivo de iconos en el Nav resta. Más de 4 items con iconos es uso excesivo que despista al usuario.
- La distribución más usada y que me mejor funciona es logo izquierda y Nav derecha. Centrar el logo y poner el nav partido o en una segunda fila hace que el header sea excesivamente alto.
- Cuidado con los navs desplegables que no dejan de desplegar. Trabaja mucho las categorías que mostrar ya que en mobile es incómodo un Nav que sobrepasa en largo la pantalla.
Espacio libre, ¿un lujo?
Sigo utilizando ejemplos gráficos para avanzar en mis recomendaciones. ¿Te imaginas al Equipo A con un R5 en vez de la furgoneta molona que usaban?
¿Como viajar con todo el equipo a las diferentes misiones? ¿Como disparar esas metralletas?
El espacio, ya sea en un sitio web, en una misión del equipo A o en tu vida, es muy importante. El espacio libre es eso que una persona usa, sin ser consciente, para sentirse a gusto en dicho espacio.
Para que una web sea cómoda y se use a gusto ha de tener mucho espacio libre y estas son algunas de las pautas a seguir:
- Planifica muy muy, pero que muy bien tus secciones y el contenido de cada una. Lo adecuado es que una sección no supere el tamaño de una pantalla (excluimos los listados de este consejo).
- Si usas fondos o imágenes a sangre, es decir, full-width, no uses el texto en esa configuración.
- Deja márgenes amplios entre secciones o contenido. Si lo empastas todo te pasa como con la plastilina, el resultado es una masa marrón.
- No abuses del color, el video o la imagen. El blanco da paz y nunca falla.
Anuncios, banners, ventanas modales, políticas de cookies… ¡Que locuraaaa!
Se ha podido demostrar que el “Loco Murdock” no era un personaje ficticio si no que sus trastornos estaban causados por consumir sitios web como el que veis en la siguiente imagen:
Cuando hablamos de obtener una buena experiencia en el uso de una plataforma el tema de las promociones y publicidad pueden tirar por tierra todo lo que hayas trabajado en el Header, en el contenido o en la navegación.
El uso muy moderado de estos recursos de publicidad – bien propia o ajena – resta a tu diseño, pero si te dejan llegar a tu destino debes pensar en si te interesa el impacto que provocan. El uso desmesurado de dichos recursos no es que resten, te anulan. Hacen inservible tu sitio web.
Otros dos factores para destacar que salen de esa publicidad son los logins o suscripciones y las políticas de cookies. El login siempre ha de estar accesible pero no debes atosigar al usuario para que se registre: deja que te conozca y sugiérelo sutilmente. Haz lo mismo con la newsletter.
En cuanto a las políticas de cookies, todos nos hemos subido a ese tren, pero que esa legislación no nos impida ver tu página. No llenes toda la página con ese mensaje porque puedes conseguir que ya no la quieran ver. Un mensaje discreto es lo que mejor funciona.
Botones de redes sociales
Un error muy simple se da cuando alguien decide presumir de sus redes en su página web. Los hay que te las ponen en el Nav y que merecen ser castigados. Otros en el Footer, tienen mi clemencia. Y otros, almas cándidas, por todas partes. Pues compañeros, mal plan.
El sentido de esos botones es que conozcas esas redes, pero vamos a poner a funcionar nuestra materia gris: ¿dónde está expuesto el grueso de nuestro negocio? ¿en las redes sociales? ¿en el sitio web? Debería estar en el sitio web mientras que las redes sociales son canales que usas para que la gente llegue a dicho sitio web.
Os voy a poner un ejemplo. Entráis a una tienda a comprar y delante de cada producto hay otras tres puertas: una puerta que te lleva a la empresa que hace la publicidad de la tienda, otra que te remite a un cartel de la carretera y la otra de nuevo te lleva al escaparate. ¿No tiene sentido verdad? Lo suyo es que ese escaparate, esa publicidad y ese cartel sean los que te llevan a la tienda a consumir tus productos.
Pues en muchos sitios web se ha instaurado esa tendencia y es un gran error. Si al entrar lo primero que ves son las redes sociales estás invitando al usuario a que lo primero que haga es salir de tu página e irse a una red social, donde sí, estás tú, pero también otros cuantos millones de empresas como tú.
Cabe destacar que no podemos confundir el botón de redes sociales del Nav o Footer con los botones en blogs que sirven para compartir dicho post dentro de una red social. Estos si tienen un gran sentido ayudando al SEO de dicha empresa.
El mal uso de los botones que te llevan a redes sociales es algo muy instaurado y es un mal hábito para la usabilidad de cualquier proyecto. Si te hago salir justo cuando entras… ¡no creo que los planes salgan bien!