Ogni giorno, su incarico, devo confrontarmi con diversi attori di un progetto. A seconda della posizione e dell'appetito per la disciplina del design UX-UI, ognuno ha una diversa conoscenza dei termini utilizzati.
Nel corso delle missioni ho quindi raccolto un gran numero di concetti ed è un vocabolario che avrei voluto avere quando ho iniziato e che ho quindi consolidato man mano che procedo per aiutare futuri studenti o neofiti del digitale.
Ho quindi preparato per te una serie di articoli in cui ogni concetto verrà spiegato in modo che tu possa farvi riferimento.
Continuiamo la serie con questa terza parte e i 21 concetti che la compongono. Se volete consultare in anticipo le prime due parti, ecco i link: partie 1 et partie 2.
#1 _ Griglia e spaziatura
Griglia
La griglia è un repository per costruire la struttura delle pagine e dare priorità alle informazioni. Questo è uno degli esercizi da affrontare per primi quando creiamo i nostri wireframe e modelli; e questo per ciascuno dei dispositivi.
Linea di base
La linea di base fornisce un punto di riferimento quando si posiziona un blocco di testo e si determina quale interlinea scegliere.
Punto di rottura
Un punto di rottura è un plateau. A partire da una certa larghezza della finestra, la disposizione e la disposizione dei contenuti può variare per adattarsi allo spazio disponibile.
Spaziature
La spaziatura tra i diversi elementi e contenuti delle tue interfacce è molto importante. Adattando correttamente gli spazi, potrai creare comfort di lettura e limitare il rischio di errore.
- Margine: controlla lo spazio tra l'elemento corrente e gli altri elementi della pagina
- Padding: controlla lo spazio tra il contenuto e il bordo dell'elemento.
Raggio di confine
La proprietà “border-radius” è una proprietà CSS che consente di definire l'angolo degli angoli di un elemento. Ogni angolo può essere definito in modo diverso per creare una forma irregolare oppure ogni angolo può avere lo stesso valore. Troviamo i raggi del bordo su diversi elementi di un'interfaccia: uno sfondo, una mappa, un pulsante, ecc. La scelta del raggio del bordo avrà un forte impatto sulla sensazione generale dell'interfaccia. È quindi importante comprendere le proprietà che ciascuno offre.
Ho scritto un articolo per guidarmi nella scelta del border-radius che utilizziamo nella UI design: Condividerò il link con te qui.
#2 _ Notifiche e avvisi
Pane tostato/Snackbar
Il toast e lo snackbar sono componenti che informano l'utente di un'azione in corso. Si tratta di notifiche “in app”, contestuali e non ostruttive (generalmente compaiono solo per pochi secondi prima di scomparire).
Permettono di dare un breve messaggio su qualcosa che sta accadendo (ad esempio, uno stato).
- Toast: fornisce feedback su ciò che sta accadendo attualmente
- appare e scompare senza che sia richiesta l'azione dell'utente
- c'è solo un messaggio informativo (nessuna azione)
- può essere contestuale più in generale a livello di applicazione
- Snackbar: visualizza avvisi, azioni aggiuntive
- puoi farlo scomparire manualmente utilizzando un gesto o un pulsante
- vengono proposte azioni contestuali all'azione
- deve essere collegato al contesto della schermata visualizzata o all'azione corrente
Finestra modale/non modale
- Finestra modale: si apre sopra l'applicazione e non consente all'utente di interagire con la finestra dell'applicazione "sotto" (la finestra che l'ha aperta), finché non rimane aperta.
- Finestra non modale: si apre anche sopra l'applicazione ma permette all'utente di continuare ad interagire con la finestra dell'applicazione posta “sotto”, senza doverla necessariamente chiudere.
Pop-up/Pop-in
- Pop-up: è una finestra che appare sopra il contenuto. Questo viene aperto dal tuo browser e non dal sito. Fino a quando l'utente non lo chiude, vengono bloccati.
Il pop-up viene utilizzato per visualizzare messaggi pubblicitari, avvisi o notifiche. - Pop-in: è una finestra che viene visualizzata anche sopra il contenuto. Il loro funzionamento è simile ai pop-up. La differenza è che viene attivato dal codice del sito web e non dal browser. Il pop-in viene utilizzato per visualizzare contenuti relativi al sito web come immagini, foto, video, ecc.
Popover
Un popover può essere utilizzato per visualizzare un contenuto sopra un altro. Ad esempio, la descrizione di una posizione su una mappa quando si fa clic su una città.
Notifiche push
La notifica push è un messaggio di avviso inviato dal server (che "invia" informazioni) a un utente tramite un'applicazione mobile.
#3 _ Le diverse tipologie di menù
Permette di riunire le voci di un sito dietro un unico pulsante.
Barra delle schede
La barra delle schede viene visualizzata nella parte inferiore di un'applicazione mobile e consente agli utenti di spostarsi rapidamente tra le pagine principali di un'applicazione.
Conclusione
Ci ritroviamo per la prossima serie, la quarta ed ultima, dove vedremo insieme un grande tema: componenti del layout, forme e azioni.
Se desideri approfondire le tue conoscenze ed esercitarti nella progettazione di un'interfaccia web, il centro di formazione UX Republic offre la formazione "UI Design, i fondamenti". Ecco il link per saperne di più.
Alexa CUELLAR, progettista UX @UX-Republic
