Scarica appunti di web design e più Appunti in PDF di Design solo su Docsity!
WEB DESIGN
INFORMAZIONI GENERALI
Lezioni sia in presenza che online (per evitare la calca in aula) 36 ore (lunedì e mercoledì dalle 17 alle 20 con margini orari di inizio e fine lezione) In questa prima lezione verranno presentati il corso e le modalità d’esame e nel tempo rimanente si inizierà a vedere i primi argomenti del corso le basi che ci permettono di capire cosa significhi “web design”, quali siano gli obiettivi, gli argomenti, le metodologie principali… In queste 5/6 settimane si arriverà ad ideare, progettare e realizzare un sito web che poi potremmo portare all’esame. Punto di partenza del docente: fornire competenze teoriche e pratiche (non solo parole ma anche fatti cercare di concretizzare, con competenze anche tecniche, la capacità, la conoscenza e la competenza per effettuare e condurre una progettazione multimediale, perché il web è uno strumento di comunicazione multimediale, ma anche applicazioni (confine labile tra questi due concetti) che siano efficaci , facili da usare, funzionali raggiungono gli obiettivi nel modo corretto e inclusivi (termine che tornerà spesso nell’accezione di accessibilità) Le slides verranno condivise dal docente perché utili per seguire il discorso, non sostituiscono la sua presentazione, non condivise subito perché effettua qualche correzione/modifica. Il corso ha come obiettivo fornire una solida base teorica sulla progettazione multimediale e sull’organizzazione, architettura dell’informazione, scoprire come si possano conoscere gli utenti finali per poter creare esperienze mirate sugli utenti del sito web/applicazione che andiamo a creare; parleremo anche di contenuti di come questi siti internet vadano popolati, riempiti di informazioni, testi, immagini, video… dando linee guida anche per questo tipo di materiali, introdurre strumenti e metodologie per il design del sito web e dell’ esperienza d’uso (qui abbreviata come UX=User eXperience) ed imparare le tecniche che ci permettono di trasformare le idee in prodotti interattivi introdurremo e studieremo dei linguaggi di creazione di pagine web, linguaggi e strumenti (es. HTML), fogli di stile (CSS) e una libreria, un framework (Bootstrap). Il tutto dovremmo inquadrarlo come criteri di qualità del prodotto non ci interessa semplicemente pubblicare informazioni online , buttandole lì tanto per pubblicarle, ma cercheremo di capire come ci siano criteri di usabilità, accessibilità, trovabilità, sicurezza e in generale di qualità del prodotto multimediale. Concetti un po' trasversali: ad esempio l’analisi degli utenti ci serve per garantire che questi utenti possono interagire con il sistema informatico in modo semplice, efficace, senza barriere d’ingresso. Dal punto di vista delle lezioni, esse hanno per obiettivo quello di conoscere sia la parte teorica (quella concettuale, le metodologie, i concetti chiave e le strategie), sia le tecniche e alcuni software che ci consentono di raggiungere questi obiettivi concretamente. Le lezioni sono in tecnica mista (sia in presenza che online), ci sarà l’alternanza di momenti teorici e attività di laboratorioil corso è impostato per svolgere questo doppio binario: le parti teoriche ci aiutano a sapere nel momento in cui andiamo ad implementarle ed applicarle dal punto di vista pratico; la fase pratica ci serve per conoscere le opportunità , i limiti e le possibilità da tenere in considerazione quando siamo in una fase di ideazione e progettazione del nostro prodotto interattivo. Per l’attività da svolgere serve un PC (Windows/Mac) ma non sono ammessi smartphone. Al termine del corso lo studente avrà acquisito le conoscenze utili a progettare e realizzare un sito internet (Figma, HTML, CSS). Lo studente o acquisisce le conoscenze essenziali nelle nozioni, metodologie e tecniche per la ideazione, progettazione e realizzazione di un sito web. o Applica la conoscenza acquisita e la capacità di comprensione della realtà della comunicazione web in relazione ad ambiti di applicazione commerciali, pubblici, di promozione del territorio: le imprese, il lavoro e i servizi collettivi, l'opinione pubblica, il patrimonio culturale, le città, la circolazione dell'informazione in rete. o Apprende il funzionamento e l'utilizzo di linguaggi e programmi relativi agli obiettivi del corso: HTML, CSS, Bootstrap, FIGMA. Temi Sviluppo web (HTML, CSS, Bootstrap) User centered Design User eXperience design: come modellare l’esperienza d’uso del nostro utilizzatore dello spazio virtuale del nostro sito internet
Progettazione e produzione dei contenuti (testi, immagini, video, applicazioni interattive e funzionalità di vario tipo Come organizzare l’informazione all’interno di un sito internet, determinante per consentire che le informazioni siano trovate da parte dei nostri destinatari Usabilità: capacità dello strumento di lasciarsi usare in modo appropriato, efficace, efficiente da parte dei nostri utenti Accessibilità Si parlerà trasversalmente anche di altri aspetti come l’ottimizzazione del sito web per motori di ricerca e tematiche tecniche legate alla vera pubblicazione del sito online (step finale). Dal punto di vista degli strumenti, il docente ci chiederà di usare questi software, non tutti (il primo sono in alternativa tra loro) e sono due tipi di programmi: o Un programma per scrivere codici Notepad++ (gratuito, opensource, perfetto per il nostro obiettivo, molto essenziale ma da qui in su si possono usare anche programmi molto più complessi, completi, integrati con altri strumenti; Notepad++ è solo per Windows, invece uno strumento leggermente più complesso e migliore da certi punti di vista è Sublime Text (sia per Windows che per Mac; non è un programma opensource, ma un programma realizzato e commercializzato da un’azienda, però ha una
licenza gratuita possiamo scaricarlo ed utilizzarlo senza limiti; si limita semplicemente ad invitarci nell’acquistare
una licenza ”dandoci un po' di fastidio, noia” invitandoci ad acquistare la versione senza questo tipo di solleciti,
oppure con possibilità aggiuntive che la versione base non offre (per le esigenze che abbiamo noi la versione base è più che valida). In ambito di sviluppo web ci sono altri strumenti (l’HTML nasce con il World Wide Web, suo linguaggio
fondamentale più di 30 anni che esistono editor HTML che consentono di “fare la qualsiasi” con il codice: ci sono
alcuni che sono molto pesanti e professionali il PC sul quale l’installiamo fa un po' fatica ad utilizzarli, mentre altri
sono estremamente leggeri, ma ridotti” un po' all’osso per quello che riguarda le funzionalità). Il docente userà Notepad++ per condividere il lavoro che fa lui alla lavagna, ma noi se vogliamo possiamo iniziare ad usare Notepad++ e poi, secondo le nostre esigenze, passare a qualcosa di un po' più articolato, anche se questi strumenti più articolati portano con sé anche dei vantaggi che magari, dopo una prima fase, siamo in grado di sfruttare a nostro vantaggio. Sull’uso di altri software il docente ci invita a chiedergli se si possono usare. Le lezioni potrebbero essere usate anche per fare delle domande al docente, ma niente toglie che si possono fare ulteriori domande anche via mail al docente. Altro programma che si userà è FIGMA : programma di grafica (non solo) non richiede nessuna installazione possiamo usarlo semplicemente tramite un browser (Chrome, Edge)/possiamo installare un app sul nostro pc così da poterlo usare anche fuori dal browser Richiede un’autenticazione. Anche la licenza non educational ci permette di sostenere l’esame ESAME Sito statico fatto di contenuti (in caso ci fossero parti interattive, il docente chiede di simularle, non si aspetta che ci si possa realmente iscrivere al sito ma una maschera di registrazione la vuole vedere) In alternativa a FIGMA il docente dice di non usare ADOBE XD perché non è più supportato. Non useremo FIGMA solo per la parte grafica, ma anche per la parte di prototipazione Programma Introduzione al web design: contesto tecnologico e progettazione user-centered Architettura dell'informazione Usabilità e Accessibilità UX Design Il linguaggio HTML Il linguaggio CSS Il framework Bootstrap 5 (http://getbootstrap.com/) Figma M o d a l i t à d i i n s e g n a m e n t o Lezioni frontali. Sarà attivato uno spazio Moodle per la condivisione di materiali e approfondimenti. Modalità di verifica dell'apprendimento Lo studente dovrà progettare e implementare un sito web a tema libero sulla base delle nozioni apprese a lezione. Le caratteristiche minime del sito saranno comunicate a lezione. Lo studente dovrà predisporre, inoltre, tramite un software di UX Design descritto a lezione:
necessità dell’esame (tra i vari argomenti trattati ci sono i moduli e i form in HTML facciamo in modo che il nostro sito contempli anche quella funzionalità) Di quante pagine deve essere fatto il sito web? Dipende, al docente interessa vedere che gli argomenti siano stati affrontati (form, immagini, tabelle, liste, grafica con i CSS) che noi distribuiamo il lavoro su 40 o 5 pagine è una scelta nostra progettuale. Il sito web è il punto d’arrivo ma il docente ci chiede di fornire documenti(presentazioni, slides, grafici ) e di spiegare il processo che ci ha portato a realizzare il sito web (non valuta solo il risultato finale, ma anche il processo, gli interessa di più il processo che ci ha portato a definire quel sito web , prendere decisioni su utenti finali, contenuti, scelte grafiche…) il risultato finale Parentesi AI Strumenti a doppia faccia: da una parte strumenti che diventeranno parte integrante della nostra vita lavorativa e personale e dall’altra strumenti che “aiutano fin troppo” attenti ad usarli moderatamente (ChatGPT, Cloud, GEMINI). Vibe coding con LLM (Large Language Models) Strumenti con grandi potenzialità Come dobbiamo usarli in modo corretto? Aiutano ad esplorare alternative Permettono di imparare aspetti nuovi, simulare diversi punti di vista LLMs ed esame Il progetto deve avere un nostro linguaggio: L’AI può aiutare il processo, ma tutte le scelte devono essere motivate Dobbiamo saper spiegare ogni decisione Dobbiamo documentare l’uso degli LLMs con una relazione a sé stante, che illustri il ruolo degli strumenti nella nostra attività progettuale , le principali decisioni prese con questo supporto… e tutto quello che mi consenta di avere una visione obiettiva sul nostro lavoro. In caso di sospetto di uso non corretto, le parti di progetto in questione saranno considerate mancanti. Le slides vengono caricate sulla piattaforma Lezioni -registrate da lui le carica successivamente in piattaforma In caso di lezioni online: https://unito.webex.com/meet/andrea.crevola Serve un PC (portatile/fisso) TECNICA MISTA : Lezioni in presenza sia che online Quindi chi può andare in università a seguire la lezione in presenza può farlo. Argomenti trattati -Sviluppo web (HTML) -accessibilità Strumenti per sito web
- Editor HTML/CSS o Notepad++ usato dal docente Windows) o Sublime Text (Windows 6 Mac) o Altri software: chiedere prima al docente
- Progettazione UX o https://www.figma.com/ Cominciamo... Che cos’è un sito web Rete di unità informative contraddistinte da una omogeneità tematica e stilistica e veicolate telematicamente attraverso il protocollo HTTP (Hyper Text Transfer Project).
- Atto di comunicazione
- Spazio di interazione
- Artefatto tecnologico complesso Prima distinzione
- Siti orientati ai contenuti: con natura editoriale (emittente/editore pubblica info e destinatari utenti vedono quelle info
- Siti orientati alle funzionalità : sito web è un insieme di funzionalità volte alla gestione di una base informativa Web design come processo Ogni sito web attraversa almeno 5 fasi
Web design come prodotto Web: ambiente di comunicazione in cui il protagonista è l’utente Web design significa progettare interfacce-utente che accompagnano il flusso operativo dell’utente in modo naturale, anticipando le sue esigenze, dialogando Interfaccia-utente Superficie di contatto tra l’utente e le funzionalità offerte da uno strumento. Ogni oggetto con cui entriamo in relazione è dotato da un’interfaccia tra (es. volante, cruscotto, pedali e il cambio sono l’interfaccia di un’automobile. Lezione del 11 febbraio 2026 Focus: siti web Non possiamo limitarci a considerare il sito web come parte integrante del web. È uno spazio di collaborazione con altra macchina/altri utenti che condividono quello spazio. Parlare di siti web significa occuparsi del processo che ci permette di metterlo online. La vita del nostro progetti si compone delle prime 4 fasi ( analisi preliminare : prima ancora di pensare al sito dobbiamo porci delle domande, progettare il sito web/l’app: ragionare su parte grafica e contenuti; realizzazione : si passa a costruire il codice e far funzionare il prodotto, infine si passa ad una fase di verifica/controllo : nelle fasi precedenti ci siamo persi un elemento e allora in questa dobbiamo verificarlo/controllare che ci siano tutti gli elementi utili e necessari al nostro sito). Nella 5 fase ( pubblicazione, monitoraggio e manutenzione ) viene pubblicato, monitorato il contenuto. Queste fasi sono elastiche, in quanto: Tempistiche complessive e delle singole fasi possono variare Tipicamente, le tempistiche hanno un impatto sui costi del progetto Inoltre, si tratta sempre di un’opera collettiva, che richiede la partecipazione di diverse professionalità Un sito web è una superficie di contatto tra l’utente e le funzionalità che quel sito consente di portare a termine. Ci possono essere siti orientati ai contenuti ( Web as software interface ) e siti orientati alle funzionalità ( Web as hyper-text system ). Una volta accertato che i contenuti siano accessibili all’utente e che quest’ultimo acceda alle funzionalità del sito web, arrivo alla fase di design. È presente una componente di artigianato : messa sul campo dal professionista. Gli utenti leggono i contenuti in un certo modo: questo aspetto ci è noto già in ambito letterario. In un contesto orientato ad altri obiettivi dobbiamo trovare altre prospettive che dipendono dal contesto in cui lavoriamo. Le forze in gioco di tutto ciò sono: -sullo sfondo la tecnologia : 15-20 anni fa era difficile pubblicare contenuti, pensare a servizi da fruire. Integrare un contenuto con l’AI era impensabile. Una buona competenza di chi lavora in questo settore è conoscere in che orizzonti lavora la tecnologia. -gli utenti : l’altro lato dell’atto comunicativo, lavorare senza sapere chi abbiamo di fronte non va bene. -i contenuti : se il sito web è il contenitore, essi sono ciò che troviamo dentro ad esso senza contenuti il sito web non ha senso di esistere tanto che un sito web è destinato a fallire se non sono presenti i contenuti. Ci sono contenuti solo passivi (devo solo leggerli) e contenuti più attivi/interattivi -il contesto : può cambiare da progetto a progetto. Si intendono tutte quei vincoli ed opportunità non riguardanti il sito web ma il contesto comunicativo a cui si fa riferimento. Sito deve essere pronto entro giugno (centro estivo)/settembre (scuola). Bisogna lavorare su tutti questi aspetti: mi dimentico il contesto in cui sto lavorando. Nel mondo della comunicazione online ci sono tutti elementi legati all’accessibilità… Un sito web è la risposta data dal team di progettazione e sviluppo accanto ad una precisa ecologia dell’informazione. Le professioni del web Un sito web è il risultato di un processo di lavoro collettivo che vede coinvolte differenti figure professionali.
Un elenco dei contenuti mancanti che andrebbero inseriti Una lista degli elementi considerati imprescindibili sulla nuova home page Quali criteri adotteranno per giudicare Strumento utile, si riesce a fare sempre, metodo economico Analisi comparativa Individuazione di un insieme di siti web “concorrenti”, analoghi per obiettivi/target/contenuti/funzionalità. L’elenco può essere facilmente costruito in autonomia ma può essere rafforzato dalle indicazioni di un esperto di contenuti (che spesso è il committente stesso). Si costruisce una griglia di osservazione articolata su indicatori che consentano di schematizzare: Quali e quanti contenuti sono gestiti da ciascun sito esaminato Quali schemi Analisi comparativa parte 2 Serve a vedere come sono strutturati gli altri siti per vedere se e cosa cambiare quali modifiche apportare Survey con utenti finali Pianificazione Erogazione Sintesi Presentazione risultati Tener conto i pro e i contro Designers Italia https://designers.italia.it La survey è un questionario Intervista: c’è una traccia che viene fornita, può essere totalmente libera la persona intervistata ha più “spazio di risposta” questionario: strutturato (a determinata domanda devo/bisogna rispondere “A/B/C”) Metodologie di indagine quantitative Impossibile coinvolgere stakeholders/utenti finali possibile ricorrere a metodi che si basano sulle tracce lasciate dagli utenti sulla precedente versione del sito web/su sistemi analoghi. Gli utenti possono essere attratti dalle tendenze del momento come semplicemente lanciare suggerimenti poco attendibili/non pertinenti. Uno dei rischi commesso da chi è alle prime armi è farsi ingannare da chiunque. Analisi dei log-file Analisi delle query di ricerca Analisi dei clickstream Nota bene: In molti casi, sono informazioni inesistenti (non abbiamo una storia) o inaccessibili (es. gara) Possono sussistere problematiche relative alla privacy degli utenti
o Se il sito chiede solo il primo livello sicuro;
o Anche secondo e terzo? Non affidabile COOKIES Biscottino, file che aiutano a registrare ciò che l’utente fa sul sito, immerso dal sito nel nostro PC. File di testo che il sito deposita nella memoria del nostro browser per ricordarsi chi siamo non dobbiamo più fare il login/si ricorda che abbiamo spostato quel file in una fase precedente. Dopo 20 minuti di inattività, dovremmo essere sbattuti fuori dal sito. Esso si ricorderà dove abbiamo spostato il mouse, qual è stata l’ultimo sito visto. ( primo livello di tracciamento ) Lezione del 16 febbraio 2026 Sì, il ragionamento che fai è corretto e puoi strutturarlo così, in modo più chiaro e “da esame”. In generale, gli strumenti di web analytics condividono la stessa logica di base. Che si tratti di Google Analytics o di Web Analytics Italia , le metriche fondamentali restano le stesse: utenti sessioni visualizzazioni di pagina durata media della sessione frequenza di rimbalzo
provenienza del traffico dispositivi utilizzati conversioni Quello che cambia, spesso, è l’interfaccia (menu a sinistra o a destra, organizzazione delle dashboard, nomi leggermente diversi), ma i criteri di misurazione e le logiche analitiche sono molto simili. Questo perché tutti questi software si basano su standard condivisi di tracciamento (tag, cookie, eventi, ecc.). Perché esiste Web Analytics Italia? La differenza non è tanto tecnica, quanto politica e istituzionale. Google Analytics è di proprietà di una grande azienda privata statunitense. I dati raccolti riguardano anche cittadini italiani che interagiscono con siti pubblici (comuni, università, ministeri). Per motivi di sovranità dei dati, privacy e conformità al GDPR , la pubblica amministrazione italiana ha sviluppato una propria piattaforma. Web Analytics Italia è quindi uno strumento promosso dallo Stato per: mantenere il controllo dei dati pubblici garantire maggiore trasparenza ridurre la dipendenza da piattaforme private extra-UE Questa scelta non è isolata: anche altri paesi europei stanno sviluppando soluzioni analoghe per la gestione autonoma dei dati pubblici. Non cambia la logica della misurazione → cambia il regime politico e giuridico del dato. Dal punto di vista semiotico e comunicativo: Google Analytics = infrastruttura privata del capitalismo delle piattaforme. Web Analytics Italia = tentativo di governance pubblica del dato. Perfetto, questo pezzo è molto ricco perché unisce aspetti tecnici, giuridici e strategici dell’analisi dei dati. Ti riorganizzo tutto in modo chiaro e “da esame”. Accesso e differenza tra pubblico e privato Web Analytics Italia Può essere utilizzato solo dalle pubbliche amministrazioni italiane. Non è uno strumento aperto a privati o aziende. Serve per garantire controllo pubblico dei dati dei cittadini. Google Analytics È gratuito. È aperto a chiunque (aziende, privati, enti). È uno standard di mercato da quasi vent’anni (lanciato nel 2005). È molto maturo, stabile, ricco di funzionalità. Si integra facilmente con altri strumenti Google (Ads, Search Console, ecc.). Vantaggio competitivo: ecosistema integrato. Come si installa Google Analytics su un sito? Il processo è relativamente semplice:
- Si crea un account su analytics.google.com.
- Si registra il sito (proprietà).
- Google fornisce un codice di tracciamento.
- Questo codice va inserito in tutte le pagine del sito (nei file HTML).
- Da quel momento, ogni visita genera un invio di dati ai server Google. Ogni volta che un utente visita una pagina: viene registrata la pagina vista,
In sintesi: non misura solo traffico, ma performance comunicativa. Lettura più teorica (se vuoi fare un salto di livello) Dal punto di vista semiotico e culturale: Il codice di tracciamento è un dispositivo invisibile di raccolta dati. L’utente naviga → il sistema registra. Ogni azione diventa dato. Ogni dato diventa informazione strategica. Qui possiamo collegarci ai seguenti concetti: capitalismo delle piattaforme economia dell’attenzione governance algoritmica Il sito non è solo uno spazio comunicativo, ma un ambiente monitorato e ottimizzato continuamente. Report in tempo reale: perché è utile? La sezione Tempo Reale di Google Analytics permette di vedere cosa sta succedendo negli ultimi minuti (di solito ultimi 30 minuti). Ci mostra: utenti attivi ora provenienza geografica pagine visualizzate sorgenti di traffico eventi attivati Quando è strategico usarlo?
1. Durante una newsletter Invii una newsletter adesso → controlli subito: quanti utenti arrivano quali pagine visitano quanto tempo restano se effettuano conversioni Serve per misurare l’effetto immediato della campagna. 2. Stress test del sito Se mandi una campagna che porta 1000 utenti contemporanei: il server regge? il sito rallenta? ci sono errori? I dati in tempo reale aiutano anche a dimensionare l’infrastruttura tecnica. 3. Analisi geografica Puoi vedere da dove arrivano gli utenti in quel momento. Questo può dare indicazioni su: mercati attivi campagne internazionali traffico anomalo Sezione “Acquisizione”: cosa significa? Acquisizione = momento in cui un utente diventa visitatore del nostro sito. Domanda chiave: Dove si trovava l’utente prima di arrivare da noi?
Questa è una delle sezioni più importanti di Analytics. Le principali fonti di traffico
1. Direct (Accesso diretto) Include utenti che: digitano direttamente l’URL usano un preferito cliccano un link in un’app (WhatsApp, Instagram bio, email senza tracciamento) arrivano da ambienti non web Se la percentuale è alta (es. 54%) significa forte fidelizzazione. Gli utenti già conoscono il sito. Esempio tipico: Siti universitari o istituzionali. 2. Organic Search (Ricerca organica) Traffico che arriva da motori di ricerca senza pagamento. Esempio: Cerchi “scarpe da calcio” su Google e clicchi un risultato non sponsorizzato. Questi risultati dipendono da: SEO parole chiave contenuti struttura del sito Se l’organico è alto significa buon posizionamento naturale. 3. Paid Search (Ricerca a pagamento) Traffico che arriva da: annunci sponsorizzati campagne Google Ads advertising su motori di ricerca Qui puoi misurare: quanto traffico deriva dall’investimento pubblicitario se la spesa sta generando risultati Esempio nel tuo caso: Organic = 24,5% Paid = 8,7% Questo dato va sempre confrontato con: quanto stai investendo quali sono le conversioni generate Non basta sapere che l’8% arriva da paid: devi capire se quell’8% compra davvero. Perché il grafico è importante? Ogni report ha un grafico temporale. Serve per: individuare picchi capire anomalie collegare eventi a risultati Esempio: 3 febbraio → picco di traffico Perché? Campagna? Newsletter? Evento esterno? Problema tecnico? L’analisi dati è sempre: interpretazione, non solo lettura numerica. Lettura strategica (livello più alto) L’acquisizione ti dice: quanto sei conosciuto (Direct) quanto sei trovabile (Organic) quanto investi (Paid)
Organic Shopping Traffico da piattaforme di comparazione prezzi come: Google Shopping Organic Video Accessi da risultati video (es. sezione video di Google o YouTube non sponsorizzato). Unassigned Google non riesce a determinare la fonte. Può dipendere da: privacy settings blocco tracciamento parametri mancanti Paid Search: come funziona davvero? Qui entriamo nel modello economico di Google. Il motore di ricerca è gratuito. Google guadagna dalla pubblicità. Il principio è quello che spesso viene riassunto così: Se il prodotto è gratuito, il prodotto sei tu. Google vende la nostra attenzione. Come funziona la pubblicità sui motori di ricerca? Non è come un cartellone pubblicitario fisso. È un’asta in tempo reale. Quando un utente scrive una parola chiave: es. “scarpe da calcio Adidas” succede questo:
- Le aziende hanno deciso prima su quali parole vogliono comparire.
- Hanno stabilito quanto sono disposte a pagare per un clic.
- Si attiva un’ asta automatica.
- Google decide quali annunci mostrare. Non vince solo chi offre di più. Conta anche: qualità dell’annuncio pertinenza qualità della pagina di destinazione tasso di clic previsto Questo meccanismo è chiamato Ad Auction. Perché gli annunci cambiano? Perché sono personalizzati. Se: abiti a Vercelli → vedrai negozi vicini. abiti a Torino → altri annunci. rifai la ricerca domani → risultati diversi. La pubblicità è: dinamica localizzata personalizzata basata su dati comportamentali Differenza con pubblicità tradizionale Pubblicità novecentesca: paghi lo spazio paghi il tempo paghi la dimensione Pubblicità digitale : paghi il clic paghi la performance paghi l’attenzione Spazio e tempo sono virtualmente infiniti. Collegamento teorico (livello alto)
Qui puoi fare un collegamento molto forte con: economia dell’attenzione capitalismo delle piattaforme mercificazione del comportamento Il motore di ricerca non vende risultati. Vende la possibilità di intercettare un’intenzione. Quando cerchi “scarpe da calcio”: non stai solo cercando informazioni, stai esprimendo un’intenzione economica. E quella intenzione viene messa all’asta. Come guadagna Google: il costo per clic (CPC) Quando un utente clicca su un annuncio: Google prende una quota dal budget dell’inserzionista. Il costo si chiama CPC (Cost Per Click). Il denaro viene scalato dall’account pubblicitario dell’azienda. Lo strumento si chiamava Google AdWords , oggi si chiama Google Ads. Parole chiave generiche vs specifiche Funziona così: Tipo di keyword Volume di ricerca Precisione Costo tendenziale "scarpe" altissimo bassissima basso per clic "scarpe da calcio" medio più preciso medio "scarpe da calcio per bambini" più basso molto preciso più alto "scarpe da calcio per bambini blu" bassissimo iper-mirato spesso più alto Perché? Le parole generiche hanno tanto traffico ma poca intenzione chiara. Le parole specifiche hanno meno traffico ma alta intenzione d’acquisto. Chi cerca: "scarpe" forse sta solo curiosando. Chi cerca: "scarpe da calcio per bambini blu taglia 32" probabilmente vuole comprare. L’asta pubblicitaria Ogni volta che qualcuno fa una ricerca:
- Si attiva un’asta automatica.
- Partecipano le aziende che hanno scelto quella parola chiave.
- Google valuta: o offerta economica o qualità dell’annuncio o qualità della pagina di destinazione o tasso di clic atteso Non vince solo chi offre di più. Vince chi offre meglio + ha qualità migliore. Più concorrenza su una keyword → prezzo più alto. È un mercato di domanda e offerta di intenzioni di ricerca. Budget e controllo L’azienda: imposta un budget (es. 10.000€ al mese) decide quanto è disposta a pagare per clic può interrompere o modificare tutto in tempo reale
Sono la prima pagina vista dall’utente. Sono fondamentali perché: determinano la prima impressione influenzano il tasso di rimbalzo incidono sulle conversioni Ti permettono di capire: quali contenuti portano traffico quali keyword funzionano quali campagne funzionano meglio Se una pagina di destinazione porta tanto traffico ma zero vendite→ c’è un problema di persuasione o di coerenza. Visione strategica finale Abbiamo questo ciclo: Ricerca utente →Asta pubblicitaria→Click →Pagina di destinazione →Navigazione →Conversione →Analisi dati → Ottimizzazione →Nuova campagna È un sistema circolare e auto-ottimizzante. Privacy e Unione Europea Nell’Unione Europea il trattamento dei dati è regolato dal GDPR. Questo significa: consenso esplicito ai cookie possibilità di rifiuto limitazioni sulla profilazione anonimizzazione e aggregazione dei dati Per questo motivo strumenti come Google Analytics hanno dovuto adattarsi (es. anonimizzazione IP, consenso esplicito, ecc.). Molti dati demografici sono: aggregati probabilistici basati su consenso Pagine di destinazione: interpretazione strategica Se una pagina rappresenta il 2% delle landing page: e il sito ha 1000 prodotti, quel prodotto è estremamente rilevante. Può voler dire: buon posizionamento SEO campagna pubblicitaria efficace interesse particolare del mercato Se noti molte visite alla pagina “Canada”: può esserci traffico internazionale può esserci una campagna attiva può esserci un’anomalia geografica Le landing page ti dicono da dove parte l’esperienza utente. Il Funnel di acquisto (Purchase Journey) Esempio:
- 100% → inizio sessione
- 30% → visualizza prodotto
- 27% → aggiunge al carrello
- percentuale ancora minore → acquista Qui misuri il tasso di abbandono tra uno step e l’altro. Se perdi il 50–70% a ogni passaggio: il processo è troppo complesso la pagina non convince
i costi di spedizione spaventano il checkout è macchinoso Il funnel serve per fare ottimizzazione. Ogni step è una frizione. Ogni frizione è perdita di utenti. Dati demografici: come li conosce Google? Google ricava dati da: account Gmail collegati consenso alla personalizzazione annunci comportamento aggregato su più siti Esempi: Paesi e regioni Derivano dall’IP (con approssimazione). Genere ed età Derivano da: dati dichiarati inferenze comportamentali Sono indicativi, non certi al 100%. Interessi Se molti utenti risultano interessati a: tecnologia viaggi finanza lifestyle Significa che Google ha osservato pattern di navigazione ricorrenti. Sono inferenze probabilistiche. Utilità pratica: puoi scegliere dove investire in pubblicità. Se il tuo pubblico ama i viaggi, puoi testare campagne su siti travel. Lingua: dato più affidabile La lingua deriva dal browser. Se 30.000 utenti hanno browser in inglese: forse conviene avere il sito in inglese. forse il mercato è internazionale. È un dato più tecnico e meno inferenziale. Audience (cluster di utenti) Google crea gruppi: utenti recenti utenti che non acquistano utenti di una certa area utenti con certi interessi Questi cluster possono sovrapporsi. Servono per: re-marketing campagne mirate segmentazione strategica Tecnologia e dispositivi Puoi sapere: web vs app sistema operativo (Mac, Windows, Android, iOS…) tipo di dispositivo (desktop, mobile, tablet, TV)
- Progetto
- Osservo
- Correggo
- Testo di nuovo Il punto più interessante (anche in chiave semiotica) Questi strumenti ci permettono di verificare se: Un segno viene interpretato correttamente Un bottone comunica davvero “azione” Un titolo genera aspettativa Un link viene percepito come cliccabile È quasi una verifica empirica dell’efficacia semiotica dell’interfaccia. In altre parole: L’interfaccia non è solo estetica, è un sistema di segni che produce comportamenti. E questi strumenti ci permettono di misurare la relazione tra: intenzione del progettista interpretazione dell’utente Attenzione però Più si scende nel dettaglio: più l’analisi diventa potente più cresce la responsabilità etica Perché stiamo osservando comportamenti molto fini. Passaggio fondamentale: trasformare dati grezzi in strumenti progettuali condivisibili. Quattro nodi chiave:
- I vincoli reali del progetto
- La qualità (imperfetta) dei dati
- Il problema della trasmissione delle informazioni al team
- La necessità di sintetizzare in deliverable Il mondo reale non è il mondo ideale In teoria vorremmo: Analytics approfondito Heatmap Session recording Interviste qualitative Test di usabilità A/B test In pratica dobbiamo fare i conti con: Budget Tempo Risorse del team Priorità aziendali Progetti fatti “come favore” Deadline ravvicinate Qui entra la competenza progettuale: scegliere la combinazione migliore possibile , non quella perfetta. È un principio di equilibrio : I limiti di uno strumento possono essere compensati dai punti di forza di un altro. Il problema dei dati grezzi I dati non sono mai: perfettamente coerenti completamente puliti automaticamente significativi
Possono essere: contraddittori incompleti rumorosi interpretativi Il vero lavoro non è raccoglierli. È renderli operativi. Il problema della trasmissione nel team Esempio perfetto: 20 interviste → 40 pagine di trascrizione. Se lavori da solo: le conosci le ricordi le interiorizzi Se lavori in team: nessuno leggerà 40 pagine nessuno le userà davvero l’analisi rischia di diventare inutile Se non produci sintesi condivisibili, l’analisi non entra nel progetto. Qui entrano in gioco i Deliverable Deliverable = documenti sintetici, condivisibili, operativi. I principali sono: Personas (personaggi) Non sono utenti reali, ma archetipi costruiti sulla base dei dati raccolti. Servono a: concretizzare l’utente renderlo “presente” nel processo decisionale evitare la vaghezza (“il nostro utente tipo…”) Esempio : Gianni, 38 anni, lavora, ha un figlio di 8 anni. Deve pagare i buoni mensa rapidamente durante la pausa pranzo. Ha poco tempo, vuole chiarezza, odia dover cercare informazioni. Non è un profilo marketing. È un profilo funzionale. Non interessa: se è uomo o donna se guadagna X euro se compra scarpe di marca Interessa: cosa vuole fare cosa lo frustra quali ostacoli incontra User Journey (o Scenari d’uso) Raccontano il percorso dell’utente nel tempo. Esempio:
- Gianni entra nel sito del comune
- Cerca “buoni mensa”
- Non trova subito il link
- Usa il motore di ricerca interno
- Arriva alla pagina pagamento
- Compila il modulo
