Web design: analisi sito

Analisi visiva del sito - Cliccare per dimensioni reali.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.

Loading Facebook Comments ...

13 pensieri su “Web design: analisi sito

  1. AleCss

    “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. 😉

    Rispondi
  2. Mattia

    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!

    Rispondi
  3. Antonio

    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.

    Rispondi
  4. Marco Pesani

    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

    Rispondi
  5. Merlinox Autore articolo

    @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…

    Rispondi
  6. Merlinox Autore articolo

    @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.

    Rispondi
  7. Marco Pesani

    @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 😛

    Rispondi
  8. Merlinox Autore articolo

    @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… »»»

    Rispondi
  9. Francesco

    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.

    Rispondi
  10. PalleQuadre

    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

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *