Pasando de web a mobile

If want to see this post in English, click here.

Después de estar trabajando en proyectos web, comencé la aventura de unirme por primera vez a un proyecto mobile. En cuanto a la tecnología usamos Flutter con Dart, lo que hizo que la experiencia fuera bastante amena ya que Flutter te proporciona una serie de componentes que te facilitan el armado básico de la estructura de una pantalla. También pude encontrar varias similitudes como el manejo de estado, la estructura basada en columnas, filas y contenedores y la forma de acomodar los componentes. A pesar de eso, me encontré con diferencias que me llamaron la atención ya que iban relacionadas a la herramienta que maneja el usuarie y va más allá del lenguaje que se utiliza. Si te interesa saber más sobre Dart, podés ver la siguiente charla.

Para entender mejor las diferencias hay que analizarlo en relación a las herramientas que se emplean en cada caso.

Con los dispositivos de entrada:

En web el usuarie utiliza un teclado y un mouse que le permiten escribir rápidamente y dar clics de forma certera. En relación a esto, podemos decir que en una página web podemos contar con que al usuarie le resulte fácil escribir y dar clicks para navegar o ingresar información.

Analizando estas dos interacciones podemos sacar las siguientes conclusiones:

• Navegación: desde el lado de la misma une cuenta con links o botones que te permiten ir a otra página. En cuanto a la ubicación de estos elementos suelen estar colocados en la sección superior de la pantalla, donde el usuarie los encuentra rápidamente.
• Ingresar información: para esto, lo más común es encontrarse con inputs o dropdowns, donde el usuarie puede rellenar formularios con mayor facilidad gracias al teclado, por lo tanto, implica formularios más extensos en comparación a mobile.

En mobile les usuaries utilizan sus dedos, que por el contrario, son algo torpes para seleccionar algo pequeño con certeza o resulta cansador escribir toda la información. En cambio pueden fácilmente mantener apretado y arrastrar el dedo por la pantalla, por lo que se puede aprovechar los diferentes movimientos que realiza. Esto se traduce en contar con una gran variedad de gestos para atrapar las interacciones de arrastrar, mantener y soltar.  Por otro lado, requiere que los espacios a interactuar sean lo suficientemente grandes para el tamaño del dedo o que tengan el espacio suficiente para que no entren en conflicto con otros componentes.

Teniendo en cuenta esto podemos sacar las siguientes conclusiones:

• Navegación: al contrario de la web, si queremos que el usuarie pase de página, podemos considerar la posibilidad de que lo haga arrastrando el dedo hacia los laterales. En cuanto a la ubicación de la barra de navegación, se coloca en la sección inferior, que es donde está más cerca de la mano del usuarie. Siguiendo ese mismo criterio, dejamos más cerca los accesos a páginas más importantes del lado de la mano con la que el usuarie interactúa con el celular.
• Ingresar información: tiene que estar pensando para que el usuarie tenga que escribir lo menos posible. En el caso de que tenga que ingresar información, podemos considerar otras herramientas que requieran la interacción mediante gestos. Por ejemplo, para ingresar un número usamos un slider para que el usuarie no tenga que ingresar un número con el teclado. También tenemos que tener en cuenta que al usar un teclado este ocupa casi la mitad del espacio disponible, por lo tanto, toda la información relevante para la persona junto con el input debe estar contenida en ese espacio reducido. Por otro lado, utilizar el escáner de la cámara, la detección de huellas o detección de rostro sirve para facilitar ingreso o visualización de información o identificación del usuarie.

Con los dispositivos de salida:

En web tenemos el uso de pantallas mayormente de gran tamaño y la pestaña en la que se está viendo la página se puede adaptar a tamaños más pequeños según lo disponga el usuarie. También hay que pensar en la posibilidad de que la página se abra desde un celular, aun sabiendo de que no va a ser lo más cómodo para el usuarie ya que se enfoca en el uso de mouse y teclado. Teniendo en cuenta esto podemos pensar la página web como algo que generalmente va a ocupar gran tamaño, que hay que aprovecharlo, pero sin dejar de lado que se tiene que adaptar a tamaños más pequeños y no morir en el intento. En programación esto se traduce a tener que hacer que los componentes sean responsive dependiendo el tamaño de la pantalla y cómo estos componentes se van a acomodar en caso que el espacio sea muy reducido. También existe una forma de diseño llamada Mobile first donde se comienza por el diseño mobile para después adaptarlo a tablets y ordenadores. Se piensa primero el diseño con los elementos esenciales de forma reducida y simple. Esto hace que sea más fácil adaptarlo a espacios más amplios y agregar más elementos en caso de ser necesario.

En mobile las pantallas son más pequeñas, pueden cambiar un poco dependiendo del tipo de celular pero sigue estando en un área reducida de espacio a comparación a un monitor. Por eso hay que pensar en el diseño de una forma que entre todo de una manera reducida y, que a la vez, los componentes sigan siendo lo suficientemente grandes para que les usuaries puedan verlos de manera clara e interactuar con ellos. Al contar con tan poco espacio esto implica tener que pensar cuales son los elementos esenciales de la aplicación. A diferencia de la web, los cambios de pantalla no implican grandes cambios en la disposición de los elementos, sino que se adapta el tamaño de los componentes según el ancho y el largo de la pantalla. Por lo tanto, se parte el diseño desde el modelo de celular más pequeño para después adaptarlo a uno más grande.

Conclusión:

En base a mi experiencia, puedo concluir que pasar de web a mobile implicó tener que lidiar con otro tipo de problemáticas y aprender a usar las herramientas que ayudan a solucionarlas. Por otro lado, contar con una base de conocimiento, que es compartida en ambas plataformas, permite que sea mucho más fácil la adaptación. Después de eso, solo queda la dificultad que conlleva aprender un lenguaje nuevo. Existen más diferencias, pero mencioné las que más me llamaron la atención al arrancar con esta experiencia y que me encontré en el día a día.