Guardrail dell'interfaccia utente generativa: progettare in base all'intento senza interrompere il sistema di progettazione

Dai layout fissi alla progettazione per intenti

In un layout fisso, i progettisti decidono in anticipo ogni schermo. Con l'interfaccia utente generativa, un modello di intelligenza artificiale decide quale interfaccia mostrare per una richiesta specifica. Google descrive l'interfaccia utente generativa come un modello che genera non solo contenuti ma un'intera esperienza, e ora fornisce esperimenti basati su questo nell'app Gemini e in modalità AI nella Ricerca Google. Negli strumenti per sviluppatori, Vercel AI SDK descrive una versione più semplice: il modello chiama uno strumento e il risultato della chiamata allo strumento viene visualizzato come componente React.

Cosa cambia per la UX

I progettisti smettono di disegnare ogni schermata e iniziano a progettare le regole: quali componenti esistono, quando ciascuno è appropriato e cosa non deve mai cambiare. La cornice attorno al contenuto generato, come la navigazione, l'input, l'annullamento e le impostazioni, dovrebbe rimanere fissa in modo che le persone non perdano mai il posto. Le aree generate dovrebbero essere chiaramente contrassegnate e le persone dovrebbero essere in grado di passare a una visualizzazione semplice e prevedibile.

Guardrail 1: un catalogo di componenti approvati

Il modello più sicuro è lasciare che sia il modello a scegliere e riempire i componenti, non a inventarli. A2UI, un protocollo aperto creato da Google, funziona in questo modo: gli agenti inviano descrizioni dichiarative dei componenti e il client le visualizza con i propri widget nativi, senza eseguire codice arbitrario dall'agente. Il tuo catalogo può essere piccolo: tabelle, schede, grafici, moduli, elenchi, ciascuno costruito e testato dal tuo team.

Guardrail 2: gettoni invece di valori grezzi

Fornisci token semantici al modello, ad esempio color.text.primary o space.4, e rifiuta l'output che utilizza valori esadecimali non elaborati o dimensioni di carattere arbitrarie. Ciò mantiene il contrasto, la tipografia e la spaziatura all'interno del sistema e temi come la modalità oscura o il contrasto elevato continuano a funzionare automaticamente.

Guardrail 3: convalida prima del rendering

Esegui controlli automatici sull'output generato prima di mostrarlo: campi obbligatori presenti, contrasto di colore, ordine delle intestazioni, etichette sugli input, ordine di messa a fuoco, dimensione del touch target e supporto per il movimento ridotto. Se un controllo fallisce, torna a un layout semplice e sicuramente valido anziché mostrare un'interfaccia utente interrotta.

• Convalida dello schema: solo componenti e proprietà note
• Accessibilità: contrasto, etichette, ruoli, ordine dei focus
• Limiti di contenuto: elementi massimi, lunghezza del testo, dimensioni delle immagini
• Fallback: un elenco semplice o una risposta testuale se la convalida fallisce