Elena Bignami Vincenzo Calabrò Andrea Marassi

WebMonsters

1MSTC Teorie e Linguaggi della Comunicazione Digitale e del Web Marketing

1

La storia di Angelo Poretti

Il Birrificio Angelo Poretti è un birrificio italiano.In seguito a varie acquisizioni il nome è diventato un marchio appartenente a

Carlsberg Italia S.p.a., società facente parte del gruppo Carlsberg.

Spazio del contenuto e spazio del paratesto

2

Lo spazio del contenuto

Cosa mi vuole far vedere il sito web?

IMMAGINI TESTI VERBALI

3

Lo spazio del contenuto

4

WebMonsters X Angelo Poretti 4

Lo spazio del paratesto

Dove sono, da dove vengo e dove vado?

STRUMENTI DI NAVIGAZIONE

5

Lo spazio del paratesto

Dove sono, da dove vengo e dove vado?

STRUMENTI DI NAVIGAZIONE

Lo spazio del paratesto Home Page

- Il logo perché risponde alla domanda “dove sono?”- La barra principale di navigazione- La barra di navigazione secondaria- I collegamenti ai social (facebook, twitter, instagram)- Le briciole di pane- Le immagini Visita il Birrificio e Momenti da Expo- Storia di Angelo Poretti- Expo 2015- Fascia “Le nostre birre”- Fascia “In cucina con Alma”- Fascia Approfondimenti con immagini cliccabili- Barra Footer con link utili, collegamento social, Expo

6

Saperi e Generi

7

Quali sono i saperi che il sito pone come condizione necessaria per essere utilizzato?

Saperi

8

Saperi Lingue necessarie:italiano o inglese

Familiaritàcon i social

Conoscenza del funzionamentodel logo della homepage

Conoscenza delle concezioni minime delle interfacce webDoppia barra di navigazione e footer

9

Il sito “www.birrificioangeloporetti.it” è un sito vetrina che pubblicizza i propriprodotti e pubblica materiale informativo.

Si appoggia al sito e-commerce esterno “www.vogliadibirra.it” per la vendita deiprodotti via internet.

Generi

10

Alberatura sitoHEADER- Visita il birrificio- e-Shop- Collegamenti Social Network- Lingua - Italiano - Inglese- Export

HEADER - ID/ Nome del sito- La storia-Il birrificio- Luppolopedia- Birre- Le ricette- Media

BODY- Slider fissi- Immagini navigabili- Testo- Collegamenti- Pulsanti

FOOTER- Birrificio Angelo Poretti- Birre- Link Utili - e-shop - cookie - www.beviresponsabile.it- Expo 2015- Icone social- Copyright

Generi Analisi di Benchmarking

11

Il sito “www.peroni.it” è un sito vetrina che pubblicizza i propri prodotti e pubblica materiale informativo.

Alberatura sitoHEADER- Visita il birrificio- e-Shop- Collegamenti Social Network- Lingua - Italiano - Inglese- Export

HEADER - ID/ Nome del sito- La storia-Il birrificio- Luppolopedia- Birre- Le ricette- Media

BODY- Slider fissi- Immagini navigabili- Testo- Collegamenti- Pulsanti

FOOTER- Birrificio Angelo Poretti- Birre- Link Utili - e-shop - cookie - www.beviresponsabile.it- Expo 2015- Icone social- Copyright

Generi

12

Il sito “www.birramoretti.it” è un sito vetrina che pubblicizza i propri prodotti e pubblica materiale informativo.

Analisi di Benchmarking

13

Lettore-utente modello

1. CARATTERISTICHEANAGRAFICHE

14

Per chi è stato progettato il sito web?

1. CARATTERISTICHEANAGRAFICHE

2. COMPETENZEINFORMATICHE

Lettore-utente modello

15

Lettore-utente modello 1. Caratteristiche anagrafiche

http://www.exactitudes.com

Sesso: UomoEtà: 27 anniInteressi: musica, moto e moda

Sesso: UomoEtà: 35 anniInteressi: arte, cibo e cinema

16

Lettore-utente modello 2. Competenze informatiche

http://www.exactitudes.com

Conoscenza delle concezioni minime delle interfacce webUtilizzo abitudinario di smartphone

Utilizzo del web anche per e�ettuare acquisti online

17

Azioni e desideri

18

Azioni e desideri

Quali azioni mette a disposizione il sito?

19

Azioni e desideri

ACQUISTARE INFORMARSI INTERAGIRE

20

Azioni e desideri Acquistare

21

Azioni e desideri Informarsi

22

InteragireAzioni e desideri

Il sito propone un viaggio virtuale completo all’ interno del mondo Poretti.Il lettore può seguire lo sviluppo del prodotto dalla sua nascita fino all’ incontro

con il consumatore.

23

Analisi dello Spazio visivo

24

“Angelo Poretti è marchio industriale della birra, che negli ultimi anni ha deciso di vestire i panni dell’artigianale per raggiungere nuovi segmenti di mercato, con

una scelta che ha rivelato una curiosa passione per i luppoli.”cronachedibirra.it

Brand Image e linea comunicativa generale

25

Brand Image e linea comunicativa generale

La strategia di Poretti – appartenente al gruppo Carlsberg – è iniziata qualche anno fa, e fonda la sua comunicazione su un numero variabile di luppoli da 3 a 10.

L’obiettivo è quello di intercettare i desideri dei consumatori, che rispetto al passato sono diventati più esigenti e diversificati.

26

Livello grafico-visivo

I contenuti visivi del sito sono chiari e ben organizzati.In alto a sinistra troviamo due paratesti:“Visita il birrificio” ed “e-shop” che rappresentano rispettivamente il chi e il che cosa andremo a raccontare.

In alto a destra si trovano i loghi dei principali social, che rimandano alla comunicazione integrata dell’azienda, spiegando come e con quali mezzi l’azienda comunica on-line.

27

Livello grafico-visivo

Provando a invertire le tonalità, ad usare una scala di grigi o un semplice bianco e nero il sito risulta sempre ben comprensibile, a favore dell’accessibilità da parte di utenti diversamente abili.

28

Livello grafico-visivo

In seguito ad un’analisi di Design e�ective Visuals (FENG-GUI) abbiamo notato quali sono le aree che attirano maggiormente l’attenzione nei primi 3 secondi di utilizzo:

29

Analisi della coerenza e dell’usabilità

30

Analisi della coerenza e dell’usabilità

Sono rispettate le principali funzioni di un sito, ma manca una funzione di ricerca semplice e pratica che possa aiutare il lettore nel ritrovare con immediatezza specifici contenuti.L’intero sito è progettato per fornire paratesti che rimandano ad “articoli testuali” più specifici, ma la mappa del sito non è presente e va implementata.Nel complesso il sito risulta avere una struttura semplice ma abbastanza intuitiva.

31

Analisi della coerenza e dell’usabilità

32

Analisi della coerenza e dell’usabilità

33

Analisi della coerenza e dell’usabilità

5. Non è presente un area Search

34

Analisi della coerenza e dell’usabilità

34 35

Analisi della coerenza e dell’usabilità

7. Non sono presenti menù a tendina in quanto i contenuti non sono molti8. Non ci sono contenuti promossi in homepage perchè il sito ha un e-commerce esterno9. Al contrario, l’home-page è molto pulita e non ci sono eccessi grafici

36

Analisi della coerenza e dell’usabilità

37

Modifiche sito web

38

Modifiche sito web

Lo stato dei tasti cambia passandoci sopra con il mouse, indicando di conseguenza una possibile interazione da e�ettuare.

Aggiungere Youtube nella barra di navigazione dei collegamenti social perchè è una piattaforma web di video sharing da sfruttare e da non sottovalutare.

39

Una barra di ricerca utile agli utenti per orientarsi all’interno del sito e scrivere ciò che desiderano trovare in velocità.

Modifiche sito web

Le icone di Instagram e Youtube non possono mancare nella sezione dei collegamenti ai social, in particolar modo su dispositivo mobile.

40

La mappa del sito all’interno della barra del Footer è indispensabile e molto utile perciò non può non contenere le informazioni più importanti del sito web.

Modifiche sito web

Elena Bignami Vincenzo Calabrò Andrea Marassi

WebMonsters

1MSTC Teorie e Linguaggi della Comunicazione Digitale e del Web Marketing