In breve: L'interfaccia utente è il ponte tra persona e programma. Va progettata prima di essere realizzata.
Cosa è una interfaccia utente
L'interfaccia utente è la parte del programma che si vede e si usa. In inglese si chiama UI, cioè user interface.
Pensa allo schermo del telefono. I pulsanti, i menù e le icone sono l'interfaccia. Dietro c'è il codice che lavora.
Una buona interfaccia è semplice. L'utente capisce subito cosa fare. Non serve leggere un manuale.
Come si progetta
Progettare significa pensare prima di scrivere il codice. Si parte sempre dai bisogni dell'utente.
Il primo passo è capire chi userà il programma. Un bambino e un adulto hanno bisogni diversi. Anche il contesto conta: ufficio, casa, strada.
Poi si disegna lo schema della schermata. Questo disegno si chiama mockup. Mostra dove vanno pulsanti, testi e immagini.
Alcuni princìpi guidano la progettazione:
- chiarezza: ogni elemento ha uno scopo visibile
- coerenza: pulsanti simili svolgono azioni simili
- feedback: il programma risponde a ogni azione dell'utente
- prevenzione errori: l'interfaccia aiuta a non sbagliare
Come si realizza
Dopo il disegno arriva il codice. Si scelgono gli strumenti adatti al tipo di programma.
Per le pagine web si usano HTML, CSS e JavaScript. HTML mette i contenuti, CSS dà lo stile, JavaScript aggiunge le azioni.
Per i programmi da scrivania esistono librerie come Tkinter in Python o Swing in Java. Offrono finestre, pulsanti e caselle di testo già pronti.
Esempio pratico: un modulo di login. Servono due caselle di testo, un pulsante "Entra" e un messaggio di errore se la password è sbagliata. Prima si disegna su carta, poi si scrive il codice.
Alla fine si fa la prova con utenti reali. Se sbagliano spesso, l'interfaccia va corretta.
Parole difficili
- Interfaccia: parte del programma che l'utente vede e tocca
- Mockup: disegno della schermata fatto prima di programmare
- Feedback: risposta visibile o sonora a una azione dell'utente
- Usabilità: facilità con cui una persona usa un programma
- Libreria: insieme di codice già pronto da riutilizzare
Riferimenti
- Norma: Riordino degli istituti tecnici
- Obiettivo formativo coperto: ob.tecnico-informatica-telecomunicazioni.informatica.cl3.interfacce-utente.01