Ora InfoStud non fa più schifo [Aggiornato]
Come ho ridisegnato l’app dell’Università più grande d’Europa
9 CFU — Material Design
Se avete cambiato un telefono Android nel corso degli ultimi tre anni vi sarete resi conto del rinnovamento che ha subito il sistema operativo dal punto di vista grafico (tralasciando quello prettamente computazionale): l’interfaccia è molto più pulita, colori più chiari e brillanti. Le applicazioni, pur essendo molto diverse tra loro, ci donano un senso di uniformità che è sempre mancato in Android quando è invece sempre stato chiarissimo, ad esempio, in iOS (prima con lo scheumorfismo di Scott Forstall, poi con il minimal design di Jony Ive che si vede quasi ovunque da qualche anno).
Nel video qui sotto, Matìas Duarte, spiega come a Google si fossero accorti che i design di interfacce diverse come computer e smartphone stessero divergendo sempre di più creando solo inutile confusione e che, con l’arrivo di nuovi schermi intelligenti e diversi come quelli di smartwatch, tv e automobili, sarebbe solo aumentata. Con il Material Design, dunque, non hanno voluto semplicemente dare nuova vita ad Android ma dare la possibilità a chiunque di creare qualcosa di uniforme, intelligente e chiaro che potesse funzionare su qualsiasi dispositivo senza confondere l’utente.
Si è provato a pensare ai pixel che compongono le immagini sui nostri schermi come a qualcosa di fisico, quasi vivo, che possa cambiare forma, muoversi, proiettare un’ombra come qualcosa di reale, tangibile, come fosse un foglio di carta, un oggetto che chiunque conosce.
InfoStud
Se siete studenti della Sapienza avrete di certo dovuto usare InfoStud per gestire i vostri esami, le tasse e un sacco di altre cose. Da quando mi sono iscritto all’università ho già assistito ad un aggiornamento grafico dell’interfaccia web che è stata cambiata in favore di una più chiara, minimale (un punto a Jony Ive) e vagamente più usabile nonostante sia spesso in manutenzione.
Nel 2017, però, non esiste che un servizio non sia accessibile anche via smartphone, preferibilmente tramite un’app (visto che sappiamo tutti che le webapp fanno abbastanza schifo) e infatti La Sapienza rientra nella lista delle università italiane che offre ai suoi studenti la possibilità di usufruire dei servizi della propria piattaforma digitale anche su smartphone, tramite l’app InfoStud Mobile (su iOS, Android e — il DeadManWalking — Windows Phone).
1 CFU — L’app di InfoStud oggi
8 Luglio 2015. Questo è ciò che si legge sul Play Store nella pagina dell’app InfoStud Mobile alla voce “Aggiornata”. Negli ultimi due anni, dunque, non c’è stato alcun miglioramento del servizio mobile della più grande università d’Europa. L’app è rimasta sempre al limite dello scarno, non essendo presenti tutte le funzioni della versione web e l’interfaccia non solo non è stata aggiornata secondo le linee guida del Material Design (nonostante tra la sua presentazione e l’ultimo update dell’app fosse passato poco più di un anno) ma risulta non seguire nemmeno le linee guida delle due precedenti release di Android (KitKat e Ice Cream Sandwich) che adottavano lo stile Holo.
Quante volte avete avuto problemi ad accedere ad InfoStud?
Stiamo parlando, dunque, di un design vecchio di almeno 6 anni (Ice Cream Sandwich e lo stile Holo vennero introdotti nel 2011) che, nel mondo della tecnologia, come sappiamo, si contano come gli anni per i cani. Un design più che obsoleto è sintomo di un’applicazione non curata, di un servizio scadente (quante volte avete avuto problemi ad accedere ad InfoStud?) e di un’università che solo apparentemente sembra preoccuparsi del mondo che fuori corre e si aggiorna.
(Leonardo da Vinci)
Nell’immagine qui sopra, che mostra uno dei segnali di errore d’accesso dell’app, potete vedere uno degli esempi della noncuranza di chi l’ha disegnata: il triangolo di pericolo risulta fuori asse rispetto al testo, storto –rispetto al piano del testo — in tutti i suoi lati (che risultano anche diversi tra loro), con i due vertici (sinistro e superiore) mozzati e con il “!” assolutamente non centrato nel triangolo.
Genesi
1 Settembre 2017. Aggiorno il mio Nexus 5X all’ultima versione di Android, la 8.0 Oreo, ripristino le applicazioni (InfoStud compresa) e provo ad accedere per prenotare un esame: l’app non funziona più. Mi viene presentato l’errore del paragrafo precedente, provo ad accedere con altri account ma il risultato non cambia. Il problema è l’app, visto che dal computer non ho problemi ad accedere: evidentemente dopo l’aggiornamento ad Oreo non è più compatibile a meno che qualcuno degli sviluppatori non decida, a distanza di più di due anni, di metterci mano.
A quel punto contatto l’assistenza tecnica dell’applicazione seguendo il link presente sul Play Store e mi viene risposto che non gestiscono loro l’app nonostante messaggi **Importanti** come quello di inizio paragrafo sembrano indicare proprio il contrario, ma magari non capisco l’italiano. L’invito ad accedere da pc fisso, poi, è stato davvero il tocco di classe.
L’app di InfoStud che vorrei
Decido allora di mettere in pratica un’idea che avevo avuto già altre volte nel corso degli ultimi tre anni: ridisegnare l’app di InfoStud da zero secondo le regole del Material Design, cercando di renderla più comprensibile e usabile e facendo il lavoro di persone che, in teoria, dovrebbero essere pagate per far funzionare e tenere aggiornata l’applicazione ufficiale. Parto quindi da:
1 CFU — L’icona
Dopotutto l’icona è una delle parti fondamentali di un’applicazione e quindi mi sembrava il punto migliore da cui partire. Innanzitutto ho ammorbidito la forma passando da uno spigoloso quadrato preso e buttato lì ad un più dolce cerchio — lo standard di Android, dall’anno scorso — a cui ho dato profondità con l’aggiunta dell’ombra inferiore. Lo stemma della Minerva resta intatto mentre le cifre vengono “sopraelevate” in pieno stile Material Design. Per l’icona ho preso ispirazione dall’icon pack Kiwi UI di Fraom, il migliore in assoluto. Just sayin’.
3 CFU — Schermata di accesso
Dopo l’icona, ovviamente, sono passato alla schermata di accesso. Come prima cosa sono stati rimossi quei 3 pallini totalmente inutili dalla barra di navigazione che è diventata semi-trasparente come la barra di notifica. Dopodiché ho cambiato il logo della Sapienza con quello ufficiale di InfoStud (visto che di questo stiamo parlando) e sostituito quell’orrendo punto interrogativo con una più esplicativa scritta “Supporto” in basso. Per quanto riguarda la schermata di errore ho optato per la “scheda” a comparsa dal basso, molto più chiara, meno invasiva e soprattutto senza quello schifo di triangolo.
3 CFU — Menù
Sono poi passato al “Menù”, se così poteva essere definito quell’orrendo insieme di icone esageratamente grandi che neanche il Salvavita Beghelli, sostituendo le due pagine con un hamburger menu (essendo ormai lo standard di Android da anni). Mi sono preso la libertà, poi, di inserire la voce “Impostazioni” nella speranza che insieme al restyling grafico qualcuno si decida ad implementare qualche altra opzione.
12 CFU — Interfaccia
Per sostituire i bottoni da telefono per anziani dell’attuale interfaccia ho dovuto pensare a come organizzare quella della nuova applicazione: tra le varie opzioni che offre il Material Design ho optato per una barra inferiore con le quattro opzioni principali — Profilo, Esami, Prenotati e Ricerca — a portata di dito come accade su Google Foto.
3 CFU — Profilo
Nella versione in Material Design di InfoStud il Profilo ha un ruolo centrale nell’applicazione rappresentando la prima schermata che si presenta all’utente dopo l’accesso. L’interfaccia è più pulita ed è impreziosita dal logo della Minerva nell’header dove sono presenti anche Nome, Cognome e Matricola. Tutte le informazioni che non sono visibili nello screenshot qui sopra, ovviamente, sono sempre accessibili nella schermata semplicemente scorrendo verso l’alto.
3 CFU — Esami
Alla schermata Esami non solo ho dato un nome, in alto a sinistra, una bella ripulita grafica e un po’ di ordine ma mi sono anche permesso di inserire, in alto a destra, il pulsante dei filtri in modo tale da poter ordinare gli esami, ad esempio, in base ai crediti, al voto o altro. Chissà che qualcuno non decida di implementare una cosa così semplice in qualche futura versione dell’app.
3 CFU — Esami prenotati
Anche per quanto riguarda gli Esami prenotati c’è stata una pulizia generale e adesso la sezione risulta più leggibile e abbandona per sempre quei due pallini inferiori ad indicare le due pagine per la lista di esami e per il calendario utilizzando invece le due tab superiori.
3 CFU — Ricerca
La pagina di ricerca è stata quella che ha subito meno stravolgimenti: aumentano ordine e leggibilità e compare anche qui il pulsante per filtrare e ordinare i risultati di ricerca.
9 CFU — Statistiche
La pagina delle statistiche è quella che ha subito lo stravolgimento maggiore (e vorrei ben vedere!). Accessibile dal menù laterale, la pagina statistiche è stata totalmente ripensata, oltre che ridisegnata: la nuova schermata è singola, verticale e a schede e sparisce, per fortuna, la rotazione obbligatoria dello schermo figlia di non si sa quale mente malata. Il FAB (Floating Action Button) in basso a destra, quando premuto, fa comparire — scorrendo dal basso — la scheda Aggiungi esame. Qui, come nella vecchia applicazione, è possibile aggiungere esami non ancora certificati inserendo il nome della materia, il voto e i crediti i cui slider sono stati rinnovati andando ad aggiungere un’animazione in Material Design (visibile in fondo a questa pagina) davvero piacevole in cui il numero compare nell’indicatore al momento dello scorrimento, senza correre il richio di oscurarlo con un dito.
Galleria
Conclusioni
XX xxxxxx 20xx [20 Ottobre 2018]. Alla fine di questo percorso da 38 CFU, con un minimo di lavoro e senza un background da grafico sono riuscito a rinnovare l’interfaccia dell’applicazione ufficiale della più grande università d’Europa: possibile che a distanza di più di due anni dall’ultimo aggiornamento non si riesca a metterci mano e renderla realtà? Dopotutto anche queste cose dimostrano quanto un’università sia davvero “grande”: chissà quando potrò mettere una data a questo paragrafo…
Se una cosa fa schifo, non posso dì che è bruttina — si crea delle illusioni — devo di’ che fa schifo! (semi-cit.)
Aggiornamento: a Ottobre 2018 sono stato contattato su Twitter da un ragazzo che mi diceva di aver lavorato a una versione Open Source dell’app ispirato da questo articolo. L’app si chiama OpenStud ed è disponibile qui. Nel frattempo è stata aggiornata anche l’app ufficiale di InfoStud ma non sto neanche a dirvi che questa è cento volte meglio.
