Glossario Sviluppo Web, UX/UI e Mobile

Pratica di progettare siti e applicazioni utilizzabili da tutte le persone, incluse quelle con disabilità visive, uditive, motorie o cognitive, tramite markup semantico, alternative testuali, navigazione da tastiera e conformità alle WCAG.

Proprietà percepita di un oggetto o elemento di interfaccia che suggerisce come usarlo; nel design digitale indica gli indizi visivi (forma, ombra, stile di un pulsante) che comunicano all'utente le azioni possibili.

Tecnica che consente a una pagina di scambiare dati con il server in modo asincrono e aggiornare parti dell'interfaccia senza ricaricarsi; storicamente basata su XMLHttpRequest, oggi realizzata perlopiù con la Fetch API.

Sistema operativo mobile open source basato su kernel Linux e sviluppato da Google, usato su un'ampia gamma di dispositivi di più produttori; le app, distribuite tramite Google Play e altri store, si realizzano soprattutto con Kotlin e Java.

Applicazione mobile costruita con tecnologie web (HTML, CSS, JavaScript) e racchiusa in un contenitore nativo (WebView) che ne consente la distribuzione sugli app store e l'accesso ad alcune funzioni del dispositivo tramite ponti nativi.

Applicazione mobile sviluppata specificamente per un sistema operativo con i suoi linguaggi e strumenti ufficiali (Swift o Objective-C per iOS, Kotlin o Java per Android), distribuita tramite app store e con pieno accesso alle funzioni del dispositivo.

Piattaforma digitale gestita dal fornitore del sistema operativo (App Store per iOS, Google Play per Android) per distribuire, aggiornare e monetizzare le applicazioni mobili, con processi di revisione, linee guida e sistemi di pagamento propri.

Disciplina che organizza, struttura ed etichetta i contenuti di un sito o applicazione in modo comprensibile, definendo tassonomie, gerarchie e sistemi di navigazione affinché gli utenti trovino facilmente ciò che cercano.

Porzione dello schermo di un dispositivo mobile libera da elementi di sistema come notch, isola dinamica, barra di stato e indicatore home; disporvi il contenuto interattivo evita sovrapposizioni e garantisce leggibilità e usabilità.

Insieme di attributi HTML definiti dal W3C che descrivono ruoli, stati e proprietà di componenti interattivi complessi alle tecnologie assistive, colmando le lacune semantiche del markup quando gli elementi nativi non bastano.

Metodologia di progettazione di interfacce che compone il sistema partendo da elementi elementari (atomi) e combinandoli in molecole, organismi, template e pagine, per costruire componenti coerenti e riutilizzabili in modo gerarchico.

Convenzione di denominazione delle classi CSS che struttura i nomi in blocco, elemento e modificatore (es. card__title--active), per rendere i fogli di stile prevedibili, modulari e a basso rischio di conflitti.

Elemento di navigazione secondaria che mostra il percorso gerarchico della pagina corrente rispetto alla struttura del sito, permettendo all'utente di orientarsi e risalire rapidamente ai livelli superiori.

Soglia di larghezza (o altra caratteristica) del viewport in corrispondenza della quale, tramite media query, il layout cambia disposizione per adattarsi al dispositivo; definisce i punti di rottura del design reattivo.

Interfaccia che permette a un service worker di memorizzare e recuperare coppie richiesta-risposta HTTP, costruendo strategie di caching programmabili per servire risorse offline o accelerarne il caricamento.

Meccanismo che determina quali dichiarazioni CSS applicare quando più regole interessano lo stesso elemento, combinando origine, importanza, specificità e ordine di comparsa; è il principio da cui prende nome il linguaggio.

Funzione CSS che applica stili in base alle dimensioni di un elemento contenitore anziché del viewport, permettendo a un componente di adattarsi al contesto in cui è inserito, indipendentemente dallo schermo.

Regione del rendering in cui gli elementi sono ordinati lungo l'asse z secondo la proprietà z-index e altre proprietà CSS; capirne la formazione è essenziale per gestire la sovrapposizione di elementi in pagina.

Insieme di metriche di Google che misurano l'esperienza utente reale di una pagina su caricamento, interattività e stabilità visiva; comprende LCP, INP e CLS, valutate al 75esimo percentile degli utenti su dispositivi mobili e desktop.

Porzione minima di CSS necessaria a visualizzare il contenuto immediatamente visibile della pagina, incorporata inline per evitare il blocco del rendering, mentre il resto degli stili viene caricato in modo differito.

Tecnica che definisce gli stili all'interno del codice JavaScript dei componenti anziché in fogli CSS separati, generandoli spesso a runtime; favorisce l'incapsulamento e lo scoping locale ma introduce dipendenza dallo script.

Rappresentazione ad albero degli stili di una pagina, costruita dal browser a partire dal CSS; combinata con il DOM produce l'albero di rendering. È manipolabile via JavaScript per leggere e modificare le regole di stile.

Metrica dei Core Web Vitals che quantifica la stabilità visiva misurando gli spostamenti imprevisti degli elementi durante il caricamento della pagina; è considerato buono un valore inferiore a 0,1.

Scelta di progettazione dell'interfaccia costruita per indurre l'utente ad azioni non intenzionali o contrarie ai suoi interessi, come iscrizioni nascoste o rinunce difficili; è considerata una pratica manipolatoria e non etica.

Collegamento che punta a una schermata o a un contenuto specifico all'interno di un'applicazione mobile anziché alla sua semplice apertura, consentendo di indirizzare l'utente direttamente al punto pertinente dell'app.

Approccio in cui si progetta prima per i browser più recenti e capaci, assicurando poi che l'esperienza resti utilizzabile, seppure ridotta, sui browser meno recenti o privi di certe funzionalità.

Approccio di progettazione web in cui il layout si adatta fluidamente a schermi di dimensioni diverse tramite griglie flessibili, immagini scalabili e media query, offrendo un'esperienza ottimale su desktop, tablet e smartphone.

Insieme organizzato e documentato di componenti riutilizzabili, linee guida, pattern e token di design che assicura coerenza visiva e funzionale tra prodotti e team, fungendo da unica fonte di verità per la progettazione dell'interfaccia.

Unità minima e riutilizzabile di un design system che memorizza una decisione di stile (un colore, una spaziatura, un raggio, un font) come coppia nome-valore, consentendo coerenza e aggiornamenti centralizzati tra piattaforme.

Tecnica di progettazione che mostra inizialmente solo le informazioni e le opzioni essenziali, rivelando quelle avanzate su richiesta; riduce il carico cognitivo e mantiene l'interfaccia semplice senza sacrificare funzionalità.

API dei Web Components che consente di definire nuovi tag HTML con comportamento proprio, registrando una classe JavaScript; l'elemento reagisce a callback del ciclo di vita come connessione al DOM e cambio di attributi.

Elemento HTML che raggruppa più sorgenti alternative di un'immagine con condizioni (formato, media query), consentendo la direzione artistica e il supporto a formati moderni con fallback per i browser non compatibili.

Dieci principi generali di usabilità formulati da Jakob Nielsen per la valutazione euristica delle interfacce, tra cui visibilità dello stato del sistema, corrispondenza con il mondo reale, controllo dell'utente e prevenzione degli errori.

Interfaccia JavaScript moderna per effettuare richieste HTTP dal browser, basata su Promise; sostituisce l'uso diretto di XMLHttpRequest offrendo una gestione più chiara di richieste, risposte e flussi di dati.

Metrica di prestazione che misura il tempo dall'inizio del caricamento alla prima comparsa di un qualsiasi contenuto (testo o immagine) sullo schermo; indica quando l'utente riceve il primo segnale che la pagina sta caricando.

Metrica storica che misurava il ritardo tra la prima interazione dell'utente e la risposta del browser; usata come Core Web Vital fino al marzo 2024, quando è stata sostituita da INP, che valuta la reattività dell'intera pagina.

Modello di layout CSS monodimensionale che dispone gli elementi lungo un asse (riga o colonna), distribuendo spazio e allineamento in modo flessibile tra i figli di un contenitore, adattandosi allo spazio disponibile.

Rappresentazione della sequenza di passi e schermate che un utente attraversa per completare un compito in un prodotto digitale; aiuta a individuare percorsi ottimali, punti di attrito e passaggi ridondanti prima della progettazione visiva.

Tecnica che produce in fase di build pagine HTML complete e statiche, servite poi senza elaborazione a runtime; garantisce prestazioni elevate e buona indicizzazione, a scapito della freschezza dei contenuti dinamici.

Organizzazione degli elementi grafici per dimensione, colore, contrasto, spaziatura e posizione in modo da guidare l'occhio dell'utente e comunicare l'importanza relativa dei contenuti, orientando l'ordine di lettura dell'interfaccia.

Movimenti delle dita sullo schermo tattile, come tocco, doppio tocco, pressione prolungata, scorrimento, trascinamento e pizzico, riconosciuti dal sistema come comandi; sono la base dell'interazione nelle interfacce mobili.

Controllo programmato di quale elemento riceve il focus da tastiera durante l'interazione, essenziale per finestre modali, menu e contenuti dinamici; garantisce un ordine di tabulazione logico e la corretta reperibilità degli elementi.

Modello di layout CSS bidimensionale che organizza il contenuto in righe e colonne definendo una griglia esplicita, consentendo posizionamenti precisi e layout complessi senza ricorrere a float o trucchi di posizionamento.

API del browser che permette di leggere e manipolare la cronologia di navigazione e l'URL senza ricaricare la pagina, tramite metodi come pushState e replaceState; è la base del routing lato client nelle SPA.

Scrittura del markup usando elementi che ne descrivono il significato e il ruolo nella pagina (header, nav, main, article, section, footer) anziché contenitori generici, migliorando accessibilità, SEO e manutenibilità del documento.

Linee guida ufficiali di Apple che definiscono principi, componenti e best practice per progettare interfacce coerenti con l'ecosistema dei suoi sistemi (iOS, iPadOS, macOS e altri), coprendo layout, navigazione, tipografia e interazione.

Processo con cui il JavaScript lato client rende interattivo l'HTML già generato dal server, collegando gestori di eventi e stato ai nodi esistenti anziché ricostruire il DOM, tipico delle app con rendering server e successiva interattività.

Tecnica HTML che fornisce più varianti di un'immagine tramite gli attributi srcset e sizes (o l'elemento picture), lasciando al browser la scelta della risorsa più adatta a risoluzione e larghezza del dispositivo.

Database transazionale lato client integrato nel browser, che archivia grandi quantità di dati strutturati (anche file e blob) con indici e query asincrone; supporta funzionamento offline e applicazioni con dati complessi.

Metrica dei Core Web Vitals che misura la reattività complessiva di una pagina valutando la latenza delle interazioni dell'utente; è considerato buono un valore inferiore a 200 ms. Dal marzo 2024 ha sostituito FID come Core Web Vital.

Elemento dell'interfaccia, tipicamente un pulsante o un collegamento, che spinge l'utente a compiere un'azione specifica come iscriversi o acquistare; la sua chiarezza, visibilità e testo influiscono direttamente sulle conversioni.

Sistema operativo mobile sviluppato da Apple per iPhone; ne definisce interfaccia, gestione delle app e vincoli di sviluppo, con applicazioni distribuite tramite App Store e realizzate principalmente con Swift e i framework ufficiali.

Regione strutturale della pagina, definita da elementi semantici o ruoli ARIA (banner, navigation, main, contentinfo), che permette agli utenti di tecnologie assistive di individuare e saltare rapidamente alle sezioni principali.

Metrica dei Core Web Vitals che misura il tempo di rendering dell'elemento di contenuto più grande visibile nel viewport, indicatore della velocità percepita di caricamento; è considerato buono un valore inferiore a 2,5 secondi.

Tecnica che rinvia il caricamento delle immagini fuori dallo schermo fino a quando stanno per entrare nel viewport, riducendo peso iniziale e tempi di caricamento; si attiva in modo nativo con l'attributo loading impostato a lazy.

Principio secondo cui il tempo per raggiungere un bersaglio dipende dalla sua distanza e dimensione: bersagli più grandi e vicini sono più rapidi da colpire; guida il dimensionamento e la collocazione dei controlli interattivi.

Principio secondo cui il tempo per prendere una decisione cresce con il numero e la complessità delle opzioni disponibili; nel design suggerisce di semplificare scelte e menu per ridurre il carico cognitivo dell'utente.

Tecnologia assistiva che converte in voce sintetizzata o in braille il contenuto e la struttura dell'interfaccia, consentendo a persone cieche o ipovedenti di percepire e navigare pagine e applicazioni; esempi sono NVDA, JAWS e VoiceOver.

Rappresentazione visiva dell'esperienza di un utente nel tempo mentre interagisce con un prodotto o servizio, che evidenzia fasi, azioni, emozioni e punti di attrito per individuare opportunità di miglioramento.

Sistema di design open source di Google che fornisce principi, componenti e linee guida per creare interfacce coerenti su Android, web e altre piattaforme, ispirato a metafore di materiali fisici, superfici, ombre e movimento.

Regola CSS che applica stili in base a caratteristiche del dispositivo o della finestra, come larghezza del viewport, orientamento o risoluzione; è il meccanismo alla base del design reattivo e dei breakpoint.

Piccoli momenti di interazione centrati su un singolo compito, come attivare un interruttore, ricevere un feedback su un tocco o vedere un'animazione di conferma; migliorano usabilità, chiarezza e piacevolezza dell'esperienza.

Strategia che costruisce l'esperienza partendo da contenuti e funzioni essenziali accessibili a tutti i browser, aggiungendo poi miglioramenti (stile, script) solo dove supportati, garantendo funzionamento di base ovunque.

Strategia di progettazione e sviluppo che parte dal layout per schermi piccoli e aggiunge progressivamente stili e funzionalità per schermi più grandi tramite media query, dando priorità all'esperienza su dispositivi mobili.

Rappresentazione statica ad alta fedeltà di un'interfaccia che mostra l'aspetto visivo definitivo, con colori, tipografia, immagini e spaziature, senza interattività; serve a validare la resa grafica prima dello sviluppo.

Modello con cui il CSS rappresenta ogni elemento come una scatola rettangolare composta da contenuto, padding (spaziatura interna), border (bordo) e margin (margine esterno), che determina dimensioni e spaziatura nel layout.

Capacità di utilizzare tutte le funzioni di un'interfaccia solo con la tastiera, spostando il focus con Tab e attivando i controlli con Invio o barra spaziatrice; è essenziale per chi non usa il mouse ed è un requisito WCAG.

Meccanismo che consente a un sito o a una PWA di inviare notifiche all'utente anche quando la pagina è chiusa, combinando Push API per la ricezione e Notifications API per la visualizzazione, previo consenso esplicito.

Insieme di schermate e interazioni che accolgono il nuovo utente e lo guidano nella comprensione e nell'uso iniziale di un prodotto, mostrandone valore e funzioni principali per favorire l'adozione e ridurre l'abbandono.

Insieme coordinato di colori scelti per un prodotto o interfaccia, con ruoli definiti (primari, secondari, di accento, di stato); guida coerenza visiva, identità di marca e leggibilità, tenendo conto anche del contrasto per l'accessibilità.

Sequenza di passi che il browser compie per trasformare HTML, CSS e JavaScript in pixel sullo schermo; ottimizzarla, riducendo risorse bloccanti, accelera la prima visualizzazione del contenuto.

Profilo fittizio ma basato su ricerca che rappresenta un segmento tipico di utenti, con obiettivi, comportamenti e bisogni; serve al team per progettare tenendo presente un utente concreto anziché un destinatario astratto.

Strumento che estende il CSS con funzioni non native (variabili storiche, annidamento, mixin, funzioni) e compila il codice in CSS standard; esempi diffusi sono Sass e Less, usati per organizzare fogli di stile complessi.

Applicazione web che, usando service worker, manifest e API moderne, offre esperienza simile a un'app nativa: installabile, utilizzabile offline, con notifiche push, pur restando accessibile da URL e indipendente dagli app store.

Valori riutilizzabili definiti con il prefisso -- e richiamati con la funzione var(); consentono di centralizzare colori, spaziature e altri parametri, sono soggetti a ereditarietà e modificabili a runtime via JavaScript.

Simulazione interattiva di un prodotto digitale che riproduce flussi e comportamenti dell'interfaccia per testarli con gli utenti prima dello sviluppo; può variare per fedeltà, da schizzi cliccabili a versioni quasi definitive.

Parola chiave aggiunta a un selettore CSS che ne limita l'applicazione a uno stato particolare dell'elemento, come :hover, :focus, :first-child o :checked, senza richiedere classi aggiuntive nel markup.

Parola chiave del selettore CSS che consente di stilare una parte specifica di un elemento o di inserire contenuto generato, come ::before, ::after o ::first-line, senza modificare l'HTML.

Misura della differenza di luminanza tra testo e sfondo, espressa come rapporto; le WCAG richiedono almeno 4,5:1 per il testo normale e 3:1 per il testo grande al livello AA, per garantire leggibilità a chi ha ipovisione.

Operazione con cui il browser ricalcola geometria e posizione degli elementi quando cambiano dimensioni, contenuto o struttura del DOM; è costosa in termini di prestazioni e può propagarsi a gran parte della pagina.

Area di pagina contrassegnata con aria-live perché gli screen reader annuncino automaticamente gli aggiornamenti di contenuto (notifiche, errori, risultati) senza che l'utente sposti il focus su di essa.

Tecnica in cui il browser riceve una pagina minima e costruisce l'interfaccia eseguendo JavaScript, generando il DOM e recuperando i dati lato client; riduce il carico sul server ma può ritardare il primo contenuto visibile.

Fase di rendering in cui il browser ridisegna i pixel di elementi le cui proprietà visive sono cambiate (colore, sfondo, visibilità) senza alterarne la geometria; è meno costosa del reflow ma incide sulle prestazioni.

Direttive che indicano al browser di recuperare in anticipo risorse: preload dà priorità a risorse necessarie subito, prefetch scarica in background risorse probabilmente utili in futuro, migliorando i tempi di caricamento percepiti.

File, tipicamente CSS e JavaScript sincroni nel head, che impediscono al browser di mostrare la pagina finché non sono scaricati ed elaborati; ridurne l'impatto tramite differimento o inline è chiave per accelerare la prima visualizzazione.

Gestione della navigazione all'interno di una SPA effettuata dal JavaScript nel browser, che intercetta i cambi di URL e aggiorna la vista senza richiesta al server, sfruttando la History API per mantenere URL coerenti.

Attributo ARIA che comunica alle tecnologie assistive il tipo o la funzione di un elemento (ad esempio button, dialog, navigation, alert), consentendo agli screen reader di annunciarlo e gestirlo correttamente.

Espressione che individua gli elementi HTML a cui applicare un insieme di stili, in base a tag, classe, identificatore, attributo, relazione gerarchica o stato; è il punto d'aggancio tra regole CSS e struttura del documento.

Script che il browser esegue in background, separato dalla pagina, agendo da proxy tra applicazione e rete; abilita cache programmabile, funzionamento offline, notifiche push e sincronizzazione, ed è il cuore delle PWA.

Tecnologia dei Web Components che collega a un elemento un albero DOM separato e incapsulato, isolando struttura e stili dal documento principale per evitare conflitti tra CSS e markup del componente e del resto della pagina.

Applicazione web che carica una sola pagina HTML e ne aggiorna dinamicamente il contenuto tramite JavaScript senza ricaricare l'intera pagina, gestendo la navigazione lato client per un'esperienza fluida simile a un'app nativa.

Segnaposto grafico che mostra la struttura vuota di un contenuto in caricamento, riempita poi dai dati reali; riduce la percezione di attesa rispetto a uno spinner, comunicando che l'interfaccia sta preparando i contenuti.

Collegamento, spesso il primo della pagina e visibile solo al focus, che consente di saltare blocchi ripetuti come l'intestazione e la navigazione per raggiungere direttamente il contenuto principale, utile per chi usa tastiera o screen reader.

Area vuota tra e attorno agli elementi di un layout, non necessariamente di colore bianco; usata deliberatamente migliora leggibilità, gerarchia visiva, raggruppamento dei contenuti e senso di ordine dell'interfaccia.

Algoritmo con cui il browser stabilisce quale regola CSS prevale su un elemento quando più selettori competono, assegnando un peso in base a tipo, classi, attributi e identificatori del selettore.

Schermata iniziale mostrata brevemente all'avvio di un'app, tipicamente con logo o marchio, mentre il sistema carica le risorse; migliora la percezione dell'avvio ma dovrebbe restare rapida per non rallentare l'accesso al contenuto.

Schermata o area mostrata quando non ci sono ancora dati da visualizzare, ad esempio una lista vuota o una prima apertura; ben progettato, orienta l'utente spiegando la situazione e suggerendo l'azione successiva.

Tecnica che scompone il bundle JavaScript in blocchi più piccoli caricati su richiesta anziché tutti all'avvio, riducendo il codice iniziale da scaricare e analizzare e migliorando i tempi di caricamento e interattività della pagina.

Approccio che consente di realizzare app per più sistemi operativi da un'unica base di codice tramite framework come React Native o Flutter, riducendo tempi e costi rispetto allo sviluppo nativo separato per ciascuna piattaforma.

Attributo HTML che controlla se e in quale ordine un elemento riceve il focus da tastiera: valore 0 lo rende focalizzabile nell'ordine naturale, -1 solo via script, valori positivi forzano un ordine, sconsigliato per l'accessibilità.

Metodo di ricerca in cui utenti reali svolgono compiti rappresentativi con un prodotto mentre si osserva il loro comportamento, per individuare problemi di usabilità e verificare quanto l'interfaccia sia facile ed efficace da usare.

Descrizione testuale del contenuto e della funzione di un'immagine, fornita con l'attributo alt; viene letta dagli screen reader e mostrata se l'immagine non carica, ed è un requisito fondamentale di accessibilità.

Metrica di prestazione che indica il momento in cui una pagina è completamente visualizzata e risponde in modo affidabile alle interazioni dell'utente entro tempi rapidi; misura la reale prontezza all'uso oltre alla sola visualizzazione.

Arte e tecnica di disporre i caratteri per rendere il testo leggibile e comunicativo; nel design digitale riguarda scelta dei font, dimensioni, interlinea, spaziatura e scala tipografica, con forte impatto su leggibilità e gerarchia.

Metrica di laboratorio che somma i periodi in cui il thread principale resta bloccato da attività lunghe tra FCP e TTI, impedendo la risposta agli input; alti valori segnalano scarsa reattività iniziale della pagina.

Unità di misura CSS il cui valore dipende da un riferimento: em dal font dell'elemento, rem dal font radice, vw e vh dalle dimensioni del viewport; sono alla base di layout e tipografia scalabili e accessibili.

Meccanismi che associano URL web standard a contenuti di un'app: gli Universal Links su iOS e gli App Links su Android aprono direttamente l'applicazione, se installata, verificando la proprietà del dominio per sicurezza.

Misura della facilità con cui utenti specifici raggiungono i propri obiettivi con un prodotto in modo efficace, efficiente e soddisfacente; secondo Nielsen si articola in apprendibilità, efficienza, memorabilità, errori e soddisfazione.

Area visibile di una pagina web nella finestra del browser. Sui dispositivi mobili il meta tag viewport controlla larghezza e scala iniziale, elemento fondamentale per un corretto rendering reattivo.

Linee guida del W3C per l'accessibilità dei contenuti web, organizzate su quattro principi (percepibile, utilizzabile, comprensibile, robusto) e tre livelli di conformità (A, AA, AAA); la versione 2.2 è Raccomandazione dal 5 ottobre 2023.

File JSON che descrive una web app (nome, icone, colori, modalità di visualizzazione, URL di avvio) consentendo l'installazione sulla schermata home e l'avvio a schermo intero come un'applicazione; requisito chiave delle PWA.

Insieme di standard del browser (Custom Elements, Shadow DOM e template HTML) che permette di creare elementi personalizzati riutilizzabili con logica e stile incapsulati, indipendenti da qualsiasi framework.

Carattere tipografico caricato dal web e applicato tramite la regola CSS @font-face, che consente di usare font non installati sul dispositivo dell'utente; richiede attenzione a prestazioni e a fenomeni di testo non stilizzato in caricamento.

API del browser per memorizzare coppie chiave-valore lato client: localStorage conserva i dati in modo persistente, sessionStorage li limita alla sessione della scheda; utile per preferenze e stato leggero senza inviare dati al server.

Componente nativo che incorpora un motore di rendering del browser dentro un'app, permettendo di mostrare contenuti web all'interno dell'applicazione; è il fondamento tecnico delle app ibride e dei contenuti web integrati.

Rappresentazione schematica e a bassa fedeltà di un'interfaccia, che definisce struttura, gerarchia e disposizione degli elementi senza dettagli grafici come colori e immagini, usata per pianificare layout e flussi nelle prime fasi del progetto.