UXmagazine è una risorsa tutta italiana per gli appassionati di User Experience. Mensilmente pubblica diversi articoli che spaziano su diversi temi mantenendo come filo comune l’esperienza d’uso. Ho trovato questo progetto molto interessante e professionale quindi, sperando di poterlo promuovere ho chiesto al team della redazione se potevo fargli qualche domanda per conoscerli meglio. Sono emersi alcuni consigli molto utili per tutti e alcuni spunti molto stimolanti.

DB: Quando è nata l’idea di creare UXmagazine e con che propositi?

UXmag: L’idea di UXmagazine nasce a novembre 2008, come volontà di creare un canale di comunicazione e approfondimento per quella fetta di mercato che vuole conoscere la User Experience in modo semplice e diretto, attraverso degli articoli e un network dedicato.

DB: So che alle spalle di UXmagazine c’è Sketchin, uno studio di design specializzato nella user experience. Questo progetto vi sta aiutando a crescere culturalmente oltre che professionalmente?

UXmag: Al momento siamo ancora in una fase di grande investimento umano, in cui i ritorni non si sono ancora visti, ma sicuramente il magazine ci ha permesso di confrontarci con tante persone, scambiando idee e riflessioni e iniziando a creare un luogo di aggregazione per gli esperti e interessati al settore.

DB: Gli articoli sono sempre di alta qualità, spesso più a livello accademico che sul tono colloquiale scelto online dai blog. Avete scelto di indirizzarvi ad un pubblico di professionisti del settore o pensate che UXmagazine sia adatto anche a chi si affaccia per la prima volta a questa disciplina?

UXmag: In fondo vorremo che le edizioni stampate potessero anche costituirsi come primo approccio, come strumento di documentazione e spiegazione di questo mondo verso chi non lo conosce.

DB: Ho notato che avete molti autori e siete aperti a nuovi contributi. è stato difficile “l’arruolamento” all’inizio o c’è stato molto entusiasmo spontaneo dalla comunità? avete dei consigli per chi volesse unirsi ora (tipo style-guide o argomenti)?

UXmag: UXmagazine nasce come un magazine aperto a tutti, un po’ a modello barcamp, perchè crediamo che lo scambio sia alla base delle nuove idee e in definitiva delle innovazioni. Per questo non accettiamo solo i contributi degli esperti, ma anche di tutti coloro che vogliono parlare di una specifica esperienza d’uso o di un caso di studio, che vogliono mostrarci qualcosa che possa servire come spunto di riflessione per tutta la comunità.

L’arruolamento degli autori non è stato difficile, molti sono arrivati spontaneamene, altri hanno aderito a una proposta che gli abbiamo fatto in quanto li abbiamo ritenuti interessanti e interessati a portare alla luce nuovi argomenti e nuove discussioni.

DB: Entrando nel vivo dell’argomento, mi è sembrato che l’agile design sia qualcosa in cui crediate come metodo e vogliate promuovere. è così? qualche consiglio?

UXmag: È la nostra più grande scommessa, che stiamo integrando in tutti i processi interni e verso la clientela. Lo promuoviamo perchè ne testiamo quotidianamente il funzionamento e sappiamo che porta un vantaggio sul dinamico e fantasioso mercato italiano. Inoltre ha il vantaggio di essere potenzialmente replicabile in molte realtà.

DB: Vi siete interessati ai siti delle pubbliche amministrazioni, proponendo anche una serie sull’argomento. Inoltre recentemente il governo inglese ha emesso un guida per usare propriamente twitter per i propri dipendenti. Pensate che finalmente la presenza online sia accolta seriamente dalle istituzioni visto l’interesse trasversale per una corretta esperienza dell’utente e il miglioramento della comunicazione nei social media?

UXmag: L’opportunità c’è ma non è ancora colta nel nostro mercato se non come il seguire una corrente/una moda. Crediamo che ci sia la necessità non solo di consegnare lo strumento nelle mani dell’utente, ma il presentarne le potenzialità e le conseguenze positive e negative che questo crea. Di conoscerne i linguaggi e il campo di applicazione, anche per testarne l’adeguatezza al singolo caso.

DB: In più d’un articolo (TagMyLagoon, Progettare Apps per Iphone, Mobile e Interazione Precarie) avete trattato di mobile design e delle applicazioni che la mobilità potrebbe avere.pensate che mobile sia la parola chiave per il futuro di internet? come vedete espandersi l’esperienza d’uso dal mondo informatico agli spazi reali?

UXmag: Sì, crediamo che l’orientamento sia sempre più mobile e pensiamo a un futuro fatto di interfacce adattative e iperlocale. Crediamo che nel medio-lungo termine una buona parte della generazione di valore online torni ad essere strettamente legata al locale e non al globale. Un web iperlocale sarebbe un web modellato sulle esigenze di una particolare città dove persone, servizi e informazioni sarebbero altamente contestualizzate luogo per luogo e tempo per tempo, permettendo di visualizzare interfacce contingenti e informazioni che offrono un alto “livello informativo” all’utente. Nonchè, la possibilità per gli utenti di incontrarsi.
Su questo puoi vedere anche Un Web Iper Locale è Possibile e Strutture e Interface Adattive (slideshare).

DB: La User Experience spesso viene fraintesa come uno stadio all’interno del processo creativo mentre sappiamo bene essere un flusso, un concetto da coprire e da considerare in ogni passo del progetto. Secondo la vostra esperienza come se la cavano oggi, in tema di UX, i team coinvolti nella creazione di un sito, visto le varie mansioni e background di ogni elemento? In italia in particolare quanto è penetrata la cultura della UX, lavoriamo bene?

UXmag: Purtroppo è entrata molto male perchè non si comprende come la UX sia l’insieme di tutti gli aspetti in uso di un servizio da parte dell’utente finale. Quindi chiunque produca (marketing, design, comunicazione, sviluppo) fa UX e dovrebbe avere un background e una consapevolezza di quello che fa. Purtroppo questo non è assolutamente compreso in molti mercati europei (e appunto di questo ho parlato ad euroia).

DB: Direi che UXmagazine, anche se parte da una disciplina sola ma molto vasta come la user experience, ha già trattato svariati argomenti in queste prime edizioni. C’è qualcosa che non avete ancora approfondito e non vedete l’ora di farlo?

UXmag: L’integrazione tra prodotti fisici/digitali e anche la relativa integrazione tra digitale e architettura fisica. Accettiamo candidature per i prossimi articoli in merito

DB: Pensate di passare anche ad una versione stampata in un prossimo momento?

UXmag: Al momento abbiamo due versioni, una stampabile, che trovi su Scribd e una stampata su richiesta, che trovi su Lulu.

DB: siete soddisfatti di come è cresciuto il magazino fino ad oggi? avete qualche sorpresa in serbo per il futuro?

UXmag: Sì, siamo molto soddisfatti perchè andiamo avanti e continuano ad arrivare proposte, al momento stiamo ragionando su come creare qualcosa di speciale che ponga in relazione UXmagazine e UXconference.

DB: Gli ultimi consigli per i lettori: un paio di libri che consigliereste per chi si avvicina al mondo della User Experience?Qualche nome da seguire online tra gli esperti e gli ispiratori?

UXmag: Come ispiratori ti consigliamo Morville e Pabini, mentre come libri Designing Web Navigation di James Kalbach, Usabilità dei siti web di Michele Visciola, Web Usability di Jakob Nielsen, Designing Interface di Jennifer Tidwell.

In questo articolo vi mostro come pianificare un sito per adatto alla navigazione su qualsiasi cellulare. Per lo meno in teoria, visto che ogni modello ha le sue piccole differenze e dovreste sempre aggiustare qualcosa, ma questo è proprio il punto: creare un mobile site che sia ottimo su ogni telefono e fantastico sull’iphone.

perchè un sito per la telefonia mobile?

Così come alcuni anni fà tutti si sono resi conto che avere una presenza sul web era importante per il proprio business, oggi sta diventando chiaro che rivolgersi all’audience telefonica è obbligatorio.
Ci sono più di 3 miliardi di cellulari nel mondo, 4 volte il numero dei PCs. Il numero sta crescendo, ma ancora più importante, i telefoni vecchi vengono periodicamente sostituiti con nuovi, il che significa sempre più dispositivi con l’accesso ad internet.
source:BuxUk
I normali siti web sono visualizzati decentemente sugli ultimi dispositivi che dispongono di web browsers simili alle versioni per desktop, ma diventano comunque un incubo in usabilità. Su telefoni più vecchi invece non sono proprio visualizzati.
Fidatevi, un sito specifico per i telefoni cellulari non è uno spreco di tempo.

con cosa abbiamo a che fare

Quando inizialmente i cellulari hanno integrato la tecnologia per accedere ad internet usavano un vecchio sistema di web standards chiamato WAP, che comprendeva il suo linguaggio WML e il protocollo per distribuirlo (WTL, WYPS). WML è basato su XML ed è largamente adottato e sebbene sia superato non è stato deprecato, quindi poteteconsidereare di creare una versione del vostro sito anche con questo markup come “safe mode” per i cellulari più vecchi. L’evoluzione del wap è WAP 2.0 che ha adottato XHTML-BASIC/MP e il famoso protocollo TXP/IP HTTP per la comunicazione. xhtml-mp è molto simile all’ xhtml e viene interpretato dai browser nello stosso modo, ha solamente alcune caratteristiche in più utili ai dispositivi cellulari.
La prima versione del Wap non aveva stili, ma Wap 2.0 ha introdotto i Wireless CSS (WCSS) che sono una versione di CSS 2.1 per integrare gli stili ad xhtml-mp. è simile alla cersione dei fogli di stile css 2.1 ma ha meno attributi e per essere sicuri che funzioni trasversalmente su tutti i browsers è meglio che vi manteniate su cose semplici. Non funzione col Wap 1.0
Oggi molti telefoni come l’iPhone, Android, etc. che hanno lo stesso browser che sui desktops accettano lo stesso mark-up che usate per i siti web. Eccovi un paio di link a una guida sull’xhtml-mp e una sui wcss.

come iniziare

Cosa abbiamo imparato da questo stralcio di storia?
Che non è difficile creare un sito che funzioni su tutti i telefoni con un po’ di tecniche simili al progressive enhancement. Il mio miglior suggerimento è di scrivere il sito in XTML-MP e poi usare diversi fogli di stile. Il WML è in più, dovreste controllare i dati della vostra audience per esserne certi, ,ma generalmente se le persone hanno un telefono talmente vecchio non lo usano per navigare ora che ci sono alternative.
Prima che vi mostri qualsiasi codice consideriamo un po’ di lavoro con carta e penna.

i. web strategy

Perchè vi serve un mobile site? Potete veramente offrire qualcosa di utile a chi usa il cellulare? Offrite un servizio specifico? Aiutate a compiere qualcosa?
Non fraintendetemi, non si basa tutto sull’utilità, non è necessario che creiate un’applicazione per l’iPhone per avere una presenza nel mobile web, internet è anche intrattenimento. Pensate a chi in un bar decide di navigare il vostro blog per passare il tempo. Quello che intendo dire è che dovreste sbarazzarvi di tutto quello che non è utile e specifico per questo mezzo. Molte grafiche e pagine di foto sono una brutta scelta.
Pensate agli obbiettivi del vostro business, perchè è importante per voi essere sui cellulari. Pensate agli obbiettivi dei visitatori, come beneficeranno dal vostro sito? Considerate la tecnologia disponibile e i suoi limiti.
Siccome questo è anche lo stadio in cui si pongono le basi per la pianificazione dell’interaction design, è un buon momento per fare ricerca e capire qual’è la vostra auddience. Vi aiuterà sapere in che circostanze useranno il sito e … molto importante, che tipo di telefono useranno.
Un ultima domanda: pensate di creare un sito apposito o volete semplicemente adattare quello esistente per la visualizzazione su mobile?

ii information architecture:

Semplicità! evitate lunghe catene di pagine, pensate ad “investimenti in click” perchè anche con connessione 3G serve sempre molto tempo per caricare una pagina quindi la pazienza dei visitatori da cellulare è piuttosto corta. Tagliate tutto quello che non è rilevante e usate categorie ben specificate: se il visitatore sa cosa sta aspettando è più probabile che attenda il caricamento. In pratica limitate le scelte e le categorie, non lasciate che il visitatore si perda in un labirinto. Mantenete il minor numero di livelli possibile. Potrebbe esservi d’aiuto creare un “click stream” per visualizzare come vengono navigati i contenuti.

iii. mobile web design:

Ci sono molte cose da tenere in mente realizzando un sito per mobile. Prima di tutto la dimensione degli schermi varia molto ma quello che più c’interessa è la larghezza, quindi il mio consiglio è i creare un layout fluido. Usate percentuali invece dei pixels per le dimensioni. Potete saperne di più su AListApart.Un layout liquido vi aiuta anche sull’iPhone e altri dispositivi con lo schermo orientabile. Comunque, per i cellulari della vecchia generazione che hanno solo l’opzione del layout “portait” è importante cercare di strutturare i contenuti a dovere, per esempio come distribuire le informazioni e tagliare il testo in blocchi più piccoli per aiutarne la leggibilità.

La Navigazione è un altro aspetto che andrebbe riconsiderato.
Anche nei telefoni multi-touch è un po’ impacciata, figuratevi in quelli più vecchi dove si usa il pad.
Una buona idea è usare liste, sempre, e limitare i link ad un massimo di 10, magari aggiungendogli anche degli accesskey (questi ultimi non vi serviranno sui telefoni multi-touch).
Evitate menu a più livelli perchè su piccoli schermi non sarebbero mostrati correttamente.
Mettete Links d’uscita per la home, la sezione precedente e successiva, alla fine di ogni pagina in modi che il visitatore non debba scrollare fino in cima.

Risorse e banda di connessione sono 2 dei maggiori limiti dei telefoni cellulari. Evitate object e javascript quando possibile perchè non sono supportati sui primi telefoni, ma anche ora che lo sono prosciugano la batteria.

Limitate anche l’uso di immagini perchè aggiungono peso alla pagina, inoltre dovete considerare quale sarebbe la dimesione ideale. Se volete andare sul sicuro mantenetevi sulla grandezza minima di 120px in larghezza. Un’altra opzione è usare la grandezza dello schermo più grande che vi aspettate visiterà il sito (diciamo un iPhone orientato a landscape di 480px?) e poi applicate questa tecnica per adattarle allo schermo come il vostro layout liquido. Ovviamente non è la “miglior pratica” siccome al browser toccherebbe comunque scaricare la versione più grande. Il modo corretto di ridimensionare le immagini è farlo su lato server e specificarne la grandezza.
Quando potete usate sempre sprites images (se non sapete a cosa mi riferisco leggete questo articolo su ALA). Come al solito non dimenticate “alt text” nel caso l’immagine non carichi.

Ho nominato il peso della pagina, il mio consiglio è di restare tra i 10kb e i 25kb. Mi riferisco ai telefoni di base, per gli smartphones va bene anche 50kb e per i touch-phones anche 100kb, ma è meglio andare sul sicuro visto che oltretutto dipende sempre dalla qualità della connessione.

Caching è un altro fattore che vi aiuta con la velocità di caricamento, cercate di evitare che le risorse comuni siano sempre scaricate e inserite una stringa per controllare la cache.

Interessante: Safari sull’iPhone registra nella cach solo file di dimensioni minori di 25kb, quindi zippate i vostri fogli esterni come i css e cercate dirimanere in quel limite con le vostre immagini sprites.

Quando applicate gli stili ai font è meglio non specificare la grandezza in pixels, casomai in em o percentuali, ma l’ideale è usare “small/normal/large” perchè ogni dispositivo sa cos’è adatto per sè.

Parliamo dei links: sui telefoni cellulari non c’è il mouse, quindi niente hovering, dimenticate l’attributo hover. Una cosa divertente invece è che se usate “tel:” e “sms:” nei link potete attivare quelle funzioni nel telefono, quindi è utile nella pagina dei contatti aggiungere link che se cliccati lanciano direttamente la chiamata o la messaggistica. Ecco un esempio:

call us
Send SMS to 1(212)555-1212


Entrando un po’ più nel tecnico la prima regola perchè il vostro sito venga visualizzato correttamente sui telefoni è aggiungere il giust Doctype (xhtml-mp), codice di caratteri (utf-8), e il MIME Type (application/html+xml).


"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">



Per quello che concerne la struttura del body cercate di costruire semanticamente (nell’ordine in cui le cose appaiono) ed evitate tabelle e frames. é sempre meglio validare il vostro codice, limitare l’uso di risorse esterne e per favore, non usate popups.

rilevare e rivolgersi a telefoni specifici

Ok, quello che vi ho detto fino ad ora era applicabile ad ogni telefono, ma forse volete aggiungere qualcosa di speciale o concentrarvi su alcuni modelli specifici.
Come potete riconoscere un modello e adattare i contenuti appositamente? Innanzi tutto vi ricordate cosa vi ho chiesto durante la pianificazione: voleter costruire un sito per mobile o adattare il sito web ad essere visualizzato sui cellulari? Se avete deciso di fare tutto quello che vi ho suggerito nel tutorial ne deduco che vogliate creare un sito da zero (bravi ragazzi) ma se per qualsiasi ragione volete solo adattarne uno, il modo migliore è tramite i CSS. Aggiungete un foglio di stile separato per i cellulari.

potete anche aggiungere stili specifici all’interno di un unico foglio css:

@media handheld {#image1 {display: none}}



@media only screen and (max-device-width: 480px) {}


Nel caso vogliate essere più specifici nella personalizzazione avrete bisogno di spare ch modelli di cellulari visitano il vostro sito. Potete identificarli tramite le informazioni che ogni dispositivo include nel proprio http header, lo “user agent. Online ci sono alcuni databases che contengono tutte le informazioni relative ad ogni modello. Per esempio potete usare il WURFL database, oltre ad essere un progetto opensource condivide un API che potete usare nel vostro codice server-side per adattare i contenuti del sito e la loro presentazione a specifici user agents. Un altro database è quello di DeviceAtlas che oltre all’API offre vari tutorials, come questo per includerlo nel vostro codice php.

iphone

Sì, so che c’è molta agitazione attorno all’iPhone e non l’ho dimenticato. Ecco alcuni consigli specifici per questo telefono.
Una buona pratica è mantenere la user experience simile a quella generale dell’iPhone anche attraverso il sito. Questo non significa sacrificare l’originalità. Quello che intendo è piuttosto usare liste per i menu e bottoni molto grandi per poter essere premuti comodamente, questo è un touch-phone. Visto che usa Safari 4 potete usare xhtml e css. La parte divertente è proprio la potenzialità di sfruttare le nuove regole CSS3 che non potete usare sugli altri telefoni. La più comoda e usata ovviamente sono i bordi arrotondati:

div {
color: #bcbcbc;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}


Iniziate aggiungendo il viewport all’interno dell’ in modo che la pagina si adatti perfettamente allo schermo:




Il secondo passo è nascondere la barra degli indirizzi visto che abbiamo già così poco spazio. Ci basta una riga di javascript:

window.scrollTo(0, 1);


Create una icona springboard, una specie di enorme favicon per rendere riconoscibile il vostro sito se viene aggiunto ai segnalibri dell’homescreen. Dev’essere di 57×57 px e dovete inserire nell’

Qualcosa che penso potrebbe esservi molto utile è una funzione che una volta rilevato che un iPhone sta visitando il vostro sito web apre una finestrella per chiedere se si preferisce passare alla versione mobile del sito. su iphonemicrosites.com un breve tutorial
Come alternativa, se pensate che questo metodo sia troppo invasivo, potete semplicemente aggiungere dinamicamente sulla pagina un messaggio che avvisa il visitatore della possibilità di passare al sito per iPhone. Un altro tutorial sempre allo stesso indirizzo.

Visti questi primi passi direi che il resto lo lascio alla vostra creatività. Ricordatevi di usare grandi “target areas” nei vostri link e buttons per aiutare i pollicioni, bisogna riuscire a cliccare una cosa alla volta comodamente. Usate liste per menu e links, usate colonne per il testo e dividetelo in paragrafi corti.
A dir il vero tutto quanto detto nella prima parte del tutorial si applica anche su questo telefono, con la differenza che qui potete spingere le prestazioni oltre. Leggete la guida ufficiale di Safari per il web per imparare le tecniche migliori ed i limiti relativi all’iPhone. è breve ed aiuta molto.

Se vi serve un po’ d’aiuto nella creazione delle interfacce potete usare frameworks e strumenti di sviluppo apposta per questo handset. Date un’occhiata a queste risorse:Dashcode
iUI
Yahoo stencils

testing

Per testare il vostro sito la cosa ideale è provarlo sui telefoni veri e propri, ma nel caso non possiate ci sono alcuni strumenti per questo. Per l’iPhone è meglio lavorare sull’SDK offerta dalla Apple se siete su Mac. Se invece lavorate su Windows potete provare il sito con MobiOne, un emulatore molto carino che io stesso uso.
Per altri telefoni dovreste controllare se sono disponibili gli emulatori appositi. Altrimenti dotMobi offre Mobiready un validatore molto comodo che vi mostra come viene visualizzato il sito su alcune classi di dispositivi e che risultati ha in termini di tempi di caricamento, peso, costi, etc.
Però il sito dev’essere online.
Se avete Firefox potete installare l’add-on User Agent Switcher per simulare all’interno del browser come il sito viene visualizzato da altri user agents.

wordpress

Nel caso abbiate un blog costruito su wordpress e vogliate che appaia decentemente sui cellulari ho trovato un paio di plugins interessanti:
iWphone è pensato per l’iphone e praticamente aggiunge un theme che si adatta al dispositivo;
il dotMobi Wordpress Mobile Pack invece è più complesso e completo, converte completamente il sito validandolo per il linguaggio xhtml-mp, aggiungendo temi specifici, integrandolo col database di DeviceAtlas, e così via.

risorse

C’è il solito elenco delle mie fonti nel menu dopo l’articolo, ma ritenevo importante sottolineare alcune risorse in particolare che ho trovato più indispensabili che utili:
la web developers guide di MobiForge che contiene tutto quello che vi serve sapere;
un’altra guida per creare mobile sites, più sintetica e con tanti bei disegnini;
L’intero sito MobiForge, il miglior posto per iniziare;
su iphonemicrosites.com potete trovare alcuni tutorials molto utili per i siti da visualizzare sull’iphone;
Restando sull’oggettino Apple, leggete su Nettuts i 10 consigli di Paolo Ranoso o l’articolo approfondito su Webdesignerdepot

content strategy

Internet è contenuti. davvero.
La gente si connette per trovare informazioni, per fare qualcosa, per risolvere un problema. Comunque la metti stanno cercando dei contenuti. Sembra ovvio quindi che sia l’elemento più importante di un sito, eppure di solito, durante il processo creativo è l’ultima cosa di cui ci preoccupiamo. perchè? beh, spesso pensiamo che sia il lavoro di qualcun’altro o che useremo quello che ha preparato l’ufficio marketing o che bene o male sappiamo cosa dovremo scrivere. Non c’è problema.
Sbagliato.
Vi spiegherò tra un attimo perchè è così importante, ma prima cerchiamo di capire cosa significa esattamente content strategy. Cercate anche di ricordare che quando parlo di contenuti non mi riferisco solo ai testi, ma anche a video, audio, immagini, etc.

cosa comprende la content strategy?

Citando Kristina Halvorson, un vero guru di questa disciplina, “content strategy pianifica per la creazione, pubblicazione e gestione di contenuti utili ed usabili.
Content strategy ti aiuta a capire non solo cosa bisogna creare, ma anche perchè.”

Comprende diversi aspetti:

Ok, non molto dettagliato, ma dovrebbe darvi un idea generale di quali sono le funzioni e le competenze di un content strategist.

ok, ma perchè?

Sì vabbè, ma ancora non ho capito perchè è così importante e dovrei ammazzarmi di lavoro per questo.
Ecco alcune buone ragioni:

- SEO: non negarlo, è una parola inflazionata ma ti interessa. Non ho trucchetti magici, ma puoi aggiustare e organizzare i tuoi contenuti in modo che siano più efficaci per i motori di ricerca. Devi ad esempio inserire alcune parole chiave senza compromettere la qualità del testo. è molto utile per attirare un’audience specifica sul proprio sito, che significa aumentare le conversioni nel caso abbiate pubblicità per un certo target e riuscite ad attirarlo.

- Design: ti sei mai chiesto perchè le belle template che si presentano ai clienti non sono poi mai identiche alla versione finale in produzione? Probabilmente perchè si usano place-holders e Lorem Ipsum con un’idea solo generale di quello che sarà sul sito. Se hai già dall’inizio i veri contenuti a disposizione non rischi di rompere all’ultimo momento la perfetta user experience che avevi pianificato. Un’altra ragione per preparare i contenuti prima di iniziare è che il design serve a comunicare qualcosa proprio in base ai contenuti e al Brand. Se non sai per cosa stai creando, non potrai realizzare qualcosa che aiuti i contenuti e lo spirito del brand. (e non nominare mai Lorem Ipsum ai content strategists, perdono letteralmente la ragione. Se per sbaglio ti capita..corri.)

- Usablity: sì, amo questa parola. E i contenuti hanno un ruolo importante. Cerco di dire che è fondamentale avere un’interfaccia chiara con una navigazione semplice e così via, ma alla fin fine, se i contenuti falliscono nel tentativo di essere utili e leggibili avete solo sprecato le vostre forze.

- Persuasione: ammettiamolo, oggi tutti sono editori e tu devi riuscire a cogliere l’attenzione del lettore. Vuoi comunicare qualcosa e se fai anche breccia non è male.

- Brand: “buoni contenuti aggiungono lustro al brand”, dice Colleen Jones.

Bene, ora abbiamo un’idea di cosa sono i contenuti e perchè ci serve della strategia.

teach me, baby

Cominciamo a parlare dei fatti: come posso mettere in pratica questi concetti? Karen McGrane è una specie di divinità nello spiegarlo, quindi assicuratevi di leggere le slide alla fine del capitolo. Io cercher di riassumere i passi più importanti.

Lei usa un modello molto efficace per visualizzare il processo necessario alla pianificazione di un sito dal punto di vista del content strategist.

Prima ho detto che dovresti fare, e tenere aggiornato, un inventario dei contenuti. è proprio quello che sembra, un elenco di tutti i contenuti presenti sul sito. Di solito un foglio d’Excel. Sarah Rice ha condiviso un suo modello qui altrimenti Jeffrey Veen ha un altro esempio qui. All’inizio di un progetto è utile sapere con cosa si lavorerà. Elenca i contenuti e cerca di categorizzarli per tono, accuratezza, coerenza, rilevanza, e così via. Aiuta gli information architects che in questo modo sanno cosa effettivamente è possibile oppure no nelle loro pianificazioni. E ovviamente aiuta chi hai assunto per scrivere che non può fare le cose a caso ma deve sapere dove c’è bisogno del suo aiuto.
Per una guida più pratica controllate il link di Veen che vi ho dato sopra, entra nei dettagli del processo ottimale.

quality content

Il processo per una content strategy che abbiamo visto fino ad ora è ottimo, ma possiamo anche approfondirlo da un’altra prospettiva: come creo dei contenuti di qualità?
Colleen Jones ha scritto un articolo su UXmatter su questo argomento, vediamo se riesco a stringerlo un po’ qui per voi.
Per assicurare la qualità dei contenuti una style guide non è abbastanza perchè di solito si preoccupa solo della scelta delle parole e del tono del brand. Dobbiamo invece usare alcune euristiche.

Queste sono alcune delle guide linea, ma ciò non toglie che dovreste sentire l’opinione di un esperto, dovreste fare i soliti usability test e controllare il feedback degli utenti. Inoltre usate sempre un inventario dei contenuti e fate un’analisi.

analisi dei contenuti

Considerando che adesso abbiate un’idea generale del processo per una content strategy e che magari abbiate già fatto il vostro inventario dei contenuti, dovreste controllare se ci sono problemi significativi tramite queste euristiche d’analisi che Fred Leise ha elencato in un articolo su BoxesAndArrows.

C’è così tanto da dire su quest’argomento, ma non ne ho lo spazio. Controllate le fonti che ho elencato sotto nella solita sezione “fonti”, ma vi consiglio anche di partire dal blog di BrainTraffic, gestito da Kristina Halvorson, che ha tonnellate di consigli pratici sulla content strategy. Karen McGrane, Margot Bloomstein, e Jeffrey MacIntyre che gestisce Predicate,LLC sono gli altri nomi da seguire in questo campo se volete impararne di più. Kristina Halvorson ha appena pubblicatoWeb Content Strategy, ovviamente una lettura fondamentale. Io vedrò di procurarmi presto la mia copia.
Per finire, il Knol sulla Content Strategy è un ottimo punto di partenza per trovare tutto quello legato all’argomento su internet.

Spero abbiate apprezzato l’articolo e nel caso condividetelo così diffondiamo un po’ la parola Se avete delle domande cercherò di rispondere nei commenti, altrimenti potete raggiungermi su twitter.

foto: © Lars Williem Veldkampf (photostream)

Introduzione ai webfonts:

Quando riguarda il web design la tipografia è sempre un argomento difficile. Da sempre i designers sono stati costretti ad usare i cosidetti web-safe fonts.
Quando specifichiamo i typefaces nella proprietà font-family del nostro foglio di stile stiamo dicendo al browser di usare quel font per tradurre l’aspetto del testo html a cui si rifersce la proprietà. Siccome i vari sistemi operativi hanno font installati di base diversi, noi, come designers, eravamo obbligati ad usare quelli più comuni che erano installati sulla maggior parte dei computer (ricordatevi che il browser cerca il font sulla macchina del visitatore).
Questo è anche il motivo per cui definiamo “stack” (gruppi) di fonts in font-family e non solo il nostro preferito: cerchiamo di assicurarci che se il primo font non è disponibile sul computer del visitatore venga allora caricato il prossimo.

Questo articolo di David Rodriguez spiega in dettaglio i web-safe fonts e come usarli. Se volete migliorare i vostri stacks e provare nuove soluzioni sempre nei limiti dei web-safe fonts vi consiglio di scaricare il file pdf da Unit Interactive, è diventato il mio riferimento da quando l’ho letto.

Ovviamente potete obbiettare che avete visto su molti siti fonts diversi dai soliti Verdana o Georgia (per citarne un paio). Questo perchè esistono altre tecniche come sIFR3, cufòn e la sostituzione con immagini, per non usare i font comuni, ma implicano l’uso di flash, javascript o immagini con conseguenti svantaggi. Perciò di solito sono usati solo per i titoli.

i. alternative

Oggi qualcosa sembra stia cambiando e tutti gli amanti della tipografia del mondo si stanno eccitando (ho esagerato?).
Sto parlando di @font-face, la nuova regola CSS che permette di includere (”embed” se il termine vi ricorda qualcosa) font nel vostro sito.
Vi darò un piccolo tutorial su come usarlo efficacemente a breve, ma prima vediamo com’è la situazione odierna rispetto alla disponibilità dei font.

ii. webfonts proposals

ILoveTypography ha un bell’articolo completo sulla questione che cercherò di riassumere ora.
Microsoft nel 1997 ha sviluppato il suo formato Embeddable Open Type (.eot) di font che era poi supportato da IE4. Inviarono la proposta di ammissione al W3C, ma fu rifiutata prevalentemente per ragioni di sicurezza.

Ora Tal Leming e Erik Van Blokland propongono un nuovo formato, .webfont, che consisterebbe in 2 file: uno sarebbe il font grezzo (es. TTF o OTF) e uno un info.xml che conterrebbe i permessi per usare quel font. Il browser leggerebbe il file .xml e deciderebbe se caricare o meno il font.
Potete leggere meglio come funziona su ChezPorchez.

David Berlow di Font Bureau propone invece “permission teble of Opentype”, un sistema per inserire i permessi d’utilizzo direttamente nel font (rimandendo dunque con un solo file) e usando un file già pronto ad essere incluso perchè .otf
Una critica mossa a questi metodi è che sarebbe facile modificare i file xml per aggiungere i propri dati ai permessi d’utilizzo anche senza avere una licenza.
Nel frattempo Ascender ha lavorato per evolvere il formato EOT di Microsoft in uno di uso più facile: EOT Lite.

Tra le notizie dell’ultimo momento, gli sforzi di Leming e Blokland si sono uniti a quelli di Jonathan Kew (Microsoft Corporation) per dar vita al formato WOFF , un unicofont file compresso contente anche meta-datas e private-use data. Ecco un estratto dal testo della bozza originale:

The WOFF format is directly based on the table-based sfnt structure used in TrueType[1], OpenType[2] and Open Font Format[3] fonts, which are collectively referred to as sfnt-based fonts. A WOFF font file is simply a repackaged version of a sfnt-based font in compressed form. The format also allows font metadata and private-use data to be included separately from the font data. WOFF encoding tools convert an existing sfnt-based font into a WOFF formatted file, and user agents restore the original sfnt-based font data for use with a webpage.

A quanto pare non ci sono ancora programmi per convertire i file, ma è comunque un passo avanti verso una soluzione. Il documento ufficiale è qui.

Ad ogni modo il problema di tutte queste soluzioni è che devono essere accettate dal W3C per poter essere adottate in futuro, ma il W3C inizierà a lavorare su una proposta solo sapendo che è supportata dalla maggioranza delle typefoundries e non c’è una vera e propria industria “type industry” — almeno rappresentata ufficialmente — quindi le decisioni sono piusstosto individuali e rallentano le cose. Inoltre poi il formato dovrebbe essere supportato dai browsers.

iii. soluzioni dei distributori

Qualcuno sta già supportando @font-face vendendo font con licenze che permettono l’inclusione nei siti.
Uno è Typekit che affittano i font invece di vendere completamente la licenza.
Scegli su che dominio la userai e paghi mensilmente. In cambio ottieni un codice javascript che include il font ospitato su un server.
Typotheque sta facendo una cosa molto simile, vendendo licenze (per dominio e non mensilmente sembrerebbe) e ospitando il font su un cloud server. Invece del javascript mandano un codice css da aggiungere al proprio sito. Spiegano che quando si scegli un font bisogna specificare la lingua così da aiutarli ad elimenare i caratteri inutili e riducendo il peso del file per assicurare caricamenti più veloci.

Andy Clark su For a Beautiful Web si lamenta del fatto che Typekit offre un’ottima soluzione ma lascia un problema ai designers: se abbiamo un licenza solo per includere i font online, come facciamo ad usarli per i progetti offline da mostrare ai clienti?

Ovviamente esistono anche openfonts Su Webfont.info e Font Squirrel potete trovare lunghe liste di font disponibili per l’embedding. In particolare su questo blog uso un paio di fonts forniti da The League Of Moveable Type e Cape Arcona, potete vedere quali nella mia “about page”.
Anche Jos Buivenga offre una bella selezione di fonts.

Posso usare qualsiasi font? No, siete ovviamente limitati dalla End User Licensing Agreement (EULA), ovvero i termini della licenza, quindi scegliete attentamente quali font usate.
Ad esempio non potete caricare online un font tra quelli che avete nel vostro sistema operativo perchè solitamente hanno una licenza che ne regola l’uso solo su applicazioni per desktop. Caricandoli violereste la licenza esponendo il font alla possibilità di essere scaricato da chiunque perchè è su un server pubblico. Sciegliete sempre font che sapete avere una licenza apposta per l’inclusione. Leggete sempre attentamente l’EULA anche se avete acquistato il font perchè in realtà pagate per un permesso d’utilizzo, ma non lo possiedete realmente. Su Font Feed spiegano molto bene come leggere l’EULA con l’esempio della nuova versione pubblicata da Fontfont.
Se trovate un font gratuito e non siete sicuri riguardo alla licenza, ma volete includerlo probabilmente è una buona idea aggiungere nel foglio di stile un commento dove chiedere il permesso vicino alla regola @font-face. Almeno questo è quello che suggerisconono su Hack.Mozilla.

@FONT-FACE: COME USARLO

Se avete letto la prima parte dell’articolo potreste pensare che la situazione è ancora piuttosto confusa e non useremo questo metodo a breve.
No, in realtà tutto è pronto e potete finalmente usare la regola @font-face per il vostro testo.
Ci sono alcune limitazioni sulla disponibilità dei font, ma ne abbiamo già una grande varietà a nostra disposizione, e molti browser di ultima generazione la supportano (Opera 10, Firefox 3.5, IE dal 4, Webkit-based/Safari 3.1). Potete trovare una lista dettagliata su webfont.info.

Dunque ecco come @font-face funziona: è una regola per il vostro foglio di stile che vi permette di mettere un link ad un font (un file .ttf .otf .eot) nello stesso modo in cui ora includete codici o immagini. Il file del font è ospitato su un serve e @font-face da le indicazioni per caricarlo e tradurre il testo html dove specificato.

/* Graublau Sans Web (www.fonts.info) */

@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}

body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

Ha 3 declarations:
font-family: che diventa il riferimento da usare poi nei vostri stacks. è arbitrario, potete scegliere qualsiasi nome vogliate a patto di usare lo stesso nella proprietà font-family dell’elemento html.
src: qui è dove inserite il percorso al file. Se pensate che il visitatore possa già avere quel font sul proprio computer allora potete usare local(nomedelfont) e poi aggiungere magari un percorso alternativo per sicurezza.
format: Serve a specificare che estensione di file state usando ( TrueType; OpenType;).
font-style: il valore standard è “normal” ma potete scegliere tra “italic” e “bold”. In realtà se il font lo permette potete specificare fino a 9 pesi diversi.

Se avete bisogno di sapere il nome esatto del file per scrivere il percorso corretto potete, su MacOSX e Linux cliccare su “font info” tra le opzioni del file, mentre su Windows vi servirà la font proprietary extention Comunque generalmente il nome del font si ottiene unendo la familia allo stile (es: “Helvetica Bold”).

Ricapitolando: guardate questo esempio preso da HackMozilla

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

body { font-family: MyHelvetica, sans-serif; }

Vedete che ogni @font-face ha le tre declarations. Con font-family si assegna il nome al font, con src si garantisce più di un percorso per trovare il file prima provando sul computer del visitatore e poi sul webserver; con format si specifica se è un file TruType o Opentype.
Subito dopo vedete un esempio di un elemento, in questo caso body, a cui viene applicato il font nel modo solito che conosciamo, basta aggiungere il nome che avevamo scelto nello stack di font-family.

ii. aiutare IE

Internet Explorer, come al solito, ha le proprie regole. Questa volta ad onor del vero dobbiamo ammettere che Microsoft era arrivata per prima con il proprio formato Embeddable Open Type (.eot) per l’inclusione e supportano @font-face già dalla versione 4 di IE.
Sfortunatamente da allora la situazione non s’è evoluta di molto e sono gli unici ad usare quel formato. In più IE non riconosce il descriptor format e ignora qualsiasi regola @font-face che lo contiene.

Questo significa che per assicurarsi una compatibilità su tutti i browsers dovrete sempre aggiungere un @font-face apporta per IE prima degli altri, con un link ad un file .eot evitando format.

/* Font definition for Internet Explorer */
/*         (*must* be first)             */

@font-face {
  font-family: chunkie;
  src: url(type/Chunk/CHUNKFI0.eot) /* can't use format() */;
}

E dove pensate di trovare i font con estensione .eot? Da nessuna parte, sorridete! Dovete convertire i vostri .ttf con il Microsoft WEFT tool (vi spiego come tra poco): Questo programma è disponibile solo per Windows, ma qui potete trovare una versione opensource per altri sistemi operativi.
Comunque queste due applicazioni vi aiutano solo a convertire i file TrueType (.ttf), ma per quanto riguarda i gli OpenType (.otf) ? Dovrete seguire le istruzioni di J.Malcolm in questo commento.

Come avevo detto poco fa, ecco come usare il WEFT per convertire i .ttf in .eot .Jon Tangerine qui spiega benissimo il suo metodo, probabilmente il migliore.

iii. ottimizzando per IE

Bene, avreste tutti gli elementi per usare @font-face, ma dovreste sempre usare due selettori per supportare IE a non è la soluzione più bella del mondo. Inoltre, anche se non siete preoccupati dell’estetica del codice, magari lo siete delle prestazioni del sito.
Andrea Giammarchi Questa settimana ha scritto un articolo dove faceva notare che IE quando legge il vostro selettore @font-face cerca di caricare anche il file.ttf sebbene non lo legga e semplicemente conclude l’operazione con un errore 404. Non vene accorgereste senza andare a controllare il log del server ma è comunque lavoro inutile per il vostro server.
Paul Irish arriva sul suo cavallo bianco per salvarci con una semplice soluzione: nella regola @font-face potete scrivere un descriptor src col percorso al file .eot per IE e poi una fonte local che costringe il browser di Microsoft ad ignorare i seguenti src ad un file .ttf, quelli per tutti gli altri browsers.Semplice, liscio, bellissimo.
Potete leggere tutto il processo di testing sul blog di Scott Kilmer Qui invece un esempio del codice preso dalla pagina di Giammarchi per capire meglio:

@font-face {
    // define the font name to use later as font-family
    font-family: "uni05_53";
    // define the font for IE which totally ignores local() directive
    src: url(../font/uni05/uni05_53.eot);
    // use local to let IE jump this line and
    // redefine the src for this font in order to let
    // other clever browser download *only* this font rather than 2
    src: local("uni05_53"), url(../font/uni05/uni05_53.ttf) format("truetype");
}

Conclusione:

Questo è tutto, abbiamo visto qual’era la situazione della tipografia nel web design fino a ieri, quali sono le proposte per domani e come usare @font-face oggi.
Avete tutti gli strumenti che vi servono e anche se sembra complicato leggendo un articolo così lungo, vi assicuro che è molto semplice dopo aver provato.
Quindi è il momento per voi di contribuire a creare un Web migliore con bellissimi typefaces!

Se qualcosa non è chiaro chiedetemi pure qualsiasi cosa nei commenti o date un’occhiata alle fonti che ho elencato più sotto.

Caroline e Micah si sono conosciuti all’Otis College of Art and Design di Los Angeles dove si sono diplomati in seguito ad aver lavorato insieme a Thegoodsideof.us, la loro tesi e un sito dove la gente può condividere storie delle proprie buone azioni. Usare la propria creatività per rendere il mondo un posto migliore, un sito alla volta, è lo spirito che hanno portato avanti e all’inizio del 2009 hanno fondato A Good Company, il loro studio di design che ci ha regalato The League Of Moveable Type.

DB: parliamo di The League Of Moveable Type. Per favore, spiegateci voi di cosa si tratta.

Caroline: L’idea per The League ci è venuta quando abbiamo visto questa discussione su Typophile dove si chiedeva ai type designers di partecipare ad un progetto per un font open-source.
Abbiamo visto la reazione negativa che ha suscitato in molte persone e abbiamo pensato di dover fare qualcosa. Pensavamo fosse una grande idea, specialmente con le possibilità che offre @font-face, troppo buona per lasciarsela scappare. Ci siamo anche accorti che esistono un sacco di font gratis in giro, ma più che distribuire cose gratis,essendo designers (e lavorando soprattutto nel web) volevamo alzare gli standard della tipografia e del design nel web. Quindi abbaiamo avuto l’idea di una type foundry open-source, dove ci concentriamo sulla qualità e non la quantità, fornendo font scelti accuratamente.

Micah: é divertente, era partita come una sfida. Tutti dicevano “nah, non funzionerà” e “che idea scema” e il ribelle in me urlava “ah sì?!” Quindi abbiamo trovato quest’idea, ha funzionato, e ora cerchiamo di spingerla oltre.

DB: perchè avete scelto di aiutare la distribuzione di font open-source nel web? Cè dietro una filosofia riguardo il futuro di internet?

Caroline: Beh, vedi, siamo comunisti. No, scherzo.
La ragione per cui appoggiamo l’idea di font open-source, non è tanto per il fatto che siano gratis, cioè sì, ci piacciono le cose gratis, come a tutti, ma ci piace anche l’idea di un gruppo di persone con esperienze diverse, da tutto il mondo, lavorando insieme non per gli incentivi finanziari, ma per l’obbiettivo comune di creare qualcosa che funziona meglio di ora. Sta già succedendo con il software e vogliamo fare la stessa cosa con tipografia e design.

Micah:A me sembra piuttosto comunista. Mi piace. è quello su cui è stato fondato internet e penso sia il modello del futuro. Le persone oggi stanno facendo soldi su internet, di sicuro, ma penso sia solo una fase. Prima o poi non sarà piè quello il punto.

DB: è stato difficile lanciare il sito e trovare type designers che volessero unirsi a voi?

Caroline: per quanto riguarda trovare gente che si sia unita a noi, beh, abbiamo avuto un sacco di supporto da persone che apprezzano quello che stiamo cercando di fare e questo è stato molto incoraggiante per farci lavorare ancora più duramente su The League, e migliorarlo.

Ma trovare type designers che vogliano distribuire gratuitamente i loro typefaces, è piuttosto difficile, specialmente quando il loro sostentamento dipende dalla vendita dei typefaces. Ma siamo anche stati fortunati perchè alcuni designers sono molto generosi condividendo i loro typafaces. Stiamo parlando ovviamente dei nostri meravigliosi contributori.

Siamo super grati che vogliano condividere il loro lavoro con tutti e cerchiamo sempre nuovi designers per espandere/finire/migliorre anche i font che già abbiamo perchè penso sia il modo in cui The League possa mantenersi, se le persone si uniscono contribuendo al movimento open-source in qualche maniera.

DB: avete piani in serbo per espandere questo progetto in futuro?

Micah: penso che il problema più grosso che dobbiamo affrontare per i nostri piani futuri sia come convertire gli amanti della tipografia che non si considerano tipografici, in tipografici. Se chiunque vuole aiutare lavora insieme in qualche modo, possiamo rivoluzionare completamente la comunità del design su internet e l’industria tipografica professionale.
Siamo ancora a livello di brainstorming, quindi cerchiamo di raccogliere idee da chiunque sia appassionato all’argomento e non riesco nemmeno a contare le ore che io e Caroline abbiamo passato a discutere idee folli di cose che speriamo di poter fare.

come pensi che Moveable Type possa aiutare i designers, perchè dovrebbero sceglierlo?

Caroline: penso che The League sia utile non solo ai designers, ma a chiunque nella comunità web. Come parte di questo movimento open-source, designers, tipografici, programmatori, possiammo lavorare tutti insieme per migliorare la tipografia online e altrove.

Una delle cose che ci tengo a sottolineare a proposito di The League è che vogliamo offrire più che solo fonts gratis. Sì, i fonts sono lì per essere presi, ma i font gratis sono una risorsa limitata, quello che ci serve è un co-investimento, persone che restituiscano qualcosa e portino via anche un po’ di conoscenza o collaborazione per creare qualcosa di grandioso.

DB: cosa ne pensate dell’idea .openfont di Tal Leming & Erik Van Blokland? E di Typekit che affitta le licenze?

Caroline: Ho seguito la discussione sui webfonts e la la mia opinione è questa: type foundries, type designers, e imprenditori possono usare qualsiasi soluzione preferiscano fintanto che non significhi sbarazzarsi di @font-face e obbligare tutti ad adottare un unico standard di webfont.

Dovremmo avere una scelta. Lasciare il campo aperto permetterà a persone come noi (utilizzatori di fonts) di trovare le nostre soluzioni. Le compagnie e le type foundries continuerebbero a sfornare modi diversi di fornire fonts sul web, da typekit a .webfont a Fontdeck. Come dice John di ILT,

stiamo tutti impazzendo per trovare una soluzione che soddisfi i nostri bisogni finchè uno standard che funziona (…) sia prima o poi approvato e possiamo tutti tenerci per mano e cantare canzoncine.

A me sta bene e non vedo ragione per cui il movimento open-source non abbia la sua chance tanto come questi signori per trovare una soluzione. La vedo come un’occasione per la community open-source di lavorare insieme e trovarsi una nicchia nel mondo della tipografia web. Ci sono un mucchio di type foundries eccellenti con fonts di grande qualità, non vedo perchè la stessa cosa non possa valere per i font open-source. Credo che un giorno i font “gratis” (gratis in termini di libertà, non solo prezzo) saranno rispettati come i font rilasciati da una type foundry, è solo questione di tempo e noi stiamo cercando di fare la nostra parte.

Micah: devo dire che Caroline ha la mente molto più aperta di me. Prima di un paio di settimane all’interno della discussione a me non era parso che fosse ok finchè ci fosse una scelta. A me sembra proprio che le grandi type foundries vogliano seguire il modello Microsoft o Columbia Records. Sembrano direzionarsi sui DRM, che secondo me svantaggiano l’utente. Ero piuttosto stizzito dalla faccenda, ma penso che mi calmerò finchè The League sarà in grado di continuare il suo lavoro. Perchè li stenderemo.

DB: c’è una proprietà CSS3 che sperate prenda piede? al di là di @font-face.

Micah: è agli inizi, ma non vedo l’ora che tutti usino le colonne. Io le uso nel mio blog e, francamente, sono una bomba.

DB: avete qualche progetto futuro che volete farci conoscere?

Micah: ah, sì a dire il vero ce l’abbiamo! Ci stiamo stuzzicando con questa nuova idea. Lettercase, la chiameremo così, si tratta di un social font manager. Siamo ancora ai primi stadi del progetto, ma pensiamo abbia delle grandi potenzialitàe sebbene molti dettagli siano ancora in alto mare, dovreste tener d’occhio http://www.lettercaseapp.com

DB: ultima domanda, forse interessa solo a me: che musica ascoltate mentre lavorate?

Caroline: Ascolto un po’ di tutto, puoi vederne un po qui: http://blip.fm/chadilaksono

Micah: cani che si lamentano a ritmo del concerto di Bach in D Minore. O Noah and the Whale, a seconda del mio umore.

by Jasper Goodall | via Buamai

8 March byIunewind

Black Wood by Jordan Metcalf

Bolda Display by Morten Iveland

CMYK Lovers by Arbol Charyou

CrowdSourcing by Pablo Alfieri

Elevator Dubois meets Fugger by Darrin Umboh

Cups by Boey on Fubiz

Garamond III by Leonard Clagett


Since I saw her pictures she became my favourite photographer. The 16 yo Jacqueline Rivera has obviously a great talent. via BenTrovato

by Adolfo Correa

by El_Silencio photostream

Radical Element by Dr4oz

Try-Type by Til01

Wash Your Hands by BK1ll3er

Waste Not. Want Not. by Mike Campau

What Will You Defend? by kolOut

Sox, direttore della User Experience presso Vimeo.com ha gentilmente accettato di rispondere a qualche domanda per aiutarci a capire meglio il suo lavoro.
Ci parla di come pianificare un progetto, come affacciarsi a questa professione e cosa succede dietro le quinte di Vimeo. Inoltre ha consigli interessanti su come usare i wireframes che non dovete perdervi se avete letto Wireframes e ideazione.

DB: Ciao Sox, innanzitutto grazie per il tuo tempo e benvenuto. Cominciamo subito con le domande:
Qual’è il tuo background? Sei un autodidatta o hai seguito degli studi specifici?

Sox: Sono completamente autodidatta. Non ho seguito studi legati alla mia professione. Ho comprato alcuni libri, ma tutto ciò che ho imparato deriva dal semplice “guarda e prova”.
Sono un grande fan del reverse-engineering: cerca quello che vuoi fare, capisci come è stato fatto, adesso prova a farlo tu. Ci saranno sempre persone migliori di te nel tuo campo. Guarda e impara da loro.

DB: Quando hai iniziato questo lavoro?

Sox: Ho iniziato piuttosto presto. Nel 1995, appena uscito da scuola, ho trovato il mio primo lavoro come web designer in una piccola interactive agency in connecticut. Negli anni seguenti ho lavorato presso la Streaming Media Corporation, Priceline, Fotolog, e Vimeo. Sono anche stato un consulente in altri posti tra una cosa e l’altra.

DB: Puoi spiegarci qual’è esattamente il tuo lavoro ed in cosa consiste?

Sox: Sono il direttore della user experience presso Vimeo.
Le mie responabilità quotidiane comprendono supervisionare e costruire la complessiva presentazione ed esperienza di Vimeo.com. Personalmente eseguo l’ideazione di prodotti, la revisione di design e user experience, ma mi cimento io stesso in un po’ di disegno e programmazione se necessario.
L’obbiettivo principale del mio lavoro è mantenere Vimeo il più semplice possibile da capire, il più facile possibile da usare e il più divertente possibile da provare.

DB: Di solito come inizi un nuovo progetto? Hai un metodo che segui per l’intero sviluppo?

Sox: Dipende tutto dalla natura del progetto. Se si tratta di un lavoro di perfezionamento allora si comincia raccogliendo il maggior numero possibile di feedbacks dagli utenti e facendo i miglioramenti in linea con i nostri obbiettivi complessivi. Per un progetto che parte da zero l’intero processo dall’ideazione alla consegna richiede molto più tempo e sforzi.
Solitamentente si comincia individuando un area del nostro servizio dove possiamo aggiungere quanto più valore possibile senza compromettere gli obbiettivi finali (semplicità, facilità e divertimento). Chiamiamo gli stakeholders per discutere il progetto e arrivare alla decisione se portarlo avanti o meno. Appena abbiamo una conferma positiva inizia il vero lavoro.
Il nostro processo a Vimeo non è diverso dai cicli produttivi di altri prodotti. Pianifichiamo, disegnamo, sviluppiamo e poi ripuliamo tutto attraverso più passaggi finchè è pronto per essere testato prima che esca per gli utenti. Forse una cosa unica nel processo di Vimeo è l’agilità del ciclo produttivo.

DB: per qualcuno che sta iniziando quale sarebbe il suggerimento che daresti?

Sox: Impara facendo. Chiedi perchè prima di come. Trova le tue ragioni personali.

D: Cosa puoi dirci dei wireframes? Li usi molto? hai qualche consiglio o tecnica da condividere?

Sox: Disegno molto. Mi aiuta perchè non ho una grande immaginazione visiva. Mi è utile anche per esaminare i requisiti e trovare i limiti del lavoro.
Tenete sempre i margini vuoti. Se non incontrate domande che vanno risposte o problemi che vanno risolti mentre pianificate, o siete molto fortunati o state sbagliando qualcosa.
Tenete quelle domande e risposte ai margini mentre lavorate. Sono molto più importanti di qualsiasi cosa avete disegnato.

DB: Cosa ti ispira nel tuo lavoro? C’è qualcuno nel mondo online che pensi ti abbia influenzato?

Sox:Risolvere problemi è immediatamente gratificante e dà dipendenza. Vedo la maggior parte dei siti come sculture. Hai una visione di come diventerà. Ogni giorno aggiungi o togli un pezzo d’argilla, formando sempre più l’immagine ideale che hai in mente. Poi un giorno guardi la tua scultura da una prospettiva diversa e ti sorgono nuove domande, nuovi problemi e possibilità.

Ci sono molte persone il cui lavoro mi ha ispirato durante gli anni. I primi che posso citare sono Jesse Garrett, Dan Cederholm, Douglas Bowman, Jeffrey Zeldman e i ragazzi alla Stamen Design.

DB: Com’è lavorare a Vimeo? Cosa succede dietro le quinte?

Sox: è un ambiente rapido e fluido. Abbiamo una struttura semplice nella nostra organizzazione e ognuno lavora sui propri compiti quotidiani o pensa a cosa lavorerà dopo. Non c’è microgestione e ci fidiamo degli altri dipendendo a vicenda per completare le cose. Tutti sono collegati in un IRC interno dove monitoriamo lo stato dei sotto-sistemi del nostro sito e ci scambiamo idee.

DB: C’è una differenza a seconda delle dimensioni del sito su cui lavori?

Sox: Mi sono trovato in entrambe le situazioni e devo ammettere che preferisco lavorare in un medio-piccolo gruppo. In un’organizzazione più grande solitamente ho trovato più gerarchia e più stakeholders con interessi variegati o contrastanti che impediscono al progetto di procedere con l’energia, la concentrazione e la velocità che merita.

DB: Dal tuo punto di vista qual’è stata la cosa più difficile per Vimeo?

Sox: All’inizio l’importante era creare la giusta attitudine del servizio e della sua community. Devo capirlo e sentirlo fin dentro alle ossa prima di cominciare a contribuire. Fare il primo passo nella giusta direzione è sempre fondamentale per me e richiede tempo. Ultimamente ho speso più tempo concentrandomi sulla scalability delle mie idee e che impatto avrebbero sulle performance del sito (la cosa più importante nella user experience di ogni progetto).

DB: Hai strumenti senza i quali non potresti vivere?

Sox:Onestamente non penso conti molto. Ma direi che per me sono una buona penna e un foglio bianco. I programmi che uso parecchio quotidianamente sono Textmate e Firebug. Ci affidiamo anche ad alcuni strumenti interni per controllare il nostro lavoro.

DB: i tuoi 5 siti preferiti?

Sox:intendi oltre quelli di ciclismo? vediamo.. Google, Gmail, Google Reader, Tumblr e Flickr.

Se volete dare un’occhiata ai suoi disegni e wireframes Sox ha un fantastico set di foto su Flickr. è anche un’ottima occasione per vedere com’è nato Vimeo.

Dalla Norvegia arriva un altro progetto che condivide gli ideali di Chrome OS anche se probabilmente ne è un’alternativa o quanto meno un suo accessorio.
Opera Unite trasforma il nostro computer in un server.
Si può continuare ad usarlo come un normale computer, ma in
più potremo condividere con i nostri amici o con chiunque siamo connessi i dati che abbiamo nei nostri drives.
Questo articolo è legato a Chrome OS: Revolutionary?

Opera Unite

I quartieri generali di Opera dicono che va anche inteso come un modo per riguadagnare potere sui nostri dati e sulla nostra libertà di decisione per certi versi.
Oggi dobbiamo affidarci a servers di provider esterni che ospitano le nostre cose o a servizi esterni che ospitano le nostre informazioni, dovendo accettare i loro “terms of service” (es. facebook, myspace, etc.)

Our computers are only dumb terminals connected to other computers (meaning servers) owned by other people — such as large corporations —
who we depend upon to host our words, thoughts, and images. We depend on them to do it well and with our best interests at heart.
We place our trust in these third parties, and we hope for the best, but as long as our own computers are not first class citizens on the Web, we are merely tenants, and hosting companies are the landlords of the Internet.
Social networking is important, but who owns it — the online real estate and all the content we share on it?
How much control over our words, photos, and identities are we giving up by using someone else’s site for our personal information?
How dependent have we become?
I imagine that many of us would lose most of our personal contacts if our favorite Web mail services shut down without warning.
(…)

Opera Unite rende possibili connessioni dirette tra i computer
senza operatori esterni. Invece di usare un servizio basato online (penso sempre a facebook o twitter) potremmo usare un programma installato sul nostro computer e su quello dell’amico a cui siamo connessi.

Vediamo un esempio pratico per comprendere meglio come
funziona.
C’è un’applicazione disponibile già ora che si chiama Simplify. La installi, crei un account, scegli le cartelle sul tuo computer da condividere e apri il tuo player multimediale preferito.
Se hai degli amici che usano Simplify e sono connessi puoi ascoltare
qualsiasi canzone loro abbiano sul computer. Ovviamente vale lo stesso vice versa (è veramente figo, l’ho provato.)
Quindi è come avere a disposizione tutti quei giga che fisicamente sono invece sul computer del tuo amico.

Opera promette di fare qualcosa di simile (hanno anche gi&agrave un
mediaplayer che fa quasi la stessa cosa ma peggio di Simplify) con il vantaggio di estendere il principio ad un numero infinito di possibilità visto che si potranno creare molte applicazioni e
funzionerà su qualsiasi sitema operativo, l’API key sarà accessibile a tutti.

Devo ammettere che la mia eccitazione è smorzata dal fatto che mi ricorda molto dei noti protocolli peer to peer. Ovviamente &egrave grandioso che stiano sviluppando il concetto per ogni tipo di applicazione però l’idea non è poi così nuova.
Comunque si comincia a capire che il futuro sarà passare completamente online, ma Unite sta prendendo una posizione e una direzione diversa dai trend attuali.

Chrome OS cerca di proiettare il nostro lavoro completamente online rendendolo sempre accessibile e permettendo di mantenere i computer veloci e puliti.
Seguendo questa filosofia la logica associazione che viene in mente è cloud computing, con i nostri dati ospitati da qualche parte online e quindi anch’essi sempre disponibili.
Opera Unite invece vuole che tu riprenda in mano il potere sui tuoi dati e la tua identità online rendendo l’individuo l’unico giocatore.

Due approcci diversi ad un futuro sempre più vicino. Cosa preferireste?
Secondo voi quali sono i pro e i contro?

Attenzione: potrebbe impiegare un po’ a caricare perchè contiene molte immagini.
Ne vale la pena però.

Se mai pubblicherò un album voglio che il mio disco sia così.
via Design Boom

Infographic poster creato da alcuni studenti del Politecnico di Milano in collaborazione col laboratorio Density Design.
Flickr Author Gallery | DensityDesign

Infographic poster by DesigningTheNews dove Dave studia e sperimenta la visualizzazione delle informazioni.
Designing The News

Bella raccolta di fotografie con riflessi molto vividi.
Original Picture | via 10steps

Romain Laurent | via My Modern Met

Fotografie di moda di Chris Searl.
Chris Searl | via Ben Trovato

Incredibili dipinti della svedese Linnea Strid. Estremamente realisti ed evocativi.
Linnea Strid on Flickr | via Evasion

Neill Cameron ha lanciato un gioco divertente sul suo blog: disegnerà un poster per ogni lettera dell’alfabeto inserendo un personaggio dei fumetti in qualche situazione ridicola. L’unica regola è che tutto deve iniziare per quella lettera. E a scegliere gli elementi sono i fan.
Neill Cameron | via Diskursdisko

FormFiftyFive è un blog fantastico che purtroppo ho scoperto un po’ tardi visto che mi pare essere attivo già da un po’. Il design è stupendo ed è anche un’ottima fonte di ispirazione.
FormFiftyFive

Kleber Studio è uno dei grandi nomi nel business e recentemente hanno rimodernato il sito. Tema molto interessante, dategli un’occhiata.
Kleber

Fa parte di un lavoro d’identity che Jens Nelsson ha fatto per un coffee shop di Stoccolma. Mi piace come ha giocato con la “o” otenendo un risultato forte con semplicità. Dopotutto Leonardo diceva che la semplicità &egrave è l’ultima forma della sofisticazione.
Dancemade

Richard Hogg è un illustratore di grande talento e adoro i suoi lavori. Su Creative Review c’è anche una sua intervista in occasione della sua ultima mostra. Date un’occhiata ad entrambi i links.
Richard Hogg | CreativeReview interview

Wooooo è un magazine rilegato come un libro. E già lo trovo molto figo. Ci sono articoli ed interviste molto interessanti a personaggi piuttosto estrosi.
Wooooo Magazine | via CreativeReview

Ali Agur ha pubblicato un booklet dove raccoglie tutti i flyer che ha creato nel periodo 88–93 per Plastic People, un club di Londra. Adoro i flyers quando sono originali e penso che per un artisti poter ricapitolare un periodo della propria vita e del proprio lavoro in un libro sia una grande soddisfazione. Inoltre è interessante sapere ch ha usato Blurb
Ali Agur | via Creative Review

StatKey | via CoolHunting

Bad ass, right? Realizzata per gli spiriti liberi costretti nella città.
Mac Motorcycles

Non sono sicuro di quanto sia utile, ma è una soluzione molto chic per raccogliere tutte le vostre riviste sparse per casa.
Malafor | via Design Boom

Incredibile complesso di edifici in Beijing collegati insieme. Un progetto dello Steven Hall studio.
Personalmente vorrei vedere molte più costruzioni di questo genere nelle nostre città.
Steven Hall | via Design Boom