Archivio per mese: gennaio 2010

Pubblicare un sito web: verifiche e controlli preventivi

5.00 avg. rating (93% score) - 1 vote

Cosa controllare prima e durante la pubblicazione di un sito web.
Per lavoro mi capita con frequenza di elaborare analisi e progettare siti web, sistemi e-Commerce o applicazioni online. Come Web Project Manager seguo poi le fasi di relazione con il cliente ed il processo di sviluppo interno, ma chi ha partecipato ad un progetto web sa bene che una delle fasi più complesse è proprio quella finale: la pubblicazione.

La giornata in cui si va online, specie se bisogna sostituire un sito già esistente, è senza dubbio carica di stress e di pressioni da tutti i fronti: il cliente, il boss, i colleghi e… gli utenti! In una situazione simile la presenza di qualche errore o dimenticanza è inevitabile (e umano), anche se sono stati già effettuati tutti i test del caso. Viceversa condizioni di lavoro ottimali permetterebbero di ridurre notevolmente la percentuale di queste fastidiose imprecisioni.

Ecco perché può essere molto utile una linea guida che ci liberi dalla preoccupazione di… pensare se abbiamo fatto tutto. 😉 A supporto del delicato processo possiamo preparare un elenco di attività da verificare prima e durante la fase di pubblicazione: questo limita di molto gli errori, permette di essere più efficienti e soprattutto è un lavoro dannatamente meccanico.

Per realizzare il documento sono partito dal mio lavoro quotidiano ed ho integrato l’elenco con quello preparato da altri operatori del web, italiani ed americani. Non si tratta chiaramente di un lavoro definitivo, bensì di un inizio personalizzabile secondo le varie esigenze.

Ho deciso di condividere il file nella speranza che possa essere rivisto, modificato e migliorato grazie al prezioso contributo di tutti. La distribuzione è gratuita, in formato PDF e sotto licenza Creative Commons. Di seguito il link per scaricare il documento:

Lista di attività da controllare e verificare prima della pubblicazione di un sito web (PDF) Clicca per scaricare il PDF Lista di attività da verificare prima di pubblicare un sito web

Cosa ne pensi?

Website complete launch checklist

0.00 avg. rating (0% score) - 0 votes

What to check before publishing a website.
For my job, I often analyze and design web sites, e-Commerce systems and online applications. As a Web Project Manager I manage the relationship with the customer and the internal development process. As all the people who actively participated in a web development project, I know that one of the most complex and critical phase is the last one, i.e. the publishing.

The day in which the project goes online, especially when substituting/updating an existing site, is full of stress and pressure coming from several stakeholders: the customer, the boss, the colleagues and, last but not least, the users. In such a scenario, making mistakes is unavoidable (and human), even if all the tests were properly performed. On the other hand, having an optimal working condition would allow to drastically decrease the percentage of these inconvenient mistakes.

For this reason, having a guideline would make us not worried about whether we did everything or not. To better support the publishing  process we can prepare a list of activities which should be checked before and during the publishing phase. Checking the list, being a very mechanical work, limits the possibility of making mistakes and improves our efficiency.

To create the document, I started from my everyday work experience, integrating my initial list with others from Italian and american web operators. The checklist is not supposed to be a final document, but rather an initial work that other people can customize and integrate according to their needs.

I decided to share the document, hoping that it can be reviewed, modified and improved, thanks to everybody’s contribution. The document distribution is free, in PDF format, under the Creative Commons license. The link to download the checklist follows:

Website complete launch checklist (PDF) Click to download the Website complete launch checklist PDF document

What do you think?

Thanks to Marco D’Ambros for the english translation.

Zzub: analisi sito Telecom Italia

0.00 avg. rating (0% score) - 0 votes

Disclaimer: pippone più noioso del solito, se si può. 😀 Ho partecipato ad una campagna di Zzub nella quale si richiedeva di navigare il nuovo sito di Telecom Italia per dare un giudizio personale, qualche feedback, suggerimenti e segnalare eventuali errori o imprecisioni (dannato fiscalino!). Oggi sono usciti i nomi dei vincitori: purtroppo per me non sono tra questi, ma complimenti a loro. Condivido con voi una parte degli appunti che avevo preso durante la navigazione del sito Telecom Italia ed inviato a Zzub… considerata l’entità del soggetto e la superficialità della mia analisi direi che non sono pochi, no?

Menu network

Il menu per l’accesso ai siti del network inizia con “TI Network” dove “TI” non sono puntate e quindi non identificano l’acronimo. Tuttavia, anche se lo fossero, potrebbero non essere chiari per chiunque e, in ogni caso, sarebbe necessario un piccolo sforzo di ragionamento. Dato che c’è spazio converrebbe includere la dicitura completa “Telecom Italia Network”, cosa che agevola anche l’identificazione e l’indicizzazione sui motori, essendo questa la prima parola valida della pagina (per posizione nel codice HTML).

Sempre in questo menu, ma questa volta a livello concettuale-grafico, la linguetta/tab che identifica il sito sul quale stiamo navigando è incoerente rispetto alla dimensione del menu stesso. Lo sfondo nero infatti dovrebbe essere largo tanto quanto la larghezza del browser in uso, pur lasciando centrati i contenuti, questo per rendere credibile la metafora della linguetta/tab.

Cambio lingua

Il menu in alto a destra per lo switch tra le lingue potrebbe essere più chiaro: “EN” e “IT” potrebbero diventare “ENG” e ITA”, oppure “English” e “Italiano” o, meglio ancora, essere sostituiti da una bandierina. Quest’ultima soluzione manterrebbe gli spazi e garantirebbe la comprensione a chiunque, compresi gli utilizzatori di tecnologie assistive grazie all’attributo ALT. Nel caso rimanessero testuali il carattere pipe “|”, utilizzato per separare le due lingue, trae in inganno la vista somigliando ad una lettera L minuscola o I  maiuscola: conviene quindi utilizzare un trattino “-“, un altro espediente grafico o nulla.

Dimensione caratteri

L’etichetta del link per variare la dimensione dei caratteri è sempre in inglese “text size” anche quando la lingua selezionata è l’italiano. Considerato poi il suo scopo, ovvero agevolare la visione dei caratteri per chi ha problemi di vista, non dovrebbe essere di colore grigio su sfondo bianco in quanto il basso contrasto la rende invisibile a questa tipologia di persone.

Cliccando sulle varie “A” per modificare la dimensione dei caratteri del sito succede che i testi nell’animazione Flash ed i menu non cambiano dimensione.

Modulo di ricerca

Cliccando subito sull’icona per avviare la ricerca, senza inserire alcun termine, il sistema effettua una ricerca per la keyword “cerca”. Dovrebbe invece generare un errore con una descrizione utile, in grado di guidare l’utente verso il corretto uso della ricerca.

Quando poi il sistema non trova risultati per una determinata chiave di ricerca mostra l’errore “Nessun risultato $keyword” che è decisamente migliorabile. Anche solo a livello di sintassi italiana con un “Non ho trovato risultati per la tua ricerca su ‘$keyword’, prova ad inserire un altro termine”.

Quando il sistema non trova risultati la colonna di sinistra sembra più corta in quanto non c’è testo nella colonna di destra (che ha grossomodo lo stesso colore di sfondo del sito).

Nella pagina che mostra i risultati della ricerca compare un altro form, identico a quello posizionato in alto a destra in ogni pagina del sito e con le stesse funzionalità: questo crea un dubbio nell’utente su quale sia giusto usare. Tra l’altro, nel caso non ci fossero risultati, solo il secondo contiene la chiave ricerca appena effettuata.

Nella colonna di destra, sotto la voce “Lingue”, compare “italian” invece di “italiano”.

Nella colonna di destra credo sia meglio scrivere “PDF – Portable Document Format” in quanto l’acronimo “PDF” è più conosciuto del suo significato.

Nella colonna di destra i numeri degli elementi risultati potrebbero essere allineati a destra evitando quindi la parentesi e rendendo più chiara la lettura di tutte le opzioni.

Nella colonna di destra l’attributo title dei link “filter results” è sempre in inglese anche navigando il sito in italiano.

Nella colonna di destra nell’etichetta “Tipo Documento” la “d” dovrebbe essere minuscola.

La paginazione dei risultati, in fondo alla pagina, è sempre in inglese anche navigando il sito in italiano.

Tra i risultati della ricerca si trovano anche risultati in lingua inglese pur navigando il sito in italiano.

Il permalink della ricerca ha un indirizzo URL poco comprensibile o indicizzabile, in questo senso se ci fossero degli URL tipo http://www.telecomitalia.it/tiportal/it/cerca/$keyword si potrebbe pensare anche ad un elenco delle parole più cercate in quanto identificherebbero un preciso bisogno degli utenti (e quindi anche degli utenti a venire).

Manca una funzionalità per la ricerca avanzata, ad esempio solo in una sezione del sito o per uno specifico contenuto.

La ricerca non offre i risultati ordinati per rilevanza e se lo fa non lo indica chiaramente, infatti cercando “offerte” non ottengo quello che mi aspetto. L’etichetta a sinistra di ogni risultato “HTML” non è comprensibile a molte persone, potrebbe invece essere modificata in “pagina”.

Animazione Flash

Nell’animazione principale mancano i “call-to-action”: non ci sono pulsanti nè messaggi che invitino all’azione (ad esempio un pulsante sulla foto tipo “Acquista ora” oppure “Scopri di più”). Anche se le immagini in generale sono sempre portatrici di clic in questo caso visitatori non sanno che cliccando sulla foto entreranno nella sezione apposita nè cosa succederà al loro clic.

Una delle slide previste nell’animazione Flash è un video che a sua volta contiene dell’audio che parte in automatico. Credo che la cosa possa spaventare alcuni visitatori del sito TI in quanto si trovano a visitare delle pagine all’inizio “silenziose”, ma dopo manciata di secondi, di colpo e senza preavviso “parlanti”. E’ vero che molti siti oggigiorno contengono elementi multimediali e che siamo abituati a situazioni simili, tuttavia in un sito corporate non mi aspetto per famigliarità di trovare una caratteristica del genere. Se si verifica che il maggior numero di accessi avviene in orario di ufficio è facile supporre che la cosa possa generare imbarazzo per alcuni utenti (ad esempio gli impiegati con le casse accese per altri motivi).

Link

Spesso mancano gli attributi title sui link, utili sia in ambito SEO che per i navigatori che possono sapere dove arriveranno cliccando su un determinato collegamento.

I titoli in home page, quelli neri nei 4 box, non sono cliccabili. Il link dell’ultimo box in home page è preceduto dal carattere “>” a differenza degli altri.

Il colore dei link non è omogeneo: a volte sono rossi e a volte sono azzurri anche per funzionalità identiche (cfr “Approfondisci” nei 4 box principali e “Approfondisci” nel CSR Online Award 2009).

Le due immagini “Network scuola impresa” e “Working Capital” non sono cliccabili a differenza di quelle presenti negli altri riquadri.

Menu footer

Il menu sembra essere dedicato al network invece che al sito del network che si sta visitando. I vari elementi delle liste menu non sono ben separati da spazi o elementi visivi, pertanto sembrano una frase unica piuttosto che un elenco di link.

Nella parte inferiore “Sitemap” e “Website Info” sono in lingua inglese invece che in italiano e in ogni caso la “I” di “Info” dovrebbe essere minuscola.

Sitemap

Alcune zone sono vuote, tipo “parla con noi”.

L’elenco non è ben indentato. Non si capisce come sono organizzate gerarchicamente gli elementi separati da pipe (alcuni poi sono addirittura su 2 righe quindi mancando l’indentazione complicano ulteriormente).

Metterei una riga di info sotto ogni link.

Javascript e Flash

Non è previsto un contenuto alternativo per i browser senza plug-in Flash, questo obbliga l’utente al download del plug-in per accedere ai contenuti relativi. Credo sia meglio permettere la visione delle informazioni e spingere all’aggiornamento. In ogni caso il messaggio che invita al download di Flash è in inglese nonostante stia navigando il sito in italiano ed il testo è piuttosto sterile e privo di informazioni per i non tecnici (ad esempio non viene detto che installare il plug-in è gratuito, semplice, etc).

Senza JavaScript non è possibile cambiare la dimensione dei caratteri del sito.

Navigazione

La maggior parte dei contenuti sono esterni al sito, pertanto potrebbe aver senso rendere più chiara l’icona presente a sinistra dei link, con l’aggiunta di un attributo title o in altro modo.

I link contestuali breadcrumbs non sono molto chiari, manca davanti la radice “Sei in”, e sono poco in vista. Inoltre in alcune sezioni non vengono riportate (es. Rassegna stampa), creando un problema per l’utente che ne ha fatto uso in tutte le altre pagine del sito.

Nella colonna di sinistra credo che abbia poco senso evidenziare il titolo della pagina in cui ci si trova a meno di, scelta più agevole, mostrare anche il resto del sottomenu allo stesso livello (es. in Privati – Fisso compare a sinistra solo il menu “Fisso” evidenziato in rosso, mentre avrebbe senso che ci fossero tutti gli altri figli gerarchici di “Privati”, ovviamente non evidenziati).

Varie (SEO, usabilità, etc)

La maggior parte degli URL del sito non sono SEO friendly e potrebbero invece essere ottimizzati (come anche gli URL delle ricerche). La cartella “tiportal” potrebbe essere evitata e comunque è diversa rispetto alla cartella in cui viene caricata la home page.

La favicon ha lo sfondo bianco invece che trasparente, su alcuni browser (come Firefox su Mac) si vede quindi un quadratino bianco in quanto lo sfondo del browser è grigio.

Il riquadro di Teleborsa in home page non ha titolo nè descrizione nè un suo riquadro che lo integri nell’interfaccia, risulta quindi estemporaneo, poco comprensibile e poco gradevole.

Nelle barre di scorrimento verticale, presenti in alcuni riquadri in home page, potrebbe non essere chiaro a tutto qual è la parte della barra da trascinare (io ad esempio mi sono posto la domanda ed ho usato la rotellina del mouse).

Non è stata pensata una pagina apposita per l’errore HTTP 404 che ora risulta essere quello generico di Apache.

Non esistono i documenti predefiniti per le cartelle, quindi richiamando ad esempio http://www.telecomitalia.it/content/tiportal/ ricevo un errore HTTP 403 non gestito.

Suppongo quindi che anche gli errori HTTP 500 etc non siano stati gestiti.

Manca il meta tag description in ogni pagina.

I title delle pagine non sono ottimizzati per i motori di ricerca nè per gli utenti, ad esempio – in quest’ultimo caso – quando entro in una sotto sezione nel titolo vedo solo il titolo di quella pagina, non anche quello dell’elemento padre (vedo ad esempio “Privati” invece di “Info & Assistenza – Privati”).

Il sito non risponde a telecomitalia.it, cioè senza il www davanti.

La validazione W3C per la sola home page genera 38 errori e 15 warning per l’HTML.

Semplice e stupido

0.00 avg. rating (0% score) - 0 votes

Quante volte ho sentito questa frase! La diceva un responsabile marketing americano con cui ho avuto modo di lavorare per qualche anno in riferimento al fatto che i servizi online devono essere così trasparenti da risultare banali (“Don’t make me think“, dicono). Che poi, anche e soprattutto per motivi contingenti e personali, è diventata in un certo senso una filosofia di vita.

E allora quando nell’aggregatore è comparso il post di Tambu ho pensato che non ci fossero parole migliori per descrivere come la penso su quest’argomento:

Ora, il fatto saliente è questo: non sarò un Dio dell’hacking, ma so leggere cinque guide, capire quali sono buone e quali no e so seguire le istruzioni passo-passo: a montare una ROM non ufficiale (magari la famosa CyanogenMod) ci metto un paio d’ore, a star tranquillo. Epperò non ne ho voglia, non ne ho più tanta voglia. Non ho più 15 anni e il tempo di passare una nottata a capire perché un driver non si caricava o a settare gli IRQ della scheda audio per far partire un gioco. Non ho voglia di infilarmi in un gorgo che mi porta via tempo, voglio semplicemente un telefonino da pigri: lo usi e ogni tanto compare il messaggio “c’è una nuova versione, la installo?” (che poi è esattamente quel che fa da sempre Google: mica ti chiedono di configurare nulla – vabeh, il minimo necessario – ti dicono di usare i prodotti e basta. Pensate un po’ se rilasciassero Gmail 3 ma il vostro fornitore di connessione a internet vi costringesse a usare sempre la 2!! ). Ho già un lavoro, un’attività in proprio, una famiglia e altri interessi per dovermi anche preoccupare di aggiornare il telefono.

Niente da fare: il tempo è importante e molte cose diventano secondarie. Le funzionalità, e in generale gli oggetti, non dovrebbero richiedere impegno o fatiche inutili, ma essere studiati solo per incentivarne l’uso. Basterebbe ricordarsi che sono le cose a lavorare al nostro servizio, non il contrario.

 Torna su