SlideShare uma empresa Scribd logo
1 de 56
Baixar para ler offline
www.fiesta.ford.eu
      www.mini.com
   www.lanciaypsilon.it
    www.fiat500.com




Progetto realizzato da:
  Francesca Colleoni
   Chiara Dall’Olio
     Stefano Iasilli
INDICE
1) Progetto e obiettivi ..................................................................................................................... pag. 4
2) Descrizione Target ....................................................................................................................... pag. 5
      2.1) Ragazzo 25/35 anni ........................................................................................................... pag. 6
      2.2) Ragazzo 20/35 anni ........................................................................................................... pag. 7
      2.3) Famiglia Giovane ............................................................................................................... pag. 8
3) Lancia Y ................................................................................................................................... pag. 9
	     3.1)	Coerenza	grafica	.............................................................................................................	pag. 10	
      3.2) www.lanciaypsilon.it ........................................................................................................ pag. 11
      3.3) Video ............................................................................................................................ pag. 13
4) Fiat 500 .................................................................................................................................. pag. 14
	     4.1)	Coerenza		grafica	...........................................................................................................	pag. 15
	     4.2)		www.fiat500.com	.............................................................................................................	pag.	16
      4.3) Video ............................................................................................................................ pag. 18
5) Mini Cooper ............................................................................................................................. pag. 19
	     5.1)	Coerenza	grafica	.............................................................................................................	pag. 20	
      5.2) www.mini.com ................................................................................................................ pag. 21
      5.3) Video ............................................................................................................................ pag. 23
6) Ford Fiesta .............................................................................................................................. pag. 24
	     6.1)	 Coerenza	 grafica	 .........................................................................................................	 pag. 25
6.2)		www.fiesta.ford.eu		..........................................................................................................	pag.	26
      6.3) Video ............................................................................................................................ pag. 28
7)	Parametri	di	Valutazione	.............................................................................................................	pag.	29
8)	Diagramma	di	Qualità	................................................................................................................	pag.	31
      8.1) Lancia Y ........................................................................................................................ pag. 32
      8.2) Fiat 500 ....................................................................................................................... pag. 33
      8.3) Mini Cooper ................................................................................................................... pag. 34
      8.4) Ford Fiesta ................................................................................................................... pag. 35
      8.5) Diagramma Completo ...................................................................................................... pag. 36
9) Task Time .............................................................................................................................. pag. 37
      9.1) Lancia Y ........................................................................................................................ pag. 38
      9.2) Fiat 500 ....................................................................................................................... pag. 39
      9.3) Mini Cooper ................................................................................................................... pag. 40
      9.4) Ford Fiesta ................................................................................................................... pag. 41
10)	 Configurazione	 Automobile	 ......................................................................................................	 pag.	 42
      10.1) Lancia Y ..................................................................................................................... pag. 43
      10.2) Fiat 500 .................................................................................................................... pag. 46
      10.3) Mini Cooper ................................................................................................................ pag. 48
      10.4) Ford Fiesta ................................................................................................................ pag. 52
11)	 Conclusione	 .........................................................................................................................	 pag.	 53
12) Restyling Sito ...................................................................................................................... pag. 54
4

PROGETTO E OBIETTIVI
Il settore automobilistico ha catalizzato l’attenzione e l’interesse di coloro che nutrono una spiccata predilezione per
tutto ciò che esprime innovazione tecnologica, design, funzionalità e praticità.
Questi elementi sono riscontrabili nei siti delle case automobilistiche, applicati ai diversi modelli proposti sul mercato.
Dato che nel progettare siti web occorre pensare agli utenti che li utilizzeranno, i sistemi di navigazione, il layout del
sito, l’architettura dell’informazione e i testi sono tutti fattori da considerare per permettere una navigazione semplice
ed efficiente/proficua.
Il presente lavoro ha per oggetto l’analisi comparata del sito www.fiesta.ford.eu con i siti di Fiat 500, Lancia Ypsilon e
Mini Cooper, riguardanti automobili di analoga categoria. Lo studio prende in considerazione la presentazione nel web
dei quattro modelli suddetti e, attraverso la riflessione sull’impostazione e la scansione delle informazioni offerte, ha
l’obiettivo di suggerire alcune modifiche perché il sito www.fiesta.ford.eu risulti più efficace.




              Lancia Y                        Fiat 500                        Mini Cooper                     Ford Fiesta
5

DESCRIZIONE TARGET
Il target di utenti potrà presentare due tipologie di approccio: la ricerca di informazioni sui vari ambiti,- quali per
esempio costo, prestazioni, design, allestimenti, consumi- e il soddisfacimento della necessità dell’acquisto. Il comune
denominatore è costituito dalla scelta dell’utilizzo del web per la risposta alle rispettive esigenze.




Target
6

Ragazzo/a di 25-35 anni
Simone è un utente giovane, assiduo utilizzatore del web per
motivi di studio o di lavoro, si aspetta di trovare con facilità e
velocità ciò che cerca: informazioni chiare e ben organizzate
riguardo l’automobile a cui è interessato, corredate da dati
tecnici, da una grafica semplice e da una impaginazione
logica.
Ha lo scopo di utilizzare le informazioni per l’acquisto di
una vettura che soddisfi le proprie esigenze e quindi darà
particolare rilievo alla proposta più allettante e alla migliore
offerta.


                                                                         ne
                                                                     Simo




Target Ragazzo
7

Ragazzo/a di 20-35 anni
Rebecca è una giovane dinamica, attenta verso tutto ciò
che è indice di novità al passo con la moda, vuole essere
aggiornata sulle ultime conquiste nel campo della tecnologia
e del design.
È conquistata da una grafica accattivante, moderna e
originale, che risponde alle proprie esigenze di estetica più
che di praticità e di funzionalità, in quanto non è interessata
all’acquisto, ma al soddisfacimento della propria curiosità e
alla ricerca del “trendy” e del nuovo.


                                                                         a
                                                                  R ebecc




Target Ragazza
8

Famiglia giovane
Elisa e Matteo hanno un bambino, Pietro, di tre anni, sono giovani e felici della bella famigliola che hanno creato. Lavorano
entrambi, sono molto dinamici, amano passare i finesettimana fuori città, in montagna o al lago, adorano circondarsi di
amici, con i quali si incontrano spesso il sabato sera per una cenetta, per parlare e per giocare a carte, la loro passione.
Matteo insieme a Pietro, vuole fare una bella sorpresa a Elisa, regalandole un’automobile che rispecchi il suo carattere
vivace, sprint, elegante e nello stesso tempo sportivo.
Potrà usarla per svolgere le sue varie commissioni,
tra le quali fare le compere e portare Pietro
alla Scuola materna, ma anche
per uscire insieme ai suoi due
amori: Matteo e Pietro.
                                                                                                            Pietro




                                         Elisa                                                                        o
                                                                                                              Matte




Target Famiglia Giovane
Scheda sito web - Lancia Y
10

COERENZA GRAFICA E ARCHITETTURA SITO
Per quanto riguarda l’architettura nella home page non è presente la mappa del sito web e non è disponibile la traduzione
in altre lingue. La navigazione è semplice ed essenziale.Non abbiamo duplicazioni di menu sulla stessa pagina. C’è sempre
un titolo base che caratterizza ogni sezione.Non troviamo una differenziazione visiva fra le varie pagine del sito (i colori
utilizzati sono sempre coerenti).
Dal punto di vista della comunicazione si può notare che, per facilitare la visitazione del sito, non sono presenti layout che
richiedono scroll orizzontali (ad eccezione della sezione “Fashion Trip”). Nella home page del sito sono inseriti parzialmente
i tratti distintivi della brand image della Lancia. Viene utulizzato specialmente il colore nero e bianco, lasciando poco
spazio al blu (vedi logo Lancia). Per quanto riguarda i caratteri tipografici e la struttura del testo, sono presenti periodi
non troppo lunghi per rendere più scorrevole e gradevole la lettura. Non è comunque possibile ingrandire il testo, mentre,
per rendere più omogeneo il tutto, viene utilizzato un solo carattere tipografico bastoni, adottato sempre nelle stesse
dimensioni. Nella home page, colore testo e sfondo, non massimizzano pienamente la leggibilità della pagina.




              Lancia Y

                                               Fiat 500                         Mini Cooper                      Ford Fiesta
11

www.lanciaypsilon.it
1) filmato iniziale in flash..possibilità di “skip intro”
2) barra informazioni parte superiore (allestimenti,
motorizzazioni, tecnologia, car configuration) con menu a
tendina
                                                                                      1
3) possibilità di visualizzare il sito a schermo intero
4) logo lancia non è cliccabile
5) sezione fashion trip: possibilità di sfogliare album
                                                                                                  2
fotografici e ascoltare pezzi musicali                           9                                    8                 3
                                                                     8


                                                                                                          8
                                                                                                              5

NOTA: i trip nn disponibili sono giustificati con la scritta
coming soon
6) barra info parte inferiore, non a tendina
7) disclaimer: info riguardanti il sito (illustrazioni e
                                                                             8
descrizioni)                                                             7
8) le barre delle info rimangono sempre disponibili in ogni
pagina                                                                                                                  4
9) pulsante home cliccabile per ritornare alla pagina iniziale                            6
                                                                                              8



               Lancia Y

                                                  Fiat 500                       Mini Cooper              Ford Fiesta
12
10) possibilità di scaricare immagini della macchina
11) la parte descrittiva in ogni pagina è possibili ridurla a
                                                                                               12
icona per garantire la vista completa della macchina sullo
sfondo
                                                                                   11
12) sezione car configuration
13) possibilità di scaricare il catalogo
14) sezione lancia ecochic
                                                                                               10
15) possibilità di richiedere il test drive
16) possibilità di registrarsi al sito
17) sezione EXPERIENCE --> vivere la lancia sui più noti
social network (facebook, youtube ecc..)                                  13

  14                        15                     16           17




               Lancia Y

                                                Fiat 500             Mini Cooper        Ford Fiesta
13




               VIDEO




Lancia Y

           Fiat 500    Mini Cooper   Ford Fiesta
14




Scheda sito web - FIat 500
15

COERENZA GRAFICA E ARCHITETTURA SITO
Per quanto riguarda l’architettura nella home page è presente la mappa del sito web, è disponibile la traduzione in
venticinque lingue, vi è un apparato di navigazione semplice, evita duplicazioni di menu sulla stessa pagina o navigazioni
trasversali complesse, offre sempre un titolo alle pagine, e tuttavia non vi è una differenziazione visiva fra le varie sezioni
del sito (il colore utilizzato per i titoli è sempre lo stesso).
Dal punto di vista della comunicazione invece si può notare che, per facilitare la visitazione del sito, non sono presenti
layout che richiedano scroll orizzontali, nella home page del sito sono inseriti i tratti distintivi della brand image della
Fiat, in tutto il sito viene utilizzato un colore caldo, il rosso, per guidare l’attenzione dell’utente su specifiche aree della
pagina, e per evitare il fastidioso utilizzo di troppi colori contemporaneamente; per quanto riguarda i caratteri tipografici
e la struttura del testo, sono presenti periodi abbastanza lunghi, rendendo talvolta difficile la lettura del testo e non è
possibile l’ingrandimento del testo, mentre, per rendere più omogenei i testi, viene utilizzato un solo carattere tipografico
bastoni, adottato in diverse dimensioni; i colori di testo e sfondo sono stati scelti per massimizzare la leggibilità delle
pagine.
Inoltre per coinvolgere l’utente è presente nella maggior parte delle pagine la possibilità di esprimere il proprio parere
critico.




                                                  Fiat 500

               Lancia Y                                                          Mini Cooper                       Ford Fiesta
16

www.fiat500.com                                                          1



1) filmato iniziale in flash, possibilità di “skip intro”
2) barra informazioni nella parte superiore della pagina;
voci “500; 500C, 500 News, 500 Wants you” con menu a
tendina.
- non c’è la possibilità di visualizzare il sito a schermo intero
3) logo 500 cliccabile (porta nella pagina intro del sito)
4) barra informazioni posta sotto al menu; non è a tendina
5) parte inferiore della pagina: disclaimer, con informazioni
riguardanti il sito                                                          6
                                                                    3
                                                                                 2

(privacy, requisiti tecnici, credits, copyright, dati societari)
-le barre delle informazioni rimangono sempre disponibili in
ogni pagina
6) sezione 500 News
7) possibilità di cliccare il “mi piace” di facebook, twitter,
flickr, youtube.
8) disponibilità newsletter                                         8
                                                                                             7
                                                                                         4

                                                                                     5



                                                  Fiat 500

               Lancia Y                                                 Mini Cooper          Ford Fiesta
17
8) possibilità di scaricare il catalogo dell’automobile         8

9) registrazione alla newsletter
10) possibilità di richiedere il test drive




 9                                                         10




                                                Fiat 500

              Lancia Y                                              Mini Cooper   Ford Fiesta
18




                 VIDEO




           Fiat 500

Lancia Y                 Mini Cooper   Ford Fiesta
Scheda sito web - Mini Cooper
20

COERENZA GRAFICA E ARCHITETTURA SITO
Per quanto riguarda l’architettura nella home page non è presente la mappa del sito, mentre è disponibile la traduzione in
moltissime lingue. L’apparato di navigazione non è semplice e immediato: le informazioni e i modelli mini sono numerosi,
rendono il sito dispersivo. Sono presenti talvota navigazioni trasversali complesse. Ogni pagina ha un proprio titolo,
tuttavia non vi è una differenziazione visiva fra le le varie sezioni del sito: lo sfondo è sempre nero e i testi hanno font
bianco, sono utilizzati pochi colori, solo per le immagini e perle tabelle.
Dal punto di vista della comunicazione si può notare che, per facilitare la visitazione del sito, non sono presenti layout che
richiedono scroll orizzontali. Nella home page del sito sono inseriri i tratti distintivi della brand image della Mini, infatti in
tutto il sito vengono utilizzati i colori bianco e nero, per rendere facile la lettura e per evitare l’utilizzo di troppi
colori contemporaneamente.
Per quanto riguarda i caratteri tipografici e la struttura del testo, sono presenti periodi non eccessivamente lunghi, per
non appesantire la lettura. Non è possibile ingrandire il testo, mentre, per rendere più omogeneo il tutto, viene utilizzato
un unico carattere tipografico bastoni,adottato in diverse dimensioni.




                                                                                  Mini Cooper

              Lancia Y                          Fiat 500                                                            Ford Fiesta
21

www.mini.com                                                                      1



1) Possibilità di tradurre il sito in innumerevoli lingue
2) Logo mini non cliccabile
3) Nella parte sinistra del sito troviamo i tre modelli mini in
vendita, cliccabili
4) Personalizzazione Mini
5) Il pulsante home è sempre disponibile in ogni pagina
6) Il menu è nella parte superiore del sito
- Non è presente la mappa del sito
                                                                          5              6
- Possibile download delle immagini                               2




7) Accesso al blog Mini
                                                                  3                               8
8) Banner pubblicitario della nuova “Mini Countryman”
9) Menù con i nuovi modelli della Mini                                4
10) Menù inferiore con tutte le info: I tuoi dati, FAQ,
                                                                                                  9
newsletter, contatti, note legali, privacy, garanzia,
sito BMW.                                                                     7

- Non si può visualizzare il sito a schermo intero
                                                                                             10




                                                                                  Mini Cooper

               Lancia Y                         Fiat 500                                              Ford Fiesta
22
- Cliccando sulla barra delle informazioni, le voci che               11
vengono visualizzate sono troppo dispersive, non hanno un
ordine
11) Possibilità di richiedere brochure, test drive e
preventivo
12) Possibilità di confronto dei vari modelli
13) Possibilità di scaricare un gioco sul proprio dispositivo,
per testare la propria abilità al volante
14) Ogni sezione ha l’opzione “dillo a un amico”, per essere
sempre presenti sui vari social network

  12                                                             13

                                                                                    14




                                                                      Mini Cooper

              Lancia Y                          Fiat 500                             Ford Fiesta
23




               VIDEO




                       Mini Cooper

Lancia Y   Fiat 500                  Ford Fiesta
24




Scheda sito web - Ford Fiesta
25

COERENZA GRAFICA E ARCHITETTURA SITO
Per quanto riguarda l’architettura nella home page non è presente la mappa del sito web e non è disponibile la traduzione
in altre lingue.
La navigazione è semplice ed essenziale. Non abbiamo duplicazioni di menu sulla stessa pagina. C’è sempre un titolo base
che caratterizza ogni sezione. Non troviamo una differenziazione visiva fra le varie pagine del sito (i colori utilizzati sono
sempre coerenti). Dal punto di vista della comunicazione, per facilitare la visione del sito, non sono presenti layout che
richiedono scroll orizzontali.
Nella home page sono inseriti parzialmente i tratti distintivi della brand image della Ford. Viene utilizzato frequentemente
il nero e il viola, non lasciando spazio al blu che caratterizza il logo della casa.
Per quanto riguarda i caratteri tipografici e la struttura del testo, sono presenti periodi brevi, per rendere più scorrevole
e gradevole la lettura. Non è possibile ingrandire il testo, mentre per rendere più
omogeneo il tutto, viene utilizzato un solo carattere tipografico bastoni, non sempre adottato nelle stesse dimensioni.
Nella home page, il colore del testo nella barra delle informazioni, non
massimizza pienamente la leggibilità.




                                                                                                                  Ford Fiesta

               Lancia Y                         Fiat 500                          Mini Cooper
26

www.fiesta.ford.eu                                                      1



1) caricamento iniziale (lento)
2) possibilità di accendere al social network flirk per
condividere il proprio punto di vista
3) logo Ford nn cliccabile
4) barra inferiore per le info.
5) audio, con opzione off
6) possibilità della visione del sito a schermo intero
7) possibilità di scaricare le immmagine nella sezione
download (per tornare all’homepage c’è una X a sinistra)

                                                                                             3
                                                                   2

8) possibilità di scaricare lo spot della Fiesta
-la guida (?) non funziona per tutte le sezioni
9) sezione informativa sulla privacy e termini e condizioni
10) sezioni esterni e interni (parte testuale e video)
-barra informazione e home sempre presenti in tutte le
pagine
                                                                                                 7
                                                              10            8
-colori caldi e coerenti nelle diverse pagine del sito
                                                                                     5   6

                                                                        4                9


                                                                                     Ford Fiesta

              Lancia Y                             Fiat 500            Mini Cooper
27
11) scelta colori della macchina                         8

12) possibilità di richiedere la brochure
13) possibilità di richiedere il test drive
-possibilità di ricevere newsletter




                                                                           11




12                                  13




                                                                                Ford Fiesta

               Lancia Y                       Fiat 500       Mini Cooper
28




                 VIDEO




                                       Ford Fiesta

Lancia Y   Fiat 500      Mini Cooper
29

PARAMETRI DI VALUTAZIONE
Velocità: parametro rilevante in questo ambito, in quanto l’utente cerca e apprezza un sito dinamico e dalle risposte
immediate; vari studi nel corso dei decenni hanno infatti sostenuto che il tempo limite entro il quale la reazione di un
sistema di elaborazione è percepita dalla maggioranza degli utenti come istantanea è di 0.1 secondi, mentre 1.0 secondi
è un tempo di reazione percepito come rapido e 10 secondi è il tempo limite entro il quale è possibile trattenere l’utente
medio in una situazione di attesa.



Organizzazione contenuti: architettura del sito, struttura generale del sito e modalità di navigazione che rende disponibili
agli utenti; può essere definita anche come “architettura informativa” del sito, cioè il modo in cui questo è strutturato in
funzione dei suoi contenuti informativi.



Coerenza grafica: utilizzo dei colori per evidenziare la Gestalt delle pagine; impiego di colori diversi per distinguere
contenuti diversi, in modo consistente, tenendo in considerazione anche le esigenze degli utenti affetti da daltonismo;
evitare l’utilizzo di troppi colori contemporaneamente e di colori che siano in disaccordo con le associazioni di significato
più diffuse; scelta del colore del testo e dello sfondo in modo tale da massimizzare la leggibilità; evitare testi con colori
diversi, soprattutto se “lontani” nello spettro dei colori.




Parametri di Valutazione
30
Branding: coerenza delle pagine con la brand image; inserimento nel sito, e in particolar modo nella home page, dei tratti
distintivi della brand image, di cui è importante garantire visibilità.



Accessibilità da Web: il Web (nella visione del W3C -World Wide Web Consortium-) si propone di garantire accessibilità
universale del sito, anche a utenti disabili. Caratteristica composita: per valutarla occorre considerare i tempi di accesso al
sito (efficienza del server e delle infrastrutture di rete disponibili; dimensioni delle pagine del sito), facilità di reperimento
del sito nella Rete, possibilità di accedere a informazioni del sito attraverso più dispositivi, compresi quelli per disabili.




Parametri di Valutazione
31

DIAGRAMMA QUALITÀ
Nella valutazione della qualità dei diversi siti possiamo attribuire un punteggio a ciascun parametro, e quindi visualizzare
in forma sintetica il “profilo di qualità” dei siti mediante un diagramma a stella.


                                                     VELOCITA’

                                    ORGANIZZAZIONE CONTENUTI

                                             COERENZA GRAFICA

                                                     BRANDING

                                          ACCESSIBILITA’ DA WEB




Diagramma Qualità
32

DIAGRAMMA “LANCIA Y”

                                  Velocità
                                   10
                                    9
                                    8
                                    7
                                    6
                                    5
                                    4                         LANCIA Y
       Accessibilità                         Organizzazioni
                                    3
         da Web                                Contenuti      Valore Medio
                                    2
                                    1
                                    0
                                                              Valore Massimo




                       Branding




www.lanciaypsilon.it
33

DIAGRAMMA “FIAT 500”

                                 Velocità
                                  10
                                   9
                                   8
                                   7
                                   6
                                   5
                                   4                         FIAT 500
      Accessibilità                         Organizzazioni
                                   3
        da Web                                Contenuti      Valore Medio
                                   2
                                   1
                                   0
                                                             Valore Massimo




                      Branding




www.fiat500.com
34

DIAGRAMMA “MINI COOPER”

                                Velocità
                                 10
                                  9
                                  8
                                  7
                                  6
                                  5
                                  4                         MINI Cooper
     Accessibilità                         Organizzazioni
                                  3
       da Web                                Contenuti      Valore Medio
                                  2
                                  1
                                  0
                                                            Valore Massimo




                     Branding




www.mini.com
35

DIAGRAMMA “FORD FIESTA”

                                 Velocità
                                  10
                                   9
                                   8
                                   7
                                   6
                                   5
                                   4                         FORD Fiesta
      Accessibilità                         Organizzazioni
                                   3
        da Web                                Contenuti      Valore Medio
                                   2
                                   1
                                   0
                                                             Valore Massimo




                      Branding




www.fiesta.ford.eu
36

DIAGRAMMA COMPLETO

                                 Velocità
                                  10
                                   9
                                   8
                                   7
                                   6
                                   5
                                   4                                    LANCIA Y
      Accessibilità                               Organizzazioni
                                   3
        da Web                                      Contenuti           FIAT 500
                                   2
                                   1                                    MINI Cooper
                                   0
                                                                        FORD Fiesta




                      Branding




www.lanciaypsilon.it - www.fiat500.com - www.mini.com - www.fiesta.ford.eu
37

TASK TIME
L’analisi del Task Time per i nostri quattro siti consiste nel conteggio di click necessari per svolgere una determinata
funzione: in questo caso conteremo i click necessari per giungere dalla home page del sito alla pagina del catalogo, del
motore, del test drive e infine degli allestimenti.
Ora procediamo con il test.




Task Time
38

www.lanciaypsilon.it
CATALOGO: home > catalogo > apri file > catalogo
Tempo: 3 click
Risultato: discreto


MOTORE: home > motorizzazioni > motori
Tempo: 2 click
Risultato: buono


TEST DRIVE: home > test drive
Tempo: 1 click
Risultato: ottimo


ALLESTIMENTI: home > allestimenti
Tempo: 1 click
Risultato: ottimo



Il sito della Lancia Ypsilon è nel complesso semplice e funzionale, pochi click per raggiungere facilmente le informazioni
desiderate.



              Lancia Y

                                             Fiat 500                        Mini Cooper                     Ford Fiesta
39

www.fiat500.com
CATALOGO: home > 500 > design/abitabilità/personalizzazione/allestimenti/motori/sicurezza > catalogo 500
Tempo: 3 click
Risultato: discreto


MOTORE: home > 500 > motori
Tempo: 2 click
Risultato: buono


TEST DRIVE: home > prova su strada
Tempo: 1 click
Risultato: ottimo


ALLESTIMENTI: home > 500 > allestimenti
Tempo: 2 click
Risultato: buono



Il sito della Fiat 500 è complessivamente buono. Pochi click per visualizzare le pagine desiderate. Il catalogo non è
immediatamente reperibile, non ha una sua precisa collocazione.



                                            Fiat 500

              Lancia Y                                                    Mini Cooper                      Ford Fiesta
40

www.mini.com
CATALOGO: home > gamma > scarica brochure > catalogo > apri fle
Tempo: 4 click
Risultato: sufficiente


MOTORE: home > Mini > scelta della Mini > guida > motore
Tempo: 4 click
Risultato: sufficiente


TEST DRIVE: home > gamma > richiedi test drive
Tempo: 2 click
Risultato: buono


ALLESTIMENTI: home > gamma
Tempo: 1 click
Risultato: ottimo



Il sito della Mini contiene molte informazioni. Le pagine desiderate non sono immediatamente reperibili.
Un poco dispersivo.



                                                                            Mini Cooper

              Lancia Y                       Fiat 500                                                      Ford Fiesta
41

www.fiesta.ford.eu
CATALOGO: home > richiedi la brochure > compilazione dati/continua
Tempo: 2 click
Risultato: buono


MOTORE: informazione non reperibile
Tempo: informazione non reperibile
Risultato: insufficiente


TEST DRIVE: home > richiedi test drive
Tempo: 1 click
Risultato: ottimo


ALLESTIMENTI: informazione non reperibile
Tempo: informazione non reperibile
Risultato: insufficiente




Il sito della Ford fiesta ha lacune, in alcuni casi le informazioni desiderate non sono reperibili. Da migliorare.



                                                                                                                     Ford Fiesta

              Lancia Y                         Fiat 500                         Mini Cooper
42

ANALISI TASK
CONFIGURAZIONE AUTOMOBILE




Ora vogliamo creare la nostra automobile. Vediamo quali fasi portano alla personalizzazione.




Configurazione Automobile
43

www.lanciaypsilon.it
1) Home > car configurator > configura la tua Ypsilon




             Lancia Y

                                              Fiat 500   Mini Cooper   Ford Fiesta
44
2) Ora possiamo scegliere le motorizzazioni, gli allestimenti, i colori, gli interni, i cerchi e gli optional.
Nella parte superiore della pagina è possibile visualizzare tutte le caratteristiche prescelte, e soprattutto il prezzo
dell’automobile.




              Lancia Y

                                                Fiat 500                          Mini Cooper                    Ford Fiesta
45
3) Una volta conclusa la personalizzazione abbiamo la possibilità di stampare il contenuto e di accedere alla sezione
concessionari. Possiamo inoltre richiedere il test drive e il customer service.




              Lancia Y

                                              Fiat 500                            Mini Cooper            Ford Fiesta
46

www.fiat500.com
1) Home > configura 500




                          Fiat 500

            Lancia Y                 Mini Cooper   Ford Fiesta
47
2) Prima di tutto possiamo scegliere il colore dell’automobile cliccando sulle icone che troviamo nella parte inferiore della
pagina.
Cliccando sulla sfera si possono poi selezionare gli esterni, il motore e gli interni. L’opzione “virtual room” permette di
creare un video con protagonista la propria 500. Anche in questo caso troviamo la sezione concessionari.
L’opzione “dillo a un amico” permette di invitare un amico alla personalizzazione della 500.




                                               Fiat 500

              Lancia Y                                                         Mini Cooper                      Ford Fiesta
48

www.mini.it
1) Home > personalizza la tua Mini > selezionare il modello




                                                              Mini Cooper

             Lancia Y                        Fiat 500                       Ford Fiesta
49
2) Ora possiamo procedere con la personalizzazione: esterni, interni, pacchetti equipaggiamento e options. Cliccando le
varie opzioni apparirà anche il prezzo.




                                                                           Mini Cooper

             Lancia Y                       Fiat 500                                                      Ford Fiesta
50
3) L’opzione “visualizza menu” permette di caricare la configurazione, salvare la configurazione, paragonare modelli,
inviare configurazione (anche a cellulare) e stampare i contenuti.
In ogni momento è possibile accedere ai dettagli della personalizzazione con relativo prezzo.




                                                                             Mini Cooper

             Lancia Y                        Fiat 500                                                    Ford Fiesta
51
4) Arrivati al termine del procedimento si può richiedere un preventivo al partner Mini di propria scelta e si può procedere
con una nuova configurazione.
Le configurazioni appena analizzate si possono ritenere complete. I passaggi sono semplici e intuitivi.
La configurazione di Lancia Ypsilon è semplice ed essenziale.
Nel caso di Mini abbiamo più dettagli e più opzioni relative al processo.
Anche la configurazione della 500 è completa, l’unica mancanza è quella relativa al prezzo.




                                                                               Mini Cooper

              Lancia Y                        Fiat 500                                                         Ford Fiesta
52

www.fiesta.ford.eu




                 La configurazione dell’automobile non è disponibile.




                                                                         Ford Fiesta

      Lancia Y              Fiat 500                       Mini Cooper
53

CONCLUSIONE
Dopo aver preso visione del sito www.fiesta.ford.eu è stato fatto un confronto con i siti
automobilistici www.lanciaypsilon.it, www.fiat500.com, e www.mini.com, al fine di cogliere
gli aspetti salienti dello stesso e di individuare eventuali carenze.
Dalla considerazione dei vari elementi in essi presenti e dei diagrammi di qualità stilati in base
ai parametri di valutazione, quali velocità, organizzazione contenuti, coerenza grafica, branding e accessibilità da Web,
è risultato che il sito che risponde meglio, nei contenuti e nell’impostazione, alle aspettative dell’utente, è www.mini.
com.




Conclusione
54

RESTYLING SITO
Nel nostro sito di riferimento possono essere evidenziati alcuni elementi che, con opportune modifiche, lo completerebbero
nel contenuto e lo migliorerebbero nella fruibilità:
- semplificare l’indirizzo web
- rendere cliccabile il logo in ogni pagina del sito;
- aggiungere la mappa del sito;
- aggiungere la sezione “car configuration”
- alleggerire i contenuti delle pagine, in modo da velocizzarne il caricamento;
- inserire il titolo in ogni pagina, in quanto la sua sola presenza nella home page e nella pagina “esterni” è insufficiente a
dare coerenza all’impostazione;
- differenziare visivamente le varie sezioni del sito (per esempio usando colori diversi);
- rendere il testo più leggibile, cambiandone le dimensioni e il colore;
- coinvolgere l’utente, fornendogli la possibilità di esprimere suggerimenti, per esempio tramite un forum;
- scegliere i colori dello sfondo e del testo in modo tale da massimizzarne la leggibilità: la barra presente nella parte
inferiore delle pagine risulta infatti poco comprensibile a causa del colore dello sfondo troppo scuro e del carattere
tipografico light;
- introdurre la traduzione del sito in altre lingue (almeno in inglese), dal momento che il sito è “.eu”;
- aggiungere informazioni sul motore dell’automobile e la pagina “allestimenti”.




Restyling sito
55
                 Home Page Ford Fiesta, originale




                                                    Home Page Ford Fiesta, restyling




Restyling sito
GRAZIE PER L’ATTENZIONE




Francesca Colleoni, Chiara dall’Olio, Stefano Iasilli

Mais conteúdo relacionado

Semelhante a Analisi siti di Automobili (Web Design NABA 2010)

Il Visual Web Design del 2011 e Tendenze per il 2012
Il Visual Web Design del 2011 e Tendenze per il 2012Il Visual Web Design del 2011 e Tendenze per il 2012
Il Visual Web Design del 2011 e Tendenze per il 2012
FormazioneTurismo
 
Architettura Dellinformazione_SdcExpert@Work
Architettura Dellinformazione_SdcExpert@WorkArchitettura Dellinformazione_SdcExpert@Work
Architettura Dellinformazione_SdcExpert@Work
Roberta Sanzani
 
2012-03+Gerardo+Sacco+-+rapporto+web+annuale
2012-03+Gerardo+Sacco+-+rapporto+web+annuale2012-03+Gerardo+Sacco+-+rapporto+web+annuale
2012-03+Gerardo+Sacco+-+rapporto+web+annuale
UCSC
 
Come realizzare un sito, consigli di Enrico Forzato
Come realizzare un sito, consigli di Enrico ForzatoCome realizzare un sito, consigli di Enrico Forzato
Come realizzare un sito, consigli di Enrico Forzato
Enrico Forzato
 
[Document] La creazione di una Start-Up
[Document] La creazione di una Start-Up [Document] La creazione di una Start-Up
[Document] La creazione di una Start-Up
Michele Palumbo
 

Semelhante a Analisi siti di Automobili (Web Design NABA 2010) (20)

Geomarketing. La dimensione spaziale che migliora le vendite, il marketing, l...
Geomarketing. La dimensione spaziale che migliora le vendite, il marketing, l...Geomarketing. La dimensione spaziale che migliora le vendite, il marketing, l...
Geomarketing. La dimensione spaziale che migliora le vendite, il marketing, l...
 
Francesco Di Santo - Curriculum e Portfolio 2019
Francesco Di Santo - Curriculum e Portfolio 2019Francesco Di Santo - Curriculum e Portfolio 2019
Francesco Di Santo - Curriculum e Portfolio 2019
 
Vademecum reti
Vademecum retiVademecum reti
Vademecum reti
 
Come usare il web per vendere online - Anteprima food wine web
Come usare il web per vendere online - Anteprima food wine webCome usare il web per vendere online - Anteprima food wine web
Come usare il web per vendere online - Anteprima food wine web
 
Project Work SICIS
Project Work SICISProject Work SICIS
Project Work SICIS
 
Grafica - SLIDE CORSO.pdf
Grafica - SLIDE CORSO.pdfGrafica - SLIDE CORSO.pdf
Grafica - SLIDE CORSO.pdf
 
Internazionalizzazione web - SMAU - Milano Ottobre 2013
Internazionalizzazione web - SMAU - Milano Ottobre 2013Internazionalizzazione web - SMAU - Milano Ottobre 2013
Internazionalizzazione web - SMAU - Milano Ottobre 2013
 
AdLINK Internet Media@Case Study Automotive Market
AdLINK Internet Media@Case Study Automotive MarketAdLINK Internet Media@Case Study Automotive Market
AdLINK Internet Media@Case Study Automotive Market
 
Vademecum operativo per le Reti d'Impresa
Vademecum operativo per le Reti d'ImpresaVademecum operativo per le Reti d'Impresa
Vademecum operativo per le Reti d'Impresa
 
Automotive 2020 futuro della filiera italiana
Automotive 2020 futuro della filiera italianaAutomotive 2020 futuro della filiera italiana
Automotive 2020 futuro della filiera italiana
 
Il Visual Web Design del 2011 e Tendenze per il 2012
Il Visual Web Design del 2011 e Tendenze per il 2012Il Visual Web Design del 2011 e Tendenze per il 2012
Il Visual Web Design del 2011 e Tendenze per il 2012
 
Digital Media: cogliere le opportunità
Digital Media: cogliere le opportunitàDigital Media: cogliere le opportunità
Digital Media: cogliere le opportunità
 
Architettura Dellinformazione_SdcExpert@Work
Architettura Dellinformazione_SdcExpert@WorkArchitettura Dellinformazione_SdcExpert@Work
Architettura Dellinformazione_SdcExpert@Work
 
Web Marketing - Convegno Forlì
Web Marketing - Convegno ForlìWeb Marketing - Convegno Forlì
Web Marketing - Convegno Forlì
 
LikeTourism #2014 - I 10 Comandamenti per il tuo sito web
LikeTourism #2014 - I 10 Comandamenti per il tuo sito webLikeTourism #2014 - I 10 Comandamenti per il tuo sito web
LikeTourism #2014 - I 10 Comandamenti per il tuo sito web
 
2012-03+Gerardo+Sacco+-+rapporto+web+annuale
2012-03+Gerardo+Sacco+-+rapporto+web+annuale2012-03+Gerardo+Sacco+-+rapporto+web+annuale
2012-03+Gerardo+Sacco+-+rapporto+web+annuale
 
Come realizzare un sito, consigli di Enrico Forzato
Come realizzare un sito, consigli di Enrico ForzatoCome realizzare un sito, consigli di Enrico Forzato
Come realizzare un sito, consigli di Enrico Forzato
 
[Document] La creazione di una Start-Up
[Document] La creazione di una Start-Up [Document] La creazione di una Start-Up
[Document] La creazione di una Start-Up
 
Video B2BTrade: scopri come trovare all'estero nuovi sbocchi commerciali
Video B2BTrade: scopri come trovare all'estero nuovi sbocchi commercialiVideo B2BTrade: scopri come trovare all'estero nuovi sbocchi commerciali
Video B2BTrade: scopri come trovare all'estero nuovi sbocchi commerciali
 
Generazione 2.0 made in italy
Generazione 2.0 made in italyGenerazione 2.0 made in italy
Generazione 2.0 made in italy
 

Mais de Roberto Dadda

Mais de Roberto Dadda (20)

01 usability
01 usability01 usability
01 usability
 
02 unusability
02 unusability02 unusability
02 unusability
 
03 users models
03 users models03 users models
03 users models
 
04 user centered design
04 user centered design04 user centered design
04 user centered design
 
05 1 artifacts
05 1 artifacts05 1 artifacts
05 1 artifacts
 
05 2 artifacts
05 2 artifacts05 2 artifacts
05 2 artifacts
 
07 norms and standards
07 norms and standards07 norms and standards
07 norms and standards
 
08 vision and gestalt
08 vision and gestalt08 vision and gestalt
08 vision and gestalt
 
09 colors
09 colors09 colors
09 colors
 
10 form design
10 form design10 form design
10 form design
 
11 error management
11 error management11 error management
11 error management
 
12 tipography for the web
12 tipography for the web12 tipography for the web
12 tipography for the web
 
14 accessibility short
14 accessibility short14 accessibility short
14 accessibility short
 
13 equilibrium order time
13 equilibrium order time13 equilibrium order time
13 equilibrium order time
 
15 emotional design
15 emotional design15 emotional design
15 emotional design
 
Poli15 uffizi - 2016-02-03
Poli15   uffizi - 2016-02-03Poli15   uffizi - 2016-02-03
Poli15 uffizi - 2016-02-03
 
Poli15 careffour - 2015-12-01
Poli15   careffour - 2015-12-01Poli15   careffour - 2015-12-01
Poli15 careffour - 2015-12-01
 
Poli15 barbie - 20160202
Poli15   barbie - 20160202Poli15   barbie - 20160202
Poli15 barbie - 20160202
 
Poli15 guanda publishing - 2016-02-03
Poli15   guanda publishing - 2016-02-03Poli15   guanda publishing - 2016-02-03
Poli15 guanda publishing - 2016-02-03
 
Poli15 sansha
Poli15   sanshaPoli15   sansha
Poli15 sansha
 

Analisi siti di Automobili (Web Design NABA 2010)

  • 1. www.fiesta.ford.eu www.mini.com www.lanciaypsilon.it www.fiat500.com Progetto realizzato da: Francesca Colleoni Chiara Dall’Olio Stefano Iasilli
  • 2. INDICE 1) Progetto e obiettivi ..................................................................................................................... pag. 4 2) Descrizione Target ....................................................................................................................... pag. 5 2.1) Ragazzo 25/35 anni ........................................................................................................... pag. 6 2.2) Ragazzo 20/35 anni ........................................................................................................... pag. 7 2.3) Famiglia Giovane ............................................................................................................... pag. 8 3) Lancia Y ................................................................................................................................... pag. 9 3.1) Coerenza grafica ............................................................................................................. pag. 10 3.2) www.lanciaypsilon.it ........................................................................................................ pag. 11 3.3) Video ............................................................................................................................ pag. 13 4) Fiat 500 .................................................................................................................................. pag. 14 4.1) Coerenza grafica ........................................................................................................... pag. 15 4.2) www.fiat500.com ............................................................................................................. pag. 16 4.3) Video ............................................................................................................................ pag. 18 5) Mini Cooper ............................................................................................................................. pag. 19 5.1) Coerenza grafica ............................................................................................................. pag. 20 5.2) www.mini.com ................................................................................................................ pag. 21 5.3) Video ............................................................................................................................ pag. 23 6) Ford Fiesta .............................................................................................................................. pag. 24 6.1) Coerenza grafica ......................................................................................................... pag. 25
  • 3. 6.2) www.fiesta.ford.eu .......................................................................................................... pag. 26 6.3) Video ............................................................................................................................ pag. 28 7) Parametri di Valutazione ............................................................................................................. pag. 29 8) Diagramma di Qualità ................................................................................................................ pag. 31 8.1) Lancia Y ........................................................................................................................ pag. 32 8.2) Fiat 500 ....................................................................................................................... pag. 33 8.3) Mini Cooper ................................................................................................................... pag. 34 8.4) Ford Fiesta ................................................................................................................... pag. 35 8.5) Diagramma Completo ...................................................................................................... pag. 36 9) Task Time .............................................................................................................................. pag. 37 9.1) Lancia Y ........................................................................................................................ pag. 38 9.2) Fiat 500 ....................................................................................................................... pag. 39 9.3) Mini Cooper ................................................................................................................... pag. 40 9.4) Ford Fiesta ................................................................................................................... pag. 41 10) Configurazione Automobile ...................................................................................................... pag. 42 10.1) Lancia Y ..................................................................................................................... pag. 43 10.2) Fiat 500 .................................................................................................................... pag. 46 10.3) Mini Cooper ................................................................................................................ pag. 48 10.4) Ford Fiesta ................................................................................................................ pag. 52 11) Conclusione ......................................................................................................................... pag. 53 12) Restyling Sito ...................................................................................................................... pag. 54
  • 4. 4 PROGETTO E OBIETTIVI Il settore automobilistico ha catalizzato l’attenzione e l’interesse di coloro che nutrono una spiccata predilezione per tutto ciò che esprime innovazione tecnologica, design, funzionalità e praticità. Questi elementi sono riscontrabili nei siti delle case automobilistiche, applicati ai diversi modelli proposti sul mercato. Dato che nel progettare siti web occorre pensare agli utenti che li utilizzeranno, i sistemi di navigazione, il layout del sito, l’architettura dell’informazione e i testi sono tutti fattori da considerare per permettere una navigazione semplice ed efficiente/proficua. Il presente lavoro ha per oggetto l’analisi comparata del sito www.fiesta.ford.eu con i siti di Fiat 500, Lancia Ypsilon e Mini Cooper, riguardanti automobili di analoga categoria. Lo studio prende in considerazione la presentazione nel web dei quattro modelli suddetti e, attraverso la riflessione sull’impostazione e la scansione delle informazioni offerte, ha l’obiettivo di suggerire alcune modifiche perché il sito www.fiesta.ford.eu risulti più efficace. Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 5. 5 DESCRIZIONE TARGET Il target di utenti potrà presentare due tipologie di approccio: la ricerca di informazioni sui vari ambiti,- quali per esempio costo, prestazioni, design, allestimenti, consumi- e il soddisfacimento della necessità dell’acquisto. Il comune denominatore è costituito dalla scelta dell’utilizzo del web per la risposta alle rispettive esigenze. Target
  • 6. 6 Ragazzo/a di 25-35 anni Simone è un utente giovane, assiduo utilizzatore del web per motivi di studio o di lavoro, si aspetta di trovare con facilità e velocità ciò che cerca: informazioni chiare e ben organizzate riguardo l’automobile a cui è interessato, corredate da dati tecnici, da una grafica semplice e da una impaginazione logica. Ha lo scopo di utilizzare le informazioni per l’acquisto di una vettura che soddisfi le proprie esigenze e quindi darà particolare rilievo alla proposta più allettante e alla migliore offerta. ne Simo Target Ragazzo
  • 7. 7 Ragazzo/a di 20-35 anni Rebecca è una giovane dinamica, attenta verso tutto ciò che è indice di novità al passo con la moda, vuole essere aggiornata sulle ultime conquiste nel campo della tecnologia e del design. È conquistata da una grafica accattivante, moderna e originale, che risponde alle proprie esigenze di estetica più che di praticità e di funzionalità, in quanto non è interessata all’acquisto, ma al soddisfacimento della propria curiosità e alla ricerca del “trendy” e del nuovo. a R ebecc Target Ragazza
  • 8. 8 Famiglia giovane Elisa e Matteo hanno un bambino, Pietro, di tre anni, sono giovani e felici della bella famigliola che hanno creato. Lavorano entrambi, sono molto dinamici, amano passare i finesettimana fuori città, in montagna o al lago, adorano circondarsi di amici, con i quali si incontrano spesso il sabato sera per una cenetta, per parlare e per giocare a carte, la loro passione. Matteo insieme a Pietro, vuole fare una bella sorpresa a Elisa, regalandole un’automobile che rispecchi il suo carattere vivace, sprint, elegante e nello stesso tempo sportivo. Potrà usarla per svolgere le sue varie commissioni, tra le quali fare le compere e portare Pietro alla Scuola materna, ma anche per uscire insieme ai suoi due amori: Matteo e Pietro. Pietro Elisa o Matte Target Famiglia Giovane
  • 9. Scheda sito web - Lancia Y
  • 10. 10 COERENZA GRAFICA E ARCHITETTURA SITO Per quanto riguarda l’architettura nella home page non è presente la mappa del sito web e non è disponibile la traduzione in altre lingue. La navigazione è semplice ed essenziale.Non abbiamo duplicazioni di menu sulla stessa pagina. C’è sempre un titolo base che caratterizza ogni sezione.Non troviamo una differenziazione visiva fra le varie pagine del sito (i colori utilizzati sono sempre coerenti). Dal punto di vista della comunicazione si può notare che, per facilitare la visitazione del sito, non sono presenti layout che richiedono scroll orizzontali (ad eccezione della sezione “Fashion Trip”). Nella home page del sito sono inseriti parzialmente i tratti distintivi della brand image della Lancia. Viene utulizzato specialmente il colore nero e bianco, lasciando poco spazio al blu (vedi logo Lancia). Per quanto riguarda i caratteri tipografici e la struttura del testo, sono presenti periodi non troppo lunghi per rendere più scorrevole e gradevole la lettura. Non è comunque possibile ingrandire il testo, mentre, per rendere più omogeneo il tutto, viene utilizzato un solo carattere tipografico bastoni, adottato sempre nelle stesse dimensioni. Nella home page, colore testo e sfondo, non massimizzano pienamente la leggibilità della pagina. Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 11. 11 www.lanciaypsilon.it 1) filmato iniziale in flash..possibilità di “skip intro” 2) barra informazioni parte superiore (allestimenti, motorizzazioni, tecnologia, car configuration) con menu a tendina 1 3) possibilità di visualizzare il sito a schermo intero 4) logo lancia non è cliccabile 5) sezione fashion trip: possibilità di sfogliare album 2 fotografici e ascoltare pezzi musicali 9 8 3 8 8 5 NOTA: i trip nn disponibili sono giustificati con la scritta coming soon 6) barra info parte inferiore, non a tendina 7) disclaimer: info riguardanti il sito (illustrazioni e 8 descrizioni) 7 8) le barre delle info rimangono sempre disponibili in ogni pagina 4 9) pulsante home cliccabile per ritornare alla pagina iniziale 6 8 Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 12. 12 10) possibilità di scaricare immagini della macchina 11) la parte descrittiva in ogni pagina è possibili ridurla a 12 icona per garantire la vista completa della macchina sullo sfondo 11 12) sezione car configuration 13) possibilità di scaricare il catalogo 14) sezione lancia ecochic 10 15) possibilità di richiedere il test drive 16) possibilità di registrarsi al sito 17) sezione EXPERIENCE --> vivere la lancia sui più noti social network (facebook, youtube ecc..) 13 14 15 16 17 Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 13. 13 VIDEO Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 14. 14 Scheda sito web - FIat 500
  • 15. 15 COERENZA GRAFICA E ARCHITETTURA SITO Per quanto riguarda l’architettura nella home page è presente la mappa del sito web, è disponibile la traduzione in venticinque lingue, vi è un apparato di navigazione semplice, evita duplicazioni di menu sulla stessa pagina o navigazioni trasversali complesse, offre sempre un titolo alle pagine, e tuttavia non vi è una differenziazione visiva fra le varie sezioni del sito (il colore utilizzato per i titoli è sempre lo stesso). Dal punto di vista della comunicazione invece si può notare che, per facilitare la visitazione del sito, non sono presenti layout che richiedano scroll orizzontali, nella home page del sito sono inseriti i tratti distintivi della brand image della Fiat, in tutto il sito viene utilizzato un colore caldo, il rosso, per guidare l’attenzione dell’utente su specifiche aree della pagina, e per evitare il fastidioso utilizzo di troppi colori contemporaneamente; per quanto riguarda i caratteri tipografici e la struttura del testo, sono presenti periodi abbastanza lunghi, rendendo talvolta difficile la lettura del testo e non è possibile l’ingrandimento del testo, mentre, per rendere più omogenei i testi, viene utilizzato un solo carattere tipografico bastoni, adottato in diverse dimensioni; i colori di testo e sfondo sono stati scelti per massimizzare la leggibilità delle pagine. Inoltre per coinvolgere l’utente è presente nella maggior parte delle pagine la possibilità di esprimere il proprio parere critico. Fiat 500 Lancia Y Mini Cooper Ford Fiesta
  • 16. 16 www.fiat500.com 1 1) filmato iniziale in flash, possibilità di “skip intro” 2) barra informazioni nella parte superiore della pagina; voci “500; 500C, 500 News, 500 Wants you” con menu a tendina. - non c’è la possibilità di visualizzare il sito a schermo intero 3) logo 500 cliccabile (porta nella pagina intro del sito) 4) barra informazioni posta sotto al menu; non è a tendina 5) parte inferiore della pagina: disclaimer, con informazioni riguardanti il sito 6 3 2 (privacy, requisiti tecnici, credits, copyright, dati societari) -le barre delle informazioni rimangono sempre disponibili in ogni pagina 6) sezione 500 News 7) possibilità di cliccare il “mi piace” di facebook, twitter, flickr, youtube. 8) disponibilità newsletter 8 7 4 5 Fiat 500 Lancia Y Mini Cooper Ford Fiesta
  • 17. 17 8) possibilità di scaricare il catalogo dell’automobile 8 9) registrazione alla newsletter 10) possibilità di richiedere il test drive 9 10 Fiat 500 Lancia Y Mini Cooper Ford Fiesta
  • 18. 18 VIDEO Fiat 500 Lancia Y Mini Cooper Ford Fiesta
  • 19. Scheda sito web - Mini Cooper
  • 20. 20 COERENZA GRAFICA E ARCHITETTURA SITO Per quanto riguarda l’architettura nella home page non è presente la mappa del sito, mentre è disponibile la traduzione in moltissime lingue. L’apparato di navigazione non è semplice e immediato: le informazioni e i modelli mini sono numerosi, rendono il sito dispersivo. Sono presenti talvota navigazioni trasversali complesse. Ogni pagina ha un proprio titolo, tuttavia non vi è una differenziazione visiva fra le le varie sezioni del sito: lo sfondo è sempre nero e i testi hanno font bianco, sono utilizzati pochi colori, solo per le immagini e perle tabelle. Dal punto di vista della comunicazione si può notare che, per facilitare la visitazione del sito, non sono presenti layout che richiedono scroll orizzontali. Nella home page del sito sono inseriri i tratti distintivi della brand image della Mini, infatti in tutto il sito vengono utilizzati i colori bianco e nero, per rendere facile la lettura e per evitare l’utilizzo di troppi colori contemporaneamente. Per quanto riguarda i caratteri tipografici e la struttura del testo, sono presenti periodi non eccessivamente lunghi, per non appesantire la lettura. Non è possibile ingrandire il testo, mentre, per rendere più omogeneo il tutto, viene utilizzato un unico carattere tipografico bastoni,adottato in diverse dimensioni. Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 21. 21 www.mini.com 1 1) Possibilità di tradurre il sito in innumerevoli lingue 2) Logo mini non cliccabile 3) Nella parte sinistra del sito troviamo i tre modelli mini in vendita, cliccabili 4) Personalizzazione Mini 5) Il pulsante home è sempre disponibile in ogni pagina 6) Il menu è nella parte superiore del sito - Non è presente la mappa del sito 5 6 - Possibile download delle immagini 2 7) Accesso al blog Mini 3 8 8) Banner pubblicitario della nuova “Mini Countryman” 9) Menù con i nuovi modelli della Mini 4 10) Menù inferiore con tutte le info: I tuoi dati, FAQ, 9 newsletter, contatti, note legali, privacy, garanzia, sito BMW. 7 - Non si può visualizzare il sito a schermo intero 10 Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 22. 22 - Cliccando sulla barra delle informazioni, le voci che 11 vengono visualizzate sono troppo dispersive, non hanno un ordine 11) Possibilità di richiedere brochure, test drive e preventivo 12) Possibilità di confronto dei vari modelli 13) Possibilità di scaricare un gioco sul proprio dispositivo, per testare la propria abilità al volante 14) Ogni sezione ha l’opzione “dillo a un amico”, per essere sempre presenti sui vari social network 12 13 14 Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 23. 23 VIDEO Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 24. 24 Scheda sito web - Ford Fiesta
  • 25. 25 COERENZA GRAFICA E ARCHITETTURA SITO Per quanto riguarda l’architettura nella home page non è presente la mappa del sito web e non è disponibile la traduzione in altre lingue. La navigazione è semplice ed essenziale. Non abbiamo duplicazioni di menu sulla stessa pagina. C’è sempre un titolo base che caratterizza ogni sezione. Non troviamo una differenziazione visiva fra le varie pagine del sito (i colori utilizzati sono sempre coerenti). Dal punto di vista della comunicazione, per facilitare la visione del sito, non sono presenti layout che richiedono scroll orizzontali. Nella home page sono inseriti parzialmente i tratti distintivi della brand image della Ford. Viene utilizzato frequentemente il nero e il viola, non lasciando spazio al blu che caratterizza il logo della casa. Per quanto riguarda i caratteri tipografici e la struttura del testo, sono presenti periodi brevi, per rendere più scorrevole e gradevole la lettura. Non è possibile ingrandire il testo, mentre per rendere più omogeneo il tutto, viene utilizzato un solo carattere tipografico bastoni, non sempre adottato nelle stesse dimensioni. Nella home page, il colore del testo nella barra delle informazioni, non massimizza pienamente la leggibilità. Ford Fiesta Lancia Y Fiat 500 Mini Cooper
  • 26. 26 www.fiesta.ford.eu 1 1) caricamento iniziale (lento) 2) possibilità di accendere al social network flirk per condividere il proprio punto di vista 3) logo Ford nn cliccabile 4) barra inferiore per le info. 5) audio, con opzione off 6) possibilità della visione del sito a schermo intero 7) possibilità di scaricare le immmagine nella sezione download (per tornare all’homepage c’è una X a sinistra) 3 2 8) possibilità di scaricare lo spot della Fiesta -la guida (?) non funziona per tutte le sezioni 9) sezione informativa sulla privacy e termini e condizioni 10) sezioni esterni e interni (parte testuale e video) -barra informazione e home sempre presenti in tutte le pagine 7 10 8 -colori caldi e coerenti nelle diverse pagine del sito 5 6 4 9 Ford Fiesta Lancia Y Fiat 500 Mini Cooper
  • 27. 27 11) scelta colori della macchina 8 12) possibilità di richiedere la brochure 13) possibilità di richiedere il test drive -possibilità di ricevere newsletter 11 12 13 Ford Fiesta Lancia Y Fiat 500 Mini Cooper
  • 28. 28 VIDEO Ford Fiesta Lancia Y Fiat 500 Mini Cooper
  • 29. 29 PARAMETRI DI VALUTAZIONE Velocità: parametro rilevante in questo ambito, in quanto l’utente cerca e apprezza un sito dinamico e dalle risposte immediate; vari studi nel corso dei decenni hanno infatti sostenuto che il tempo limite entro il quale la reazione di un sistema di elaborazione è percepita dalla maggioranza degli utenti come istantanea è di 0.1 secondi, mentre 1.0 secondi è un tempo di reazione percepito come rapido e 10 secondi è il tempo limite entro il quale è possibile trattenere l’utente medio in una situazione di attesa. Organizzazione contenuti: architettura del sito, struttura generale del sito e modalità di navigazione che rende disponibili agli utenti; può essere definita anche come “architettura informativa” del sito, cioè il modo in cui questo è strutturato in funzione dei suoi contenuti informativi. Coerenza grafica: utilizzo dei colori per evidenziare la Gestalt delle pagine; impiego di colori diversi per distinguere contenuti diversi, in modo consistente, tenendo in considerazione anche le esigenze degli utenti affetti da daltonismo; evitare l’utilizzo di troppi colori contemporaneamente e di colori che siano in disaccordo con le associazioni di significato più diffuse; scelta del colore del testo e dello sfondo in modo tale da massimizzare la leggibilità; evitare testi con colori diversi, soprattutto se “lontani” nello spettro dei colori. Parametri di Valutazione
  • 30. 30 Branding: coerenza delle pagine con la brand image; inserimento nel sito, e in particolar modo nella home page, dei tratti distintivi della brand image, di cui è importante garantire visibilità. Accessibilità da Web: il Web (nella visione del W3C -World Wide Web Consortium-) si propone di garantire accessibilità universale del sito, anche a utenti disabili. Caratteristica composita: per valutarla occorre considerare i tempi di accesso al sito (efficienza del server e delle infrastrutture di rete disponibili; dimensioni delle pagine del sito), facilità di reperimento del sito nella Rete, possibilità di accedere a informazioni del sito attraverso più dispositivi, compresi quelli per disabili. Parametri di Valutazione
  • 31. 31 DIAGRAMMA QUALITÀ Nella valutazione della qualità dei diversi siti possiamo attribuire un punteggio a ciascun parametro, e quindi visualizzare in forma sintetica il “profilo di qualità” dei siti mediante un diagramma a stella. VELOCITA’ ORGANIZZAZIONE CONTENUTI COERENZA GRAFICA BRANDING ACCESSIBILITA’ DA WEB Diagramma Qualità
  • 32. 32 DIAGRAMMA “LANCIA Y” Velocità 10 9 8 7 6 5 4 LANCIA Y Accessibilità Organizzazioni 3 da Web Contenuti Valore Medio 2 1 0 Valore Massimo Branding www.lanciaypsilon.it
  • 33. 33 DIAGRAMMA “FIAT 500” Velocità 10 9 8 7 6 5 4 FIAT 500 Accessibilità Organizzazioni 3 da Web Contenuti Valore Medio 2 1 0 Valore Massimo Branding www.fiat500.com
  • 34. 34 DIAGRAMMA “MINI COOPER” Velocità 10 9 8 7 6 5 4 MINI Cooper Accessibilità Organizzazioni 3 da Web Contenuti Valore Medio 2 1 0 Valore Massimo Branding www.mini.com
  • 35. 35 DIAGRAMMA “FORD FIESTA” Velocità 10 9 8 7 6 5 4 FORD Fiesta Accessibilità Organizzazioni 3 da Web Contenuti Valore Medio 2 1 0 Valore Massimo Branding www.fiesta.ford.eu
  • 36. 36 DIAGRAMMA COMPLETO Velocità 10 9 8 7 6 5 4 LANCIA Y Accessibilità Organizzazioni 3 da Web Contenuti FIAT 500 2 1 MINI Cooper 0 FORD Fiesta Branding www.lanciaypsilon.it - www.fiat500.com - www.mini.com - www.fiesta.ford.eu
  • 37. 37 TASK TIME L’analisi del Task Time per i nostri quattro siti consiste nel conteggio di click necessari per svolgere una determinata funzione: in questo caso conteremo i click necessari per giungere dalla home page del sito alla pagina del catalogo, del motore, del test drive e infine degli allestimenti. Ora procediamo con il test. Task Time
  • 38. 38 www.lanciaypsilon.it CATALOGO: home > catalogo > apri file > catalogo Tempo: 3 click Risultato: discreto MOTORE: home > motorizzazioni > motori Tempo: 2 click Risultato: buono TEST DRIVE: home > test drive Tempo: 1 click Risultato: ottimo ALLESTIMENTI: home > allestimenti Tempo: 1 click Risultato: ottimo Il sito della Lancia Ypsilon è nel complesso semplice e funzionale, pochi click per raggiungere facilmente le informazioni desiderate. Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 39. 39 www.fiat500.com CATALOGO: home > 500 > design/abitabilità/personalizzazione/allestimenti/motori/sicurezza > catalogo 500 Tempo: 3 click Risultato: discreto MOTORE: home > 500 > motori Tempo: 2 click Risultato: buono TEST DRIVE: home > prova su strada Tempo: 1 click Risultato: ottimo ALLESTIMENTI: home > 500 > allestimenti Tempo: 2 click Risultato: buono Il sito della Fiat 500 è complessivamente buono. Pochi click per visualizzare le pagine desiderate. Il catalogo non è immediatamente reperibile, non ha una sua precisa collocazione. Fiat 500 Lancia Y Mini Cooper Ford Fiesta
  • 40. 40 www.mini.com CATALOGO: home > gamma > scarica brochure > catalogo > apri fle Tempo: 4 click Risultato: sufficiente MOTORE: home > Mini > scelta della Mini > guida > motore Tempo: 4 click Risultato: sufficiente TEST DRIVE: home > gamma > richiedi test drive Tempo: 2 click Risultato: buono ALLESTIMENTI: home > gamma Tempo: 1 click Risultato: ottimo Il sito della Mini contiene molte informazioni. Le pagine desiderate non sono immediatamente reperibili. Un poco dispersivo. Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 41. 41 www.fiesta.ford.eu CATALOGO: home > richiedi la brochure > compilazione dati/continua Tempo: 2 click Risultato: buono MOTORE: informazione non reperibile Tempo: informazione non reperibile Risultato: insufficiente TEST DRIVE: home > richiedi test drive Tempo: 1 click Risultato: ottimo ALLESTIMENTI: informazione non reperibile Tempo: informazione non reperibile Risultato: insufficiente Il sito della Ford fiesta ha lacune, in alcuni casi le informazioni desiderate non sono reperibili. Da migliorare. Ford Fiesta Lancia Y Fiat 500 Mini Cooper
  • 42. 42 ANALISI TASK CONFIGURAZIONE AUTOMOBILE Ora vogliamo creare la nostra automobile. Vediamo quali fasi portano alla personalizzazione. Configurazione Automobile
  • 43. 43 www.lanciaypsilon.it 1) Home > car configurator > configura la tua Ypsilon Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 44. 44 2) Ora possiamo scegliere le motorizzazioni, gli allestimenti, i colori, gli interni, i cerchi e gli optional. Nella parte superiore della pagina è possibile visualizzare tutte le caratteristiche prescelte, e soprattutto il prezzo dell’automobile. Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 45. 45 3) Una volta conclusa la personalizzazione abbiamo la possibilità di stampare il contenuto e di accedere alla sezione concessionari. Possiamo inoltre richiedere il test drive e il customer service. Lancia Y Fiat 500 Mini Cooper Ford Fiesta
  • 46. 46 www.fiat500.com 1) Home > configura 500 Fiat 500 Lancia Y Mini Cooper Ford Fiesta
  • 47. 47 2) Prima di tutto possiamo scegliere il colore dell’automobile cliccando sulle icone che troviamo nella parte inferiore della pagina. Cliccando sulla sfera si possono poi selezionare gli esterni, il motore e gli interni. L’opzione “virtual room” permette di creare un video con protagonista la propria 500. Anche in questo caso troviamo la sezione concessionari. L’opzione “dillo a un amico” permette di invitare un amico alla personalizzazione della 500. Fiat 500 Lancia Y Mini Cooper Ford Fiesta
  • 48. 48 www.mini.it 1) Home > personalizza la tua Mini > selezionare il modello Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 49. 49 2) Ora possiamo procedere con la personalizzazione: esterni, interni, pacchetti equipaggiamento e options. Cliccando le varie opzioni apparirà anche il prezzo. Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 50. 50 3) L’opzione “visualizza menu” permette di caricare la configurazione, salvare la configurazione, paragonare modelli, inviare configurazione (anche a cellulare) e stampare i contenuti. In ogni momento è possibile accedere ai dettagli della personalizzazione con relativo prezzo. Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 51. 51 4) Arrivati al termine del procedimento si può richiedere un preventivo al partner Mini di propria scelta e si può procedere con una nuova configurazione. Le configurazioni appena analizzate si possono ritenere complete. I passaggi sono semplici e intuitivi. La configurazione di Lancia Ypsilon è semplice ed essenziale. Nel caso di Mini abbiamo più dettagli e più opzioni relative al processo. Anche la configurazione della 500 è completa, l’unica mancanza è quella relativa al prezzo. Mini Cooper Lancia Y Fiat 500 Ford Fiesta
  • 52. 52 www.fiesta.ford.eu La configurazione dell’automobile non è disponibile. Ford Fiesta Lancia Y Fiat 500 Mini Cooper
  • 53. 53 CONCLUSIONE Dopo aver preso visione del sito www.fiesta.ford.eu è stato fatto un confronto con i siti automobilistici www.lanciaypsilon.it, www.fiat500.com, e www.mini.com, al fine di cogliere gli aspetti salienti dello stesso e di individuare eventuali carenze. Dalla considerazione dei vari elementi in essi presenti e dei diagrammi di qualità stilati in base ai parametri di valutazione, quali velocità, organizzazione contenuti, coerenza grafica, branding e accessibilità da Web, è risultato che il sito che risponde meglio, nei contenuti e nell’impostazione, alle aspettative dell’utente, è www.mini. com. Conclusione
  • 54. 54 RESTYLING SITO Nel nostro sito di riferimento possono essere evidenziati alcuni elementi che, con opportune modifiche, lo completerebbero nel contenuto e lo migliorerebbero nella fruibilità: - semplificare l’indirizzo web - rendere cliccabile il logo in ogni pagina del sito; - aggiungere la mappa del sito; - aggiungere la sezione “car configuration” - alleggerire i contenuti delle pagine, in modo da velocizzarne il caricamento; - inserire il titolo in ogni pagina, in quanto la sua sola presenza nella home page e nella pagina “esterni” è insufficiente a dare coerenza all’impostazione; - differenziare visivamente le varie sezioni del sito (per esempio usando colori diversi); - rendere il testo più leggibile, cambiandone le dimensioni e il colore; - coinvolgere l’utente, fornendogli la possibilità di esprimere suggerimenti, per esempio tramite un forum; - scegliere i colori dello sfondo e del testo in modo tale da massimizzarne la leggibilità: la barra presente nella parte inferiore delle pagine risulta infatti poco comprensibile a causa del colore dello sfondo troppo scuro e del carattere tipografico light; - introdurre la traduzione del sito in altre lingue (almeno in inglese), dal momento che il sito è “.eu”; - aggiungere informazioni sul motore dell’automobile e la pagina “allestimenti”. Restyling sito
  • 55. 55 Home Page Ford Fiesta, originale Home Page Ford Fiesta, restyling Restyling sito
  • 56. GRAZIE PER L’ATTENZIONE Francesca Colleoni, Chiara dall’Olio, Stefano Iasilli