was successfully added to your cart.

Como lo prometido es deuda, esta semana tenemos la segunda parte de las 24 cosas que has estado haciendo mal al diseñar para móviles. Si no has leído la primera parte, la puedes encontrar aquí.

13. No considerar la Zona del Pulgar

Pese a que esta regla es bastante conocida, creo que sigue sin serlo del todo. Simplemente deriva de que nuestros usuarios móviles generalmente utilizan los pulgares para interactuar con sus smartphones y/o tablets debido a su pantalla táctil. ¿Alguna vez te ha ocurrido que tratas de sujetar el dispositivo encima de ti mientras estás en la cama y se te cae en la cara? Esto seguramente se debe a que el sitio o contenido que visitabas te obligó a soltarlo para poder alcanzar un punto de interacción o a estirar los pulgares hasta lugares inalcanzables.

El el caso de los smartphones, mayormente las personas utilizarán el dispositivo con una sola mano y de manera vertical, por lo cual, dependiendo si es zurda o diestra, tendrá zonas más o menos fáciles de alcanzar.

Regla del pulgar en smartphones

Las zonas de alcance del pulgar clasificadas en términos de la facilidad o agonía para alcanzarlas.

En el caso de las tablets, generalmente se utilizan de manera horizontal y con las dos manos; lo cual se traduce en una zona de alcance combinando ambos pulgares.

En el caso de tablets, el área de alcance varía considerablemente al trabajar en modo horizontal o vertical.

En el caso de tablets, el área de alcance varía considerablemente al trabajar en modo horizontal o vertical.

La regla del pulgar, de hecho, es un tema digno de escribir una serie completa de artículos, por lo que seguramente en el futuro cercano tengamos alguno que lo aborde con más detalle.

14. Utilizar sliders

Los sliders en la parte superior de una página Web es tan 2011 que hasta me da nostalgia. En esa época eran útiles debido a que eran novedososinteractivos; sin embargo, la llegada de las pantallas táctiles supuso una gran complicación para trasladar la experiencia del slider a este tipo de dispositivo.

En general podemos decir que cualquier contenido suficientemente importante debería estar desplegado en la página y no tener que esperar a que aparezca en un slider; además este tipo de elementos supone muchas complicaciones para los usuarios móviles porque no hay un criterio estándar o claro de cómo debo utilizarlos en él. ¿Quieres más razones? Los sliders generan la necesidad de cargar muchos gráficos que no se ven y eso produce mayor tráfico de datos (esos preciosos datos tan costosos en el móvil) y las imágenes terminan por aparecer tan pequeñas que no se distingue su contenido.

15. No seguir convenciones de uso

Existen muchos criterios de interacción que son tan comunes que podríamos decir que se trata de convenciones; es decir, reglas que son generadas debido a la aceptación común.

Por ejemplo, si  sabemos que un usuario de smartphone tratará de recorrer el sitio verticalmente ¿por qué generar una experiencia horizontal e incómoda?. Si sabemos que buscará el menú en la parte superior, ¿por qué ponerlo al centro de la pantalla? Existen muchas convenciones de uso que te ayudan a tomar las decisiones correctas para el diseño de tu sitio Web y tienes dos opciones:

  1. Ignorarlas y hacer que tus usuarios sufran cada vez que lleguen a utilizar alguno de los sitios diseñados por ti.
  2. Seguirlas y concentrarte en que tu diseño cumpla con la funcionalidad que requiere.

16. Diseñar para dispositivos específicos

A veces, cuando diseñamos, tenemos en mente la experiencia de uso en un iPhone o en un terminal Android específico y seguramente garantizarás que en éstos funcionará todo maravillosamente, pero ¿alguna vez te has preguntado cuántos dispositivos diferentes existen en el mundo? Seguramente son miles, con pantallas, proporciones y sistemas operativos diferentes.

Planea tus contenidos tomando en cuenta los rangos de tamaño de distintos tipos de dispositivo y abarca el mayor abanico posible.

17. Ir directamente al diseño gráfico

El diseño de experiencia es quizás la etapa más importante de todo el proceso de desarrollo: en ella estructuraremos todo lo que se mostrará al usuario, definiremos cómo hará para realizar cada actividad y preveremos todos los posibles problemas que se puedan presentar.

Ir al diseño gráfico sin una planeación previa es como construir un edificio de 10 pisos sin analizar la estructura. Suerte con eso.

18. No probar las maquetas en móviles

No basta con estructurar las maquetas de la interacción del sitio en el escritorio; las cosas en la pantalla siempre lucen muy bien, así como en papel. El problema de esto es que cuando el usuario tiene el dispositivo en su mano, quizás no alcance a tocar el precioso link que diseñaste para él, o la experiencia de scrolling se siente muy larga.

¿Qué debes hacer? Crear las maquetas del diseño y abrirlas en el dispositivo directamente para verificar que cada una de tus suposiciones son correctas.

No subestimes el poder de una maqueta bien estructurada. Si existiera una fórmula para el éxito en el diseño Web, ésta sería el ingrediente principal.

No subestimes el poder de una maqueta bien estructurada. Si existiera una fórmula para el éxito en el diseño Web, ésta sería el ingrediente principal.

19. Generar experiencias estilo App

En ocasiones nos dejamos llevar el diseño de  aplicaciones nativas que funcionan fantásticamente, pero pese a que ofrecen experiencias similares a las que un sitio Web ofrece, éstas no son iguales. Las reglas que aplican para una aplicación no necesariamente se puede generalizar en un sitio Web; por ejemplo, las apps pueden acceder sin complicaciones al hardware del dispositivo para solicitar la captura de una fotografía, la grabación de un vídeo o el uso del giroscopio; mientras que en el navegador todo esto es imposible o muy complejo. Por lo tanto, no podemos repetir la misma experiencia en ambas plataformas. Piensa que si tratas de imitar exactamente lo que hace una app puedes terminar confundiendo a tu usuario o complicando muchísimo el proceso de desarrollo del proyecto.

20. Fuente muy pequeña

En contra del instinto natural de hacer todo más chico para que quepa en la pantalla del móvil, lo correcto es generar estructuras con textos grandes. Esto se debe principalmente a que, a diferencia de la computadora, cuando trabajas con el smartphone o la tablet tienes la pantalla más lejos de ti o te encuentras menos atento al contenido.

Hace un tiempo era común escuchar que el tamaño estándar para la fuente era de 12pt; sin embargo la llegada de los móviles supuso la necesidad de tornarla un poco más grande; de modo que una fuente de 14pt en adelante es una forma más segura de diseñar.

21. No permitir compras

A veces, para evitar las complicaciones, optamos por eliminar la posibilidad de que los usuarios realicen compras a través de sus dispositivos móviles. Nada más errado.

Estadísticamente la cantidad de compras que se realizan a través de dispositivos móviles superan por mucho su contraparte en dispositivos de escritorio; es decir, si no permites las compras en el móvil estarás perdiendo a la mayor parte de tu mercado.

22. Diálogos inadaptados

Sé que es raro el título de este punto, pero me refiero a que en el escritorio es muy fácil diseñar diálogos de mensaje o de interacción; mientras que en el móvil nos encontramos con el problema de que la pantalla podría no tener suficiente espacio para mostrar todos los elementos necesarios (título, contenido, acciones y botón de cerrar).

Cuando estructures un diálogo de mensaje pregúntate cómo se verá y funcionará en la pantalla de un smartphone y si realmente es muy necesario mostrar ese contenido en forma de diálogo. No existe nada más frustrante que un diálogo que no se puede cerrar en la pantalla del móvil.

23. Estructuras que no puedan generalizarse

Uno de los peores vicios del diseño Web es el de crear estructuras que no pueden coexistir en entornos móviles y de escritorio por igual; es decir, diseñar un elemento que no puede desplegarse en el smartphone de manera natural, integrar elementos que en una u otra versión tendrán que quitarse o contenidos que tengan que cambiar radicalmente su organización/estructura para desplegarse.

Recuerdo mucho un proyecto en el que se mostraba un par de columnas con gráficos que en la versión de escritorio se intercalaban; es decir, un texto a la izquierda y el gráfico a la derecha y luego otra fila en la que aparecía una imagen a la izquierda y un texto a la derecha. Evidentemente esto funciona bien en el escritorio, pero si lo traducimos directamente a la versión de móvil, tendríamos que asumir que tendríamos verticalmente esos elementos en el siguiente orden: Texto, Imagen, Imagen, Texto.

En el diseño traducido naturalmente veríamos las dos imágenes pegadas al desplegarse, lo cual genera tensión gráfica y de ritmo. ¿Cuál es el problema? Que para hacer que funcionara correctamente (Texto, Imagen, Texto, Imagen) fue necesario realizar mucho código y una bola de condiciones especiales que modificaran el contenido en lugar de modificar sólo su estructura.

Si diseñas una estructura así, también tienes que prever que su forma de despliegue será congruente en todas las versiones, y eso es preferible porque maximiza la compatibilidad. Si, por otro lado, optas por hacerlo de todos modos, seguramente quien lo programe tendrá que cobrarte más por el trabajo extra o tardará más tiempo en lograr los resultados que buscas.

Ejemplo de estructura modificada

A la izquierda el sitio de escritorio con los gráficos entrelazados, al centro el mismo sitio visto en móvil con distribución natural (vemos que los textos y las imágenes se juntan y generan mucha tensión visual) y a la derecha la versión de esa área corregida a través de la reorganización del contenido en tiempo de ejecución (qué cansancio hacer eso pff).

24. Pensar en la experiencia móvil como “segundona”

Aún estando en el 2016, existen personas que diseñan la experiencia de móviles como la versión de segunda mano del sitio original y eso algo completamente errado. Como nos demuestra Luke Wroblewski en su libro Mobile First, la experiencia en dispositivos móviles debería ser la más suculenta, la de mayor deleite, la mejor. Simplemente piénsalo, el consumo del contenido en Internet actualmente es mucho mayor en móviles, no tiene sentido depreciar la experiencia de la mayoría de tus usuarios.

No quiere decir que la versión de escritorio no sea importante (porque lo seguirá siendo por muchos años aún), pero la versión para móviles ahora es la más utilizada. No dejes que tu diseño esté pensado para que la mayoría de los visitantes sufran.

Reflexiones finales

Diseñar para dispositivos móviles, como todo en el diseño, requiere talento, pasión y mucho sentido común. Sé consciente de las consecuencias de tus actos (de diseño gráfico, por supuesto); todo gran poder conlleva una gran responsabilidad.

Aunque en el futuro seguiremos hablando de diseño de experiencia de usuario, no está de más que leas alguno de los geniales libros de A book apart que tratan acerca de temas relacionados: Mobile First, Designing For Emotion, Responsive Web Design y On Web Typography.

¿Cuál es tu libro o sitio favorito para aprender de diseño de experiencia?

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