Publicidad

10 buenas prácticas en el diseño de web mobiles. Parte 1

Autor: | Categoría:

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?

Publicidad
Etiquetas: , , , , ,
  • Marcos Herrera

    interesante!

    me surge una duda a todo ello, estarías de acuerdo con la idea preconcebida de que en diseño mobile, el contenido debe ser diferente?

    yo en mi caso opino que debe ser el mismo, ya que se puede dar el caso de que un usuario mobile necesite realizar una consulta hacia ese contenido, y al no estar, genere una mala experiencia de user no?

    pongamos un ejemplo, yo el otro día buscando en la página güeb de un hotel… navegando navegando… y… uepa! no podía acceder a la galería de fotos de las habitaciones! uepa! apenas habían 2 líneas de descripción en cada item… todo muy minimalista, usable y adaptado, pero falto de contenido.

    que opinas?

    salu2! y gracias por compartir el artículo con nosotros!

    • Buenas Marcos!

      en primer lugar gracias por escribir, y en segundo lugar te voy a contestar :p

      Mi respuesta es si pero. Me explico, si que creo que debe estar toda la información que en la versión web pero estructurada de diferente manera para que la experiencia mobile sea plena y agradable. Pero creo que no deben de aparecer aceleradores o public engagement como son los típicos sidebars de los blogs.

      En concreto para el caso que comentas del hotel, deberían incluir claramente las fotos de las habitaciones, sino los potenciales clientes no querrán nada con ese hotel.

      un Saludo!

  • Pingback: Qué es el Responsive Design y por qué tu web debería serlo | Blog de IEBSchool()

  • john

    dashaft: me podrias ayudar con un menu , este tendria que ser como el tipico menu pero que se pueda desplazar como un carrucel , he buscado ejemplos de como hacerle y no he encontrado tu con tu experiencia me podrias ayudar con esto, desde ya muchas gracias

    • Hola @john no entiendo muy bien qué es lo que necesitas… ¿un menú con desplazamiento lateral como si fuera un carrusel? suena un tanto extraño y sobretodo muy poco usable, ponme un ejemplo y te ayudaré encantado

      Saludos y gracias por el comentario!

  • Pingback: ¿Qué es el Responsive Design? | AppdonostiaAppdonostia()

  • InformáticosaDomicilio Sevila

    Muy buen artículo para mejorar el diseño web de nuestras páginas web, sobre todo por el tema de navegación dentro del sitio web. Muchas gracias por tus consejos.

    • Gracias! Es un placer servir de ayuda para los demás!

¡Suscríbete!

¡Sé el primero en enterarte de las novedades del diseño web y mejora tus conocimientos!

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte a este blog y recibir notificaciones de nuevas entradas.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies