Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

sabato 11 gennaio 2014

Blog a colori

rapporto colori e design funzionale
A me piace ragionare in termini di usabilità quando penso ad un blog o ad un sito web ma quando iniziai a pensare a quale CMS adoperare per il mio blog sarei un bugiardo se non ammettessi che il modo in cui blogger metteva a disposizione i colori rispetto allo stiloso e pluri-affermato WordPress  mi sembrò al quanto puerile.

 Il tempo poi ha fatto il resto facendo emergere bisogni e necessità come in quasi tutte le cose che hanno a che fare o si intersecano con il nostro curioso modo di esperire perciò è inutile che faccia il figo sostenendo teorie che si sono solidificate strada facendo..

..sta' di fatto che i colori li scelsi comunque a quei tempi in cui stavo iniziando e che è innegabile che ne sapessi molto meno di adesso.

Fortuna? Caso? Doveva andare così?


...potrei continuare ad oltranza ma sappiamo che sarebbe inutile mentre invece ciò che conta è che in un certo senso con la necessità di sviluppare i vari servizi e le funzionalità di questo Blog l'idea su Blogger ed i colori si è trasformata sempre di più in stima e rispetto.

Se al nocciolo bisogna andare il confronto in questo caso è con i modelli di Wordpress (ma anche quella che è divenuta la scelta convenzionale in quasi tutti i CMS attualmente + in voga) che usano al massimo 2 colori mentre io ne adopero addirittura 6 e chiedersi perché mai?

Visto che nella mente di chi decide non ci vivo e a malapena sopravvivo nella mia che procede per ipotesi e accertato che la mia conoscenza poco approfondita di storia del design è un dato di fatto è difficile risalire alle motivazioni che hanno ristretto il numero dei colori adoperati...o determinato questa tendenza conformista..

..perciò procederemo a tastoni nel buio il che mi pare la migliore rappresentazione mentale che possa usare per riportare il percorso di apprendimento che mi sono trovato ad affrontare che è conseguito al processo decisionale del posizionamento degli elementi (widget) nel layout del tema.

Quindi è bene precisare che trattasi di un report di cosa ho imparato strada facendo e di come legge il mio occhio determinati aspetti che si sono prospettati man mano che procedevo verso la realizzazione finale;inutile dirvi che quando ci si trova a maneggiare così tanti elementi e per lo più colorati la difficoltà sia insita nel realizzare una visione d'insieme quanto più possibile armoniosa ma che obbedisca anche ad una logica che oltre ad essere personale e soggettiva dovrebbe avere come obiettivo quello il divenire oggettivamente comprensibile.

Facendola semplice vi dovrebbe essere per lo meno una differenziazione delle funzioni e dei servizi attraverso la creazione di categorie cromatiche.
Quindi se forse enfatizzando anche troppo riferendomi al web design applicato alla pratica del Drag & drop usavo la parola sfida quando si scelgono i colori potremmo parlare di prestare un'attenzione progettuale. 

Vi è un'alternativa? 

Beh un assortimento casuale style arlecchino in cui l'utente non troverà alcuna coerenza o linea di lettura al fine di garantire una efficiente ed efficace navigazione con l'aggravante che se non coordinerete bene i colori in base alla compatibilità o tolleranza data dalla vicinanza o dalla lontananza probabilmente otterrete anche un ambiente di navigazione che può generare in colui che lo visualizza un effetto finale di poco gradimento.

 Quest'ultimo anche se il Blog-Sito fornisse i migliori contenuti è talmente potente che potrebbe addirittura compromettere anche se parzialmente l'opinione sulla vostra attività in rete....i colori agiscono su parametri emozionali che uniti all'aspetto conforme o originale del vostro sito possono comunicare amplificare o mortificare l'immagine che l'utenza ha della vostra presenza in rete.

Anche se come sapete bene non condivido le scelte ardite in fatto di grafica specie se fatte a scapito della user experience e dell'accessibilità un Blog è pur sempre un'ecosistema in cui accogliete i fruitori web e con il quale vi presentate in Internet.

 Sfruttare per quel che è possibile l'equilibrio tra gradevolezza estetica a funzionalità rendendola la prima a favore della seconda non è certo un aspetto che gioca a nostro sfavore ma è un vantaggio come non è obbligatorio intraprendere necessariamente le strade ardite del sofisticatissime del design per raggiungere risultati degni di nota e dignitosamente accettabili;

si possono ottenere buoni risultati con applicazione e semplicità!

Lo scopo è catturare l'attenzione----> poi ospitare----> ed infine condurre per mano ed agevolmente nella nostra struttura-Blog l'utente!!

Per semplificare io procedo con questo metodo:


Innanzitutto decido le categorie di colori a cui attribuiscono cadauna una finalità strumentale poi stabilisco le gerarchie che determineranno un ordine di importanza-gerarchizzazione della navigazione e di funzione poi passo a provare le relazioni ed i rapporti tra gli elementi ed infine faccio le opportune scelte basandomi su soluzioni si spera ottimali altrimenti di compromesso o conformiste.
Su come scegliere gli elementi ho già scritto una serie di articoli che se volete approfondire potete trovare nella categoria Web Design mentre per la sacra legge della differenza manca la mia esperienza empirica realizzato con i colori.

Tratterò solo le principali senza dilungarmi su tutte le casistiche:

  • Pur sembrando banale il foglio digitale non risponde cromaticamente come la carta e perciò è possibile estendere il ventaglio dei colori papabili anche alle tonalità sgargianti e fluorescenti questa possibilità aggiuntiva si rivela particolarmente funzionale nel qual caso si debbano far risaltare bottoni e tasti rispetto ad altri.Ho delegato a questi colori come il verde fosforescente e le sue tonalità le funzioni meno conosciute rispetto alle icone ed i colori già conosciuti o per convenzione o per fama.
  • Nel momento in cui ci si trova a posizionare gli widget il mio metodo consiste nel dare la precedenza alle posizioni convenzionali nel layout tenendo sempre a mente che rispettarle crea subito una sorta di mappa riconoscibile per la mente del navigatore facendogli risparmiare minuti utili di navigazione e riducendo lo stress per poi passare all'organizzazione dello spazio vuoto rimasto in cui inserirò gli widget-icone-funzioni-strumenti meno conosciuti.
  • Nella fase in cui decido la posizione degli widget i colori vengono scelti in base ai rapporti di armonia visiva dati dalla lontananza dalla vicinanza ma anche dall'intermittenza. Un esempio può essere prendere in esame il menù drop-down presente sul mio blog in cui i tasti di scelta nel momento in cui vi passate sopra sono di una tonalità azzurra;il colore in questione mi piace molto ma poteva porsi il problema di contrasto e conflitto con il widget di colore verde posto accanto a causa della vicinanza ma se il menù in questione entra in funzione episodicamente ad intermittenza ne consegue che se anche dovesse avvenire questo si verifica solo per un breve lasso di tempo.Fortunatamente il colore azzurro non è comunque in forte contrasto con il verde accesso.
    Come faccio a dirlo?
    In verità mi baso sul mio colpo d'occhio ma per essere più sicuro uso questo servizio hex-code. Un altro aspetto-fattore che può far Tollerare due colori che non generano consonanza può essere la vicinanza e la lontananza;sempre per fare un esempio possiamo prendere in analisi la freccia scroll to top di colore azzurro scuro posta a destra nel layout l'icona linguetta verde acceso del radar Url che pur essendo invece sempre presenti per ragioni appunto di lontananza impongono all'occhio di porre attenzione solo su una parte del video e perciò non creano distonia cromatica o incompatibilità. Quindi in conclusione ho scoperto che i colori cono soggetti a fenomeni di tolleranza se momentanea nel caso di avvicinamento o fissa ma in quelli da allontanamento.
  • Ritengo che se vi sono tasti che devono catturare l'attenzione ed escono al di fuori delle logiche conformiste e della convenzione è bene creare una gerarchia attraverso colori divergenti per indicare le funzioni prioritarie ai fini della navigazione per la user experience del'utente.
    Un esempio è quando mi sono trovato a scegliere se conformare la freccia di scrolling della pagina al colore verde acceso dei pulsanti con funzioni inusuali e la scelta conseguente che ho invece mantenuto in quanto lo scorrimento della pagina per la lettura ha un'importanza prioritaria rispetto alla stampa del foglio di lettura.
  • Il foglio bianco secondo me rimane la scelta più oculata in fatto di Blog in quanto agevola la lettura offrendo il massimo contrasto e anche la possibilità di scegliere più colori (anche accesi) per indicare un maggior numero di servizi-strumenti.(maggiore varietà funzionale da attribuire ai singoli colori)
  • Se si usano colori accesi poi si possono usare tonalità che scalano divenendo più scure creano consonanza ma anche una sorta di gerarchizzazione strumentale.(famiglia di funzioni)Inlotre si può giocare con la posizione a spasso per il layout.
  • Ad ogni singolo colore si può attribuire una funzione emozionale-comunicativa creando nel testo una legenda di colori ad uso dei lettori abituali del Blog creando una sorta di Text Design. Un esempio è che per segnalare nel testo le parti di dialogo interiore o riflessivo e/o strettamente personale/colloquiale che esulano dalla letteratura tecnica o tematica ero solito usare il colore rosso ma questa strumentalizzazione cromatica non mi convinceva pienamente poiché anziché avvantaggiarmi nell'esprimermi mi penalizza in quanto mi sarebbe stato molto più utile e necessario per segnalare messaggi di pericolo o divieto o che attraessero fortemente l'attenzione per soddisfare quelle necessità che questo colore oramai evoca per convenzione nella nostra cultura e nel nostro immaginario e che mi ha portato a scegliere mentre adesso uso dell'arancione del CMS di Blogger sfruttando la metafora che la mia anima è proudly powered by Blogger.

 CONCLUSIONI 
Queste sono le principali scoperte inerenti i colori che ho fatto nel momento in cui mi sono trovato a incastrare e a metter su' i pezzi che avrebbero poi composto la visione d'insieme del design del layout del Blog di Antonio Luciano;esse oscillano prevalentemente tra due poli quello della tolleranza e dell'incompatibilità e sono sensibili alla lontananza ed all'avvicinamento.

Grosso modo il Layout è diviso in due parti e visto che non possiamo vedere con un occhio per volta possiamo approfittarcene sperando che il navigatore intraprenderà col trascorrere del tempo una navigazione sempre più attenta e perciò perimetrale e inserire elementi con colori non proprio intonati ma che si tollerano a vicenda ad est ed ovest del layout. (ovviamente tra schermi grandi o piccoli il giusto sta' nel mezzo come è vero che i secondi avranno maggiore facilità ad avere una visione d'insieme-complessiva)
La comunanza dei colori sicuramente genera un effetto visivo piacevole ma molte volte se la funzionalità mira alla diversità strumentale tra due o più elementi è bene pensare ad usare colori differenti.Il colore è importante ma per certi elementi del layout ormai conosciuti per convenzione (Footer,Header,Sidebar...) l'uso di fogli trasparenti o attraverso l'uso dell'opacità come ad esempio il grigio sul bianco è sufficiente a creare distinzione senza appesantire il design complessivo.(questa soluzione la trovo molto interessante specie per mescolare gli stili).

Pensare che conforme alla moda ed alle tendenze trend del momento non è sempre = a comunicare con i colori e lo stile le emozioni e l'immagine che vorremmo comunicare di noi o di un'azienda è molto importante.

Un esempio possono essere i footer che vanno tanto di moda adesso che sono larghi a tutta pagina un colore completamente nero non facilita certo la lettura e scurisce la pagina la rendono buia al punto tale che anche se scriverete il testo su foglio bianco parrà il blog di Mortimer...il viola sembrerà da camera mortuale se poi ci aggiungete un bello style solo flat avrete una pagina piatta e dai colori funerei...che io sappia ..non ho mai sentito di defunti che abbiano blog....

Il mio Blog in SINTESI:
Ho cercato di dare quindi una gerarchia funzionale-strumentale attraverso i colori che è la seguente:

Il colore viola fucsia (che emula lo style Google) è quello principale e segnala tutti i link basici necessari ai fini della navigazione il giallo è il colore di supporto al viola e che rendono il viola ipertestuale ma anche per evidenziare foto, nomi, titolo e logo ovvero tutto ciò che vi è di immagine-visiva (lo adoro il giallo perché sfocia facil-mente nell'oro) il grigio è la trasparenza che consente di far sopravvivere il design concettuale della vecchia scuola 2.0 in quello della new school 3.0 il nero come cornice e fondo con la duplice funzione di richiamare lo style google che per distinguere l'area menù (il nero lo ritengo il migliore colore per i menù per leggibilità e per contrasto rispetto agli altri colori che lo fanno emergere e gli danno un'importanza gerarchica da primo posto inoltre difficilmente entra in conflitto della serie come si dice il nero sta' bene su tutto) il verde sgargiante per i tasti-icone per funzioni Share & Download l'azzurro per ulteriori funzioni di navigazione non basiche ma che l'agevolano e la rendono più performante ai fini della user experience e dell'accessibilità.

L'obiettivo nelle scelte cromatiche è sempre quello di ridurre i minuti di navigazione cercando di effettuare una semplificazione/riduzione della complessità del layout attraverso una progettazione della mappa visiva-di navigazione-dei colori; meno minuti impiega l'utente a capire come usare il blog ed i suoi servizi e migliore sarà la qualità dei tempi di permanenza con un potenziale incremento di quelli di latenza.

Nell'immagine sottostante la mappa dei colori basici scelti per il layout quindi con esclusione di quelli top per la navigazione quali il viola ed il giallo.
mappa cromatica blog layout design