17 Diciembre 2020

Front end desarrollado en mashfrog. Pautas para elegir entre aplicación móvil y sitio web.

¿Qué significa front end? ¿Qué profesionales participan en él? Profundizamos en las características, áreas de especialización y tipos de productos y servicios que ofrece este amplio conjunto de actividades.

Augusto Montoni, director de Frontend Solutions, nos explica en qué consiste el front end y qué profesionales participan en esta actividad, haciendo especial hincapié en las soluciones desarrolladas en mashfrog. Esta intervención también forma parte del proceso de conocimiento y compartición de las habilidades para las líneas de negocio del Grupo, desarrollada a través de una serie de webinarios de formación titulados «Mashfrog Digital Youniversity».

¿Qué se entiende por front end?

El front end es la parte visible de un programa con la que el usuario puede interactuar a través de una interfaz, la cual permite el funcionamiento efectivo de sus interacciones. En un sentido más amplio, el front end es la parte que, mediante métodos predefinidos e invariantes, se encarga de adquirir y procesar los datos entrantes de forma que puedan utilizarse en el back end.

No se refiere solo al universo web. Aunque todo el mundo piensa que se refiere únicamente al desarrollo de un sitio web, el front end comprende todas las partes de un sistema que implican una interacción directa con el usuario de un servicio. Podría definirse como «la punta del iceberg», es decir, lo que emerge claramente de un sistema mucho más complejo y amplio de lo que ve el usuario final.

El front end puede tomar varias formas: puede ser el sitio web y la aplicación móvil, pero también las habilidades más recientes de Alexa, un sistema de interacciones a través de comandos de voz y de aplicaciones para televisión inteligente. Existen muchos tipos de front end y muchos lenguajes con los que pueden escribirse. Desde el punto de vista de la programación, abarca desde la tecnología puramente web hasta los lenguajes propios de las distintas plataformas.

¿Para qué sirve el front end?

El propósito de un buen front end es representar la parte visible del sistema de forma sencilla y ocultar la complejidad que hay detrás. Se puede decir que corresponde a la imagen que una empresa proyecta hacia el usuario, la cual determina a menudo su credibilidad; una empresa eficiente con un sitio obsoleto y poco funcional puede llegar a perder importantes segmentos de mercado. Los usuarios suelen abandonar un sitio o una aplicación a primera vista si no les gusta estéticamente o no resulta útil, de ahí la importancia de contar con un front end funcional y eficiente.

Flujo de trabajo

Llegados a este punto, Augusto nos explica cuáles son las diferentes fases que caracterizan el trabajo de front end. Partiendo de las instrucciones del cliente, la primera intervención se lleva a cabo sobre la Experiencia del Usuario: se realiza una comparativa de mercado o Benchmarking para entender cómo otros sistemas similares han resuelto el mismo problema, y también porque el usuario podría estar acostumbrado a un determinado patrón de uso que convendría modificar. Para ello, se define la arquitectura de la información para dar prioridad a la más relevante y ocultar la secundaria. Básicamente, se diseña el esquema de página o wireframe, que consiste en una estructura aproximada del front end donde se muestran las interacciones que realizará el usuario y los distintos flujos que se activarán. A continuación, se puede pasar a la Interfaz de Usuario, es decir, definir la apariencia del producto, las animaciones y las interacciones, para después continuar con la fase final de Desarrollo real. Por último, está la fase de Prueba, que acompaña al proyecto a lo largo de su evolución, desde las recepción del informe hasta el desarrollo real.

¿Qué profesionales participan en su desarrollo?

De este flujo de trabajo se desprende claramente que el equipo de front end no está compuesto solo por desarrolladores, sino por un amplio equipo de profesionales con habilidades muy diversas, las cuales Augusto nos describe con detalle.

Diseñador UX
Es el profesional encargado de la usabilidad del producto, aspecto que debe cuidarse hasta el más mínimo detalle. 
Para ello, el diseñador UX debe:

-    Comprender el contexto y responder a las siguientes preguntas: «¿qué debe hacer el sistema? ¿Cuál es el problema a resolver?»
-    Hacer coincidir las necesidades de la marca con las del usuario, es decir, por un lado dar respuesta a las exigencias del negocio y por otro ofrecer un servicio al usuario.
-    Identificar el objetivo, es decir, comprender a quién está destinada la aplicación e intentar identificarse con el usuario que la utilizará.
-    Definir los métodos de interacción con el sistema, ya que el diseño de la experiencia es fundamental para el éxito del producto.

Diseñador UI
Se encarga de presentar el producto e informar sobre la experiencia de la imagen de marca: apariencia, fuente, colores, imágenes, etc. Por lo tanto, el diseñador UI debe:
-    Representar la experiencia.
-    Definir el aspecto visual.
-    Definir las interacciones, animaciones y todo lo que rodea y concierne al aspecto visual.

Este aspecto no es en absoluto secundario a la experiencia, sino que van de la mano: un sitio que representa correctamente la identidad del cliente pero que tiene una pésima experiencia, se abandonará muy pronto. Lo mismo le sucederá a un sitio con una experiencia bien diseñada pero con carencias en términos de UI.

Desarrollador
Es quien escribe el código, es decir, quien transforma lo previamente diseñado en un lenguaje informático. Por lo tanto, el desarrollador se encarga de:

-    Definir la arquitectura del front-end, por lo que se ocupa de todo lo relacionado con el ámbito del desarrollo.
-    Transformar la experiencia del usuario en un código fuente ejecutable.
-    Implementar el sitio/aplicación.

El desarrollador desempeña un papel muy importante, ya que es el responsable del rendimiento del producto, otro de los elementos que contribuye al uso correcto por parte del usuario.

Probador
Los profesionales anteriormente descritos podrían desempeñar las funciones del probador, pero siempre es preferible configurar un área de prueba bien estructurada e identificar los recursos utilizados.

El probador simula el comportamiento del usuario final en la fase de interacción y se encarga de:

-    Definir los casos de prueba.
-    Realizar las pruebas de usabilidad.
-    Realizar pruebas funcionales.
-    Comprobar la coherencia con la UI y UX

Las dos caras del front end: aplicación móvil y sitio web

Desde el punto de vista comercial, es muy importante ofrecer al cliente el front-end que mejor se adapte a sus necesidades. Por eso Augusto nos explica que la aplicación y el sitio no son uno mejor que el otro, sino que simplemente desarrollan sus tareas de forma diferente y pueden adaptarse más o menos en función de las circunstancias.

¿Qué es una app? Augusto nos explica de forma sencilla que se trata de una aplicación que puede descargarse desde el propio teléfono inteligente y que ejecuta una parte del código dentro del teléfono y no en un navegador (cómo ocurre con un sitio web), de esta forma consigue explotar todo el potencial del dispositivo, tanto en términos de rendimiento como de interacciones. 

La otra cara de la moneda son los sitios web, de los cuales existen al menos tres tipos:
-    Landing page (página de aterrizaje): páginas puramente informativas en las que las interacciones de los usuarios son muy limitadas.
-    CMS: también en este caso la finalidad es informativa, pero una parte del back office se dedica a la inserción de contenido editorial.
-    Aplicaciones web: mucho más parecidas a una aplicación y en las cuales se producen muchas más interacciones del usuario con los sistemas de back end involucrados. 

A diferencia de las aplicaciones, a los sitios web solo se puede acceder a través de un navegador y necesitan una conexión a Internet para visitarlos, sin embargo, tienen la ventaja de llegar a una audiencia más amplia.

En resumen, ¿qué front end es más recomendable? Augusto enumera las principales oportunidades de uso para los dos tipos de front-end y que sirven de base para elegir entre aplicación móvil y sitio web.

Aplicación móvil Sitio web
Uso máximo de GPS, Bluetooth, cámara, etc.  Abundante contenido informativo
Uso recurrente  Uso de escritorio
Operación sin conexión  Objetivo menos «inteligente»
Objetivo más «inteligente»    Comercio electrónico
Uso en movimiento Mayor mantenimiento
Alto nivel de interacciones   

En conclusión, la elección del mejor front end dependerá siempre de las necesidades del cliente y del tipo de uso que se deba hacer del producto, por lo que no existe un front end mejor que otro, sino un sistema más apropiado en función de las circunstancias.

Augusto Montoni, director de Fronted Solution, máster en Ingeniería Informática en la Universidad de Roma Tor Vergata. Se incorpora a mashfrog en 2011 como desarrollador móvil en la plataforma Android, primero como líder de equipo y después como director de proyecto y responsable del área móvil, hasta ostentar actualmente el cargo de responsable del área de desarrollo de Frontend.