La **User Interface**, o interfaccia utente, è l’insieme degli elementi visivi e interattivi attraverso cui una persona interagisce con un ambiente digitale. In pratica, è tutto ciò che l’utente vede e usa sullo schermo per orientarsi e compiere azioni. Non va confusa con la sua “cugina” **UX (User Experience)**, cioè l’esperienza utente: si occupa di progettare e ottimizzare l’intero percorso dell’utente, considerando non solo l’aspetto visivo ma anche usabilità, logica, percezioni e interazioni lungo tutto il processo. --- **1969**: La prima forma di interfaccia digitale diffusa è la **CLI (Command Line Interface)**: una semplice riga di testo in cui l’utente inseriva comandi scritti per eseguire operazioni. Non c’erano elementi grafici, ma solo input e output testuali. L’aspetto era molto essenziale: testo bianco o verde su sfondo nero, una scelta legata alla leggibilità e ai limiti tecnici dei monitor dell’epoca. È proprio da qui che nasce l’immaginario “hacker” reso popolare anche da The Matrix, con le schermate piene di caratteri verdi. I primissimi computer erano **quasi esclusivamente usati in ambito aziendale, governativo e di ricerca** e Il primo grande fornitore di sistemi operativi e computer è stato **IBM**, in America. Spesso era necessario avere una guida, a schermo o in un manuale cartaceo, per sapere quali comandi digitare: senza elementi grafici, infatti, non c’era alcun modo per rendere l’interfaccia davvero intuitiva. ![[ibm_cli.jpg]] --- **1984:** Nonostante i primi esperimenti nascono già durante gli anni 70', le prime vere GUI - Graphical User Interface, nascono negli anni 80 con Apple Lisa, Apple Macintosh e Microsoft 1.0 Oltre a finestre e icone, le prime GUI introducono diversi elementi fondamentali che definiscono ancora oggi il modo in cui usiamo i computer: - **Mouse e puntatore**: permettono un’interazione diretta, non più mediata da comandi testuali - **Menu e menu a tendina**: organizzano le azioni disponibili senza doverle ricordare - **Desktop metaforico**: lo schermo diventa una “scrivania” con cartelle e documenti - **Drag & drop**: puoi spostare file e oggetti visivamente - **Selezione e feedback visivo**: evidenziazioni, stati attivi, cambi di colore che mostrano cosa sta succedendo ![[macintosh_gui.jpg]] --- **1990:** Nascono le prime interfacce a colori per i sistemi operativi ![[windows_3.0.png|376]] In questi anni nasce il web: i primi siti erano però estremamente semplici, composti quasi solo da testo e link cliccabili, sono sotanzialmente più dei documenti che delle pagine navigabili, costruiti tramite file [[HTML]]. Uno degli elementi più iconici rimasti ancora oggi è il link blu sottolineato: una delle prime convenzioni di UI e UX, utile a far capire subito all’utente che una parola o una frase poteva essere cliccata. ![[website.jpeg|515]] --- **1995:** A partire dalla metà degli anni ’90, con computer più potenti e sistemi operativi più maturi, le interfacce grafiche diventano lo standard, infatti con l’arrivo di Windows 95 e la diffusione dei Macintosh, le GUI iniziano a essere usate da milioni di persone: compaiono colori più avanzati, ombre, icone più curate e un’interazione molto più intuitiva. Il computer smette definitivamente di essere uno strumento per esperti e diventa un prodotto di massa. Si diffondono anche i primi telefoni cellulari con interfacce monocromatiche e menu navigabili, segnando il passaggio da dispositivi pensati solo per chiamare a strumenti con funzioni come rubrica e SMS. Ad esempio il Nokia 2210, padre del arcinoto 3310. ![[windows_mac.jpg|563]] ![[netscape.webp|276]] --- **2000:** Parola chiave: **skeuomorfismo**. Le interfacce diventano visive e realistiche, grazie a ombre, trasparenze e tridimensionalità. Intanto, con la bolla delle dot-com, il web esplode e inizia la sua diffusione di massa. Nascono le prime interfacce e menu anche nelle console da gioco, che fino a quel momento si limitavano principalmente ad avviare direttamente i titoli da disco. Con l’introduzione di sistemi come PlayStation 2 e Xbox compaiono i primi menu di sistema, che permettono di gestire impostazioni, salvataggi e contenuti. ![[windows_xp.jpg|406]] --- **2005:** Nei primi anni 2000 le interfacce web diventano più visive e strutturate: emergono layout complessi, effetti grafici come gradienti e ombre, e le prime interazioni dinamiche, segnando il passaggio al Web 2.0. Nascono siti come Facebook, uno dei primi [[Social Media]], Wikipedia, YouTube... ![[macos_leopard.png|293]] ![[web2004.jpg]] --- **2007:** Il mondo mobile segna una svolta importante: l’interazione non avviene più solo tramite mouse e tastiera, ma direttamente attraverso il touch. In parallelo, emergono nuove modalità di input anche in altri ambiti: Nintendo Wii introduce il controllo tramite movimento, mentre Nintendo DS utilizza un pennino su schermo touch. ![[first_mobile.jpg|247]] ![[windows_vista.png|333]] --- **2010:** Nasce il **flat design**, una controtendenza minimalista allo skeuomorfismo: le interfacce diventano più semplici, pulite e funzionali, eliminando effetti come ombre, texture e tridimensionalità. Il principale pioniere è Windows Phone, seguito da Windows 8, che introducono un linguaggio visivo basato su colori pieni senza ombre, tipografia e layout essenziali. Negli anni successivi anche Apple Microsoft e Google adotteranno approcci simili, rendendo il flat design lo standard dominante nelle interfacce digitali. In parallelo continua la rivoluzione mobile con dispositivi come iPad, che rendono sempre più centrale l’interazione touch. Emergono anche nuove modalità di input: i comandi vocali con Siri e le interazioni gestuali con Kinect. ![[windows_8.jpg]] --- **2014:** Dal 2014 in poi si entra in una fase di relativa stabilizzazione: con l’introduzione del manifesto **"Material Design"** da parte di **Google**, le interfacce digitali raggiungono un livello di maturità elevato. I principi di chiarezza, gerarchia, coerenza e usabilità diventano standard condivisi, e il web smette di evolversi attraverso rivoluzioni visive radicali, puntando invece su perfezionamenti incrementali. **Material Design**, è uno stile che unisce minimalismo e “matericità”: da un lato semplifica le interfacce con layout puliti e colori netti, dall’altro reintroduce una leggera profondità ispirata al mondo fisico, attraverso ombre, livelli e animazioni. Non è completamente piatto, ma utilizza questi elementi in modo sottile per rendere l’interazione più chiara e naturale. **iOS 7 di Apple** seguirà principi molto simili. ![[material_design.jpg|319]] --- **2020:** In questi anni le interfacce continuano a evolversi senza cambiamenti radicali: emergono tendenze come il **glassmorphism**, con effetti di trasparenza e blur ispirati al vetro. Allo stesso tempo, il design diventa sempre più sistemico e coerente grazie ai **design system**, mentre cresce l’attenzione per **accessibilità**, performance e micro-interazioni. ![[glass_morphism.jpg]] --- **Oggi:** Negli ultimi anni, con l’arrivo dei modelli linguistici (LLM), le interfacce stanno evolvendo verso un approccio conversazionale: il testo torna centrale, ma in una forma intelligente e adattiva a differenza delle CLI, segnando un nuovo paradigma dopo decenni di interfacce grafiche. ![[chatgpt.jpg|614]]