Diseño de aplicaciones moviles (2) :
El tamaño

Diseño de aplicaciones moviles : El tamaño (2)

1. El tamaño, sí importa
2. ¿Está agobiado? Haz otra pantalla
3. Las guías de estilo, nuestras amigas

Anteriormente ya hablé sobre Diseño de aplicaciones moviles : El color (1). En esta entrada iré un paso más allá y os hablaré sobre el tamaño en las aplicaciones moviles.

Cuando diseñamos para un dispositivo móvil, tenemos que tomar consciencia de para qué estamos diseñando. Diseñar para un display, sea smartphone o tablet, es bastante diferente a diseñar para soportes físicos. Concretamente en el diseño de apps existen múltiples pantallas, con tamaños, densidades y ratios distintos. Lo cual hace la tarea más divertida. Pero que no cunda el pánico, podemos con ello. Solo tenemos que recordar una cosa, El tamaño, sí importa.

1. El tamaño, sí importa

En el diseño de app moviles, el tamaño sí importa. Cuando algo es pequeño, además de cuidar el color, también debemos preguntarnos cuáles son las dimensiones idóneas de sus elementos.

Lo primero, ¿ Cómo condiciona el tamaño la experiencia de usuario? . Elementos grandes y demasiado juntos transmiten una sensación de agobio y estrés. Además, dificultan la interacción y tienen como resultado una mala usabilidad. Si son minúsculos, el espacio transmite una sensación de vacío, siendo imposible el poder hacer acceder a ellos, dado su minúsculo tamaño. Por ello, debemos pensar cuidadosamente el tamaño y posición de todos los elementos que compongan la app movil.

A continuación he seleccionado algunas  apps del sector bucodental. Voy a usarlas de ejemplo, para mostrar cómo afecta el tamaño a la experiencia de usuario.  Remarcar, que para ser fiel a este post, solo analizaré el tamaño y la distribución de los elementos.

// Caso 1,
Clínica Dental Dr. Pirck

El primer caso es una pantalla de la app Clínica Dental Dr. Pirck. Con este ejemplo, os muestro cómo afecta el tamaño a la usabilidad, y cómo la experiencia de usuario mejorar significativamente con un diseño correcto. Comenzaré con la pantalla de inicio, voy a ello.

La primera sensación que me transmite la aplicación de Dr. Pirck, es de agobio. Tiene muchos elementos, mal agrupados y superpuestos. Si hago una lectura vertical descubro cómo al todo ser grande, todo es importante y nada destaca. Conclusión, nada llama la atención y todo es confuso.

 

Voy a enumerar algunos aspectos mejorables de esta pantalla:

1. Cabecera
Logo demasiado grande. Botones de chat y ajustes solapados con la status bar del sistema.

2.Barra Localización
Desbordada, el texto se solapa con el fondo. Además, no existe jerarquía en el propio texto.

3. Iconos
 Demasiado grandes. No tienen aire dentro de los contenedores en los que se encuentran.

4. Imagen
Al tener iconos grandes arriba y abajo, la imagen parece atrapada. No respira ,y eso transmite cierto agobio.

5. Mapa
Demasiados elementos y marcadores. El texto al igual que la sección del horario y la dirección no tiene jerarquía.

Captura original aplicación Dr Pirck

 

Llegados a este punto,  ajustando tamaño y posición consigo que la experiencia de usuario se vea enriquecida.

 

 

Captura original aplicación Dr Pirck (izquierda) Versión optimizada (derecha)
 

2. ¿No cabe? Sácalo

En el punto anterior os he hablado del tamaño de los elementos, en este os explicaré cómo afecta la posición de los mismos. Son comunes las pantallas donde se puede hacer de todo, pero nada se hace bien. Cientos de botones, campos de datos, imágenes y formularios, la mayor parte de ellos metidos con calzador. Es un gran error.

Si el tamaño de los componentes es importante, su disposición, lo es más. El espacio en blanco equilibra el diseño de nuestra app. Dándole peso a este espacio en blanco, conseguimos no asfixiarnos.  Visualmente hablando.

Dicho esto, aquí va mi segundo consejo ¿No cabe? Sácalo. Muchas veces nos empeñamos en incluir mil funcionalidades en una misma pantalla, cuando realmente no tendría que haber más de dos o tres. Por ello, si ves que una funcionalidad sobrecarga tu diseño, sácala a otra pantalla. El flujo de será más largo, sí. Pero la experiencia de usuario será de mayor calidad.

//Caso 2,

Clínica Dental Grupoden Dr. Espinel

Para mi segundo ejemplo uso la app de la clínica del Dr. Espinel. De toda la aplicación, utilizaré la pantalla de incio de la app. En este ejemplo, la pantalla se encuentra repleta de elementos de gran tamaño. Los cuales podrían ser acomodados de forma más optima.

Estos son  algunos aspectos mejorables de esta pantalla a mi criterio:

1. Cabecera y barra de búsqueda
Las dos primeras secciones son la cabecera y la barra de búsqueda.  Si ubicamos en la cabecera la funcionalidad de mapa y escanear junto con el título de la app, queda la barra de búsqueda más despejada.

2. Imágenes
Las imágenes destacadas mantendrán el tamaño. Lo que si haré será reubicar los bloques de texto y los botones. De esta forma la información queda concetrada en una sola zona.

3. Menú principal
El menú principal cuenta con demasiadas funcionalidades, las cuales pueden agruparse, de cinco pasa a cuatro.

Captura original aplicación Dr Espinel

 

 

 

De esta forma,  ajustando tamaño, posición y agrupando funcionalidades, consigo que la pantalla se perciba más ligera y por tanto más usable.

 

Captura original aplicación Dr Espinel (izquierda) Versión optimizada (derecha).

3. Las guías de estilo, nuestras amigas

El primer hándicap que tenemos al trabajar con aplicaciones moviles es el selector. En diseño web, hablamos del cursor del ratón, en las apps de nuestro dedo. El contar con el dedo como herramienta de interacción principal hace que el tamaño deba ser adecuado para que este pueda interaccionar cómodamente.

Un tamaño minúsculo, molestará o activara otras  funcionalidades por accidente. Lo cual ya nos plantea pensar en unos tamaños mínimos.

 

Tanto Android como iOS han diseñado unas guías de diseño, donde indican cuales son los tamaños más adecuados para cada sistema. Haré un post exclusivo sobre los tamaños, las unidades y los ratios en las apps móviles. De momento aquí os dejo la bibliografía por si queréis investigar.

¡Fin! Hasta aquí la entrada de hoy. La semana que viene publicaré la tercera  parte.
Tened buen día, y si os ha gustado, recordad que compartir es vivir  😛. Además si dejáis comentarios, estaré encantado de responderlos.

Dejar un comentario

Escríbeme

¿Tienes una idea? Juntos podemos hacerla realidad, no dejes que tu idea se pierda.