Una guida completa alla progettazione dell'esperienza utente

Pubblicato: 2022-03-10
Riassunto veloce ↬ I designer tendono a perdersi nei dettagli finché non hanno tutto mappato. Questo non è raccomandato, poiché il processo di progettazione è iterativo. Questa guida ti aiuterà a rimanere in pista.

( Questo è un articolo sponsorizzato .) Dopo aver intrapreso la ricerca dell'utente iniziale e aver analizzato i risultati della tua ricerca, la fase successiva del processo di progettazione consiste nell'applicare ciò che hai appreso sviluppando una serie di progetti per testare le tue ipotesi. Nel quarto articolo della mia serie per Adobe XD, mi concentrerò sulla fase iniziale del processo di progettazione.

All'interno di questa serie complessiva di dieci articoli, questo è il primo di tre che legano insieme il processo di progettazione. Questo articolo tratta del design dell'esperienza utente a un livello superiore, da un punto di vista a volo d'uccello. Il mio prossimo articolo esplorerà la progettazione dell'interfaccia utente, l'esplorazione degli inventari delle interfacce, la creazione di librerie di modelli e la progettazione di interazioni e animazioni. Il terzo articolo di questa serie all'interno di una serie esplorerà wireframing e prototipazione.

Come ho esplorato nel mio precedente articolo sulla ricerca sulla UX, è importante sottolineare che ci stiamo basando sulla ricerca sugli utenti intrapresa. Dopo aver analizzato i risultati della nostra ricerca, il nostro obiettivo in questa fase del processo di progettazione è:

  • stabilire alcuni percorsi utente chiari che soddisfino le esigenze di utenti diversi abbracciando storie, scenari e storyboard degli utenti;

  • applicare alcune lezioni dal mondo di Human Computer Interaction (HCI) in modo da progettare tenendo presenti i primi principi; e

  • stabilire un "look and feel" per i nostri progetti in un modo indipendente dal dispositivo che può essere applicato sia in un contesto desktop che mobile.

In breve, questo articolo vuole fare da ponte tra la fase di ricerca e la fase di progettazione . Come ho sottolineato nel mio ultimo articolo, il processo di progettazione - ricerca, progettazione, prototipo, costruzione, test - è iterativo; in questa fase del processo, ci concentriamo sullo sviluppo di una serie di progetti che possiamo prototipare, costruire e testare.

UX Design è un argomento vasto, quindi considera questo articolo un breve manuale di istruzioni, ma, come nei miei articoli precedenti, fornirò alcune letture suggerite per assicurarti di essere ben coperto.

Ottenere uno scheletro sul posto

Prima di scendere ai dettagli della progettazione dell'interfaccia utente (UI) e della creazione di prototipi interattivi, è importante mettere in atto il flusso di alto livello del progetto, stabilendo uno scheletro attorno al quale costruire il nostro progetto.

A questo punto del processo, è importante utilizzare i risultati della nostra ricerca per informare lo sviluppo delle storie degli utenti, identificando i diversi obiettivi degli utenti. Possiamo usare queste storie utente per creare scenari diversi. Questo ci aiuta a identificare obiettivi chiari e un intento sottostante che guida il processo di progettazione. Ci consente inoltre di sviluppare flussi attraverso ciò che stiamo costruendo.

Durante lo sviluppo dei flussi iniziali, utilizzando prototipi di carta e storyboard, ci concentriamo sull'avere un'idea del design nella sua totalità, prima di approfondire i dettagli. È importante avere uno scheletro a posto e non perdersi nei dettagli, che seguiranno la linea.

Nel mio precedente articolo, mi sono concentrato sull'importanza di intraprendere la ricerca degli utenti prima di intraprendere la fase di progettazione di un progetto. Come ho detto:

Trascorri del tempo con i tuoi utenti, conoscendo le loro esigenze e ciò che stanno cercando di ottenere, questi sono i loro "lavori da svolgere".

Eliminando i "lavori da svolgere" dei nostri utenti, possiamo garantire che ciò che progettiamo sia veramente incentrato sull'utente. Dopo aver intrapreso alcune ricerche mirate sugli utenti, è importante prendere i tuoi risultati e usarli per informare il tuo processo di progettazione. La tua ricerca avrebbe dovuto aiutarti a stabilire alcuni schemi, bisogni che gli utenti che stai progettando hanno in comune.

Tuttavia, raramente una taglia va bene per tutti ed è probabile che qualunque cosa tu stia progettando avrà più tipi di utenti con esigenze diverse. Lo sviluppo di "storie utente", che rappresentano le esigenze di utenti diversi, può aiutarti a distillare gli obiettivi che stai cercando di risolvere, contribuendo a plasmare il resto del processo. Ma cosa sono esattamente le storie degli utenti?

Storie di utenti

Le storie degli utenti sono un modo utile per stabilire una visione di alto livello dei "lavori da svolgere" dei diversi utenti. Scritti dal punto di vista degli utenti tipici, ti aiutano a stabilire i diversi obiettivi dei tuoi diversi utenti in modo che tu possa progettare di conseguenza per le loro diverse esigenze .

Il termine "User Story" è stato originato da Alistair Cockburn, uno degli iniziatori del movimento agile nello sviluppo del software, che ha coniato la frase "una user story è una promessa per una conversazione", durante un progetto per Chrysler nel 1998.

Le storie degli utenti spostano l'enfasi dalla scrittura dei requisiti al parlarne. Anche se sottile, questo passaggio, dallo scrivere al parlare, può avere un impatto significativo sul processo di progettazione.

Troppo spesso i requisiti sono forniti in modo astratto, come un elenco da spuntare che, se non stai attento, ha poca somiglianza con ciò di cui gli utenti hanno bisogno e più somiglianza con ciò di cui ha bisogno un "design by comitato". Le storie degli utenti aiutano a posizionare gli utenti al centro della conversazione.

Le storie degli utenti sono un ottimo modo per definire le esigenze di utenti diversi, posizionando l'utente al centro del processo di progettazione. Le storie degli utenti ti aiutano a mappare i ruoli su azioni e obiettivi.
Le storie degli utenti sono un ottimo modo per definire le esigenze di utenti diversi, posizionando l'utente al centro del processo di progettazione. Le storie degli utenti ti aiutano a mappare i ruoli su azioni e obiettivi.

Questa idea, di uno strumento per incoraggiare e facilitare la conversazione, cattura la forza delle storie degli utenti. Sono uno strumento ideale per iniziare a mappare gli scenari , assicurando che gli utenti rimangano sempre al centro del processo di progettazione e sviluppo.

Brevi descrizioni di obiettivi e funzionalità raccontate dal punto di vista di diversi utenti, le storie degli utenti ti aiutano a comprendere gli obiettivi sottostanti che i tuoi utenti hanno in modo da poter vedere il problema dal loro punto di vista. Questi seguono uno schema come segue:

  • In qualità di (persona in un ruolo particolare),
  • Voglio (eseguire un'azione o scoprire qualcosa),
  • In modo che (posso raggiungere il mio obiettivo di).

Utilizzando il modello sopra, possiamo metterci nei panni di utenti diversi e sviluppare storie diverse per dare forma al nostro design. Immagina, ad esempio, di creare una risorsa di apprendimento basata sul Web in cui docenti e studenti possono condividere materiali didattici. È probabile che abbiamo un numero di utenti diversi con esigenze diverse. La user story di un docente potrebbe essere:

In qualità di docente, voglio condividere le diapositive delle mie lezioni in modo da poter fornire ai miei studenti l'accesso a risorse al di fuori della classe.

Sviluppando una breve storia attorno alle esigenze specifiche di questo utente, possiamo iniziare a immaginare modelli di progettazione che soddisfino questo tipo di utente. Visto dal punto di vista di uno studente, un utente diverso con esigenze diverse, potremmo sviluppare la seguente user story:

Come studente, voglio accedere alle diapositive delle lezioni in modo da potervi fare riferimento durante la revisione.

Queste storie, trasmesse da diverse prospettive, ci forniscono utili provocazioni che possiamo utilizzare all'inizio del processo di progettazione per iniziare a mappare il nostro design ad alto livello. È importante sottolineare che le storie sono incentrate sulla soddisfazione delle esigenze dei nostri utenti. In breve, le storie degli utenti ci aiutano a farci un'idea di quali sono gli obiettivi degli utenti ad alto livello. Possiamo quindi utilizzare queste storie per sviluppare diversi scenari che possiamo iniziare a progettare.

Usare gli scenari per informare il tuo design

All'inizio di un progetto, è facile lasciarsi trasportare dall'aggiunta di funzionalità in abbondanza e perdersi nelle "caratteristiche". Il pericolo di questo approccio è che è facile iniziare ad aggiungere caratteristiche e funzionalità che sminuiscono gli obiettivi principali degli utenti.

Utilizzando le storie degli utenti per sviluppare scenari tipici, rimani concentrato sugli obiettivi principali dei tuoi utenti. Questo approccio consente inoltre di stabilire aspettative e sviluppare parametri di riferimento per le esigenze tipiche degli utenti, che possono essere utilizzati per definire risultati e obiettivi chiari all'inizio del progetto .

Partendo dalle storie degli utenti, possiamo iniziare a costruire diversi scenari che soddisfano le diverse esigenze degli utenti. La mappatura di queste storie e dei flussi di costruzione ci consente di stabilire come vengono soddisfatte le esigenze dei diversi utenti.
Partendo dalle storie degli utenti, possiamo iniziare a costruire diversi scenari che soddisfano le diverse esigenze degli utenti. La mappatura di queste storie e dei flussi di costruzione ci consente di stabilire come vengono soddisfatte le esigenze dei diversi utenti.

Tornando all'esempio precedente, possiamo stabilire alcuni obiettivi di alto livello dal punto di vista dei nostri diversi utenti: per il docente, avremo bisogno di progettare una funzione di caricamento; per lo studente, avremo bisogno di progettare una funzione di accesso. Questi sono obiettivi di alto livello, ma possiamo, man mano che sviluppiamo i nostri scenari, iniziare ad aggiungere un po' di granularità e complessità alle storie degli utenti che informano ulteriormente il design.

Ad esempio, tornando all'esempio precedente, dal punto di vista degli studenti potremmo considerare i seguenti scenari:

  • A livello base, gli studenti vogliono accedere alle diapositive.

  • A un livello leggermente più avanzato, gli studenti potrebbero voler annotare le diapositive, catturando i loro appunti.

  • Infine, se le risorse lo consentono, gli studenti potrebbero voler condividere i loro appunti con i loro coetanei, consentendo l'apprendimento collaborativo.

Gli scenari, come l'esempio esplorato sopra, ci consentono di avere un quadro chiaro dei diversi livelli di complessità e di progettarli di conseguenza . Ci consentono inoltre di avere un'idea del flusso degli utenti attraverso il nostro design, consentendoci di mapparli su carta in modo da poter iniziare a costruire una vista a volo d'uccello del progetto.

Mappatura del flusso di progettazione

Usando le storie degli utenti e gli scenari come driver per la discussione, è possibile iniziare a mappare i percorsi attraverso il tuo progetto ad alto livello. Questo processo di mappatura delle storie degli utenti , illustrato in precedenza, ci aiuta a definire diversi flussi di utenti.

A questo punto del processo, la carta è un potente strumento per la prototipazione rapida , prima di passare allo sviluppo di storyboard più raffinati. Un approccio a basso costo, bassa fedeltà e veloce, la prototipazione su carta ha molti vantaggi:

  • È a basso costo e ti consente di esplorare più idee con pochissime barriere all'ingresso;

  • È la bassa fedeltà, che ti incoraggia a concentrarti sul quadro generale e a non perderti nei dettagli;

  • È veloce e ti consente di scorrere rapidamente più variazioni di un flusso.

Paper consente inoltre la collaborazione, consentendo a più partecipanti di spostarsi attorno a un tavolo e sviluppare rapidamente un progetto , tenendo conto delle opinioni e delle intuizioni di tutti.

La carta è un potente strumento per le prime fasi di prototipazione. Basso costo e bassa fedeltà ti aiutano a concentrarti sul "quadro generale" e a mettere a posto lo scheletro del tuo progetto.
La carta è un potente strumento per le prime fasi di prototipazione. Basso costo e bassa fedeltà ti aiutano a concentrarti sul "quadro generale" e a mettere a posto lo scheletro del tuo progetto.

Infine, la carta "si salva da sola". Quando progettiamo sugli schermi, spesso perdiamo artefatti di progettazione a causa della natura degli "stati" di salvataggio del software, diversi punti del processo di progettazione. La prototipazione su carta ci consente di vedere l'intero processo di progettazione, comprese le idee rifiutate, in rotta verso il nostro concetto finito.

Secondo la mia esperienza, un progetto tipico richiederà spesso più cicli di prototipi di carta mentre elabori in modo iterativo il tuo modo di pensare. A questo punto il processo di lavoro sullo schermo è troppo lento e troppo rifinito, il che può portare rapidamente a perdersi in dettagli inutili. La carta ti consente di concentrarti sul quadro generale , che è ciò che conta in questa fase.

Naturalmente, anche i designer esperti possono indietreggiare di fronte all'idea di disegnare interfacce, trovando il processo intimidatorio. Non è raro sentire "Ma non so disegnare!" Questo è palesemente falso, tutti noi siamo stati in grado di disegnare bene quando eravamo bambini (come attestano tutte quelle immagini sui frigoriferi dei nostri genitori!) dobbiamo solo reimparare questa preziosa abilità.

Per parafrasare Jason Santa Maria:

Disegnare non significa essere un buon artista, ma essere un buon pensatore.

Con gli schizzi di alto livello stabiliti, è ora di iniziare ad aggiungere un po' di fedeltà creando alcuni storyboard e wireframe. Tenere quel pensiero. Tuttavia, ci tornerò nel mio sesto articolo su Wireframing e Prototyping.

Un punto di scienza: leggi UX

La UX potrebbe essere una disciplina relativamente nuova, ma è informata da decenni di ricerca nel campo dell'interazione umana con il computer (HCI).

Come ho notato nel primo articolo di questa serie, su The Evolution Of User Experience Design, progettiamo soprattutto per gli esseri umani e gli esseri umani condividono ampiamente caratteristiche simili di cui dovremmo tenere conto quando prendiamo le nostre decisioni di progettazione. HCI ci offre numerosi principi che possiamo applicare al campo della progettazione dell'esperienza utente.

Molti di questi principi sono stati distillati sotto forma di "leggi" da cui possiamo trarre, ad esempio:

  • la legge di Hick, che sottolinea la necessità di ridurre al minimo le scelte per alleviare il carico cognitivo e aiutare a guidare il processo decisionale ;

  • la legge di Fitt, che fornisce preziosi consigli su come facilitare le interazioni attraverso l'attento dimensionamento e posizionamento degli elementi dell'interfaccia ; e

  • La legge di Miller, che enfatizza i vantaggi del "chunking" per facilitare compiti complessi .

Questi sono principi che possono essere applicati sia a livello macro che micro e per migliorare come designer vale la pena approfondire. Ne esplorerò tre: la legge di Hick, la legge di Fitt e la legge di Miller, ma ce ne sono molte altre.

L'eccellente sito di Jon Yablonski, Laws of UX, è un'utile raccolta di principi, che vale la pena aggiungere ai segnalibri. Non solo è un bel pezzo di design in sé e per sé, ma fornisce anche una buona panoramica di ogni principio accompagnata da collegamenti ad ulteriori letture.

Legge di Hick

La legge di Hick (o, per intero, la legge di Hick-Hyman) afferma:

Il tempo necessario per prendere una decisione aumenta con il numero e la complessità delle scelte.

Prende il nome da William Edmund Hick e Ray Hyman, una coppia di psicologi, la legge sottolinea l'importanza di ridurre il numero di scelte che si presentano a un utente .

Potresti pensare di aiutare il tuo utente offrendo una serie infinita di scelte, ma in realtà stai aumentando il suo carico cognitivo. Più scelte deve affrontare un utente, più è probabile che se ne vada, paralizzato dalla " paralisi decisionale ". Ciò può essere particolarmente problematico in un contesto di e-commerce, in cui gli utenti che si allontanano hanno un impatto diretto sui profitti.

A Book Apart presenta solo versioni recenti
Piuttosto che elencare ogni singolo libro nella sua home page, A Book Apart presenta solo le versioni recenti, riducendo il numero di scelte e alleviando la paralisi decisionale. L'intera biblioteca è a portata di clic per chi cerca un libro in particolare.

Possiamo applicare la legge di Hick al design UX in vari modi:

  • Quando crei la navigazione invece di fornire un elenco infinito di scelte, concentrati solo su alcune . I tuoi utenti ti ringrazieranno.

  • In un contesto di e-commerce, invece di elencare ogni singolo prodotto, riduci il numero di scelte e la concentrazione. Fallo e compenserai la paralisi decisionale che porta a un tasso di conversione più elevato .

  • Distinguere il contenuto essenziale dal contenuto secondario. Consentendo agli utenti di trovare un percorso attraverso un minor numero di scelte, ridurrai il loro carico cognitivo .

Siamo spesso colpevoli di equiparare "di più" con "meglio", ma la legge di Hick ci dice di pensare diversamente. Maggiore è il numero di opzioni, più tempo impiegano i nostri utenti a prendere una decisione (e talvolta li porta a non prendere alcuna decisione). La concentrazione è ciò che conta, anche in un mondo sempre più sopraffatto dalla scelta.

Legge di Fitt

La legge di Fitt afferma: Il tempo necessario per acquisire un bersaglio è una funzione della distanza e delle dimensioni del bersaglio. Tradotto significa: più lontano è un obiettivo, ad esempio un pulsante su uno schermo, più grande deve essere perché un utente possa raggiungerlo facilmente.

La legge di Fitt è particolarmente importante quando si tratta di progettare pulsanti e altri elementi selezionabili sullo schermo. Contesti diversi richiedono approcci diversi e informeranno il tuo approccio progettuale.

Intercom assicura che i pulsanti di invito all'azione siano grandi e accattivanti
Sulla sua homepage, Intercom assicura che i pulsanti di invito all'azione siano grandi e accattivanti in modo che siano facili da vedere e da navigare.

In un contesto desktop un utente utilizzerà un mouse e, su uno schermo di grandi dimensioni, percorrerà distanze potenzialmente grandi. In questo contesto, è importante assicurarsi che i pulsanti di invito all'azione (CTA) siano di dimensioni ragionevoli, facili da vedere e su cui fare clic .

In un contesto mobile, è fondamentale considerare i target di tocco durante la progettazione delle interfacce. Quando progettiamo per i touchscreen, le nostre dita hanno una fedeltà inferiore rispetto ai puntatori del mouse, quindi dobbiamo aumentare le dimensioni del target del tocco . (Ovviamente, anche target di tocco più grandi negli ambienti desktop possono aiutare!)

Possiamo applicare la legge di Fitt al design UX in vari modi:

  • Quando progetti per dispositivi mobili, considera i tuoi target di tocco. Con meno spazio sullo schermo, riduci il numero di elementi cliccabili e aumenta la loro dimensione .

  • Potrebbe sembrare ovvio, ma se hai un pulsante grande sullo schermo, assicurati che sia l'invito all'azione principale, altrimenti corri il rischio che gli utenti lo facciano inavvertitamente.

  • Quando si progettano menu a discesa o altre forme di navigazione nidificata, assicurarsi che le dimensioni target siano sufficientemente grandi da consentire agli utenti di acquisire .

In generale, più qualcosa è lontano, più grande deve essere affinché un utente lo colpisca. Quando pianifichi il tuo progetto ad alto livello, considera importanti inviti all'azione e assicurati di aver tenuto conto della legge di Fitt durante la progettazione di questi. I pulsanti minuscoli potrebbero sembrare puliti e ordinati, ma se frustrano il tuo utente, il tuo design deve funzionare.

Legge di Miller

La legge di Miller afferma: una persona media può mantenere solo sette (più o meno due) elementi nella memoria di lavoro. In breve: c'è solo così tanto che possiamo tenere nella nostra testa in un breve lasso di tempo.

La legge di Miller è particolarmente importante quando consideriamo il modo in cui organizziamo e raggruppiamo le informazioni, ed è qui che il chunking può tornare utile. Considera la formattazione dei seguenti due numeri di telefono (entrambi lo stesso numero fittizio):

  • 07700984964

  • 07700 984 964

Essendo una stringa di cifre senza spaziatura, un numero di undici cifre è difficile da conservare nella memoria di lavoro per un utente. Aggiungi un po' di spazio, tuttavia, e il compito dei tuoi utenti sarà notevolmente semplificato. Suddividendo le informazioni in blocchi, l'utente può conservare i tre gruppi di numeri nella memoria di lavoro, consentendo loro di completare il proprio compito.

aiutare gli utenti durante l'inserimento del numero e dei dettagli della carta
Quando si inseriscono i dettagli della carta di credito in Gumroad, vengono aggiunti gli spazi, suddividendo le cifre della carta di credito in gruppi di quattro. Questo aiuta gli utenti quando inseriscono il numero della carta e se hanno inserito i dettagli della carta corretti.

La legge di Miller va oltre l'allentamento delle micro-interazioni come questa; può essere utilizzato anche su una scala più macro. Ad esempio, durante la progettazione di moduli, concentrati sulla suddivisione in blocchi delle informazioni in gruppi organizzati logicamente : nome, indirizzo e dettagli di contatto; dettagli dell'account, come nomi utente e password; coordinate bancarie; e altri raggruppamenti.

Possiamo applicare la legge di Miller alla progettazione UX in vari modi:

  • Quando si elencano i numeri di telefono, si raggruppano le informazioni in modo che possano essere conservate facilmente nella memoria di lavoro .

  • Quando si progettano moduli di pagamento che contengono informazioni sulla carta di credito, un numero di carta di credito sarà più facile da analizzare dagli utenti se è suddiviso in quattro blocchi di quattro.

  • Riduci il carico cognitivo limitando il numero di scelte offerte.

Come designer, spesso dobbiamo presentare informazioni complesse. La legge di Miller è utile da tenere a mente in questo contesto. Laddove possibile, cerca gruppi di informazioni che possono essere scomposte e raggruppate, consentendo loro di essere conservati più facilmente nella memoria di lavoro degli utenti.

Look and Feel: comunicare il design visivo

Con una visione a volo d'uccello del flusso del tuo progetto stabilito, è importante iniziare a pensare al suo aspetto, nonché al suo design visivo. Questo è ciò che chiamo "grammatica visiva" ed è l'approccio visivo che adotterai nel tuo progetto.

Con una proliferazione sempre crescente di dispositivi per i quali progettare — orologi, telefoni (da piccoli a grandi), tablet, desktop e altri media — l'idea di sviluppare una grafica perfetta per un singolo pixel è diventata obsoleta.

In risposta a questo panorama mutevole, abbiamo assistito a un movimento verso artefatti di design che si allontanano dalla perfezione dei pixel a favore di catturare il "sapore" di un design. Questi manufatti includono, ad esempio:

  • Tavole d'umore
  • Piastrelle in stile
  • Collage di elementi

Il processo di ognuno è diverso, ma in questa fase del processo utilizzo una combinazione di moodboard e collage di elementi per aiutare a stabilire la direzione: i mood board ti aiutano a entrare nel campo di gioco giusto , i collage di elementi fungono da ponte tra il tuo design visivo e il design dell'interfaccia utente.

Moodboard

Moodboarding, come suggerisce il nome, stabilisce l'atmosfera, aiutandoti a concentrarti su un aspetto particolare che si adatta al tuo obiettivo generale. I mood board sono utili come spunti di conversazione, agendo come un punto focale attorno al quale puoi costruire. Come regola generale, di solito metto insieme da tre a cinque diverse moodboard, ognuna con indicazioni diverse.

Potresti avere in mente un aspetto particolare, ma - come tutti sappiamo, fin troppo bene, ne sono sicuro - la tua opzione preferita potrebbe non corrispondere al punto di vista del tuo cliente. Trovo che aiuti avere alternative e spesso trovare il risultato finale unendo elementi diversi da mood board diversi.

moodboard sul sito web di Tiny Books
Durante lo sviluppo delle mood board per Tiny Books ho adottato sia l'approccio analogico (a sinistra) che quello digitale (a destra). I miei moodboard digitali hanno aiutato a fornire indicazioni a Vic Bell che ha gentilmente sviluppato il marchio del sito.

La conclusione: in questa fase stai presentando un design visivo di alto livello, senza perderti creando design perfetti per i pixel , che sono inutili in un'epoca di dimensioni dello schermo molto diverse. Seguiranno prototipi dettagliati nella fase di wireframing e prototipazione.

Questo punto del processo riguarda lo sviluppo di artefatti di progettazione che possono essere utilizzati per avviare conversazioni. Per guidare quella discussione creativa è utile avere una varietà di moodboard diversi, ognuno con un aspetto diverso.

Quando si mettono insieme le moodboard, è importante considerare sia gli approcci analogici che quelli digitali . Se la tua ispirazione visiva è digitale al 100%, corri il rischio che ciò che io chiamo tutto sembra lo stesso in cui un design è esattamente uguale a un altro. Prendi in considerazione l'idea di guardare oltre lo schermo per trovare ispirazione, usando vecchie riviste indesiderate come ispirazione, fallo e i tuoi progetti si distingueranno.

Collage di elementi

Con il feedback raccolto sulle tue moodboard, è ora di iniziare a sviluppare alcuni componenti di progettazione, applicando la tua direzione visiva ad alcuni elementi tipici dell'interfaccia utente in modo da poterti accontentare di una "grammatica visiva".

Ci sono una serie di strumenti che puoi usare per farlo, inclusi Style Tiles e Element Collages. Entrambi hanno i loro punti di forza, agiscono principalmente come catalizzatori per avvicinarsi a un aspetto finale.

Come dice Samantha Warren, che ha sviluppato la metodologia Style Tiles:

Le Style Tiles sono un catalizzatore per discussioni sulle preferenze e gli obiettivi del cliente.

Questa enfasi - sulla discussione sull'aspetto grafico - è la forza di questi due metodi. Risparmiano una notevole quantità di tempo, eliminando in questa fase la necessità di creare rendering pixel-perfetti a più dimensioni.

Nella mia esperienza, Style Tiles può essere interpretato in modo errato dai clienti che pensano erroneamente di essere modelli visivi. Preferisco un approccio più a mano libera, meno basato su modelli, e quando ho scoperto l'approccio Element Collage di Dan Mall, ne sono rimasto affascinato.

Element Collages di Dan Mall per la lettura è fondamentale
I collage di elementi, come questo di Dan Mall for Reading Is Fundamental, sono utili per catturare una varietà di diversi elementi visivi e avviare una conversazione su una potenziale direzione del design.

In un eccellente post che descrive in dettaglio il suo processo di progettazione su un progetto per La lettura è fondamentale , Mall sottolinea la necessità di sostituire le presentazioni con le conversazioni, coinvolgendo il cliente nel processo. Gli Element Collages sono un modo eccellente per guidare questo approccio conversazionale. Come dice Mall:

Quando parlo di design con i miei clienti, mi piace avere più materiale visivo possibile, per assicurarmi che si parli della stessa cosa. La mia versione di Style Tiles integra il mio amore per il collage per un diverso tipo di esecuzione che chiamo "Collage di elementi". Quella particolare frase crea un'aspettativa che quello che stiamo guardando non sia un progetto finale ma piuttosto un assemblaggio di pezzi disparati senza una logica o un ordine specifico.

La bellezza di Element Collages è che fungono da ponte tra le tue moodboard e i componenti dell'interfaccia utente (di prossima realizzazione). Sono abbastanza flessibili da mostrare ai clienti di stabilire un'idea di ciò che costruiremo . Soprattutto, sono uno strumento utile per aiutarti a ottenere consenso sulla tua grammatica visiva prima di iniziare a sviluppare prototipi più dispendiosi in termini di tempo.

In chiusura

Prima di scendere ai dettagli della progettazione dell'interfaccia utente (UI) e della creazione di prototipi interattivi, è importante mettere in atto il flusso di alto livello del progetto, stabilendo uno scheletro attorno al quale costruire il nostro progetto.

Stabilindo un processo di alto livello per dare il via alla fase di progettazione dei tuoi progetti, puoi lavorare in modo più efficiente per ottenere un quadro chiaro. In questa fase del processo, è importante non perdersi nei dettagli, ma piuttosto concentrarsi sull'applicazione delle ampie pennellate.

È importante ottenere le ampie pennellate prima di approfondire la progettazione dell'interfaccia utente e lo sviluppo di wireframe e prototipi. Concentrati sulla definizione di una chiara direzione di progettazione e di alcuni chiari obiettivi per l'utente , prima di entrare nei dettagli. Resistere all'impulso di concentrarsi sui dettagli senza chiari obiettivi di progettazione consente di risparmiare lavoro sprecato.

In breve, non perderti nei dettagli finché non hai mappato tutto.

Lettura consigliata

Ci sono molte grandi pubblicazioni, offline e online, che ti aiuteranno nella tua avventura. Ne ho inclusi alcuni di seguito per iniziare il tuo viaggio.

  • "Come scrivere storie utente più intelligenti", Joe Natoli
    Se hai già familiarità con le storie degli utenti, ti consiglio di leggere i miglioramenti suggeriti da Natoli alle storie degli utenti, aggiungendo un focus sui vantaggi misurabili, sono una versione interessante.

  • "Storie di utenti", software Mountain Goat
    Questa guida fornisce consigli utili su come suddividere le storie degli utenti in una serie di storie più piccole e collegate e aggiungere "condizioni di soddisfazione", che vale la pena considerare.

  • "Leggi dell'UX", Jon Yablonski
    Un sito eccellente con un'utile raccolta di principi che vale la pena aggiungere ai segnalibri. Non solo è un bel pezzo di design in sé e per sé, ma fornisce anche una buona panoramica di ogni principio accompagnata da collegamenti ad ulteriori letture.

  • "Psicologia e UX", Nielsen Norman Group
    Con una solida base nelle diverse leggi che possono essere applicate nel campo dell'esperienza utente, consiglierei di esplorare anche la psicologia.

  • "Collage di elementi", Dan Mall
    Vale la pena leggerlo se si desidera comprendere come questi strumenti possono essere utilizzati al servizio dei progetti tipici dei clienti.

Questo articolo fa parte della serie di design UX sponsorizzata da Adobe. Adobe XD è realizzato per un processo di progettazione UX veloce e fluido, poiché ti consente di passare dall'idea al prototipo più velocemente. Progetta, prototipa e condividi: tutto in un'unica app. Puoi dare un'occhiata a progetti più stimolanti creati con Adobe XD su Behance e anche iscriverti alla newsletter di Adobe Experience Design per rimanere aggiornato e informato sulle ultime tendenze e approfondimenti per la progettazione UX/UI.