UX e UI: definizione e differenze principali

L’UI design consiste nell’utilizzare la tipografia, le immagini e altri elementi di design visivo per trasformare un’interfaccia di base in qualcosa di interpretabile.

Se guardi i posti vacanti nel campo del design, puoi trovare, ad esempio, quanto segue: UX / UI designer, UX designer, UI designer, interface designer. Capiremo cos’è il design UX / UI, in che modo UI e UX differiscono, come sono correlati al design dell’interfaccia e capiremo anche cosa serve per imparare a creare servizi web, siti adattivi e applicazioni mobili.

• Cos’è UX Design e UI Design
• Fasi di progettazione dell’interfaccia
• Perché è necessario separare UX e UI
• Tendenze e prospettive di UX e UI e cosa fare al riguardo
• Per chi è un designer UX/UI?
• Da dove cominciare
• Cos’è UX Design e UI Design

Il design UX (User Experience – “user experience”) è responsabile del funzionamento dell’interfaccia.
Il design dell’interfaccia utente (interfaccia utente – “interfaccia utente”) è responsabile dell’aspetto dell’interfaccia.

Una parte non può esistere senza l’altra. Ora è difficile immaginare di poter sviluppare un’interfaccia e non pensare a come apparirà, e viceversa: progettare l’interfaccia utente separatamente dal design UX.
Progettare la parte visiva del design, l’interfaccia utente, è una delle fasi della creazione di un’interfaccia Progettare la parte visiva del design, l’interfaccia utente, è una delle fasi della creazione di un’interfaccia
Progettare la parte visiva del design, l’interfaccia utente, è una delle fasi della creazione di un’interfaccia
Un designer che lavora sia su UX che su UI è più comunemente indicato come designer di interfacce o designer di UX/UI. Guida l’intero processo di sviluppo dell’interfaccia dalla fase di ottenimento di un’attività al test di un prototipo.
Per capire cosa è incluso nella parte UX e cosa c’è nell’interfaccia utente, analizziamo tutte le fasi della progettazione dell’interfaccia utilizzando l’esempio di un’attività di formazione: il progetto di laurea di Alexander Manov, laureato al corso “Interface Designer”.

Fasi di progettazione dell’interfaccia

Il progettista dell’interfaccia utente pianifica il suo lavoro in modo flessibile. Ciò significa che per risolvere un problema specifico, può scegliere un diverso insieme di azioni.
Fondamentalmente, il lavoro di un designer può essere suddiviso in quattro fasi: ricerca, progettazione, progettazione visiva e verifica della soluzione.

Ricerca

Per uno studio dettagliato del compito, il progettista dell’interfaccia utilizza vari strumenti di ricerca UX: intervistare i futuri utenti, studiare i concorrenti e l’area tematica, analizzare il prodotto e i problemi esistenti.
Il progettista è alla ricerca di approfondimenti. Cioè, capisce esattamente di cosa ha bisogno l’utente e se il metodo per risolvere il problema definito dal cliente è adatto a lui. Il progettista dell’interfaccia comunica necessariamente non solo con il cliente, ma anche con il potenziale utente del prodotto.
In questa fase ci saranno chiamate, riunioni, chiarimenti sull’incarico, nuovi dettagli. Alla fine della fase, si riuniranno in un’unica immagine di desideri, requisiti e restrizioni.
Immaginiamo che un designer abbia ricevuto un incarico: progettare un’applicazione mobile e una landing page per un servizio di laboratorio diagnostico clinico.
Un frammento del brief formativo del corso “Interface Designer” Un frammento del brief formativo del corso “Interface Designer”.
Un frammento del brief formativo del corso “Interface Designer”. Per comprendere meglio il compito, è necessario parlare con i rappresentanti di tutti e cinque i segmenti del pubblico di destinazione

Gli utenti di questa applicazione dovrebbero essere in grado di ordinare e pagare i test, chiamare un medico a casa, visualizzare i risultati dei vecchi test e aggiungere un altro utente all’applicazione, ad esempio un bambino.
Durante la discussione dell’attività con il cliente, il progettista chiederà perché queste funzioni non possono essere aggiunte all’account personale sul sito, perché è importante inserirle in un’applicazione separata. Dal cliente il progettista apprende che l’applicazione è un’ipotesi. Se la maggior parte degli utenti inizia a ordinare i test tramite l’applicazione, questa verrà migliorata, verranno aggiunte nuove funzionalità e l’applicazione verrà ampliata.

Nella fase degli studi preparatori, il progettista dell’interfaccia visualizza l’algoritmo del compito. Qui può applicare diversi strumenti, ad esempio:
– uno scenario utente passo-passo (User Flow), per vedere visivamente il percorso dell’utente dalla registrazione all’acquisto;
– una mappa dell’esperienza dell’utente (CJM, Customer Journey Map) per capire dove sono i principali problemi dell’utente e come risolverli.

Ogni azione dell’utente nell’interfaccia è scritta come un algoritmo.
Prima di procedere alla fase di progettazione dell’interfaccia, il progettista determina in anticipo le metriche con cui verrà misurata l’efficacia del progetto.
Nel brief del cliente dell’esempio precedente, c’erano una richiesta per due formati: un’applicazione mobile e una pagina di destinazione, un sito di una pagina che racconterà le funzioni dell’applicazione. Ogni formato avrà la propria valutazione delle prestazioni, ad esempio, per una pagina di destinazione, questo è il numero di download dell’applicazione.
prototipazione
Dopo la fase preparatoria, quando tutti i dati sono stati raccolti, il progettista visualizza la struttura del prodotto o del servizio sotto forma di schema.
Lo schizzo approssimativo più veloce che mostra l’idea chiamato wireframe. In genere, il design del layout segue il metodo della “jeep progressiva”, quando l’intera struttura viene realizzata per prima e i dettagli vengono elaborati gradualmente.

Già in fase di sketch è possibile inviare la specifica agli sviluppatori che programmeranno l’applicazione. Questo è necessario per capire se possono implementare tutte le idee del designer.
Il wireframe è dettagliato e diventa un prototipo realistico nel processo di coordinamento con il cliente e test paralleli con gli sviluppatori. Nel percorso dal punto A al punto B, il layout passa attraverso diverse iterazioni. L’UX designer presenta il prototipo al cliente, lo testa e lo migliora.
Un prototipo di progetto ux/ui passa attraverso diversi cicli di iterazione prima di essere pronto Un prototipo di progetto ux/ui passa attraverso diversi cicli di iterazione prima di essere pronto
Il prototipo passa attraverso diversi cicli di iterazioni prima di essere pronto.

Il design UX ha principi che aiutano a costruire un design dell’interfaccia efficace. Gli aspiranti designer possono farsi guidare dai 10 principi di Jakob Nielsen, il guru dello user design. Questo è un argomento separato, un’intera filosofia. Puoi leggere di più a riguardo nel libro Web Design: A Book di Jakob Nielsen.

Progettare la parte visiva – Progettazione dell’interfaccia utente

Il progettista dell’interfaccia passa alla fase di progettazione dell’interfaccia utente come attività successiva. Per completare la parte dell’interfaccia utente, deve avere capacità di progettazione visiva.
Un frammento del layout dell’interfaccia utente nello sviluppo dell’interfaccia per l’applicazione mobile Smartlab Un frammento del layout dell’interfaccia utente nello sviluppo dell’interfaccia per l’applicazione mobile Smartlab
Un frammento del layout dell’interfaccia utente nello sviluppo di un’interfaccia per l’applicazione mobile Smartlab

Un frammento del layout dell’interfaccia utente nello sviluppo dell’interfaccia di destinazione di Smartlab Un frammento del layout dell’interfaccia utente nello sviluppo dell’interfaccia di destinazione di Smartlab
Frammento del layout dell’interfaccia utente nello sviluppo dell’interfaccia dell’atterraggio “Smartlab”

In questa fase, il designer decide come appariranno gli elementi, seleziona immagini, caratteri, colori: lo stile generale. Se necessario, il progettista dell’interfaccia utente creerà oggetti animati.
Identità aziendale per il progetto Smartlab

Nella parte dell’interfaccia utente, il progettista monitora non solo la bellezza complessiva dell’interfaccia, ma anche che l’utente legga correttamente gli elementi dell’interfaccia in tutti gli stati dello schermo e che l’interfaccia soddisfi gli standard di accessibilità. Questo vale sia per la parte visiva che per l’interazione con l’interfaccia. Cioè, in termini di interfaccia utente, il progettista continua a pensare alla UX dell’interfaccia.
A differenza del design UX, i principi di progettazione dell’interfaccia utente sono estremamente specifici. È meglio per un designer alle prime armi concentrarsi sulle regole standard per la visualizzazione dell’interfaccia. Per maggiori dettagli, vedere i libri di testo “Tipografia e layout” di Artyom Gorbunov e “Interfaccia utente” di Ilya Birman.

Verifica della soluzione

Il progettista dell’interfaccia testa il loro layout con vari strumenti. Il più semplice è il test del corridoio, aiuta a trovare rapidamente errori. Il progettista presenta uno scenario di indagine e intervista diversi possibili utenti. Quindi raccoglie e analizza il feedback e, se necessario, torna alle fasi precedenti. Per test più complessi, vengono utilizzati studi di usabilità, test AV.
Il test mostrerà ciò che deve essere corretto nel layout a livello di UI o a livello di UX Il test mostrerà ciò che deve essere corretto nel layout a livello di UI o a livello di UX
I test mostreranno ciò che deve essere corretto nel layout a livello di interfaccia utente o a livello di UX

Alla fine, il progettista finalizza il prototipo dell’interfaccia e lo consegna agli sviluppatori web. È ancora incluso nell’incarico, controlla il processo fino alla consegna del prodotto finito al cliente.
Il progettista dell’interfaccia è il difensore dell’utente. In ogni fase di progettazione, il progettista pensa sia a come funzionerà l’interfaccia (UX) sia a come apparirà (UI). Questa preoccupazione non riguarda l’interfaccia, ma l’utente, se alla fine si sentirà a suo agio. Sì, il progettista tiene conto degli interessi dell’azienda, delle possibilità e dei limiti della tecnologia, ma il suo obiettivo principale è sviluppare un’interfaccia che risolva il problema dell’utente.
Padroneggia da zero la professione di UI/UX designer in 8 mesi
Crea 6 progetti di applicazioni mobili e web per il tuo portfolio. Dopo la formazione, riceverai il primo ordine pagato nel “Workshop”, uno studio di progettazione all’interno del Practicum. Fai il primo passo e prova la parte introduttiva gratuita del corso Interface Designer.
Tentativo

Perché era necessario separare UX e UI

I datori di lavoro a volte separano UX e UI in due lavori diversi. Il progettista di UX ottiene alcuni dei compiti: esplora l’area tematica, analizza il pubblico di destinazione, crea un prototipo e lo testa. Quindi viene collegato il progettista dell’interfaccia utente, che porta il prototipo alla prontezza, disegna l’interfaccia utente.
La divisione in UX e UI rimane ancora nei piccoli studi di progettazione e nelle grandi aziende. Ad esempio, un lead designer per un’azienda può eseguire solo attività UX, poiché in precedenza lavorava come analista UX. Attività per interfaccia utente