Abilità informatiche e telematiche

Venerdì 11-13 T30

 5 lezioni su ogni argomento + 1 lezione di riassunto
Www.jpg.net.elements

Esame consiste in una tesina con argomenti trattati a lezione

Si può fare in gruppo (max 3 pers)
Max 3 errori : devi specificare il PERCHÉ

Il progetto comunicativo è solitamente composto di servizi e contenuti

Il primo livello: ha 2 blocchi : requisiti utente & obiettivo del sito

Progetto comunicativo su diversi media

partante
-obieffito
Specificità

~ media

utente
et en
mediaturel
executore M
7

eligenze
 DI COSA PARLEREMO ?

Di une metodologia per far un progetto comunicativo sui diversi media , in

particolare sul web
 Primo livello : Strategia

Diviso in due tra

* Obbiettivi del Sito e Requisiti Utente

Lezione 1 I Tre possibili attori del processo :

Committente : con obiettivi formativi/istituzionali/economici
Raggiungere + persone
Fruitore / pubblico/ target : con esigenze
Media : con Specificità . E uno strumento attraverso il quale il committente si
mette in contatto con il target
Esecutore : Colui che mette in relazione tutto, ha il ruolo di conoscere le
specificità di un media

Obiettivi (Committente)

Devono derivare da una strategia di più alto livello da cui deve

capirsi cosa serve, quali sono gli obbiettivi e se serve l’uso di
specifici media .
Deve essere SMART
Un’ obiettivo smart è
Specifico : legato ad un determinato media ,
Misurabile : sapere esattamente cosa voglio ottenere in un determinato tempo,
Accessibile : cosa posso fare rispetto al mio budget,
Realistico : rispetto a quello che fanno gli altri,
Tempo-Scadenza :

Requisiti Utente :

Chi soni gli Utenti/Fruitori ?

Metodologie per capire chi è il pubblico : Inadagine di mercato , chiedere l’aiuto
di un esperto di Dominio, studiare il competitore per capire qual è il suo
pubblico
Studio dei casi

Caso 1:
A sinistra : La Home di Garnier - sembra più indirizzato alle ragazze,
attenzione al bio, è sicura per la natura
A destra : La Home di Lierac - sembra + costoso, + indirizzato a donne,
meno esplicito
Tutti i due fanno prodotti per la cura del corpo

Caso 2:
A sinistra : Pasta di marca Voiello - Origine Napolitano, + centrato sulla
tradizione
Al centro : Pasta di marca Barilla - + giovanile nella presentazione, m’en
A destra : Pasta di marca Molisana - attenta alla natura, alla qualità

Utenti

Come li possiamo descrivere ?

Con la scheda Personas : per descrivere l’utente, cerco di imaginare il mio
utente come una persona vera per permettere al team che lavora sul progetto
a entrare nella testa di questa persona immaginaria
Esempio di scheda personas : scheda di sarà che comprende
Il suo Background, i suoi bisogni, il suo uso di internet e social media, la sua
motivazione in generale, i suoi obbiettivi su internet
Utenti differenti nell’età, dove trovano informazioni = prodotto molto simile e
target diverso

Concorrente diretto : stesso posizionamento e target

Concorrente Indiretto : un'azienda i cui prodotti o servizi sono diversi, ma che
potenzialmente potrebbero soddisfare la stessa esigenza

Caso 2:
Prodotti di massa : è la realizzazione di grandi quantità di prodotti
standardizzati

Riguardando la tesi ,

Punto 1 : Scelgo un’argomento , deve essere un’argomento affrontabile in aula

Argomenti vietati : Viaggio e Cucina

Punto 2 : 1 o due possibili utenti con descrizione + dettagliata possibile e

demografica- a chi è rivolto

Punto 3 : del progetto , definire macro obiettivi (progetto orientato al

informazione/formazione …ecc.. cioè perché stai lavorando su questo progetto)
e micro obiettivi (fare piccola ricerca di mercato “2 abonnés en plus ce
mois”su siti simili ci sono dati da vedere per situati)
 La faccia 40-50 anni non è consigliabile per la descrizione /tesina
Tesina può fare 6 pagine come un Power point, word, PDF, possiamo farla
come vogliamo

La scheda comprendre :
Lezione 2
Dati demografici (età, dove vivono)
Caratteristiche socio-grafiche
Si usa la scheda personas come modello per descrivere caratteristiche
demografiche e socio-grafiche che servono per capire le esigenze di un utente
Il nome nella scheda si usa per stimolare l’empatia

Secondo livello chiamato livello dell’Ambito o del contesto

Comprendre nella parte tecnica a sinistra : Specifiche funzionali
E nella parte di contenuto a destra : Requisiti di contenuto
Sono per gli Utenti
Definire servizi e tipologie di contenuti

Per servizi si intende qualcosa con cui l’utente interagisce ,

Per contenuto si intende qualcosa che l’utente fruisce in sola-lettura,
Es : la biblioteca offre come contenuto : libro e come servizio . Prestito,
iscrizione , prenotazione
Una tabella iniziale serve a rappresentare che tipo di contenuto e servizio
possono piacere a ogni utente
2 tabelle competitori per sapere a quali utenti ha pensato il competitore e che
tipologie gie di contenuti e servizi offrono a tali concorrenti
Poi faccio una Tabella Somma riepilogativo che rappresenta la somma di tutte
le tabelle .

Questo schema di 5 livelli che stiamo facendo ha il difetto di essere ideale cioè
non tiene in considerazione che nella vita reale c’è un tempo e un budget
fissato per fare il lavoro .. per quello dobbiamo introdurre il concetto di Tempi e
Costi

Il concetto di tempi e costi : dice di selezionare le tipologie di utenti, i servizi

e le tipologie di contenuto sulla base di TEMPI e COSTI avuti come
specifiche, con attenzione alle opportunità e agli obiettivi del progetto.

Caso 1 : Trekking
Macro obiettivo : guadagnare

Fase iniziale : cercare di specificare la parola “trekking” e “guadagnare”…

cosa vogliono dire ?
Fase divergente o esplorazione delle idee : la fase + creativa del processo in cui
viene dato libero sfogo al pensiero in merito al tema proposto

Domanda : Quali sono gli utenti che cerchiamo ?

chi ama la natura, chi ama le escursioni, chi è sportivo, chi è allenato, inesperti,
strutture alberghiere, intrepido, produttori di attrezzature, socializzatori, persone
anziane, persone religiose, campeggiatori, scout, scuole, fotografo

Fase convergente : per riassumere le idee, vedere cosa eliminare , cosa

accoppiare

Il processo divergente e convergente è anche chiamato il Brainstorming

Riassumiamo :
A- Esperti/Sportivi
B- Inesperti
C- Amanti Natura
D- Gruppi
E- Venditori
Domanda : Che tipo di contenuto & Servizi può piacere al gruppo A/B/C/D/E
Come contenuto utile : Guide percorsi (es : percorso del parco di Tor
vergata ,difficolta, durata) Guida attrezzature , galleria fotografica,

Come servizio : shop (Vendita di attrezzature), newsletter attività , servizio

noleggio , guida (aiuto), ricerca percorso , attività speciale(attività di riciclaggio,
didattiche )

Come faccio a calcolare i tempi e costi di un progetto ?

Facciamo una ricerca per capire quale servizio possiamo fare con il tempo e il
budget (costo) che abbiamo
Possiamo tagliare il servizio o contenuto con meno paline ma attenzione se il
pallino è vostro perché può essere qualcosa di innovativo, l’elemento vincente a
cui non hanno pensato gli altri : un nuovo prodotto per una nuova clientela ..

Alla fine otteniamo la tabella di lavoro : Tabella finale

Non è obbligatorio cancellare , se c’è tempo e soldi
 Tesina =02
04. Definire servizi e contenuti per gli utenti
05. Analizzare almeno 2 concorrenti
06. Scrivere nella relazione cosa prendi dai concorrenti e perché , cosa non
prendi e perché no
07. Stabilire la tabella di lavoro finale

Lezione 3
Terzo livello -Struttura
Diviso in due con Progettazione delle interazioni e Architettura dell’informazione

Progettazione delle interazione : è lo sviluppo dei flussi applicativi allo scopo di

facilitare i compiti dell’utente, definendo come questo interagisce con le
funzionalità del sito
Architettura dell’informazione : legato a come organizziamo l’informazione con
lo scopo di facilitare un accesso intuitivo al contenuto
È il modo di strutturare, organizzare e raggruppare le informazioni, i servizi ed i
contenuti di un progetto comunicativo

La Tassonomia : è la scienza che si occupa dei modi di classificazione

La tassonomia serve a organizzare il catalogo dei contenuto attraverso l’uso di
uno o più vocabolari.
Solitamente ogni vocabolario potrà essere usato come filtro o chiave per
ricerche

Le famiglie di organizzazione di contenuto

Gerarchico : L’uso un solo vocabulario,

Ogni documento (file del web,canzone,scarpa,libro) ha sempre al massimo un
solo padre
Associativo o Matrice : L’uso di + vocabulari dove lo solo documento può avere
+ padre

Oggi c’è il misto tra gerarchico e associativo -tipo gerarchico al primo livello e
sotto associativo .

Gerarchico funziona bene quando gli utenti sono esperti del Dominio , è veloce
— ciò che sono tecnici di dominio - ma associativo è + generico , + lento nella
ricerca
Esempio 01 : La home di L’Oreal
Il menu è gerarchico
Esempio 02 A : la home di Ikea è Associativa .. possiamo trovare lo stesso
oggetto in diverse categorie
Esempio 02 B : Associativo
Esempio 03 A : Gerarchico
Esempio 03 B,C,D : Una parte associativa e sulle corsie diventa Gerarchico
(C,D)
Esempio 04 : i libri sono organizzati in modo gerarchico

Come organizzare i contenuti :

Card sorting : il team scrive categorie che pensa essere elementi di base di cui
partire ( parle verde = macrocontenutore ) e chiede a l'utente reale di Incastrare
esempi di contenuti
Free-listing : dove il team non fa neanche la parte verde e chiede a diversi utenti
di organizzare i contenuti in diverse categorie
fae test
Interviste : gin can grupti
e
per :
andae in

Focus-group :
↳ redene ie si capioce
Folksonomie : categorie dove tutti elementi sono generati dagli utenti
Esempio : il “forse intendevi” di Google quando scriviamo una parola in modo
sbagliato
Tesauro (Sinonimo e antonimi) : cerca di capire se l'utente usa altri nomi per
chiamare queste categorie
 Come sono fatti i contenuti ?
Anche le tipologie di contenuti hanno una loro struttura interna, sono i campi cioè
i metadati di contenuto
Il metadato rappresenta il nome di un pezzo di documento

esempio : nel lavoro di architetture l'informazionedevo dire quali sono i

contenitori per il documenti (la prima parte) e dire questo documento che proprietà
ha? Queste singole proprietà sono chiamate metadati

Vocabulatio potrebbe eners primo/secondol

extixo invermale / regionale/laziale/haballvegan
descrivono il mio
tipo di contenuto

metadato ripetibite

detEt PROGETTAZIONE DELLE INTERAZIONI

Per descrivere le interazioni esistono diversi linguaggi di design :

Il linguaggio UML e
la descrizione tramite il flow chart detto Diagramma di flusso con pochi simboli
facili da ricordare
Qua , useremo il diagramma di flusso .
Spiegazione dei simboli :
Cerchio / ovale : per inizio, fine o rimando a un’altro servizio
Rettangolo : operazione interna (che deve fare il sistema cioè noi)
Parallelogramma : qualcosa che deve fare l’utente
Diamante : scelta del tipo SI o NO
NO
Inscrizione Newsletter

Esempio : come usare le interazioni?

SI
-
NO
inscrire email sono passatic
?
giorni

dati
negiotrazione
di et
inviremail sexet. mi e

SI
intente
Re
et

incrizione ok !

FINE

Tesina = 03
O8. Scegliere un servizio e stabilire le sue interazioni…facoltativo se la tesina e
fatta da sola
09. Organizzare il vostro progetto, il tipo di tassonomia (gerarchico/
associativo ) e fare un esempio di vocabolario relativi
10. Dentro la tesina, descrivere la tipologia di contenuto che l’utente si aspetta
di trovare nel vostro progetto … tipo di contenuto (titolo,video,immagine)
 Quarto livello :
Lezione 4 Che comprendre 3 blocchetti la parte più specifica per i servizi la
progettazione dell’interfaccia e la progettazione dell’informazione e dall’altra
parte più specifica per il contenuti la progettazione della navigazione e la
progettazione dell’informazione

Questo livello viene indicato come livello dello Scheletro = struttura di base

Partendo dall’interfaccia …

Progettare un’interfaccia è scegliere rispetto ad un servizio come l’utente

interagisce con il sistema
Ogni elemento dell’interfaccia viene chiamato controllo … scegliamo la forma
e la grafica del controllo

Informazione …

↑
Progettare l’informazione è adattare il contenuto all’utente e ai media scelti
Esempio 1: tavola ottometrica/Ottotipo diversa a secondo del fatto che l’utente
legge o no, che sia un bambino o un adulto .

Esempio 2 : Con diversi dispositivi, cambia lo schermo…più lo schermo è piccolo

più devo selezionare dettagli che voglio fare vedere

In pratica,
1. selezioniamo le cose che riteniamo + importanti per l’utente,
2. scegliamo il dispositivo dove vogliamo fare visualizzare all’utente
quest’informazione
3. creammo un disegno di come come dovrà esssere visualizzato …

Questo disegno è chiamato vista

Come scrivere le viste ?

Con una tabella , per esempio

Come pensare l’informazione sul web :

Attenzione dell’utente scarsa che scansiona il contenuto…
Sul web devi mettere prima la conclusione poi i dettagli
Piramide inversa : conclusione poi dettagli

Navigazione

Il fatto di passare dall’architettura dell’informazione alle etichette di navigazione è

detto labelling cioè tradurre il modello che usiamo in quello per l’utente
Esempio : dire busta paga al posto di cedolino per permettere all’utente di
ritrovarsi .

I link esterni servono a dare a l’utente informazioni in più

Parto dall’ architettura dell’informazione, decido cosa l’utente è interessato a

vedere, se di quello di deve vedere c’è necessità di aggiungere alcun etichette
(labelling) e se l’utente ha bisogno di riferimenti esterni …quello che ottengo viene
chiamata Mappa del progetto comunicativo / Mappa del sito / mappa di navig

L’architettura dell’informazione e la mappa non sono la stessa cosa in

sostanza , basta che risponde « si » a una delle domande seguenti per che la
mappa sia diversa :
A l’utente interessa tutto ?
L’utente capisce tutti i termini ? O devo cambiare alcuni ?
A l’utente puoi interessare qualche collegamento all’esterno ?
Wireframe :modello iniziale di rappresentazione di un sito web

Navigazione principale (menù) e la navigazione di servizio

sono obbligatorie sul sito

Breadcrumbs : vi dice tutti i clic fatti fino a adesso

Navigazione secondaria : link esterni, sottosezione d’approfondimento

Sulla navigazione di servizio sono riportati note legali, privacy ..cose

obbligatorie per legge

Quindi la navigazione serve a facilitare l’utente nella scelta dei contenuti e

nell’abbinamento con le informazioni che abbiamo a disposizione
La progettazione della navigazione è dunque Progettare degli elementi di
interfaccia che facilitano la navigazione dell’utente attraverso l’architettura
dell’informazione

Tesina 04
11 . Scegliere l’utente e il media, ..preparare 2 viste

12. Pensare come disegnereste il wineframe o la mappa di navigazione

 Il web come interfaccia software o sistema ipertestuale
La progettazione visuale diverso per ogni media … in base al canale scelto
facciamo scelte diverse

Spesso il livello 5 viene chiamato livello di superficie… è l’iceberg

Le scelte visuali sono :
Lezione 5
immagini - tipologie
Divisi in 2 tipi
Vettoriali sono funzioni matematiche, si mantengono fidélité alle impostazioni ,
meno pesanti rispetti al bitmap… l’immagine online si carica velocemente sul sito

Bitmap o raster (lossy o lossless) sono quelle fotografiche che rappresentano la

reale in un dato formato… se il formato della foto è 10px ,l’immagine non può
essere di più

Colore - la gestione di colore esiste di 2 tipi

Gestione di tipo Additiva : RGB parte dal nero e aggiunte colori, e usata sui
monitor
Gestione di tipo sottrattiva : CMYK : ciano,Magenta, giallo e nero quindi parte
dal bianco e cerca di togliere i colori, usata sulle stampe
NB : Alcune colori del CMYK non sono disponibili su RGB

Come faccio a stabilire una seria di colore che mi possono servire ?

Si usa colori Complementari (quelle contrasto più forte) o analoghe (quelle che
vengono tono su tono)

Strumenti come Color Wheel che sono ruote di colori che ti danno tutte le
possibilità di colore

Con il colore si può veicolare alcune emozioni .. ma solo nel mondo occidentale
perché al internazionale, una colore può rappresentare un’altra emozione

Anche se scegliamo il nome di un progetto dobbiamo rassicurarsi che non è

una parole negativa in un altro paese
Siti : estrattore di palette … permettono di trovare le palette di colore
compatibili con una foto o un prodotto

Colore - Accessibilità
In Italia , la legge sull’accessibilità dice che è vietato usare il colore per
veicolare un messaggio ,
Evitare i contrasti con il dolore del testo e del fondo .
Font
Due famiglie
Serif (con le grazie) molti usati nella stampa
e sans-serif (senza grazie ) usati per i video
Le grazie sono piccole merletti che escono dalle linee-illusioni delle linee

Font - Abbinamenti
Sono tanti

Layout x impaginazione
È come vado a disporre gli elementi su web
Abbiamo il layout diviso a colonne di 8/12 più diffuso per velocizzare le cosa
e il layout custom che costa di più perché comporta la parte di un grafico
designer e la parte comunicativa …per compagnie più grandi

La coerenza

Interna nello stesso progetto comunicativo devo mantenere lo stesso registro ,

la stessa interfaccia e le stesse scelte stilistiche
Esempio : usare ‘tu’ su una pagina e poi usare ‘lei’
Usare un font diverso su ogni pagina
Esterna
Quando lavorammo per una marca che esiste già ,
È adattarsi se uno cliente ha già una scelta tipografica,colore , palette

Ma è solo estetica ?
È legato all’efficacia della comunicazione
Eye Tracking : analisi di ciò che interessa l’utente
Split test O test A/B : analizzare qual è la migliore scelta tra elementi del
contenuto

Tutto qui ?
SEM (e relativi metadati) search engine marketing è una disciplina che
studia i fattori principali su cui i motori di ricerca danno il punto per la
classifica dei contenuti…

Analisi dei Log (eye tracking), analitycs e commenti utenti su forum

Social e relativi metadati

Influencer per rappresentare il nostro prodotto (di cui è nato affiliation

marketing )

Testare, testare, testare

Metriche di valutazione - KPI key performance indicator
Per individuare aspetti chiavi che pensi possono interessare ai mie clienti

Tesina 05
13. Layout grafico del progetto giustificando le scelte
Abbiamo parlato del wineframe l’altra volta, dobbiamo provare a mettere i colori
sopra e guisticare le nostre scelte … scelgliere il font

14.descrivere fase critiche che abbiamo trovato nel progetto , la parte che ha
creato più confusione e perché
Lezione 6

A destra c’è la parte era più legata alla comunicazione, contenuti

e A sinistra c’è la parte più tecnica, + programmazione

Primo livello : Strategia

-Capire il motivo del progetto
-Definire i macro (per informare, farsi conoscere, fare soldi)
e micro obiettivi SMART quello che voglio realmente ottenere come , in
quanto tempo, quanto , che cosa
Un progetto comunicativo serve a relazionarsi con l’utente
-Definire le tipologie di utenti a cui il progetto è destinato :
Perché l’utente mi deve scegliere perché ho definito l’utente a cui voglio parlare
…
Analizzare e confrontare le scelte dei concorrenti attraverso interviste, esperti
di dominio e l’analisi dei concorrenti .. faccio un riscontro su quello che ho
pensato
Potrebbe essere cose in più ai quali hanno pensato i concorrenti e vice versa,
devo quindi prendere la cosa migliore di entrambi

Il fatto di selezionare è legato ai costo e tempo a disposizione, se ne ho

abbastanza posso pure non selezionare

Specifico Misurabile Accessibile Realistico Tempo : obbiettivo ben definito, nel

tempo, è una cosa che riesco a fare , ho la tecnologia per farlo ?

2 o 3 tipologie di utenti al massimo

Oggetto :consegna tesina LINFO

NEL EMAIL , QUESTA È LA TESINA DI nome , cognome , matricola