Titolo originale: Web Redesign: Workflow that works.

Riesce a rendere accattivante un tema complesso come i processi di progettazione.

Direttore creativo di Idea Integration (www.idea.com).

Clienti di alto profilo: Warner Bros, National Geographic, Adobe Corporation, Paramount Television,

Macromedia Corporation e Sony Pictures.

Attualmente dirige Gotomedia Inc. (www.gotomedia.com), agenzia on-line di consulenza per user

experience e interaction design.

Si interessa principalmente dello sviluppo di nuove tecniche per la progettazione collaborativa nei

media digitali.

Quando non è attaccata al suo laptop, Kelly se ne va a fare trekking in paesi esotici e in via di

sviluppo (da dove non controlla nemmeno la sua casella e-mail).

Ricercatrice e Formatrice:

a information design

a user experience

Kelly Goto [email protected]

Si occupa di design dalla fine degli anni Ottanta (è cresciuta a pane e lettering) e si è affermata

come professionista tanto della grafica tradizionale quanto di quella on-line.

Direttore creativo di Idea Integration (www.idea.com).

Tra i suoi clienti ama ricordare Julia Quinn e Susan Andersen (due prestigiose firme della galassia

New York Times) e molte aziende di piccole dimensioni ma di elevata intensità creativa.

Universalmente venerata per la chiarezza e immediatezza del suo stile: sa dare vita anche agli

argomenti più aridi e garantisce il massimo impatto a quelli più interessanti.

La sua base attuale è in California, dove regna incontrastata come direttore creativo di

Waxcreative Design (www.waxcreative.com).

Quando vuole fuggire per un po’ le bastano il suo snowboard e una montagna nel Colorado.

a graphic designer

a web designer

a giornalista

a narratrice

Emily Cotler [email protected]

ESERCITAZIONE_01

obiettivo: realizzare il vostro profilo utente”

modalità: riportare nome e cognome, n. matricola,

indirizzo e-mail, foto, caratteristiche, …

convenzioni: formato RTF, in 1 pagina, carattere

Verdana 10, impostazione pagina (sup. 2.5, inf. 2.5,

sin. 2, dx. 2), interlinea 1.5, allineamento giustificato

Nome Cognome

…

…

…

• …

• …

• …FOTO

anno 1994

a Pionieri di un nuovo media: il web, ai tempi una giungla di protocolli

a Non si aveva idea di cosa si andava a progettare

a Browser: Mosaic; tutto il resto era a venire

ore 09.00

a Inaugurato www.hotwired.com: brindisi a base di champagne

a Primi visitatori on-line: “Non trovo niente”, “Cosa sono quelle icone?”, “Perché così lento?”

a Assunto chi si occupasse di gestire tutte le e-mail, smistandole ai singoli referenti.

a Il Feedback da parte dei lettori (positivo o negativo) ha portato al primo caso di redesign

a Nuove versioni browser, funzionalità, tecnologie, create nuove sezioni (motore ricerca, news)

a attivo on-line dal 1987

a conferenziere, autore e consulente in tema di user experience.

a progetti: HotWired, Wired News, HotBot

a specialista nell’integrazione di contenuti, design grafico e

tecnologie in una prospettiva user-centered.

Jeffrey Veen www.veen.com

Il parere dell’esperto

I prodotti editoriali digitali devono evolversi con

l’innovazione tecnologica

Il corso si pone come una guida allo sviluppo del workflow

a flusso organizzativo del lavoro necessario;

a mappa di avanzamento step by step;

a minimizzati rischi di imprevisti, dispersione di

energie e risorse in corso d’opera;

a forniti checklist, questionari, schemi, moduli per

tenere traccia dell’intero processo: dalla pianificazione

iniziale fino al lancio e oltre.

Destinatari ideali: rivolto a tutte le figure coinvolte nel workflow di un progetto (non

solo project manager o decision maker)

Obiettivo: fornire un comune quadro di riferimento al team e ai clienti con un

approccio ben organizzato, esaustivo e chiaro: risparmio tempo, budget, arrabbiature.

Tipologia: qualunque sia il progetto, di design iniziale o di redesign, qualunque sia il

budget (sia esso di 10.000 o 100.000 €)

Raccomandazioni: non buttarsi direttamente sul visual design senza preoccuparsi

prima della navigazione (interazione) e dei contenuti

Cliente: esterno (spesso idee confuse e non ha tempo), interno (chi decide?)

Front-end 1 Back-end: il workflow del back-end è ben diverso dal front-end

(verranno comunque considerate un quadro d’insieme delle problematiche tecniche)

Il corso si pone come una guida allo sviluppo del workflow

a maggior incremento dell’interattività;

a implementazioni tecnologiche (e-commerce, motore di ricerca, …);

a necessità di applicazioni di gestione contenuti (content management,

document management, community, …);

a migliorare la navigabilità, usabilità, user experience dell’utente.

PROCESSO

a a a

TEMPO

STRATEGIAu

Focalizzare il lavoro sugli obiettivi, mantenere la rotta

mentre ci si addentra nel processo

Cosa porta a un processo di redesign di un sito internet?

Fattori che possono interferire con il buon andamento del progetto:

a ostacoli tecnologici;

a clienti disorganizzati;

a carenze nella pianificazione e definizione degli obiettivi;

a sforamento del budget;

a …

Le premesse per un buon andamento del progetto:

a comunicare con il cliente;

a garantire la scalabilità;

a pianificare la pianificazione;

a verificare i presupposti e le aspettative;

a analizzare il sito corrente.

Cosa porta a un processo di redesign di un sito internet?

#01 - PENSARE PRIMA DI

AGIRE

a non farsi prendere da

ansie e da mode;

a pianificare la

pianificazione;

a formulare un progetto

logico;

a stendere un workflow.

#02 - IDENTIFICARE I PUNTI

CHIAVE E GLI OBIETTIVI

a osservare il sito attuale

(elementi buoni e meno);

a analizzare le chiamate al

customer service, e-mail

utenti (protesta, reclamo);

a compiere test di utilizzo;

a determinare gli obiettivi

per proseguire con coerenza.

#03 - ANALIZZARE I

VOSTRI COMPETITOR

a studiare il settore;

a analisi comparativa

di funzioni e servizi

offerti;

a mettersi nei panni

degli utenti: utilizzo

sito attuale e

competitor;

a cosa differenzia il

vostro dagli altri.

Un redesign di successo in 10 mosse

#04 - COINVOLGERE IL

VOSTRO TARGET

a non prendere alla

sprovvista il vostro

target con un redesign

“calato dall’alto”;

a comunicate con

chiarezza quando e

perché il vostro sito

cambierà.

#05 - PROGETTARE PER GLI

UTENTI, NON PER GLI

INVESTITORI

a scegliere un’usabilità

per un audience corretta;

a conoscere il proprio

target;

a fare coincidere esigenze

degli utenti con gli obiettivi

di business del cliente.

#06 - ATTENZIONE

SUBITO AL LATO

TECNOLOGICO

a tenere a proprio

fianco i referenti

tecnici (pianificazione

più accurata, chiara

delimitazione di ciò

che è

tecnologicamente

fattibile).


#07 - CURARE E VERIFICARE

L’UTILIZZO

a focalizzarsi sull’utente;

a eseguire ripetuti test di utilizzo

sia sul vecchio sia sul nuovo layout;

a identificare i problemi di

utilizzo e orientarsi alla loro

risoluzione;

a osservare in modo attento e

sistemico gli utenti all’opera;

a guardare, imparare, mettere in

pratica.

#08 - NON SOTTOVALUTARE I

CONTENUTI

a i contenuti sono un fattore critico

per la pianificazione;

a affidare a una persona dedicata

alla raccolta, modifica, scrittura e

consegna in tempo dei contenuti;

a content management e content

delivery sono parte integrante della

pianificazione.


#09 - COMUNICARE CON CHIAREZZA

GLI OBIETTIVI

a chiarire le aspettative e i

presupposti non chiariti o mal

interpretati;

a assicurarsi che il cliente e tutto il

team siano sulla stessa lunghezza

d’onda.

#10 - PENSARE A LUNGO TERMINE;

AGIRE A BREVE TERMINE

a essere graduali: suddividere il

processo e il lancio in fasi;

a usare un approccio iterativo

(step by step), cicli di revisione,

possibilità di tornare indietro);

a mantenere la tempistica,

stimare realistici obiettivi di

consegna e apportare modifiche in

corso d’opera.


a La qualità del processo e il conseguimento degli obiettivi dipendono essenzialmente

dalla capacità di sviluppare una prospettiva realmente centrata sull’utente

a Concentrarsi sulle esigenze degli utenti da cui derivare obiettivi e sotto-obiettivi

a Soluzione: segmentare la propria audience in 3 categorie

• audience primaria: gli utilizzatori più frequenti

• audience secondaria: il secondo gruppo di utenti per importanza

• audience terziaria: il resto degli utenti

a Maggior facilità a definire una mappatura del progetto e a definire i passi strategici

successivi: dall’analisi al Business Plan, dalla pianificazione dei contenuti e servizi al

marketing

a veterana con esperienza decennale;

a e-commerce manager di KPMG Consulting;

a competenze approfondite di e-business, marketing,

design, content management;

a consulenze: Procter & Gamble, America On-line.

Leight Duncan Identificare i punti chiave e la strategia per il redesign


Core Process: visione di insieme

Schema visuale

dell’intero processo:

a 5 fasi

a 3 step per ogni fase

(interconnessi e paralleli)

Core Process: visione di insieme

FASE 1: DEFINIRE IL PROCESSO

ESPLORAZIONE CHIARIMENTO PIANIFICAZIONE

Indipendentemente dalle dimensioni e della complessità del progetto bisogna pianificare.

a studiare l’azienda, il sito, il progetto;

a raccogliere informazioni e fare domande;

a conoscere la propria audience;

a confrontare il proprio progetto con gli altri

(on-line e off-line);

a calarsi nei panni dell’utente esperto

(business del cliente).


ESPLORAZIONE

> Distribuzione, raccolta e analisi di questionari

> Raccolta di materiali e documenti presso il cliente

> Comprensione dell’audience

> Identificazione delle competenze tecnologiche

dell’audience

> Identificazione dei requisiti di programmazione back-end

> Analisi competitiva del settore

CHIARIMENTO

> Briefing creativo

PIANIFICAZIONE

> Definizione del budget

> Tempistica e scheduling

> Selezione del team di progetto

> Aree e strumenti di collaborazione

> Strategie di user testing

> Documentazione del progetto





> Identificazione delle competenze tecnologiche dell’audience



> Raccolta di materiali e documenti presso

il cliente

a scovare brochure, cataloghi, schede

prodotto, …;

a visitare il sito, l’azienda, i punti

vendita, …;

a analizzare i prodotti marketing e il piano

marketing.

> Distribuzione, raccolta e analisi di

questionari

a raccogliere le informazioni

(priorità);

a esplicitare e articolare le aspettative

del cliente (client survey);

a approfondire la conoscenza del

target e le sue aspettative (maintenance

survey).










a individuare la tipologia di utenti dai

risultati della client survey, i motivi di

utilizzo del prodotto finale, le operazioni

che compiranno (task);

a definire un’audience primaria e

secondaria;

a creare un profilo dell’utente-tipo.

> Identificazione competenze

tecnologiche dell’audience

a definire i requisiti tecnologici sulla

base della tipologia e delle competenze

degli utenti;

a piattaforma, velocità di connessione,

compatibilità browser e plug-in;

a realizzare un’indagine estesa (client

spec sheet).









> Identificazione requisiti di

programmazione back-end

a step facoltativo.

a verificare se previsto o meno un

back-end;

a realizzare un’indagine approfondita

(expanded tech check).


a calarsi nei panni di utente esperto

verso i competitor;

a visitare il maggior numero di siti

possibili del settore, interagire,

contattare i customer service, verificare;

a porsi domande: cosa funziona? cosa

risulta frustrante?


> Estrarre l’essenza del prodotto

> Perché si sta ridisegnando il sito?

> Determinare gli obiettivi strategici del sito

> Briefing creativo

a sintesi degli obiettivi di design

visuale e concettuale;

a ricapitolare l’audience, punti chiave

della user experience e la strategia di

comunicazione;

a individuare sullo stile e tono del

redesign.

> Occhio all’inflazione strisciante

a piccole modifiche in corso

d’opera;

a anticipare al questo rischio alla

riunione d’avvio del progetto;

a importanza di tenere fede a

quanto pianificato (tempistica,

documentazione, prototipi,

verifiche, convalide, …) per

mantenere il progetto focalizzato

sui suoi obiettivi

ESPLORAZIONE CHIARIMENTO PIANIFICAZIONEFASE 1: DEFINIRE IL PROCESSO







> Tempistica

a adottare metodi affidabili per

tenere traccia dei tempi;

a tenere traccia dei propri carichi

di lavoro su base oraria;

a time tracking: strumento

gestionale cruciale.


a dal budget derivano estensione, vincoli,

fattibilità;

a risorse, allocazione, tempistica,

documentazione;

a monitorare budget in corso d’opera.

> Scheduling

a si lavora in base alle deadline;

a panoramico: visione d’insieme del progetto

(project manager e cliente per avere sott’occhio

la situazione);

a dettagliato: singoli documenti e materiali da

produrre, tappe di approvazione e convalida,

date consegna parziali e finali (data per data).


a stabilire chiaramente le

responsabilità di ogni membro del

team;

a comunicare in modo chiaro con

ogni membro del team.








> Aree e strumenti di

collaborazione

a predisporre aree di

comunicazione e collaborazione

del progetto (sito cliente o sito

progetto). Avanzamento del

progetto: sempre in funzione,

facile da mantenere e aggiornare

(consigliabili 2 – cliente e team).

> Strumenti di user testing

a compiere indagini per raccogliere feedback e

verificare l’utilizzo di un sito, focus group,

questionari on-line;

a le indagini migliori sono quelle che mostrano

effettivamente quello che gli utenti fanno.

> Documentazione progetto

a stilare un project plan che

attesti il budget, il briefing

creativo, documentazione

tecnica, …

> Avvio dei lavori

a kick off meeting (cliente e membri del team);

a passare in rassegna le informazioni raccolte,

obiettivi e aspettative;

a stabilire chiari canali di comunicazione;

a fissare da subito un appuntamento

settimanale.









> Monitoraggio su base oraria

a tenere traccia del proprio lavoro su base oraria;

a monitorare la profittabilità dei progetti;

a indurre il team a tenere fede allo scheduling

preventivato


FASE 2: SVILUPPARE LA

STRUTTURA DEL PRODOTTO

CONTENUTI SITO PAGINA

Ci si rimboccano le maniche e si inizia a lavorare.

a occuparsi dei contenuti e dell’architettura delle

informazioni;

a necessità di una rigorosa struttura logica;

a pianificare la struttura con un’organizzazione

concettuale (contenuti), ipertestuale e gerarchica

(sito), funzionale e gabbia di impaginazione

(pagina).

CONTENUTI

> Analizzare il fenomeno

> Schematizzare la gerarchia

> Pianificare il content delivery

SITO

> Effettuare una mappatura per il redesign

> Analizzare in modo critico il sito dell’azienda

> Stabilire convenzioni per la nomenclatura e gestione

dei materiali



PAGINA

> Gabbia concettuale

> Navigazione

> Nomenclatura e titolazioni

> Task e percorsi interattivi


> Analizzare l’esistente

> Schematizzare la gerarchia

> Pianificare il content delivery

> Analisi dell’esistente

a filtrare in modo accurato i contenuti

esistenti: testi, immagini, diagrammi,

componenti mutlitimediali, …

> Organizzazione dei contenuti

a quali contenuti si vorrebbero

trovare?, organizzati in che modo?,

aggiornati come?;

a assegnare al content management

una risorsa dedicata (meglio se dello

staff del cliente).

> Schematizzazione gerarchica

a realizzare un semplice elenco

gerarchico numerato;

a suddividere i contenuti in sezioni e

sottosezioni;

a richiedete e realizzate assieme al

cliente la schematizzazione (guidarlo,

fargli fretta, coinvolgerlo, fargli

approvare).

> Pianificazione del content delivery

a attribuire le responsabilità di

preparazione e consegna (testi,

immagini, media, …): chi fa cosa;

a fissare le date in modo non ambiguo.




> Contenuti in ritardo cronico

a causa principale per il deragliamento dei progetti web;

a tra le voci più sottovalutate in assoluto;

a pianificare opportune contromisure: inserire tra le voci di budget,

dedicare una persona dedicata a gestire l’intero processo, preparare uno

scheduling che fissi le date realistiche per la consegna dei contenuti.



> Effettuare una mappatura per il redesign

> Analizzare criticamente il sito attuale

> Stabilire convenzioni per la nomenclatura e la gestione dei

materiali

> Analisi dell’esistente

a porsi dal punto di vista

dell’utente

a confrontare le 2 mappe,

ottimizzare la navigabilità

> Mappatura

a visualizzare i link e i principali

percorsi di navigazione;

a include aspetti di contenuto,

organizzazione e in parte

funzionalità.

> Convenzioni

a essere coerenti nella gestione

dei file e della nomenclatura:

fondamentale sul piano

organizzativo.

CONTENUTI SITO PAGINAFASE 2: SVILUPPARE LA



> Gabbia concettuale

> Navigazione


> Task e percorsi interattivi

> Navigazione

a gli item permettono all’utente di

accedere a contenuti;

a pulsanti, menu, immagini:

orientamento e familiarità;

a dove mi trovo? dove posso andare?

come torno indietro?

> Gabbia concettuale (wireframe)

a layout informazionale: schematizza i

contenuti, gli item di navigazione e alcune

funzionalità;

a schematizzare il page flow: come

l’utente naviga e interagisce.


a come chiamare le aree e le sezioni,

intitolare i paragrafi, definire gli oggetti

interattivi;

a la coerenza è il punto chiave per la

navigabilità.

> Tasks e percorsi di interazione

a da prevedere se vi siano forme di

interazione (compilazione di moduli,

registrazione e login, acquisti, …);

a analizzare i task e schematizzare il

percorso.



FASE 3: VISUAL DESIGN E

TESTING

CREAZIONE CONVALIDA APPLICAZIONE

L’interfaccia grafica è la prima esperienza percettiva dell’utente.

a il visual design è un fattore critico,

come di successo;

a cominciare a testare le funzionalità;

a sviluppare un protosito;

a soddisfare le esigenze dell’utente, in

modo che possa efficacemente essere

tradotto in codice.


TESTING

CREAZIONE

> Revisione degli obiettivi e del briefing creativo

> Brainstorming concettuale

> Presentazione di proposte di layout e raccolta di

feedback

CONVALIDA

> La realizzazione del “protosito”

> Una verifica preliminare del funzionamento

APPLICAZIONE

> Creare i template grafici

> Stendere una guida di stile per il design (preziosa

per la manutenzione e i futuri aggiornamenti del

sito)

CREAZIONE CONVALIDA APPLICAZIONE

> Revisione degli obiettivi e del briefing creativo


> Presentazione di proposte di layout e raccolta di feedback


a coinvolgere l’intero team;

a confermare la fattibilità tecnica

per ogni concetto prima di proporla

al cliente.

> Revisione degli obiettivi e del

briefing creativo

a riesaminare gli obiettivi

strategici e il briefing;

a prepararsi a progettare per la

propria audience.

> Presentazione di layout e verifica del feedback

a mostrare al cliente alcune proposte di design: ogni proposta deve essere una

correzione e un raffinamento della precedente;

a stabilire chiaramente aspettative e parametri di valutazione (attenzione al

perfezionismo del cliente, direzioni differenti da quelle concordate);

a eventualmente pronti a fatturazione extra;

a farsi firmare per iscritto l’approvazione dal cliente.


TESTING

> Realizzazione del protosito

> Verifica preliminare del funzionamento

> Testing funzionale

a minimizzare il rischio che

intervengano ostacoli tecnici nella fase

di implementazione;

a effettuare i test con vari browser e

differenti piattaforme (DHTML, frame,

script, …).

> Realizzazione del protosito

a permette di esaminare

efficacemente contenuti, navigazione,

page flow, interazione;

a simulare la user experience.

CREAZIONE CONVALIDA APPLICAZIONEFASE 3: VISUAL DESIGN E

TESTING

> Creare i template grafici delle pagine

> Stendere una guida di stile per il design

> Realizzazione di una guida di stile per

il design

a documentare il design: manuale di

riferimento per esigenze future di design,

manutenzione e aggiornamento;

a codifica degli standard adottati per

font, colori, titoli, salvaguardando

l’integrità del design.

> Creazione dei template grafici

a creare le pagine master del sito

complete dal punto di vista grafico e

funzionale (rollover, …), ma prive di

contenuti reali (segnaposto o testi di

riempimento).

CREAZIONE CONVALIDA APPLICAZIONEFASE 3: VISUAL DESIGN E

TESTING

FASE 4: PRODUZIONE E

CONTROLLO QUALITA’

REVISIONE COSTRUZIONE TESTING

Ricomporre i pezzi del mosaico e dare vita al progetto nel suo insieme.

a ogni aspetto si interfaccia e interagisce

con gli altri;

a insieme di produzione, contenuti,

design, HTML e/o Flash, …;

a monitoraggio scrupoloso della qualità de

sito (opportuni test);

a individuazione eventuali bug e

correzione;

a raccolta dei primi feedback da campioni

di utenti e migliorie;

a il lancio è imminente!



REVISIONE

> Linee guida e specifiche

> Stato e condizioni di avanzamento del progetto

> Architettura di file e cartelle

COSTRUZIONE

> Ottimizzazione della grafica

> Una verifica preliminare del funzionamento

> Realizzazione di script “leggeri”

> Riempimento delle pagine

> Sviluppo del back-end (qualora necessario)

TEST

> Pianificazione

> Monitoraggio (testing)

> Identificazione bug, definizione priorità, esecuzione

debugging

> Verifica finale



> Stato e condizioni di avanzamento del progetto


> Stato e condizioni di avanzamento

a confrontare le ore lavorate con

quelle preventivate;

a aggiungere risorse (sottostimato

i, budget), o incrementare il budget

(disallineamento per le richieste del

cliente, imprevisti, …)


a chiarire con il cliente (suo referente

tecnico) questioni riguardanti browser,

piattaforma, tecnologia, struttura file, …

(Client Spec Sheet).


a determinare convenzioni di nomenclatura e organizzazione per il redesign;

a obiettivo: semplificare gli aggiornamenti futuri, manutenzione, scalabilità;

a stabilire come i file dovranno essere nominati, salvati, archiviati.





> Template e pagine master in HTML



> Sviluppo del back-end (se necessario)

> Template e pagine master

a includere nelle pagine master

tutti gli elementi che ricorrono

globalmente: script, contenuti

invisibili, …


a trasformare i file grafici dei

visual designer in codice (tagliare,

segmentare, …);

a ridurre al minimo le dimensioni

dei file(ottimizzazione grafica).


a inserire forme + semplici di

interattività o animazione (rollover,

pop-up, menu a tendina, …) e

sottoporli a test;

a inserire script più complessi di

volta in volta nel momento in cui

viene costruita la relativa pagina.


a monitorare con ampio aniticipo

l’avanzamento del content delivery;

fissare dead line realistiche in cui i

contenuti possano (devono) essere

resi pronti e disponibili.




> Pianificazione

> Monitoraggio (testing)

> Identificazione bug, decisione priorità, esecuzione

debugging

> Monitoraggio

a il testing è un processo a più strati: si

effettua un alpha testing (interno),

seguito da un beta testing (sul server

definitivo);

a il grado di profondità del testing

dipende dal budget

> Pianificazione

a sia un testing formale, semiformale,

informale va sempre pianificato;

a elencare risorse, scheduling,

strumentazione, presupposti, un piano per

la ricerca e la correzione dei bug, prima

del lancio.

> Priorità ed esecuzione del debugging

a delineare un metodo per tenere

traccia dei bug, stabilirne le priorità e

correggerli.

> Verifica finale

a controllare tutto l’insieme: contenuti,

design, produzione, funzionalità;

a far firmare al cliente l’approvazione

finale.



FASE 5: LANCIO E

MANUTENZIONE

CONSEGNA LANCIO MANUTENZIONE

Garantire l’efficienza del sito anche dopo il lancio.

a team di design/produzione e

manutenzione/aggiornamenti spesso diversi;

a a cavallo del lancio il I team passa le

consegne al II (file, documentazione,

indicazioni utili, …).

FASE 5: LANCIO E

MANUTENZIONE

CONSEGNA

> Guida di stile per produzione/aggiornamento


> Archiviazione

> Meeting retrospettivo

> Training per il team di manutenzione

LANCIO

> Pianificazione dei comunicati

> Registrazione presso i motori di ricerca

> Lancio ufficiale

MANUTENZIONE

> Team di manutenzione

> Piano di manutenzione

> Misurazione dei risultati, ossia del successo di un sito

> Verifica della sicurezza


> Guida di stile per produzione/aggiornamento


> Archiviazione




a raccogliere ogni materiale utile e

organizzarlo in pacchetti da distribuire al

cliente e al team di manutenzione.

> Guida di stile per

produzione/aggiornamento

a includere informazioni e listati su tag

HTML, relativi attributi, immagini, …

> Archiviazione

a raccogliere e archiviare

sistematicamente tutti i documenti (in

versione elettronica e cartacea);

a ordinare e archiviare proposta,

contratto, project plan, pianificazione,

budget, approvazioni cliente, …;

a essere precisi e accurati!


a rivedere retrospettivamente e in modo

costruttivo l’interso iter del progetto;

a riflettere su ciò che ha funzionato e

ciò che andrà messo a punto alla successiva

occasione.


a accompagna e segue la consegna delle guide di stile;

a va garantito (e pertanto considerato) per il team di manutenzione.

FASE 5: LANCIO E

MANUTENZIONE



> Registrazione presso i motori di ricerca

> Lancio ufficiale

> Registrazione presso i motori di

ricerca

a ripetere le registrazioni dopo il

redesign;

a seguire le regole d’oro per farsi

trovare.


a preavvertire l’audience riguardo

l’azione di redesign;

a incoraggiare gli utenti a visitare il

nuovo sito e a “usarlo”, fornendo un

feedback;

a assicurarsi che si attui una campagna

di comunicazione chiare ed efficace da

parte del Team Marketing.

> Lancio ufficiale (upload)

a caricare sul server nelle ore di minor traffico;

a utilizzare una home page provvisoria mentre si carica la nuova versione;

a tenere pronto un back-up o una versione provvisoria.

FASE 5: LANCIO E

MANUTENZIONE




> Misurazione dei risultati, ossia del successo del sito



a stilare un piano preciso (sia per

sezione, sia di contenuti) indicando date di

aggiornamento quotidiane, settimanali,

mensili, trimestrali, … ;

a fissare una scaletta di controlli

periodici.


a verificare quali persone siano

all’altezza del compito assegnato (sia di

numero sia di competenza).

> Misurazione dei risultati: il successo del

sito

a tenere traccia delle visite degli utenti,

delle pagine viste, degli errori riscontrati,

del tempo di caricamento, …;

a analizzare ogni forma di feedback

(vendite aumentate? chiamate al customer

service diminuite?, …).


a gli hacker non si riposano mai: state in

guardia!

FASE 5: LANCIO E

MANUTENZIONE

FASE 1

-

DEFINIRE IL PROCESSO

a verranno allestiti il contesto, la pianificazione e tutti i contorni del progetto;

a si metterà il cliente nelle condizioni di aiutare a definire gli obiettivi, il

budget, la timeline e l’audience del progetto.

ESPLORAZIONE

> Raccolta informazioni

> Comprensione

dell’audience

> Analisi competitiva

CHIARIMENTO

> Individuazione degli

obiettivi strategici

> Briefing creativo

PIANIFICAZIONE

> Impostazione del

project plan



> Selezione e attivazione

del team

> Aree e strumenti di

collaborazione


> Avvio del progetto

ARGOMENTI TRATTATI


ESPLORAZIONE

Porsi e porre molte domande

a obiettivi del cliente;

a audience (requisiti e competenze);

a stato del settore e competitor.

CHIARIMENTO + PIANIFICAZIONE

Sistematizzazione delle informazioni in modo chiaro e

conciso (cliente e team)

a quali i desiderata e gli obiettivi del cliente;

a quanto costerà il progetto;

a chi sono i membri del team;

a quali sono le responsabilità del cliente;

a quali materiali produrre e con quali scadenze;

a quali sono gli obiettivi a lungo termine.



a l’esplorazione è un processo cognitivo;

a lo scopo è di immedesimarsi negli utenti, migliorare

la comprensione dell’audience, dell’azienda, del

processo.


+ Comprensione dell’audience


ESPLORAZIONEFASE 1: DEFINIRE IL PROCESSO

La qualità dell’input da parte del cliente è un fattore critico per il successo di un sito.

Il seguente questionario vi aiuta ad articolare e identificare gli obiettivi globali del redesign,

incluse specifiche domande circa il messaggio, l’audience, i contenuti, il look and feel, le

funzionalità.

Ogni decision maker coinvolto nel processo dovrebbe compilare una copia del questionario,

rispondendo a tutte le domande in modo anche conciso ma chiaro e significativo, aggiungendo

eventuali note o commenti finali.

Una volta compilato, il questionario deve essere rispedito via e-mail al project manager del

team di sviluppo.


> Indagine sul cliente

ESPLORAZIONE

> Client Survey

a spesso i clienti hanno idee chiare circa gli obiettivi di business, meno circa

gli obiettivi del progetto;

a lo scopo è di immedesimarsi negli utenti, migliorare la comprensione

dell’audience, dell’azienda, del processo.


Informazioni generali

1. Qual è il nome della vostra

azienda e qual è il vostro URL

attuale (o previsto)?

2. Chi sono i contatti principali

nella vostra organizzazione, e chi

ha il compito di approvare il

progetto? (elencare nomi, titoli,

indirizzi e-mail e recapiti

telefonici)

3. Quale data è prevista per il

lancio del nuovo sito? Ci sono

eventuali fattori esterni che

possono vincolare la tempistica?

(ad es.: piano di comunicazione/

PR, roadshow, fiere/eventi,

report annuali)

4. Avete già stabilito le

proporzioni di massima del

budget per questo progetto?

Suddividere il progetto in fasi

distinte può essere opportuno per

ragioni di budget e tempistica?

Sito attuale

1. A vostro parere il vostro sito

attuale garantisce una positiva user

experience? Perché?

2. Quali aree del sito attuale vi

sembrano di maggiore successo, e

perché?

3. Quali sono i limiti e difetti del

vostro sito attuale? Potete citarne

tre in particolare che vorreste

modificare oggi stesso, se possibile?

4. Riguardo al vostro sito attuale,

avete condotto qualche test di

usabilità o raccolto feedback dai

vostri utenti? Se è così, quanto

tempo fa sono state effettuate tali

verifiche? (per favore, allegare i

risultati)

5. Quanto ritenete sia importante

mantenere lo stesso look and feel,

logo e tipo di branding del sito

attuale?

Motivazioni del redesign

1. Quali sono le ragioni primarie per

cui volete sottoporre a redesign il

vostro sito? (ad es.: nuovo business

model, attualizzazione del sito,

espansione dei servizi, differente

audience)

2. Quali sono i vostri primari

obiettivi di business on-line legati al

redesign? E quali quelli secondari?

(ad es.: aumento delle vendite,

marketing/branding, alleggerimento

del customer service). Per favore,

prendere in considerazione obiettivi

sia a breve che a lungo termine.

3. Qual è il principale problema di

business che vi aspettate di risolvere

grazie al redesign? Come pensate di

misurare il successo di tale

soluzione?

4. Quale strategia avete in atto (sia

on- che offline) per perseguire i

vostri nuovi obiettivi di business?



ESPLORAZIONE

> Client Survey


Audience e azione desiderata

1. Descrivete un tipico utente che

viene a visitare il vostro sito. Con che

frequenza si collega, e cosa fa

abitualmente sul Web? Quali sono la

sua età, il suo lavoro, il suo stile di

vita? (spingersi al massimo livello di

dettaglio possibile. Descrivere più di

una tipologia di utente, se necessario)

2. Qual è l’azione essenziale che

desiderate da parte degli utenti

quando visitano il sito? (ad es.: fare

acquisti, registrarsi, cercare

informazioni)

3. Quali sono i fattori chiave che

inducono il vostro target a scegliere

prodotti/servizi della vostra azienda?

(ad es.: prezzo, servizio, valore)

4. Quante persone accedono al vostro

sito nell’arco di un giorno, una

settimana, un mese? Come misurate

l’utilizzo del vostro sito? Prevedete

che dopo il redesign il traffico

aumenti, e in che proporzione?

Percezione

1. Come vorreste che l’utente

percepisse il nuovo sito? Elencate

alcuni aggettivi (ad es.: prestigioso,

amichevole, autorevole, divertente,

innovativo, rivoluzionario, incisivo). In

cosa differisce la percezione

dell’immagine attuale?

2. Nel mondo off-line come viene

attualmente percepita la vostra

azienda? Volete trasmettere lo stesso

tipo di messaggio tramite il vostro

sito?

3. Come si differenzia la vostra

azienda rispetto ai competitor?

Pensate che la vostra audience

attuale percepisca tale differenza?

(elencare gli URL dei principali

competitor)

4. Citate gli URL di alcuni siti che

trovate particolarmente attraenti:

cosa vi piace specificamente di quei

siti?

Contenuti

1. Per il nuovo sito verranno utilizzati

contenuti già presenti in quello

attuale? Se sì, qual è la fonte, chi è

responsabile dell’approvazione e chi

della revisione? I contenuti sono già

stati controllati? Per i nuovi

contenuti, lo sviluppo sarà in-house o

affidato a fornitori esterni?

2. Qual è la struttura e

l’organizzazione di base dei

contenuti? Ricalcherà o espanderà

quella del sito attuale?

3. Descrivete elementi visuali o

contenuti che potranno essere tratti

dal sito attuale o da materiali

marketing (ad es.: logo, schema di

colori, navigazione, nomenclatura e

così via)

4. Il nuovo sito in cosa differirà da

quello precedente, in termini di

funzionalità e navigazione? Avete già

una mappa del sito attuale? E una

mappa o uno schema di quello da

realizzare?



ESPLORAZIONE

> Client Survey


Tecnologia

1. Se ne siete a conoscenza, qual è la

piattaforma e il browser di

riferimento per il target del sito?

2. Ci sono particolari tecnologie

(Flash, DHTML, JavaScript, RealAudio)

che volete utilizzare nel nuovo sito?

Se sì, in che modo e in che misura

ritenete che miglioreranno la user

experience? (descrivere in dettaglio)

3. Il vostro sito deve avere

funzionalità database (contenuti

dinamici, indicizzazione e ricerca,

registrazione/login)? Avete già un

database in funzione? (descrivere

dettagliatamente, incluse applicazioni

e versioni software)

4. Avrete la necessità di implementare

transazioni sicure (e-commerce)? Sono

già previste dal sito attuale?

(descrivere in dettaglio)

5. Avrete altri specifici requisiti di

programmazione (come

personalizzazione, funzioni di ricerca,

e così via)? (descrivere in dettaglio)

Marketing e aggiornamento

1. La maggior parte del pubblico

come viene a conoscenza del vostro

sito attuale? In che modalità la vostra

azienda sta attualmente diffondendo

il suo URL?

2. Brevemente: quali sono i vostri

piani marketing a breve termine

(specificamente per quanto riguarda il

redesign, il lancio e i dodici mesi

successivi)?

3. Avete una strategia marketing già

in atto, o pianificata, per promuovere

il nuovo sito? (se sì, descrivere)

4. Intendete mantenere aggiornato il

sito? Con che frequenza? Chi sarà

responsabile degli aggiornamenti e

della fornitura di contenuti?

Note/contenuti

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________

_____________________________



ESPLORAZIONE

> Client Survey




> Personalizzazione del Client Survey

ESPLORAZIONE

Personalizzazione

da calibrarsi su ogni specifico cliente o settore di mercato

Unificare gli obiettivi

a aggregare i risultati (ottenere un’unica lista di risposte);

a il cliente deve rappresentare al team un’unica entità

compatta, con obiettivi condivisi.

Identità corporate

1. Cosa si vuole comunicare con il logo? Che reazione

emozionale si vuole suscitare?

2. Elencare alcuni logo che piacciono

3. Quali colori e immagini veicolano la personalità

dell’azienda?

4. Nel logo va incluso uno slogan? Cosa deve

trasmettere il testo?

Promozione

1. Generalmente quali metodi vengono utilizzati per

promuovere il sito? Funzionano?, Generano traffico?

2. Cosa spingerà gli utenti a tornare sul sito?

Attualmente come si incoraggiano?

3. Quali sono gli obiettivi a breve, medio e lungo

termine circa l’aumento del traffico e di visibilità?




> Analisi del Client Survey

ESPLORAZIONE

Obiettivi primari e secondari

Quale è il principale problema di business

(es. aumento traffico)? Come si pensa di

risolverlo?Audience

Quale è il profilo utenti? (occupazione,

età, frequenza, velocità connessione)Punti chiave del redesign

Quale è lo scopo? Tono della comunicazione

Sulla base dell’audience (familiare,

sofisticato, autorevole)Portata del progetto

Quali sono i confini del progetto?Manutenzione

Farsi una prima idea della natura e

frequenza dei futuri aggiornamentiContatti

Quante e quali sono le persone coinvolte?

Creare una contact list per il cliente e

per il team (nomi, e-mail, telefono, fax,

recapiti postali per invii e fatturazione)


Informazioni generali

1. Quali aree del nuovo sito prevedono un aggiornamento (ad

es.: news, foto, oroscopi, prodotti, recensioni) e con quale

frequenza (ad es.: quotidiana, mensile, trimestrale, annuale)?

2. Descrivete il team di manutenzione, le responsabilità

individuali e l’allocazione del tempo, se ne siete già a

conoscenza. (A tempo pieno? Part-time? Ruoli condivisi?)

3. Come sarà aggiornato il sito? I contenuti verranno riversati

manualmente in HTML? Utilizzerete un sistema di content

management per gestire gli aggiornamenti in modo dinamico e

automatizzato (ad es.: database di e-commerce o di testi)? Se

avete intenzione di ricorrere a un sistema di content

management, descrivetelo in dettaglio.

4. Chi sarà il responsabile della manutenzione, e qual è il suo

livello di competenza tecnica? Quali sono i requisiti in

proposito? Questa persona necessiterà di un periodo di

formazione?

5. Chi sarà responsabile delle modifiche grafiche del sito?

Questa persona farà riferimento ai template grafici esistenti?

Qual è il suo livello di competenza nel design?

Creazione dei contenuti

1. Chi sarà responsabile della produzione di

contenuti? Questa persona sarà in grado di dedicarvisi

a tempo pieno o part-time?

2. Man mano che il sito si espanderà, chi avrà il

compito di salvaguardarne il look-and-feel

complessivo?

3. Con quale frequenza si aggiungeranno al sito nuove

aree o sezioni? Si tratterà di sezioni basate sugli stessi

template grafici esistenti, o svincolate da essi?



> Indagine sulla manutenzione

ESPLORAZIONE

> Maintenance Survey


Competenze di produzione

1. Quali competenze tecnologiche sono

necessarie per aggiornare il sito (ad es.:

HTML, scripting)?

2. La home page del sito prevede un sistema

automatizzato di aggiornamento dei

contenuti? (ad es.: refresh automatico di

testi e/o immagini a ogni caricamento,

generazione di citazioni random,

aggiornamento della data e dell’ora,

eccetera).

Produzione

1. Come si metterà al corrente l’utente che il

sito è stato aggiornato? Sono previste

notifiche via e-mail o altre forme di

annunci/comunicati?

2. Chi avrà la responsabilità di verificare e

rinnovare la registrazione presso i motori di

ricerca? Con quale frequenza verranno

aggiornate le parole-chiave e i tag META?

ESPLORAZIONE

> Maintenance Survey

... ovvero

a chi se ne occuperà?

a con che frequenza?

a con che livello di crescita?



> Indagine sulla manutenzione


ESPLORAZIONE

BUONI CLIENTI

> Sono orientati agli obiettivi; non perdono di vista

il quadro globale.

> Rispondono al Client Survey in modo chiaro e

dettagliato.

> Forniscono uno schema chiaro degli obiettivi e

della portata del progetto.

> Hanno una discreta conoscenza dell’ambiente

Web e dei processi di sviluppo.

> Provvedono puntualmente alla firma e

all’approvazione.

> Concordano su consegne, scheduling, budget.

> Rispondono alle e-mail e alle telefonate.

> Hanno un approccio team-oriented.

> Vi consegnano in tempo i contenuti.

> Fanno parte della soluzione, non del problema.

CLIENTI AD ALTO RISCHIO

> Sono frettolosi e hanno richieste irrealistiche per

la tempistica.

> Non hanno idea di quali saranno i contenuti ma

vogliono che “sembrino davvero tosti”.

> Pretendono che creiate un sito demo, dicendo che

“a quello vero ci penseremo dopo”.

> Non vi danno l’approvazione finale, non vi

mettono in contatto con i decision maker.

> Non hanno tempo per compilare il questionario.

> Scarso budget, scadenza ravvicinata.

> Non prendono decisioni, non rispondono

tempestivamente alle e-mail e alle telefonate.

> Sono indecisi, cambiano parere continuamente.

> Vogliono occuparsi in prima persona degli aspetti

creativi per “risparmiare quattrini”.


Esempio di profilo utente molto dettagliato

Paige McCormick

Paige McCormick è insegnante di arte, artista e allenatrice di una squadra

femminile di baseball. Ha 35 anni e vive a Portland (Oregon, USA), è single, ha un

cane.

La casa è di sua proprietà, e Paige dedica parecchio tempo a bricolage e

giardinaggio. Lavora molto e ha uno stile di vita estremamente attivo. Nel tempo

libero fa jogging, mountain bike e passeggiate con il suo cane.

Paige ha una vera passione per il suo cane Ruthie e fa di tutto per prendersene

cura. È un’attenta frequentatrice di negozi per animali; occasionalmente legge

libri sul comportamento e l’addestramento dei cani; è felice di vivere vicino a un

parco, perché così Ruthie può correre in libertà.

Paige si collega a Internet con un modem 56K ma progetta di passare quanto prima

a una connessione ADSL. Usa un Mac G3 e si considera un’esperta di computer. Fa

molti acquisti online, apprezzando la comodità e il risparmio di tempo, per quanto

ogni tanto l’incertezza sui tempi di consegna sia un deterrente. Apprezza in

particolare la consegna automatica, ogni mese, di una scorta di cibo per cani.

Riguardo ai prodotti per animali, predilige i piccoli negozi specializzati che offrono

prodotti gratificanti anche sul piano estetico, mentre non le piacciono i negozi in

stile grande magazzino, come PetClub, sebbene ammetta che possono soddisfare

ogni necessità con prezzi contenuti.

ESPLORAZIONE



ESPLORAZIONE


> Requisiti tecnologici

> Competenze e abilità audience

> Analisi delle competenze

> Identificazione esigenze tecniche

Requisiti tecnologici

Fattore critico per valutare la portata e il budget del progetto

CONFRONTO TRA ASPETTATIVE TECNOLOGICHE DEL CLIENTE E BUDGET EFFETTIVO

$ ASPETTATIVE

Sito in HTML e Flash

Log-in e personalizzazione

Aggiornamenti quotidiani

Multilingue

DHTML

Demo in Flash

Streaming audio-video

Motore di ricerca interno

Funzionalità di e-commerce

Contenuti dinamici

Da 100 a 200 pagine

$ REALTÀ

Sito statico in semplice

HTML

Qualche animazione

GIF/Flash

Effetti rollover Javascript

Casella e-mail per contatti

Da 30 a 50 pagine


ESPLORAZIONE






Banda larga o no?

Ampiezza di banda in termini di capacità (tempo download,

versione browser, plug-in, …)

Gli utenti della banda larga non sono necessariamente + esperti


Quale % si collega via modem, monitor > 17’’, plug-in flash,…?

Esplicitare queste informazioni è tutt’altro che semplice

Lo scopo è identificare i requisiti tecnologici della propria audience

(download sostenibile, velocità modem, compatibilità browser, …):

stabilire una forchetta di standard al cui interno il team deve mantenersi

(standard allineati alle aspettative del cliente)

ESPLORAZIONE

Video streaming Quick Time a un’audience con Modem?

IMPOSSIBILE







a La TV verità: persone reali irresistibilmente affascinate da quello che le altre dicono e fanno

a Designer e sviluppatori hanno bisogno di dettagli (motivazioni, frustrazioni, desideri utenti)

a Paige vorrebbe una certa funzionalità o sarebbe contrariata da un banner pubblicitario?

a I designer utilizzano i profili per trovare compromessi nelle scelte di progettazione

a Informazioni da includere nei profili:

• dati demografici

• storie di vita quotidiana

• foto nel loro ambiente e dei loro soggetti

• preferenze e idiosincrasie

• modelli di comportamento

• frustrazioni legate al prodotto

• desiderata

a presidente Gomoll Research;

a specializzata in user experience design;

a esperta nel campo dell’interface design e dell’usabilità;

a clienti: HP, Compact, WebTV.

Kate Gomoll Profilo degli utenti

Rendere i profili leggibili

a stile narrativo e attraente;

a rendere memorabile ogni persona.


zeddy

luogo di nascita:

età:

statura:

peso:

capelli:

occhi:

hobby:

segni particolari:

il pianeta zed

12 anni-zed

1,00

24 Kg. Terrestri

sconosciuti

neri

scoprire cose nuove,

predire il futuro e

divertirsi follemente

casco in testa,

adora il colore verde

superpoteri, ed astronave

parcheggiata nelle vicinanze

AGENT PER MOBILE GAME

ESPLORAZIONE

> Tech-Check> Comprensione dell’audience



1. Il vostro sito attuale include una o più delle

seguenti funzioni? (Contrassegnate tutte le voci

appropriate e aggiungetene una breve

descrizione)

Motore di ricerca

Personalizzazione

(Login/cookie)

Registrazione

Funzioni di sicurezza

Questionari/sondaggi/votazioni on-line

Distribuzione di newsletter via

e-mail

Altro:

2. Elencate ogni altra funzione che vorreste

aggiungere al sito (ora o in futuro).

3. Il sito prevede, attualmente o in futuro,

funzionalità di e-commerce? (ad es.: transazioni

sicure, gestione magazzino, compilazione di ordini).

Sì (descrivere qui sotto)

No

4. Il sito include o includerà funzioni di

login, registrazione, personalizzazione?


No


ESPLORAZIONE

> Tech-Check> Comprensione dell’audience



Nota – Se si ha risposto “sì” ad almeno una delle domande precedenti, è necessario pianificare un

workflow a parte per lo sviluppo e la gestione delle problematiche tecnologiche.

5. Utilizzate o utilizzerete un sistema di content

management per aggiornare/pubblicare

dinamicamente i contenuti?


No

6. Il sito deve integrarsi con un database

preesistente? (Se la risposta è positiva,

descrivere il tipo di database: ad es. SQL Server,

Access, FileMaker).

7. Il sito deve incorporare script o porzioni di codice

che avete già definito? Si tratta di codice server-side

o clientside (se ne siete a conoscenza)?


No

8. Indicate per favore nomi e recapiti dei vostri

responsabili tecnici e/o di fornitori esterni a cui

potremmo rivolgerci per maggiori dettagli.


ESPLORAZIONE





a Se fatta seriamente, generalmente al di fuori della portata di

budget “normali”;

a Dedicarsi a studiare il settore di mercato e i competitor;

a Confrontare le caratteristiche del sito attuale con gli altri:

Cosa funziona?, Cosa no?


a Branding: arte e scienza di identificare e posizionare gli elementi distintivi di un’azienda

a Brand: incorpora l’essenza di un prodotto o un servizio in una forma attraente e facile da

ricordare

a Nel brand si condensa l’intera user experience

a Identificare i punti di forza di un brand e massimizzarli mediante il design visuale e i testi

a Coerenza on-line/off-line

a Identificare sia il valore attuale sia potenziale

a dirige agenzia Phinney/Bischoff Design House di Seattle;

a esperienza ventennale in marketing strategico e strategie di

branding.

Leslie Phinney Esplorazione e branding


grafica tradizionale

> loghi aziendali

> carta intestata/biglietti da visita

> brochure/cartelletta

mascotte aziendali

> ideazione

> definizione

web

> sito HTML

> portale

> sito Flash

> introduzione in Flash

cd-rom

BRAND - IMMAGINE COORDINATA

packaging

shopping bag

gadget

> penna

> portachiavi

> calendario

signage

> insegna

outdoor

> camioncini

Azienda/cliente

Somministrare ed elaborare il

questionario Client Survey;

definire le aspettative circa

obiettivi primari, audience,

tono/stile eccetera.

Raccogliere informazioni e

materiali esistenti: marketing,

ricerche precedenti, stampati

vari.

Effettuare interviste di

approfondimento via e-mail o

telefono (problemi aperti,

possibili soluzioni, scopi specifici

del redesign).

Settore

Analizzare il contesto on- e off-

line del settore di mercato del

cliente. Utilizzare metodi

tradizionali (bibliografia, annuari,

ricerche on-line) oppure, se il

budget lo consente, commissionare

ricerche esterne (società di

consulenza).

Analizzare i periodici del settore,

i newsgroup, eventuali whitepaper e

via dicendo.

ESPLORAZIONE

> CHECKLIST DI RIEPILOGO> Riepilogo


Strategia/marketing/branding

Informarsi sulle campagne di

marketing/pubblicità già in corso

o pianificate, sia on-line che off-

line.

Comprendere la strategia

marketing dell’azienda e i suoi

scopi sia a breve che a lungo

termine.

Comprendere la strategia di

branding, la percezione da

promuovere, lo stile e l’approccio

di comunicazione (attuale e

desiderato).

Sito attuale

Test usabilità. Punti forti e deboli

(navigabilità, contenuti, …).

Raccogliere dati quantitativi

disponibili (log server, marketing,

acquisto e traffico).

Raccogliere dati qualitativi.

Feedback clienti: cosa piace, sezioni

successo e perché.

Stendere specifiche tecniche-

funzionali. Comprensione sito

attuale e tecnologie sottostanti.

Content audit: quali contenuti

sono rilevanti e quali no? Adeguati?

ESPLORAZIONE



Competitor

Identificare i competitor

primari e secondari (sia on-line

che off-line).

Condurre un’analisi

competitiva formale o informale;

Evidenziare le funzionalità e i

tratti distintivi di ciascun sito e/o

azienda.

Audience

Definire l’audience primaria del

sito (da cliente e da Client Survey).

Raccogliere dati demografici

sull’audience: occupazione, età,

genere, reddito, pattern di

comportamento on-line, dotazione

tecnologica, ….

Creare profili utente e modelli di

task interattivi: stile di vita,

ambienti, tipi utilizzo Internet e

modelli di interazione con il sito.

Comporre scenari realistici, (casi

comportamento dell’utente)

ESPLORAZIONE



Prodotti/servizi

Identificare e familiarizzarsi

con i prodotti/servizi offerti dal

cliente.

Delineare le abitudini

d’acquisto: i fattori che inducono

un potenziale cliente a pagare o a

registrarsi.

Determinare il grado di

efficacia del customer service: è

effettivamente di aiuto o no?

Altri dati

Aggiungere altre aree di interesse

e altre informazioni, specifiche per

un certo cliente o settore, se

possono fornire ulteriori indicazioni

o informazioni utili per il progetto.

ESPLORAZIONE



> Chiedersi

a quale è lo scopo del nuovo sito ?

a perché questo progetto ?

a cosa si va a offrire in più ?

> Individuazione obiettivi strategici

> Briefing creativo

CHIARIMENTO

> Obiettivi possibili cliente

• aumentare traffico;

• incrementare vendite;

• promuovere nuovo prodotto;

• creare sito dinamico orientato ai contenuti;

• alleggerire carico customer service;

• rendere più intuitiva la navigazione;

• facilitare consultazione catalogo e acquisti.

• …


> Step operativi

a quali obiettivi possono decidere il successo o

l’insuccesso ?

a come farà il cliente a stabilire se ha raggiunto il suo

scopo ?

a stabilire obiettivi I, II, III

a suggerire al cliente obiettivi misurabili dal punto di

vista qualitativo-quantitativo


> Briefing creativo

CHIARIMENTOFASE 1: DEFINIRE IL PROCESSO

a assicurarsi di aver capito quanto il cliente ha detto

a B.C. = riferimento costante

a chiari e concisi: obiettivi, audience, percezione

a no visuale, no schemi, no bozzetti

a controfirma


> Briefing creativo

CHIARIMENTO

> Strutturare il B.C.

a cliente, titolo, data, versione (intestazione)

a progetto (riassumere contorni generali)

a target (chi, interessi, abitudini)

a tono, stile, linee guida (reazione da suscitare)

a strategia di comunicazione (leva)

a posizionamento competitivo (fattori successo)

a messaggio chiave (keyword di sintesi progetto)


Sintesi del progetto

1. Qual è la panoramica del

progetto? Descrivere in una

frase, contestualizzare.

2. Qual è lo scopo primario e

globale del nuovo sito?

3. Quali sono gli obiettivi

secondari?

4. Quali sono gli obiettivi a

lungo termine?

Profilo dell’audience

1. Qual è l’audience di riferimento?

Scegliere un utente-tipo e

tracciarne un dettagliato profilo.

Se necessario, componete più

profili corrispondenti a diversi

segmenti di audience.

2. Qual è un tipico task che

l’utente svolgerà nel nuovo sito?

(ad es.: registrazione, login,

ricerca di informazioni,

acquisto, comunicazione).

> BRIEFING CREATIVO: UNA TRACCIA> Individuazione obiettivi strategici

> Briefing creativo

CHIARIMENTOFASE 1: DEFINIRE IL PROCESSO

Percezione/tono/linee guida

1. Cosa pensa e prova

l’audience del sito attuale?

2. Cosa si vorrebbe che

pensasse e provasse?

3. Come riuscirà il nuovo sito a

conseguire questo effetto?

4. Quali aggettivi possono

descrivere come il sito e

l’azienda dovrebbero essere

percepiti dall’audience?

5. Quali sono i principali aspetti

chiave che il sito dovrebbe

veicolare sul piano visuale?

Profilo dell’audience

1. In cosa si differenzia l’azienda

(e il sito) rispetto ai competitor?

2. Quali sono le caratteristiche

peculiari che distinguono

l’azienda?

3. Quali sono le aree di maggior

successo del sito attuale, e

perché?

> BRIEFING CREATIVO: UNA TRACCIA> Individuazione obiettivi strategici

> Briefing creativo

CHIARIMENTO

Messaggio di fondo


ESERCITAZIONE_02

obiettivo: realizzare un briefing creativo (1 pagina e

½) per il redesign di un prodotto editoriale digitale

(quindi non obbligatoriamente web) sulla base delle

informazioni precedenti

convenzioni: formato RTF, in 1 pagina, carattere

Verdana 10, impostazione pagina (sup. 2.5, inf. 2.5,

sin. 2, dx. 2), interlinea 1.5, allineamento giustificato

> Il Project Plan

a focalizzarsi sugli elementi chiave;

a deve contenere almeno i seguenti elementi:

• visione d’insieme del progetto;

• scheduling dettagliato;

• budget analitico;

• briefing creativo;

• informazioni audience (profili utente, requisiti tecnologici);

• piano di user testing;

• dettagli e presupposti;

• riga per la firma del cliente (l’elemento più importante!).

> Impostazione del project plan



> Selezione e attivazione del team




PIANIFICAZIONEFASE 1: DEFINIRE IL PROCESSO

> Il Project Plan (> dettaglio, > tutela)

a tutela il team e il cliente;

a sottoscrivendolo il team dimostra di aver capito e approvato quello che il

team si appresta a fare;

a uno dei documenti ufficiali da consegnare;

a da inviare assieme al contratto e prima fattura;

a una volta avviato, qualsiasi modifica al project plan è un costo extra;

a definisce chiaramente obblighi e dettagli.

> Impostazione del project plan

PIANIFICAZIONE

> Esempio di voci da inserire

a il sito conterrà da 20 a 25 pagine;

a lo scheduling prevede il completamento del progetto in 11 settimane;

a i diritti per l’utilizzo di illustrazioni/fotografie, e le spese relative, sono

a carico del cliente e non rientrano nel budget.


a esperienza: preventivare durata e carico di lavoro per fasi e attività;

a crearsi cuscinetti e tutelarsi: tutto sarà più lungo e faticoso del previsto;

a in base al budget disponibile: tempo e risorse da dedicare per attività;

a inflazione progettuale *: lento slittamento (processo lineare -> incubo);

a tenere scrupolosamente traccia del monte ore impiegato.


PIANIFICAZIONE

> Quando fatturare

a 30 % approvazione del Project Plan;

a 30 % approvazione del Visual Design;

a 40 % consegna del prodotto definitivo.



PIANIFICAZIONE

> Regola #1: fatturare quello che si può

a esperienza del team;

a aspettative del cliente;

a disponibilità delle risorse;

a costi fissi;

a programmazione back-end;

a qualità della documentazione.


> Regola #2: è una questione di ore

FASI DI SVILUPPO breve termine

(tot. 150 ore)medio termine

(tot. 300 ore)

lungo termine

(tot. 800 ore)

project

manager

50 ore

Info

design

10 ore

design

40 ore

test di

usabilità

5 ore

produzione

grafica e

HTML

40 ore

CQ

5 ore

project

manager

100 ore

Info

design

30 ore

design

60 ore

test di

usabilità

20 ore

produzione

grafica e

HTML

60 ore

CQ

20 oreProgr/

javascr

10 ore

project

manager

200 ore

Info

design

100 ore

design

180 ore

test di

usabilità

60 ore

produzione

grafica e

HTML

100 ore

CQ

60 oreProgr/

javascr

40 ore

FASE 1 - Definizione progetto

definire obiettivi strategici,

budget e scheduling, profilo

utente, requisiti tecnologici.

Aree e strumenti di

collaborazione. Avvio progetto.

FASE 2 - Struttura sito

navigazione, page flow,

acquisire contenuti

FASE 3- Visual design e testing

impostazione concettuale,

stabilire strategie di branding.

Creare protosito, verificare

usabilità

FASE 4 - Produzione e CQ

ottimizzazione grafica, test

usabilità, controllo qualità,

debugging

FASE 5 – Lancio e manutenzione

caricamento e lancio del sito.

Manutenzione e marketing.

Chiudere il progetto.

> SCHEMA DEL MONTE ORE PER 3 PROGETTI DI DIMENSIONI DIFFERENTI

team member/role rate wk 1 wk 2 wk 3 wk 4 wk 5 wk 6 wk 7 wk 8 wk 9 wk 10 Total hrs Total $

project manager € 50 40 40 40 40 40 40 40 40 320 € 16.000

art direction € 50 12 12 40 40 40 20 20 20 204 € 10.200

information design € 50 12 40 40 20 112 € 5.600

art production € 35 2 20 20 40 40 40 40 202 € 7.070

66 92 140 120 120 100 100 100 0 0 [total] € 38.870[hours]

> SCHEMA DEL MONTE ORE RELATIVO AI RUOLI SUDDIVISO PER SETTIMANE



Membro del team ore stimate costo x ora giornate subtotale

project manager 200 € 50 25 € 10.000

art direction 20 € 50 2,5 € 1.000

designer 40 € 40 5 € 1.600

specialista usabilità 30 € 50 5 € 1.500

production designer 40 € 40 5 € 1.600

programmatore 10 € 60 1,25 € 600

copywriter 40 € 35 5 € 1.400

Controllo qualità 12 € 25 1,5 € 300 ricarico totale

€ 18.000 50% € 27.000

> STIMA PER RUOLI

Aggiungere da 10 a 50 % per cautelarsi contro costi addizionali, imprevisti.



Membro del team ore stimate costo x ora giornate subtotale

definizione progetto 40 € 50 5 € 2.000

information design 40 € 50 5 € 2.000

visual design 60 € 50 7,5 € 3.000

animazioni flash 20 € 50 2,5 € 1.000

produzione 80 € 40 10 € 3.200

programmazione 10 € 60 1,25 € 600

test usabilità 30 € 50 5 € 1.500

analisi competitiva 20 € 50 2,5 € 1.000

copywriting 60 € 50 7,5 € 3.000

testing/ controllo qualità 15 € 40 1,5 € 600 ricarico totale

€ 17.900 50% € 26.850

> STIMA PER ATTIVITA’

Aggiungere da 10 a 50 % per cautelarsi contro costi addizionali, imprevisti.



> Monitoraggio monte ore


> Tenere traccia delle ore di lavoro !!!

Verificare che il team documenti di settimana in settimana le ore

effettivamente spese e vengano confrontate con il budget preventivato

22/05/2005 Monte ore previste Monte ore utilizzate Monte ore rimanenti Commenti

Design 248 207,5 43,5

Produzione 325 18,5 306,5

Amministrazione 128 36,5 91,5

> Monitoraggio monte ore


> Essere diligenti e precisi

TimeSlicevalido strumento per il monitoraggio del tempo.

www.timeslice.us

ESERCITAZIONE_03

obiettivo: stimate il vostro impegno (ore previste,

utilizzate, rimanenti) per il corso di Principi di

Progettazione Editoriale Digitale (lezioni, formazione,

esercitazione, preparazione all’esame)

convenzioni: formato XLS, carattere Verdana 8

a i progetti hanno bisogno di una programmazione, le persone hanno

bisogno di una scadenza;

a impostare dapprima una panoramica generale, poi uno schema data per

data;

a lo scheduling deve trasmettere il senso di urgenza;

a il mancato rispetto delle deadline rischia un effetto domino del progetto;

a il cliente va “educato” orientandolo agli obiettivi.

> Tempistica e Scheduling

PIANIFICAZIONE

> Scheduling panoramico

> Scheduling dettagliato


> Scheduling panoramico

a schema descrittivo chiaro e circostanziato che includa metodologie,

scadenze e consegne;

a suddivisione del progetti o in settimane (o mesi), macro-fasi e relativi

passi metodologici con relative date di scadenza.

> Tempistica e Scheduling


> Scheduling dettagliato

a funge da agenda delle attività quotidiane;

a comprende le azioni (materiali da consegnare, traguardi da raggiungere);

a tranquillizza tutti i partecipanti

a essenziale per mantenere la rotta;

a va mantenuto aggiornato man mano che lo scheduling procede;

a deve essere accessibile a tutti on-line.

a comporre il team: assegnare ruoli e responsabilità (sia del team sia del

cliente);

a Cliente - unica decisione: le approvazioni multiple causano ritardi;

a Team – ogni individuo può ricoprire più di un ruolo: ragionare in termini

di ruoli

> Selezione e attivazione del team


> Ruoli del Team


Project Manager

> ruolo: gestisce un progetto Web dall’inizio alla fine. E’ il contatto

primario per il cliente e il fulcro della comunicazione per il team.

> responsabilità: determinare e definire i requisiti del sito. Concordare

con il cliente le tecnologie e i tempi adeguati per conseguire gli obiettivi,

tenendo conto dei vincoli di budget e tempistica. Controlla che il progetto

mantenga la rotta, risolve i problemi, comunica con tutti i membri del

team e con il cliente in ogni sua fase.

> in pratica: è il collante che tiene insieme tutto quanto.

> Ruoli del Team


Information Designer

> ruolo: traduce i contenuti e gli obiettivi di business in schemi funzionali

e visuali.

> responsabilità: sviluppa la mappa del sito e la struttura dei menu di

navigazione. Ruolo a volte condiviso con visual design o la produzione.

> in pratica: definisce la navigazione, le funzionalità e la user interaction.

> Ruoli del Team


Responsabile del controllo qualità

> ruolo: dà la caccia ai bug a partire dalla fine della produzione e, in

alcuni casi, conduce il testing dopo il lancio.

> responsabilità: pianificazione dei test, la verifica della compatibilità

con i browser, la correttezza dell’HTML e il funzionamento dei contenuti.

> Ruoli del Team


Responsabile usabilità

> ruolo: raccoglie le informazioni di prima mano sul modo in cui gli utenti

interagiscono effettivamente con il sito e analizzare cosa funziona e cosa

no.

> responsabilità: Lavora in stretta collaborazione con l’information

designer per quanto riguarda la struttura di navigazione e i percorsi

interattivi, quindi sottopone a test di usabilità il redesign nella fase di

sviluppo del protosito, durante il controllo qualità e al momento del

lancio.

> Ruoli del Team


Responsabile produzione, production designer

> ruolo: guida un team di HTML designer per gestire la produzione e il

testing del sito, tenendo sempre d’occhio lo scheduling. HTML e

nell’ottimizzazione della grafica, incluso l’utilizzo di tabelle, frame e

soluzioni cross-browser,ASP, Perl, Java, CGI.

> responsabilità: costruire il protosito e di implementare i layout HTML

definitivi, così come quella di integrare nel sito le specifiche relative a

design e grafica.

> Ruoli del Team


Copywriter, content manager

> ruolo: impone specifici requisiti di stile. E’ uno dei ruoli più importanti.

> responsabilità: Quando anche content manager gestisce tutti i contenuti

(cioè immagini, media e testi) e controlla che vengano consegnati alla

produzione secondo quanto stabilito nel piano di content delivery.

> Ruoli del Team


Art director, visual designer

> ruolo: crea soluzioni grafiche splendide ed efficaci lottando contro i

vincoli dettati dall’audience.

> responsabilità: Padronanza degli strumenti standard (Fireworks, Flash,

Dreamweaver, Photoshop, GoLive). Se il team comprende più visual

designer, li coordina nell’ideazione della vision creativa.

> Ruoli del Team


Responsabile programmazione, back-end engineer

> ruolo: funge da tramite tra back-end e front-end. Accurata analisi a

priori del progetto per determinare le esigenze di back-end.

> responsabilità: scripting elementare in JavaScript fino a forme di

programmazione più complessa (CGI, ASP, Java, ATG e Perl). A seconda dei

requisiti tecnici del progetto, possono essere necessari differenti livelli di

expertise tecnologica.



Strategie di user testing

> Questionari on-line: ottimali per domande a risposta chiusa (SI/NO); tasso di

risposta in genere basso (10-15%).

> Focus group: raccolta di opinioni tramite approfondite discussioni.

Motivazioni delle scelte effettuate.

> Test usabilità: processo one to one; compiti da svolgere (non lista step by

step).



Avvio del progetto

> Prepararsi alla riunione: radunare tutta la documentazione; stendere ODG;

> Introduzione al project plan: distribuite una lista contatti; descrivete

responsabilità e i ruoli (team e cliente);

> Obiettivi strategici: distribuire briefing creativo e discuterlo in dettaglio.

> Contenuti: chi li fornirà

> Tempistica e scheduling: discutere il calendario; “inflazione progettuale”

FASE 2

-

STRUTTURA DEL SITO

a definizione information design: “costruire sistemi coerenti e funzionali per la

navigazione, la grafica, il layout delle pagine, la titolazione, in modo tale che

l’utente sappia sempre dove andare, cosa fare e perché tornare a visitare il sito”.

a information architecture: modo in cui si organizzano e strutturano i contenuti

del sito.

a information design: organizzazione delle informazioni a livello di pagina.

CONTENUTO

> Contenuti

> Audit dei contenuti

esistenti

> Schematizzazione

> Pianificazione del

Content delivery

SITO

> Mappa del sito

> Organizzazione

esistente

> Denominazione e

convenzioni varie

PIANIFICAZIONE

> Gabbia della pagina

> Navigazione

> Titolazione ed

etichettatura

ARGOMENTI TRATTATI

FASE 2: STRUTTURA DEL SITO

a L’organizzazione è un processo che facciamo quotidianamente (suddivisione in

categorie, autori, gusti, tipologie (armadi, librerie, foto, file.

a L’information designer è come un architetto: propone al cliente lucidi, bozzetti,

decide numero, dimensioni, forma delle stanze (pagina sito), possibilità di ampliare e

aggiungere locali, passare da un locale all’altro (navigazione/link)

a L’architetto lavora a fianco degli ingegneri che lo informano su cosa è possibile

costruire. All’information design si affianca il visual design

a Pianificare accuratamente la struttura: risparmio di tempo e denaro.

a si occupa di user experience dal 1993;

a nel 1994 fonda la Smart Monkey Media

(www.smartmonkey.com);

a specializzata nell’area di convergenza tra Web e

Televisione;

Ani Phyo Note sull’information design


> Contenuti

CONTENUTOFASE 2: STRUTTURA DEL SITO

Contenuti

> Fattore critico

> Risorse dedicate

> Copywriter consigliabile del cliente

> Aggregare tra loro gli argomenti (mele con mele, …)

> Organizzazione (lavoro di logica e categorizzazione)



Audit dei contenuti

> Definizione: analisi di ogni porzione di contenuti (test, immagini, altri

media)

> Rischio di un riciclaggio indifferenziato dei contenuti

> Rimuovere i contenuti superflui, minimizzare i contenuti irrilevanti,

massimizzare quelli che meglio rispondono agli obiettivi di business

> Una volta revisionati i contenuti saranno piu’ facili da organizzare. Piu’

facile raggrupparli, schematizzarli e suddividerli per aree

> La raccolta dei contenuti va a supporto del content audit

> Pianificazione del content delivery


Pianificazione del content delivery

> Attenzione allo slittamento dei progetti (per il 99% dei casi)

> Scheduling delle consegne

> Contenuti primari (testi, immagini, media)

> Contenuti secondari (messaggi di errore, form, componenti di ricerca)

> Contenuti legati alla produzione (meta, alt, title)

> Ogni settimana il piano dovrebbe essere aggiornato e redistribuito dal

content manager

Testi pronti per il web: formato digitale (RTF o HTML) con link

www.mestierediscrivere.com

> Mappa del sito

SITOFASE 2: STRUTTURA DEL SITO

Mappa del sito

> Spesso non viene realizzata

> Ossatura su cui impiantare il progetto

> Rappresentazione visuale: struttura, organizzazione, flusso di navigazione,

aggregazione di contenuti e informazioni

> Aggiornata man mano che si modifica la struttura del sito

Buon programma di Site Mapping

> Microsoft Visio (www.microsoft.com/office/visio)


> Esempio di schizzo fornito dal cliente


> Esempio di mappa a sviluppo verticale

> Esempio di mappa a sviluppo orizzontale


> Denominazioni e convenzioni varie


> Gabbia della pagina

PAGINAFASE 2: STRUTTURA DEL SITO

Gabbia della pagina

> Equivalente degli storyboard

> Rappresenta l’allocazione degli spazi nelle pagine principali: posizione,

dimensioni, testi, immagini, titoli dei menu di navigazione

> Preparare tutte le gabbie del I e II livello

> Semplice gabbia (contenuti)



> Semplice gabbia (pixel)


> Gabbia in dettaglio

> Checklist per le gabbie


Checklist per le gabbie

immagini/figure/illustrazioni;

contenuti/testi (generici o effettivi, se disponibili);

intestazione e/o navigazione globale (barra di navigazione ed elementi

globali che ricorrono in ogni pagina);

funzionalità (descrizione degli elementi funzionali/interattivi di base);

link primari (percorsi di navigazione);

link secondari;

media (se previsti);

dimensioni standard della finestra (pixel).

> 4 modelli di navigazione


Navigazione diretta: la scelta dell’utente è indirizzata da opzioni preimpostate.

Questo modello di navigazione viene adottato per segmentare l’audience verso

contenuti distinti e specifici in base al tipo di utente/cliente.


Ricerca libera: modello di navigazione tipico dei motori di ricerca, ma anche dei

siti a elevata densità di informazioni, per consentire agli utenti l’accesso diretto

ai contenuti desiderati.



Navigazione per categorie: le informazioni vengono proposte all’utente

suddivise in categorie/canali, adottando per lo più la metafora di cartelle e

relative etichette/linguette, tipica dei sistemi operativi per computer.




Navigazione lineare: il percorso dell’utente viene forzato in un tunnel

predefinito. Modello che può essere adottato in sezioni specifiche, come un

portfolio, un catalogo o uno slide-show, con i classici pulsanti Avanti/Indietro.

ESERCITAZIONE_04

obiettivo: individuare nei siti che di solito consultate i

4 modelli di navigazione illustrati, mettendo a fianco

l’immagine del sito e la vostra gabbia della pagina,

cosi’ come gli esempi precedenti.

convenzioni: formato .RTF, carattere Verdana 8, una

pagina dedicata a modello

> Percorsi di interazione


Percorsi di interazione

> Flusso logico di navigazione

> Schematizzazione su carta di task interattivi dall’inizio alla fine

Esempi:

• ordinare una consegna di fiori per la festa della mamma;

• effettuare una transazione finanziaria on-line, come una compravendita di azioni;

• cercare e ordinare una batteria di ricambio per il vostro telefono cellulare;

• comprare una cuccia per il vostro cane; …

> Percorsi non funzionali: non dipendono da requisiti tecnologici (es. contatto azienda)

> Percorsi funzionali: coinvolgono specifiche tecnologiche (es. carrello spesa / login)

> Scenari utenti


1/6

Dalla homepage Paige McCornick inizia il suo percorso di acquisto.

Entra nella sezione dedicata ai cani, cliccando sull’icona dell’allegro cagnone che appare

sotto l’intestazione Go Shopping.

> Scenari utenti


2/6

Una volta entrata nell’area Dog Shopping, utilizza il menu ad albero sulla sinistra per

raggiungere la categoria Cuddler Beds (cucce e accessori).

> Scenari utenti


3/6

Dopo aver esaminato quattro o cinque cuscini, clicca sul pulsante Product Options relativo

al modello Bed Buddies Lounger in versione blu.

> Scenari utenti


4/6

Paige osserva che quel modello è antigraffio e lavabile in lavatrice, e ha una simpatica

fodera che sicuramente piacerà a Ruthie. Paige decide pertanto di comprare il prodotto e di

aggiungere al carrello.

> Scenari utenti


5/6

Dalla homepage Paige McCornick inizia il suo percorso di acquisto.

Appare a Paige la richiesta di effettuare il login o di registrarsi come nuovo cliente. In

quanto utente abituale, Paige effettua immediatamente il login tramite il suo indirizzo e-

mail e la sua password.

> Scenari utenti


6/6

Paige controlla il contenuto del carrello degli acquisti, verifica il totale e le modalità di

consegna, il suo numero di carta di credito (già memorizzato). Paige conferma il suo

acquisto e porta così a termine la procedura di acquisto.

ESERCITAZIONE_05

obiettivo: illustrare lo scenario che esponga

dettagliatamente un task tipico da un sito a scelta.

convenzioni: formato .RTF, carattere Verdana 8

FASE 2: STRUTTURA DEL SITO

FASE 3

-

VISUAL DESIGN E TESTING

a ogni passaggio va scrupolosamente testato;

a precedere step by step;

a visual design e sviluppo del protosito sono processi separati e paralleli

CREAZIONE

> Avvio del processo

creativo

> Smart Designer

> Obiettivi

> Concept visuale

> Progettazione centrata

sull’utente

> Presentazioni e

Feedback

CONVALIDA

> Verifica funzionale

> Proposito HTML

> Test di funzionamento

APPLICAZIONE

> Template grafici

> Guida di stile per il

design

ARGOMENTI TRATTATI

FASE 3: VISUAL DESIGN E TESTING

> Avvio del processo creativo

CREAZIONE

Avvio del processo creativo

> Prima di soddisfare la golosità del cliente il team di design deve impegnarsi

in un serio brainstorming sia per i processi creativi che quelli tecnici


> Smart Design

CREAZIONE

Smart Design

> Design fluido che funziona;

> Al servizio dell’utente, del suo contesto e delle sue abilità;

> Privilegia la funzionalità e la rapidità di caricamento;

> Focalizzato sulla user experience, non sulle ambizioni dei designer.


> Obiettivi

CREAZIONE

Obiettivi

> Utilizzare il briefing creativo come molla della creatività;

> Quale è lo stile della comunicazione?

> Quale è l’audience di riferimento?


> Concept visuale

CREAZIONE

Concept visuale

> Partire dai colori e dagli

abbinamenti cromatici;

> Effettuare prove su carta e

sullo schermo senza preoccuparsi

dei contenuti.


Tavolozza preliminare

> Concept visuale

CREAZIONEFASE 3: VISUAL DESIGN E TESTING

Schizzi iniziali su carta

Bozzetti digitali

Concept visuale

scopo: iniziare a elaborare il

concept visuale sperimentando

differenti layout e combinazioni

cromatiche.

> Presentazioni e feedback

CREAZIONE

Presentazioni e feedback

> Non porre al cliente troppe alternative in una fase precoce;

> Presentare 3 design alternative (non di +);

> Educare il cliente: nessuna pignoleria in questa fase


> Presentazioni e feedback


Attenzione alle dimensioni e risoluzioni video

Layout liquido della pagina

> Redesign sito New Riders


Parole chiave: eleganza, lustro, raffinatezza



1/3 - Stile amichevole e dinamico



2/3 - Stile elegante



3/3 - Stile corporate

> Considerazioni su Macromedia Flash

CREAZIONE

Considerazioni su Macromedia Flash

> Strumento favoloso, ma da usare solo se ve ne e’ realmente un motivo;

> Plug-in: non piu’ un problema - molto vicino al 100%;

> Ampiezza di banda (alternativa per “banda stretta” – HTML/FLASH)

> Mancata compatibilità con gli screen reader vocali per disabili

> Difficoltà di manutenzione e aggiornamento

> Scarsa accessibilità dei motori di ricerca


Nosepilot.com: esempio affascinante di uno studio di animazione flash

a Fate elencare ai membri del team i primi cinque elementi che vorrebbero trovare in

un sito dello stesso genere.

a Mantenere un atteggiamento orientato al problem solving

a Conoscere gli obiettivi del sito, di poter misurare questi obiettivi (ad esempio

mediante i click-through o altri indicatori) e di sapersi immedesimare nella prospettiva

dell’utente.

a Mantenersi focalizzati sul target

a cofondatrice di Lynda.com;

a specializzata in formazione della creatività in Web Design;

a autrice di numerosi libri e corsi su CD-Rom;

Lynda Weinman Il Designer è un problem solver


> Protosito HTML

CONVALIDA

Protosito HTML

> Estensione delle gabbie per confermare il flusso di navigazione in rapporto

ai contenuti

> Di solito non include funzionalità complesse (solo script elementari);

> Interfaccia ridotta all’osso;

> Deve comprendere almeno le pagine di I e II livello;

> Uno dei principali punti di forza è che evidenzia eventuali problemi

relativi ai contenuti, al flusso delle informazioni o al modello di navigazione;

> Serve per verificare gli assunti della progettazione.


> Protosito HTML

CONVALIDA

Elementi di scenari da tener presente nei test del protosito

• set di frame complessi (sconsigliabili, a meno che siano assolutamente

necessari);

• effetti DHTML o JavaScript (come menu dinamici e rollover);

• finestre pop-up (soprattutto se con specifiche dimensioni/posizione);

• fogli-stile o altre caratteristiche peculiarmente legate al browser;

• menu/elenchi a discesa (soprattutto quelli che caricano le pagine

automaticamente);

• carrelli degli acquisti;

• qualunque elemento che richieda script o procedure lato server.




Protosito per New Riders

> Creazione template grafici

APPLICAZIONE

Creazione template grafici

> Distinguere il look and feel dai template veri e propri;

> Pagine tipo le cui caratteristiche possono essere applicate autonomamente

ad altre pagine simili;

> Impostare un elenco di template utilizzando un foglio elettronico di Excel,

in modo da averli sempre tutti sott’occhio;

> Non dimenticarsi le pagine con i messaggi d’errore;

> Annotare tutti gli standard in una guida di stile per il design;

> I template devono essere trasmessi alla produzione sotto forma di file

Fireworks o Photoshop, con i layer separati (non rasterizzati).




Layout per homepage e di secondo livello

Ogni template include layer

distinti ed etichettati, in cui

sono specificati commenti,

rollover e funzionalità.

Includere un layer di riepilogo in

cui collocare una versione

d’insieme della pagina

(rasterizzata).


APPLICAZIONE

Creazione template grafici

> Ogni template deve contenere tutte e informazioni di cui i prouction

designer avranno bisogno;

> Consegnare anche una versione stampata utile per annotazioni;

> Uno degli aspetti critici è costituito dai font (consegnare anche .TTF per

PC e MAC).



APPLICAZIONEFASE 3: VISUAL DESIGN E TESTING

Contenuti e indicazioni da inserire nei template

> Testi renderizzati e vettoriali, possibilmente in due file separati;

> Layer separati per future revisioni;

> Layer chiaramente etichettati (“layer 7” non significa nulla; “Barra di

navigazione” il suo contenuto è intuitivamente ovvio);

> Ogni stato on/off/over su un layer a sé stante (chiaramente identificato);

> Segnaposto per animazioni/Flash (si possono usare immagini fisse, single-

frame);

> Evidenziazione dei punti in cui integrare tecnologie speciali e funzionalità

complesse;

> Allegato: un file GIF o in altro formato (preparato con Photoshop o

Fireworks), che mostri l’aspetto complessivo della pagina una volta ricostruita

in HTML, riferimento cruciale di ogni template.

> Creazione guida di stile per il redesign


Creazione guida di stile per il redesign

> Priorità fondamentale: essere coerenti;

> Definire colori, font, header, footer, dimensioni HTML del testo;

> Risorsa chiave per la manutenzione e l’aggiornamento post-lancio,

estremamente utile già nella fase di produzione;

> Generalmente composta da due parti: una realizzata dal team di di design,

l’altra da quello di produzione;

> Spesso i clienti si incaricano di effettuare gli aggiornamenti;

> E’ necessario che gli standard siano approvati e condivisi da tutto il team di

design.

> Creazione guida di stile per il redesign


Palette

Navigation

Contest area type

Photo treatement

…

FASE 4

-

PRODUZIONE E


a mantenere il progetto nella rotta prevista;

a ottimizzare gli sforzi, evitare qualsiasi ridondanza;

a indipendentemente dal budget.

REVISIONE

> Stato di avanzamento

del progetto

> Linee-guida

> Struttura di file e

cartelle

COSTRUZIONE

> Ottimizzazione della

grafica

> Creazione template e

pagine HTML

> Script

> Riempimento delle

pagine

> Sviluppo back-end (se

previsto)

TESTING

> Importanza del

controllo qualità

> Pianificazione del

testing

> Priorità ed esecuzione

del debugging

> Controllo finale

ARGOMENTI TRATTATI

FASE 4: PRODUZIONE E CONTROLLO QUALITA’


REVISIONEFASE 4: PRODUZIONE E CONTROLLO QUALITA’

Linee guida e specifiche

> Modello di questionario per le specifiche relative ad audience e tecnologie;

> Il questionario Client Spec Sheet si fonda su cinque parti:

1. Target

2. Funzionalità

3. Design e layout

4. Struttura di file e directory

5. Server e hosting

> Considerazioni sull’accessibilità


Considerazioni sull’accessibilità

Si può sottoporre a testing una singola pagina, un intero sito, specifiche

sezioni o cartelle di file;

Molti strumenti gratuiti possono essere d’aiuto per verificare

l’accessibilità di un sito (es. BOBBY e SECTION 508 ACCESSABILITY

SUITE).



I punti di domanda

identificano le aree che non

corrispondono ai parametri

relativi all’accessibilità

www.cast.org/bobby



www.usablenet.com

> Struttura file e cartelle


Struttura file e cartelle

> Tenere in ordine i file e le cartelle del sito;

> Prevedere il grado di crescita del sito.

> Struttura file e cartelle


Diversa collocazione delle immagini nel sito: collocate nella cartella della

radice in un caso e suddivise in apposite sottocartelle nell’altro.


COSTRUZIONEFASE 4: PRODUZIONE E CONTROLLO QUALITA’

I template grafici

vengono ritagliati e

separati in sezioni

> Un po’ di definizioni


Un po’ di definizioni

> Template grafico. Un file grafico (realizzato in PhotoShop o Fireworks),

suddiviso in layer, contenente testo editabile (non renderizzato). In

questo file il visual designer indica chiaramente tutte le informazioni

necessarie per produrre il corrispettivo modello HTML. Il template grafico

viene sezionato, ottimizzato e codificato, ossia tradotto in un template

HTML.

> Template HTML. Una pagina HTML che funge da modello o master, priva di

contenuti specifici. Il template HTML viene creato dal production designer

sulla base del template grafico fornito dal visual designer. A partire dal

template vengono create e salvate le singole pagine, ricorrendo al

comando Salva con nome (Save as).

> Un po’ di definizioni


Un po’ di definizioni

> Ottimizzare. Salvare un’immagine nel formato o con il tipo/grado di

compressione che consente di minimizzare le dimensioni del file senza

comprometterne la qualità visuale. Normalmente si opta per i formati GIF

e JPEG. In senso lato, ottimizzare significa anche preparare un qualunque

file per la pubblicazione sul Web, ossia renderlo “web-ready”.

> Sezionare, ritagliare (to slice). Suddividere un template grafico (o una sua

porzione) in due o più singole immagini, salvate separatamente. Come

sostantivo, il termine “slice” indica anche una fetta o porzione di

template salvata come file a sé stante.

> Assemblare (to splice). È l’operazione inversa alla precedente. Consiste nel

ricomporre in HTML (ad esempio mediante tabelle) due o più immagini

che, accostate, ricreano l’apparenza originaria del template grafico.

> Implementazione degli script


Implementazione degli script

> Rollover, form, menu a tendina, finestre pop-up, frame, …

> Javascript, DHTML, CSS

> Attenzione alla compatibilità con i browser

> Link di riferimento

1. www.javascript.com

2. www.builder.com

3. www.scriptworld.com

a “Write once, publish everywhere”: scrivere una volta, pubblicare dappertutto,

ecco l’obiettivo ideale.

a Separazione dello stile dal contenuto.

a Il design sta da una parte (ad esempio in un foglio stile CSS) e il contenuto da

un’altra (ad esempio nei documenti HTML o in un database di record testuali formattati

in XML).

a Portabilità e accessibilità: se design separato dai dati, l’accesso ai contenuti sarà

facilitato per una base di utenti molto più ampia (telefoni cellulari, computer palmari,

browser non grafici, software speciali per disabili, …).

a Ottimizzazione del lavoro dei designer, che si dedicheranno alla qualità dei

contenuti, del design, delle funzionalità interattive.

Jeffrey Zeldman Gli standard web


- www.zeldman.com -

- www.alistapart.com -

- www.webstandards.org -

a direttore creativo di A List Apart, settimanale on-line;

a co-fondatore e attuale dirigente del consorzio The Web

Standards Project;



Riempimento delle pagine

> Content Manager: responsabile (check list di riferimento)

> Inserimento contenuti testuali e media

> Attenzione ai contenuti invisibili (ALT, META, TITLE)



Finestra Meta Generator di Dreamweaver per

l’inserimento dei tag META (contenuti invisibili)



I tag ALT e TITLE aiutano a definire

ancora più chiaramente il senso dei

link, permettendo all’utente di

orientarsi in modo assai intuitivo.

> Controllo qualità (QA)

TESTINGFASE 4: PRODUZIONE E CONTROLLO QUALITA’

Importanza del controllo qualità

> Il QA (Quality Assurance) è uno degli step piu’ trascurati nei processi web

> Raccomandazione: allocare al QA un budget equivalente al 10% delle

risorse globali del progetto

> Rintracciare e correggere gli errori più comuni (sviste, refusi, link orfani

o sbagliati, …)

> Effettuare un’altra sessione immediatamente dopo il lancio

> Il margine di manovra per svolgere il QA dipende da tre fattori:

(1) quanto manca alla data del lancio: pianificazione scheduling

(2) la soglia di tolleranza: livello di perfezione atteso;

(3) la flessibilità della data di lancio stessa.

> Controllo qualità (QA)


Uno dei più classici tra

i bug: il mancato

caricamento delle

immagini.

Un bug ben peggiore è

l’errato funzionamento

dei menu DHTML che

può mandare in crash

certi browser.

> Pianificazione del QA


Pianificazione del controllo qualità

> Il QA può essere su 3 livelli: leggero/informale, semi-formale, formale:

scegliere il piu’ adeguato allo scopo.

> Il controllo qualità deve comprendere almeno 2 cicli di testing: uno per

individuare gli errori e i bug e l’altro, dopo gli interventi correttivi,

per la verifica finale.

> Ogni sito deve essere testato rispetto ai requisiti di partenza e su

differenti browser, piattaforme, sistemi operativi: controllare il

funzionamento di ogni componente.



Semplice schema per aiutare a pianificare il controllo qualità, in base

alle caratteristiche dell’audience di riferimento. In questo esempio il

controllo esclude le versioni 3.0 dei browser e le piattaforme Unix.



Testing informale

Ogni membro del team esplora la sua sezione del sito e compila una lista dei bug che i

production designer dovranno correggere.

Il modo più semplice è stampare ogni pagina che contiene errori ed evidenziare questi

ultimi annotandoli sulla stampata con anche il tipo di piattaforma e di browser

utilizzati dal tester.

Il project manager tiene traccia del processo semplicemente raccogliendo tutte le

pagine stampate con i bug in evidenza: su ogni bug corretto traccia, ad esempio,

una croce colorata; su ogni bug la cui correzione è rimandata, annota la data

prevista per l’intervento correttivo, e così via.

> Per progetti con budget fino a 20-30.000 euro <

> Budget QA: 1%-3% del costo del progetto <

> Complessità tecnica: minima <



Testing semi-formale

Se il progetto richiede un testing più accurato, ma il budget non consente un testing

formale vero e proprio con un’agenzia esterna.

Rispetto all’approccio informale, servono più tempo, esperienza e pianificazione, nonché

(se possibile) un responsabile QA ben addestrato e un setting appropriato (un’area-

laboratorio con piattaforme e connessioni assortite).

Il piano di QA semi-formale dovrebbe includere un paio di pagine di introduzione in cui

puntualizzare la portata, la tempistica e gli obiettivi del processo di testing.

> Per progetti con budget fino a 30-70.000 euro <

> Budget QA: 5% del costo del progetto <

> Complessità tecnica: moderata <



Testing formale

Sono richiesti esperienza, tempo, budget e, soprattutto, attenzione per i più minuscoli

dettagli. Livello elevato di pianificazione dei test, nei costi, nella documentazione

da generare e nel grado di competenza specialistica. Sistema esaustivo di bug-

tracking e uno staff QA di professionisti ben addestrati. Piani accurati, strumenti,

casi e scenari, report dettagliati

Esempio: identificare almeno 10 percorsi di interazione (scenari utente) e testare

ciascuno di essi su tre piattaforme (Mac, Windows e Unix), con tre browser per ogni

piattaforma (Internet Explorer, Netscape, AOL), utilizzando tre differenti versioni

di ogni browser (dalla 3.0 alla 6.0 – considerando che Netscape ha saltato la 5.0).

Tutto ciò rientra nel testing. Facendo i conti: significa effettuare 450 test (10 x 3 x

3 x 5) per controllare quei dieci percorsi di interazione.

> Per progetti con budget oltre i 70.000 euro <

> Budget QA: 10-20% del costo del progetto <

> Complessità tecnica: da moderata a elevata <

> Priorità ed esecuzione del debugging


Priorità ed esecuzione del debugging

> Elencare gli interventi in 4 o + colonne:

1) Immediati;

2) ad alta priorità;

3) a media priorità;

4) a bassa priorità;

5) …

> Dopo aver fatto il debugging ricontrollare le correzioni apportate.

> Bug reporting


Bug reporting

> Per stilare un buon report sui bug è necessario documentarli in modo

significativo, riproducibile, dettagliato e orientato alla soluzione.

> Registrare le seguenti informazioni:

• tipo di browser e piattaforma;

• sistema operativo;

• descrizione del problema (una riga);

• descrizione dettagliata;

• URL della pagina;

• gravità del problema;

• riproducibilità dell’errore (sì/no/commenti).

> Strumenti di bug tracking


Strumenti di bug tracking

> Vi sono programmi di verifica codice, di varie fasce di prezzo

e potenza.

> Altri strumenti permettono di controllare specifici aspetti, come i tag

META (es. www.scrubtheweb.com),

> Ripulire codice HTML delle pagine (es.www.w3.org/People/Raggett/tidy).

> Software bug-tracking (es. www.alumni.caltech.edu/~dank/gnats.html)

> Per saperne di più sui bug: www.mozilla.org/bugs

> Controllo finale


Controllo finale

> 5 categorie di aspetti-chiave da verificare coinvolgendo tutti i team (Mac

+ PC, come sempre).

• Design: cogliere dettagli: disallineamenti e difetti grafici , microscopici

errori nel trattamento dei testi e delle immagini fotografiche

• HTML: Tabelle, celle, elementi grafici allineati correttamente. Verificare

le funzionalità: integrazione con database, correttezza transazioni.

• Contenuti: Titoli, testi, formattazioni devono apparire nel modo dovuto.

• Approvazione del cliente: Far approvare al cliente prima del lancio.

FASE 4: PRODUZIONE E CONTROLLO QUALITA’

FASE 5

-

DAL LANCIO IN POI

CONSEGNA

> Consegna definitiva e

posa in opera

> Completamento della

guida di stile

> Documentazione


> Programma di training

per la manutenzione

LANCIO

> Pubblicazione online

> Piano di comunicazione

> Registrazione nei

motori di ricerca

> Lancio ufficiale

MANUTENZIONE

> Manutenzione e

aggiornamento

> Assessment del team di

manutenzione

> Team interni ed esterni

> Piano di gestione

> Misurazione del

successo


ARGOMENTI TRATTATI

FASE 5: DAL LANCIO IN POI

> Consegna e posa in opera

CONSEGNA

Consegna definitiva e posa in opera

> Stabilire con il cliente il punto di transizione fra il prodotto in fase di

sviluppo e in fase di gestione

> Consegnare il pacchetto di materiali


> Completamento guida di stile

CONSEGNA

Completamento della guida di stile per la produzione

> Aggiunta di informazioni al manuale di stile riguardanti la produzione e

necessarie per gestire il prodotto.

> Si raccomanda che sia visuale e ricca di informazioni.

> Essere chiari, concisi, disponibili nel caso in cui il team di gestione dovesse

avere delle domande (per un periodo da stabilirsi).

> L’assistenza tecnica dopo il rilascio, passato un certo periodo X, sarà

fatturabile. Non importa se questo periodo sarà di 30, 45 60 o 90 giorni,

l’importante è stabilirne prima la durata. Mettere tutto ciò per iscritto e

farlo firmare al cliente



CONSEGNAFASE 5: DAL LANCIO IN POI



Una parte della guida di stile

del sito Newriders.com.



Per una mappa di frame identificare i rapporti tra i link e i frame

> Documentazione

CONSEGNA

Documentazione

> Il pacchetto è la collezione di tutti i materiali e la documentazione del

progetto. Contiene tutti i file sorgente, le immagini, i template e le

specifiche necessarie affinché un altro team, o una singola persona, possa

capire il funzionamento del sito dopo il lancio iniziale.

> I materiali varieranno da progetto a progetto, ma un pacchetto completo (che

dovrebbe essere masterizzato in un CD-ROM) dovrebbe contenere almeno ciò

che segue:

• tutti i file di Photoshop o Fireworks (con i layer e il testo non renderizzato);

• i font (o informazioni su dove acquistarli);

• tutte le illustrazioni e le foto (comprese le informazioni sul copyright, non

dimenticate i diritti d’autore);

• le pagine HTML e i template;

• il manuale di stile (design e produzione) in formato HTML;

• specifiche tecniche;

• la cartella radice del sito e altri file rilevanti.


> Gestione della documentazione

CONSEGNA

Gestione della documentazione

> Raccogliere, stampare e archiviare ogni e-mail e comunicazione rilevante che

dimostri l’approvazione del cliente, modifiche degli obiettivi, contratti.

> Archiviare tutto ciò che è rilevante, con qualunque metodo la società utilizzi

per gestire l’archiviazione: cartelle, CD-ROM, rilegatore.


> Gestione della documentazione

CONSEGNA

Documenti da archiviare

• Approvazioni dei budget: budget iniziale e resoconti settimanali (firmati e

datati, quando è possibile)

• Fatturazioni aggiuntive (firmate per approvazione!)

• E-mail (specialmente quelle contenenti modifiche o richieste approvate dal

cliente)

• La proposta originale

• Descrizione globale del progetto, o project plan

• Tutti i documenti presentati al cliente: report o studi generati durante il

progetto, compreso il briefing creativo, l’analisi competitiva (se è stata

effettuata), i report dei test di utilizzo e così via

• Stampe, registrazioni e schizzi dalle fasi di design e visual design

• Una copia stampata della guida di stile


> Meeting retrospettiv

CONSEGNA

Meeting retrospettivo

> Ricapitolazione totale dell’andamento del progetto: a questa riunione

dovrebbero partecipare tutti i membri principali. Se è costituito un team

esterno, questa riunione è generalmente condotta in assenza del cliente. Se

si è in un team interno, in genere il cliente è parte del team.

> Ampia panoramica del progetto dall’inizio alla fine: scoperte innovative,

problemi, difficoltà di comunicazione, momenti in cui la metodologia poteva

essere migliorata.

> Mantenere un atteggiamento positivo, evitate il biasimo e le accuse. Non

trasformare la riunione in un processo (bisogna ancora lavorare con queste

persone); identificare i momenti della produzione dove il flusso ha subito

interruzioni.

a Che cosa ha causato i rallentamenti?

a Che cosa invece è andato liscio?

a Come può questo modo di lavorare essere ripetuto in futuro?


> Pianificazione training per il team di manutenzione

CONSEGNA

Pianificazione del training per il team di manutenzione

> La maggior parte dei siti ha una spiacevole tendenza, durante la gestione: il

layout, la grafica e l’information design lentamente di disgregano e perdono

coesione.

> Il team di gestione inizia a imporre il proprio senso del design e

dell’organizzazione, soprattutto quando aggiunge nuovi contenuti. Evitate

questa possibilità.

> Stabilire degli standard gestibili.

> Comunicare in modo chiaro, spiegando il manuale di stile, gli standard grafici e

di HTML, e gli obiettivi tecnici del sito.


> Pubblicazione on-line

LANCIO

Pubblicazione on-line

> Predisporre la strategia di comunicazione molto tempo prima della data di

lancio.

> Il team di sviluppo esterno sarà coinvolto? Gestirà tutto il team interno? E’ stata

coinvolta anche un’agenzia di pubblicità? Quali sono i tempi?

> Un lancio morbido (soft launch) è lo spostamento del sito sul server definitivo

senza pressioni esterne.

> Un lancio “duro”: esiste una data invalicabile, accompagnata di solito da

limitazioni temporali esterne.

> Pianificare sempre un soft launch. Far chiaramente percepire al cliente i rischi:

alcuni problemi associati al server definitivo (compresi i problemi di firewall),

non potranno essere scoperti prima che il sito vada online.


> Pubblicazione on-line

LANCIO

Abitudini degli utenti attuali

Buona norma creare una pagina che presenta il redesign e identifichi chiaramente le nuove

funzionalità e la nuova navigazione. Creare un link diretto dalla home page. Rendere

gli utenti partecipi del redesign appena lanciato.

• Nuovo progetto. Dire alla propria audience che si è effettuato un redesign del sito. Fare

sapere che ciò aiuterà a fornire loro un servizio migliore.

• Nuove funzionalità. Elencare le nuove funzionalità. Si sono aggiunti nuovi media? Ci sono

più elementi nelle FAQ? Se si sta lanciando il sito in diversi spezzoni, elencate le cose

che metterete on-line in seguito.

• Nuova navigazione. Dire ai vostri utenti ciò che avete fatto. Ecco un esempio: “Abbiamo

ristrutturato il nostro sito e lo abbiamo fornito di più link diretti da pagina a pagina,

per renderlo più che mai facile da navigare e per rendervi più facile trovare le

informazioni che cercate abitualmente. Abbiamo suddiviso le pagine eccessivamente

lunghe, che richiedevano molto scrolling, e abbiamo creato un nuovo tipo di

navigazione che vi permette sempre di sapere in quale parte del sito vi trovate.”

• Feedback. Rendere facile agli utenti fornirvi le loro impressioni. Provate un testo come

questo: “Vi piace il nuovo sito? Avete suggerimenti? Avete trovato link che non

funzionano o altri errori? Scriveteci, saremo lieti di leggervi.”



LANCIO

Piano di comunicazione

A seconda dell’audience, il sito riprogettato può essere annunciato sia on-line sia off-line.

Utilizzare i metodi esistenti e i materiali disponibili (depliant, biglietti da visita, altri

materiali stampati, pubblicità) ed esplorare anche nuove possibilità.


Tempismo pubblicitario - Non prenotate pubblicità a pagamento fino ad almeno due

settimane dopo la data prevista per il lancio. Le cose potrebbero andare male.


LANCIOFASE 5: DAL LANCIO IN POI



Per mesi, prima di lanciare il nuovo sito, smug.com mostra questa umoristica splash page.

Le opzioni offerte erano: entrare nel sito esistente o inviare una e-mail per essere avvertiti

del lancio del nuovo sito.



Permettete agli utenti di familiarizzare con i cambiamenti (ricordate che la gente di solito

non ama i cambiamenti, anche se sono verso il meglio). Prima di lanciare il nuovo sito, verso

la fine del 2000, Janus Fund (www.janus.com) ha mantenuto una finestra pop-up che

offriva la possibilità di vedere in anteprima il nuovo sito.



Artist Booking International (www.artistbooking.com) ha optato per un soft launch, che gli

ha permesso di effettuare la QA sul server definitivo prima di darsi in pasto agli utenti.

Questa pagina annunciava che il redesign sta per essere caricato proprio in quel momento.

> Registrazione sui motori di ricerca


Registrazione sui motori di ricerca

Newsletter NetMechanic.com: l’85% degli utenti di Internet utilizza i motori di

ricerca per trovare i siti.

Studio www.workz.com: i migliori risultati vengono dalla registrazione manuale ai

principali motori di ricerca, con circa un’ora di tempo alla settimana allocata per

modificare e migliorare le keyword.



Approcci

1. Effettuare la registrazione direttamente su singoli motori di ricerca. Richiede

tempo.Uno dei modi più efficienti per registrarsi, monitorare, affinare le keyword,

i tag TITLE e altri elementi necessari a ottenere risultati migliori.

2. Registrarsi utilizzando una società specializzata, a pagamento. Ci sono servizi

(alcuni buoni, altri meno, altri ancora sono perdite di tempo). Submitit.com

chiede un minimo di 59 dollari per due URL. Registerit. com è un servizio gratuito

che effettua la registrazione fino a un massimo di 12 motori di ricerca. Risparmio

di tempo, opinioni divergenti.

3. Utilizzare dei software per la registrazione e il controllo. Esistono dei

software che aiutano a controllare le pagine HTML e ad effettuare

automaticamente registrazioni ai motori di ricerca, nella speranza di mantenere il

vostro sito fra i primi 10. Web position Gold (www.webposition.com) è un buono

strumento, relativamente economico.

> Impostazione dei tag META




Ci sono molte risorse sul Web per conoscere meglio i motori di ricerca e

avere un aiuto nella registrazione.

> www.searchenginewatch.com

> www.selfpromotion.com

> www.workz.com

> www.motoridiricerca.it

a Che cosa sarebbe il Web senza link? banner pubblicitari, link testuali, bottoni,

icone, elenchi delle directory, i risultati dei motori di ricerca... nient’altro che link;

a Cercare di far sì che tutte le pagine del sito siano raggiungibili dalla home page in

tre clic al massimo. La maggior parte dei motori di ricerca esplora soltanto tre livelli

quando indicizza un sito.

a Assicurarsi che ogni pagina del vostro sito abbia i tag TITLE e META “description” e

“keyword”, e usare gli ALT in tutte le vostre immagini.

• Se il sito utilizza i frame, assicurarsi di usare il tag NOFRAMES. Se non lo fate, le vostre

pagine non saranno indicizzate.

Search Engine Watch (www.searchenginewatch.com) è dedicato interamente a questi

argomenti.

Eric Ward Un sito degno di essere linkato


Si occupato del lancio del primo sito di Amazon

Microsoft, Kellogs

a segnalato dalla rivista Websight come uno delle 100

persone piu’ influenti del web.

> Manutenzione e aggiornamento

MANUTENZIONEFASE 5: DAL LANCIO IN POI

Manutenzione e aggiornamento

La gestione di un sito è il carburante che lo tiene in vita.

In un recente studio della Forrester Research, sono stati intervistati 8.600

utenti domestici per scoprire i motivi per cui le persone tornano a visitare un

sito

È opportuno considerare un piano di gestione che va da 12 a 24 mesi.

> Assessment del team di manutenzione


Assessment del team di manutenzione

Chi si occuperà della gestione del sito?

Le persone responsabili dell’aggiornamento devono avere un livello di

competenze adeguato a gestire le complessità del nuovo sito. Il team di

sviluppo deve verificare le capacità del team di gestione a questo proposito;

Si raccomanda un test: suggerire nuove informazioni e archiviare quelle

vecchie.

> Team interni e team esterni


Team interni e team esterni

Per un lavoro a tempo pieno conviene quasi sempre assumere una persona.

Se le necessità di gestione richiedono soltanto 20 ore alla settimana, non ha

senso prendere una persona full-time.

> Scenari relativi al team di manutenzione


Spesso…

Spesso la società del cliente recluta una società specializzata per riprogettare

il sito, ma si aspetta che il proprio team interno sia in grado di gestire tutta la

manutenzione dopo il lancio.

Pro:

• L'esperienza e le risorse di una società specializzata in sviluppo Web.

• I risparmi di una manutenzione casalinga.

Contro:

• L'esperienza del team di gestione interno tende ad essere a un livello

inferiore rispetto al team di sviluppo, conducendo a un degrado del sito nel

tempo.

• Alti costi per la manutenzione interna.



A volte…

Alcune società (in genere piccole aziende) affidano la gestione alla stessa società che

ha sviluppato il sito, oppure la affidano a una terza parte o a un consulente esterno.

Pro:

• Avere lo stesso team che progetta, sviluppa e gestisce il sito è, ovviamente, ottimale

(e combatte il naturale degrado del sito nel tempo).

• Affidarsi a competenze esterne è più economico che assumere personale fisso, se le

ore richieste ogni mese per la gestione sono poche.

• Basso costo complessivo.

• Esperienze e risorse di professionalità esperte per il team di sviluppo Web.

• Avere un solo team per lo sviluppo, il design e la gestione del sito.

Contro:

• Il costo di un team di sviluppo esterno per gestire il sito può essere alto.

• Avere a che fare con una società esterna può essere scomodo.



A volte…

Con frequenza sempre maggiore, le società tendono a sviluppare e gestire il

sito all'interno, e reclutano persone esperte (art director, visual designer,

information designer ecc.) per i loro team interni.

Pro:

• Le esperienze e le risorse di professionalità esperte per il team di sviluppo

Web.

• Avere un solo team per lo sviluppo, il design e la gestione del sito.

Contro:

• È molto difficile far sì che una persona di talento rimanga felice a lungo

lavorando su un solo progetto. Il turnover potrebbe essere molto elevato.

• Il costo di esperti a tempo pieno può essere elevato.


Monitoraggio server

I link che non vanno da nessuna parte, o che portano nel posto sbagliato, sono

una realtà del Web. Sono cose che succedono anche dopo che è stato

effettuato un accurato test di QA. E, quando il team di gestione inserisce

nuovi contenuti nel sito, le possibilità si moltiplicano.

www.netmechanic.com

Funzione Check Links Sitewide Dreamweaver


Misurare il successo del sito

Serve a capire quali parti del sito sono più utilizzate, quali funzionalità hanno

successo e quali no. Allocare le risorse e il tempo per analizzare i log del

server in modo sistematico.

> Misurare il successo del sito


Raccogliere feedback dagli utenti

I pareri degli utenti costituiscono uno dei modi migliori per misurare il successo

di un sito dopo il lancio. Raccogliere commenti, lamentele ed encomi.

> Raccogliere feedback dagli utenti

OpinionLab (www.opinionlab.com),

fornisce un sistema di rating in grado

di raccogliere feedback per ogni

pagina, con un solo clic da parte

dell’utente.


> Verifica sicurezza del sito

Nel dicembre 2000 un hacker si introdusse nel negozio on-line The Gap, causando

abbastanza danno da costringere il sito a chiudere mentre venivano effettuate le

riparazioni.

> Misure di sicurezza


Alcune misure da prendere in considerazione per la sicurezza del nuovo

sito

• Installare un firewall - un meccanismo che impone delle regole per l’accesso

- sul server interno.

• Proteggetersi dando in gestione l’hosting a un grosso service provider,

fornito di firewall e di sistemi di osservazione e risposta aggressivi.

• Se si ha un team interno e si effettua l’hosting presso l’azienda, assumere

un esperto di information technology (IT) per risolvere tutte le problematiche

relative alla gestione del server, compresi i problemi di sicurezza.

• Evitare password banali. Usare combinazioni di lettere e numeri. Fare in

modo che la password non sia ridicolmente facile da immaginare, come

“2000” o “1234”. Gli hacker saranno dei vandali, ma raramente sono degli

stupidi.

> Nozioni di base



sito

• Cambiare le password frequentemente, soprattutto dopo un licenziamento.

Un dipendente arrabbiato è sempre un rischio.

• Rendere estremamente difficile ottenere informazioni sulla sicurezza.

Predisporre delle protezioni a più strati.

• Limitare l’accesso alle apparecchiature. Tenere le porte chiuse.

• Fare attenzione. Se si conoscono i segnali d’allarme si avrà più probabilità di

essere protetti. Monitorare sempre le attività del sito, controllare i log del

server. Stare all’erta.

-

VERIFICA DELL’UTILIZZO

-

PRINCIPI DELL’UTILIZZO

> Nozioni di base

> Utilizzo e redesign

> Quando effettuare un test

> Costi

ESECUZIONE DEL TEST

> Pianificazione

> Reclutamento

> Condizione

> Analisi

ARGOMENTI TRATTATI



sito

Molte aziende sono convinte che stanno già effettuando dei test di utilizzo,

ma in realtà stanno utilizzando dei focus group o dei sondaggi online. Questi

non sono test di utilizzo. Sebbene qualsiasi tipo di feedback abbia un proprio

valore, i risultati sono radicalmente differenti.

Leggere Web Usability di Jakob Nielsen (Apogeo, 2000).

Leggere anche gli articoli su www.useit.com.


Principi del’utilizzo

A differenza dei sondaggi e dei focus group, il test di utilizzo è un processo

uno a uno, che si avvale di un approccio “guarda e impara”.

Un moderatore osserva un utente.

I risultati sono immediati e indiscutibili.

Se gli utenti fanno clic sul link sbagliato, non sono loro a sbagliare, è il

progetto a essere sbagliato. Insomma, il test dell’utilizzo mostra il modo in

cui gli utenti usano veramente il sito.



Nozioni di base

Serve un piano, dei partecipanti, e forse qualche modulo legale riguardante la

privacy, il patto di non divulgazione (il cosiddetto NDA, Non Disclosure

Agreement), e il consenso a essere filmati.

La parte più difficile è trovare il tempo.

Prepararsi a restare sorpresi: i test di utilizzo non danno mai risultati scontati.

Effettuare il test di nuove grafiche e nuove navigazioni sugli utenti abituali

del sito fornirà quasi sicuramente dei risultati falsati. Non fermarsi dunque

soltanto all’utenza esistente.


> Nozioni di base


Nozioni di base

Quando?

Il momento più ovvio è alla fine della fase di produzione, durante i ritocchi

finali ma prima del lancio.

Prima si fa, meglio è. Sarà banale, ma è la verità. Condurre test di utilizzo in

fasi molto precoci della lavorazione, non solo si rivela più economico a lungo

termine, ma è anche molto più facile da pianificare (sia per quanto riguarda

le risorse sia per quanto riguarda il budget).

Testare il maggior numero possibile di punti critici.


> Nozioni di base


I test one-on-one

• La durata del test è di uno o due giorni, con un numero di partecipanti che

varia da 4 a 6 al giorno. Si svolge in una stanza dove entra solo un

partecipante alla volta.

• La durata di ciascuna sessione è di circa un’ora.

• I task eseguiti sono predeterminati.

• I task testano solo specifiche aree o percorsi, non l’intero sito.

• I task da eseguire durante il test sono provati prima da un membro del team

di sviluppo, per assicurare che siano fattibili.


> I test one-on-one


I test one-on-one

• Il moderatore osserva, non interferisce, e prende appunti. Un moderatore

può testare tutti i partecipanti, ma solo un partecipante alla volta.

• Le sessioni possono essere videoregistrate.

• Le sessioni possono essere viste dal team di sviluppo. I laboratori

specializzati, di solito sono dotati di uno specchio unidirezionale per evitare

che il soggetto possa sentirsi a disagio.

• I risultati mostreranno le cose che funzionano e quelle che non funzionano.


> I test one-on-one

PRINCIPI DELL’UTILIZZOVERIFICA DELL’UTILIZZO

> I costi

a Molti dei siti attualmente esistenti corrispondono poco alle esigenze degli utenti, e

sono troppo difficili da usare.

a La barriera, per molti, è la falsa nozione che il test di usability debba essere un

progetto elaborato e costoso.

a Compiere molti, piccoli, rapidissimi test.

a Testare diverse versioni di un prototipo man mano che questo si evolve.

Jakob Nielsen Il valore dei “MINI-TEST” di utilizzo


a www.useit.com

a il maggior esperto mondiale di Web usability, la persona

più intelligente del Web. Sa più cose lui su come far funzionare

un sito Web, che chiunque altro nel nostro pianeta”

a Il suo libro Web Usability ha venduto più di 250.000 copie

ed è stato tradotto in 13 lingue.

a La sua rubrica Alertbox sulla Web usability, pubblicata su

Internet dal 1995, conta attualmente 200.000 lettori.

a Nielsen detiene 53 brevetti, principalmente riguardanti la

possibilità di rendere Internet più facile da usare.

Jakob Nielsen Il valore dei “MINI-TEST” di utilizzo


ESECUZIONE DEI TEST

Un processo in 4 fasi

Fase 1: Pianificare e preparare

Fase 2: Trovare i partecipanti

Fase 3: Condurre la sessione

Fase 4: Analizzare i dati e formulare

Tre livelli di formalizzazione: un approccio semplificato e informale, un piano

semi formale, più espanso, un lavoro alla massima espansione, completo.

La principale differenza fra i tre livelli: professionalità coinvolte.


> Un processo in 4 fasi

ESECUZIONE DEI TEST

Piano del test

I test devono avere degli obiettivi specifici. Per fare questo occorre fare un

piano che dovrebbe contenere almeno i seguenti elementi:

• scopi/obiettivi complessivi;

• metodologia (procedura testing, attrezzatura, descrizione laboratorio, …);

• profilo dell’audience (le persone su cui si effettuerà il test);

• descrizione della struttura del test (approccio, liste di controllo, domande);

• lista dettagliata dei task;

• valutazione finale (analisi dei dati);

• struttura report (come si vogliono presentare risultati e raccomandazioni).


> Fase 1: pianificare e preparare

Esempio progetto test di utilizzo

ESECUZIONE DEI TEST

La lista dei task

Scegliere compiti che mettano alla prova aree potenzialmente problematiche.

Creare una lista di task che un utente generico può completare in circa

un’ora. Tenere comunque dei task di riserva nel caso in cui quelli stabiliti

richiedano meno tempo del previsto. Assicurarsi che i task non siano né troppo

semplici né troppo difficili da compiere nell’arco di tempo stabilito.

Mettere i soggetti a proprio agio.

* Catena di negozi di articoli per la casa: ordinare un regalo scegliendolo da

una lista nozze. Quindi, di richiedere un catalogo.

* Banca: controllare l’estratto conto o informarsi sulle condizioni di un mutuo.

Fargli pagare delle bollette o effettuare un bonifico.

* Guida ai ristoranti: Trovare un ristorante vietnamita che effettui consegne a

domicilio, o una birreria con musica jazz dal vivo. Prenotare.



ESECUZIONE DEI TEST

Copione per lo svolgimento del test

Avere in mano una traccia, una sceneggiatura.

Lo script di un test dovrebbe includere i seguenti argomenti: introduzione,

programma della sessione di test, breve spiegazione della metodologia.

• Presentarsi e descrivere il proprio ruolo di moderatore.

• Spiegare il proprio ruolo: osservatore silente. Non si risponderà

direttamente a domande; si è lì solo per osservare e prendere appunti.

• Fare una panoramica degli obiettivi del test.

• Assicurare ai partecipanti che il test non riguarda loro, in alcun modo. È il

sito ad essere sotto esame.

• Incoraggiare i partecipanti a parlare ad alta voce durante il test.

• Far firmare il Non Disclosure Agreement e tutti i documenti necessari e

chiedete al soggetto se ha domande da fare.



Esempio di script del test

ESECUZIONE DEI TEST

Reclutare i partecipanti

La ricerca di potenziali partecipanti è uno degli aspetti più stimolanti della

conduzione di test di utilizzo.

Effettuare i test con individui che non hanno relazioni con il vostro sito o con

la vostra società darà risultati migliori. Iniziate a formare una base di utenti

che potrete usare sia nei focus group sia nei test di utilizzo.

Amici e colleghi sono ottimi candidati per effettuare un “test del test”: far

fare loro una giro di prova


> Fase 2: reclutare i partecipanti

ESECUZIONE DEI TEST

Reclutare i partecipanti

Qual è il miglior metodo per raggiungere gli utenti target ? Sono persone che

leggono solitamente il settimanale di annunci gratuiti? Esiste una risorsa on-

line per la ricerca di lavoro e la pubblicazione di annunci? Funzionerebbe

affiggere un annuncio in università?

Esempio di annuncio per la ricerca di soggetti: test con target ampio

Vuoi guadagnare 50 euro per un’ora di navigazione sul Web? Partecipa a uno

studio di utilizzo online. Scrivi a informazioni@_________.com

Esempio di annuncio per la ricerca di soggetti: test con target piu’ ristretto

Cerchiamo donne sopra i 45 anni. Vuoi guadagnare 50 euro per un’ora di

navigazione sul Web? Partecipa a uno studio di utilizzo online. Scrivi a

informazioni@_________.com



ESECUZIONE DEI TEST

Selezione

Una delle differenze tra le procedure dei test formale e informale sta nella

selezione professionale dei partecipanti. Le società specializzate chiedono

fino a 500 euro per partecipante (di solito individuano gruppi di 8 o 12

soggetti), per individuare, selezionare e reclutare persone per un test di

utilizzo.

Vantaggi

a Soggetti selezionati da esperti e appartenenti a un target specifico.

a Più il target è ben determinato, migliori saranno i risultati.



ESECUZIONE DEI TEST

Profilazione

Fare in modo che i potenziali soggetti compilino un modulo on-line (o inviato

via fax) per fornire dati anagrafici di base e informazioni sull’uso di Internet.

Garantire, secondo la legge sulla privacy, la riservatezza delle informazioni

ricevute.

Raggruppare i soggetti che corrispondano il più possibile al vostro target.

Inviare un’e-mail introduttiva ai partecipanti che rientrano nel profilo

desiderato. Spiegare loro brevemente quando dovrebbero aspettarsi di essere

contattati e quali attività dovranno svolgere, ma non siate troppo specifici.

Fare seguire una e-mail o una telefonata per confermare la data definitiva.



ESECUZIONE DEI TESTVERIFICA DELL’UTILIZZO


Esempio di modulo on-line per selezione

ESECUZIONE DEI TESTVERIFICA DELL’UTILIZZO


Potenziali soggetti per il test: dal modulo di profilazione on-line Invio lettera di contatto

ESECUZIONE DEI TEST

Condurre la sessione

Atteggiamento amichevole e paziente.

Presentarsi e spiegare al soggetto che gli sarà chiesto di eseguire una serie di

compiti predeterminati.

Fare attenzione alla scelta delle parole: non pregiudicare i risultati rivelando

al soggetto il numero o la lunghezza dei task. Spiegare il ruolo di osservatore,

non di aiuto.

Preparare in anticipo tutti i documenti da far firmare per espletare

rapidamente le formalità e far sentire il soggetto a proprio agio.

Durante il processo di testing rimanere neutrali. Essere osservatori silentI.

Parlare solo per illustrare un nuovo task.


> Fase 3: condurre la sessione

ESECUZIONE DEI TEST

Condurre la sessione

Nessun suggerimento, con parole, sguardi o gesti.

Se la frustrazione del partecipante aumenta notevolmente, rilevatene il

livello e, dopo aver tentato tutte le opzioni, annotate “task fallito” sul vostro

taccuino. Non identificate il fallimento di un task con il fallimento del test. È

proprio l’opposto.



ESECUZIONE DEI TEST

Pratico promemoria

• Un documento sulla privacy e il non disclosure agreement pronto per essere

firmato.

• Assicurarsi che la propria connessione a Internet funzioni.

• Se si sta videoregistrando, tenere pronte delle batterie cariche per la video

camera, poiché i cavi potrebbero causare problemi.

• Tenere a portata di mano una stampata del sito per prendere appunti (le

pagine associate ai task).

• Assicurarsi di avere la lista dei task da svolgere.

• Tenere pronto il questionario per il dopo-test.

• Il sito deve essere tra i bookmark e pronto da navigare.



ESECUZIONE DEI TEST

Raccolta dati di base

Prendere meticolosamente appunti durante il processo di testing.

Utilizzare lo stesso modulo per tutti i soggetti del test.

Assicurarsi di prendere appunti su tutti gli aspetti seguenti, per ciascun task.

• Il soggetto riesce a portare a termine il task?

• Ha bisogno di aiuto? Il task si interrompe?

• Quanto tempo ha impiegato?

• Quali ostacoli ha incontrato? Descrivere i problemi e gli ostacoli.

• Annotare tutte le osservazioni. Aggiungere commenti. Il soggetto borbotta

frustrato? Esprime entusiasmo?



Esempio di modulo per appunti durante una sessione tipica

ESECUZIONE DEI TEST

Dopo la sessione di testing

Tenere d’occhio l’orologio. Prima che il soggetto abbia finito e possa andare

via: breve questionario (non + di 5 min) post-test (da preparare in anticipo),

breve intervista riepilogativa e, alla fine, pagare il soggetto per il tempo che

vi ha dedicato.

Interrogate il partecipante: questioni generali e poi sullo specifico (le aree

problematiche annotate). Tenete i soldi pronti per il partecipante, una volta

che la sessione è completa.

Prima del successivo, preparare un breve riassunto della sessione e dei

risultati: descrivete le aree problematiche e le reazioni più sorprendenti,

osservazioni personali.



Esempio di feedback dopo il test

ESECUZIONE DEI TEST

Analisi dei dati e formulazione delle raccomandazioni

Capire come e perché un utente non riesce a completare un task o accorgersi

quando si manifestano i problemi è facile. Determinare come risolvere i

problemi richiede esperienza.

Quando richiamate i problemi, specificare quali erano le difficoltà.

Sistemate questi problemi in ordine di frequenza e poi dategli una priorità.

Dividere le raccomandazioni in obiettivi a breve e lungo termine.

Stendete un piano di implementazione per la messa a punto del sito.


> Fase 4: analisi dei dati e formulazione delle raccomandazioni

ESECUZIONE DEI TEST

Report finale

• Riepilogo generale: Un breve riassunto dei principali risultati,

raccomandazioni e suggerimenti, relativi alle aree sulle quali ci si è

concentrati. Panoramica di ciò che funziona e ciò che non funziona nel sito.

• Metodologia: Una descrizione della natura della ricerca, di come è stata

impostata, dei profili degli utenti, dei metodi di raccolta dei dati e così via.

• Risultati analitici: Un’esposizione chiara e completa di tutti i risultati del

test, dei feedback dei questionari eccetera.

• Conclusioni e raccomandazioni: Una presentazione di informazioni

generiche e specifiche, raccomandazioni di modifiche a breve e lungo

termine, e il tipo di modifiche suggerite (per esempio, solo la grafica, il testo,

o la programmazione delle funzioni, eccetera). Includete informazioni circa i

task assegnati, le cause dei problemi, e le soluzioni raccomandate.

• Appendici: I dati grezzi, appunti, esempi di materiali del test, informazioni

sui partecipanti (non i nomi) e via dicendo.


> Fase 4: analisi dei dati e formulazione delle raccomandazioni

ESECUZIONE DEI TEST

Mettere insieme le conclusioni

in un report finale:

un sintetico punto di

riferimento per il cliente e per

il team di sviluppo.


-

ANALISI COMPETITIVA

-

ANALISI COMPETITIVA

a Per progetti che non hanno budget astronomici si raccomanda di

effettuare un’analisi informale delle funzionalità.

a Fornisce un’istantanea dei servizi e delle funzionalità della concorrenza

dal punto di vista dell’utente.

a Ha lo scopo di capire che cosa offrono i concorrenti in termini di

contenuti, funzionalità e servizi.

IMPOSTAZIONE

> Definire il processo

> Costruire un piano per

l’analisi

> Definire il competitive

set

> Categorizzare il

competitive set

> Creare una lista delle

funzionalità

ATTUAZIONE

> Effettuare analisi

individuali

> Effettuare test di

usabilità informali

ANALISI

> Creare una griglia delle

funzionalità

> Effettuare valutazioni

complessive

> Creare un report finale

ARGOMENTI TRATTATI

ANALISI FORMALE E INFORMALE

Analisi formale e informale

> L’analisi informale copre soltanto le funzionalità online e la customer

experience, non il marketing o il branding o, ancora, l’analisi di prodotti

presenti o futuri dell’azienda.

> Lo scopo ultimo di un’analisi delle funzionalità è quello di rispondere alla

seguente domanda: che cosa stanno facendo i concorrenti per fornire servizi

e contenuti utili e sensati per gli utenti?

> Il lavoro di un team di sviluppo che si imbarca in un’analisi delle funzionalità è

quello di esaminare gli obiettivi, i prodotti e il mercato, con esclusivo

riferimento al Web.

> Diventare un utente esperto nel settore industriale del cliente.

ANALISI COMPETITIVA

ANALISI FORMALE E INFORMALEANALISI COMPETITIVA

SVOLGIMENTO DELL’ANALISI

Svolgimento dell’analisi

> Indipendentemente dal tempo dedicato il processo si articola sempre in quattro

fasi: definire il processo, creare una lista di funzionalità, effettuare

un’analisi e dei test di utilizzo e, infine, scrivere una relazione (report).

ANALISI COMPETITIVA SVOLGIMENTO DELL’ANALISIANALISI COMPETITIVA

SVOLGIMENTO DELL’ANALISIANALISI COMPETITIVA

Realizzare un piano per l’analisi

> Creare un piano per l’analisi che descriva complessivamente gli obiettivi, la

metodologia, i tempi di realizzazione e il budget

> Le analisi competitive sono molto diverse fra loro per dimensioni e scopi, a

seconda del livello di dettaglio ricercato. Le analisi dovrebbero essere

condotte da almeno due persone, poiché ciò permette di avere prospettive

diverse.

> A seconda del tempo e delle risorse disponibili, l’elaborazione può richiedere da

una settimana (nel caso di budget piccoli e medi, da 20 a 70 ore) a un mese

(nel caso di budget di maggiori dimensioni).

ANALISI COMPETITIVA SVOLGIMENTO DELL’ANALISI

Esempio di piano d’analisi che descrive scopi e obiettivi

> Fase 1: definire il processo

Definire il competitive set

> Identificare chi sono gli attori principali nel settore industriale in considerazione

e quali sono i concorrenti diretti del cliente.

> Fare una scelta ad ampio spettro. Raccogliere le informazioni così come farebbe

un utente: utilizzando i motori di ricerca, seguendo i banner pubblicitari e

servendovi di altre risorse come l’elenco telefonico o guide specifiche.

> Partire dalla lista fornita dal cliente, m andare ad ampliare la ricerca anche a

realtà off-line

> Se vi sono tanti siti di riferimento scegliere i principali, ma anche con

corrispondenze diverse

Esempio: progetto di redesign riguardante un’agenzia viaggi on-line

a Portali

a Linee aeree

a Siti depliant

a Concorrenti off line

a Numeri verdi 24/24





Categoria portale Categoria portale



Categoria portale/motore di ricerca

Categoria viaggi/avventura



Categoria brochure on-line

Categoria linee aeree

Tempo e denaro

> allocare come minimo un’ora per analizzare ciascun sito del competitive set.

> attività di testing, di documentazione delle funzionalità e di redazione delle

raccomandazioni.

> un set di 12 siti equivale a una buona giornata e mezza di lavoro.

> se si hanno le risorse, allocare diverse ore per sito e se ne trarranno grossi

vantaggi.

> se non si hanno le risorse o il budget, si può scegliere: o limitare il numero di

siti da analizzare o il tempo da dedicare a ciascun sito.



Categorizzare il competitive set

> Valutare rapidamente ciascun sito (un esame da cinque minuti, niente di

intensivo) per inserirlo in una categoria all’interno del settore.

> Dare un ordine alle categorie.

> Sebbene si possano avere categorie che contengono più di un sito, ciascun sito

dovrebbe appartenere a una sola categoria.



Creare una lista delle funzionalità

> Creare un breve inventario delle funzionalità relative alla grafica e ai contenuti.

> Contenuti, grafica, media, funzionalità, cose da fare, cose da vedere, azioni da

compiere... Elencare tutto.

> Prendere in considerazione tutti gli elementi.

> Identificare il tempo di caricamento e il peso della grafica dei siti in esame.

> Includere funzionalità come la ricerca, la registrazione, forum.


> Fase 2: creare una lista delle funzionalità

La ricerca delle funzionalità

La quantità finale delle funzionalità esaminate dipenderà dalle risorse che avete a

disposizione e dal livello di dettaglio desiderato, ma 20 o 30 voci possono

essere considerate un buon campione.

Alcuni spunti da prendere in considerazione per iniziare la compilazione

dell’elenco.

• Grafica: splash screen, animazioni Flash, GIF animate, frame, pubblicità …

• Media: audio, video, …

• Contenuti: sezioni dedicate alla stampa, descrizione dei prodotti o servizi,

descrizione della società, biografie dei soci, una lista dei clienti, contenuti

statici o dinamici, …

• Funzioni: ricerca, login, forum, servizi di community, chat, registrazione,

possibilità di acquistare on-line, sicurezza, …





Esempio generico di funzionalità

grafiche e di contenuti di siti

concorrenti.



Esempio piu’ orientato ai contenuti

Condurre l’analisi e il testing

> Si è pronti per la parte “operativa” del lavoro.

> Due approcci diversi e complementari: valutazione individuale e test di utilizzo

informale.

Valutazione individuale

Ciascun valutatore dovrebbe dare la propria opinione su ciascun sito, mantenendo

il punto di vista di un utente. Preparare un semplice questionario da riempire

per ciascun sito del competitive set.


> Fase 3: condurre l’analisi e il testing

Esempio questionario per la valutazione individuale dei siti

Test informali di utilizzo

Scegliere una o due funzioni e di testarne la facilità all’interno di tutto il

competitive set. Identificate alcuni compiti di base che possono essere svolti

> Se si sta effettuando un’analisi sull’industria dell’illuminazione, ordinate

alcune lampadine.

> Quanto è facile (o difficile) trovarne del tipo, della potenza e della misura che

si cerca?

> Aspettare qualche giorno fino all’arrivo dell’ordinazione. Provate a rimandare

indietro alcuni pezzi. Quanto è facile?

> Chiamare il servizio clienti per chiedere assistenza, lamentarsi. Essere un vero

utente.

A seconda degli obiettivi del progetto di redesign, questi task possono essere

molto semplici o estremamente complessi.



Servono scorciatoie?

> Gomez.com offre schede di valutazione comparativa per i primi dieciquindici

siti di un settore. Le valutazioni sono basate su vari criteri (facilità d’uso,

fiducia dei clienti, risorse, costo e così via) e aggiornate trimestralmente.



Lista comparativa delle funzionalità

Classifica dei primi 10 player

Criteri per punteggio globale

Creare il report finale

> Mettere insieme i risultati e le informazioni in un resoconto ufficiale è l’ultimo

passo dell’analisi competitiva.

> Un sommario sintetico dei risultati, in un formato facile da leggere e da passare

in rassegna.

> Concentrare in una o due pagine i principali risultati e le raccomandazioni.

Quali sono stati i risultati più sorprendenti? Che cosa ha reso la user experience

positiva? Che cosa ha fatto infuriare?

> Il resto del report dovrebbe spiegare la metodologia e il processo e dovrebbe

includere immagini e descrizioni globali dei siti presi in esame, insieme alle

griglie di confronto così faticosamente prodotte (e controllate, e

ricontrollate).

> Ovviamente, il livello di formalità del report finale dipende da chi sono i suoi

destinatari: il team di sviluppo o il cliente? La maggior parte delle volte è

destinato a entrambi.


> Fase 4: creare il report finale

Creare una griglia delle funzionalità

> Disporre le informazioni raccolte in una griglia visuale.

> Raggruppate le funzionalità secondo categorie come “Ricerca” e

“Personalizzazione”.

> Aggiungere delle categorie se necessario




Esempio di griglia di funzionalità del settore viaggi

Effettuare le valutazioni globali

Dare un giudizio globale per ciascun sito del competitive set.Selezionare almeno

tre aree principali da valutare e utilizzare un sistema di valutazione da 1 a 5

stelle.



Elementi minimi da includere nel report finale

• Riepilogo generale (executive summary)

• Risultati e raccomandazioni (possono essere incluse nel riepilogo generale, o

estese, se necessario)

• Descrizione della metodologia/processo/approccio utilizzati

• Immagini e descrizioni di ciascun sito (due o tre immagini, valutazione finale,

una breve descrizione e le esperienze raccolte)

• Griglia delle funzionalità (creata successivamente)

• Valutazioni globali (comprese nella griglia delle funzionalità)

• Note e dati grezzi



L’obiettivo finale è ottenere con quest’analisi una migliore comprensione del sito

che si dovrà riprogettare, del settore industriale, e della user experience.

GLOSSARIO DELLE PROFESSIONI > Chief Internet officer

Chief Internet officer

E’ il manager responsabile di un progetto Web.

Oltre alle capacità manageriali gli è richiesta una conoscenza chiara e

approfondita degli aspetti tecnologici dei canali comunicativi interattivi

multimediali, dovendo stilare il business plan del progetto, tracciarne le

prospettive (in termini di spese, tempi e guadagni) e assemblare il team di

progettisti e di sviluppo.

Professionista particolarmente ricercato, data la difficoltà di reperire

manager d’esperienza che abbiano le competenze specifiche necessarie a

realizzare e-business, è la figura di collegamento tra la net economy e l’area

commerciale tradizionale.

GLOSSARIO DELLE PROFESSIONI > Community manager

Community manager

E’ il gestore delle comunità on-line che ruotano attorno a un sito.

Tramite gli strumenti di comunicazione interattiva (chat, forum, board,

mailing e così via) intrattiene i rapporti con i clienti/utenti e ne indirizza e

stimola le discussioni (oltre a moderarle).

Lavora a stretto contatto con l’area marketing dell’azienda, fidelizza i clienti

e li stimola alla frequentazione delle aree comuni, li mantiene aggiornati sulle

iniziative e sulle novità, effettua indagini d’opinione sul target specifico e

raccoglie osservazioni e lamentele.

Approfondita conoscenza non solo del sito (spesso anche Web master) ma

anche del pubblico e delle sue abitudini, un monitoraggio costante della

prestazione del sito e la sensibilità nel cogliere i feedback provenienti dai

componenti della community che rappresentano, prima di tutto, un campione

di mercato altamente selezionato. Gli è richiesta la competenza tecnologica

necessaria a gestire la rete di canali comunicativi interattivi, che

costituiscono la piattaforma su cui si sviluppano le community.

GLOSSARIO DELLE PROFESSIONI > Concept designer

Concept designer

Figura incaricata della progettazione e ideazione di un sito (o prodotto

digitale off-line). Gli è richiesta la conoscenza, anche se non approfondita, di

tutte le fasi di sviluppo di un sito e delle tecniche impiegate.

Cooperando con l’area marketing, svolge un’attività creativa, riformulando le

esigenze commerciali e propagandistiche per creare il progetto in ogni sua

parte e struttura, sino a concepire il diagramma di flusso che porta alla

realizzazione del prodotto multimediale, sia esso un sito o un prodotto off-

line.

E un ruolo progettuale, ma che contempla anche le competenze tecniche

necessarie per valutare la fattibilità di progetto e le tempistiche.

GLOSSARIO DELLE PROFESSIONI > Concept manager

> Web editor

> Multimedia copy writer

Content manager/Web editor/Multimedia copy writer

Il content manager svolge l’attività di redattore on-line. Progetta, crea e

gestisce i contenuti testuali di un sito. Definisce le informazioni che verranno

pubblicate nelle pagine Web, ideandone la struttura logica e l’ordine

concettuale. Fase fondamentale dell’attività del content manager è la ricerca

dei dati e delle informazioni, indispensabili alla stesura dei testi destinati alla

pubblicazione on-line, sfruttando tutti i canali informativi disponibili

(tradizionali e di rete).

Conosce le tecniche di Web writing necessarie alla redazione di contenuti

adatti, per forma e ampiezza, alle potenzialità dell’ipertesto e alle esigenze

della Web community. Coopera attivamente con l’art director e il Web

designer alla progettazione del sito, contribuendo all’efficacia del progetto

comunicativo on-line. Il copy writer coopera con il content manager (quando

questi non coincidono) occupandosi della stesura dei testi del sito in maniera

efficace, in linea con le atmosfere del prodotto multimediale in fase di

creazione o aggiornamento.

GLOSSARIO DELLE PROFESSIONI > Cyber consulente

Cyber consulente

Libero professionista che svolge attività di consulenza tramite i canali di

comunicazione della rete. Chat, mail, board, video-conferenza sono solo

alcune delle modalità seguite dal consulente remoto per attuare problem

solving presso i clienti. Più che di una nuova professione si tratta di un nuovo

modo di lavorare.

Molti dei free-lance operanti nel campo della net economy, dell’editoria

elettronica e di quella tradizionale sfruttano la Rete come mezzo di

trasmissione di informazioni in tempo reale, minimizzando i tempi di ricezione

e soprattutto effettuando spostamenti solo quando strettamente necessario.

GLOSSARIO DELLE PROFESSIONI > E-business manager

E-business manager

L’e-business manager è il responsabile delle vendite on-line di prodotti o

servizi. Una conoscenza profonda delle strategie e tecniche del marketing on-

line e l’abilità nel gestire i processi che regolano il commercio on-line sono le

caratteristiche base del manager della net-economy.

L’e-business manager è a capo di un team che deve assicurare l’efficienza

delle procedure di vendita via rete, garantendo tempestività nell’evasione

delle richieste degli utenti/clienti; deve fare in modo, in collaborazione con

il Web master, che il sito Web, ossia la vetrina del “negozio virtuale”, sia

costantemente aggiornato in tempo reale, in coerenza con l’effettiva

disponibilità dei prodotti e dei servizi.

GLOSSARIO DELLE PROFESSIONI > E-customer satisfaction manager

E-customer satisfaction manager

E’ un operatore specialistico del marketing on-line. Studia le soluzioni migliori

da offrire al cliente/utente di un sito commerciale. Occupandosi

dell’efficienza del servizio al cliente, coordina, cooperando con figure quali il

Web advisor, il Web master e il community manager, il flusso di dati in entrata

e in uscita riguardanti l’utenza e ne classifica le richieste, smistandole verso i

componenti più adatti a soddisfarle.

L’attività del satisfaction manager nell’ambito dell’e-business determina in

larga misura il grado di “reattività” e adattabilità del sito alle sollecitazioni

degli utenti, rielaborando il concetto di customer care, alla luce delle

possibilità offerte dalle tecnologie di rete. è una figura caratterizzata da

grandi capacità nell’archiviazione e gestione dei dati, con una spiccatissima

propensione al problem solving.

GLOSSARIO DELLE PROFESSIONI > Fotografo digitale

Fotografo digitale

La necessità di digitalizzare l’immagine per renderla importabile negli

ambienti dei nuovi media ha dato grande impulso all’evoluzione tecnologica

degli strumenti atti al trattamento e all’acquisizione di fotografie.

Il fotografo digitale, oltre a possedere la tecnica fotografica tradizionale, ha

sviluppato la competenza informatica necessaria alla gestione delle immagini

digitali nei più svariati ambiti, dal Web al cinema, ormai completamente

orientato verso la tecnologia digitale.

GLOSSARIO DELLE PROFESSIONI > Interaction designer

> Usability engineer

Interaction designer/Usability engineer

Nel progetto comunicazionale on-line è necessaria una figura operativa che

supervisioni la gestione del traffico informativo in entrata e in uscita, che si

occupi di mantenere la coerenza del progetto comunicativo e che studi le

strategie con cui trasformare il sito, come un qualsiasi prodotto dotato di

interattività, in un canale informativo a due direzioni, in un continuo

confronto con il target.

Una delle sue principali mansioni è prevedere la distribuzione, le modalità e i

tempi delle informazioni costituendo l’ossatura logica del sito (in

collaborazione con il content manager). In collaborazione con il Web designer

procede allo studio di un’interfaccia che garantisca l’alto tasso di usabilità su

cui si fonda buona parte del successo di un prodotto dotato di interattività,

sia on-line sia off-line.

Date le sua capacità tecniche e la visione complessiva del progetto, risulta

essere una figura ibrida e dalle ampie competenze, in grado di sostituire

l’eventuale assenza di specialisti di alcune delle aree di sviluppo oppure

cooperare in team, garantendo l’efficacia comunicativa del processo.

GLOSSARIO DELLE PROFESSIONI > Localizzatore

Localizzatore

E’ l’internazionalizzatore del prodotto multimediale.

Si preoccupa della riconversione del prodotto su supporto digitale,

adattandolo ai mercati esteri, supervisionando la rielaborazione dei contenuti

e consigliando il restyling quando necessario.

Analizza la procedura di riconversione dell’oggetto multimediale secondo i

codici comunicativi del nuovo mercato.

GLOSSARIO DELLE PROFESSIONI > Montatore di filmati per

produzioni multimediali

Montatore di filmati per produzioni multimediali

E’ l’evoluzione del montatore tradizionale. Le nuove tecnologie per il

montaggio digitale richiedono competenze specifiche nell’ambito delle

tecnologie informatiche e della digitalizzazione dell’immagine.

Figura chiave nella fase di produzione e post produzione del prodotto

multimediale, utilizza i software dedicati alla gestione, ottimizzazione e

sincronizzazione audio-video.

La logica operativa del montatore per le produzioni digitali non si discosta da

quella seguita dal tradizionale montatore di pellicola; tuttavia cambiano in

maniera drastica le competenze, arricchite da un profondo know-how

informatico specialistico nell’area della computer grafica e dell’immagine

digitale.

GLOSSARIO DELLE PROFESSIONI > Multimedia editor

Multimedia editor

Figura nuova del panorama editoriale.

Integra conoscenze del settore editoriale cartaceo tradizionale con profonde

competenze tecniche nell’ambito dei nuovi media: è in grado di gestire sia la

creazione di un prodotto cartaceo sia la creazione di oggetti multimediali

(DVD, CD-ROM e siti Internet).

Spesso dirige la digitalizzazione di formati cartacei, studiando il metodo per

garantire la minor perdita possibile di informazioni nel passaggio da un mezzo

all’altro, ideando nuovi format editoriali che sfruttino appieno le potenzialità

dei supporti digitali.

L’attività specifica del multimedia editor implica il coordinamento di gruppi di

lavoro impegnati nello sviluppo di prodotti mono e multimediali sotto il profilo

creativo, organizzativo ed economico.

GLOSSARIO DELLE PROFESSIONI > Multimedia packager

Multimedia packager

Simile al multimedia editor, è l’assemblatore del prodotto multimediale.

Immagina la fruibilità del prodotto occupandosi dell’armonia multimediale

ponendosi come obiettivo la vendibilità.

Impiegato nel mercato dell’editoria elettronica e della produzione on-line, è

spesso un libero professionista che agisce come consulente nel processo di

standardizzazione del prodotto multimediale.

Non accade di rado che il multimedia editor, oltre a curare la realizzazione

delle singole parti del prodotto, rivesta il ruolo di packager proponendo le

proprie idee a case editrici e distributori come free-lance.

GLOSSARIO DELLE PROFESSIONI > On-line tutor

> Web trainer

On-line tutor/Web trainer

Contribuisce alla definizione dei contenuti e dei moduli didattici di un corso

on-line, alla tempistica di pubblicazione delle lezioni e al calendario,

supportando a livello tecnico e didattico gli utenti del corso. Gestisce in prima

persona la community degli allievi che partecipano al corso remotamente e

l’ambiente di e-learning che da questi viene sfruttato per seguire le lezioni.

Si occupa dell’amministrazione e il tempestivo aggiornamento delle grandi

quantità di dati in quotidiana evoluzione offerte agli allievi, la conduzione di

esercitazioni in remoto (dei singoli o di gruppi) e una visione completa e

costante del programma formativo erogato.

Le competenze tecniche e la visione completa del programma e dei contenuti

gli permettono di ottimizzare le procedure d’erogazione del corso on-line;

controlla il livello di gradimento della classe virtuale.

GLOSSARIO DELLE PROFESSIONI > Web account manager

Web account manager

E il pianificatore delle campagne pubblicitarie on-line. Internet si presenta

con un’offerta di canali propagandistici ampia e differenziata quanto il

pubblico che vi accede; è compito del Web account manager quello di

discernere tra le varie possibilità e di scegliere le più adatte a soddisfare gli

obbiettivi di una campagna di advertising on-line.

Conosce quindi la tempistica di turn-over che caratterizza la comunicazione

on-line, le dinamiche e i codici delle differenti net community stimolandone

la ricettività.

Detta i tempi delle iniziative e l’entità dell’impegno promozionale

differenziato sulle diverse aree informative della rete (siti di informazione

generalisti e tematici, entità rappresentanti specifiche community,

newsgroup e così via).

GLOSSARIO DELLE PROFESSIONI > Web advisor

> Web producer

Web advisor/Web producer

Il Web advisor e il Web producer sono gli esperti di marketing on-line che

determinano le strategie di comunicazione del sito, al fine di ottenerne la

massima resa dai punti di vista commerciale e di immagine.

Abbinano la conoscenza delle tecniche del marketing tradizionale alla realtà

tecnologica dei nuovi media, in particolare del Web; rielaborano le strategie

della propaganda alla luce delle potenzialità di Internet e della vastità e

complessità del pubblico con cui si può entrare in contatto tramite un sito

Web.

Mantenendosi aggiornati sulle tendenze delle net community, individuano il

target della promozione on-line o delle informazioni offerte, studiano i codici

comunicativi più efficaci, indicando le strategie al Web designer e al content

manager. L’advisor e il producer rappresentano due livelli differenti del

marketing on line: il Web advisor cura l’efficacia stilistica, occupandosi della

corretta rappresentazione del sito in base agli obbiettivi prefissati; il Web

producer seleziona strategicamente i servizi e i contenuti che il sito dovrà

offrire al pubblico.

GLOSSARIO DELLE PROFESSIONI > Web business strategist

> Web marketing analys

Web business strategist/Web marketing analyst

Occupano il vertice dell’area Web marketing: studiano le strategie del

marketing on-line, applicandole alla propria realtà aziendale.

Mantengono un costante monitoraggio dell’universo on-line, osservano le

tendenze delle Web community e analizzano le possibilità di e-business.

Aprono prospettive di mercato nuove e in generale sono alla base della

vivacità e della diversificazione commerciale del Web.

Sfruttano la rete per creare partnership con portali, comunità on-line, motori

di ricerca, finalizzate a garantire la visibilità sul mercato in rete.

Dirigono le sezioni di Web marketing e supervisionano cooperando con il chief

Internet officer.

GLOSSARIO DELLE PROFESSIONI > Web call-center manager

Web call-center manager

L’evoluzione dei call-center telefonici classici in call-center multimediali

determina la necessità di nuove figure professionali.

I siti che effettuano vendita di servizi o prodotti on-line attuano strategie di

rafforzamento sul cliente e di fidelizzazione tramite il contatto diretto con i

visitatori del sito.

Il Web call-center manager è responsabile della scelta e della gestione delle

procedure con cui il cliente viene contattato.

In particolare sviluppa un’approfondita conoscenza delle tecnologie

necessarie a rendere minimo il tempo che intercorre tra la visita al sito del

potenziale cliente e il contatto.

Si preoccupa di formulare strategie di chiamata Web non invasive e rispettose

della netiquette, che regola i rapporti tra i siti e i navigatori. E’ un’attività

che risulta quindi essere una specializzazione per i professionisti nel campo

del Web marketing.

GLOSSARIO DELLE PROFESSIONI > Web designer

> Web multimedia developer

> Art director

Web designer/Web multimedia developer/Art director

Il Web designer progetta la struttura, la grafica e l’interfaccia di un sito.

Esperto delle tecnologie Web e dei software dedicati al Web editing, studia le

soluzioni necessarie alla presentazione ottimale dei contenuti (video, audio e

testuali). Alla ricerca dell’equilibrio tra estetica e funzionalità, creando

interfacce che garantiscano una facile accessibilità ai dati e un efficace

impatto grafico.

Svolge un’attività altamente creativa e determinante per il successo delle

strategie del marketing on-line. Spesso è inserito in team di sviluppo

comprendenti art director, content manager, operatori del marketing e tecnici

programmatori.

La distinzione tra Web designer e art director non è facilmente definibile, in

quanto le due figure spesso coincidono. Quando sono presenti entrambi, si

può intendere l’art director come il titolare del ruolo progettuale e di

coordinamento dell’area grafica e design, mentre il Web designer risulta

essere più vincolato a un’attività di tipo tecnico-realizzativa. In alternativa il

Web designer da solo può concentrare su di sè tutte queste funzioni.

GLOSSARIO DELLE PROFESSIONI > Web journalist

> Web writer

> Web reporter

Web journalist/Web writer/Web reporter

È la versione on-line del giornalista tradizionale. Scrive il pezzo direttamente

in formato digitale corredandolo di immagini statiche, animate o di contributi

audio-video.

L’articolo così strutturato può essere destinato a un ente d’informazione on-

line, a una rivista, un giornale o un telegiornale. Il Web journalist può

assumere anche il ruolo di content editor, qualora si occupi direttamente

della pubblicazione on-line dei propri articoli, curandone, oltre alla stesura,

anche la formattazione.

L’enorme crescita dell’offerta informativa, il moltiplicarsi di versioni on-line

di quotidiani e riviste spiegano la necessità di giornalisti (professionisti e

pubblicisti) che sappiano gestire i formati digitali (non solo di testo, ma anche

d’immagine e audio-video) e che sappiano integrare le abilità espressive e

compositive con le esigenze formali di Internet e dei supporti digitali

interattivi.

GLOSSARIO DELLE PROFESSIONI > Web project manager

> Multimedia project manager

Web project manager/Multimedia project manager

E’ il coordinatore del team di sviluppo e gestione di un progetto multimediale

on-line o off-line.

Segue il piano operativo del concept designer, gestendo e integrando le

differenti competenze tecniche del team di sviluppo, garantendone la

funzionalità e l’efficienza.

Svolge un’attività manageriale a tutti gli effetti ed è il responsabile della

gestione del budget di progetto; deve quindi avere la competenza tecnica

necessaria per valutare la professionalità dei componenti dell’Equipe di

lavoro, nonché i tempi di realizzazione dell’intera operazione. .

GLOSSARIO DELLE PROFESSIONI > Web surfer

> Net clipper

> Information broker

Web surfer/Net clipper/Information broker

Si definisce Web surfer il ricercatore on-line. è un esperto conoscitore dei

mezzi informativi on-line e dei principi di indicizzazione dei motori di ricerca.

Basandosi su una ricca e aggiornata sitografia, esegue le ricerche tematiche

che gli vengono richieste e gestisce banche dati, implementandole affinché

non divengano obsolete. In quanto ricercatore di testi, di materiale

iconografico e audio digitale, deve conoscere e trattare i formati esistenti.

Nelle aziende la cui attività implica un costante aggiornamento in rete la

figura del Web surfer diviene cruciale.

Il Net clipper o l’information broker sono figure in larga parte sovrapponibili;

tuttavia differiscono per la maggiore profondità e precisione di indagine che

caratterizza le loro ricerche. Queste figure particolari della ricerca on-line

rielaborano i dati raccolti per trarne indagini di mercato, analisi delle

strategie della concorrenza, prospettive di sviluppo e nuove possibilità di

business. Vengono inoltre impiegati per verificare la validità e le fonti delle

informazioni presenti nella Rete.

SCOPO DEL SITO

Ruolo critico: comunica l’identità dell’azienda

E’ come:

la copertina di una rivista: viene definito il contenuto tramite

esempi,immagini, lo stile e le altre caratteristiche che il lettore troverà

all’interno della pubblicazione

il volto pubblico dell’azienda: la prima impressione è quella che conta,

soprattutto per il web

un’opera d’arte: dopo una rapida occhiata si esamina con cura nel caso

l’utente sia interessato

l’atrio di un palazzo: punto di ingresso e smistamento del traffico in varie

direzioni

HOMEPAGE USABILITY

SCOPO DEL SITO

Ruolo critico: comunica l’identità dell’azienda

E’ come:

la reception di un’azienda: dà il benvenuto ai clienti abituali, offre aiuto e

assistenza e fa sentire adeguatamente accolti tutti quanti

l’indice di un libro: offre all’utente una visione d’insieme dei contenuti

ordinati gerarchicamente e immediatamente accessibili attreverso link

ipertestuali

La prima pagina di un quotidiano: presenta una concisa e gererchica

panoramica delle notizie più importanti

HOMEPAGE USABILITY

SCOPO DEL SITO

> Negozio=Homepage

> Deve comunicare immediatamente, a colpo d’occhio, dove si trovano gli

utenti, cosa fa l’azienda e che tipo di interazione offre il vostro sito.

> Stile distintivo e facile da memorizzare.

1) Mostrare il nome e/o il logo della vostra azienda in dimensioni

ragionevoli e in una posizione ben percepibile.

L’angolo superiore sinistro della pagina è la posizione ideale, almeno nel caso

delle lingue che si leggono da sinistra a destra.

HOMEPAGE USABILITY

SCOPO DEL SITO

2) Includere una tagline che sintetizzi esplicitamente la natura del sito o

dell’azienda.

Tagline: frase breve, semplice, incisiva.

La tagline può essere superflua quando il nome dell’azienda è autoesplicativo

(es. Microsoft)

HOMEPAGE USABILITY

SCOPO DEL SITO

3) Enfatizzare gli elementi del sito che rappresentano un valore dal punto

di vista dell’utente e che differenziano dai competitor.

Ad esempio offrire i prezzi particolarmente vantaggiosi rispetto ai competitor

HOMEPAGE USABILITY

SCOPO DEL SITO

4) Enfatizzare i task prioritari così da fornire agli utenti un chiaro punto di

partenza all’interno della pagina.

Collocate i relativi elementi visuali in una posizione evidente, come la zona in

alto (es. menu)

5) Designare chiaramente una sola pagina come home ufficiale per ogni

sito.

6) Nel sito principale non usare la parola “sito”per riferirsi ad altro che

alla totalità della presenza online dell’azienda.

Se si offrono servizi in siti web separati, la soluzione migliore è definirli “siti”

quando ci si trova al loro interno, ma nell’ambito della home page corporate

essi dovrebbero apparire come categorie o sezioni del sito principale.

HOMEPAGE USABILITY

SCOPO DEL SITO

7) Il design della home page deve differenziarla nettamente da tutte le

altre pagine del sito.

Generalmente si adotta un visual design leggermente diverso (tuttavia

coerente con il look and feel del sito).

HOMEPAGE USABILITY

INFORMAZIONI SULL’AZIENDA

> Tutti i siti business devono offrire accesso diretto a informazioni corporate,

indipendentemente dalle dimensioni dell’azienda e dall’estensione della

gamma di prodotti/servizi.

> La gente ama sapere con chi ha a che fare, e i dettagli circa l’azienda

potenziano la credibilità del sito.

8) Raggruppare in un’area a sé stante tutte le informazioni di tipo

corporate (es. Chi siamo, Cartella stampa, Opportunità di lavoro, Investor

Relations e altri dati sull’azienda).

Questo accorpamento offre agli utenti interessati un riferimento ben preciso e

facile da ricordare.

Aiuta gli utenti non interessati a tenere separate queste informazioni dagli

altri contenuti.

HOMEPAGE USABILITY


9) Includere nella home page un link del tipo “Chi siamo”, che porti a una

sezione in cui l’utente può trovare una panoramica sull’azienda.

La panoramica comprende generalmente informazioni e link per dettagli su

prodotti, servizi, valori e visione, management.

10) Se è importante una buona copertura da parte dei media, inserire

nella home page un link come “News”,“Cartella stampa”o “Press Room”.

I giornalisti apprezzano molto questo servizio e fanno uso di tali materiali

quando devono scrivere un pezzo sull’azienda.

11) Presentare al cliente un volto univoco: il sito deve essere uno dei punti

di contatto con il pubblico, non un’entità a parte.

Va data la sensazione ai propri clienti di trattare con un’entità unica,

indivisibile, compatta (sia online sia offline)

HOMEPAGE USABILITY


12) Includere nella home page un link “Contatti”che porti a un elenco di

contatti e recapiti aziendali.

Identificare chiaramente un servizio e un’email: personificazione dell’azienda

13) Se si offre un meccanismo di feedback (es. Cosa ne pensi della nuova

homepage?), specificare lo scopo del link e se i messaggi verranno letti dal

customer service piuttosto che dal webmaster.

14) Non includete nella home page pubblica informazioni interne destinate

ai dipendenti (il loro posto è nella intranet aziendale).

15) Se si raccolgono dati personali degli utenti, includere un link

all’informativa sul trattamento dei dati riservati (es. “Privacy”).

16) Spiegare il modello di business del sito, a meno che sia evidente.

HOMEPAGE USABILITY

CONTENUTI: WEB WRITING

> La maggior parte degli utenti non legge per intero i contenuti online, ma ne

fa solo un occhiata.

> Occorre ottimizzare i contenuti per facilitarne la visione e condensare il

massimo di informazione nel minimo di parole (importante in generale per il

web, ancor di più nella homepage)

> Catturare e mantenere l’interesse dei visitatori, spesso con a disposizione

uno spazio ridotto e una gran quantità di argomenti.

17) Adottare un linguaggio centrato sull’utente. Attribuite a sezioni e

categorie un nome che abbia senso per gli utenti, non per l’azienda.

18) Evitare le ridondanze.

Se nella home page si ripetono più volte gli stessi elementi (categorie o link),

anziché enfatizzarne l’importanza,di fatto se ne sminuisce l’impatto.

HOMEPAGE USABILITY


19) Non usare slogan troppo creativi e gergo da marketing, che potrebbero

ostacolare la comprensione da parte degli utenti.

Esempio: la categoria di Travelocity chiamata “Sogna, progetta e parti” può

suonare seducente alle orecchie di un uomo di marketing ma non è così

diretta come “Pianifica la tua vacanza”.

Non far fermare i prorii utenti a pensare. Il testo deve essere informativo e

non ambiguo.

20) Essere coerenti nell’utilizzo di maiuscole/minuscole e di altri standard

stilistici.

Gli utenti potrebbero attribuire al testo implicazioni sbagliate.

Esempio: tutte le voci di un elenco iniziano con la minuscola, ma una invece

inizia con la maiuscola. Anche errori così microscopici possono trasmettere

agli utenti un senso di scarsa professionalità o affidabilità.

HOMEPAGE USABILITY


21) Non etichettare un’area della pagina ben definita, se il suo contenuto

è sufficientemente auto-esplicativo.

Ad esempio, generalmente non è necessario etichettare l’area dei titoli delle

news del giorno: la forma, le dimensioni e la posizione di questo elemento ne

indicano già il ruolo.

Ha più senso, invece, etichettare un box del “Prodotto della settimana”.

22) Evitare le categorie che contengono un solo elemento e gli elenchi che

contengono un solo punto.

Una categoria con un solo elemento è un controsenso.

23) Curare gli allineamenti e gli a capo per salvaguardare la leggibilità dei

testi.

Vari fattori possono rendere imprevedibile il punto in cui il testo va a capo: la

risoluzione video dell’utente, le dimensioni della finestra, la versione del

browser e via dicendo. Porre attenzione.

HOMEPAGE USABILITY


25) Se si utilizza una sigla, un’abbreviazione o un acronimo, alla prima

occorrenza scriverne il significato per esteso, seguito dalla forma

abbreviata.

Ad esempio, una società che fornisce applicazioni software per portali e

propone una stazione ditoriale denominandola subito CMS senza specificare il

significato Content Management System.

26) Evitare i punti esclamativi. I punti esclamativi non sono ben accetti

nella scrittura professionale, specie in una home page.

Risultano caotici e chiassosi: non si dove alzare la voce con i propri utenti.

Se si viola questa linea-guida anche solo una volta, predisporsi a violarla più

volte all’interno della home page, perché tutti i contenuti sono importanti.

HOMEPAGE USABILITY


27) Ricorrere il meno possibile (meglio mai) all’uso del “tutto

maiuscolo”come stile di formattazione.

Le parole scritte tutte in maiuscolo sono più faticose da leggere rispetto al

misto di maiuscole e minuscole, e fanno percepire la pagina come pesante e

chiassosa. “COME CONTATTARCI” è meno leggibile di “Come contattarci”.

28) Non abusare di spaziatura e punteggiatura a scopo di enfasi.

Non scrivere L I B R I oppure L.I.B.R.I. Mai usare la punteggiatura ion modo

non standard.

HOMEPAGE USABILITY

CONTENUTI: ESEMPLIFICAZIONE

> Mostrare nella home page qualche esempio dei contenuti del sito è di

grande aiuto per gli utenti.

> Gli esempi aiutano gli utenti a navigare con sicurezza, perché illustrano ciò

che si trova dietro i nomi astratti delle categorie. Gli utenti imparano a

distinguere agevolmente le varie categorie, senza essere costretti a cliccare

su ciascuna di esse per vedere cosa contiene.

29) Per descrivere il contenuto utilizzare esempi più che descrizioni.

30) Associare a ogni esempio un link che porti a una pagina di dettagli su

quell’esempio, e non a una pagina della categoria generale di cui l’esempio

fa parte.

Inviare direttamente al cio’ che si cerca. Ad esempio, se è pubblicata la

notizia del film (con tanto di foto e didascalia) presentato al festival di

Cannes, il link dovrà portare alla sua scheda, non sul festival in generale.

HOMEPAGE USABILITY

CONTENUTI: ARCHIVIAZIONE E ACCESSO

> Può capitare che si abbiano sia utenti che tornano spesso al sito, sia nuovi

utenti che si interessano a ciò che è stato pubblicato prima che di trovarlo.

> Conviene perciò predisporre un archivio dei contenuti che progressivamente

vengono rimossi dalla home page.

HOMEPAGE USABILITY

CONTENUTI: ARCHIVIAZIONE E ACCESSO

33) Facilitare l’accesso a tutti i contenuti recenti della home page,

presentandone un elenco e costruendone un apposito archivio.

“Recenti” può significare pubblicati nell’ultima settimana o nell’ultimo mese,

dipende.

HOMEPAGE USABILITY

> I link, ovviamente, non appaiono soltanto nella home page, ma poiché la

home page è la porta di ingresso del sito i link tendono a essere molto più

numerosi qui che nelle altre pagine.

34) Differenziare percettivamente i link e facilitatene la visioe a colpo

d’occhio.

Il testo di un link deve iniziare con una parola significativa. Il testo dei link

deve inoltre essere il più breve e specifico possibile. Non includere

informazioni ridondanti.

35) Non usare come testo dei link istruzioni generiche, del tipo “Clicca

qui”.

Il testo del link deve essere significativo ed esplicitare agli utenti cosa accade

facendo clic. Ciò favorisce sensibilmente lo scanning della pagina. Ad

esempio, non “Cliccate qui per il servizio Xyz” ma semplicemente “Servizio

Xyz”.

HOMEPAGE USABILITY LINK

36) Non usare link generici come “Continua…” alla fine di un elenco

Piuttosto, esplicitare agli utenti “cosa” continua (es. “Altre recensioni”).

37) Distinguere i link visitati e non visitati con appositi colori.

Classico blu ai link non visitati e scegliete un altro colore, meno saturo, per

quelli visitati, mantenendo comunque una buona leggebilità.

38) Non usare la parola “link”o “collegamenti”per definire i link nella

home page: mostrate che si tratta di link tramite la sottolineatura e il

colore blu.

Sarebbe come chiamare “Parole” una categoria di argomenti in una

pubblicazione stampata.

Il nome della categoria deve rispecchiare il tipo di destinazione dei link.


39) Assicurarsi che ogni link indichi esplicitamente la propria azione, a

meno che non si tratti di un puro collegamento a un’altra pagina.

Link che rimandano a un documento PDF, lanciano un player audio o video,

aprono la finestra di un messaggio e-mail o altro ancora; deve essere

immediatamente chiaro cosa accade se si fa clic sul link.

< Scarica la scheda prodotto

< Leggi l’informativa


http://www.onecube.it/scheda_brick.pdf

HOMEPAGE USABILITY NAVIGAZIONE

> Lo scopo primario della home page è facilitare la navigazione nel sito,

perciò è importantissimo che gli utenti possano trovare senza fatica l’area

degli strumenti di navigazione, distinguere le opzioni a loro disposizione e

intuire cosa corrisponde ai vari link.

> Gli utenti non devono essere costretti a cliccare su un elemento per capire

di cosa si tratta.

40) Collocare l’area di navigazione primaria in una posizione molto

evidente, preferibilmente adiacente al corpo principale della pagina.

Evitare di posizionare una barra di navigazione orizzontale in alto, sopra

elementi grafici come linee e banner: gli utenti spesso ignorano tutto ciò che

si trova dentro o sopra un’area rettangolare in cima alla pagina ( “cecità

selettiva ai banner”, riscontrata in innumerevoli test)


41) Raggruppare gli elementi dell’area di navigazione secondo criteri di

omogeneità.

L’accorpamento aiuta gli utenti a differenziare categorie simili o correlate e a

percepire l’ampiezza della gamma di prodotti o contenuti offerti. Ad esempio,

in un sito di e-commerce tutte le voci relative agli acquisti, come carrello

della spesa, account cliente e customer service, dovrebbero essere raccolte in

una stessa area.

42) Non creare molteplici aree di navigazione per lo stesso tipo di link.

Evitare ad esempio di creare più aree per le news o più aree per le categorie

di prodotti.

43) Non rendere attivo il link alla home che appare nella home page

stessa.

Se nella barra di navigazione è incluso un link “Home”, questo dovrebbe

essere inattivo, non cliccabile, quando ci si trova nella home page.


44) Non adottare termini troppo originali per etichettare le opzioni e

categorie di link.

Ad esempio Accenture utilizza il neologismo “uCommerce” per definire il suo

approccio all’e-commerce, ma nella barra di navigazione adotta la più

familiare voce “eCommerce”, costringendo a pensare.

45) Se il sito include una funzione di carrello della spesa, includere un

apposito link nella home page.

Ogni utente può controllare i prodotti che ha selezionato, senza dover

navigare faticosamente alla cassa virtuale prima di concludere l’acquisto.

46) Utilizzare icone per la navigazione soltanto se possono effettivamente

aiutare gli utenti a identificare con immediatezza una classe di

elementi,come novità,offerte,video eccetera.

Non utilizzare icone se i semplici link testuali possono funzionare bene allo

scopo. Se si pensa di dover ricorrere alle icone, è probabile che il sistema di

navigazione non risulti facilmente riconoscibile o intuitivo per gli utenti.


> Gli strumenti di ricerca sono una delle componenti più importanti della

home page, ed è essenziale che gli utenti possano individuarli al volo e usarli

senza fatica.

> Rendere gli strumenti di ricerca in home page visibili, grandi e semplici.

47) Offrire agli utenti una casella per la ricerca rapida direttamente nella

home page, anziché presentare un link a una pagina a parte.

Gli utenti ormai si aspettano una casella di ricerca con un pulsante accanto:

se non li trovano, generalmente danno per scontato che il sito non offra

funzioni di ricerca.

48) La casella deve essere ampia a sufficienza perché gli utenti possano

comodamente scrivere e controllare le parole-chiave da cercare.

La casella deve avere una larghezza pari ad almeno 25-30 caratteri.

HOMEPAGE USABILITY RICERCA

49) Non è necessario etichettare il box di ricerca con un titolo: piuttosto, a

destra della casella di input collocate il pulsante “Cerca”.

L’area di ricerca deve essere posizionata in cima al corpo della pagina (ma

sotto l’eventuale area banner).

50) A meno che la ricerca avanzata sia la norma del vostro sito, includere

in home page soltanto le funzioni di ricerca semplice, con un eventuale

link alla pagina della ricerca avanzata e/o dei suggerimenti per le ricerche,

se esistenti.

51) La ricerca lanciata dalla home page deve coprire per default tutto il

sito.

Gli utenti presuppongono sempre che la ricerca venga svolta su tutto il sito, a

meno di esplicite avvertenze in contrario, e se non trovano ciò che cercano

ne traggono la conclusione che il sito non contiene tale elemento.


49) Non è necessario etichettare il box di ricerca con un titolo: piuttosto, a destra

della casella di input collocate il pulsante “Cerca”.

L’area di ricerca deve essere posizionata in cima al corpo della pagina (ma sotto

l’eventuale area banner).

50) A meno che la ricerca avanzata sia la norma del sito, includere soltanto le

funzioni di ricerca semplice, con un eventuale link alla pagina della ricerca

avanzata e/o dei suggerimenti per le ricerche, se esistenti.

51) La ricerca lanciata dalla home page deve coprire di base tutto il sito.

Gli utenti presuppongono sempre che la ricerca venga svolta su tutto il sito, a meno di

esplicite avvertenze in contrario, e se non trovano ciò che cercano ne traggono la

conclusione che il sito non contiene tale elemento.

52) Non offrire un’opzione “Cerca nel Web” insieme al motore di ricerca del vostro

sito.

Per le ricerche generiche nel Web gli utenti hanno già i loro motori di ricerca preferiti.


> Presentare in home page certi strumenti interattivi o scorciatoie per

determinati task è un’ottima soluzione per evidenziare le funzionalità del sito

e rispondere più rapidamente alle esigenze degli utenti.

> Il punto chiave è scegliere oculatamente quali task mettere in risalto nella

home page.

53) Nella home page offrire agli utenti un accesso diretto ai task ad alta

priorità.

Gli strumenti della home page devono consentire agli utenti di interagire con

immediatezza.

Se possibile, cercate di adottare un modello “zero-click” che fornisca a

ciascun utente i dati opportuni in modo automatico.

Questo genere di funzione è tipico dei siti che riconoscono l’utente e

supportano la personalizzazione della pagina: la home page può visualizzare

automaticamente informazioni prioritarie per l’utente, come il saldo del suo

estratto conto in un sito di home banking.

HOMEPAGE USABILITY STRUMENTI E SCORCIATOIE

54) Non includere strumenti che non siano correlati ai task tipici del sito.

Alcuni siti cadono in un errore grossolano, includendo nella home page certi

strumenti solo perché è possibile farlo, e non perché abbia senso. Ad esempio,

è inutile offrire in home page le previsioni del tempo se il sito non ha niente a

che fare con le news e la meteorologia.

55) Non offrire nella home page strumenti che replichino funzioni del

browser, ad esempio l’impostazione come pagina iniziale o la

memorizzazione di un bookmark.

HOMEPAGE USABILITY STRUMENTI E SCORCIATOIE

> Se le immagini sono utilizzate in modo mirato per illustrare i contenuti,

l’efficacia della home page se ne avvantaggia indiscutibilmente.

> Il ricorso alle immagini deve quindi essere attento e ben dosato, inclusa

l’ottimizzazione per il Web.

> Le animazioni possono valorizzare i contenuti online, ma di solito è meglio

riservarle a contenuti più complessi di quelli ospitati in home page.

56) Utilizzate elementi grafici solo per illustrare contenuti reali, non a

scopo decorativo.

La gente è istintivamente attratta dalle immagini: se le vostre immagini sono

puramente decorative non fanno che distrarre gli utenti dai contenuti

significativi.

HOMEPAGE USABILITY IMMAGINI E ANIMAZIONI

57) Etichettate le illustrazioni e le fotografie, se il loro senso non è chiaro

in base al contesto o al testo di accompagnamento.

Se il testo e l’immagine hanno un diverso livello di specificità, è una buona

idea spiegare l’immagine con una didascalia se serve a chiarire come si

rapporta alla categoria generale. Viceversa, se un’immagine è utilizzata a

scopo puramente iconico, per facilitare lo scanning del testo, è superfluo

qualificarla.

58) Ottimizzare foto,disegni e diagrammi in rapporto alle dimensioni di

visualizzazione.

Le immagini troppo dettagliate appesantiscono senza incrementare le

informazioni. Piuttosto che rimpicciolire un’immagine troppo grande, è meglio

ritagliarla.


59) Evitare le immagini di sfondo.

Le immagini di sfondo creano disordine e diminuiscono la leggibilità dei testi.

Se un’immagine è interessante, sullo sfondo risalta troppo poco; se non lo è,

meglio farne a meno. In generale le immagini utilizzate come sfondo per i

testi sono puramente decorative e non aggiungono valore alla comunicazione.

60) Non ricorrere ad animazioni solo per attirare l’attenzione su un

elemento della home page.

Le animazioni raramente vanno utilizzate in home page perché distraggono

dagli altri contenuti. Le animazioni assorbono l’attenzione dell’utente e

andrebbero visualizzate a sé stanti, non in una home page in cui vari elementi

richiedono attenzione.


61) Non animare mai un elemento critico della home page, come il logo,la

tagline o il titolo principale.

Gli elementi animati vengono per lo più ignorati dagli utenti in quanto

sembrano pubblicità, e per giunta sono di difficile lettura. Le animazioni

tendono ad avere un effetto ipnotico sugli spettatori: gli utenti possono

restare a fissarle senza in realtà trattenere adeguatamente le informazioni.

62) Lasciare che siano gli utenti a scegliere se visualizzare una

introduzione animata all’ingresso del sito: non imponetela come default.

Se proprio si vuole imporre il caricamento automatico di un’animazione,

almeno offrire all’utente un’opzione semplice ed evidente per interromperla

(skip intro) e comunque dare un’idea di cosa si sta facendo (loading) e dei

tempi di caricamento ( % loading).


Titolo originale: Web Redesign: Workflow that works. · Riesce a rendere accattivante un tema...

Documents

Transcript of Titolo originale: Web Redesign: Workflow that works. · Riesce a rendere accattivante un tema...