DAL PRODOTTO AL PRODOTTO
L’altra faccia di internet. Analisi semiotica di alcuni siti di note Web-Agency
di Francesco TerziniISIA Firenze
Corso di semiotica
Doc. M.Deni
a.a. 2002/2003
INTRODUZIONE
Qual è la ragione per cui navighiamo su internet e visitiamo la maggior parte dei siti? Quasi sicuramente alla ricerca di contenuti, informazioni. Quale è allora la ragione per cui visitare il sito di una Web-agency? Alla ricerca della forma?
Lo spunto dal quale è nata la seguente analisi è stato dei più classici, una di quelle situazioni in cui ci si imbatte in qualcosa e si nota subito il nostro interesse verso questa. Navigando nel Web alla ricerca di un modo per passare un po’ del mio tempo libero (poco per dire la verità) ho aperto la pagina del sito di una Web-agency italiana che ho subito trovato interessante, quindi ho colto l’occasione per confrontarlo con altri siti di alcuni Web designers reperibili in rete. Soffermandomi su più di uno di questi portali ho pensato a come fosse ambigua e per qualche verso assurda la relazione dei creativi del Web o Web-designers, che si voglia dire, con la rete e in particolare nel momento in cui questi si accingono alla realizzazione del proprio sito. Infatti ho pensato come, oltre ad esser un ottima vetrina, il sito per una Web agency possa contenere una buona dose di rischio, in quanto il designer scopre le proprie carte spogliandosi di ogni maschera inganno o truffa nei confronti dell’utente e del cliente, dovendogli quindi mostrare il meglio di quello che può realizzare, o comunque la cosa a livello di usabilità e di comunicazione il più efficace possibile.
A questa prima riflessione ne è seguita un’altra che estremizzando la si può definire con questi termini: “Come comunicare al meglio un niente?”, vengo a spiegare: il designer del Web deve pubblicizzare se stesso quindi il suo lavoro, ma se il suo lavoro è fare siti egli deve comunicare con la sua Home page la bravura nel far siti, così in un certo senso deve comunicare bene ma non ha niente da comunicare, se non lavori già sviluppati (quindi siti), e allora quale sito meglio del suo? In un certo senso il creativo del Web, quando crea il suo sito deve comunicare il modo di comunicare, la comunicazione. L’offerta dello sviluppatore è quella di proporre al cliente un servizio che gli farà aumentare gli introiti; quindi il Web-designer deve vendere al venditore, in un certo senso come rubare al ladro.
E’ appunto da questa complessa riflessione che è scaturita l’idea di capire come attualmente le Web-agency si comunicano sulla rete, come si rapportano al problema dell’usabilità, cercare attraverso un’analisi semiotica di capire quali siano le caratteristiche più comuni a questi siti e perché, e quali le varianti particolari più o meno funzionali, tutto questo nel tentativo di definire le soluzioni più adatte a migliorare questo servizio in continua evoluzione che è ancora per molte persone un mezzo non troppo affidabile e confidenziale.
Per integrare il contenuto si è ritenuto importante includere nell’analisi il vorticoso dibattito tra i sostenitori della Web usability ed i loro oppositori, cercando di farne una sintesi utile allo scopo precedentemente illustrato.
Per la ricerca si è ritenuta sufficiente l’analisi di due siti, opportunamente integrata con mille degli esempi che si possono trovare nel Web. L’analisi comporta una prima parte di descrizione al dettaglio dell’interfaccia dei due portali, descrizione che potrà sembrare noiosa tuttavia necessaria per giungere a delle conclusioni di carattere generale. Nelle conclusioni si rileveranno poi delle notevoli differenze nei metodi di navigazione, nei contenuti e nelle “ambientazioni” riscontrati nelle due interfacce.
1. COMPONENTE CONFIGURATIVA1.1 POINTERSOFT.COM
Il sito si presenta nella comune finestra del software di navigazione (Internet Explorer; Netscape) ma la zona di interazione è racchiusa in una zona delimitata da una cornice di medie dimensioni a sfondo bianco su sfondo bianco.1.1.1 Loading
La schermata del “loading” è composta da dei quadrati disposti in fila nella zona d’interazione i quali sono attraversati orizzontalmente da una linea che avanza durante la fase di caricamento. Spostando il cursore sopra uno qualsiasi di questi quadrati si nota che questo sale verso l’alto andando a scontrare la cornice della finestra, raggiunta la quale i suoi quattro lati si separano e vanno a scomparire; la scomparsa di questo quadrato lascia conseguentemente il posto ad un altro quadrato uguale. Alla fine del caricamento i quadrati “esplodono” tutti e scompaiono lasciando lo spazio alla schermata desiderata, inizialmente alla home page. Un loading interattivo? Cosa c’è di più noioso di aspettare il caricamento di una pagina!1.1.2 Home page
La zona d’interazione racchiude sulla sinistra delle icone che se si raggiungono con il cursore rivelano di essere dei punti di intervento (Per approfondimento sul concetto di Punti d’intervento cfr. Zinna 2002a ; 2002b ; Deni 2002) che poi scopriremo (per la precisione due premi per il sito ed un servizio straordinario della stessa agenzia). Centralmente c’è una freccia in tutto uguale a quella del comune cursore del mouse ma rappresentata tridimensionalmente come poggiata sul lato superiore di un piedistallo a base quadrata. La freccia lampeggia e sui lati del “piedistallo” è scritto, su quello sinistro “welcome to”, su quello destro “POINTERLAND”, probabile allusione ad un mondo virtuale Pointersoft.
Al di fuori della cornice, ma direttamente adiacenti in basso a sinistra, ci sono cinque cubetti allineati orizzontalmente, spostando il cursore sui quali questi cominciano a ruotare su se stessi in modo regolare ma indipendente l’uno dall’altro. Quando si ferma il cursore su uno qualsiasi di questi sotto allo stesso compare la scritta del nome del collegamento. Allineati sulla destra un cubetto uguale, un dischetto ed un’immagine che raffigura il lettore CD del computer. Spostando il cursore sul cubetto questo apre la sua faccia superiore facendo uscire la scritta news all’interno di un fumetto verde; il dischetto ruota indipendentemente dal contatto con il cursore, che quando avviene permette l’apparizione della scritta download sotto il dischetto; il lettore CD accende e spegne ad intermittenza i lead di caricamento, sotto questo appare comunque la scritta sound on/off.
Cliccando sulla freccia questa si solleva e, continuando a lampeggiare, mentre l’ambiente si trasforma in una sorta di città, questa si muove “portando” l’utente al menu di navigazione o main page.
1.1.3 Punti d’intervento
Già nella prima pagina i punti d’intervento sono 12 anche se suddivisi come interni alla cornice (4) ed esterni (8). Quelli esterni rimarranno gli stessi durante tutto il percorso del sito, mentre internamente accadrà qualcosa di differente, il tipo di feedback del menu che compare sotto la cornice (cubetti, dischetto e lettore CD) è già stato descritto ma, non essendo state precisate in precedenza si elencano le didascalie ai punti di intervento (cubetti) in basso a sinistra, che sono in ordine: home, solutions, multimedia, internet e company. Internamente vi sono i quattro punti di intervento dei quali il principale è la freccia che lampeggia in modo molto evidente. Gli altri tre, che sono quelli dei premi, non sono forse volutamente progettati per creare un feedback.
Essendoci così tanti punti di intervento ci si chiede dove sia portato a cliccare l’utente medio; secondo una stima, che ho fatto sulla base di circa cinquanta interviste, il 90% degli utenti clicca sulla freccia (unico elemento indipendentemente attivo nella composizione), che in effetti è il modo attraverso il quale l’utente può interpretare coerentemente il viaggio attraverso “pointerland”.1.1.4 Main page
Una volta arrivata a destinazione, la freccia si poggia su quello che sembra essere il tetto di un grattacielo. L’ambiente è descritto con un unico colore oltre al bianco dello sfondo, il grigio nelle sue tonalità più chiare. In alto a destra compare la scritta “POINTERSOFT internet & multimedia solutions” e dopo poco che la freccia si è posata sul tetto compaiono dal basso quattro cubi gialli in fila leggermente spostati sulla sinistra e sulla stessa direzione inclinati. A questo punto, visto che la freccia ha smesso di lampeggiare e che i cubi si muovono come se fluttuassero nell’aria fra un grattacelo ed un altro, oltre ad essere di un colore che risalta particolarmente sul grigio, il giallo, si comincia a riconoscere nei cubi degli elementi attivi quindi punti di intervento (come in effetti sono) che si vanno ad aggiungere a quelli precedentemente rilevati all’esterno della cornice e che come già detto rimarranno per tutte le pagine anche durante il loading e le transizioni da una schermata all’altra. Spostando il cursore su uno qualsiasi dei cubi gialli si nota che questo, come gli altri, cambierà di stato con un effetto di spostamento verso l’interno della pagina quindi verso il basso o meglio il suolo del contesto dato che la città è vista in questo caso dall’alto. Inoltre compare una finestra sulla destra la quale “aprendosi” orizzontalmente come se fosse una tendina, mostra il nome del collegamento ed un breve testo (dalle sei alle dodici righe) che descrive il contenuto della pagina collegata al bottone. Se si muove il cursore in uno spazio vuoto la finestra scompare e torna tutto come all’inizio. Se invece si clicca su uno dei cubi questi si rimetteranno tutti in posizione iniziale e scompariranno verso l’alto della cornice come a proseguire il percorso d’entrata, quello avvenuto alla comparsa.
Come già detto nella descrizione del menu esterno alla cornice in basso a sinistra si confermano come quattro le sezioni del sito: solutions, mutimedia, internet e company; escludendo “home” che implica il ritorno alla home page probabilmente meno evidenziato nella realizzazione dell’interfaccia al fine di “costringere” l’utente ad affrontare un percorso tutto sommato libero nella scelta delle quattro opzioni.
1.1.5 Solutions
La sezione solutions si raggiunge comunque compiendo questa sorta di viaggio guidato nella città. Una volta arrivati ci troviamo sulla destra un grattacielo visto dal basso. In alto a destra compaiono nuovamente i quattro cubi direzionati verso il basso a sinistra. Questi si fermano sempre in fila leggermente sulla sinistra della composizione e come già appreso i cubi sono punti di intervento. Alla sovrapposizione del cursore con uno qualsiasi dei cubi questo va verso l’alto ed essendo cambiato l’ambiente probabilmente il testo apparirà in una posizione differente. Infatti questo si presenta nella solita finestra che si apre a tendina ed è come posizionato sulla facciata del grattacielo, quasi ad imitare uno di quei grossi cartelloni pubblicitari che si vedono nelle città affissi alle fiancate dei palazzi. La differenza rispetto alle tendine della main page è che titolo e testo contenuti nella finestra non sono uguali perché questi sono volti ad una più specifica descrizione del servizio. Questa volta il titolo del collegamento, non potendo essere messo a titolo del testo, si trova in una piccola finestra con animazione a tendina che compare sopra il cubetto una volta spostatoci il cursore.1.1.6 Internet
La schermata, che si raggiunge con il solito viaggio nella città, presenta circa tre tetti di palazzi visti dall’alto sulla sinistra, su uno di questi appare la solita freccia posta su di un rialzo centrale. Accanto al palazzo con la freccia, c’è sulla destra una strada sulla quale appaiono quindici nomi di aziende. Alla destra della strada altri palazzi su uno dei quali (in alto a destra della cornice) fluttuano i quattro cubetti, adesso un po’ più piccoli. Spostando il cursore su uno qualsiasi dei nomi delle aziende, questo da grigio diventa arancione, cambiamento che lo identifica come punto di intervento; se lo si clicca appaiono due oggetti tridimensionali che ricordano le parentesi quadre gialle (quelle delle tendine di testo), che abbracciano il rialzo del grattacielo con la freccia, andando parzialmente a colmare il vuoto creato dal dislivello. Sul piano dove prima appariva la freccia adesso appare un’immagine, sotto la quale un piccolo link che si presume essere quello della ditta selezionata. Sulla sinistra, sul tetto di un altro palazzo, il testo che descrive l’immagine e né chiarisce il significato. Ad esempio cliccando sul nome dell’azienda “I pierpaoli” appare l’immagine del sito, sotto il link www.ipierpaoli.it (link attivo quindi punto d’intervento) ed il testo a sinistra che dice: “sito di presentazione dell’azienda e delle collezioni. Sviluppato in flash fornisce una piacevole ed intuitiva navigazione”.
1.1.7 Multimedia
Anche questa sezione si raggiunge tramite il viaggio nella città, che ci porta questa volta ad una specie di catena di montaggio. Sulla destra vista dall’alto una struttura semitrasparente che ricorda molto l’arc de la defence a Parigi. Sotto quest’arco passa una fila di cubi che viene dalla sinistra in basso e va verso destra un po’ più in alto. A tre quarti della composizione verso sinistra in alto una serie di nomi di ditte, circa dieci. Questi hanno la stessa caratteristica dei punti di intervento di testo nella sezione internet. Cliccando uno qualsiasi di questi nomi accade innanzi tutto che la “catena” di cubi comincia a muoversi verso destra e quando il primo cubo si trova perfettamente sotto l’arco questo viene sollevato verso il tetto dell’arco sul quale, poco dopo, appare un’immagine, come se fosse stata contenuta dal cubo. Sotto l’immagine una freccetta rivolta verso destra ed una verso sinistra, queste servono a far scorrere le immagini di quella ditta. Inoltre alla sinistra dei nomi delle aziende compare un testo descrittivo allineato a destra, del tipo:
TITOLO: martini productsGENERE: presentazione di prodottiDESCRIZIONE: rappresentazione tridimensionale di
macchinari con possibilità di simularne i comportamentiCONTENUTI SPECIALI: animazioni, 3D interactive.Per ogni ditta il percorso di presentazione è questo. In alto a destra, circa nella solita posizione in cui si presentavano nella sezione internet, i cubetti gialli, ancora punti di intervento con la solita funzione.
1.1.8 Company
Alla sezione company non si poteva arrivare se non attraverso il solito tratto nella città. La schermata presenta sulla sinistra un grosso edificio visto d’angolo ad altezza d’uomo. Sul lato sinistro per tutta la facciata ci sono gli estremi identificativi per reperire l’azienda, sul alto destro più in lontananza i soliti quattro cubetti gialli che fluttuano in aria. In alto a destra appare nuovamente il nome-logo dell’agenzia così come compariva nella main page; sotto questo la solita finestra di testo a tendina, adesso con cinque punti:? Richiesta d’informazioni
? Commenti su questo sito
? Invia il tuo curriculum
? Richiesta di partnership
? Investi su questa società
1.2 HERMESMEDIA.NET
Il sito è realizzato con Flash, ma vi si accede tramite una schermata iniziale in html nella quale appare il logo dell’agenzia in formato ridotto. Lo sfondo è nero e sotto il logo appaiono due piccole scritte una a destra “entra”, una a sinistra “enter”, che indicano la possibilità di accedere sia alla versione italiana che a quella inglese, tuttavia quella inglese non è accessibile in quanto ancora in costruzione.
Cliccando su “entra” si apre una finestra di medie dimensioni (circa come la cornice del sito di Pointersoft) che rimarrà come formato costante del sito.
1.2.1 Loading
Anche questa finestra ha lo sfondo nero e presenta al centro la scritta “caricamento in corso” bianca lampeggiante, con sopra una striscia blu che avanza orizzontalmente fino alla conclusione del caricamento.1.2.2 Home page
L’home page presenta una foto centrale che raffigura un paesaggio quasi surreale con un albero secco in primo piano posto in una sorta di deserto con piccoli arbusti, e con sullo sfondo delle montagne. Attorno all’albero gira costantemente un piccolo cubo con le facce colorate di arancione e blu, colori che poi si riveleranno i colori fondamentali del sito. Spostando il cursore sul cubo, questo si rivela interattivo giacché cambia la sua forma come se si sfaldasse e oltretutto causa un suono come elettrico, sempre continuando a girare. Cliccandoci sopra appaiono delle scritte ad ogni click differenti, come se il cubetto parlasse a l’utente un po’ scocciato di questa interazione. Togliendo il cursore il cubetto continua a girare attorno all’albero mantenendo la sua forma primaria.
Allo stesso tempo dal margine sinistro dell’immagine compaiono una sorta di frecce che vanno ad infrangersi sulla sabbia disintegrandosi poi scomparendo, questi non sono elementi interattivi.
Sulla destra compare un oggetto arancione e semitrasparente approssimativamente della solita grandezza dell’albero, abbiamo ormai intuito che questo è il logo della Hermesmedia.
Al di fuori dell’immagine, in basso, appaiono allineati a sinistra in fila i collegamenti alle sezioni del sito, i bottoni. Questi si presentano semplicemente come scritte bianche. Allineata orizzontalmente sulla solita barra virtuale, ma a destra, la scritta “Hermesmedia”. Su questa barra si muovono orizzontalmente senza interruzioni delle barrette verticali semitrasparenti di più misure.
1.2.3 Punti d’intervento
I punti d’intervento che si trovano nella home page rimangono anche quando si accede alle altre sezioni del sito, così come l’immagine di sfondo.
Il cubetto che gira costantemente rappresenta uno dei punti d’intervento e così le scritte di collegamento alle sezioni del sito, in ordine: Staff. Media design, streetspot, portfolio, scrivi.
La reazione del cubetto all’interazione con l’utente è già stata descritta, ponendo invece il cursore su uno dei bottoni la reazione è data dal cambiamento di spessore del carattere, da normale a grassetto.
Rimandando alla fase successiva di analisi la valutazione sull’efficacia del feedback si passano a descrivere le cinque sezioni del sito.1.2.4 Staff
Cliccando sul bottone di collegamento appare, allineato al menu dei collegamenti ma leggermente al di fuori della barra, il titolo della sezione posizionato esattamente tra i bottoni di sinistra e la scritta Hermesmedia a destra.
All’interno dell’immagine appaiono disposte alla sinistra dell’albero le sagome di tre persone le quali si sfaldano irregolarmente quasi allo stesso modo del cubetto attraversato dal cursore. Andando poi a spostare il cursore su una qualsiasi di queste figure si capisce che sono dei punti d’intervento. Cliccandovi sopra si apre una finestra arancione (colore caratteristico delle finestre di questo sito) che appare tra l’albero ed il grosso logo, nella quale per ogni sagoma è contenuto sulla destra, nome e cognome, ruolo nell’azienda, ed e-mail mentre sulla sinistra un ingrandimento dell’immagine su cui si è precedentemente cliccato. In alto a destra della finestra una piccola “x” chiara allusione alla funzione di chiusura della finestra. Quanto descritto accade al click per ognuna delle tre figure.
1.2.5 Mediadesign
Alla seconda sezione “media design” si accede come alla prima, cliccando sul punto d’intervento che riporta il nome della sezione.
La schermata si presenta così: alla sinistra dell’albero una sfera che ruota sul suo asse, quindi un quadrato un cerchio e un triangolo che si muovo ai piedi della sfera. Portando il cursore su uno qualsiasi di questi oggetti notiamo che compare vicino (sopra sotto o a fianco) una fin troppo piccola scritta come titolo del collegamento. Cliccando quindi sull’oggetto scopriamo che è un punto d’intervento e che apre una finestra nella solita posizione, tra l’albero ed il logo. Questa finestra presenta un titolo in alto di colore nero, un’immagine poco meno alta della finestra allineata a sinistra ed un testo in bianco allineato a destra. Come nelle finestra precedentemente analizzate la “x” per la chiusura della finestra. Il contenuto è a riguardo della filosofia dell’agenzia e mostra l’ambito di lavoro considerato, quello multimediale.1.2.6 Streetspot
Alla terza sezione, quella “streetspot”, si accede come alla altre ed il punto d’intervento presenta le stesse caratteristiche.
Sul solito sfondo appare alla sinistra dell’albero, anche se un po’ in lontananza, una sorta di cartellone pubblicitario gigante visto di scorcio. Dentro questo cartellone una animazione che si avvia all’apertura della pagina e continua in “loop” fino alla chiusura. Sotto al cartellone le sagome di alcune persone che si muovono soprattutto vicino al cartellone ma anche in altre zone della composizione. Alla destra dell’albero compare una finestra del tutto simile a quelle precedenti che adesso presenta in alto a sinistra un titolo che dice: “un nuovo modo di fare pubblicità”, sulla sinistra un’immagine e sulla destra un testo didascalico. In basso a destra, sempre nella finestra uno slogan mentre in basso a sinistra tre iconcine allineate. In queste tre icone è rappresentato nella prima, a partire da sinistra, un punto interrogativo, nella seconda una specie di mirino (un cerchio con una croce) e nella terza una sorta di faccetta messa per orizzontale. Spostando il cursore su una di queste tre icone scopriamo che sono attive, e se clicchiamo ad esempio quella con il mirino cambia il contenuto della finestra. A quella con il punto interrogativo è associato il contenuto iniziale già descritto; alla seconda (il mirino) il contenuto cambia proponendo la collocazione in pianta di un’installazione già esistente di questo tipo di cartellonistica animata. Alla terza compaiono delle foto di esempio.
1.2.7 Portfolio
Accedendo alla sezione “portfolio”, dopo il click sul punto d’intervento, si apre tra l’albero ed il “grosso logo” la solita finestra, ma la zona alla sinistra dell’albero rimane questa volta vuota.
La finestra è così strutturata: in alto il nome dell’azienda per cui è stato fatto il servizio e ciò che produce (testo nero su barra bianca), centrale a sinistra il logo dell’azienda, a destra quattro paragrafi: specifiche (che indica cosa è stato realizzato), anno di realizzazione, strumenti e note. In basso a sinistra della finestra tre bottoncini in tutto simili per forma e colore, a quelli incontrati nella finestra della sezione “streetspot”. Uno presenta una freccia verso sinistra, uno verso destra ed uno la solita faccina messa per orizzontale. I tasti freccia permettono di passare da un cliente ad un altro, il tasto della faccina fa da link al sito dell’azienda presente in finestra.1.2.8 Scrivi
Cliccando sul bottone “scrivi” si apre, sempre tra l’albero ed il grosso logo, la finestra, ed anche in questa sezione la zona alla sinistra dell'albero rimane deserta. Nella finestra compare in alto a sinistra una piccola scritta “Hermesmedia S.r.l.”, alla sua destra l’e-mail dell’agenzia. Sotto si presenta un rettangolo con sopra scritto “la tua e-mail”, infatti se si sposta il cursore in questo rettangolo ci si accorge che è una zona in cui si può inserire del testo. Sotto un rettangolo più grande con scritto sopra “scrivi qualcosa” anche questo rettangolo si rivela editabile. Sulla destra del rettangolo quattro pulsanti che servono per inserire del testo predefinito per dare un giudizio al sito. Sotto due pulsanti con scritto “invia” e “cancella” la cui funzione è quella di inviare il messaggio o di cancellarlo. Ancora sotto, al limite della cornice della finestra, si trovano indicati indirizzo e numero di telefono dell’agenzia.
2.COMPONENTE TASSICA
In entrambi i siti gli sviluppatori hanno realizzato un’ambientazione tendente al reale, anche se in due modi differenti. Pointresoft attraverso una grafica quasi minimalista ma sufficientemente esplicativa dell’ambiente cittadino che ha voluto ricreare; Hermesmedia attraverso un’immagine fotografica che pur avendo questo formato da vita ad un ambiente tendente al surreale, dato che appaiono immersi nella foto elementi attivi di origine chiaramente grafica perfettamente integrati con questo. Entrambi gli ambienti tendono ad essere leggermente surreali per forma e contenuto. Altri siti di altre Web-agency mantengono tuttavia le normali caratteristiche di bidimensionalità esplicita, caratteristica dei siti (come ad esempio Melazeta, Agorà, Cartobaleno ecc…) che siamo comunemente abituati a vedere. Entrambi i portali cercano di creare un rapporto di interattività con l’utente, ma in modo differente: Pointersoft struttura un ambiente navigabile dall’utente in modo libero e piacevole dandogli il modo di scoprire gli argomenti della narrazione attraverso un viaggio solo parzialmente guidato; Hermesmedia struttura un ambiente nel quale si trovano degli elementi figurativamente contrastanti col contorno, tipo il cubo che gira attorno all’albero, l’utente rivolge la sua attenzione a questi scoprendoli man mano che li utilizza, giocandoci. La trovata che, riferendosi all’interattività, secondo me valorizza particolarmente il sito pointersoft.com è il fatto che il loading, momento “morto” di attesa, sia reso utilizzabile, anche se per gioco, dall’utente.
Risulta adesso di fondamentale importanza proporre un confronto fra i punti d’intervento dei due siti. Pointersoft propone una duplice strutturazione di navigazione, quindi dei punti d’intervento, ovvero una possibilità è quella di interagire con la parte esterna alla cornice, anche se questa presuppone una minima conoscenza del portale, altrimenti i punti d’intervento sono rilevabili all’interno della cornice, e precisamente i cubi gialli per la navigazione da una sezione all’altra e le scritte per indagare in modo più specifico sui lavori della ditta. Sicuramente l’efficacia dei cubi è massima, a partire dal colore giallo che contrasta fortemente nella configurazione generale delle pagine, che quindi attira particolarmente l’attenzione dell’utente, e dal fatto che i cubi si identificano come unici oggetti a muoversi nella composizione, di un moto regolare e percepibile ma non eccessivo, in modo da non creare fastidio all’utente, inoltre spostandovi il cursore questi rispondono con più feedback all’utente: uno di movimento, due sonori (uno alla sovrapposizione del cursore, uno al click) ed uno attraverso l’apertura della finestra di testo. Gli altri punti d’intervento identificabili nelle righe di testo, avendo un ruolo secondario hanno una risposta minore ma altrettanto efficace, innanzitutto cambiando colore alla sovrapposizione con il cursore del mouse quindi emettendo un suono al click. I punti d’intervento esterni alla cornice presentano una configurazione del tutto simile tra di loro dato che sono tutti cubi tranne il dischetto ed il lettore cd (elementi ben conosciuti dall’utente dato che si presume stia utilizzando un computer). Questi sono messi molto meno in evidenza rispetto agli altri non essendo né colorati né in movimento; si comprende che sono elementi attivi solamente alla sovrapposizione con il cursore che ne causa una rotazione e la comparsa della didascalia.
Nel sito di Hermesmedia i punti d’intervento che hanno la funzione di accesso alle varie sezioni del sito sono inseriti, come già detto nella descrizione, sotto forma di testo nella barra in basso. Il tipo di feedback che questi emettono è di duplice tipo, sonoro e visivo, infatti alla sovrapposizione del cursore il testo si ingrandisce e viene emesso un suono simile al “clak” di un tasto della tastiera; al click del mouse viene emesso un altro suono, differente da quello di prima, e l’albero viene come attraversato da una scossa oltre a far nascere su uno dei suoi rami una foglia stilizzata. All’interno della configurazione ci sono adesso altri due punti d’intervento: il cubo che gira (già ampiamente descritto) e la foglia che non emette alcun feedback se non un leggero movimento e dopo il click del mouse la sua scomparsa. In questa configurazione tuttavia si tende a confondere i punti d’intervento realmente funzionali da quelli puramente caratterizzati da un aspetto ludico, anzi questi ultimi sono forse comunicati in modo migliore.
Altra grande differenza tra i due siti è quella che riguarda il contenuto. Uno, il sito della Pointersoft, si presenta come un grosso portfolio diviso in differenti settori di specializzazione ognuno dei quali mostra dei lavori, dei testi a descrivere il prodotto che il cliente viene a comprare e quali sono i vantaggi del cliente. In un certo senso si può dire che Pointersoft si presenta in modo più formale e “professionale”. Hermesmedia invece dedica una sola sezione al portfolio (pur presentando anche nelle altre dei lavori), proponendo all’utente-cliente la filosofia dell’agency (in particolare nella sezione “Mediadesign”), alcune nuove proposte di comunicazione ed infine “presentandosi di persona” al cliente (nella sezione “staff”).Ho rilevato poi un’analogia a mio avviso significativa riguardo alla posizione dei testi all’interno della composizione: tutti i testi sono stati posizionati sulla destra. Questo tipo di scelta, peraltro rilevata in altri siti, può significare due cose: la vicinanza alla barra di scorrimento della finestra del sistema operativo (quindi per scelta funzionale), anche se sono entrambe finestre racchiuse comunque in uno spazio limitato che non richiedono l’utilizzo della barra di scorrimento; oppure per un motivo di percezione visiva, che a mio avviso è l’opzione più appetibile, in quanto sapendo come la rete sia un mezzo altamente rapido nella consultazione, e ricordando che in una composizione in genere gli elementi sulla destra abbiano un peso percettivo maggiore, allora probabilmente per equilibrare i punti di attrazioni tra immagini, animazioni (elementi chiaramente più attraenti quindi posti sulla sinistra) e testi. Infine si deve annotare che entrambi i siti utilizzano dell’audio che in tutti e due i casi si rivela coerente con la strutturazione del sito e piacevole durante la navigazione, insomma non brani audio cosi ripetitivi al punto che alle volte costringono l’utente a fare a meno della visita ad un sito. Pointersoft di sottofondo si avvale di quelli che sembrano i tipici suoni di una città (es. traffico, clacson…) anche se molto attenuati ed addolciti; Hermesmedia di un motivetto tendente alla sonorità elettronica ma con una melodia orientaleggiante, un po’ a rispecchiare il “surrealismo del sito, la commistione tra natura e tecnologia.
3. COMPONENTE FUNZIONALE
L’elemento che sicuramente è più interessato in questa parte dell’analisi è l’interfaccia come luogo d’interazione tra oggetto utente e azione. In particolare si guarderà all’ipertesto in tre fasi, nella prima, la dimensione funzionale, cercheremo di individuare le principali affordance finalizzando la loro analisi alla ricerca dell’equilibrio tra funzionalità comunicativa e funzionalità operativa, rapporto definibile come usabilità (Per approfondimento sui concetti di funzionalità operativa e comunicativa cfr. Deni 2002). In secondo luogo poniamo l’attenzione sulla dimensione mitica, cercando di individuare l’universo assiologico e il tipo di utilizzatore costruito quindi individuando le valorizzazioni tratte dallo schema di Floch (cfr.Floch 1990) nelle due interfacce e ponendo l’attenzione sulla coerenza delle relazioni interoggettive. Infine, nella dimensione estetica, si cerca di individuare i confini di “convivialità” dei siti, o meglio cerchiamo di analizzare sotto un punto di vista semiotico un tema ora più che mai attuale e dibattuto come quello di “userfriendliness”. Questa vuol’essere quindi un’analisi volta a far un po’ di chiarezza sulla motivazione di alcune scelte e sul chiarimento, dal punto di vista semiotico, di tematiche scottanti che riguardano il mondo del Web.
3.1 L’USABILITA’ (dimensione funzionale)
Cerchiamo di capire con una breve definizione cosa si intende per usabilità : “L’usabilità è una caratteristica dei siti Web (ma non solo) che ne misura la chiarezza, la semplicità d’uso da parte dell’utente” (cfr. R.Fusaroli). I concetti poi sarebbero molti ma mi sembra che questo sintetizzi bene le definizioni delle varie correnti di pensiero che poi applicano questo concetto con norme differenti. L’ affordance quindi sono uno degli argomenti, sotto il punto di vista semiotico, più aderenti per l’analisi di un concetto come questo. Cercando di stabilire un rapporto tra funzionalità comunicativa e funzionalità operativa guardiamo ai portali presi da noi in considerazione.3.1.1 Www.Pointersoft.com
L’architettura generale di questo sito presenta dei programmi d’azione specifici e ben definiti caratterizzati soprattutto da delle affordance ben gestite e programmati nell’economia della navigazione. Il portale crea fondamentalmente due figure di utente modello dei quali poi ne definiremo le caratteristiche.
Nel primo approccio alla navigazione di questo sito gli inviti all’uso sono fortemente riconoscibili nei cubi gialli che fluttuano, i quali ripetuti in tutte le sezioni del sito identificano un programma d’azione ben definito e sintetico all’apprensione che permette una semplice ed intuitiva navigazione per il cliente che non presenta un grande confidenza con il modo del Web. Nella relazione fattitiva (cfr. Deni 2002) tra oggetto (il cubo) ed utente si dimostra una buona competenza pragmatica posseduta dal cubo che, oltre ad avere un colore per il quale evidenzia molto la sua presenza è oltretutto l’unico elemento della composizione ad essere in continuo movimento. Si rivela cosi minima la performanza cognitiva richiesta nei confronti dell’utente, dato che alla sovrapposizione col cursore, qualsiasi cubo arretra come farebbe un bottone nella fase di pressione, movimento che invita quindi a cliccarlo. Altrettanto intuitivi sono i punti d’azione rilevati nelle pagine di presentazione, in quanto posti come testo al di fuori di qualsiasi finestra e allineato in modo morfologicamente aderente all’ambiente. Questo rivela inoltre una cura particolare per la relazione interoggettiva, che merita tuttavia un po’ di attenzione in più. Abbiamo distinto gli oggetti del sito in due categorie, quelli attivi e quelli che creano l’ambiente. I primi hanno forme e colori che si distaccano dal contesto ambientale, ma per stile ed integrazione morfologica gli aderiscono bene, nel senso che pur essendo l’ambiente ricreato quello di una città, tuttavia tale ambiente è stato tradotto graficamente in modo coerente ai punti d’intervento.
Vi è poi un secondo modo di navigazione di questo sito che è quello tramite i cubetti bianchi al di fuori della cornice, che ipotizza da parte dell’utente una maggior esperienza ma soprattutto la conoscenza del sito. Questa seconda opportunità si può considerare quasi come un surplus funzionale, che tuttavia non condiziona l’economia della navigazione del primo utente dato che sono molto meno evidenziati i punti d’intervento e in caso di interazione con l’utente questi dimostrano di essere in ottima relazione con i punti d’intervento precedenti dato che ne richiamano forma e titoli.
Vi sono infine alcune funzioni, oltre a quelle di presentazione dei lavori, in comune ai due modi di navigazione, ovvero il punto “news” quello “download” e quello “sound on/off”. Anche questi non richiedono che una minima performanza cognitiva da parte dell’utente in quanto esplicitano a livello figurativo in modo semplice, coerente ed efficace le loro funzioni.
Concludendo si deve dire che il ruolo dell’utente modello previsto da questo sito può articolarsi in due figure: l’utente inesperto/medio e l’utente esperto conoscitore del sito.
3.1.2 Www.Hermesmedia.net
Meno evidente in questo portale la strutturazione di specifici programmi d’azione come nel precedente. Tuttavia si presenta una situazione interessante che viene a creare uno spazio surreale e di primo impatto di una buona coerenza formale nella relazione interoggettiva tra oggetti grafici, immagini fotografiche e punti d’intervento.
Rispetto alla condizione del precedente portale, qui si rileva la presenza di un maggior numero di vesti grafiche per i punti d’intervento, vengono quindi richieste all’utente un maggior numero di performance cognitive a causa di un maggior numero di soggetti modali. In assoluto la prima affordance rilevabile nella composizione e quella del cubo che gira attorno all’albero, che assume la funzione di avvicinare l’utente alla configurazione generale del sito facendogli compiere una performanza cognitiva in modo ludico risparmiandogli la stessa nel momento in cui l’attenzione sarà volta ad altri obiettivi. Le affordance proseguono in un secondo momento nella barra di navigazione vera e propria dove si rivela il secondo elemento attivo, le barrette che scorrono.
Lo stacco netto tra il colore delle scritte (bianco) e quello dello sfondo (nero) evidenzia maggiormente la barra menu, senza considerare il netto stacco che la separa dall’immagine di sfondo.
Altra condizione che risparmia sulla performanza cognitiva è quella della posizione delle finestre e dei punti d’intervento delle sezioni. In due sezioni, i punti d’intervento sono posizionati alla sinistra dell’albero, in tre come icone (per tutte e tre della solita forma e colore) all’interno delle finestre.
Sicuramente l’interfaccia di questo portale è stata progettata per utenti con un minimo di esperienza di navigazione, anche se proposto ad un utente senza esperienza il sito potrebbe apparire quasi come un videogioco (ad esempio è molto simile al videogioco “Eve” di Peter Gabriel), dove acquisire delle competenze per proseguire. La relazione interoggettiva, come già brevemente detto, costruisce delle categorie di oggetti fortemente contrastanti tra di loro a livello grafico-formale, ma che danno vita ad un’ambientazione surreale coerente nel complesso e coerente tra sezione e sezione, adatta alla strutturazione ludica della navigazione.3.1.3 Conclusioni sull’usabilità
Nessuno dei due siti presenta particolari problemi di usabilità, in tutti e due esiste un buon equilibrio tra funzionalità comunicativa e funzionalità operativa anche se si è rilevata una netta differenza nel modo in cui è stata progettata la navigazione: nel primo una sorta di viaggio guidato al contempo semplice, intuitivo e piacevole, nel secondo caso una scoperta di nuove esperienze in un mondo surreale tutto da scoprire. Considerato tutto, la lancetta dell’usabilità a mio avviso dovrebbe tuttavia pendere un po’ dalla parte della Pointersoft.
Il concetto di navigazione accennato da Hermesmedia è in qualche modo ritrovabile, in modo molto più accentuato ed esasperato nel sito www.yugop.com, di uno sviluppatore giapponese che ha deciso di dichiarare la sua diversità, di contravvenire alle regole del Web di rapidità esasperata. In questo portale infatti ritroviamo un percorso interessante di giochi ed esperienze attraverso il quale egli vuole interessare l’utente-cliente e portarlo a contravvenire alle regole del Web soffermandosi più tempo sul portale, dimostrando così di poter realizzare siti diversi e “più attraenti per i clienti”.
3.2 LE VALORIZZAZIONI (dimensione mitica)
Già nell’analisi sull’usabilità si è intuito che i due siti propongono differenti valorizzazioni della navigazione e del loro lavoro, in parole povere offrono al cliente lo stesso servizio ma caricato di valori differenti da una parte e dall’altra. Oltre alla valorizzazione dell’interfaccia trovo interessante trattare anche il modo in cui lo staff di lavoro delle due agenzie si propone al cliente, e capire se lo fa in modo coerente con l’interfaccia.3.2.1 Www.Pointersoft.com
Come già detto questo sito costruisce due tipi di utente modello, uno inesperto che cerca nel Web il modo più semplice e diretto per promuovere la sua azienda, dando un’immagine innovativa e al contempo in stile tutto sommato lineare e classico del prodotto: questo è rilevabile anche accedendo, dalla sezione “internet” del portale, ai siti realizzati dalla Pointersoft. Il secondo è un utente attento alla intuitività della navigazione e alla velocità di acceso alle informazioni desiderate. La valorizzazione incarnata dal sito è sicuramente di tipo pratico-critica (cfr. Floch 1990) tutto sommato abbastanza formale nel interfaccia e nella scelta dei contenuti.
L’agenzia mostra solo le informazioni minime per reperirla con i differenti mezzi di comunicazione (e-mail, telefono, indirizzo) e presenta all’utente in modo esplicito già nella home page premi e riconoscimenti, al fine di dare già dall’inizio un valore d’acquisto maggiore al servizio offerto.
3.2.2 Www.Hermesmedia.net
Il tipo di utente modello che costruisce questo portale è opposto a quello del precedente, ovvero un utente interessato sicuramente all’interazione e attento alle nuove proposte della moda, una persona che accetta dei compromessi e delle nuove proposte anche sotto forma di sfida e di gioco.
Anche in questo caso si può rilevare l’identità dell’utente modello anche nei link ai siti prodotti da questa agenzia, siti rivolti ai giovani (come quello della lega , ditta di articoli sportivi) e a persone attente alle nuove tecnologie.
La valorizzazione che qui si può rilevare è sicuramente di tipo ludico-utopica (cfr. Floch 1990) e più carica di significati.
A differenza della Pointersoft, Hermesmedia si presenta faccia a faccia con l’utente proponendogli nuove opportunità comunicative e aprendo le porte al metodo lavorativo dell’agenzia. Già dall’analisi della sezione “staff” si vede come i tre responsabili della Web-agency si mettano faccia a faccia con l’utente senza maschere. Oltretutto è dedicata un’intera sezione, quella “scrivi”, al rapporto con l’utente, in modo da instaurare una relazione di dialogo e di reciproco interessamento.3.2.3 Conclusione sulle valorizzazioni
Si conferma nuovamente come i due siti propongano una stesso servizio con strutture e valori completamente differenti. Il modo di porsi verso il cliente si rileva fondamentalmente coerente in tutte e due le esperienze e denota una probabile rispondenza dei metodi di lavoro nei portali, nell’interfaccia.
Possiamo quindi dire che l’interfaccia del sito è lo specchio del Web-designer?
Per quanto riguarda il modo di proporsi all’utente Hermesmedia fa un’operazione, quella di presentarsi in modo diretto, cosa già rilevata in altri siti ma, sicuramente in certi casi in modo troppo esasperato. Ad esempio nel sito della Web Agency Estrema design, questa trasforma le figure dei componenti del team di lavoro (in nero su sfondo bianco) come bottoni di collegamento alle varie sezioni del suo sito. Pur proponendo un rapporto diretto con l’utente sullo schermo, a mio avviso, questa agenzia riesce a creare un distacco maggiore più di quanto non avrebbe fatto realizzando un sito impersonale come quello di Pointersoft, in quanto il sito è realizzato con animazioni scarne ma che si caricano con un tempo molto lungo con banda media e utilizzando oltretutto due colori solamente, il nero e il bianco: certo non il massimo dell’allegria.
3.3 USERFRIENDLINESS (dimensione estetica)
Come abbiamo già detto consideriamo la dimensione estetica guardando particolarmente alla convivialità dell’interfaccia, problema più che mai attuale e di largo respiro. Quando allora si può giudicare “userfriendly” un’interfaccia di un sito? Ci sono forse delle regole o dipende da utente ad utente?
Sicuramente la convivialità di una pagina dipende molto dall’enciclopedia dell’utente e dalle sue esperienze di navigazione e di uso del computer. Insomma l’interfaccia, e in particolare quella di un sito, è difficilmente catalogabile come conviviale o non conviviale, ma cercheremo di andare nello specifico per trarre qualche “summa”.3.3.1 Www.Pointersoft.com
L’attenzione che questo sito rivolge alla convivialità dell’interfaccia è indiviiduabile nella scelta dei colori, dell’audio e nella capacità di creare un ambiente a molti familiare come quello cittadino. I colori (bianco, grigio, e giallo) sono pochi e distribuiti in modo da non provocare confusione nella comprensione dell’interfaccia. L’audio che accompagna la navigazione del sito richiama i suoni che si possono sentire in una città ascoltata dall’interno di un appartamento e si rivela quindi coerente con la veste grafica che rappresenta, come già detto, il viaggio all’interno di una città. Il rapporto con questa interfaccia a mio avviso può essere duplice: questa si può dimostrare conviviale o fredda e distaccata agli occhi dell’utente. Ad un primo approccio si presenta conviviale in quanto interfaccia viva e pronta a rispondere all’utente con feedback continui. In un secondo momento tuttavia la monotonia dei colori, comunque piacevoli, e l’impostazione del rapporto con l’utente rende freddo il rapporto con il sito.
3.3.2 Www.Hermesmedia.net
Anche per questo sito, come per quello precedente, risulta difficile dare un giudizio sulla convivialità dell’interfaccia, anche se il rapporto che il sito struttura con l’utente è di diverso tipo. Inizialmente il sito può apparire un po’ dispersivo e complicato nella navigazione ma successivamente coinvolge in modo maggiore in quanto si entra nella logica di navigazione. Grafica e audio si strutturano in modo da seguire coerentemente la struttura di gioco del sito che a lungo andare si presenta sicuramente più amichevole rispetto all’inizio, instaurando con l’utente un rapporto amichevole ma allo stesso tempo di sfida: un gioco che continua durante la navigazione del sito e che sicuramente risulterà alla maggior parte degli utenti conviviale.3.3.3 Conclusioni sulla convivialità
Anche riguardo a quest’ultimo argomento i due portali si dimostrano diametralmente opposti, infatti quello di Pointersoft assume all’impatto iniziale un’interfaccia che per le prime navigazioni apparirà sicuramente il massimo dell’userfriendliness, ma in seguito si scoprirà un certo distacco formale che ridurrà la convivialità. Hermesmedia al contrario potrà inizialmente apparire un ambiente tanto surreale da sembrare quasi inaccessibile, ma procedendo nella navigazione l’utente riuscirà ad immergersi nel gioco creato dai progettisti che coinvolge l’utente nella scoperta del portale.
4. CONCLUSIONI
L’analisi, come già messo in evidenza, ha rilevato che i due siti sotto il punto di vista semiotico presentano caratteristiche completamente differenti rispetto all’utente modello creato dalla struttura della navigazione sotto il punto di vista dell’usabilità. Siamo quindi portati a pensare che il futuro della rete non sia volto in una sola direzione, ma che presenti anche un grande numero di bivi e differenti tipologie di portali come espressioni sempre più vive delle diverse espressioni culturali. Non ha ragione a mio avviso Jacob Nielsen a essere così categorico nei suoi giudizi sull’usabilità. Egli dimostra infatti di non rapportarsi alla visione di internet come spazio propositivo di novità tecnologiche e grafiche e la sua impostazione di essenzialità si rileva funzionale alla strutturazione di siti informativi o raccoglitori di documenti, cosa che internet affianca a tante altre tipologie.
Sicuramente prima di cominciare a creare un sito si deve ben definire a chi ci si vuole rivolgere, anche se, a mio avviso è possibile, considerando i siti analizzati, riuscire a creare una sintesi che coinvolga un maggior numero di utenti nella navigazione attraverso un’interfaccia coinvolgente ed una impostazione conviviale.
BOSCAROL, Maurizio
Bibliografia
I decaloghi dell’usabilità
http://www.usabile.it/082001.htmCACCAVELLA, Francesco Saverio
Le insidie dell’usabilità
http://www.html.it/editoriale/78.htmDE NARDO, Luca
Usability: To Flash or not to Flash - la provocazione di J. Nielsen
http://www.i-dome.com/docs/pagina.phtml?_id_articolo=21DENI, Michela
2001 La Construction Sémiotique d’une interface conviviale
https://www.ocula.it/archivio/txt/md_interf/interfConviv.htm
2002 Oggetti in azione, Milano: Franco AngeliFLOCH, Jean-Marie
1990 Sèmiotique, marketing et comunication, Paris: PUP
(Semiotica marketing e comunicazione) Milano: Franco Angeli 1997FONTANILLE, J. e ZINNA, A. (eds.)
2003Les objets au quotidien, Limoges: Pulim (in corso di pubblicazione).FUSAROLI, Riccardo
Persi nell’web: creatività contro usabilità?
http://www.hermeslab.net/comunity/hermeshestia/archivio/2usbility.htmlMARSCIANI, Francesco; ZINNA, Alessandro
1991 Elementi di semiotica generativa, Bologna :Editrice EsculapioNIELSEN, Jakob
2002 Web Usability, ApogeoPEZZINI, Isabella
2002 Trailer, spot, clip, siti, banner, Roma: Meltemi Editore
RECCHIUTI, Martina
Usability. Perdere tempo è una vera scocciatura
http://www.internazionale.it/home/primopiano.php?id=2480SANTUCCI, Umberto
L’usabilità reazionaria?
http://www.apogeonline.com/webzine/2001/03/29/01/200103290102VOLLI, Ugo
2000 Manuale di semiotica, Bari: LaterzaZINNA, A.
2003 “L’ objet et ses interfaces” in Fontanillle e Zinna (eds.).
2003b Sémiotique et rhétorique des interfaces, Limoges: Pulim, (in corso di pubblicazione).