Progettazione di blocchi predefiniti: una strategia di progettazione modulare per gli UXer

Un articolo che aiuta a colmare le lacune dei modelli modulari dal punto di vista UX.

Inizierò con una storia

Se odi le storie, dovresti saltare questa parte. Si tratta di un designer UX che ha avuto il compito di sostenere una strategia di progettazione modulare per la sua organizzazione. Ha i capelli castani corti e gli occhi azzurri. Se non hai ancora indovinato, quel designer UX sono io.

Circa otto mesi fa, il nostro team si è concentrato su una strategia di progettazione modulare chiamata UX orientata agli oggetti (OOUX). A differenza di altri sistemi modulari di ampia portata, OOUX ti chiede di concentrarti sulla modularizzazione dei tipi di contenuti principali - ciò che OOUX chiama oggetti - e di dare un'occhiata al modo in cui questi oggetti si relazionano tra loro. Questo processo aiuta il team di progettazione a esporre istanze intrinseche di navigazione contestuale e a spingere verso moduli UI coerenti.

Bene ... è fantastico per la progettazione di architetture informatiche e librerie di modelli, ma per quanto riguarda la progettazione di esperienze. Dopotutto, mobilitare i tuoi contenuti è solo metà della battaglia. Se stai per essere in prima linea in UX, devi chiederti perché e come.

Il perché e il come

Potresti dire a te stesso: "non dirmi perché e come! Sono un ricercatore UX, dang nabbit! Mangio perché e come per colazione. ”Quindi, lasciami spiegare.

Non sto parlando di strategia a livello di funzionalità. Non sto parlando di flussi di processo, wireframe e prototipi. Sto parlando di una strategia a livello di applicazione. Sai, la cosa che dovremmo sempre fare, ma in qualche modo non hai mai tempo? E sto parlando di renderlo parte integrante del nostro approccio alle nostre altre strategie, come il design modulare.

Per darti un po 'più di contesto, parliamo di un esempio. Supponiamo che stiamo progettando un'app di appuntamenti in cui uno dei contenuti principali è un profilo. Con la progettazione modulare, chiediamo: "dove potrebbero essere visualizzati questi contenuti nell'interfaccia utente?" - e sulla base della nostra risposta, progetteremmo moduli per ciascuno di quegli scenari. Forse progettiamo un profilo che può essere visualizzato in un elenco o un profilo che occupa l'intero display. Informazione architettura. Patterns. Controlla, controlla.

Uno stile

Ma ora che abbiamo deciso cosa, cosa succede quando inevitabilmente ci rendiamo conto che dobbiamo pensare al perché qualcuno vuole vedere un particolare profilo in primo luogo? E come apparirebbe quel profilo per quella persona? Attuiamo queste strategie dopo il fatto e speriamo che nulla si rompa?

Spero che tu stia scuotendo la testa là fuori, perché la risposta è un clamoroso no.

Invece di saltare prima nella progettazione dei nostri moduli, dovremmo costruire un quadro strategico che possa aiutare a guidare i nostri sforzi di progettazione da ogni angolo. Invece di definire il volto del nostro contenuto - le cose che compaiono nell'interfaccia utente - dovremmo iniziare definendo come e perché supportano quel contenuto. Questo si chiama design dei blocchi.

Inserisci il design del blocco predefinito

Invece di chiederti di pensare prima al contenuto dei tuoi moduli, come altri modelli, la progettazione di blocchi predefiniti ti chiede di concentrarti invece sulla strategia dietro quel contenuto.

Nella progettazione di blocchi predefiniti, lascia che la strategia fornisca il quadro per la progettazione; Non il contrario.

Solo dopo aver definito le tue strategie UX fondamentali - il frame che regge i tuoi contenuti - puoi iniziare a progettare come tali contenuti saranno rappresentati nell'interfaccia. La strategia di "quadro generale" per ogni contenuto di base è il tuo mattone. Insieme, i blocchi costitutivi definiscono la UX del tuo prodotto.

Il design dei blocchi predefiniti è un design modulare per gli UXer.

Anatomia elementare

Per comprendere meglio questo approccio alla creazione di contenuti significativi e strutturati, torniamo all'esempio dell'app di appuntamenti. Ora che ho identificato un contenuto di base nella mia applicazione - un profilo - è tempo di esaminare e identificare quali strategie potrebbero influenzare potenzialmente il modo in cui questo blocco è progettato. Esplorando la relazione tra altre iniziative strategiche e i nostri contenuti, siamo in grado di pensare in modo più critico al modo in cui affrontiamo la progettazione e la consegna di queste informazioni.

L'anatomia del blocco di profilo sta iniziando a prendere forma.

Quando si esplorano le relazioni tra strategie a livello di applicazione, è meglio iniziare a un livello elevato e scendere fino in fondo. Ad esempio, se ho identificato le persone come componente principale della mia strategia, potrei suddividere ulteriormente questa strategia identificando:

  • le persone specifiche che interagiscono con i profili;
  • dove nell'app stanno interagendo con questo contenuto;
  • il loro contesto di utilizzo;
  • le azioni principali che intraprendono sui profili;
  • e con quale frequenza accedono a questo contenuto.

Potrebbe assomigliare a questo:

La relazione persona-profilo fornisce più contesto per l'aspetto e l'aspetto del volto del mio blocco di profili.

Una volta che ho dato un po 'più di contesto al perché questo contenuto è prezioso per un tipo specifico di utente, posso iniziare a pensare in modo più critico a quali azioni devono essere assegnate le priorità, come il modulo dovrebbe essere strutturato per promuovere modelli di comportamento specifici della persona, e dove nell'esperienza questo contenuto deve essere consegnato.

Questa tecnica consente ai progettisti di concentrarsi sulle cose che contano e di non lasciarsi sorprendere dall'attrattiva visiva, dalla seduzione dell'interazione e da altri schemi di progettazione dell'interfaccia che sembrano buoni, ma non supportano il comportamento reale dell'utente.

Se ripeto questo esercizio in termini di una seconda iniziativa strategica, otterremo ulteriori approfondimenti. A seconda del numero e della complessità delle iniziative strategiche in atto, questo può rapidamente diventare un processo che richiede molto tempo. Consiglio di iniziare con non più di due strategie.

Così il gioco è fatto. Un esempio di come bagnare i piedi con il design a blocchi. Se ritieni che questo sarebbe un esercizio utile per il tuo team di progettazione, consulta la Guida rapida di seguito per ulteriori suggerimenti. E, naturalmente, mi piacerebbe sentire i tuoi pensieri su tutte le cose modularizzate. Aggiungi i tuoi commenti qui sotto o contatta su LinkedIn.

Guida Rapida

Ho scoperto che molti modelli di design modulari là fuori falliscono nel dare ai loro lettori cose da fare, quindi lasciatemi fare un punto per fornire quel prezioso pezzo di informazione:

Passaggio n. 1: inventario della strategia.

Facciamo inventari di contenuti e componenti, quindi perché non un inventario di strategia? Fai un elenco di tutte le strategie a livello di applicazione che hai in atto. Gli esempi includono: Personas, dati, contesto di utilizzo e progettazione dell'ambiente umano, reattività, ecc. Questa è una buona opportunità per mettere in pausa e chiedere "abbiamo una solida strategia in atto per la nostra applicazione?" Se la risposta è no, è tempo andare a lavoro.

Per fare: radunare i membri del team per creare autonomamente i propri inventari di strategia.

Passaggio 2: definire il contenuto principale.

Queste sono le cose su cui gli utenti eseguono azioni nella tua applicazione. Per capirlo, blocca un po 'di tempo per una sessione di brainstorming con la tua squadra. Ponetevi domande come: "cosa cercano i miei utenti? Vista? Download? ”Una volta identificato un pezzo di contenuto principale, scriverlo su un pezzo di carta e appenderlo a una parete.

Per fare: tenere una sessione di brainstorming iniziale con il proprio team.

Passaggio n. 3: definire come e perché.

Ora che hai identificato le tue strategie a livello di applicazione e i contenuti principali, è tempo di riunire le due cose! Torna nella tua stanza di brainstorming per una riunione di follow-up e assicurati che il tuo team porti i loro inventari di strategia. Per questa parte del processo, fai in modo che il tuo team inserisca le note di post-it della strategia su qualsiasi contenuto principale in cui tale strategia potrebbe avere un impatto.

Per fare: tenere una sessione di brainstorming di follow-up con il proprio team.

Step # 4: l'anatomia di un blocco.

È tempo di dividere e conquistare. Assegnare ai membri del team una manciata di tipi di contenuto di base - o blocchi - e farli scorrere sull'anatomia di questo contenuto.

Per fare: assegnare a ciascun membro del team diversi tipi di contenuto. Quel membro del team dovrebbe definire l'anatomia di quel contenuto.

Passaggio n. 5: allinea, allinea, allinea

Come ultimo passo, riunisci la banda sotto forma di una presentazione scura in cui ogni membro del team presenta l'anatomia dei loro blocchi. Risparmia tempo alla fine per domande, allineamento e decisioni sui passi successivi per guidare i singoli componenti strategici di ogni blocco.

Per fare: programmare un orario per i membri del team per presentare la loro anatomia dei blocchi.

Questo articolo è offerto da RUXERS. RUXERS è una community di leader di esperienze utente reali che condividono e discutono le ultime novità in termini di design, esperienza utente, usabilità e ricerca. Siamo su Twitter - unisciti a noi!