Una delle cose che mi aveva colpito qualche tempo fa, era il piccolo riquadro rosso che compariva in alto a destra nelle pagine di Gmail e che informava l'utente dell'avviato caricamento della pagina richiesta cliccando su qualche link (presente sia alla login sia sfogliando le varie email o compiendo altre operazioni).Niente di complesso, niente di trascendentale dal punto di vista tecnologico, ma l'idea di Google, che non avevo visto fino a quel momento in nessun'altra pagina era perfetta: dare all'utente l'idea che tutto fosse sotto controllo.
E questo era l'effetto che ne ricevevo: un senso di sicurezza!
Quel semplice messaggio, al posto di qualcosa di indefinito, mi parlava di un'attesa non casuale ma normale, programmata, controllata. Rispetto al resto delle pagine web dove non mi veniva mostrato nessun messaggio, nessun "Caricamento in corso...", quell'attenzione di Google subito dopo il mio click mi eliminava quell'imbarazzo dell'aspettare senza sapere quanto e senza capire a volte cosa stesse veramente accadendo o, peggio ancora, senza capire se stava accadendo qualcosa o se fossi incappato in qualche errore. In pratica, quel piccolo accorgimento non faceva più scattare nella mia testa le classiche domande che partono automaticamente quando il caricamento di una pagina, dopo un nostro click, risulta particolarmente lento - "ma la rete va? Funziona?".
Oggi molti servizi web-based hanno seguito la stessa scia e non solo Gmail utilizza questo semplice sistema per informare l'utente che la sua richiesta è in elaborazione.
Dunque, come poter implementare qualcosa di simile da sfruttare nelle nostre applicazioni web-based?
Riprodurre un effetto simile a questo non è affatto difficile: con un semplice javascript ed un div nascosto, si può eguagliare - o anche personalizzare a nostro piacimento - il messaggio di notifica dell'elaborazione in corso rendendo la nostra pagina web - o la nostra applicazione web-based, che dir si voglia - molto piacevole per la navigazione e fornendogli un tocco in più di professionalità che può fare la differenza agli occhi di chi la utilizza.
Ecco un semplice esempio (↗). Analizzando l'HTML notiamo al suo interno:
➜ la funzione javascript che mostra il messaggio nel momento opportuno (ShowContent());
➜ l'elemento div all'interno della pagina che contiene il messaggio da mostrare fin quando non viene caricata la pagina successiva;
➜ un link che richiama la funzione prima di ridirezionare verso la pagina desiderata.
Con poche mosse abbiamo creato qualcosa di efficace e funzionante, di sicuro gradimento.
Nessun commento:
Posta un commento