Flash Usability

Usabilità e Flash sono stati spesso considerati concetti in antitesi. Ad alimentare i contrasti ha partecipato un articolo di Jakob Nielsen, “Flash 99% Bad“, in cui il “guru” dell’usabilità indica Flash come uno dei responsabili per la costruzione di siti web non usabili.

L’articolo è servito se non altro per interrogare la comunità di sviluppatori web riguardo alla possibilità di realizzare animazioni Flash che siano accattivanti, ma senza penalizzare i visitatori del sito.

I due manuali che presentiamo cercano di fornire una risposta affermativa alla domanda, indicando le metodologie e le soluzioni da adottare per aumentare l’usabilità delle animazioni Flash.

Flash 99% Good – Mc Graw Hill

Questo manuale fa il verso all’articolo di Jakob Nielsen e suggerisce come l’usabilità o meno delle applicazioni Flash sia frutto molto spesso di scelte progettuali.

Secondo gli autori, fino a quando i designer vedono Flash solo come uno strumento per scatenare semplicemente il loro ego, è facile perdere di vista l’utente e di conseguenza realizzare interfacce enigmatiche, difficili da usare e quindi poco usabili.

Tra gli argomenti del manuale:

  • i pro e i contro all’uso di Flash (pro: navigazione, animazioni, stampa, controllo del layout; contro: immagini bitmap, alto numero di versioni disponibili e quindi di plugin)
  • conoscere il pubblico e gli obiettivi (il sito deve generare guadagni, considerazioni sui tipi di connessione e risoluzione)
  • la navigazione (i tipi di navigazione, come realizzare una navigazione usabile in Flash)
  • il contenuto (testo e tipografia, quando usare le animazioni, il posizionamento del contenuto, le tecniche di stampa, le form in Flash)

Il manuale, nel motivare le proprie soluzioni, propone molti esempi di siti realizzati in Flash.

Non si tratta però di una guida d’uso: non troverete una linea di codice.

Flash 99% Good ¤ di Kevin Airgid, Stephanie Reindel ¤ lingua inglese ¤ 220 pagine ¤ prezzo 53.21 euro ¤ edito da Mc Graw Hill Osbourne

Sito del manuale [nuova finestra] (risorse e suggerimenti)

Skip Intro Macromedia Flash Usability and Interface Design – New Riders

L’approccio di questo manuale è molto pratico: sono introdotte alcune tecniche per migliorare l’accessibilità delle applicazioni Flash partendo da 3 casi studiati appositamente per il testo.

A corredo di ogni tecnica ne è riportato e commentato il codice, permettendo così di realizzare librerie di oggetti da includere all’interno delle proprie animazioni.

I casi di studio riguardano la visita virtuale ad un museo, un negozio di e-commerce e il sito di un’azienda software.

A ciascun sito è associata una “persona”, un visitatore tipo con le sue aspettative e le sue richieste, che influenzerà le scelte di progettazione.

Le principali soluzioni impiegate sono:

  • componente che avvisa l’utente sulla percentuale di animazione che deve essere ancora caricata, consentendo nel frattempo di visualizzare altre informazioni
  • menù che scorrono solo per la vicinanza del mouse e senza click
  • separazione delle azioni principali da quelle di secondaria importanza
  • oggetto per variare l’icona del mouse al verificarsi di determinati eventi
  • “linguette” (tab) per aumentare il contenuto informativo dell’animazione
  • ricerca all’interno dell’applicazione
  • menu a discesa a più livelli
  • tool tip che compaiono evidenziando un elemento

Il codice è ampiamente commentato e frequenti note motivano le scelte architetturali degli autori.

Skip Intro – Macromedia Flash Usability and Interface Design ¤ di Michelangelo Capraro, Duncan McAlester ¤ lingua inglese ¤ 250 pagine ¤ prezzo 45.00 dollari ¤ edito da New Riders

Sito del manuale [nuova finestra] (risorse, articoli e suggerimenti)

Suggerimenti per un Flash accessibile

  1. Ci parli di lei [Risposta 1]
  2. Di quali argomenti si occupa il manuale? C’è un sito collegato al libro? [Risposta 2]
  3. Qual è il problema di Flash e perchè ci sono così tanti esperti di usabilità che si scagliano contro il suo uso? [Risposta 3]
  4. Qual è la soluzione? Come possiamo migliorare l’usabilità in Flash? [Risposta 4]
  5. Parliamo di accessibilità. È possibile costruire siti Flash accessibili alle persone disabili? [Risposta 5]

Ci parli di lei

Sono un interactive designer che lavora in questo campo fino dai tempi di Mosaic. Precedentemente mi sono occupato di progetti multimediali (Cdrom, chioschi e interfacce grafiche per la televisione interattiva e il web).

Di quali argomenti si occupa il manuale? C’è un sito collegato al libro?

Il libro parla di come raggiungere il giusto equilibrio tra usabilità e design quando si costruisce un sito web con Flash. Il sito del manuale è http://www.flash99good.com/

Qual è il problema di Flash e perchè ci sono così tanti esperti di usabilità che si scagliano contro il suo uso?

Il problema non è propriamente Flash. Il problema è rappresentato dal modo con cui gli sviluppatori costruiscono i siti Flash.

Troppo spesso i progettisti Flash pensano che il “pensare tosto” venga prima dell’usabilità. L’immagine e la funzione possono vivere insieme serenamente, si tratta solo di impratichirsi.

Il problema più grande è che molti sviluppatori web hanno un passato di artisti e non possiedono solide basi nel campo dell’usabilità. Più i siti Flash diventano complessi e più diventa importante per i progettisti capire l’usabilità. Molti “guru” dell’usabilità si sono scagliati contro Flash solo perché molti siti Flash sono difficili da usare.

Qual è la soluzione? Come possiamo migliorare l’usabilità in Flash?

La soluzione per migliorare l’usabilità di Flash è che gli sviluppatori studino le tecniche che migliorano l’usabilità di un sito. Ecco alcuni suggerimenti tratti dal mio sito, dove potete trovare degli esempi completi da scaricare.

Chi e cosa?

La formula per un sito di successo si basa su 3 semplici passi:

  • capire a chi è rivolto il vostro sito
  • definire l’obiettivo del sito
  • realizzare il sito perché soddisfi i due punti precedenti!

Stabiliti gli utenti e la tipologia di sito è tempo di definire qualche regola. Scrivete queste regole prima di cominciare con la progettazione. Tenete i vostri utenti ed obiettivi in mente mentre programmate la navigazione e i contenuti. Attaccate dei PostIt sul monitor per aiutarvi a ricordare gli obiettivi.

Se state lavorando per una grande azienda cercate di approfittare delle loro sue interne per capire quale è il pubblico del vostro lavoro. Usate queste informazioni per creare le regole del sito. Se vi trovare a lavorare con delle tempistiche strette e dei budget esigui potete comunque ottenere queste informazioni realizzando interviste con i potenziali utenti.

Abilitate il pulsante “back” o almeno cercare di imbrogliarlo

Si tratta di un’accortezza veramente elementare, eppure è una cosa che frustra gli utenti di un sito Flash. Le persone navigano per ore e la cosa che utilizzano di più nel browser è il pulsante di “back“. Tuttavia, appena navigano del contenuto in un sito Flash, il pulsante di back ha l’unica funzione di portarli fuori dal sito, o, ancora peggio, lo sviluppatore toglie quell’interfaccia amichevole, indovinata e familiare dal browser, e con essa il pulsante “back“.

Approfondimento: Note di Macromedia su come costruire un pulsante di back personalizzato

Approfondimento: Il soprendente trucco di Robert Penners per il pulsante di back

Ridatemi la rotella del mouse!

Odio, ripeto, odio quando entro in un sito Flash e scopro che la rotellina del mouse è inutilizzabile! Se avete chilometri di testo nella finestra, lasciate che sia il browser a gestire lo scrolling. In questo modo è possibile utilizzare la rotellina del mouse senza dover continuamente cliccare sulle frecce. Questo può essere risolto predisponendo una finestra popup separata per il testo lungo.

Briciole di pane

No, non sto parlando di quelle sotto il vostro sofà! Se avete un sito che si espande in profondità con molti sottolivelli, creare una navigazione a briciole di pane (breadcrumb) all’inizio della pagina così che gli utenti abbiano modo di sapere dove si trovano nella gerarchia del sito. Create le etichette in modo che siano cliccabili, così che gli utenti possano ritornare alla pagina dalla quale sono venuti.

I font espressi in pixel e con anti-alias sono difficili da leggere

Fatemelo ripetere: i font espressi in pixel e con anti-alias sono difficili da leggere.
Sono troppo piccoli, anche per chi non usa gli occhiali!

Approfondimento: Tutorial “How to Keep Fonts Clear” da FlashKit.com

Ma il mio cliente vuole un’introduzione animata!

I clienti continuano a chiedermi di utilizzare questa tecnica della “vecchia scuola”. Molti non si rendono conto di quanto sia una pratica di web design ormai obsoleta (come i separatori di pagina orizzontali e animati).

Comunque, ci pagano il progetto e quindi dobbiamo eseguire. Una soluzione a questo problema è di inserire l’animazione in una finestra opzionale insieme a dei pulsanti di “play” e di “stop”. In questo modo non forzate gli utenti a scaricare un’animazione che non hanno richiesto, e li fate felici. Gli utenti possono avere un’anteprima dell’animazione, ma non sono obbligati a scaricarla tutta.

Spezzate i filmati Flash in più parti

Fate così. In questo modo gli utenti non vedranno degli eterni messaggi di caricamento (“loading…”) e l’animazione Flash sembrarà caricarsi più in fretta. Ricordati di provare le animazioni con una connessione a 56K. Se per qualche motivo dovete far attendere i vostri utenti, cercate di tenerli occupati: dategli un gioco o fategli qualche domanda di intrattenimento.

Consentire l’aggiunta ai preferiti

Quattro utenti su cinque utilizzando i bookmark per organizzare i loro siti preferiti. Spezzare il contenuto di un’animazione Flash in più parti consente agli utenti di aggiungere tutte queste sezioni ai preferiti. Un’altra opzione possibile è di abilitare il “bookmark button” all’interno del vostro contenuto Flash.

Realizzare degli elementi dell’interfaccia grafica che siano standard

Se progettate qualcosa come le form, assicuratevi che assomiglino a delle form. Assicuratevi che i text box lascino intendere che potete scriverci dentro del testo. Abilitate la possibilità di passare da un campo all’altro con il tabulatore. Realizzate gli altri elementi dell’interfaccia, come le scroll bar, in modo che si avvicino il più possible a quelle del sistema operativo.

Approfondimento: Note tecniche sull’uso della tabulazione nelle form

Verificate il vostro sito

Ok, avete realizzato un buon prodotto. Ora verificate il sito su tutte le possibili piattaforme usate dai vostri utenti. Osservate le persone mentre usano il sito. Hanno difficoltà a trovare quello che gli interessa? Le cose non sono abbastanza ovvie? Le animazioni o gli ActionScript sono lenti? Verificate fin dall’inizio e verificate spesso o preparatevi a pagarlo a caro prezzo.

Approfondimento: Suggerimenti sull’usabilità dal sito Macromedia

Parliamo di accessibilità. È possibile costruire siti Flash accessibili alle persone disabili?

Macromedia ha realizzato un’ottima documentazione su come costuire siti Flash per persone disabili.

I nemici dell’usabilità

In un suo recente articolo intitolato “Enemies of Usability“, Peter Morville (autore, insieme a Louis Rosenfeld, di Information Architecture for the Word Wide Web), analizza i motivi che conducono alla realizzazione di prodotti e servizi non usabili.

Tra i nemici dell’usabilità ci sono:

  • l’ignoranza di chi non ha le competenze necessarie
  • il profitto, che fa accantonare i buoni propositi di realizzare prodotti usabili

Probabilmente nulla che non sapessimo di già, ma la conclusione di Morville è ottimista: l’usabilità sta conquistando la vittoria.