Piccolo lessico UX-UI (parte 1)

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 messo insieme un gran numero di concetti ed è un vocabolario che mi sarebbe piaciuto avere quando ho iniziato e che quindi ho 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 farvi riferimento.

E iniziamo la nostra serie con le prime 21 nozioni.

#1 _Concetti generici 

L'affluenza

Se guardiamo alla definizione su Internet, l'affordance è “la capacità di un sistema, un oggetto o un prodotto di suggerire il proprio uso”.

In altre parole, l'affordance provoca un'interazione spontanea tra l'utente e il suo ambiente. Ad esempio, quando vediamo la maniglia di una porta, un quadrante per regolare il suono o un interruttore, sappiamo come interagire con esso.

L'uso dell'oggetto è intuitivo grazie al modo in cui è stato designato.

Qui abbiamo l'esempio dell'interruttore in cui il pulsante cambia posizione e colore a seconda dello stato.

La gerarchia visiva

La gerarchia visiva di una pagina consente all'utente di sapere dove focalizzare la propria attenzione e il proprio sguardo. Questa gerarchia ordina le informazioni e permette all'utente di essere guidato durante la sua visita.

Per dare la priorità alle informazioni, è possibile utilizzare diverse tecniche:

● Colori e contrasti

● Dimensioni degli elementi

● Località

accessibilità web

L'accessibilità web consiste nell'ottimizzazione di un'interfaccia per soddisfare le esigenze di un maggior numero di utenti, in particolare utenti con disabilità.

Eliminiamo quindi tutti gli ostacoli alla comprensione e alla leggibilità al fine di fornire comfort di lettura e fornire accesso alle informazioni e ai contenuti in modo equo a tutti i nostri utenti.

Un modello scuro

Un "dark pattern" o "dark UX" è un'interfaccia appositamente progettata per ingannare o manipolare gli utenti.

Spesso queste scelte possono essere messe in atto per coinvolgere maggiormente l'utente e fargli rimanere più a lungo su un servizio utilizzando pregiudizi cognitivi. Aiutano anche a generare più vendite e raccogliere più informazioni sugli utenti.

Un esempio che vedo spesso, e sicuramente anche da te, accade sui siti di viaggi online dove si crea nell'utente un senso di urgenza. con informazioni del tipo “Attenzione solo una camera disponibile!”, “Attenzione, altre persone stanno visualizzando questa prenotazione in questo momento”.

Uno stato vuoto

Uno "stato vuoto" è lo stato vuoto che spiega all'utente cosa fare e come farlo. L'idea è di spiegargli il più chiaramente possibile e anche con un tocco di simpatia le sue opzioni.

Il tono di voce

Tone of Voice si riferisce a come l'azienda comunica i suoi valori, la personalità e la visione ai suoi utenti e come questo influenza il messaggio percepito.

È risaputo che un brand si distingue per l'aspetto visivo ma anche il linguaggio è un forte elemento di differenziazione.

ti condivido articolo (in inglese) con esempi di marchi come Starbucks, Uber o Coca Cola.

Gamificazione

La gamification è l'uso di meccaniche di gioco (videogiochi, giochi per dispositivi mobili, ecc.) in un contesto esterno al gioco per trattenere e coinvolgere gli utenti.

Un'applicazione che ti consiglio per capire il termine "Gamification" è l'applicazione Duolingo! È un'applicazione che ti permette di imparare una nuova lingua con una progressione e obiettivi da raggiungere.

La “zona del pollice”

Rappresentazione grafica di quali aree del nostro prodotto (utilizzando il colore) è più facile o più difficile fare clic con il pollice su un dispositivo mobile.

Immagine spesso utilizzata per mostrare come un utente tiene il suo telefono e quindi spazi difficili da raggiungere.

 #2 _Dovremmo aggiungere questa funzione?

Una zona

Una suddivisione in zone consente di schematizzare approssimativamente gli elementi di contenuto che si desidera evidenziare nell'interfaccia finale e di assegnarne la priorità.

Uso molto questo metodo, soprattutto sulla carta, per chiarirmi le idee o difendere un'idea davanti al team.

Ma è una tecnica facile da imparare che può essere molto utile nelle mani del tuo team di progetto, soprattutto per i workshop di co-design.

Un reticolo

Un wireframe è un diagramma semplificato e dettagliato di una pagina. Permette di tradurre concretamente le specifiche funzionali.
È buona norma quindi non utilizzare colori o immagini per concentrarsi sull'aspetto funzionale.

Cerchiamo di descrivere le basi: cosa contiene la pagina? Quali informazioni ci sono? Come vengono evidenziati?

Un modello grafico

Il modello fornisce una panoramica del potenziale rendering finale prima che venga sviluppato.

Durante la creazione dei modelli, prenderemo decisioni importanti sui dettagli grafici: i colori, la tipografia, lo stile visivo e tutto ciò che riguarda l'aspetto grafico generale dell'interfaccia.

Un prototipo

Il prototipo è la rappresentazione dinamica del tuo progetto finale. Questo passaggio consente di testare la soluzione.

Ciò consente di verificare se i viaggi sono adattati alle esigenze degli utenti, se contengono errori o altri problemi di usabilità.

Un grafico grafico

Una carta grafica è un documento che definisce gli standard in base ai quali devono essere utilizzati i diversi elementi dell'identità visiva. La carta permette di avere coerenza su tutti i supporti dove verrà rappresentato il marchio (logotipo, colori, iconografia, ecc.)

Un kit di interfaccia utente

Un UI Kit è un documento prodotto su software per creare componenti utilizzando gli elementi elencati nella carta grafica e nella guida di stile.

Una guida di stile

La guida di stile o GUI (Graphical User Interface) è un documento che raccoglie tutti gli elementi di un'interfaccia che compone un sito web o un'applicazione.

La guida di stile funge da riferimento comune per tutti i widget. È utile sia per il progettista dell'interfaccia utente, durante la creazione di modelli, sia per il team di sviluppo front-end, durante l'integrazione. È anche molto utile per discutere le diverse evoluzioni del progetto, durante le iterazioni.

Un sistema di progettazione

È una libreria che raccoglie tutti gli elementi grafici ei componenti di un'interfaccia. Riunisce vari elementi (marketing, design, dev, ecc.) e risorse e documenti. È uno strumento in evoluzione e condiviso.

#3 _Intrattenimento 

Rollover

Il rollover è il cambiamento dell'aspetto di un elemento al passaggio del mouse. Possiamo quindi modificare l'aspetto del testo, il colore di sfondo, l'animazione di comparsa o scomparsa, uno zoom,...

Progettazione del movimento

Il motion design è una tecnica che consiste nell'animare elementi grafici. Le immagini prendono vita attraverso il movimento per trasmettere un messaggio in modo dinamico.

Scorrimento "parallasse".

Lo scorrimento "parallasse" è una tecnica che consente di scorrere le pagine dei siti a velocità diverse.

Il risultato è che, quando scorri, hai un effetto di profondità che dà l'impressione del 3D.

Come creare un effetto di parallasse?
Gli strati che compongono la scena scorrono a velocità variabili.

Schermate di caricamento

Le schermate di caricamento sono progettate per far sapere agli utenti che il sistema sta eseguendo un'azione in background e dovrebbe attendere.

Barre di avanzamento

Le barre di avanzamento aiutano gli utenti a visualizzare dove si trovano in una serie di passaggi.

Conclusione

Ci ritroviamo per la prossima serie dove vedremo insieme quattro temi principali: page type, organizzazioni interfunzionali, brand identity e tipografia.

Se vuoi approfondire le tue conoscenze ed esercitarti nella progettazione di un'interfaccia web, il centro di formazione UX Republic offre formazione "UI Design, i fondamenti". Voici le lien per ulteriori informazioni.

 

 

Alexa CUELLAR, progettista UX @UX-Republic


Fonti di immagini:
– https://undraw.co/ – https://giphy.com/


I nostri prossimi corsi di formazione