L'amico Davide mi chiedo un parere in merito al nuovo restyling grafico del noto sito Bakeca, ovvero uno dei principali siti italiani di annunci. Siccome sa che sono un rompipalle per natura, spesso mi chiede critiche sui suoi lavori. Ma sono stufo che scrocchi.
Allora ho deciso – con il suo permesso – di rendere pubbliche le mie osservazioni, condividendole con voi. Così magari è la volta buona che mi lanciate delle belle pietrone adosso, Davide capisce che non sono un professionista ma solo un farloccone, e la smette di stressarmi.
Per analizzare il sito, dal punto di vista visuale, mi sono affidato a un comune programma di grafica e ho replicato lo screenshot applicandovi tre diversi effetti grafici:
- forte sfumatura (blur)
- forte contrasto
- inversione dei colori.
Si legga in senso orario, partendo dalla prima in alto a destra, che è l'originale.
Visione sfumata
Un occhio stanco potrebbe vedere il sito in questo modo. Ma anche un occhio frettoloso non si ferma troppo ad analizzare il contesto in cui è giunto: cerca la via più breve e comoda. E ricordatevi che gli utenti non leggono, mai!
Come potete notare le cose che vengono risaltate sono la barra di ricerca e le macrocategorie. Ottimo. Peccato che la fascia di top e la fascia laterale siano assolutamente annebbiate.
Visione alto contrasto
Qui è sottolineato meglio quanto visto sopra. Oltre alla barra in alto, si distingue in modo ottimale la zona "categorie" ma il resto diventa troppo omogeneo. Come direbbe sua altezza Robin Williams, mancano i contrasti netti!
Visione negativa
Ancora più cattiva la versione "aliena", ovvero invertendo i colori. La barra risalta ma tutto sembra un po' simile.
Conclusioni
Il sito non c'è niente da dire, è molto leggero e non mi spiace nemmeno un po'. Ci sono però alcune cose migliorabili a mio avviso:
- Il top è spento e il fatto che sia dello stesso colore della sidebar sinistra non lo fa per nulla risaltare, anzi tende a spegnere anche la sidebar.
- Il logo nel top è in netta sproporzione rispetto agli altri elementi, sembra quasi ridicolizzato: io gli darei più importanza, magari a discapito del payoff.
- La sidebar a sinistra è una forte scelta: è una zona molto vista. Manca a mio avviso il contrasto nei titoli (Citta in …, Città più cliccate). Lascio poi ad altri la valutazione dell'importanza strategica di quel link. (Manca la città "WEB"…).
- La barra di ricerca assolutamente promossa, ma il bottone nuovo messaggio l'avrei visto meglio sbordare dalla barra: alla fine più la gente inserisce annunci, meglio è: o sbaglio?
Una piccola riflessione però la farei anche sulla carrellata di categorie e sottocategorie: ma siete veramente convinti che qualcuno si metta a leggerle dalla homepage? O magari sarebbe più contento di essere accompagnato in un tour nell'albero dei vostri annunci?
Bene ragazzi, spero di non avervi annoiato troppo e di avervi proposto un modo nuovo di guardare tecnicamente il web. Mi farebbe molto piacere un vostro riscontro su quanto detto: sia sulla tecnica sia sulle considerazioni.
ps: io continuo a suggerire a Bakeca di creare un nuovo luogo tra le città in catalogo: IL WEB! Se uno vuole offrire lavori in telelavoro, tipo scrittura articoli, lavori di SEO promozione, o quant'altro che non richieda una geo-fisicità, si trova spiazzato.
“Il logo nel top è in netta sproporzione rispetto agli altri elementi, sembra quasi ridicolizzato: io gli darei più importanza, magari a discapito del payoff.”
Straquoto!
Per il resto, è interessante l’analisi che hai fatto, ma penso che quei metodi che hai utilizzato possano funzionare per qualsiasi sito con qualsiasi combinazione di colori? Per quanto mi riguarda, dico di sì, perché io punto sempre a siti minimale con pochi colori e se questi sono bilanciati bene, con i tuoi metodo lo si vede sempre. 😉
Io quoto di brutto (si può dire?) il fatto delle mille categorie presentate in home.. uno arriva li e si trova spaesato.. gli utenti non leggono, è un comandamento!
Infatti quelle volte che uso bakeca vado dritta sui cerca..
Altro punto che quoto di brutto (si può dire di nuovo?) è l’annuncio non geo-localizzato..
Ciao!
Ah dimenticavo, il link su williams è sbagliato..
ineccepibile..!
uso spessissimo la tecnica della sfocatura ma in maniera artigianale 🙂
strizzando un po’ gli occhi 😛
per qualsiasi disegno sia esso architettonico/igegneristico, sia di grafica.
Ciao a tutti,
mi sento preso in causa perchè sono il responsabile della nuova veste grafica Bakeca 😛
Prima di tutto grazie dei feedback, ne terrò conto. Vi spiego anche un paio di scelte e considerazioni
1. Contrasti e leggibilità
Sono sicuramente migliorabili, non ci piove. Io vorrei migliorare soprattutto la spalla di sinistra: in home si perde un po’, mentre nelle interne i filtri generano troppo “rumore” visivo… come sapete il design non è una scienza esatta, ma un continuo provare, analizzare e correggere: pian piano miglioreremo tutto 🙂
2. Questione logo
Qui la situazione è complessa: considerate che l’header deve ospitare un banner 728×90, del quale non abbiamo nessun modo di controllare i contenuti: potrebbe essere sia una cosa assolutamente in linea con la grafica, sia un blocco nero e verde acido lampeggiante. Rimpicciorendo il logo riesco a dargi l’aria necessaria affinchè, nelle pagine interne, non venga fagocitato nel banner e rimanga ben visibile; per coerenza grafica ho deciso di non farlo più grosso in homepage, in quanto non amo le cose che si spostano, sorpattutto negli elementi di navigazione
3. Blocco di ricerca
Stesso discorso del logo, deve “combattere” con il banner subito sopra: inizialmente il bottone pubblica aveva un contrasto superiore rispetto al box circostante, ma con banner troppo colorati tendeva a generare moltissimo rumore visivo: l’attuale soluzione è il bilanciamento migliore che sono riuscito a trovare fra l’invisibilità ed il pugno nell’occhio… ma, come tutto, è ovviamente migliorabile 🙂
4. Dettaglio annuncio e procedura di inserimento
Non sono ancora definitive 😉 qualsiasi considerazione la faremo poi più avanti, ma la pagine subiranno sostanziali modifiche.
Grazie ancora,
Marco
@AleCss alla fine il rapporto tra i colori è il loro contrasto. Più è netto, meglio è. Parole chiave? Contrasto, spazi vuoti, linkaggi.
@Mattia dalla mia esperienza, come ho già detto, l’utente oltre la prima riga (forse) non legge. ps: hai perso il mio contatto per farmi le correzioni? 🙂
ps: chiedo venia ma mi sono appena reso conto che WP aveva mangiato una versione della pagina e stavate leggendo la bozza…
@Antonio anche la tecnica: “guarda da distante” è un buon tester, anche per la roba cartacea.
@Marco Pesani non sai che piacere mi fa la tua visita: sei un grande. Combattere con delle indicazioni fisse non è mai il massimo, ma almeno sai dove puoi lavorare. Il banner è intrusivo, però io farei attenzione al bilanciamento delle varie cose: BRAND IS BRAND 🙂 Inglesismi del ca**o a parte – che non possono nemmeno permettermelo – potresti ipotizzare di usare un logo al posto del marchio completo, e magari richiamarlo in calce.
Sul fatto che le cose “fisse” non devono spostarsi, questa è vera legge. Non posso che quotarti, vero @capobecchino…
Per quanto riguarda il “nuovo annuncio” così com’è sembra parte della ricerca, e quindi è semanticamente un po’ fuori luogo. Secondo me ti basta anche molto poco, ma almeno che sembri “sopra”.
Grazie ancora del passaggio: un segno di umiltà che ti fa guadagnare millemila punti!!! Grazie anche a @davidelico per il kickoff.
@Merlinox
Inizialmente avevo rimosso il .it che mi sembrava “accessorio” per dare più valore a “Bakeca”, che ritenevo più importante, ma sono subito partiti gli insulti e quandi ecco tornato il logo piccolo 😛
@Marco Pesani stavo proprio riguardando il top e devo dire che è una vita molto dura con quello spazio che ti ritrovi. Un problema simile l’aveva l’amico @Val3ri0 che infatti stresso ogni volta che apro il sito.
E mi sa che prox un problema simile potrei averlo pure io… »»»
Non conoscevo la tecnica della manipolazione dello screenshot, proverò a usarla in futuro in fase di scrittura del sito. Un grazie a tutti per una discussione molto interessante.
@Francesco grazie a te per la “notifica”. Alla fine non è che sia una tecnica “assoluta”, è solo un modo valutativo diverso.
Molto interessante, proverei anche io quei metodi, purtroppo il mio sito lascia molto a desiderare quindi sarebbe tempo perso, non avendo nessuna minima idea su come si dovrebbe impostare
@PalleQuadre prova 🙂