UX Camp 2010: il resoconto

Il racconto di quello che è successo al secondo UX Camp italiano: il barcamp sulla User Experience.

Come avevo annunciato, venerdì scorso ho partecipato all’UX Camp 2010, che quest’anno è stato organizzato all’interno della sede Dada di Firenze.

Dopo la prima esperienza fatta l’anno scorso le premesse erano ottime, e posso dire che sono rimasto pienamente soddisfatto della giornata trascorsa insieme agli altri partecipanti.

Continua a leggere UX Camp 2010: il resoconto »

UX Camp 2010 a Firenze

Il secondo barcamp italiano dedicato alla User Experience: 5 novembre 2010, presso la sede Dada.

Il prossimo Venerdì 5 Novembre si terrà a Firenze la seconda edizione dell’UX  Camp: un barcamp tutto italiano dedicato alla User Experience.

Vogliamo immaginare un mondo in cui il piacere per le forme e il culto della tecnologia avranno ceduto il passo ad una maggior sensibilità nei confronti della semplicità e dell’esperienza d’uso.

UX Camp Italia è aperto a tutti, progettisti e sviluppatori, lavoratori e studenti, appassio nati e professionisti, giovani e non. Venite a raccontarci le vostre espe­rienze, siete i benvenuti!

L’appuntamento è presso la sede Dada (Largo Annigoni 9/b) dalle 9.00 fino alle 18.30. I posti sono limitati e sono andati a ruba anche perché l’evento è totalmente gratuito, ma potete ancora provare a contattare su Twitter o via mail gli organizzatori e sperare che qualcuno disdica la propria partecipazione. Sono stati lanciati segnali confortanti a riguardo: potrebbero esserci ancora delle possibilità di entrare.

Per ogni altra informazione potete fare riferimento al sito ufficiale.

VoiceOver e non vedenti: un video

Una guida a VoiceOver destinata a chi ancora non conosce lo screen reader Apple, ed un video che ne mostra l’utilizzo.

VoiceOver è lo screen reader di casa Apple introdotto sui sistemi operativi della mela fin dalla versione 10.4. E’ installato anche su iPhone ed iPad, ed in questo articolo capirete come l’abbinamento lettore di schermo – touchscreen sia una soluzione molto comoda per chi ha delle difficoltà visive.

Questo articolo non vuole essere promozionale: vedere come si comporta un utente di screen reader con in mano un dispositivo touchscreen è sempre utile, soprattutto per chi si occupa di accessibilità. E’ fondamentale anche per avere un riferimento concreto al mondo reale: fa sempre bene studiare la teoria, ma soprattutto in questo settore è l’esperienza sul campo che fa la differenza.

Qualche giorno fa l’argomento è stato affrontato anche su Melablog: è interessante vedere come certe tematiche inizino ad acquisire la necessaria importanza.

Continua a leggere VoiceOver e non vedenti: un video »

WordPress: come aumentare il numero di risultati della ricerca

Tramite $query_string è possibile personalizzare a piacere il numero dei risultati della ricerca. Ecco delle applicazioni pratiche diverse dal solito.

Su WordPress c’è un parametro che decide per ogni pagina il numero di post da mostrare. All’interno del pannello di controllo, sotto Impostazioni – Lettura, esiste infatti la voce “Le pagine del blog visualizzano al massimo:” , che solitamente viene utilizzata per controllare il numero di post in homepage.

Questo parametro però non controlla solo il numero di post della home, ma limita anche il numero dei risultati della ricerca e le pagine corrispondenti al template archive.php (ad esempio la pagina delle categorie e dei tag).

Per modificare il numero di risultati restituiti (in questo caso 10) è sufficiente usare:

<?php query_posts($query_string.'&posts_per_page=10'); ?>

subito prima del loop:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

E’ fondamentale che sia presente il parametro $query_string per mantenere la query originale senza sovrascriverla, altrimenti vi verranno restituiti solo gli ultimi post invece dei risultati della ricerca.

In questo modo è possibile ad esempio avere un numero limitato di post sulla home del blog e 10-20 risultati sulla ricerca.

Altri usi di $query_string

Le query di WordPress possono essere personalizzate in altri modi, anche fuori dal classico loop. Se ad esempio in homepage volessimo mostrare due gruppi di tre post appartenenti esclusivamente a due diverse categorie possiamo scrivere:

<?php $my_query = new WP_Query($query_string.'showposts=3&cat=1&posts_per_page=3'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

[...]

<?php endwhile; ?>

e

<?php $my_query = new  WP_Query($query_string.'showposts=3&cat=2&posts_per_page=3');  ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();  ?>

[...]

<?php endwhile; ?>

Il parametro cat è fondamentale per indicare quale categoria mostrare (il numero corrisponde all’ID della categoria), mentre showposts e posts_per_page indicano quanti articoli visualizzare, anche nelle pagine successive alla prima.

Non capita tutti i giorni di avere a che fare con query diverse dal solito, soprattutto lavorando a semplici blog, ma in certe situazioni è bene sapere come poter personalizzare WordPress secondo le proprie esigenze. Se siete interessati ad altre personalizzazioni o volete condividere delle scoperte che avete fatto con WordPress lasciate un commento, potremmo approfondire il discorso.

Quando usare gli access key?

Usare gli access key non è un requisito fondamentale per un sito accessibile: in molte occasioni sono inutili e creano confusione.

Per molto tempo l’utilizzo degli access key è stato considerato un requisito fondamentale per un sito accessibile. Fornire delle scorciatoie da tastiera potrebbe a prima vista sembrare una soluzione intelligente, ma nella realtà dei fatti non è sempre così.

Come funzionano gli access key?

Associando ad un elemento di tipo a, area, button, input, label, legend e textarea l’attributo accesskey=”…” , è possibile indicare al browser una scorciatoia per raggiungere quell’elemento. Generalmente per utilizzare l’access key è necessario premere alt in combinazione con il tasto indicato.

I problemi degli access key

Il problema fondamentale è che non è mai stato definito uno standard su quali elementi di un sito debbano essere raggiungibili tramite access key. Considerando poi che non esiste nemmeno una regola su quali lettere utilizzare, il risultato è decisamente caotico.

Non solo un utente dovrebbe imparare per ogni sito degli access key diversi, ma potrebbe anche trovare dei conflitti con altre scorciatoie già definite dal sistema. Ogni browser infatti ha delle abbreviazioni predefinite per accedere ai menu (File, Modifica, ecc…), ed ognuno di loro si comporta in maniera diversa: in certi casi gli access key hanno la precedenza, in altri no.

Un altro fattore da considerare è che gli utenti utilizzatori di screen reader utilizzano molte altre scorciatoie, anche queste da aggiungere alla lista.

Inserire degli access key in una pagina non assicura quindi la possibilità di raggiungere velocemente determinati link, ma potrebbe aumentare la confusione. Se siete interessati ad approfondire il discorso, vi consiglio di leggere parte del capitolo 14 del libro “Accessibilità: guida completa” di Michele Diodati, dove questi problemi vengono descritti ampiamente. Il testo è di qualche anno fa ed alcuni esempi non sono aggiornati, ma è ancora oggi utilissimo.

Come fornire delle scorciatoie?

E’ comunque importante fornire dei metodi per muoversi all’interno di una pagina anche senza mouse. La soluzione migliore, ormai largamente diffusa, è quella di inserire degli skip link per saltare al contenuto principale di una pagina o al menu di navigazione. Solitamente queste scorciatoie sono posizionate ad inizio pagina, nascoste via CSS, e permettono a chiunque di andare immediatamente al contenuto desiderato.

Una soluzione di questo tipo è inserita anche nelle tecniche consigliate per adempiere al punto 2.4.1 delle WCAG 2.0.

La possibilità di utilizzare gli access key rimane, ma da requisito è passata a suggerimento: considerando i possibili problemi il mio consiglio è di trovare soluzioni alternative e non utilizzarli. Su questo sito ad esempio è presente uno skip link per saltare al contenuto, visibile anche premendo il tasto tab dopo il caricamento della pagina.

[foto di alcomm]

IE9 e HTML5

Uno sguardo alle nuove caratteristiche di Internet Explorer 9 ed alle funzionalità supportate di HTML5.

La nuova versione di Internet Explorer si preannuncia molto interessante per gli sviluppatori, viste le numerose modifiche introdotte ed i miglioramenti al motore di rendering.

Si potrebbe discutere a lungo sui ritardi nell’introduzione di novità già presenti da tempo sui browser concorrenti, ma al momento la cosa più importante è capire cosa cambierà nel prossimo futuro.

Il supporto di HTML5

Seguendo la working draft del W3C, queste caratteristiche sono già state presentate come supportate da IE9:

Inoltre sono state introdotte altre novità interessanti, come il supporto a SVG.

Guida per sviluppatori

E’ stato realizzato anche un documento molto ben dettagliato destinato agli sviluppatori. Si tratta della Beta Guide for Developers, dove si parla di CSS3, DOM, SVG e HTML5.

La guida finché il browser non sarà rilasciato potrà subire dei cambiamenti, ma già adesso è un utile punto di riferimento.

E le vecchie versioni di IE?

Quello delle versioni obsolete non è un problema da sottovalutare. E’ difficile infatti trovare versioni obsolete di Firefox o Chrome, mentre è cosa nota l’incredibile resistenza di Explorer 6. Proprio per questo motivo conviene sfruttare JavaScript, scegliendo tra due soluzioni:

  • ie7.js: consente di adeguare IE6 agli standard, aggiungendo anche il supporto alle immagini png trasparenti
  • Modernizr: una libreria che individua le funzioni supportate dal browser utilizzato, aggiungendo all’elemento html delle classi (per esempio .borderradius, .audio, .opacity…). Non aggiunge nuove funzionalità ai browser obsoleti, ma permette di individuarne le mancanze e gestirli in maniera diversa.

Qualsiasi soluzione decidiate di adottare, è bene considerare le conseguenze: abbandonare il supporto a IE6 ormai non è una scelta sbagliata, ma significa escludere comunque una parte di utenti. Il mio consiglio è di fare le dovute considerazioni a seconda del target del vostro sito: se vi rendete conto che gli utenti di Explorer 6 sono ancora numerosi, un file JavaScript potrebbe salvarvi.

Blogfest 2010: il racconto

Cronaca di un fine settimana a Riva del Garda, tra blogger, barcamp e turisti tedeschi.

Blogfest 2010

Questo post vi risulterà probabilmente diverso dal solito, ma dopo il fine settimana trascorso alla Blogfest non posso fare a meno di raccontare la mia esperienza. Per una volta metto quindi da parte le mie vesti da web designer: è d’obbligo descrivere il weekend, i barcamp a cui ho partecipato e le persone che ho conosciuto. E’ soprattutto grazie a loro se mi sono divertito.

E’ stata la mia prima volta a Riva del Garda, e sinceramente ero scettico sulla scelta della location fino a quando non sono arrivato. E’ vero, è un posto scomodo, troppo a nord per chi abita da Firenze in giù (per me ci sono volute tre ore di macchina) e lontano anche da Milano: perché ritrovarsi lì? Perché in realtà Riva del Garda essendo un piccolo paese completamente pedonalizzato si presta benissimo all’organizzazione di eventi simili: c’è un grande palazzetto, una rocca per gli eventi più importanti (anche se il concetto è decisamente relativo) e varie altre location adatte allo scopo.

In una situazione così è inevitabile incontrare ad ogni angolo delle facce note: è tutto racchiuso in meno di un chilometro, e prima o poi vi troverete a chiacchierare con chiunque. Certo, non tutti hanno la faccia tosta di buttarsi a parlare con delle persone mai viste (compreso il sottoscritto), ma prima o poi non è difficile trovare il modo di rompere il ghiaccio. Se volete avere un’idea ancora più completa sull’atmosfera che si respira alla Blogfest vi consiglio di leggere questo bel post scritto prima dell’evento, che voleva essere una sorta di guida for dummies.

Parlando invece dei talk e dei barcamp, quest’anno devo ammettere che il GameCamp è stato sicuramente l’evento che mi ha interessato di più. Va bene parlare di twitter, blogging e social network, ma ogni tanto un po’ di distrazione fa bene. Kurai in questo senso è una garanzia, e così come aveva fatto all’IA Summit non ha deluso le aspettative con un talk veramente interessante. Se siete interessati al mondo del gaming tenete d’occhio Urustar ed Invaders’ Den, meritano la vostra fiducia. Tra l’altro ho avuto il mio piccolo momento di gloria riuscendo a vincere la breve partita a Cruel 2 B Kind: il premio erano le Moleskine Limited Edition di Pac Man. C’è chi è stato anche più fortunato, vincendo il torneo di New Super Mario Bros e portandosi a casa una Wii.

Gamecamp 2010

E tutti gli altri eventi? Il bilancio è positivo: sono riuscito ad ascoltare alcune discussioni interessanti, come Luca Sofri e lo staff de Il Post che raccontavano la loro esperienza, e durante le premiazioni dei Macchianera Blog Awards sono stato contento di vedere premiato Spinoza più volte. Non è stato tutto perfetto, qualcosa poteva essere organizzato meglio ed il sabato sera credo che la platea sia rimasta ibernata al freddo della Rocca per quasi 3 ore, ma il bilancio è comunque positivo.

Non so se il prossimo anno ripeterò l’esperienza, ma sono contento di avere partecipato. Mi ha fatto molto piacere rivedere degli amici e conoscere di persona chi non avevo mai incontrato prima, soprattutto chi leggo ogni giorno su FriendFeed. Mi dispiace solo di non essere riuscito a salutare tutti quelli che avrei voluto, ma c’è sempre tempo per rimediare: ci vediamo al prossimo evento.

Your Inspiration Magazine: si parla di accessibilità

Anche un mio articolo sul secondo numero di Your Inspiration Magazine: la rivista digitale per web designer.

Quest’estate è stata avviata un’interessante iniziativa made in Italy: è nata infatti Your Inspiration Magazine, una rivista digitale realizzata dai ragazzi di Your Inspiration Web.

Il primo numero è stato pubblicato per sondare il terreno e stabilire degli obiettivi: adesso che l’esperimento è stato avviato con successo si comincia a fare sul serio.

Mi fa molto piacere essere stato invitato a dare il mio contributo, ed è proprio per questo motivo che troverete anche un mio articolo tra quelli del numero di settembre. Il titolo è “Accessibilità: quali sono gli errori più comuni?”.

Vi invito a dare un’occhiata al progetto: in passato altri hanno provato a realizzare qualcosa di simile, ma nessuna rivista ha raggiunto degli standard così elevati (ricordate che è tutto gratis).

Il progetto grafico è eccellente così come il sito, e partecipano all’iniziativa autori di tutto rispetto. Non voglio citare nessuno perché c’è davvero l’imbarazzo della scelta: tra l’altro nei prossimi numeri ci saranno anche interessanti new entry. Io vi posso già dire che darò il mio contributo anche nel numero di ottobre: è ancora presto per parlarne, ma continuerò a scrivere di accessibilità della rete.

Se avete commenti sulla rivista o sul mio articolo non esitate a scrivermi. Trovate il numero di settembre a questo indirizzo: buona lettura!

User Experience: diagrammi e grafici

Una collezione per chi si interessa a UX e web design: dalla progettazione di un sito alla sua realizzazione.

In passato era già capitato di discutere di User Experience: in Italia se ne parla ancora poco, ma è un aspetto fondamentale per la realizzazione di un buon progetto web.

Se siete interessati ad approfondire l’argomento, ho raccolto una serie di grafici e diagrammi da applicare soprattutto all’ambito web, tra cui la fantastica UX Wheel di Magnus Revang.

Tutti descrivono in maniera più o meno dettagliata le competenze necessarie per realizzare un sito web completo, illustrando la strada da percorrere. Non è sempre facile tenere presenti gli obiettivi finali: questi diagrammi possono essere d’aiuto anche per capire l’utilità di certe attività durante lo sviluppo.

Studi di usabilità, attenzione per l’accessibilità e per l’architettura dell’informazione: sono tutte parti fondamentali della creazione di un sito se si vuole offrire un’esperienza positiva all’utente finale.

I diagrammi

UX Wheel

Praticamente d’obbligo stamparla e tenerla sempre presente. Descrive le varie fasi creative associando i risultati a dei processi produttivi, per arrivare ad ottenere un valore finale.

UX Honeycomb

Al contrario del diagramma precedente qui non viene identificato un processo produttivo, ma un insieme di fattori che contribuiscono al raggiungimento di una user experience positiva. Non esiste infatti solo l’usabilità.

UX Treasure Map

Peter Morville ha raccolto in un unico schema molti fattori, rappresentando il tutto come un percorso da seguire per raggiungere l’obiettivo.

The Fundamentals of Experience Design

Un modello di grande impatto visivo dove vengono riunite le persone, le loro attività, ed il contesto di queste attività. Sotto le annotazioni superficiali esistono poi livelli più approfonditi: basta voler scavare.

Questi sono alcuni dei diagrammi più interessanti pubblicati anche su UX Booth qualche giorno fa. Se volete approfondire il discorso fate riferimento al post completo, dove troverete altro materiale. In aggiunta, voglio condividere anche le risorse che seguono.

The Disciplines of User Experience

Un diagramma che vuole rappresentare tutte le discipline coinvolte nel raggiungimento di una user experience positiva. Interessante la domanda che si pone l’autore nel post: cosa può essere indentificato come UX Design, escludendo le varie attività da cui è costituito (visual design, interaction design, ecc.)? E’ difficile identificare infatti l’UX Design come un’attività separata ed autonoma, a meno che ci si limiti a considerarlo come semplice coordinamento.

User Experience Diagram Rationalization

Luke Wroblewski ha riunito in un unico schema il lavoro fatto da altri esperti del settore per rappresentare gli obiettivi, i processi e le discipline coinvolte nella realizzazione di un prodotto. Tutto in una sola immagine.

Se conoscete altre risorse simili segnalatele nei commenti, sono a vostra disposizione.

BlogFest 2010 a Riva del Garda

La BlogFest a Riva del Garda dal 24 al 26 settembre. Chi parteciperà?

Puntuale come ogni anno, anche nel 2010 arriva la BlogFest.

Cos’è? E’ un evento che riunisce in un unico luogo tutto ciò che riguarda le community nate in rete, dai blog a Facebook, passando per Twitter, FriendFeed, le chat ed i forum.

Non ne avevo mai parlato prima d’ora su questo blog, ma quest’anno mi interessa particolarmente partecipare al GameCamp, e quindi sarò presente anche io a Riva del Garda. Considerando i tanti partecipanti sarà anche un’ottima occasione per rivedere alcuni amici e fare nuove conoscenze.

Quando?

La BlogFest 2010 inizia venerdì 24 settembre dalle 17 in poi, e finisce domenica 26 settembre.

Dove?

L’evento si svolge a Riva del Garda. Se cercate un hotel dove fermarvi, potete trovare su Rivatour.it un elenco di strutture convenzionate, ma ci sono anche altri hotel in zona che pur non avendo convenzioni particolari sono vicini al centro.

Se volete saperne di più e leggere il programma delle tre giornate, trovate tutto sul sito ufficiale. Fate attenzione alle date quando consultate una pagina perché alcune sezioni del sito nel momento in cui scrivo fanno ancora riferimento al 2009.

Ci sarete? Se verrete a Riva del Garda sarà un piacere scambiare due chiacchiere: fatevi riconoscere, io sarò presente dal venerdì sera fino alla domenica.