benvenuti in questo sito!

tecnica web design
f Simona De Robertis • [email protected] e Silvia Burigana • [email protected]
benvenuti in questo sito!
Prima della home
page viene la
welcome page,
la porta d’ingresso
che accoglie
il visitatore in un sito
e introduce
a un determinato
progetto.
Così diventa
un accessorio
vincente
L’
attributo welcome è
auto-esplicativo, ma
un messaggio di benvenuto è un motivo
sufficiente per creare aree che precedono l’ingresso al sito?
La maggior parte delle welcome page, infatti, si traducono in una schermata che accoglie l’utente anticipando alcuni elementi creativi e di contenuto. Molti le definiscono – connotandole negativamente – semplici copertine e le considerano inutili, incapaci di apportare un reale valore aggiunto al progetto. In realtà, le welcome page possono addirittura migliorare un sito, dando un senso di maggiore completezza formale. Come dimostrano alcune delle pagine di cui
parleremo.
Copertine o strumenti?
Due differenti welcome page: la welcome
generale, che consente all’utente
di scegliere il paese e la lingua di riferimento, e
la welcome di nicchia, che consente l’accesso
a uno specifico prodotto di Nike
Sebbene in molti casi siano mal utilizzate e propongano agli utenti poco più della scelta fra le differenti lingue di fruizione dei contenuti, le welcome page assolvono anche l’importante compito di introdurre i navigatori all’interno del Web. Ciò accade,
per esempio, quando è richiesto ai visitatori di compiere alcune scelte iniziali che vincolano la velocità e le fun-
zionalità del sito
stesso (l’opzione Flash o Html).
In questi casi, la pagina w e l c o m e
propone differenti modalità di navigazione, spiegandone limiti e vincoli e fornendo strumenti accessori e indicazioni utili per una corretta visualizzazione del sito (i link per lo scaricamento dei plug-in necessari, la risoluzione monitor richiesta, la compatibilità dei browser ecc.). In alcuni casi, la welcome page è una pagina realizzata a posteriori, utile alla risoluzione di problematiche che non
sono emerse in una prima fase del
progetto. Ciò accade, per esempio,
quando il sito è realizzato successivamente in differenti lingue o quando lo stesso si sdoppia in ambienti
dedicati a particolari prodotti o servizi. Questa situazione si verifica di frequente, soprattutto nel caso di grandi
aziende che, a partire da una presenza
in Rete importante ma unitaria, hanno
poi sviluppato una strategia Web più
complessa e articolata. È questo il caso del sito internazionale della Nike
[www.nike.com], che richiede almeno
due clic prima di approdare a una vera home page.
[www.nike.com]
82
Internet News febbraio 2003
Che cosa
deve contenere?
I contenuti sono strettamente correlati agli obiettivi
(funzionali/emozionali) della pagina stessa. Nel caso prevalga la componente emozionale, sono solitamente utilizzate immagini simboliche, animazioni evocative o payoff suggestivi, che richiamano i valori del brand e
creano un coinvolgimento immediato
da parte dei visitatori. Nella maggior
parte dei casi, tuttavia, la pura componente emotiva non giustifica la presenza di una pagina introduttiva; quest’ultima, infatti, deve necessariamente offrire contenuti identificativi che siano
d’immediata utilità per il visitatore (i
dati aziendali, l’indirizzo e-mail, le anticipazioni sui contenuti ecc.). Le pagine
welcome più funzionali sono sostanzialmente zone di passaggio che offrono un aiuto concreto alla navigazione e
si rivelano pagine help, utili alla corretta
fruizione del contesto online. Il sito di
Versace [www.versace.it], per esempio,
presenta una welcome classica, capace
di offrire tutte le informazioni – funzionali e morfologiche – essenziali.
Le welcome page in Rete
Le pagine di benvenuto stanno gradualmente cambiando e assumendo
ruoli e funzioni sempre più differenziate. Sebbene sia difficile effettuare
una classificazione, esistono comunque alcuni elementi ricorrenti, che
consentono di catalogarle attraverso
una più o meno specifica funzione.
g I biglietti da visita sono pagine che sintetizzano il linguaggio,
lo stile e le informazioni essenziali
sull’azienda (chi è, cosa fa, dove si
trova, come contattarla).
g Gli inviti descrivono il brand sinte-
La welcome di
Fornarina è una
welcome completa
costituita da
elementi
di comunicazione
evocativi
e da aspetti
contenutistici
e informativi
[www.fornarina.it]
[www.versace.it]
Gli elementi che compongono la welcome di Versace sono:
il messaggio di benvenuto, il marchio e i codici caratteristici
dell’immagine aziendale, la descrizione delle tecnologie utilizzate
e l’opzione di scelta fra la navigazione in ambiente Flash o Html
ticamente e mirano, invece, a comunicare direttamente con i propri visitatori attraverso un messaggio che li convinca esplicitamente a entrare. La welcome page di Avon [www.avon.it] presenta un’assoluta semplicità stilistica,
che riprende il marchio aziendale
e concentra tutta l’attenzione sul
messaggio rivolto alle utenti, alle
quali viene dato direttamente del
tu e viene offerta l’opzione di accesso diretto o di passaggio attraverso la intro animata.
g Le porte d’ingresso sono pagine
di log in, che dirottano gli utenti all’interno di aree specifiche, in funzione della loro categoria di appartenenza. In questo modo, la welcome incentiva la registrazione da
parte dei visitatori; il messaggio che
viene implicitamente veicolato, infatti, corrisponde a qualcosa del tipo: «se non vuoi perderti il meglio devi registrarti!». La welcome di Ferrari owners [www.owners.ferrari.com] è
appunto una zona di passaggio
a tre differenti livelli di accesso ai
contenuti; allo stesso tempo, riassume tutto il sito anticipandone i
contenuti. È una welcome fortemente funzionale, anche se graficamente curata e in linea con
l’immagine del brand.
Smart Cabrio offre una vasta
scelta in merito ai Paesi e
alle lingue nelle quali poter
visualizzare e fruire
delle informazioni
contenute nel sito: un chiaro
messaggio circa l’estensione
dell’iniziativa commerciale
e di comunicazione Web
FUNZIONE VS. EMOZIONE
Da un estremo all’altro
In Rete si possono rintracciare due fondamentali categorie
di welcome page, associate a specifici obiettivi: gli
obiettivi funzionali e gli obiettivi emozionali.
[www.smartcabrio.com]
g Le copertine riassuntive integrano gli elementi di comunicazione caratteristici del brand ai
contenuti del sito e si connotano
quali pagine creatrici di atmosfera e suggestione. L’effetto a sorpresa che generalmente ne scaturisce invoglia gli utenti ad aprire e sfogliare il sito, oppure anticipa i contenuti salienti e offre piccoli indizi sugli elementi di navigazione.
g Le istruzioni per l’uso sono le pagine welcome più funzionali: illustrano agli utenti la differenza
tra la versione Html e la versione
Flash, offrono istruzioni circa l’ottimizzazione della risoluzione video, rendono visibili i link per lo
scaricamento dei plug-in necessari alla visualizzazione dei contributi informativi del sito e così via. Le
pagine di benvenuto puramente
funzionali presentano indicazioni
essenziali e fondamentali per una
corretta navigazione dell’ambiente Web, ma non necessariamente
rinunciano a dettagli grafici evocativi e pregnanti. In Juxt interactive [www.juxtinteractive.com],
infatti, una complessa e suggestiva cornice grafica focalizza l’attenzione sulle scelte di fruizione
del sito da parte degli utenti.
g Attraverso quale lingua volete
fruire dei contenuti del sito?
Siete professionisti o neofiti?
Questi sono solo alcuni esempi di
scelte multiple che una welcome
page può chiedervi di affrontare.
Spesso tale opzione può essere
offerta direttamente all’interno
della home page (per esempio attraverso un accesso diretto al sito
sviluppato in lingua italiana e poi
segnalando la presenza della versione inglese). In alcuni casi, tuttavia, la vastità delle opzioni offerte
ai visitatori, rende la pagina welcome un passaggio inevitabile.
Internet News febbraio 2003
The Remedi Project [www.theremediproject.com]
ci accoglie con un background nero e omogeneo, un
titolo e un testo introduttivo, volto a definirne vincoli
tecnici e modalità di navigazione. Si tratta di una pagina
welcome tipicamente funzionale, che niente ha a che
vedere con il concetto di copertina.
Girlshop [www.girlshop.com] ci invita a entrare
con una pagina puramente grafica ed emozionale,
che abbandona ogni pretesa funzionale e diventa
rappresentativa dello spirito del sito, nelle forme e nei
contenuti.
83
tecnica web design
E ora vediamo come …
La pagina welcome dev’essere
prevista all’interno della mappa
di navigazione del sito sin dalle
fasi iniziali del progetto, anche
se la sua interfaccia grafica
è solitamente realizzata e
decisa successivamente alla
definizione puntuale della
home page.
1
1
2
… strutturare
le aree grafiche
A partire dalla home page definitiva
e in funzione dei contenuti previsti
all’interno della welcome page e
dei suoi specifici obiettivi, dovranno
essere definite le aree grafiche che
frammentano lo spazio, all’interno
delle quali andranno posizionati
gli elementi grafici (il logo, i colori
caratteristici e di background, le
decorazioni grafiche caratteristiche
ecc.) che caratterizzano tutte le
pagine interne del sito.
3
2
… inserire i testi previsti
Successivamente alla definizione
delle aree grafiche e dei relativi
4
3
… inserire
gli elementi
fotografici e grafici
grazie alle linee guida che
delimitano le differenti aree
di contenuto, l’inserimento
e il ridimensionamento delle
eventuali immagini fotografiche
potrà essere effettuato in modo
rapido e preciso, semplicemente
Statiche o animate?
[www.juxtinteractive.com]
L’attenzione degli utenti converge sulle indicazioni di servizio e sulla scelta
fra differenti opzioni di esplorazione del sito, grazie ad elementi creativi ed
emozionali coerenti e funzionali al sito
84
elementi di continuità visuale,
occorre posizionare i differenti
contenuti previsti, simulando la
visualizzazione Html attraverso gli
strumenti che un editor di elementi
grafici come Photoshop mette a
disposizione. Grazie all’uso delle
linee guida calamitate, è possibile
comporre il blocco di testo e
posizionarlo al centro dell’area
grafica in modo semplice e veloce,
trascinando il pacchetto testuale
proprio come se si trattasse di un
oggetto grafico.
Anche in questo caso, le
componenti testuali devono
necessariamente rispettare
font, colori RGB e quant’altro
contraddistingua le pagine interne
del sito, al fine di garantire un visual
omogeneo e coerente.
Anche la welcome page necessita di
strategie progettuali mirate, proprio
come qualsiasi altra pagina Web. Se
pensata per un target Internet evoluto – per il quale anche la pagina di
benvenuto deve essere di indiscusso appeal – necessita di un trattamento grafico e di effetti che possano incentivare i visitatori ad approfondire l’esplorazione del sito. Vale
quindi la pena progettare una welcome page animata, composta da
un box in Flash, all’interno del quale possano scorrere immagini e parole-chiave evocative. Questa soluzione, tuttavia, non è congeniale
per tutti quei siti che, al contrario,
Internet News febbraio 2003
posizionandosi sul livello che
contiene la foto e selezionando
la funzione Scala (Modifica >
Trasforma > Scala) dal menu
principale di Photoshop. Sarà
quindi possibile ridimensionare
l’immagine liberamente
(posizionando i suoi estremi
esattamente sulle linee guida)
oppure in scala, tenendo premuto
il pulsante Maiuscolo della tastiera
durante il ridimensionamento.
4
… tagliare
ed esportare
gli elementi grafici
Grazie alla creazione di un file
Photoshop estremamente preciso
nelle linee guida tracciate per
delimitare le differenti aree di
contenuto, sarà quindi possibile
tagliare gli elementi grafici (con
lo strumento ritaglia) in modo
veloce e preciso. Con File > Salva
per Web , inoltre, è possibile
attivare il pannello di controllo
per l’esportazione delle immagini,
che consente di visualizzare
contemporaneamente la qualità
dell’immagine impostata a
differenti opzioni di esportazione.
si rivolgono a una fascia di utenza
meno evoluta che magari non possiede di default i plug-in necessari o
non ha connessioni veloci. In questo
caso è possibile ricorrere a brevissime animazioni gif che, tuttavia, non
sempre sono congeniali all’effetto
che si desidera ottenere.
Le caratteristiche intrinseche delle
gif animate, infatti, comportano una
pesantezza dell’oggetto anche per
semplici effetti che, spesso e volentieri, nulla aggiungono alla pagina progettata. In quest’ultimo caso, quindi,
è molto meglio progettare una welcome statica, dal design accattivante, ma estremamente funzionale agli
scopi e al target per cui è pensata. z