VISUAL DESIGN di Mariagiovanna Scarale

16
1 http://www.subito.it/?xtredir=go-brand http://www.gliaffari.it/homepage/MainPage.aspx http://www.lostrappo.it/ Analisi di siti web comuni: Mariagiovanna Scarale Matricola 423062 Corso di laurea Magistrale in Informatica Umanistica, Curriculum ‘‘ Editoria Elettronica’’

Transcript of VISUAL DESIGN di Mariagiovanna Scarale

Page 1: VISUAL DESIGN di Mariagiovanna Scarale

1

http://www.subito.it/?xtredir=go-brandhttp://www.gliaffari.it/homepage/MainPage.aspx

http://www.lostrappo.it/

Analisi di siti web comuni:

Mariagiovanna ScaraleMatricola 423062

Corso di laurea Magistrale in Informatica Umanistica, Curriculum ‘‘ Editoria

Elettronica’’

Page 2: VISUAL DESIGN di Mariagiovanna Scarale

2

AFFORDANCE PERCEPITA: l’utente riesce intuitivamente a comprendere lo scopo della “cartina-pulsante”.

Soluzione elegante, in quanto riduce il progetto alla sua essenza, non comunica l’ovvio e determina, quindi, gli elementi essenziali.

www.subito.it

Page 3: VISUAL DESIGN di Mariagiovanna Scarale

3

Suddivisione degli spazi, mediante la regolarizzazione di tutti gli elementi ottenuta in modo sobrio e non mediante l’uso eccessivo di strutture.

Casella pubblicitaria non eccessivamente in primo piano. Assenza di interferenze visuali e di eccessive animazioni.

Rimando alla Home page sempre in primo piano.

Metodo semplice per raffinare la ricerca.

Page 4: VISUAL DESIGN di Mariagiovanna Scarale

4

Fornisce immediatamente all’utente le informazioni che sta cercando e i contatti utili per perseguire il suo scopo di ricerca.

Approccio immediato dell’utente all’oggetto mediante l’uso di foto, video e informazioni dettagliate (anche sul venditore).

- ACCESSIBILITÀ;

- USABILITÀ;

- INTERAZIONE;

- AFFORDANCE;

Presenza di elementi interattivi

Page 5: VISUAL DESIGN di Mariagiovanna Scarale

5

Interferenza visuale, mediante l’uso eccessivo di colori saturi, che non supporta la leggibilità e e provoca affaticamento e scritte fluttuanti.

Frammentazione che usa un front inusuale e non leggibile chiaramente a primo impatto.

Elementi inutili per un utente che sa cosa cerca, ma non sa dove cercarlo, perché non è presente un’interfaccia intuitiva.

Suddivisione della ricerca per area tematica.

www.gliaffari.it

Page 6: VISUAL DESIGN di Mariagiovanna Scarale

6

Approccio non immediato all’oggetto. Mancanza di foto, video e informazioni dettagliate.

Eccessivo contrasto.

Dimensioni sbagliate. Eccessiva riduzione di un elemento fondamentale ai fini della ricerca.

Page 7: VISUAL DESIGN di Mariagiovanna Scarale

7

Spreco di spazio che avrebbe potuto ospitare foto, video e/o informazioni utili al fine dell’acquisto nella sua praticità.

Eccessive dimensioni ed eccessivo uso di colori.

Comunica l’ovvio, dato che la descrizione dell’oggetto non aggiunge nulla di nuovo a quella presente nella pagina precedente.

Page 8: VISUAL DESIGN di Mariagiovanna Scarale

8

Eccessivi dettagli e abbellimenti e uso di front non chiari da leggere.

Serie di immagini animate non strutturate e quindi percepite in confusione.

Elementi raggruppati e strutturati, ma non evidenziati in gerarchie o in un ordine che facilita la ricerca.

www.lostrappo.it

Page 9: VISUAL DESIGN di Mariagiovanna Scarale

9

Interferenza tra elementi strutturati, ma non indicizzati e/o gerarchizzati per

velocizzare la ricerca.

Meccanismo che velocizza la ricerca e la raffina.

Suddivisione degli elementi in categorie strutturate e divise.

cPrincipio di chiusura risalente alle teorie della Gestalt, ottenuto mediante i colori.

Page 10: VISUAL DESIGN di Mariagiovanna Scarale

10

Presenza di elementi visivi significativi (anche se non di ottima qualità) come foto.

Spreco di spazio che poteva essere usato per arricchire l’annuncio con una descrizione dell’oggetto.

Presenza di collegamenti ipertestuali e interattivi.

Spazio strutturato, comprensibile, gerarchizzato e ordinato, che non usa eccessive strutture visive.

Page 11: VISUAL DESIGN di Mariagiovanna Scarale

11

EFFETTI RILEVATI VALOREUSABILITÀ ● ● ● ● ● ● ● ● ○ ○ ACCESSIBILITÀ ● ● ● ● ● ● ● ○ ○ ○INTERAZIONE ● ● ● ● ● ● ○ ○ ○ ○AFFORDANCE ● ● ● ● ● ● ● ● ○ ○FRAMMENTAZIONE ● ● ○ ○ ○ ○ ○ ○ ○ ○STRUTTURE ● ● ● ○ ○ ○ ○ ○ ○ ○DETTAGLI E ABBELLIMENTI ● ● ● ● ○ ○ ○ ○ ○ ○REGOLARIZZAZIONE ● ● ● ● ● ● ○ ○ ○ ○SFRUTTAZIONE INFORMAZIONE CONTESTUALE

● ○ ○ ○ ○ ○ ○ ○ ○ ○

CONTRASTO ● ○ ○ ○ ○ ○ ○ ○ ○ ○INTERFERENZA VISUALE ○ ○ ○ ○ ○ ○ ○ ○ ○ ○SPRECO DI SPAZIO ○ ○ ○ ○ ○ ○ ○ ○ ○ ○DIMENSIONI ● ● ● ● ● ○ ○ ○ ○ ○ FRONT ● ● ● ● ● ○ ○ ○ ○ ○PRINCIPI DELLA GESTALT ● ● ● ● ● ● ○ ○ ○ ○RAGGRUPPAMENTO ● ● ● ● ● ● ●○ ○ ○ GERARCHIZZAZIONE ● ● ● ● ● ○ ○ ○ ○ ○EQUILIBRIO ● ● ● ● ● ● ● ● ○ ○ ○

ww

w.s

ubit

o.it

LEGENDA:● valore positivo;○ nessun valore; ● valore negativo.

Page 12: VISUAL DESIGN di Mariagiovanna Scarale

12

EFFETTI RILEVATI VALOREUSABILITÀ ● ● ● ● ● ○ ○ ○ ○ ○ ACCESSIBILITÀ ● ● ● ● ● ○ ○ ○ ○ ○INTERAZIONE ● ● ● ● ○ ○ ○ ○ ○ ○AFFORDANCE ● ● ● ● ● ○ ○ ○ ○ ○FRAMMENTAZIONE ● ● ○ ○ ○ ○ ○ ○ ○ ○STRUTTURE ● ● ● ○ ○ ○ ○ ○ ○ ○DETTAGLI E ABBELLIMENTI ● ● ● ● ○ ○ ○ ○ ○ ○REGOLARIZZAZIONE ● ● ○ ○ ○ ○ ○ ○ ○ ○SFRUTTAZIONE INFORMAZIONE CONTESTUALE

● ○ ○ ○ ○ ○ ○ ○ ○ ○

CONTRASTO ● ● ● ● ● ● ● ○ ○ ○INTERFERENZA VISUALE ● ● ● ● ● ○ ○ ○ ○ ○SPRECO DI SPAZIO ● ● ● ● ● ○ ○ ○ ○ ○DIMENSIONI ● ○ ○ ○ ○ ○ ○ ○ ○ ○FRONT ● ● ● ○ ○ ○ ○ ○ ○ ○PRINCIPI DELLA GESTALT ○ ○ ○ ○ ○ ○ ○ ○ ○ ○RAGGRUPPAMENTO ● ○ ○ ○ ○ ○ ○ ○ ○ ○ GERARCHIZZAZIONE ● ● ● ● ○ ○ ○ ○ ○ ○EQUILIBRIO ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

ww

w.g

liaff

ari.

it

LEGENDA:● valore positivo;○ nessun valore; ● valore negativo.

Page 13: VISUAL DESIGN di Mariagiovanna Scarale

13

EFFETTI RILEVATI VALOREUSABILITÀ ● ○ ○ ○ ○ ○ ○ ○ ○ ○ ACCESSIBILITÀ ● ○ ○ ○ ○ ○ ○ ○ ○ ○INTERAZIONE ● ● ○ ○ ○ ○ ○ ○ ○ ○ AFFORDANCE ● ○ ○ ○ ○ ○ ○ ○ ○ ○FRAMMENTAZIONE ● ● ○ ○ ○ ○ ○ ○ ○ ○STRUTTURE ● ● ● ○ ○ ○ ○ ○ ○ ○DETTAGLI E ABBELLIMENTI ● ● ● ● ● ○ ○ ○ ○ ○REGOLARIZZAZIONE ● ● ○ ○ ○ ○ ○ ○ ○ ○SFRUTTAZIONE INFORMAZIONE CONTESTUALE

● ○ ○ ○ ○ ○ ○ ○ ○ ○

CONTRASTO ● ○ ○ ○ ○ ○ ○ ○ ○ ○INTERFERENZA VISUALE ● ● ● ○ ○ ○ ○ ○ ○ ○SPRECO DI SPAZIO ● ● ● ● ● ○ ○ ○ ○ ○DIMENSIONI ● ● ○ ○ ○ ○ ○ ○ ○ ○FRONT ● ● ○ ○ ○ ○ ○ ○ ○ ○PRINCIPI DELLA GESTALT ● ○ ○ ○ ○ ○ ○ ○ ○ ○RAGGRUPPAMENTO ● ○ ○ ○ ○ ○ ○ ○ ○ ○ GERARCHIZZAZIONE ● ● ○ ○ ○ ○ ○ ○ ○ ○EQUILIBRIO ● ○ ○ ○ ○ ○ ○ ○ ○ ○

ww

w.l

ostr

appo

.it

LEGENDA:● valore positivo;○ nessun valore; ● valore negativo.

Page 14: VISUAL DESIGN di Mariagiovanna Scarale

14

Qualità del sito web e livello di usabilità

www.subito.itwww.gliaffari.itwww.lostrappo.it

Page 15: VISUAL DESIGN di Mariagiovanna Scarale

15

CONCLUDENDO:

È importante incentrare la costruzione di un sito web su un design visuale volto alla comunicazione, che renda l’utente partecipe e intuitivamente capace di raggiungere gli obiettivi della sua ricerca e, altrettanto importante è rimanere nei margini di eleganza ed equilibrio della pagina, che deve offrire le informazioni più importanti senza sovraccaricare la percezione dell’utente.

In ultima istanza, la mia analisi ha dimostrato quanto la qualità dell’interfaccia influenzi le ricerche e la visualizzazione di un utente tipo. In questo caso il sito web qualitativamente più usabile, si è rivelato essere subito.it, non a caso tra i più cliccati, e che registra un numero di utenti pari a 3.235.199 e in costante crescita.

Page 16: VISUAL DESIGN di Mariagiovanna Scarale

16

SITOGRAFIA:Data ultima consultazione: 01/10/2011, ore 16:27.

http://www.subito.it, p. 2; http://www.subito.it/annunci-toscana/vendita/appartamenti/?

ref=list_eng_search&ps=0&pe=0 , p. 3; http://www.subito.it/appartamenti/appartamento-arredato-pisa-31148059.htm,

p. 4; http://www.gliaffari.it/homepage/MainPage.aspx, p. 5; http://www.gliaffari.it/Immobili/, p. 6; http://www.gliaffari.it/ConsultazioneAnnuncioPreview/ConsultazioneAnnuncioPr

eview.aspx?IDAnnuncio=74816&ParolaKey=&Regione=0&Categoria=1&Rubrica=&Rapida=True&Avanzata=Home&_pg=0, p. 7;

http://www.lostrappo.it, p. 8; http://www.lostrappo.it/ListaAnnuncio.aspx , p. 9; http://www.lostrappo.it/DettaglioAnnuncio.aspx?ID=8318 , p. 10.