Loren Ipsum

http://www.lipsum.com/

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

The Education of an Art Director

Interessante pubblicazione: dopo aver scopiazzato per settimane dal sito www.carbonesmolan.com ho scoperto che il titolare dell'agenzia con sede a New York, Ken Carbone ha scritto un interessante libro in cui parla di come si relaziona un Art Director di livello come lui con il cliente e quali strumenti utilizza per capire ciò di cui il suo committente ha bisogno, prima partire con il design. Non arriveremo mai al suo livello ma ci sono buoni spunti da cui partire...

http://www.allworth.com/Catalog/DW392C.htm

Testo e uso dei font

In rete come sulla carta, l'aspetto di una pagina dipende in gran parte dal tipo di carattere tipografico (font) usato. La semplicità di questa "regola aurea" si scontra, però, con gli innumerevoli problemi cui vanno incontro i web designer esperti e i principianti. La gestione dei font su Internet è, infatti, ben più complessa. I motivi principali: da un lato il ristretto numero di combinazioni possibili nella composizione del testo; dall'altro, paradossalmente, l'enorme quantità di font utilizzabili.

Il corpo di un carattere, misurato in punti, è il primo problema. Su un libro o una rivista, l'occhio umano può sopportare agevolmente anche un carattere a corpo 8, su uno schermo generalmente no. Questo non vuol dire che un corpo 8 non si possa usare: per determinati contenuti (disclaimer, informazioni di copyright, etc.) un corpo 8 va benissimo anche su uno schermo. Un 12 punti, in qualsiasi altro caso, è il minimo corpo leggibile senza affaticamento dell'occhio. Un altro grosso problema è l'uso delle grazie. È opinione comune che un carattere graziato come il Times offra la massima leggibilità su una pagina a stampa. Il discorso cambia molto quando leggiamo ad esempio le pagine di un quotidiano on line: i caratteri bastone affaticano sicuramente di meno. Se proprio si vuole usare un carattere graziato, è opportuno sceglierne uno con grazie squadrate, occhi regolari e pari spessore tra le aste. In generale, comunque, lo schermo offre all'utente una risoluzione molto minore rispetto a quella di un documento a stampa. Per questo motivo è opportuno, anche in documenti ad alta densità di contenuto, non affollare lo schermo di blocchi di testo. Al di là dei comuni parametri e valori attribuibili ai font (allineamenti, colori in codice esadecimale e non, grandezze relative e assolute, specifiche del tipo di font) l'HTML non offre una grande possibilità di agire sul testo. Inoltre, come è noto, ogni utente ha il proprio browser impostato su determinati parametri di visualizzazione, e potrebbe anche aver impostato i suoi caratteri predefiniti come regola "prevaricatrice". Per questo motivo, la maggior parte dei designer si affida alla soluzione del bitmap text (immagini che contengono testo, utili per titoli, bottoni, etc). Ad ogni modo, si può giocare con quei pochi elementi che l'HTML offre per comporre una pagina di testo in modo piacevole, con un occhio alla creatività personale e uno (ben più analitico) al target specifico del nostro documento. Un documento commerciale differirà nello stile da uno dedicato all'intrattenimento, uno tecnico da uno dedicato alla formazione. Fermo restando il valore dei caratteri sans serif per una lettura rilassante, si possono variare gli stili (italic, bold, underlined e plain) o gli allineamenti: un testo sbandierato a sinistra diventa subito un elemento di originalità che può contraddistinguere un intero sito. È opportuno ricordare che le famiglie di font (ad esempio un Helvetica, o un Garamond) hanno quasi sempre tutte le varianti di stile possibile (Helvetica regular, light, medium, bold, italic, condensed ed extended). Usare un italic con un carattere come questo significa usare in modo legittimo un "membro della famiglia". Usare un italic con un font che non ha altri stili che il plain, costringe il browser a simulare un corsivo inclinato in un carattere che non è stato pensato per questo uso. Il risultato non è quasi mai soddisfacente. Qualsiasi impostazione stilistica si voglia dare alla pagina, comunque, è opportuno usare sempre lo stesso font in un sito. Un accurato bilanciamento della pagina ha sempre come risultato una maggior scorrevolezza e facilità d'utilizzo.

Detto questo, non va trascurata una evidente realtà: su Internet ogni giorno nascono decine di font diversi, belli e meno belli, prodotti da singoli appassionati e da aziende interamente dedicate a questo settore. Chiunque, con l'aiuto di un software come Fontographer di Macromedia può disegnare il proprio font personale e metterlo a disposizione della comunità. Più semplice e altrettanto divertente, fare un po' di "surfing" nei numerosi siti che distribuiscono font shareware o freeware

Alcuni link:

Transmission23 (http://www.transmission23.com/fonts/index.html)
Larabie Fonts (http://web.mit.edu/zudark/larabiefonts/)
UnAuthorized Type (http://www.latech.edu/~bmcgehee/untype/index.htm)
Emerald City (http://www.speakeasy.org/~ecf/)
FontFace (http://www.fontface.com/)
TypeRight (http://www.typeright.org/)
Chankstore Fonts (http://www.chank.com/)
Fontastic! (http://rover.wiesbaden.netsurf.de/~kikita/)
Astigmatic One Eye (http://www.comptechdev.com/cavop/aoe/)
Font Kingdom (http://homepages.tig.com.au/~muzzle/fontk/)


Da un articolo travato in rete:
Ci sono volute quattro generazioni di browser, ma alla fine la possibilità di specificare un font particolare per le proprie pagine è diventata realtà. TrueDoc per Navigator 4 e OpenType per Explorer 4 permettono ai designer di includere nei documenti non solo le istruzioni specifiche di font, ma anche un'immagine del font stesso racchiusa in un file che viene scaricato come fosse un'immagine durante il caricamento della pagina. In tal modo, anche non avendo una grossa collezione di font sulla propria macchina, chiunque potrà apprezzare il design di una pagina visualizzata con il font creato o scelto appositamente per essa. OpenType si avvia a diventare uno standard per il sistema operativo NT 5.0. Per adesso non è completamente supportato nemmeno da Windows98. Considerando che dietro OpenType si nascondono due nomi come Microsoft e Adobe, non c'è dubbio che anche Apple presto implementerà questo sistema. TrueDoc per adesso è il più diffuso strumento di inclusione dei font nei documenti, è stato selezionato come lo standard per i Network Computers, funziona su tutti i tipi di sistema operativo, ha un completo supporto Java, lavora su qualsiasi set di caratteri (non solo su quello europeo) e soprattutto offre comprime le informazioni in file veramente minuscoli. Le due tecnologie non si escludono tra loro: si possono costruire pagine con specifiche OpenType e TrueDoc nello stesso documento, per permettere una corretta visualizzazione in Netscape e Explorer. Quel che più importerà ai font designer, entrambe le tecnologie offrono un vantaggio fondamentale: la sicurezza. I file che rappresentano l'immagine di un font, infatti, non possono essere scaricati e utilizzati liberamente da chiunque. Funzionano esclusivamente sul server web in cui sono situati: un tentativo di usarli su altri server farà sì che il browser paragoni il dominio del sito con quello incluso nel file del font, noti la discrepanza e semplicemente non riproduca il font. In conclusione, nemmeno il font embedding poteva sfuggire alla logica del duopolio, e infatti c'è da scommettere che finché esisterà la scelta tra due tipi di browser le due tecnologie di font embedding coesisteranno tranquillamente.

Gestalt

Tra la fine dell'ottocento ed i primi anni del novecento si svilupparono in Germania le teorie sulla percezione visiva; il primo a compiere studi su come la disposizione degli oggetti nello spazio ed il loro movimento influenza la nostra percezione visiva, fu Max Wertheimer. Mentre con il treno si dirigeva verso una località dove avrebbe trascorso un periodo di vacanza, ad un passaggio a livello fu attratto dall’alternanza delle luci rosse di segnalazione; abbandonò immediatamente l’idea del soggiorno fuori porta, acquistò uno Zoetrope, strumento per animare immagini, e iniziò le sue sperimentazioni. Oggi il dirompente prolificare di Internet e degli applicativi informatici in genere, ci ha portato ad un grande aumento della produzione di interfacce, per i più svariati utilizzi. E’ chiaro ormai, che per poter rendere fruibili da parte degli utenti le pagine di un sito o le schermate di un applicativo informatico, è necessario organizzare gli elementi che debbono comparire all’interno del campo visibile secondo poche e semplici regole, che aiutano il designer a distribuire adeguatamente gli elementi nello spazio e coloro che leggono o guardano a comprendere il messaggio che gli si vorrebbe passare. Dopo moltissimi anni dalla loro nascita e sviluppo, le teorie della Gestalt o teoria della percezione visiva, trovano nella nuova era della comunicazione visiva una loro applicazione.

Prima che il designer si dedichi allo sviluppo dell’interfaccia sono già state affrontate le problematiche relative all’usabilità del prodotto, è già stato stabilito quali e quanti dovranno essere i contenuti e molte volte i programmatori hanno già messo mano al codice e sono pronti a fornire i contenuti necessari per riempire quelle pagine. Esiste lo scheletro dell’applicazione: può essere un sito Internet o un software, non fa differenza. Il compito del designer a questo punto è quello di vestire l’applicativo, dunque una volta considerato lo spazio a sua disposizione deve disegnare una scatola in grado di soddisfare principalmente due aspetti: il contenitore deve dare un immagine al suo contenuto, studiata in base al target di riferimento e all’argomento trattato, e allo stesso tempo deve presentare chiaramente i contenuti facilitando il più possibile all’utente la comprensione di questi ultimi, in pratica deve essere usabile ed accessibile.

Partendo dal presupposto che l’immagine che l’interfaccia dà a chi guarda è molto importante, soprattutto per noi che ci occupiamo di webdesign, ed è legata a molteplici aspetti emozionali, di mercato e mirati verso il prodotto che si vuole presentare, le leggi della Gestalt ci aiutano nella distribuzione spaziale degli elementi, sono semplici, e si basano sull’interpretazioni che il nostro cervello dà alle immagini che l’occhio gli invia.

Avendo a disposizione uno spazio finito, come quello che sempre ci si trova a dover riempire quando è richiesto lo sviluppo di una nuova interfaccia, gli elementi che debbono essere inseriti in quella schermata non sono tutti importanti allo stesso modo, non trattano tutti lo stesso argomento e per questo bisognerà organizzarli facendo in modo che si distinguano bene uno dall’altro e che permettano all’utente di fruire delle informazioni contenute in quella pagina più facilmente possibile. Per porre in essere queste condizioni sarà necessario operare seguendo alcune piccole attenzioni che le leggi della Gestalt ci propongono.

Ad esempio avvicinando elementi gemelli, si tenderà a dare l’impressione che questi elementi servano da delimitatori di uno spazio; immaginiamo di avere una serie di barrette tutte uguali e parallele, se avvicinate tra di loro a coppie daranno l’impressione di essere dei bordi di zone delimitate da loro stesse. Più semplicemente se volessimo costruire un separatore per dividere ad esempio la parte superiore da quella inferiore di una pagina web potremo usare una serie di pallini, allineati su due file disposte in orizzontale; sparsi nello spazio sarebbero solo dei pallini dispersi su un fondo colorato, mentre raggruppati in questo modo costituiscono un oggetto con una precisa funzione.

Per facilitare la comprensione di chi si trova a dover leggere dei dati contenuti in una pagina web spesso è necessario organizzali in modo da renderli più facilmente accessibili. Pensiamo ad esempio ai nuovi servizi on line delle banche che ci permettono di controllare in ogni momento il conto corrente. Tutte le operazioni sono disposte in ordine cronologico, in alto l’ultima effettuata e in fondo la prima del periodo visualizzato. Il saldo è sempre terribilmente contrassegnato dalla riga rossa ed è in alto ben visibile, anche se noi non vorremmo mai vederlo dopo il 27 del mese, mentre tutte le righe che recano dati di pagamenti effettuati con carta di credito sono contrassegnate da un certo colore, quelle con i pagamenti via bancomat con un altro colore, i bonifici un altro ancora, e siccome si tratta di uscite sono sempre colori che tendono verso il rosso, mentre lo stipendio, la voce più gradevole del conto corrente è uno degli emolumenti a vostro favore ed è dunque contrassegnato da un bel colore vivace solitamente tendente al verde. Solitamente le righe tendenti al rosso sono sempre in numero spropositatamente maggiore rispetto a quelle verdi, ma in questo modo sono tutte facilmente individuabili. Colori uguali portano dati uguali, e il nostro cervello tende automaticamente a raggruppare gli elementi simili. Sempre di più il designer si trova a dover vestire pagine con molti contenuti ed è quindi necessario usare altri stratagemmi per distribuirli al meglio. Spargendo le immagini, le parti di testo e il link in giro per lo spazio a disposizione anche se contrassegnati da colori uguali non sarà semplice per l’utente raggrupparli e capirli, meglio dunque racchiudere gruppi di informazioni dentro veri e propri recinti. Subito il pensiero va ai grandi portali, quelli delle grosse compagnie della new economy, quelli dove si può trovare di tutto dalla mail gratuita alle ricette della nonna, dai percorsi per la gita della domenica alle ultime notizie, senza dimenticare i blog e naturalmente la pubblicità. E’ qui che troviamo la massima espressione del raggruppamento per argomenti: in alto il box con l’accesso alla mail o la ricerca, poi appena sotto un altro box con le notizie, a destra un altro con l’elenco dei blog più ciccati e così via…

Di seguito due esempi:


* L’ultima release di www.libero.it che sfrutta in pieno il sistema del raggruppamento per argomento.


* Piemonte Emozioni (www.piemonte-emozioni.it) il sito della regione Piemonte per la promozione turistica e culturale. Il sito è sviluppato dal CSI-Piemonte in collaborazione con lo Studio Livio di Torino che ha curato la grafica; anche in questo caso sono sono stati creati degli spazi finiti all’interno dei quali gli argomenti sono trattati singolarmente in modo che ci sia netta distinzione tra di loro; inoltre su questo sito le zone dedicate agli argomenti sono colorate diversamente in modo da rendere ancora più evidente la distinzione.



A poco a poco stiamo entrando dentro l’essenza dei principi fondamentale della Gestalt o meglio dei principi della Gestalt che possono applicarsi alla costruzione di interfacce; l’ormai famoso “utente” ha sviluppato durante gli anni di navigazione sul web o di utilizzo dei più diffusi applicativi delle abitudini, che probabilmente sono state indotte da coloro che fin dalla nascita delle interfacce hanno studiato il comportamento dell’utente stesso e creato situazioni congeniali all’utilizzo delle interfacce. Detto così sembra un concetto tanto astratto quanto incomprensibile, ma effettivamente a mezzo di un semplice esempio penso che sia facilmente interpretabile.

L’immaginazione va subito al “cerca”. Quel remoto campo di inserimento testo che tante volte cerchiamo disperatamente in una pagina Internet e che nel peggiore dei casi non troviamo, molto utile a patto che funzioni correttamente, e che per convenzione non scritta oggi i designer tendono a piazzare in alto a destra nella pagina, una posizione gerarchica appena inferiore a quella del logo o titolo del sito. Ognuno di noi tende a riconoscere quello che ha già visto, e quindi nel caso di un interfaccia ad andarlo a cercare con lo sguardo, nel posto e con la forma in cui è abituato a vederlo.

Uso del colore

Il colore è in tutto quello che vediamo. Ogni oggetto davanti ai nostri occhi è colorato, o almeno lo vediamo come tale, tanto che quando ci capita di rivedere le immagini in bianco e nero che la televisione trasmetteva fino alla metà degli anni ’70 sembra di fare un salto nel passato, e qualche volta pare che il mondo di allora fosse tutto così… in bianco e nero. Pare invece che così non fosse, la differenza sostanziale è che adesso la tecnologia permette di sbizzarrirsi con l’uso del colore, soprattutto con i mezzi di comunicazione. Oggi anche i telefoni cellulari propongono interfacce colorate, fotografie a colori, video a colori e quant’altro.

Il colore aggiunge qualcosa di impareggiabile ai supporti visivi, ma perché possa agevolare tutti noi nella comprensione di ciò che stiamo guardando va utilizzato con attenzione, altrimenti diventa una complicazione in più e non agevola la comprensione; è per questo che l’usabilità di un interfaccia dipende fortemente dal modo in cui il colore viene utilizzato per costruirla.Colore = EmozioneLa forma è predominante rispetto al colore, ma quest’ultimo non è da sottovalutare, nella creazione di interfacce va sfruttato a pieno come elemento caratterizzante per ognuno degli elementi in campo, tenendo anche in considerazione gli aspetti culturali legati al colore che ormai hanno legato i colori diversi alle situazioni più svariate; il rosso come sappiamo è legato alla forza e alla passione la Ferrari è rossa, mentre se ci si trova davanti alla richiesta di sviluppare un interfaccia per un sito dedicato alle specialità alimentari i colori più indicati saranno caldi, vivaci e un pò saturi… giallo o arancio. Al contrario se è un agenzia di assicurazioni a richiedere un nuovo layout i colori più indicati saranno il blu e tutti suoi derivati, colori tranquilli che evocano sicurezza e controllo. Potremmo procedere con innumerevoli esempi anche se per farsi un idea dell’uso del colore in associazione con i più svariati ambiti di interesse non c’è da far altro che navigare per un po’ sul web, e presto ci si renderà conto che spostandosi tra siti dello stesso ambito si troveranno più o meno gli stessi accostamenti cromatici, a patto che ci si orienti sempre verso la stessa zona del globo, perché ognuna delle culture più diffuse sulla terra associa agli stessi colori significati differenti.Facendo ancora una volta riferimento ai principi della Gestalt, per il designer che deve dare forma ad una mole di dati composta da testo ed immagini all’interno di uno spazio ben definito, il colore rappresenta la migliore strada da intraprendere per poter distinguere tra di loro i gruppi di informazioni, gli argomenti di un sito, le zone di interesse all’interno dell’interfaccia.

Un metodo semplice per dare risalto ad un oggetto nella pagina, piuttosto che ad un altro, è quello di colorarlo con tonalità vive, colori brillanti in modo che la quantità di luce da lui sprigionata (facciamo riferimento a colori RGB) sia maggiore rispetto a quella degli altri elementi nella pagina e quindi l’occhio umano maggiormente attratto. Possiamo facilmente notare ad esempio, che nelle pagine on line dei grandi quotidiani il colore di fondo è sempre il bianco e le scritte generalmente sono nere, mentre i banner che campeggiano in testa alla pagina il più delle volte vengono studiati appositamente con colori sgargianti in modo da attrarre lo sguardo del lettore.I colori sono quanto di meglio possiamo utilizzare per dare vita alle nostre creazioni, per renderle al passo con i tempi e per enfatizzare il messaggio che si intende trasmettere, però non tutti i colori sono utilizzabili contemporaneamente perché l’accostamento di colori richiede attenzione. In primo luogo non tutti i colori “stanno bene” vicini, l’effetto sortito magari non è gradevole all’occhio. Ma questo è il problema minore basta prestare un po’ di attenzione, navigare e cercare gli accostamenti più strani ma allo stesso tempo più efficaci, sperimentare elementi uguali con colori differenti fino a scovare la combinazione adeguata, prestando sempre attenzione all’argomento di riferimento, ed informandosi su quali accostamenti sono già stati usati per trattare argomenti simili.Uno degli stratagemmi più comuni per poter utilizzare accostamenti audaci e allo stesso tempo separare bene gli elementi all’interno della pagina rimane quello di utilizzare dei bordi, che assolvono contemporaneamente alla funzione di separazione tra lo spazio totale a disposizione per lo sviluppo dell’interfaccia e quello ristretto riservato ad un preciso argomento ed allo stesso tempo dividono il colore di fondo principale da quello scelto per la forma in cui è stato racchiuso l’argomento di cui sopra, permettendo di accostare colori particolari, ma soprattutto garantendo una migliore possibilità di messa a fuoco per l’occhio umano, a patto che si usi un colore molto contrastato e luminoso per il bordo stesso che non si deve confondere con gli altri due colori che lo circondano.In generale l’uso di colori saturi agli estremi dello spettro, in accostamento oppure no, provoca difficoltà di messa a fuoco, così come l’utilizzo del “blu” per i testi non è indicato perché anch’esso tende ad essere difficile da mettere a fuoco soprattutto per i meno giovani. Il “blu” è ottimo per gli sfondi.Cercando di rendere usabile l’interfaccia in sviluppo ad un numero più ampio possibile di utenti, andrebbero prese in considerazione anche le problematiche relative a coloro che non hanno una percezione del colore normale. Il daltonismo interessa una percentuale considerevole della popolazione (9% degli uomini e 0.5% delle donne) e l’utilizzo di certi colori, in particolare il rosso ed il verde, può rendere inaccessibile un interfaccia a coloro che hanno problemi nella distinzione di questi colori, anche se esistono varie forma di daltonismo.Gli accorgimenti minimi possono essere quelli di non usare assieme o vicini il rosso ed il verde, mentre il blu ed il giallo vengono normalmente riconosciuti senza problemi, usare sempre dei colori brillanti ed accostare sempre gli sfondi appropriati in modo da esaltare il contrasto tra i colori.Le linee guida per sviluppare contenuti grafici adatti ad un pubblico daltonico sono parecchio complesse ma oggi anche sul web, è possibile trovare strumenti automatici in grado di valutare la bontà degli accostamenti cromatici scelti dal designer.

Ricerche

Da qualche giorno le mie ricerche nel mondo dell'usabilità associata alle problematiche del design per il web publishing stanno copiosi frutti, quindi si rende necessario uno spazio dove poter inserire i contenuti che oggi tengo nascosti nei meandri di un PC e renderli "accessibili" a tutti.