Piuttosto che ammorbare HTML.it con un commento-fiume e rimanere anche insoddisfatto, preferisco farne un post.

Il logo che campeggia nella Home del PDPer strutturare un’analisi del nuovo sito del Partito Democratico mi affido a un semplice schema di sviluppo di un sito Web; nulla di trascendente, ma mi permette una forma di categorizzazione. E allora, si cominci:

1. Definizione dei requisiti

Il committente di http://www.partitodemocratico.it è un intero partito, ma è soprattutto Walter Veltroni, o meglio il suo staff di comunicazione, per ovvie ragioni politiche e di contesto temporale (si va alle elezioni tra due mesi, insomma, e la faccia ce la mette lui). La scelta della committenza è caduta su Dol.it; nonostante gli slogan e i paroloni tipo mission, eccellenza, strategy, branding, perseguire, merda, Carlo, aborto [1], si tratta fondamentalmente di una web-agency con sede a Roma, nel cui portfolio scorgo ilCannocchiale.it. La notorietà del committente ci permette di ipotizzare cosa questi abbia chiesto all’azienda: una porta sul Web meno banale e spernacchiabile di alcuni esperimenti precedenti (tipo il famigerato blog di Prodi); e, soprattutto, una porta bidirezionale. Facendo un pò di reverse-designing ipotizziamo che la scelta sia caduta su Dol.it proprio per l’esperienza su una piattaforma come ilCannocchiale (oltre che per le ipotizzabili relazioni tra staff di Veltroni e azienda; siamo a Roma, senza relazioni non si lavora). La risposta dell’azienda a prima vista sembra essere stata “2.0, ma anche 2.5, che faccio, lascio?

2. Information Architecture

Qui secondo me il vero punto dolente, il punto debole del sito che ne preclude la navigabilità a meno di non essere animati da una fortissima motivazione; ma così non si cattura nessuno che non sia già attivo di per sé. L’information overload assale il visitatore casuale e l’utente non particolarmente attento, ma anche quello accorto; io sono alla sesta visita, ma l’istinto, ad ognuna di queste, continua a suggerirmi dopo pochi secondi di aprire un altro Tab su Firefox e tornare sulla mia home page personalizzata di Google.

L’home page del PD è organizzata in 8 blocchi di informazione orizzontali, alcuni dei quali a loro volta suddivisi in colonne per ospitare diverse sezioni:

  1. il primo, reso praticamente invisibile dall’assenza di contrasto figura/sfondo, contiene tre link di servizio e un form di ricerca (quest’ultimo, utile per quegli utenti che non navigano ad albero che invece sono stati parecchio trascurati da questo design); comprensibile la scelta di sacrificare i tre link Redazione, Mappa sito e Contatti, disposti peraltro nella zona in cui un utente medio si aspetta di trovarli;
    Primo blocco di contenuti nella home page del PD
  2. il secondo blocco, la testata vera e propria, è diviso in tre colonne; a sinistra il logo del PD, nella sua posizione naturale; a destra un’immagine contenente del testo (ma senza testo alternativo) che linka al Forum; al centro una fila di 4 link percepiti istintivamente come i principali del sito: informati, conosci, attivati, myPD, rigorosamente con le minuscole, e sovrastati letteralmente da uno slogan reso con la solita immagine (stavolta in background, senza neanche la possibilità di testo alternativo) e un link in verde: ciò che ci sta a cuore; domanda: perchè quest’ultimo link punta a un dominio di quarto livello come http://cistaacuore.pd.dol.it/?
  3. si parte con i fuochi d’artificio; sembra un blocco videostreaming: foto di ragazzi con impressa in trasparenza, la scritta “W l’Italia” (ci si aspetta di trovare un video a la YouTube, si accede invece ad un articolo… mah); anteprima del Forum con iconcine “leggi” e “scrivi” didascalizzate; gallery verticale di 3 immagini (incomprensibili, ma taaaanto decorative), box all’estrema destra dedicato all’iniziativa “AttiVati, convinci 5 amici a votare PD“; si tratta insomma di preview di contenuti testuali;
  4. ancora fireworks: il blocco rich-media-content, primo box per segnalare la necessità del plug-in Silverlight, secondo box ancora con link testuale al plug-in e link testuale al discorso di Spello, terzo box con 3 thumbnail di video tratti dalla presumibile videogallery;
  5. quinto blocco, un blocco giornalistico-organizzativo diviso in un box grande 2/3 della larghezza con thumbnail, titoli e autori di contributi vari (articoli, presumibilmente) al sito; rimanente 1/3 occupato da un minibannerino che invita a conoscere i dirigenti del PD, e a un più grande box-agenda;
  6. Sesto box completamente destinato al Social Networking (eccolo!), box così alto e ricco che andrebbe pensato come un home-page a parte (magari di un sottodominio, tipo network.partitodemocratico.it?), in cui troviamo il link all’iscrizione, i preview di alcuni contributi testuali “dal basso” (ma inseriti come?), e i link ai principali software di cazzeggio 2.0 che tutti noi conosciamo (twitter, youtube, flickr.. e, stranamente, ilCannocchiale, toh)
  7. Alleluja, alleluja. Al settimo blocco troviamo finalmente delle categorie, dei link, della chiarezza. Self-explaining:
    Settimo box del sito del PD
    Il punto è che, per arrivare a questi link, è necessario procurarsi un crampo all’indice destro a forza di scorrere con la rotellina del mouse
  8. L’agognato footer, con indirizzo, link “contatti” e link alla web-agency di cui sopra

3. Web design

Il codice è discreto. Non perfetto, soffre di div-ite acutissima, poteva essere realizzato con più semplicità, ma, data l’Information Architecture..

Il codice non è valido; la sola home page, al test del W3C, soffre di 64 errori.

Il codice non è accessibile: dei 64 errori, il buon 90% riguarda la mancanza dell’attributo alt per il testo alternativo alle immagini. Scegliere Silverlight di Microsoft per i rich-media content invece che un classico e diffusissimo Flash è un’altra pugnalata all’accessibilità.

Detto questo, il codice è migliore di quello visto in molte altre occasioni del genere; e allora, prendiamolo come un passo in avanti.

4. Visual design

L’impatto grafico con il sito è gradevole; fresco, “moderno”, tanto 2.0 quindi sicuramente un layout aggiornato, al passo coi tempi.

Dopo il primo abbaglio da novità, l’architettura caotica prende il sopravvento sull’impatto visivo; il disorientamento è palese. Anche il design visuale, però, ci mette del suo, con alcune scelte contestabili (è un eufemismo). C’è molta confusione sull’utilizzo dei colori lungo il sito, anzi, nella stessa pagina; un esempio vale più di mille parole:

Box forum

In questo riquadro (ci si accede provando ad andare sui Fora) oltre al titolo, ben in evidenza, e all’area del social-bookmarking schiarita perché in attivazione (tutto chiarissimo fin qui), troviamo due aree di testo:

  • 12 febbraio 2008 | Area principale | Articolo
  • TAGS /Parole chiave | forum pd | forum democratici

Nelle due aree, la logica visuale è opposta: in alto, i link sono le scritte in grigio; in basso, il testo in grigio non è anchor text, mentre lo è quello in verde. Siamo negli stessi 15 centrimetri quadri, e la logica grafica è ribaltata.

Notazione personale: dei colori del logo, il verde è sovra-utilizzato per tutto il sito, mentre il rosso non viene usato neanche per i bordi di un boxino di servizio (e secondo me la scelta non è per nulla casuale).

5. Conclusioni

In realtà ci sarebbe molto altro da dire sulle pagine interne e sulla struttura della navigazione, ma questo post rischierebbe di diventare una recensione fiume su un sito che, per forza di cose, è ancora in crescita e in aggiornamento; per questo mi sono concentrato maggiormente sulla home page.

Nonostante la scelta di campo limitata, la struttura è eccessivamente caotica tanto da scoraggiare una navigazione più profonda a chi non sa già dove andare, o a chi non è fortemente motivato alla scoperta; ma partitodemocratico.it non dovrebbe essere un adventure-game in stile punta-e-clicca, come invece si rivela.

Per Walter Veltroni (voi altri non leggete): per tutto il resto (della consulenza) c’è Mastercard. Sai come contattarmi, c’è scritto qui di fianco.

[1]: Marlene Kuntz, “Primo, Secondo, Terzo”, da Catartica