• Recursos

En plena revolución tecnológica, cultural y social en frente al uso de las nuevas tecnologías, han aparecido soluciones para los diseñadores para no tener que diseñar las webs que creamos en versión desktop, tablet y mobile, los denominados: responsive designs.

De los responsive designs se ha hablado mucho, desde los frameworks que te ayudan a construir un sitio así como serían Bootstrap o Foundation, hasta los tutoriales que surfean por la red. Pero en nigún sitio hablan de las buenas prácticas (en cuanto a usabilidad se refiere). Por ese motivo he decidio mostraros 10 buenas prácticas en el diseño de web mobiles.

Práctica 1. Nombra y muestra

Un sitio web contiene muchísima información, y cuando la vemos en un ordenador de sobremesa se puede absorver toda ya que la pantalla así lo permite, pero cuando de un móvil se trata, debemos nombrar todo de lo que vamos a hablar y si pincha mostrárselo. No hay nada más molesto que tener que hacer scroll con el dedo en un móvil para llegar a ver toda la información del web. De este modo, podemos mostrar todo lo que queramos de una manera mucho más usable.

Práctica 2. Desplazamiento horizontal y lateral

¿Por qué limitar al usuario a desplazarse sólo en vertical, cuando puede también desplazarse en horizontal? Se pueden hacer carrousels laterales cargados de información, ordenada de manera usable para que el usuario la obtenga. Una buena práctica es poner fotografías en carrouseles horizontales.

Práctica 3. No uses muchos links, muestra todo lo que puedas de una

Hacer click con un ratón es muy fácil y cómodo, nada te estorba en la pantalla más que un pequeñito puntero diminito en comparación a una pantalla de 21′. En un móvil tu puntero es el dedo y cada vez que lo usas pierdes visión en la pantalla, por eso no uses muchos links y muestra toda la info que puedas en la misma pantalla.

Práctica 4. Usa anchors navegables dentro de una misma página

Esta parece que se contradiga a la anterior práctica, pero tiene mucho sentido. Si creamos menús superiores con anchors dentro de la própia página el usuario podrá desplazarse más conscientemente sobre la página y tendrá más control del uso de la información.

Práctica 5. Usa jerarquías en los menús

Puedes usar un menú encima de otro siempre y cuando lo uses jerárquicamente y con diferencias. Es una buena práctica tener un menú superior de navegación global del sitio y un segundo menú de anchors de la página que estemos viendo.

Práctica 6. Sliders

Todos sabemos que los sliders gustan mucho, pues ¿por qué no ponerlos también en la versión móvil? Eso le dará un toque más dinámico a la página y una punta de color que el usuario agradecerá enormemente.

Práctica 7. Enlace a la versión web

Es un buen escape para el usuario, poder ver  la versión web en su smartphone. Hay veces que la versión móvil no aporta lo esperado y encontrar un link para ver la versión web puede ayudar a retener al usuario y ofrecerle una experiencia de navegación paralela de tu web.

Práctica 8. Haz los titulares cortos

En la versión web podemos poner titulares tan largos como queramos ya que no tenemos una carencia de espacio, pero en la versión mobile no nos podemos permitir ese lujo, a cuanto mayor sea el titular menos espacio nos quedará para ver el resto de contenido y perderemos efectividad.

Práctica 9. Usar placeholders en los formularios

Normalmente en los formularios estamos acostumbrados a tener un texto introductorio antes del input ya que tenemos todo el espacio que queramos disponible. Los placeholders nos ofrecen la posibilidad de escribir el texto introductorio dentro del input y una vez escribimos se guarda lo introducido. Es perfecto para reducir espacios.

Práctica 10. Usar labels

Que grandes son los labels a falta de espacio. Esta simpática tag de html nos permitirá que pinchemos donde pinchemos dentro de ese label nos situe encima del input para poder escribir en él. Práctica muy recomendada en experiencias móviles

Esta es la primera parte de la lista de mis buenas prácticas en el diseño de web mobiles.

¿Qué te parecen? ¿Las vas a usar?

¿Te ha gustado este post? ¡Compártelo con todo el mundo!