Questa domanda che ci trasciniamo fin dalla fine degli anni 90 ha avuto un’evoluzione nella risposta seguendo il mondo degli schermi disponibili su computer desktop e notebook.  Negli ultimi anni la risposta che si è man mano affermata è quella di una progettazione che sfrutti, al minimo, sino a 970px in orizzontale e almeno 550px in verticale all’interno del punto di vista dell’utente (senza scrollare).

Specifico al minimo perchè la tendenza i è sempre stata quella di un’aumento della risoluzione degli schermi e dunque dello spazio primario disponibile per progettare le nostre interfacce.

I designer di interfacce oggi cercano di sfruttare al meglio questo spazio sapendo che non è per forza necessario costringere tutta l’interfaccia all’interno del punto di vista primario dell’utente, ma che è comunque utile per avere una maggiore efficacia della stessa (a pari livelli di leggibilità e ordine nell’interfaccia).

Negli ultimi giorni però ho pensato se questa “verità progettuale” sia ancora vera e dando un occhiata alle statistiche di un po’ di grandi portali su cui ho la possibilità di operare mi sono reso conto che non è poi così vera.

Nell’ultimo anno con la grande diffusione dei netbook e con l’esplosione del mondo mobile (in particolare degli smarphone con full browsing) si sono largamente diffuse delle risoluzioni particolari che inficiano i precedenti ragionamenti.

In particolare ho notato una diffusione marginale (5-8%) di schermi a 800 x 600 px e una discreta diffusione (10-15%) di schermi a 1024 x 600 px, che dovrebbero essere proprio i netbook con i loro schermi tra i 10″ e i 12″ pollici di dimensione.

Dunque oggi come progettisti dovremmo tenere in considerazione questa ulteriore (de)evoluzione del mercato che di fatto, se si consoliderà nel tempo, ci offrirà un’area visibile fissa di circa 440px sull’asse verticale.

Se poi integriamo questa riflessione con la vecchia teoria (a più riprese sconfessata e riconfermata) che sui siti a sfondo informativo l’utenza effettua da 0 a 2,5 scroll in media (e l’efficacia d’uso dell’informazione è distribuita proporzionalmente sull’altezza) scopriamo che abbiamo perso una superficie utile di circa 275px in altezza (1100px contro 1375px in media).

Chiaramente queste riflessioni si basano al momento sull’ipotesi (ancora da verificare) che il comportamento degli utenti su schermi “grandi” sia il medesimo di quello che hanno su quelli più piccoli, ma se si dovesse rivelare vera alcune regole base della progettazione di interfacce dovranno essere adeguate alla nuova realtà.

Voi cosa ne pensate? Le statistiche dei vostri siti confermano queste risoluzioni? Avete dati per confermare o sconfessare questa ipotesi? :)

Ieri ho ricevuto la regolare newsletter di Axure che mi comunicava una buona novella giusto per Natale.

Finalmente Axure RP pro, un ottimo strumento di progettazione e prototipazione, è disponibile in una versione alpha per mac scaricabile entro la fine dell’anno e valida sino al 28 di febbraio. In questo modo Axure sta cercando di ricevere il maggior numero di feedback sul funzionamento del software per poi rilasciare la versione stabile in marzo.

Non sono mai stato un fan di Axure per il wireframing ma sicuramente ne riconosco il grandissimo valore negli aspetti di prototipazione e dunque invito chiunque a provare almeno una volta questo ottimo software.

Negli ultimi anni si è discusso spesso della validità delle tecniche legate all’eye tracking che nel tempo si sono dimostrate molto efficaci per verificare cosa vede, percepisce e fruisce  un utente di un interfaccia/contenuto ma scarsamente efficaci nell’ottica di analizzare la reale usabilità di un sistema interattivo.

Sta di fatto che nell’attività di progettazione di interfacce o artefatti multimediali, in particolare homepage, landing e oggetti di rappresentazione informativa, l’eye tracking può dare una mano al progettista a vagliare le soluzioni più efficaci dal punto di vista della comprensione e dunque conversione.

Purtroppo è molto difficile nella realtà di mercato dove operiamo (chiaramente per problemi di costi) riuscire ad allestire un’attività di test con utenti ripetuto con l’eye tracking, specialmente in fase di progettazione.

A questa problematica cerca di ovviare una startup americana, AttentionWizard, che da qualche mese ha lanciato un prodotto che attraverso degli algoritmi di inteligenza artificiale riesce a simulare in 30 secondi sino al 75% i risultati di un test eye tracking.

Personalmente sto testando da qualche mese la beta chiusa di questo prodotto con ottimi risultati (è stato scelto anche da nomi come Google e Yahoo) nella convalida e nel feedback sia sui wireframes sia sui visual definitivi.

Un esempio lo potete trovare qui di seguito sull’aspetto visuale della nuova versione di CNN.

Questo strumento, che è ancora in beta chiusa poichè è spesso instabile, non può chiaramente sostituire un’analisi completa con utenti reali ma può dare uno strumento snello ed efficace da utilizzare ripetutamente durante una buona progettazione iterativa ;)

Stamattina CNN, come preannunciato, ha lanciato il nuovo design che risulta perfettamente in linea con la piccola analisi comparativa che avevo proposto ieri. L’interfaccia è chiara, accattivante e propone una delle migliori soluzioni distribuite di information design che abbia mai visto.

Il fatto che abbiano migliorato un interfaccia già eccellente si consolida sempre di più utilizzandolo ed è interessante capire come hanno raggiunto questo risultato. Nel video di presentazione uno dei responsabili di CNN.com spiega il come siano restati in ascolto verso l’utenza per quasi due anni prima di procedere a questo aggiornamento dell’interfaccia utente realizzato attraverso un processo di progettazione con gli utenti.

…continua la lettura »

Domani sarà lanciata la nuova versione dell’interfaccia utente di CNN.com che sarà molto più incentrata sui contenuti multimediali e sul lancio delle varie rubriche e funzionalità (come NewsPulse che sembra rivoluzionerà il modo di fruire le notizie) che saranno allargate a nuovi spunti (l’IA resterà comunque invariata). Tra queste non posso che esultare per la collaborazione e lo scambio di contenuti con il TED :)

È interessante osservare dallo screenshot distribuito come l’interfaccia e l’aspetto visuale rendano realmente più visibili i molti contenuti (la lunghezza della pagina a pari contenuti è stata ridotta guadagnando comunque molto in chiarezza) e diano a quelli promossi un appeal molto attraente. Vedremo se questa “promessa progettuale” si verificherà anche domani.

Resto purtroppo molto scettico sulla scelta di orientare l’aspetto visuale ed il brand al rosso (preso tra l’altro dal vecchio design della consociata Time)  in quanto non si alliena con l’esperienza di brand che si ha guardando la CNN in televisione la quale stilisticamente tende sempre molto al bianco con forti contrasti.

CNN oggi e domani

Stamattina ho scoperto tutte le novità proposte da apple, in particolare il nuovo iMac. Guardando il video di presentazione attraverso le parole di Jony Ive mi sono reso conto di come oggi si stia concretizzando a livello globale di product design quella fusione tra hardware e software che porta l’esperienza d’uso ad essere totalmente trasparente tra l’interfaccia hardware e i contenuti.

Tutto è orientato a mostrare totalmente i contenuti e rendere efficente l’interazione mentre l’hardware in se diventa sempre più invisibile.

10 GUI è un interassante iniziativa online che attraverso un video ci mostra 10 possibili scenari possibili per un interazione naturale con le interfacce grafiche… tutto fattibile già oggi ;)

10/GUI from C. Miller on Vimeo.

Questa iniziativa tra l’altro ci mostra l’evidente GAP che si è formato negli ultimi 30 anni tra la metafora della scrivania e le nuove opportunità ottenute dall’hardware. Questa questione (che tra l’altro ha impegnato per anni geni come Raskin) purtroppo ad oggi non ha una risposta risolutiva specialmente se si voglia creare un interfaccia efficace ed efficente per tutto il mondo.

Come ci interfacceremo tra qualche anno con la tecnologia? e come i vari artefatti digitali con le loro interfacce si integreranno tra loro?

A questi quesiti ha cercato di dare una risposta il gruppo di Office Labs (con la collaborazione di Microsoft Design) attraverso lo sviluppo di una serie di scenari d’uso (e relativa esperienza utente) che mostrano come in futuro ci potremo interfacciare con la tecnologia.

…continua la lettura »

Google ha appena introdotto in gmail una piccola modifica di interfaccia. In pratica quando si carica un file allegato ora viene mostrata una piccola status bar che da un feedback all’utente sullo stato del caricamento.

Un piccolo accorgimento che sicuramente ridurrà la frustrazione che si vive quando si inviano allegati molto grandi.

I design pattern sono uno delle soluzioni progettuali già pronte per risolvere problemi comuni. In pratica sono delle collezioni di “pezzi di progetto” già pronte a cui ogni buon designer dovrebbe attingere per tutti quei problemi comuni e ripetitivi che si presentano nei nostri problemi.

A parte le più classiche e complete collezioni di pattern come Welie o Berkeley ci sono diversi tentativi recenti di convertire in design pattern tutte quelle soluzioni di interfaccia e navigazione legate al mondo dei siti sociali. Uno dei lavori più completi ed interessanti è quello fatto da Christian Crumlish e Erin Malone in vista del loro futuro libro “Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience“.

In pratica hanno aperto una wiki dove sono collezionati e strutturati i principali meccanismi di interfaccia ed interazione che troviamo nei social network. Il lavoro non è ancora completo ma funge già da ottima base da cui attingere durante la progettazione di questi strumenti.