Form che sembrano economici: 5 ritocchi, prima e dopo
Perché i form fatti in fretta con l'AI sembrano economici? Cinque ritocchi in HTML e CSS, con prima e dopo e un prompt da incollare nel tuo agente.
Un form fatto in fretta con l'AI sembra economico quasi sempre per gli stessi cinque motivi. Qui li sistemi uno per uno con HTML e CSS semplici, senza rifare il design. Ogni ritocco ha un prompt da incollare nel tuo agente, e in fondo trovi un prompt unico per fare tutti e cinque in un colpo.
La schermata l'abbiamo costruita noi, apposta: la pagina impostazioni di Fernhill, una piccola app inventata per uno studio, con nomi inventati. Non è il prodotto di nessuno. Somiglia a quello che ottieni quando chiedi a un'AI "una pagina di impostazioni pulita" e accetti la prima risposta.
Stessa app, stesso viola, stesso font, stessi campi. Sono cambiati solo i cinque punti qui sotto.
Il prima: i cinque problemi
Niente è rotto, però sembra un form a cui nessuno ha pensato: una colonna unica, etichette che spariscono, grigi troppo chiari, quattro pulsanti uguali e scelte che partono vuote.
1. Raggruppa i campi per significato
Cos'è: dividere il form in blocchi con un titolo. I designer la chiamano legge della vicinanza: se i campi che vanno insieme stanno vicini, il cervello li raggruppa da solo.
Perché serve: una colonna unica sembra un elenco di caselle, tre gruppi sembrano una pagina pensata.
Come si fa: noi abbiamo fatto tre gruppi, Profilo, Spazio di lavoro e Notifiche. Ogni gruppo è una riga: a sinistra un titolo breve con una frase che spiega a cosa serve, a destra i campi, una linea sottile tra un gruppo e l'altro. Nel CSS è una griglia a due colonne: 240 pixel per il titolo, 32 pixel di spazio, i campi larghi al massimo 420 pixel (un campo nome non serve largo quanto lo schermo).
Dentro c'è un ritocco più silenzioso: un solo bordo sinistro. Nel prima alcuni campi avevano l'etichetta attaccata a sinistra, come "Fuso orario:". Misurando su Chrome, le caselle partivano da quattro posizioni diverse. Adesso partono tutte dalla stessa linea, e l'occhio scende dritto.
Dividi questo form in gruppi per significato. Per ogni gruppo scrivi un titolo breve e una frase che spiega a cosa serve. Layout: griglia a due colonne, a sinistra titolo e frase (240px), a destra i campi (max 420px), 32px tra le colonne, una linea sottile sopra ogni gruppo. Tutti i campi devono partire dallo stesso bordo sinistro.
2. Tieni le etichette, aggiungi un aiuto, spiega gli errori
Cos'è: ogni campo ha tre testi. Un'etichetta sopra che non se ne va mai. Un breve aiuto sotto, quando serve. Un errore che dice come rimediare.
Perché serve: il testo grigio dentro la casella (il placeholder) non è un'etichetta. Appena scrivi sparisce, e per ricordarti a cosa serviva devi cancellare tutto.
Come si fa: l'aiuto spiega il perché: "Qui ti mandiamo ricevute e link di accesso". L'errore è un'istruzione: "Inserisci un'email completa, per esempio nome@azienda.it". L'attributo aria-describedby fa leggere aiuto ed errore anche ai lettori di schermo (i programmi che leggono la pagina ad alta voce a chi non vede). Poche righe di JavaScript mostrano l'errore solo quando esci dal campo, non mentre scrivi.
Per ogni campo di questo form: metti un'etichetta visibile sopra la casella, collegata con for/id. Togli i placeholder usati come etichetta. Dove serve, aggiungi sotto un aiuto di una riga che spiega perché chiediamo quel dato. Per ogni errore scrivi una frase che dice come rimediare, non solo "non valido". Collega aiuto ed errore con aria-describedby e mostra l'errore solo quando l'utente esce dal campo.
3. Usa grigi leggermente colorati e leggibili
Cos'è: una piccola famiglia di grigi colorati, cioè grigi con dentro un filo di blu.
Perché serve: il contrasto misura quanto un testo si stacca dallo sfondo, da 1:1 (invisibile) a 21:1 (nero su bianco). La regola di accessibilità più usata, WCAG livello AA, chiede almeno 4,5:1 per il testo normale. Il nostro grigio degli aiuti su bianco faceva 2,85:1, quello dentro le caselle 2,32:1. Bocciati tutti e due.
Come si fa: cinque grigi, scritti una volta come variabili CSS: sfondo pagina, superfici bianche, linee, testo principale, testo secondario. Il nuovo grigio degli aiuti fa 6,22:1 sul bianco e 5,8:1 sullo sfondo. Il testo principale fa 14,99:1: sempre forte, ma più morbido del nero pieno.
Sostituisci tutti i grigi di questa pagina con una famiglia di cinque grigi leggermente tinti di blu freddo, definiti come variabili CSS: sfondo pagina, superficie, linee, testo principale, testo secondario. Ogni testo deve avere un contrasto di almeno 4,5:1 sul suo sfondo (WCAG AA). Alla fine dammi l'elenco delle coppie testo/sfondo con il rapporto di contrasto calcolato.
4. Dai la scena a un solo pulsante
Cos'è: dare a ogni azione un peso, in base a quanto spesso serve e a quanto è grave sbagliare.
Perché serve: quando quattro pulsanti sono uguali, è chi usa il form che deve capire quale conta. Quello è il lavoro della pagina.
Come si fa:
- Salva modifiche è l'unico pulsante pieno e colorato. È il motivo per cui quasi tutti sono lì.
- Annulla è discreto: niente riempimento, un bordo sottile, a sinistra di Salva.
- Reimposta è sparito: Annulla fa già quel lavoro.
- Elimina spazio di lavoro è uscito dalla fila. Ha una sezione sua in fondo alla pagina, testo rosso, bordo rosso tenue e una frase che dice cosa viene cancellato.
Il rosso su bianco fa 6,57:1, quindi resta leggibile anche se ha un aspetto tranquillo.
In questa pagina lascia un solo pulsante pieno e colorato: l'azione principale. Le altre azioni diventano pulsanti con solo bordo o link. Togli i pulsanti che duplicano un'altra azione. Sposta ogni azione che cancella dati in una sezione a parte in fondo, con testo rosso, bordo rosso tenue e una frase che dice cosa viene cancellato. Controlla che il rosso abbia contrasto almeno 4,5:1.
5. Scegli il controllo giusto e un valore già pronto
Cos'è: usare per ogni scelta il controllo più adatto, e compilare in anticipo quello che l'app sa già.
Perché serve: un menu a tendina nasconde le opzioni dietro un clic. Per un sì o no è uno spreco. E un "Seleziona…" vuoto vuol dire che l'app ti fa una domanda a cui potrebbe rispondere da sola.
Come si fa:
- Le impostazioni sì o no diventano interruttori. Se è una vera casella di spunta HTML con ruolo switch dentro un'etichetta, la tastiera funziona da sola: nella prova la barra spaziatrice lo accendeva e spegneva, e funzionava anche il clic sul testo.
- Il tema, con tre opzioni, diventa tre pulsanti visibili. Parte da "Come il sistema", che segue la modalità chiara o scura del dispositivo.
- Il fuso orario resta un menu, perché la lista è lunga. Ma il browser lo conosce già: due righe di JavaScript lo leggono e lo preselezionano. Nella prova ha scelto Europe/Rome, con sotto l'aiuto "preso dal tuo browser, cambialo se viaggi".
Rivedi i controlli di questo form. Le scelte sì o no diventano interruttori (input checkbox con role="switch" dentro una label). Le scelte con 2-4 opzioni diventano pulsanti visibili. Lascia il menu a tendina solo per liste lunghe. Per ogni campo che parte vuoto, dimmi se l'app può indovinare il valore (per esempio il fuso orario dal browser): se sì, preselezionalo e aggiungi un aiuto che dice da dove arriva.
Pronto da copiare: tutti e cinque insieme
Rivedi questo form in cinque passi, senza cambiare colori di marca, font o campi. 1. Raggruppa i campi per significato, con titolo e frase per ogni gruppo, e allinea tutti i campi allo stesso bordo sinistro. 2. Etichette visibili sopra ogni campo, aiuti brevi dove servono, errori scritti come istruzioni e mostrati quando si esce dal campo. 3. Cinque grigi leggermente tinti come variabili CSS, con contrasto di almeno 4,5:1 per ogni testo. 4. Un solo pulsante pieno; le azioni distruttive in una sezione a parte in fondo. 5. Interruttori per i sì o no, valori già compilati quando l'app può indovinarli. Prima di scrivere codice, elencami i problemi che trovi per ognuno dei cinque punti. Poi applica le modifiche un punto alla volta.
Prova piccola
Dieci minuti. Apri il tuo form e fai solo il punto 3: misura il contrasto del grigio più chiaro che usi per i testi (Chrome, tasto destro, Ispeziona). Se è sotto 4,5:1, incolla il prompt del punto 3 e rimisura. È riuscita se ogni testo passa 4,5:1 e la pagina sembra più calma, non più scura.
Attenzione a
- Il controllo email del browser è di manica larga. Nella prova ha accettato anche "maya@fernhill", senza il punto. Becca la chiocciola mancante, l'errore più comune, ma non dimostra che l'indirizzo esista.
- Un valore già compilato va dichiarato. Di' sempre da dove arriva, così chi viaggia o usa un altro computer sa che può cambiarlo.
Questo articolo nasce da un prima e dopo di Alek pubblicato su Medium.
Passo successivo: applica lo stesso metodo a una dashboard con App generica? 5 ritocchi per farla sembrare premium. Se vuoi rifare un'intera app senza rompere niente, leggi Redesign di un'app con l'AI senza rompere il codice.
In breve: Un form economico non ha bisogno di un nuovo stile: gli bastano gruppi chiari, etichette che restano, grigi leggibili, un solo pulsante forte e scelte già compilate.
Newsletter
L'AI che funziona davvero, nella tua casella.
Le nuove pillole, gli strumenti che usiamo e quello che impariamo sui progetti. Poche mail, solo quando c’è qualcosa di utile.
