Digital Media PDF

Digital Media LEZIONE 2 1. Architettura dell’Informazione (IA) L’architettura dell’informazione (IA) è il processo di strutturare, organizzare ed etichettare contenuti digitali, con l’obiettivo di renderli facilmente accessibili e comprensibili per gli utenti. Non si tratta di elementi visibili all...

Digital Media LEZIONE 2 1. Architettura dell’Informazione (IA) L’architettura dell’informazione (IA) è il processo di strutturare, organizzare ed etichettare contenuti digitali, con l’obiettivo di renderli facilmente accessibili e comprensibili per gli utenti. Non si tratta di elementi visibili all’utente, ma della base che guida lo sviluppo dell’interfaccia e dell’esperienza utente. Una buona IA migliora la ndability (capacità di trovare ciò che si cerca) e la discoverability (capacità di scoprire nuove informazioni). Componenti principali dell’IA: 1. Contenuto: analisi e organizzazione dei dati. 2. Utente: esigenze e aspettative. 3. Contesto: ambiente d’uso del sistema. Processi correlati: Content Inventory: una lista dettagliata dei contenuti digitali disponibili, utile per analizzarne l’ampiezza. Content Audit: valutazione della qualità del contenuto, individuando elementi da aggiornare, eliminare o integrare. Taxonomy: un elenco gerarchico di termini utilizzato per classi care i contenuti. La tassonomia facilita la navigazione e connette contenuti simili tra loro. Metodi come il Card Sorting (organizzazione di schede da parte degli utenti) e il Tree Testing (valutazione della struttura gerarchica) sono fondamentali per progettare una tassonomia e cace. Sitemaps: rappresentano visivamente la struttura gerarchica dei contenuti di un sito web, mostrando relazioni tra pagine e ussi informativi. 2. User Flow Il User Flow è una rappresentazione gra ca dei percorsi che un utente può seguire all’interno di un sistema per completare determinate attività. Questo strumento è cruciale per comprendere come l’utente interagisce con il contenuto e per identi care eventuali problematiche nel usso delle operazioni. Elementi principali: Inizio e ne (ovale). Azioni o processi (rettangolo). Decisioni (diamante). Flusso o percorso (freccia). Fasi operative: 1. Identi care gli obiettivi dell’utente. 2. Allineare il sistema a tali obiettivi. 3. De nire i punti di accesso e le informazioni necessarie. 4. Creare una mappa visiva del usso. 5. Testare e revisionare. fi fi fi fi fl fi fi fl ffi fi fl 3. Navigazione La navigazione comprende tutti gli elementi dell’interfaccia che consentono agli utenti di accedere alle informazioni in modo rapido ed e cace. Tipologie di navigazione: Globale: menu principali visibili su tutte le pagine. Locale: menu speci ci per sezioni o categorie. Utility: link ausiliari come accesso, impostazioni o aiuto. Breadcrumb: percorso che mostra la posizione dell’utente all’interno del sito. Fattori da considerare nel design: 1. Cosa includere nei menu. 2. Posizionamento degli elementi. 3. Aderenza ai pattern di navigazione più adatti. 4. Wireframing Un wireframe è una rappresentazione schematica di una pagina web o di un’app, che evidenzia la struttura e i principali elementi funzionali. È essenziale per visualizzare lo schema delle informazioni e veri care la loro organizzazione. Tipologie: 1. Low-Fidelity (Lo-Fi): disegni a mano o digitali semplici, senza colori o dettagli. Ideali per le fasi iniziali. 2. Mid-Fidelity (Mid-Fi): layout digitali con maggiore precisione e dettagli. 3. High-Fidelity (Hi-Fi): prototipi realistici e interattivi, utili per test avanzati. Vantaggi: Identi care e correggere problemi nelle prime fasi del progetto. Favorire la collaborazione nel team e con gli utenti. 5. Prototipazione e Testing La prototipazione è il processo di creazione di modelli (Lo-Fi o Hi-Fi) per testare design e funzionalità. Lo-Fi Prototypes: Vantaggi: economici, rapidi, ideali per test preliminari. Svantaggi: limitata interattività, comprensione ridotta. Hi-Fi Prototypes: Vantaggi: feedback dettagliati e realistici. Svantaggi: costi più elevati. Think Aloud Protocol: metodo di testing in cui gli utenti esprimono verbalmente le loro impressioni mentre interagiscono con il prototipo. È utile per comprendere i processi mentali e migliorare l’interfaccia. fi fi fi ffi LEZIONE 3 1. Introduzione e contesto Progettare per dispositivi diversi richiede una comprensione profonda delle di erenze tra mobile e desktop, che in uenzano il layout, le interazioni, e i contenuti. Negli ultimi anni, il tra co Internet da dispositivi mobili ha superato quello da desktop, raggiungendo il 64% nel 2020. Tuttavia, il desktop rimane rilevante in ambiti come B2B, e-commerce di prodotti di alto valore e video streaming. SEO Mobile: L’ottimizzazione per dispositivi mobili è fondamentale per migliorare il posizionamento sui motori di ricerca e rendere i contenuti facilmente accessibili agli utenti in mobilità. 2. Formati e layout Mobile vs Desktop: Mobile: schermi piccoli, risoluzione inferiore, utilizzo verticale. Desktop: schermi grandi, risoluzione superiore, utilizzo orizzontale. Tipologie di layout: 1. Fixed Layout: larghezza ssa, poco adatto ai dispositivi mobili. 2. Responsive: il layout si adatta dinamicamente alle dimensioni dello schermo. 3. Fluid Layout: i contenuti si scalano in modo uido rispetto alla larghezza dello schermo. 4. Adaptive Layout: più layout progettati speci camente per diverse fasce di dimensioni dello schermo. Breakpoints: Punti in cui il layout si adatta alle dimensioni dello schermo, permettendo una migliore esperienza utente. 3. Contesto d’uso e interazioni Desktop: Ambiente tranquillo. Attività complesse e approfondite. Utente concentrato e coinvolto. Mobile: Utilizzo in movimento. Attività rapide e mirate. Utente spesso distratto e di fretta. Interazioni: Mobile: basate sul touch (tap, swipe, pinch). Desktop: utilizzo di mouse e tastiera, con possibilità di multitasking. Dimensioni dei pulsanti: iOS: 44x44 px. Android: 48x48 dp (Density-independent Pixels). fl fi fi fl ff ffi  4. Contenuti Adattamento: Mobile: contenuti brevi e diretti, layout minimalisti per una migliore visibilità. Desktop: contenuti ricchi e complessi, con layout più articolati. Approcci narrativi: Crossmedia: la stessa “storia” viene adattata su più canali. Transmedia: ogni canale racconta una parte autonoma, ma interconnessa, della narrazione. 5. Asset Mapping Mappa che organizza schermate ed elementi per garantire coerenza tra dispositivi e canali. Punti chiave: 1. Funzionalità: devono essere accessibili su tutti i dispositivi. 2. Work ow: i processi devono essere uidi tra dispositivi diversi. 3. Coerenza visiva e di tono: il design e il messaggio devono ri ettere lo stesso stile. 6. Performance e standard Mobile: Utilizzo di sensori come GPS, accelerometro, e fotocamera per esperienze immersive. Aspettative di caricamento: meno di 3 secondi. Desktop: Maggiori capacità di elaborazione e memoria, adatto a progetti complessi. Aspettative di caricamento: 5 secondi. Ottimizzazione: Evitare elementi inutili che rallentano i caricamenti. Adattare immagini e contenuti multimediali alla qualità necessaria per ogni dispositivo. Linee guida speci che: iOS: Human Interface Guidelines. Android: Material Design Guidelines. 7. Approcci al design Mobile- rst: Priorità al design per mobile. Vantaggi: semplicità e prestazioni ottimizzate. Svantaggi: di coltà di adattamento al desktop. Desktop- rst: Design iniziale per desktop. Vantaggi: maggiore creatività e completezza. Svantaggi: prestazioni inferiori su mobile. Scelta dell’approccio: Dipende dal pubblico target e dalla tipologia di contenuto. fi fi fi fl ffi fl fl  LEZIONE 4 1. Introduzione all’Atomic Design L’Atomic Design, introdotto da Brad Frost nel 2016, rappresenta un cambiamento di prospettiva nel design digitale. Questo approccio consente di superare la visione tradizionale del design di un sito web come una semplice raccolta di template statici, favorendo invece la costruzione di sistemi dinamici basati su componenti adattabili. La loso a alla base è “Creare sistemi di design, non pagine”. Questo metodo si adatta perfettamente alle esigenze dei progetti responsivi, garantendo una maggiore coerenza e essibilità. 2. Di erenza tra User Experience (UX) e User Interface (UI) La User Experience (UX) riguarda le percezioni e le reazioni di una persona derivanti dall’utilizzo o dall’anticipazione di utilizzo di un prodotto, sistema o servizio (ISO 9241-210). Si concentra su aspetti come chi utilizzerà il prodotto, perché, cosa dovrà fare e come funzionerà. La User Interface (UI), invece, si occupa dell’aspetto visivo e della sensazione generale di un design. Si tratta dell’interazione diretta tra l’utente e l’interfaccia visiva. 3. Style Guides Le style guides sono ecosistemi di linee guida che in uenzano ogni aspetto di un progetto. Non esistono regole universali, ma si distinguono vari tipi di linee guida: Brand Identity: de nisce gli elementi visivi del marchio, come logo e palette di colori. Design Language: include principi estetici e funzionali per la progettazione. Tono di voce: regola il modo in cui il marchio si esprime. Stile di scrittura: stabilisce regole per la redazione di contenuti coerenti. Pattern Libraries: raccolte di componenti dell’interfaccia (front-end style guides) per garantire coerenza e facilitare il lavoro dei progettisti. 4. Componenti dell’Atomic Design L’Atomic Design si articola in cinque livelli principali: 1. Atomi: sono gli elementi base, indivisibili, come etichette, bottoni, icone e campi di input. Costituiscono i mattoni fondamentali dell’interfaccia. 2. Molecole: rappresentano gruppi di atomi combinati per formare elementi dell’interfaccia che funzionano come unità indipendenti, come un campo di ricerca con un’etichetta e un bottone. 3. Organismi: sono componenti complessi che combinano molecole e atomi per creare sezioni distinte di un’interfaccia, come header, footer o sidebar. 4. Template: pagine vuote che de niscono la struttura dei contenuti e il layout attraverso l’uso di organismi e altri componenti. Servono come wireframe strutturali. 5. Pagine: sono istanze speci che dei template che mostrano come appare l’interfaccia con i contenuti reali. Brad Frost descrive questa gerarchia come un sistema modulare in cui ogni livello costruisce il successivo, permettendo di creare interfacce coerenti e dinamiche. ff fi fi fl fi fi fl fi  FLIPPED CLASSROOM 1. Introduzione ai Layout e Obiettivi Un layout e cace è progettato per manipolare il focus dell’osservatore e ottimizzare l’esperienza utente. Si parte da un layout canonico, che può essere adattato a varie forme e dimensioni di schermo. È fondamentale considerare: Spazi vuoti (white space): Importanti per organizzare gli elementi visivi e migliorare la leggibilità. Classi di dimensione delle nestre (Window Size Classes): Punti di interruzione che determinano modi che al layout. Esistono cinque classi principali: compatto, medio, espanso, grande ed extra-large. 2. Componenti del Layout Ogni layout è composto da elementi chiave che lavorano insieme: Colonna (Column): Blocchi verticali di contenuto. Margine (Margin): Lo spazio tra il bordo dello schermo e gli elementi interni. Riquadro (Pane): Contenitori per il layout, che possono essere ssi, essibili, mobili o semipermanenti. Maniglia di trascinamento (Drag Handle): Permette di ridimensionare i riquadri, essenziale per i dispositivi pieghevoli. Distanziatore (Spacer): Lo spazio tra due riquadri. Folding (Fold): La divisione tra due schermi nei dispositivi pieghevoli. 3. Regioni del Layout Il layout si divide principalmente in due regioni: Navigation Region: Include componenti per navigare nell’app, come Navigation Drawer, Navigation Rail e Navigation Bar. Body Region: Contiene la maggior parte del contenuto dell’app, organizzato in riquadri (panes) con immagini, testi, pulsanti, barre di ricerca, ecc. 4. Tipi di Riquadri (Panes) Riquadro sso (Fixed): Larghezza ssa e non modi cabile. Riquadro essibile (Flexible): Si adatta dinamicamente allo spazio disponibile. Riquadri multipli: Utilizzati nei layout espansi, con riquadri di larghezza variabile per supportare dispositivi pieghevoli o layout dinamici. ffi fi fl fi fi fi fi fl fi 5. Multi-window La funzionalità multi-window permette di visualizzare più app contemporaneamente, utilizzando riquadri ridimensionabili. Per dispositivi che non supportano la maniglia di trascinamento, si possono usare: Pulsanti per scambiare i layout. Impostazioni in-app per personalizzare la visualizzazione. 6. Classi di Dimensioni delle Finestre (Window Size Classes) Le classi di dimensioni determinano come un layout deve adattarsi allo spazio disponibile. I breakpoint principali sono: Compact (Width < 600dp): Utilizzato per smartphone in verticale. Layout a singolo riquadro con margini di 16dp. Medium (600 ≤ Width < 840dp): Per tablet in verticale o telefoni orizzontali. Può includere uno o due riquadri. Expanded (840 ≤ Width < 1200dp): Layout con uno o due riquadri, con un riquadro sso largo 360dp per impostazione prede nita. Large (1200 ≤ Width < 1600dp) e Extra-Large (Width ≥ 1600dp): Possono includere no a tre riquadri con margini di 24dp. Domande chiave per progettare una Window Size Class: 1. Quali parti del layout devono essere visibili? 2. Come dividere lo schermo? 3. Quali elementi devono essere ridimensionati? 4. Cosa deve essere riposizionato? 5. Cosa deve essere scambiato o invertito? 7. Layout Canonici I layout canonici rappresentano modelli base per diverse applicazioni e sono ottimizzati per adattarsi alle Window Size Classes. Feed Layout: Composizione a griglia per contenuti, come schede o elenchi. Gli elementi si riadattano dinamicamente con il cambiamento dello spazio disponibile. Nei layout compact, si sviluppa verticalmente con una lista di card. Nei layout più grandi, la griglia cresce in numero di colonne. 8. Consigli Generali per il Design del Layout Nascondere elementi non essenziali su dispositivi piccoli, rendendoli accessibili tramite menu o pulsanti. Usare riquadri essibili per garantire adattabilità. Aumentare la leggibilità del testo mantenendo una lunghezza ideale della riga di 40-60 caratteri. Assicurare che i componenti intercambiabili abbiano funzioni equivalenti per non confondere l’utente. fl fi fi fi LEZIONE 5 La lezione si focalizza sulla progettazione di artefatti digitali con un’attenzione particolare agli stili, al linguaggio visivo e agli elementi gra ci chiave. 1. Stabilire un linguaggio visivo Si parte dal 20-second gut test, un esercizio che raccoglie input dai clienti per de nire i valori estetici del progetto. Si utilizzano screenshot di siti coerenti o visivamente interessanti, valutati dai clienti in 20 secondi. L’obiettivo è individuare direzioni visive condivise per orientare il design. 2. Elementi di stile Tipogra a È importante scegliere caratteri progettati per la lettura su schermo, con forme distintive e leggibili. Nel pairing dei font si cerca equilibrio, contrasto e armonia tra variabili come tipologia (serif, sans-serif), altezza della X, larghezza, stile dei gli e peso. La dimensione del testo varia in base al dispositivo: mobile (12-16pt), tablet (15-19pt), desktop (16-20pt). Si consiglia di mantenere una gerarchia visiva con circa quattro dimensioni principali. L’interlinea dovrebbe essere il 145-150% della dimensione del carattere. Le unità di misura scalabili come rem ed em sono preferibili rispetto ai px. Colori È essenziale usare i colori con parsimonia, garantire contrasto per l’accessibilità (rapporto minimo di 4,5:1) e creare una gerarchia visiva per guidare l’utente. La palette colore è suddivisa in colori primari (dominanti), secondari (accento), neutri e semantici (per messaggi speci ci come errori). Icone Le icone variano per riconoscibilità (universali, uniche, somiglianti, di referenza, arbitrarie), funzione (chiari catrici, decorative) e caratteristiche visive ( at, scheumor che, glyph). Transizioni Le transizioni devono essere uide e aiutare l’utente a comprendere i cambiamenti nell’interfaccia senza distrarlo. 3. Griglie La griglia è fondamentale per organizzare i contenuti. Può essere composta da colonne, righe, gutter, moduli e margini. Le tipologie principali includono: Manuscript grid: adatta a testi lunghi e pagine a scorrimento. Column grid: essibile, con un numero variabile di colonne (es. 12 per desktop, 4 per mobile). Modular grid: divide la pagina sia in verticale che in orizzontale. Hierarchical grid: enfatizza alcuni elementi rispetto ad altri. Baseline grid: allinea tutto a una linea di base per garantire ordine e coerenza. 4. Style Tiles e Element Collages Le Style Tiles, ideate da Samantha Warren, comunicano l’atmosfera visiva del progetto senza la necessità di mockup avanzati. Gli Element Collages, coniati da Dan Mall, aggiungono contesto visivo mostrando componenti dell’interfaccia con gli stili applicati. 5. Accessibilità Le Web Content Accessibility Guidelines (WCAG) mirano a rendere il web accessibile per tutti, incluse persone con disabilità. I principi fondamentali sono percepibilità, operabilità, comprensibilità e robustezza. Ogni linea guida è supportata da criteri di successo, suddivisi in tre livelli: Livello A: accessibilità di base. Livello AA: accessibilità forte. Livello AAA: eccellenza accessibile, raramente richiesta. fi fi fl fl fi fi fl fi fi fi LEZIONE 6 1. Introduzione alle euristiche Le euristiche sono scorciatoie mentali che facilitano il processo decisionale e la risoluzione dei problemi. Nel contesto del design delle interfacce digitali, rappresentano regole generali che riducono il carico cognitivo, aiutando progettisti e utenti a comprendere meglio un sistema. 2. Le 10 Usability Heuristics di Jakob Nielsen Queste linee guida generali per il design dell’interazione, sviluppate inizialmente nel 1989 e perfezionate nel 1990, si basano su 249 problemi di usabilità e 101 principi fondamentali. Pubblicate nel 1994, rimangono attuali e valide per la progettazione di interfacce moderne. Le euristiche non sostituiscono i test utente, ma li completano. Visibilità dello stato del sistema Gli utenti devono essere sempre informati su cosa sta accadendo attraverso un feedback adeguato e tempestivo. La trasparenza genera ducia e controllo. Corrispondenza tra sistema e mondo reale L’interfaccia deve usare termini e convenzioni familiari agli utenti, evitando gergo tecnico e presentando informazioni in ordine naturale e logico. Controllo e libertà dell’utente Gli utenti devono poter correggere errori e tornare sui propri passi attraverso funzionalità come Undo e Redo o pulsanti Annulla chiaramente visibili. Coerenza e standard Il design deve seguire standard consolidati per ridurre il carico cognitivo degli utenti e favorire la familiarità con l’interfaccia. Prevenzione degli errori È preferibile prevenire errori piuttosto che gestirli, ad esempio includendo vincoli, conferme prima di azioni irreversibili e suggerimenti contestuali. Riconoscimento piuttosto che richiamo Le interfacce devono minimizzare la memoria richiesta agli utenti rendendo visibili opzioni e informazioni necessarie. Il riconoscimento è più semplice del richiamo, riducendo lo sforzo cognitivo. Flessibilità ed e cienza d’uso Progettare scorciatoie e funzionalità personalizzabili per soddisfare sia gli utenti esperti che i novizi, migliorando l’e cienza operativa. Design estetico e minimalista Ogni elemento nell’interfaccia deve avere uno scopo chiaro e un alto valore informativo. Ridurre il “rumore visivo” aiuta gli utenti a concentrarsi sugli obiettivi principali. Aiutare gli utenti a riconoscere, diagnosticare e risolvere errori I messaggi di errore devono essere chiari, precisi e costruttivi, indicando il problema e o rendo soluzioni pratiche. Aiuto e documentazione Sebbene un sistema ideale non richieda documentazione, è utile fornire guide, tutorial e FAQ facilmente accessibili e focalizzate sui compiti degli utenti. ffi ffi fi ff  LEZIONE 8 1. Importanza della psicologia nella UX La comprensione della psicologia, in particolare del modo in cui gli utenti si comportano e interagiscono con le interfacce digitali, è essenziale per creare esperienze intuitive e centrate sull’utente. I design che ignorano i bisogni psicologici degli utenti rischiano di fallire. 2. Leggi UX principali Legge di Parkinson Un compito si espande per occupare tutto il tempo disponibile. Limitare il tempo necessario per completare un compito secondo le aspettative degli utenti migliora l’esperienza. Usare funzionalità come l’auto ll per velocizzare processi complessi. Legge di Miller La memoria a breve termine può gestire circa sette elementi (±2). Organizzare i contenuti in blocchi più piccoli aiuta a migliorarne la comprensione e memorizzazione. Legge di Hick Il tempo necessario per prendere una decisione aumenta con il numero e la complessità delle opzioni. Ridurre il numero di scelte, suddividere compiti complessi in fasi e guidare gli utenti con opzioni raccomandate. E etto estetico-usabilità Gli utenti percepiscono i design esteticamente gradevoli come più usabili. Un design visivamente piacevole può mascherare problemi di usabilità, per cui è importante testare sempre. Legge di Fitts Il tempo per raggiungere un obiettivo è funzione della distanza e della dimensione dell’obiettivo. Rendere i target abbastanza grandi e ben distanziati per facilitarne l’interazione. Legge di Jakob Gli utenti preferiscono che un sito funzioni come gli altri siti che conoscono. Sfruttare i modelli mentali esistenti per facilitare l’apprendimento e l’interazione. Paradosso dell’utente attivo Gli utenti iniziano subito a usare un software senza leggere il manuale. Integrare strumenti di guida nel contesto dell’interfaccia (es. tooltip) per supportare gli utenti. E etto goal-gradient La motivazione degli utenti aumenta man mano che si avvicinano al completamento di un compito. Fornire indicazioni chiare sui progressi per incentivare la nalizzazione. Legge di Prägnanz (Principi della Gestalt) Le persone preferiscono percepire immagini complesse nella forma più semplice possibile. Sempli care le forme visive e creare gerarchie per guidare l’attenzione. ff ff fi fi fi  Legge della regione comune Gli elementi all’interno di un’area con un con ne chiaro vengono percepiti come un gruppo. Usare sfondi, bordi o altri elementi visivi per organizzare i contenuti. Legge della prossimità Gli oggetti vicini tra loro vengono percepiti come correlati. Posizionare elementi correlati uno accanto all’altro per migliorare la comprensione. Legge della somiglianza Elementi visivamente simili vengono percepiti come un gruppo. Di erenziare visivamente link, bottoni e altre funzionalità dal testo normale. Legge della connessione uniforme Elementi visivamente connessi vengono percepiti come più correlati rispetto a quelli non connessi. Utilizzare linee, colori o forme per connettere visivamente elementi correlati. Regola del picco- ne Le persone giudicano un’esperienza basandosi sui momenti più intensi e sul nale. Creare picchi positivi e un nale memorabile, riducendo al minimo le esperienze negative. E etto della posizione seriale Gli utenti ricordano meglio i primi e gli ultimi elementi in una serie. Posizionare le azioni principali all’inizio e alla ne delle liste o dei menu. E etto di Von Restor Gli oggetti distinti all’interno di un gruppo simile sono più facili da ricordare. Utilizzare di erenze visive per evidenziare informazioni importanti. E etto Zeigarnik Le persone ricordano meglio compiti incompleti o interrotti. Usare progress bar o gami cation per mantenere alta la motivazione degli utenti. Soglia di Doherty La produttività aumenta quando un sistema risponde entro 400 ms. Utilizzare feedback visivi e progress bar per ridurre la percezione dei tempi di attesa. Rasoio di Occam La soluzione più semplice è quella migliore. Rimuovere elementi non essenziali e sempli care l’interfaccia. Legge di Tesler Ogni sistema ha una complessità intrinseca che non può essere eliminata. Progettare per ridurre il carico sull’utente, sempli cando i processi più complessi. Legge di Postel Essere tolleranti rispetto agli input degli utenti, ma precisi nelle risposte. Anticipare variazioni negli input e fornire feedback chiari. ff ff ff ff fi ff ff fi fi fi fi fi fi fi LEZIONE 10 1. Introduzione all’immersione nel Web L’immersione nel web rappresenta uno stato psicologico in cui l’utente è completamente assorbito dal contenuto e dalle funzionalità interattive di un sito. Si tratta di una combinazione di stimolazione sensoriale, coinvolgimento cognitivo e predisposizione emotiva. Questo concetto è rilevante in vari ambiti, come il design di esperienze turistiche e i media digitali. 2. Concetti chiave: immersione, presenza e telepresenza Immersione: Descrive quanto la tecnologia può coinvolgere i sensi dell’utente attraverso stimoli visivi, auditivi e tattili. Presenza: È l’esperienza soggettiva di “essere lì” nell’ambiente virtuale. È in uenzata sia dal livello di immersione che dalle caratteristiche individuali degli utenti. Telepresenza: La sensazione di essere presenti in un ambiente mediato virtualmente. 3. Metodologia di ricerca Lo studio sull’immersione nel web si basa su: Revisione della letteratura (VR, game design, media studies, web design). Analisi di casi studio. Test con utenti per validare ipotesi sui fattori immersivi. 4. Modello teorico dell’immersione L’immersione è in uenzata da due dimensioni principali: Vividezza: La ricchezza rappresentazionale di un ambiente mediato, che comprende qualità visive e sonore. Interattività: Il grado di controllo che l’utente può esercitare sull’ambiente e sui contenuti. 5. Qualità immersive Queste qualità sono raggruppate in cinque categorie principali: Fattori di controllo: Grado di controllo, immediatezza, anticipazione e modalità di interazione. Fattori sensoriali: Profondità e ampiezza sensoriale, consistenza delle informazioni multimodali. Fattori di distrazione: Continuità, isolamento dall’ambiente reale, consapevolezza dell’interfaccia. Fattori di realismo: Realismo visivo, contenutistico e psicologico. Fattori di comprensione spaziale: Feedback propriocettivi, percezione della profondità, consapevolezza spaziale. fl fl 6. Formati immersivi sul web Tra i formati più signi cativi per creare esperienze immersive sul web troviamo: Articoli multimediali long-form: Integrano testo narrativo con elementi multimediali, creando un usso continuo e coinvolgente per il lettore. Tour virtuali: Permettono agli utenti di esplorare ambienti virtuali con ricchi dettagli visivi e auditivi. Sono utilizzati spesso per promuovere il turismo. Documentari multimediali interattivi: Evoluzione dei documentari tradizionali, sfruttano la natura non lineare del web per o rire storie segmentate e interattive. Narrazioni visive: Combina video o slideshow con audio per raccontare storie attraverso una forte componente sensoriale. Story maps: Mappe interattive che organizzano contenuti narrativi per rappresentare informazioni geogra che o raccontare storie. 7. Framework di progettazione 1.0 e 2.0 Il framework iniziale ipotizzava che un maggiore numero di qualità immersive determinasse una maggiore immersione. Tuttavia, i risultati hanno mostrato che è più importante il “potere immersivo” speci co di ogni qualità, raggruppabile in tre dimensioni principali: Forma e contenuto: Qualità sensoriali e realistiche. Controllo e continuità: Capacità di navigazione e uidità del contenuto. Consistenza: Uniformità nell’interfaccia e riduzione dello sforzo cognitivo. 8. Takeaways La vividezza e l’interattività sono essenziali per creare esperienze immersive. Le qualità immersive devono essere progettate per migliorare l’assorbimento cognitivo e percettivo. I formati immersivi devono essere scelti in base agli obiettivi comunicativi e al tipo di contenuto. fi fi fi fl fl ff LEZIONE 12 1. Cos’è un multimedia package Un multimedia package è una combinazione di più media integrati con funzionalità interattive, progettato per raccontare una storia, documentare un evento o presentare informazioni. Secondo Zerba (2004), il multimedia package rappresenta una forma di giornalismo digitale che combina contenuti visivi, testuali e interattivi per coinvolgere l’utente. 2. Fasi per progettare un multimedia package La progettazione si articola in tre step fondamentali: Cosa abbiamo: Analisi dei contenuti grezzi disponibili, sia qualitativi che quantitativi. Cosa dobbiamo farci: De nizione degli obiettivi comunicativi in base al pubblico e al contesto d’uso. Come lo facciamo: Scelta dei linguaggi e delle modalità di rappresentazione e interazione. 3. Obiettivi comunicativi Un multimedia package deve suddividere i contenuti in tre categorie: Contenuti principali: Elementi centrali della narrazione. Contenuti di supporto: Materiali che ra orzano il contenuto principale. Contenuti di approfondimento: Dettagli e informazioni aggiuntive per chi desidera esplorare ulteriormente. 4. Messa in forma dei contenuti La messa in forma richiede decisioni sui linguaggi visivi e le modalità di interazione. Gli aspetti principali includono: Piano della rappresentazione: Vividezza e scelta dei linguaggi visivi (immagini, video, gra ca). Piano dell’interazione: Coinvolgimento dell’utente attraverso modalità interattive. Per queste scelte è fondamentale analizzare lo stato dell’arte (case study). 5. Moduli di contenuto Un multimedia package è composto da moduli, che rappresentano unità di contenuto con modalità speci che di presentazione e fruizione. I moduli possono essere classi cati in base al tipo di media utilizzato: Moduli basati su immagini: Background fotogra ci, gallerie, slideshow, graphic novel. Moduli video: Infogra che animate, video interviste, narrazioni visive. Moduli audio: Voice over, mappe sonore interattive. 6. Operazioni principali: trasformazione, aggregazione e traduzione Trasformazione: Modi care i contenuti per adattarli a un nuovo medium (ad esempio, convertire testo in audio). Aggregazione: Combinare diversi tipi di contenuto in un unico formato. Traduzione: Rendere accessibili i contenuti adattandoli a nuove culture, linguaggi e tecnologie. 7. Casi di utilizzo I multimedia package possono essere utilizzati in vari contesti, come: Progetti di giornalismo interattivo (ad esempio, articoli multimediali). Narrazioni visive per raccontare storie o documentare eventi. Applicazioni educative e culturali, come mappe sonore o virtual tours. fi fi fi fi fi ff fi fi 8. Takeaways principali I multimedia package integrano media e interattività per creare esperienze coinvolgenti. La progettazione richiede un’attenta analisi dei contenuti disponibili, degli obiettivi comunicativi e delle modalità di rappresentazione e interazione. Le operazioni di trasformazione, aggregazione e traduzione sono fondamentali per adattare i contenuti al pubblico e al contesto. LEZIONE 13 1. Introduzione alla Digital Design Theory Il concetto di Digital Design Theory esplora come il design digitale si sia evoluto nel tempo, intrecciandosi con i cambiamenti tecnologici e culturali. Armstrong (2016) divide l’evoluzione del design digitale in tre fasi principali: Structuring the Digital (1960-1980) Resisting Central Processing (1980-2000) Encoding the Future (2000-oggi) 2. Structuring the Digital (1960-1980) Questa fase segna l’inizio della rivoluzione tecnologica con l’introduzione di strumenti e concetti fondamentali per il design digitale. Ivan Sutherland - Sketchpad (1963): Introduzione delle interfacce gra che (GUI) e della programmazione orientata agli oggetti. Joseph C. R. Licklider - ARPANET (1963): Lavoro sull’Intergalactic Computer Network, precursore di Internet. IBM System 360 (1964): Mainframe che separa hardware e software, portando compatibilità e scalabilità. Douglas Engelbart - NLS (1968): Sistema collaborativo che introduce mouse, nestre e collegamenti ipertestuali. Questi progressi ispirano la trasformazione del processo creativo, trasformandolo in una sequenza strutturata di passaggi, come un programma per computer. Concetti chiave: Arte programmata: Bruno Munari sperimenta con opere cinetiche e programmate, basate su variazioni dinamiche. Griglie e parametri: Il design diventa un atto di selezione e combinazione di parametri, simile alla programmazione. 3. Resisting Central Processing (1980-2000) L’avvento del personal computer democratizza l’accesso alla tecnologia e trasforma il panorama del design. Apple Macintosh (1984): Introduzione della GUI e del mouse per un’utenza più ampia. HP LaserJet (1984): Prima stampante laser desktop. Tim Berners-Lee - World Wide Web (1989): Creazione del web come sistema ipertestuale globale. Questa fase vede emergere un’estetica della complessità, caratterizzata da design più audaci e sperimentali: April Greiman e David Carson: Innovazioni gra che che abbracciano il caos e la complessità. Emigre Fonts: Creazione di font personalizzati grazie alla tecnologia digitale, che permette ai designer di controllare ogni aspetto della produzione. John Maeda - Design by Numbers: Promuove la fusione tra calcolo e design, mostrando il potenziale creativo della programmazione. fi fi fi 4. Encoding the Future (2000-oggi) In questa fase, il design si evolve verso un modello più collaborativo, interattivo e organico. Progettare ambienti interattivi: I designer creano sistemi che guidano il comportamento degli utenti, come social media, giochi e app. Sistemi organici: Grazie alla maggiore potenza di calcolo, il design imita approcci generativi e naturali. Ibridazione uomo-macchina: Tecnologie come Arduino permettono di integrare dati e sensori per avvicinare il design agli ecosistemi naturali. Iterazione: Il modello di sviluppo si basa su cicli di progettazione, prototipazione e test. 6. Takeaways Il design digitale è profondamente in uenzato dal progresso tecnologico e dalle necessità culturali. Ogni fase storica ha introdotto strumenti e concetti che continuano a in uenzare il panorama contemporaneo. Il futuro del design richiede iterazione, collaborazione e un’attenzione particolare all’interazione tra uomo e macchina. FINE fl fl