Ogni giorno, su incarico, devo interagire con diversi stakeholder in un progetto. A seconda della posizione e dell'appetito per la disciplina del design UX-UI, ognuno ha una conoscenza diversa dei termini utilizzati.
Nel corso delle missioni ho compilato un gran numero di concetti ed è un vocabolario che mi sarebbe piaciuto avere quando ho iniziato e che ho quindi consolidato gradualmente per aiutare i futuri studenti o i neofiti del digitale.
Ho quindi preparato per te una serie di articoli in cui ogni concetto verrà spiegato in modo che tu possa fare riferimento ad esso. Chiudiamo quindi questa serie con gli ultimi 20 concetti. Se mai volessi consultare entrambe le parti - a monte, ecco i link: partie 1, partie 2 et partie 3.
#1 _ Layout
carosello
Il carosello ti consente di sfogliare contenuti come immagini, mappe, ecc. utilizzando la navigazione orizzontale. Spesso li troviamo nella home page di un sito per presentare le novità.
fisarmoniche
Le fisarmoniche consentono agli utenti di espandere e comprimere sezioni di contenuto. Sono molto utili per organizzare i contenuti e mostrare all'utente una gerarchia chiaramente definita.
Impaginazione
Spesso nella parte inferiore di una pagina, l'impaginazione organizza il contenuto in pagine. Troviamo quindi il numero di ogni pagina. A volte alcuni sono nascosti, a seconda del numero. La buona pratica è conservare sempre il primo e l'ultimo. Un'altra buona pratica, per semplificarne l'utilizzo, è quella di visualizzare i pulsanti “precedente” e “successivo”.
Articolo
Una voce è un elemento di una lista. Questo è un elemento importante perché spesso è quello che ripeteremo più volte adattando i dati visualizzati.
Lista
È formato da un insieme di elementi che si susseguono in ordine alfabetico, numerico o anche casuale.
Qui possono essere annidati diversi componenti come testo, immagini, stato, pulsante, ecc.
Elenco della griglia
Gli elenchi griglia visualizzano una raccolta di immagini in una griglia organizzata. A differenza della lista, gli elementi sono disposti verticalmente e orizzontalmente, e non più in un'unica colonna verticale come la lista.
Carta
La mappa è un componente che consente di raggrupparsi all'interno dello stesso gruppo.
Ad esempio, un titolo, un contenuto e un'immagine per materializzare un articolo multimediale. Oppure un'immagine, un titolo e un pulsante di acquisto su un sito di e-commerce.
#2 _ Moduli
Forma
I moduli consentono di recuperare le informazioni completate dall'utente. Inserirà, completerà o aggiungerà elementi nel sistema, quindi li invierà.
Campo (input in inglese)
Il campo consente all'utente di inserire informazioni. Queste informazioni potrebbero presentarsi in diverse forme, come può essere descritto nei seguenti concetti.
Campi di testo
I campi di testo consentono agli utenti di inserire e modificare testo. Può trattarsi di una riga singola o di più righe.
Maledizione
Il dispositivo di scorrimento consente agli utenti di spostarsi attraverso una serie di valori. Si materializza principalmente in una barra interattiva. Ad esempio per regolare il volume o per spostarsi all'interno di una traccia audio/video.
Elenco a discesa (A discesa o "seleziona" in inglese)
L'elenco a discesa consente di scegliere tra due e un numero illimitato di opzioni.
Casella di controllo
La casella di controllo consente agli utenti di selezionare una o più opzioni da un elenco. È un componente che permette all'utente di indicare le scelte da un elenco di proposte. Graficamente, una casella selezionata viene generalmente materializzata in modo diverso (grazie ad un'icona o ad un colore), mentre una casella deselezionata viene lasciata vuota. Una casella può anche essere disattivata quando la scelta non è possibile.
Pulsante di opzione
Il pulsante di opzione consente all'utente di selezionare una singola opzione da un set. Graficamente, un pulsante di opzione è rappresentato da un cerchio. Come per la casella di controllo, la selezione dell'utente viene materializzata in modo diverso (utilizzando un'icona o un colore).
Interruttore a levetta
L'interruttore viene utilizzato per le opzioni binarie. Permettono di attivare o disattivare lo stato di un singolo elemento.
È come un interruttore, la levetta può assumere solo due posizioni (es: pulsante on/off).
segnaposto
Un segnaposto è un attributo utilizzato per visualizzare il testo per impostazione predefinita in determinati campi del modulo. Fornirà all'utente indizi per compilare un campo. Ad esempio, per fornire il formato previsto di una data, un indirizzo o un numero di telefono.
#3 _ Azioni
Pulsante
Un pulsante consente agli utenti di effettuare azioni e scelte con un solo tocco o clic.
Il pulsante è uno dei componenti più importanti di un'interfaccia perché indirizza l'utente lungo percorsi chiave: ad esempio acquistare un prodotto, sottoscrivere un abbonamento o registrarsi.
Collegamento
Un collegamento è un modo per spostarsi da una pagina all'altra. Cliccando su un link l'utente accederà direttamente alle informazioni ricercate.
Dal punto di vista del design, è importante identificarli chiaramente. Spesso vengono rappresentati utilizzando sottolineature e colori.
FAB (pulsante di azione mobile)
Il pulsante di azione mobile è un pulsante leggermente diverso dai pulsanti che siamo abituati a vedere sulle piattaforme. La sua particolarità è che fluttuerà nell'interfaccia, sopra il contenuto. I pulsanti di azione mobili sono per lo più posizionati nella parte inferiore destra dello schermo delle tue applicazioni preferite. Vengono utilizzati nelle interfacce per raggruppare le azioni principali per gli utenti.
Barra di ricerca
La barra di ricerca è un campo di input un po' speciale perché consente di cercare o filtrare gli elementi. La ricerca può essere cross-site o su una funzionalità specifica.
Conclusione
Con queste nozioni chiudiamo quindi la nostra serie del piccolo glossario UX-UI. Non c'è dubbio che rilanceremo una nuova serie per guidarvi verso nuovi concetti (probabilmente ad oggi inesistenti!). Grazie per averci seguito e non esitare a contattarci se un concetto ti dà ancora problemi!
Per visionare le prime tre parti, ecco i link: partie 1, partie 2 et partie 3.
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
