Front end make in mashfrog. Linee guida per scegliere tra mobile app e sito web

Augusto Montoni, Head of Frontend Solutions, ci ha raccontato cosa si intende per front end e quali sono le figure professionali coinvolte in questa attività, con uno sguardo particolare alle soluzioni “make” in mashfrog. Anche questo intervento rientra nel percorso di conoscenza e condivisione delle competenze delle business line del Gruppo realizzato attraverso una serie di webinar formativi dal titolo “mashfrog digital youniversity”.

Cosa si intende per front end

Il front end è la parte visibile di un programma, quella con cui l’utente può interagire attraverso un’interfaccia che permette l’effettivo funzionamento delle sue interazioni. Nella sua accezione più generale, il front end è responsabile dell’acquisizione dei dati in ingresso e della loro elaborazione con modalità predefinite e invarianti, tali da renderli utilizzabili nel back end.

Non riguarda solo il mondo web. Tutti pensano che si riferisca solo allo sviluppo di un sito web, invece per front end si intendono tutte le parti di un sistema che prevedono un’interazione diretta con l’utilizzatore di un servizio. Si potrebbe definire “la punta dell’iceberg”, ossia ciò che emerge in chiaro di un sistema che però è molto più complesso e più ampio di ciò che vede l’utente finale.

Il front end può assumere varie forme: può essere il sito web, l’applicazione mobile, ma anche le più recenti skill di Alexa, un sistema di interazioni attraverso comandi vocali, così come le applicazioni per smart tv. Esistono tante tipologie di front end e tanti linguaggi con cui possono essere scritti, da un punto di vista della programmazione: si va da tecnologie puramente web a linguaggi propri delle varie piattaforme.

A cosa serve il front end

Lo scopo di un buon front end è rappresentare la parte visibile del sistema in modo semplice, nascondendo la complessità che c’è dietro. Si può dire che corrisponde all’immagine di un’azienda verso l’utente, determinandone molto spesso la credibilità: un’azienda efficiente con un sito vecchio e poco usabile può perdere fette di mercato importanti. Molto spesso gli utenti abbandonano un sito o un’app al primo impatto, perché non piace esteticamente o perché non è usabile, da qui deriva l’importanza di un front end funzionale ed efficiente.

Il flusso di lavoro

A questo punto Augusto ci spiega quali sono le diverse fasi che caratterizzato il lavoro del front end. A partire dal brief del cliente, il primo intervento è sulla User Experience: viene fatto un benchmark per comprendere come sistemi simili hanno risolto lo stesso problema, anche perché l’utente potrebbe essere abituato ad un determinato pattern di utilizzo e sarebbe sconveniente stravolgerlo. Quindi si definisce l’architettura delle informazioni, per dare priorità a quelle più importanti e nascondere quelle secondarie, in sostanza si disegna il wireframe, ossia una struttura grezza del front end, dove vengono mostrate le interazioni che farà l’utente e i vari flussi che saranno attivati. A partire di questo si può passare alla User Interface, quindi definire il look&feel del prodotto, le animazioni e le interazioni, e poi passare alla fase finale di Development vero e proprio. Infine, la parte di Testing accompagna il progetto durante tutta la sua evoluzione, dalla ricezione del brief fino allo sviluppo vero e proprio.

Le figure professionali coinvolte

Da questo workflow emerge chiaramente che il team di front end non è composto solo da sviluppatori, ma da figure professionali molto varie e con competenze ben distinte, che Augusto ci descrive nel dettaglio.

UX Designer
È colui che si occupa dell’usabilità del prodotto, che deve essere curata nei minimi dettagli. 
Per fare ciò deve:

-    comprendere il contesto, rispondendo alla domanda “cosa deve fare il sistema? Quale problema deve risolvere?”
-    far coincidere le esigenze del brand con quelle dell’utilizzatore finale, quindi da un lato rispondere alle esigenze di business e dall’altro offrire un servizio all’utente;
-    identificare il target, quindi capire a chi è destinata l’applicazione e cercare di immedesimarsi nell’utente che l’andrà ad utilizzare;
-    definire le modalità di interazione con il sistema, in quanto il disegno dell’experience è fondamentale per la buona riuscita del prodotto.

UI Designer
Si occupa di presentare il prodotto, riportando l’experience sull’immagine del brand: look&feel, font, colori, immagini e quant’altro. Quindi deve:

-    rappresentare l’experience
-    definire il visual
-    definire le interazioni, le animazioni e tutto ciò che fa da contorno e riguarda l’aspetto visivo.
Questo aspetto non è assolutamente secondario rispetto all’experience, ma anzi va di pari passo: un sito che rappresenta bene l’identità del cliente, ma che ha una pessima experience viene presto abbandonato, ma vale anche il contrario, per cui se ha un’experience ben studiata, ma in termini di UI è carente, succede esattamente lo stesso.

Developer
È colui che scrive il codice, ossia trasforma in un linguaggio informatico ciò che è stato precedentemente disegnato. Quindi lo sviluppatore:

-    definisce l’architettura del front end, quindi si occupa di tutto ciò che attiene alla sfera dello sviluppo
-    trasforma la user experience in un codice sorgente eseguibile
-    fa il deploy del sito/app
Il ruolo dello sviluppatore è molto importante perché cura le performance di un prodotto, altro elemento che contribuisce alla buona riuscita del suo utilizzo da parte dell’utente.

Tester
Il ruolo di tester può essere ricoperto dalle le stesse figure professionali già descritte, ma sarebbe sempre preferibile configurare un’area di test ben strutturata, individuando delle risorse dedicate. Il tester simula il comportamento dell’utente finale in fase di interazione e si occupa di:

-    definire i casi di test
-    eseguire i test di usabilità
-    eseguire test funzionali
-    verificare la coerenza con la UI e la UX

Le due facce del frontend: mobile app e website

Da un punto di vista commerciale, è molto importante proporre al cliente il frontend che risponda in maniera migliore alle sue esigenze. Perciò Augusto ci spiega che l’app e il sito non sono uno migliore dell’altro, ma semplicemente svolgono i loro compiti in maniera diversa e possono essere più o meno adatti a seconda delle diverse circostanze.

Ma cosa è un’app? Augusto ci spiega in parole semplici che si tratta di un’applicazione scaricabile sul proprio smartphone che esegue una parte di codice all’interno del telefono e non in un browser (come avviene per un sito web), quindi sfrutta tutte le potenzialità del dispositivo, sia in termini di performance che di interazioni. 

L’altra faccia della medaglia sono i siti web, di cui esistono almeno tre tipologie:

-    landing page, pagine puramente informative in cui le interazioni degli utenti sono molto limitate;
-    CMS, anche in questo caso lo scopo è informativo, ma una parte di backoffice è dedicata all’inserimento di contenuti redazionali;
-    Web app, sono molto più simili ad un’app, in cui sono previste molte interazioni con l’utente con i sistemi di backend coinvolti. 

Rispetto alle app, i siti web sono accessibili solo attraverso un browser, necessitano di una connessione Internet per essere visitati, ma hanno il vantaggio di coprire una audience maggiore.

In conclusione, la scelta del miglior front end dipende sempre dalle esigenze del cliente e dal tipo di utilizzo che si deve fare del prodotto, per cui non c’è un front end migliore di un altro, ma un sistema migliore per determinate circostanze.