Front end senza limiti

pittogramma Zerouno

Technology In Depth

Front end senza limiti

L’interfaccia utente è un componente vitale di una APP. Da JavaScript a Swift, ecco le tecnologie per offrire agli utenti un’esperienza intuitiva ed efficace.

30 Ago 2022

di Pablo Cerini

Nell’impatto di un software, l’interfaccia utente ha un ruolo di primo piano. Sembra un’ovvietà, ma non è così. Spesso il team che sviluppa un applicativo è focalizzato sulla manipolazione dei dati e la logica di business consuma la fetta più importante del budget dedicato al progetto. Il vendor crede così di consegnare un prodotto impeccabile e in grado di gestire tutte le potenziali situazioni critiche, ma ecco che il giorno del Go Live, il feedback degli utenti si rivela più tiepido del previsto, o addirittura carico di un certo disappunto.

Sono piuttosto frequenti i casi in cui un’interfaccia poco intuitiva, o con un flusso non ottimale per le esigenze operative, possono compromettere l’ottimo lavoro svolto lato back end. Aver incorporato nei propri prodotti un’esperienza utente eccezionale per intuitività e soddisfazione d’uso è stato uno dei cardini su cui è stato costruito il successo di brand come Apple, Google o Facebook, che hanno fatto del design il ponte tra le logiche di business e le aspettative dell’utente.

I front end per il web

Ci sono elementi che oggi sono imprescindibili per ogni pagina web. Il primo è la liquidità, ossia la capacità di adattarsi alle dimensioni dello schermo in modo responsive. La seconda si può individuare nella semplicità d’uso, cioè nell’ottimizzare il numero di interazioni richieste all’utente per raggiungere il suo scopo.

WHITEPAPER
Nel mondo Retail 4.0 la velocità è tutto: come stare al passo?
Retail
Software

Questa è una novità introdotta dalle interfacce minimali di Apple, che si opponevano nettamente all’abbondanza di menu e tasti presenti contemporaneamente su schermo delle applicazioni Windows legacy. La terza risiede nell’esperienza utente, che deve essere appagante al punto di diventare uno dei motivi della fidelizzazione stessa dell’utente.

Il vero spartiacque che ha determinato il rinnovamento dell’interfaccia utente è stato l’avvento del web responsive, ossia quando i siti web hanno dovuto affrontare la sfida di ridisegnare la propria fruibilità per rendersi accessibili anche agli utenti che impiegavano schermi di dimensioni ridotte.

Questa esigenza si è scontrata con i limiti dell’HTML tradizionale e ha portato al successo della tecnologia CSS (Cascade Style Sheet), che permette il ridimensionamento automatico di tutti gli elementi del cosiddetto DOM (Documento Object Model), ossia lo scheletro sottostante a una pagina web.

La tecnologia responsive ha vissuto poi un’evoluzione continua, dando alla luce soluzioni come Bootstrap, che hanno reso semplice l’applicazione di logiche responsive che permettono di gestire agevolmente anche layout complessi con colonne e riquadri non omogenei tra loro.

L’evoluzione di JavaScript

La responsività di una pagina presto non è più stata sufficiente ad appagare un’utenza sempre più esigente. L’estensione delle pagine in JavaScript con la tecnologia AJAX ha permesso di confezionare interfacce capaci di aggiornare il dato sottostante rispondendo in tempo reale all’interazione dell’utente. Questa è stata un’altra rivoluzione che ha segnato una milestone fondamentale nelle nostre aspettative d’uso: chi non si ricorda lo stupore della prima volta in cui Google ha proposto un completamento automatico della parola che si stava digitando nella barra di ricerca?

Le potenzialità offerte dalle nuove funzionalità AJAX hanno portato da una parte alla creazione di controlli più complessi in grado di beneficiarne, dall’altra anche all’esigenza di una programmazione più snella delle pagine web, la cui manutenzione stava diventando esageratamente complessa. JavaScript iniziò perciò a evolversi e a dare vita a tecnologie derivate che ne espandessero le funzionalità, come i framework o i super set.

Un super set di JavaScript è un insieme di funzionalità aggiuntive e di metodi che “avvolgono” le funzioni originarie di JavaScript, offrendo allo sviluppatore metodi e proprietà che gli consentono di eseguire un maggior numero di manipolazioni scrivendo meno quantità di codice.

Un framework è, invece, una collezione di librerie già scritte in JavaScript, ottimizzate secondo un particolare scopo. Uno dei framework JavaScript più utilizzati è sicuramente React, creato dall’ingegnere di Facebook Jordan Walke, per dare al team di sviluppo del social network la possibilità di utilizzare un ambiente di tipo MVC alternativo all’allora dominante Angular JS, che era di proprietà di Google.

Le applicazioni scritte in React sono innumerevoli, e il successo di questo ambiente di sviluppo è dovuto a diverse funzionalità che hanno semplificato la gestione di logiche che richiedevano la stesura di codice JavaScript complesso e di difficile manutenzione. Si pensi semplicemente a quanto sia diventato veloce creare un videogioco per il web grazie alla gestione degli stati incorporata nei componenti React.

APP mobile

L’altra milestone nella concezione dell’interfaccia utente è stata dettata dal passaggio alle applicazioni native per smartphone, che hanno ottimizzato in modo estremo l’adozione del pattern MVC o MVVM. Le APP per cellulare sono disegnate per ottenere una perfetta osmosi tra dati e interazione utente, in modo da ottimizzare diversi fattori legati al particolare ambiente di fruizione, come la velocità di trasmissione e il consumo della batteria.

L’importanza della fase di design della cosiddetta UI/UX (User Interface e User Experience) è stata poi ulteriormente elaborata da Apple con il suo innovativo ambiente SWIFT, che ha introdotto uno stile di sviluppo focalizzato sull’esperienza e l’aspettativa dell’utente, arrivando a strutturare il ciclo di vita di una APP come un vero e proprio storyboard per accompagnare l’utente in tutti gli stage dell’esperienza interattiva.

Quale front end scegliere

La varietà di tecnologia front end disponibili può generare una certa confusione nel decidere quale sia la migliore da adottare per le proprie esigenze. Dipende molto dallo scopo della vostra applicazione. Se feature come l’aggiornamento dei dati in tempo reale con AJAX o la responsività sono ormai aspettative imprescindibili, meno ovvia è la valutazione se l’adozione di un flusso a stati possa offrire un valore aggiunto ai nostri utenti oppure rivelarsi solo una complicazione superflua.

Importante è anche valutare il numero di utenti che utilizzeranno la nostra applicazione: se si tratta di qualche decina di utenti aziendali, un sito web in React potrebbe essere una soluzione adeguata, mentre se prevediamo migliaia di connessioni, forse una APP nativa potrebbe rivelarsi di più semplice distribuzione e manutenzione.

Il vantaggio delle numerose tecnologie oggi esistenti è proprio la possibilità di poter scegliere quella più adatta alle esigenze della propria organizzazione, in modo da dare un valore aggiunto all’utente e ottenere un ROI sull’investimento di tempo e capitale speso per la realizzazione di una soluzione proprietaria.

Pablo Cerini

Giornalista

Sviluppatore software, cresciuto nel mondo ERP, ma appassionato del mondo DEV a 360°. Affascinato dalla statistica e dal machine learning, con un chiodo fisso per le candele giapponesi

Articolo 1 di 5