was successfully added to your cart.

Si eres diseñador gráfico, de experiencia de usuario o desarrollador Web, seguramente ha sido necesario en algún punto de tu carrera el crear interfaces de usuario adaptadas a dispositivos móviles. Todos sabemos que es un área que sigue en constante cambio y aún no ha terminado de evolucionar; todos los días escuchamos acerca de la aparición de nuevos dispositivos inteligentes, vestibles o de realidad virtual.

Por lo anterior, no sólamente debemos diseñar dispositivos, sino crear entornos de trabajo adaptables al contexto de ejecución, tamaño de pantalla y forma de interacción de los diferentes dispositivos: en pocas palabras, diseño responsivo. Pero, dado el constante cambio de estándares, formas y estilos; es muy probable que alguna vez (o peor aún, ahora mismo) haz cometido alguno de estos errores comunes al crear experiencias para usuarios móviles.

1. Asumir que los usuarios de móviles sólo realizan ciertas actividades

Este es uno de los problemas de diseño más comunes y a la vez más nocivos para los usuarios del sitio Web que diseñaste. Se refiere a la omisión de secciones o contenidos de un sitio Web debido a la suposición de que los usuarios que utilizan dispositivos móviles sólamente realizan actividades específicas y no es necesario que el sitio muestre todo el contenido.

Para entrar en contexto, es bien sabido que desde el 2015 es una realidad la existencia de usuarios únicamente de smartphones; lo cual significa que existe gente (que no es poca) que sólo tiene su teléfono inteligente para realizar absolutamente todas las actividades de su vida diaria en la Web. Desde consultar la cartelera del cine, realizar compras en línea, realizar transferencias interbancarias, buscar ubicaciones en el mapa, realizar llamadas, buscar los horarios de todo tipo de negocios, entre una infinidad de actividades más.

La relevancia de los only smartphone radica en el hecho de que, aunque ellos quisieran, no tienen una computadora de escritorio para realizar la actividad que no le permites en la versión móvil de tu sitio. ¿Así debe de ser? Por supuesto que no.

InVision es una aplicación Web excelente para el proceso de diseño Web; sin embargo asume que si estamos en un móvil sólo queremos ver las pantallas y no puedes hacer absolutamente nada más.

InVision es una aplicación Web excelente para el proceso de diseño Web; sin embargo asume que si estamos en un móvil sólo queremos ver las pantallas y no puedes hacer absolutamente nada más.

Un excelente ejemplo de estas situaciones, nos lo ofrece Luke Wroblewski en su libro Mobile First: Piensa en el primer día de clases de un nuevo estudiante de la Universidad de Harvard. Seguramente imaginarás que el campus es realmente grande. Sin embargo, en una versión antigua de su sitio Web, alguien decidió que los usuarios de móvil no necesitaban el mapa del campus. Cuando ese estudiante novato llega por primera vez y trata de encontrar el lugar en que cursará su primer clase, no sabe dónde es, su reflejo inmediato es sacar el celular de su bolsillo y buscar el mapa del campus en el sitio oficial. ¡Oh, pobre de él! Ignora que terminará preguntando a alguien, porque el sitio no resolverá su problema.

Tenemos que aceptar que todos los contenidos son necesarios para todos los usuarios y contextos.

2. Ignorar la regla de los 48 píxeles

Según estudios de Google, existe un tamaño promedio para la yema de los dedos de la gente en el mundo: 48 píxeles cuadrados. Sin entrar en demasiados detalles, piensa que tu dedo es más impreciso que un mouse. Es vital que los objetos interactivos en pantalla se aproximen lo más posible a este tamaño. El tamaño mínimo recomendable es de 32 píxeles cuadrados.

3. Usar fuentes no optimizadas

Desde la aparición de las fuentes CSS, el mundo del diseño Web ha alcanzado novedosos y emocionantes horizontes; sin embargo, con la infinidad de tipografías que rondan por Internet, a veces dejamos de pensar en uno de los fines máximos de una tipografía: la legibilidad. Haz pruebas de la fuente que usarás en los dispositivos reales, para que te asegures que el render se hace correctamente y que tus usuarios no tendrán problemas para leer el contenido.

4. No usar SVG

Voy a ser concreto, no existe una mejor manera de mostrar un ícono o cualquier gráfico vectorial en un navegador. El formato SVG es el nuevo estándar de la Web. Nos permite perfecta calidad, alta definición, un peso de archivo muy reducido, crear animaciones y transiciones en los gráficos. ¿Qué más necesitas?

El logo de Catarsis al 200% (como lo ves en un iPhone). A la izquierda: SVG, a la derecha: PNG

5. No considerar retina display

La mayoría de los móviles tienen pantallas de el doble o triple de la resolución que nos muestra un monitor regular; por eso, al mostrar cualquier gráfico el navegador debe estirarlo para que se vea proporcionalmente igual, aunque realmente la imagen está siendo modificada. ¿El resultado? Mapas de bits con una evidente pixelación. Cuando incluyes PNGs o JPGs en tu sitio, es importante tener una versión retina (2x) para mostrarla cuando sea necesario.

6. Elementos interactivos muy juntos

Esto va de la mano con los 48 pixeles cuadrados; debido a la poca precisión que tiene el dedo humano, es necesario que los elementos interactivos (como links y botones), sobre todo si son más pequeños que el estándar, tengan suficiente separación para no tocar objetos por accidente. A todos nos ha pasado que hacemos click al link que está arriba o abajo. Usuarios frustrados en 3… 2… 1…

7. No construir el sitio a través de bloques de contenido

Algo que repito exhaustivamente a mis estudiantes es la relevancia del uso de una retícula… y no sólo usarla, sino realmente seguirla en el diseño completo.

Una derivación directa del uso de una retícula es la existencia de módulos de contenido para mostrar todo tipo de información. Si visualizas la mayoría de los buenos sitios Web de la actualidad, podrás darte cuenta que siempre usan objetos que permiten generar diferente cantidad de columnas. Ésto es importante porque cuando diseñamos para smartphone, por ejemplo, necesitaremos descomponer el diseño y mostrarlo de manera vertical. Si tienes una estructura que ya cuenta con esas separaciones (módulos) podrás lograrlo con mucha facilidad.

A la izquierda: los dos módulos vistos en layout de escritorio, a la derecha: los mismos dos módulos vistos en layout de smartphone.

A la izquierda: los dos módulos vistos en layout de escritorio, a la derecha: los mismos dos módulos vistos en layout de smartphone.

8. Muchas columnas

Cuando estamos planeando el sitio, tenemos una versión de escritorio llena de columnas y módulos que funcionan muy bien y al tratar de migrar eso a la versión de smartphone o tablet, decidimos utilizar los mismos 4 o 6 módulos. Esto, salvo casos especiales, no es muy recomendable. Es muy  probable que al momento de visualizarse en el móvil los textos aparezcan muy comprimidos y todo se sienta amontonado. Es preferible buscar una distribución vertical y garantizar la correcta visualización del contenido.

9. Mega formularios

Todos, absolutamente todos odiamos los formularios. Son un dolor de cabeza y hay sitios que se obsesionan con querer que llenemos hasta el más mínimo detalle de nuestra vida a través de cajas de texto y demás componentes. En el caso de los móviles la experiencia es aún peor. Piensa en que el usuario no tiene un teclado real y debe utilizar el teclado en pantalla que, junto con nuestros gordos e imprecisos dedos, no ayuda mucho para la escritura. Reduce al mínimo la cantidad de datos que solicitas, procura tener opciones pre-llenadas o permite que el usuario pueda finalizar el llenado en otro momento.

10. Menú móvil

Es cierto que la consistencia en la navegación es muy importante, pero a veces quieres llevar la misma experiencia de uso a todos los dispositivos y variantes de tu sitio. Esto es un error. Piensa que si tu usuario está utilizando un móvil, es muy probable que utilice su mano para interactuar y no tendrá mucho espacio para mostrar toda la cabecera del menú. Es importante que en un móvil, el menú sea desplegable y fácil de usar. Crea un menú concreto, sin acordeones, sin interacciones elaboradas. Tu usuario lo agradecerá.

11. No te atreves a utilizar espacio en blanco

Los sitios actuales presentan un volumen de información muy alto, siempre existen mil cosas que quieres mostrar en pantalla y cuando estás planeando la estructura, terminas creando un entorno saturado de objetos. Recuerda que el aire es importante, crea descansos visuales entre elementos.

Pese a que parezca lo contrario, utilizar más espacio suele ser una mejor solución para eliminar la sensación de cansancio y de sobresaturación; eso sí, como todo en el diseño gráfico, lo más importante es tomar en cuenta la composición, haz que funcione y no dudes en espaciar los elementos.

El sitio de Tecnosolar, es un ejemplo de cómo el espacio entre objetos nos ayuda a reducir la tensión visual.

12. Crear interacciones que requieren el estado hover

Cuando diseñas un entorno apto para móviles tienes que asumir que la mayoría de los usuarios estarán utilizando una pantalla táctil. Una consecuencia de esto es el hecho de que, a diferencia de una computadora de escritorio, no tenemos un mouse para señalar la región que nos interesa, por lo que realmente no existe el over en el celular o la tablet.

Evita el uso de tooltips, menús que se abren con over en lugar de click, mosaicos que muestran capas con datos al pasar por encima. Piensa que, en general, toda la información que el usuario debe consumir tiene que estar desplegada en el cuerpo de la página y no aparecer hasta que pasas por encima. Olvida los 90’s.

Sé que hasta el momento únicamente hemos hablado de 12 de los errores comunes, pero debido a que el artículo resultó demasiado largo, la segunda parte será publicada la próxima semana.

Actualización: Lee la segunda parte aquí.

¿Tú qué errores ves con más frecuencia en los sitios para móviles?

Sigue la revista de Catarsis en Flipboard
Suscríbete a Catarsis en Play Kiosco

Author Josué E. Pizano

Amante del diseño de Experiencia de Usuario (UX), evangelista de CSS, adicto a la tecnología y apasionado del desarrollo Web, el cine, la comida y la música.

Más entradas de Josué E. Pizano

Deja una respuesta