Grazie alle evoluzioni e sperimentazioni continue, possiamo trovare la “linguetta” giusta per svariati utilizzi.

Alcuni esempi:

• - Suddivisione di contenuti per argomenti (http://www.gruppocarige.it/grp/carigesgr/jsp/fondi_comuni_tipologia.jsp?cod=36&tipologia=1)
• - Flussi grafici (http://www.gruppocarige.it/ws/gruppo/jsp/index.jsp)
• - Utilizzo di un piccolo box per più argomenti (http://www.fintyre.it/)
• - Slide show di immagini con thumbnails

Inoltre, grazie all’utilizzo dei frame work di JavaScript come jQuery, MooTools, Prototype, possiamo sbizzarrirci nei più svariati effetti grafici.

Alcuni esempi:

• dimensioni dei box di contenuto fissi o variabili
• effetti di fade in e fade out
• effetti di zoom
• effetti sui background
• effetti sui bordi
• effetti di comparsa da parti differenti dello schermo
• effetti di scorrimento

Gio

• Utilizzo di elementi che identificano immediatamente l’appartenenza di cio’ che si vuole comunicare attraverso texture che ricordano il contesto del posizionamento del cliente
•  Suddividere il layout con linee immaginarie per dare un’impaginazione che segua una logica di navigazione
•  Posizionare gli elementi fondamentali (logo e menu) nel loro spazio convenzionale
•  Utilizzare testi esplicativi per rafforzare le immagini
•  Essere sempre chiari su cio’ che si vuole comunicare
•  Rendere alcuni elementi interattivi per coinvolgere maggiormente l’utente creando affordance su di essi
•  Utilizzare immagini con focus sul soggetto senza sfondi troppo ampi che possano distrarre l’utente
•  Tenere un uniformità tra i font utilizzati sia grafici che testuali
•  Motivare l’utilizzo di ogni colore

Ultimo consiglio, ma forse il più utile, confrontarsi sempre con lo sviluppatore prima di presentare la bozza al cliente.

Gio

Che si fa?
- organizziamo gerarchicament le informazioni ricevute (www.netvibes.com)
- tracciamo le nostre abitudini (Google reader) per capire cosa è superfluo in reatà per noi
- pensiamo che è meglio sapere poco e bene che troppo e male!

Fede

Tag cloud

Personalmente nei siti tecnici che visito spesso mi capita di trovare i Tag clouds messi a disposizione dei gestori e di usarli perché mi permettono di selezionare velocemente tutti i contenuti correlati alla voce di mio interesse. Mi sembra che mi diano la possibilità di raggiungere velocemente ed efficacemente i miei scopi di navigazione.

Ho notato, proponendo questa soluzione ai nostri clienti, che molti non la pensano così, anzi per i non addetti ai lavori il significato di questa nuovola di parole di diverse dimensioni sembra essere poco chiaro e intuitivo.

Dunque i tag sembrerebbero uno strumento di navigazione efficace per un certo target di persone nel contesto di siti con una grande mole di informazioni.

Questa analisi secondo me potrebbe cambiare nel contesto di una Intranet dove si può iniziare al significato e uso dei tag i singoli utenti per poi lasciare che siano loro a taggare i documenti di loro interesse e creare quindi una forma di navigazione condivisa e partecipata. In questo modo non solo si rispetta la vera natura del tag ma si risolve anche uno dei problemi più spinosi delle Intranet ovvero ritrovare i documenti che realmente ci interessano nella mole di informazioni aziendali.

Questa è solo una mia sensazione che nei prossimi mesi provero a corredare con dati certi.

Silvia

Click hand

Se ci si occupa di usabilità nel web prima o poi si avrà a che fare con l’annoso problema del “clicca qui”.

Dal punto di vista dell’accessibilità e dell’usabilità usare le parole “clicca qui” per i link è profondamente sbagliato perchè non danno alcuna indicazione sulla destinazione del link. Quando guardiamo velocemente una pagina ci soffermiamo sui titoli e sui link: leggere una serie di clicca qui non ci aiuta a capire di cosa parla la pagina. La situazione diventa ancora più complessa per un utente non vedente che naviga il sito con un browser vocale.

Eppure incontrerete sempre un cliente che vi chiederà di sostituire i link con il fatidico “clicca qui”. Se nonostante le spigazioni sul perché questa pratica sia deleteria il cliente persevera che fare? Forse l’unica risposta è: scendiamo a compromessi! Aggiungiamo al clicca qui la frase che indica la vera azione ad es.: “Clicca qui per registrarti”, in questo modo faremo il cliente felice e salvaguarderemo usabilità e accessibilità, avete altre soluzioni?

Silvia

Precedentemente avevo pubblicato un post riguardo BrowserShots che genera screenshot di una pagina web in più di 80 versioni dei più diffusi Browser su Windows, Linux, BSD e Mac, servizio sicuramente molto utile, ma BrowserLab offre di più; la sua principale caratteristica oltre alla velocità nel visualizzare gli screenshot è sicuramente la vista onion skin, che consente di visualizzare gli screenshot sovrapposti dei diversi browser.

Lato server, BrowserLab utilizza la tecnologia di virtualizzazione, lato client utilizza invece Flash Player 10: la tecnologia Flash viene impiegata per  visualizzare, all’interno di una finestra suddivisa in due parti, il risultato del rendering di una pagina web eseguito su due differenti browser. Le due sotto finestre possono essere affiancate o sovrapposte per consentire di confrontare al meglio le eventuali differenze tra un browser e l’altro.

Adobe browserLab

Peccato che il servizio è destinato a diventare a pagamento, mentre per i primi 5000 iscritti Il tool resterà gratuito fino alla fine del programma di testing pubblico.

Personalmente mi domando: se la strada è quella dell’adesione dei vari browser agli standard, perché continuano a rilasciare tools per testare il proprio sito? La strada è veramente quella? Spero vivamente di si, ritengo assolutamente sbagliata e anti produttiva quest’ossessione maniacale della perfezione al pixel.

Bene

Si tratta di una postazione multimediale che attraverso dei pavimenti e dei totem interattivi interpreta il linguaggio naturale delle persone che vi interagiscono e fornisce indicazioni turistiche o informazioni partiche sulla città.

Le descrizioni sembrano molto semplici e intuitive bisognerebbe però verificare nella pratica quanti utenti capiscono immediatamente che non c’è più bisogno di toccare lo schermo perché l’interazione avviene semplicemente indicando il totem. Peccato tra l’altro che sul sito dell’aereoporto non ci sia nessuna notizia di questo servizio.

L’idea è comunque molto interessante e apre scenari futuristici che eravamo abituati a vedere solo nei film. Buona  attesa!

Silvia

Il sito in perfetto stile web 2.0 permette di interagire inserendo i propri consigli, taggarli con parole chiave  e suggerire tutorial o esempi relativi al consiglio proposto.
Inoltre il sito propone anche una suddivisione di tutti gli accorgimenti inseriti in tre livelli di apprendimento: beginner, intermediate e advanced e un sistema di votazione per decretare i consigli più votati.

Mi sembra una proposta originale e interessante per raccogliere idee, condividerle tra gli utenti e creare una guida utile e facile da consultare.  Speriamo che il servizio abbia successo e continui ad arricchirsi e magari ad aggiungere qualche altra features interessante in stile web 2.0.

Vale

*Carlo*

Un bravo sviluppatore web sa che Firebug è un estesione per Firefox che rente molto facile il debug delle nostre pagine web e ti permette di ottimizzare i tempi per fare delle modifiche evitando ogni volta di andare ad aprire direttamente il codice sorgente.

Non tutti sanno però che esiste una versione semplificata del mitico Firebug chiamata Firebug Lite, utilizzabile su browser come Internet Explorer, Opera e Apple Safari.

Firebug lite

Per poterlo utilizzare ci sono 2 modi: come chiamata Bookmark o come libreria Offline.

In modalità Bookmark bisogna aggiungere il seguente link nei preferiti:

javascript:var firebug=document.createElement(’script’);firebug.setAttribute(’src’,'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’);document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

Sarà possibile attivare Firebug Lite su qualsiasi sito Web e da qualsiasi browser. Questa è forse l’opzione più interessante, nonostante le funzioni siano davvero limitate.

In modalità Offline se stiamo sviluppando noi un sito Web, è possibile scaricare un pacchetto Javascript ed installarlo sul nostro Web! In questo modo possiamo usare Firebug Lite anche senza una connessione Internet ed in locale.

Sebbene non sia possibile editare il CSS degli elementi selezionati, Firebug Lite fornisce un meccanismo per editare il CSS. E’ una cosa simile a una console CSS da dove scrivete il vostro codice CSS e ne visualizzate il risultato.

Sul sito ufficiale sono descritte piccole modifiche che si possono apportare a Firebug Lite, chi ne fosse interessato può consultarlo al seguente indirizzo http://getfirebug.com/lite.html.

Bene

Silvia

Per  comprenderle meglio linko qualche post interessante dai blog che hanno contribuito a divulgarle e che ogni giorno si impegnano per far si che l’accessibilità in Italia non sia solo teoria:

Marco Bertoni nel suo blog  Semplicemente.org, riassumendo ci fornisce una versione chiara delle dodici linee guida e dei principi alla base delle WCAG2.0.  (secondo me da stampare e conservare)

Da Webaccessibile.org troviamo la prima bozza integrale di traduzione delle WCAG2.0. in italiano, uscita recentemente.

E infine dal blog di Roberto Scano, un’ interessante interpretazione delle linee guida,  portate in musica offrendoci addirittura la canzone ufficiale in versione rap delle WCAG2.0., un modo alternativo per farle conoscere  e per far capire quante persone si impegnano affinchè ci sia diffusione sempre più consapevole dell’esigenza di  una cultura dell’accessibilità.

Vale

Il problema della compatibilità con i browser, infatti, riguarda tutti i siti Internet e nasce quando una pagina web o qualsiasi altra risorsa condivisa in rete viene sviluppata senza tener conto delle funzionalità presenti nei diversi browser, nelle diverse versioni degli stessi e nelle diverse piattaforme che li supportano.

Bisogna cercare di  adottare determinati accorgimenti in termini di linguaggi di markup (XML, XHTML, HTML ecc), fogli di stile (CSS, XSLT ecc), scripting lato client (javascript/ajax o altri) o eventuali altri formati di uso frequente sul web (Flash, Java), al fine di permettere all’utente che naviga di visualizzare e fruire i contenuti senza differenze dipendenti dal browser che utilizza.

Io la vedo come una ricerca, una ricerca del codice perfetto; a volte si rischia così di trasformarla in un’odissea, in una ricerca estenuante di trucchi e soluzioni alla miriade di bug che affliggono i browser presenti nel mercato.

Ma come fare a testare il nostro sito web su tutti i browser esistenti nel mercato?
Bè , esistono svariati programmi che ti permettono di testare il sito web, ma quello che mi ha colpito di più girando in rete è stato Browsershots.

Browsershot è un servizio web, gratuito, che permette di visualizzare un sito in 50 web browser diversi, di tutti e 4 i maggiori sistemi operativi (Linux, Windows, Mac OS X, BSD).
Basta inserire l’url del nostro sito web nell’apposito spazio , selezionare i browser con cui fare il controllo, addirittura puoi decidere di selezionare le dimensioni dello schermo, la profondità di colore, selezionare se sono presenti script  java e se è presente un animazione flash.

Avremo davanti a noi una serie di thumbnails: una per ogni browser scelto.
Se clicchiamo la thumbnail, ingrandiremo lo screenshot e otterremo informazioni  sul computer, sul browser, e sul rendering in generale. Cliccando invece sullo screenshot avremo l’immagine a grandezza massima.

Peccato che il confronto avvenga solo con degli screeshot e non si possa navigare all’interno dei vari  browser, ma chissà che in un futuro non venga sviluppato un modo semplice e veloce per testare i nostri siti web interagendo con i vari browser.

Quanto dovremmo ancora soffrire per raggiungere il codice perfetto?
Bene

Per fortuna il problema è presto risolto in quanto la spiegazione ha basi molto solide: se nel nostro bellissimo design utilizzassimo dei titoli, testo o menù con font particolari o comunque non installati sul pc di chi visita le pagine, lo stesso font verrebbe sostituito con uno compreso nel set di font del pc utente andando così ad impattare sul risultato finale.
A questo punto utilizzeremo fonts particolari solo per elementi che potranno esser ritagliati come immagini (banner, box, etc) mentre i contenuti saranno inseriti con fonts che sicuramente sono installati su la maggior parte dei pc, mac, linux machine come Arial, Tahoma, Verdana, Trebuchet, Georgia,Courier.

Per chi volesse estendere il set di fonts ecco un elenco di risorse ove attingere gratuitamente:

Creamundo
Urban Fonts
1001 Free Fonts

Francy

Sul sito di UX matters ci viene in soccorso una matrice dei valori che permette di incrociare i bisogni dell’utente, gli obiettivi di business, le funzionalità proposte e la misura dei risultati. Questo non sostituisce il lavoro con l’utente ma permette di incrociare sulla carta, in maniera più veloce di quanto accada per esempio con i modelli mentali, i bisogni e le proposte.

Anche quando non sono stati preventivati motli giorni per queste attività ci si può prendere qualche ora e riflettere, con questa matrice davanti agli occhi, su cosa ci ha chiesto il cliente e cosa intendiamo offrire in risposta. Attività molto meno banale di quanto sembri!

In questo modo si ottiene un deliverable che, non solo serve al team di sviluppo per costruire un’applicazione che risponda ai bisogni reali dell’utente, ma che può tornare utile al PM per la misurazione degli obiettivi di business e dei risultati ottenuti. E se il PM è felice magari la prossima volta ci dedicherà qualche ora in più nel budget!

Silvia