Content-First Prototyping

Il contenuto è la merce principale dell'economia digitale. È l'oro che trasformiamo in un'esperienza di lusso, il diamante che racchiudiamo nei programmi fedeltà e negli upsell. Eppure, come designer, spesso lo colleghiamo dopo il fatto. Prototipiamo la nostra interazione e il design visivo fino all'esaurimento, ma accettiamo che le "parole reali" possano essere inserite in un secondo momento. C'è un modo migliore.

Sempre di più, i beni digitali che creiamo operano all'interno di un sistema dinamico di contenuti, funzionalità, codice e intenti. I nostri prodotti e servizi vanno alla deriva e si riversano nei siti Web dei partner, nei feed dei social media e in una miriade di aggregatori elettronici, tutti cercando di plasmare il comportamento e la comprensione dei visitatori. I sistemi si basano sui sistemi e, in breve tempo, abbiamo messo insieme un colosso la cui ampiezza manda le menti sbalorditive.

Ulteriori letture su SmashingMag:

• Ottimizzazione del design per il test rapido di prototipi
• Scegliere lo strumento di prototipazione giusto
• Prototipazione dei contenuti nel web design reattivo
• Resurrezione di prototipi di interfaccia utente

Anche se in passato siamo stati abbastanza bravi a capire sistemi semplici (pensate ai siti Web statici e alle intranet), si scopre che i grandi sistemi dinamici sono un po' più complicati e un po' meno prevedibili. Man mano che i sistemi crescono, diventano esponenzialmente più complessi e, man mano che aumentano di complessità, il loro comportamento diventa sempre più non lineare e difficile da prevedere per noi, povere scimmie. Nei sistemi di grandi dimensioni, gli errori di arrotondamento al millesimo decimale possono cambiare radicalmente i risultati (Mitchell 33). Mentre Internet si avvicina a un trilione di nodi, questo è il mondo per il quale ora progettiamo tutti.

Quei semplici sistemi a cui siamo abituati , tuttavia, possono fornire una chiave per la progettazione di spazi più complessi. Come afferma il teorico dei sistemi John Gall, "Si scopre invariabilmente che un sistema complesso che funziona si è evoluto da un sistema semplice che funziona". Nello spazio della progettazione digitale, se garantiamo che i nostri più semplici sistemi dinamici di contenuto, struttura e creazione di significato funzionino come previsto a un livello fondamentale, allora possiamo gettare le basi per sistemi più ampi e complessi che funzionino anche come previsto.

Un modo in cui noi designer possiamo tenere in fila le nostre anatre della complessità è portare i nostri contenuti nel processo di prototipazione all'inizio. Un approccio incentrato sui contenuti ci incoraggia ad affrontare i vincoli e le opportunità dei nostri contenuti in anticipo e a testare funzionalmente le nostre soluzioni proposte con utenti affamati di contenuti reali prima che vengano prese importanti decisioni di progettazione.

In questo articolo, ti mostrerò come utilizzare un semplice set di strumenti open source per introdurre contenuti reali e dinamici nel tuo processo di prototipazione sin dal primo giorno. Questo approccio ti consente di concentrarti sul modo in cui gli utenti comprendono i tuoi contenuti fin dall'inizio di un progetto e di costruire successivamente elementi strutturali, visivi e tecnici su quel fondamento di comprensione.

Un modello di scatola bianca per il contenuto

Uno degli strumenti che i ricercatori di sistemi utilizzano per comprendere il comportamento dei sistemi dinamici è chiamato modello "scatola bianca". Lo studioso di sistemi Gerald Weinberg scrive che, mentre il comportamento di un modello di scatola nera è "perfettamente nascosto", il comportamento di un modello di scatola bianca è "perfettamente rivelato". Per i sistemi complessi, questa trasparenza è importante: Weinberg osserva inoltre che “anche i sistemi più semplici a volte contengono sorprese per i loro costruttori” (172).

L'obiettivo della prototipazione content-first è creare un modello white box per il nostro contenuto, la sua struttura interna e la sua architettura dell'informazione di supporto. Questo ci consentirà di scoprire all'inizio del processo di progettazione come i nostri utenti finali traggono significato dal contenuto strutturato offerto dai nostri sistemi digitali. Prendendoci il tempo necessario per ottenere la struttura dei nostri sistemi di contenuti corretta al loro interno, abbiamo posto le basi per questi semplici sistemi che funzionano per essere integrati in sistemi più grandi e complessi che funzionano.

Per creare una scatola bianca per i contenuti digitali, dobbiamo tenere conto di tre cose:

• il contenuto stesso , composto da pacchetti di contenuti con vari livelli di granularità, a seconda del tipo e dello scopo del contenuto;
• struttura , sia a livello di pagina o schermo locale che a livello di sito Web o applicazione globale;
• coinvolgimento dell'utente nel contesto e nella posizione (desktop, tablet o telefono) in cui i nostri contenuti verranno infine consumati.

Per rimanere "perfettamente visibile", questo modello deve anche essere trasparente nella sua funzionalità in modo che i membri del team di progettazione possano capire perché il modello si comporta in quel modo. Quest'ultimo elemento - la trasparenza, in combinazione con il coinvolgimento dell'utente - è fondamentale per il modello della scatola bianca: non stiamo costruendo un prototipo semplicemente per dimostrare la funzionalità, ma piuttosto per imparare, rivedere e perfezionare la nostra struttura di contenuto sottostante in base a come le parole e struttura che utilizziamo sono interpretati dal pubblico a cui sono destinati.

Un approccio di prototipazione incentrato sul contenuto è utile quando si progetta per contenuto esistente, ma è anche un buon modo per coinvolgere un team editoriale nel processo di creazione del contenuto. Ottenere parole, immagini e risorse reali davanti agli utenti all'inizio del progetto consente a tutti di tempo per perfezionare, regolare o ruotare per raggiungere gli obiettivi del progetto. Se il tuo piano di progetto prevede di seguire una strategia "fill-in-the-words-later", la prototipazione content-first ti dà la possibilità di ottenere alcune variazioni di contenuto di fronte agli utenti e quindi ottenere le reazioni degli utenti di fronte alle parti interessate.

Un framework di prototipazione per il primo contenuto

Prendendo i principi e gli obiettivi sopra descritti, ho messo insieme una struttura di partenza per creare questo tipo di prototipo. Molto nello spirito del pensiero sistemico stesso, questo strumento si basa su un accoppiamento libero di sistemi più semplici che ciascuno esegue bene un semplice compito primario.

Per questo framework, ho assemblato Excel, Jekyll, ZURB Foundation e Browsersync e li ho collegati tutti insieme con uno script Gulp. Ho scelto queste particolari applicazioni e framework perché sono ampiamente disponibili, sono open source (per lo più), hanno comunità di supporto attive e hanno un'eccellente documentazione.

Puoi scaricare una copia del progetto di esempio discusso di seguito e uno starter kit del framework per la prototipazione del contenuto dalla pagina del progetto su GitHub. Esaminiamo come i pezzi si incastrano e cosa fa ciascuno di essi.

Eccellere

Excel, o qualsiasi programma per fogli di calcolo che salva nel formato XLSX, viene utilizzato per creare e modificare contenuti strutturati e sistemi di categorizzazione. Ogni volta che salvi il documento, ogni pacchetto nel tuo set di contenuti (rappresentato da una riga nel foglio di calcolo) viene esportato sia come pagina Jekyll che come documento JSON. Ciò ti consente di eseguire sia la pagina che le operazioni globali sul tuo contenuto e di propagare le modifiche al contenuto all'intero sito Web con un unico comando "salva".

Jekyll

Jekyll è un generatore di siti Web statici open source e viene utilizzato per articolare la struttura dinamica tra pacchetti di contenuti, pagine e categorie. Jekyll rappresenta il contenuto che salvi nel foglio di calcolo come variabili e ti consente di eseguire operazioni su tali variabili per creare la struttura. Jekyll fornisce anche tag "if/then" per applicare la logica condizionale e cicli for per scorrere e filtrare i set di contenuti.

Fondazione

ZURB Foundation, un framework front-end mobile first open source, viene utilizzato per articolare la gerarchia delle informazioni e per strutturare comportamenti reattivi. Le griglie, le definizioni di stile e i comportamenti reattivi di Foundation ti consentono di creare praticamente qualsiasi modello di layout Web standard semplicemente applicando classi ai tuoi elementi HTML.

Sincronizzazione del browser

Infine, Browsersync fornisce il tuo prototipo al browser e aggiorna CSS e pagine mentre apporti modifiche. Browsersync consente inoltre di accedere al prototipo da qualsiasi dispositivo connesso alla stessa rete. Ciò significa che puoi visualizzare gli aggiornamenti automatici su un telefono e tablet mentre apporti modifiche su un laptop.

Collegati tra loro, questi strumenti ti permettono di costruire prototipi in un ambiente simile ai sistemi dinamici che andranno a comporre il tuo eventuale ambiente di produzione, ma senza dover subire i database, i servizi cloud e la latenza di rete che ti rallenterebbero quando devi spostarti rapidamente per provare le idee.

Se sei nel panico perché questo coinvolge il codice...

Niente panico. Questi strumenti sono facili da progettare e hanno eccellenti comunità di supporto. Non è necessario essere uno sviluppatore front-end per dare vita alle tue idee. Devi conoscere le basi di HTML e CSS. Queste lingue non sono difficili e impararle non distruggerà la tua capacità di fare un buon lavoro di progettazione. Nelle parole della leggenda del design dei tipi Erik Spiekermann, “Devi imparare se non a programmare almeno per apprezzare il codice, per capire il codice. Perché il codice è ciò che dadi e bulloni erano cento anni fa. Il modo migliore per iniziare è tuffarsi.

Un esempio di prototipazione per il primo contenuto: il Green Lake Community Center

Per avere un'idea migliore dell'aspetto della prototipazione content-first in azione, prendiamo una raccolta di contenuti digitali dal mondo reale.

Ecco lo scenario. Il Green Lake Community Center offre lezioni, programmi ed eventi ai membri della comunità nel quartiere di Green Lake. Sfortunatamente, tutte le informazioni attuali su classi, programmi ed eventi sono disponibili online solo tramite PDF, che a sua volta è disponibile solo dal sito Web ottimizzato per desktop a larghezza fissa del centro. Ecco:

Nel tentativo di raggiungere i membri della comunità che cercano sempre più di accedere alle informazioni su classi, programmi ed eventi tramite i loro telefoni cellulari, il centro ha deciso di lanciare un sito Web di programmi mobile first. Questa iniziativa alla fine servirà da catalizzatore per un sito Web reattivo a livello cittadino per parchi e attività ricreative.

Come qualsiasi altro progetto di design, inizierò con l'analisi euristica e competitiva e osservando il traffico disponibile e i dati degli utenti. Se le parti interessate e gli utenti finali sono disponibili, parlerò anche con loro. Una volta che sentirò di avere un buon senso dello scopo del sito Web, esplorerò su carta alcune architetture dell'informazione di alto livello e idee per l'interfaccia utente di base.

Quando inizia a prendere forma un approccio progettuale iniziale, posso utilizzare un flusso di lavoro di prototipazione incentrato sul contenuto per trasferire le mie idee iniziali e, cosa più importante, il contenuto che tali idee dovrebbero servire nel contesto in cui verranno infine consumate. in questo caso, il browser. Esaminiamo in dettaglio come appare questo processo.

Cattura contenuto

In questo esempio, puoi vedere come il contenuto strutturato che acquisisco in un foglio di calcolo del framework di prototipazione content-first viene automaticamente scritto in un modello di pagina ogni volta che salvo il mio file _data . Qui ho usato il foglio “catalogo” per strutturare il contenuto. Le variabili "Titolo", "descrizione", "categoria" e "tag" sono già incluse nel modello di pagina, quindi tali valori vengono aggiornati immediatamente. Puoi aggiungere tutte le altre colonne che desideri a una riga di contenuto: assicurati solo di includere la variabile corrispondente nel modello (ulteriori informazioni di seguito).

Anche i fogli "Directory" e "feed" sono inclusi nello starter kit e includono diverse categorie (colonne) per i rispettivi tipi di contenuto. Ogni foglio esporta il contenuto nella propria cartella (in questi casi, "catalogo", "directory" e "feed") e nel proprio file JSON. Puoi aggiungere tutti gli altri fogli di cui hai bisogno: assicurati solo di aggiornare il file di configurazione di Jekyll in modo che sappia inserirli (consulta la documentazione del plug-in "Generatore di pagine di dati Jekyll" per tutti i dettagli).

Aggiungi più pacchetti di contenuti

Quando aggiungo pacchetti di contenuti (righe nel foglio di calcolo), nuove pagine vengono automaticamente aggiunte al prototipo. Ogni riga rappresenta una singola pagina e ogni colonna in quella riga rappresenta una variabile che Jekyll sta compilando nel modello mentre costruisce una pagina. In questo esempio, il contenuto del catalogo "Community Center" è abbastanza uniforme, ma se le descrizioni degli articoli variavano notevolmente in lunghezza, potresti facilmente vedere (e sperimentare) come tale variazione influenzerebbe il layout della pagina. Forse potresti quindi decidere di suddividere il contenuto in modo diverso o aggiungere nuovi elementi, come riepiloghi o slug.

Questo sistema ti consente anche di sperimentare facilmente con etichette, categorie e tag. Modificando i valori nella colonna "categoria", puoi verificare in che modo diversi approcci architetturali influiscono sulla capacità dell'utente di trovare facilmente un determinato contenuto. In questo esempio, ad esempio, ho creato sistemi organizzativi basati sul tipo di classe e sulla fascia di età di un partecipante. Questo mi permette di testare facilmente diversi approcci di navigazione nel menu e nella home page man mano che il prototipo prende forma.

Aggiungi struttura e gerarchia con HTML

Una volta che sarò soddisfatto del contenuto, inizierò a avvolgere quel contenuto nel markup in modo che la sua struttura abbia un senso per gli utenti. Tratta le variabili qui come testo e contrassegnale come contrassegneresti il ​​testo in un file HTML "piatto". I risultati qui dovrebbero sembrare abbastanza prevedibili (questa è una buona cosa).

Il sistema di creazione di modelli di Jekyll prenderà i modelli di pagina che hai creato e li avvolgerà con un modello globale contenente l'intestazione e l'icona di navigazione. Questo è ciò che significa "layout: default": chiamiamo il modello "predefinito" come wrapper di questo modello. Puoi annidare i modelli con la profondità che desideri, sebbene in genere non siano necessari più di uno o due livelli di modelli. Per accogliere elementi ripetuti, come elenchi di pagine e collegamenti globali, puoi anche utilizzare "include", che inseriscono un particolare pezzo di codice nel modello quando il sito Web viene visualizzato. Consulta la documentazione ufficiale di Jekyll per ulteriori informazioni su modelli e include.

Aggiungi logica con i tag di markup di Jekyll

Jekyll ti consente di aggiungere la logica di base includendo tag di base specifici per il suo sistema di modelli. Qui, utilizzo un tag for per scorrere l'elenco di classi del Green Lake Community Center (che è stato creato quando ho aggiunto i pacchetti di contenuti multipli sopra) e visualizzo ogni classe del centro comunitario nell'elenco come collegamento:

Puoi anche utilizzare le istruzioni if ​​per creare condizioni. Qui, sto usando un'istruzione if per nascondere il collegamento alla pagina della classe in cui mi trovo attualmente:

Se la tua testa è appena esplosa, non farti prendere dal panico. L'aggiunta di logica è una sorta di funzionalità avanzata. Il tuo prototipo funzionerà perfettamente se ti attieni alle variabili di contenuto e all'HTML. Il sistema di creazione di modelli di Jekyll, tuttavia, è molto leggibile dall'uomo e facile da acquisire. Dai un'occhiata alla rapida introduzione dei suoi creatori su come funzionano i pezzi di base.

Aggiungi stile e comportamento reattivo con i CSS di Foundation

Una volta che una prima bozza della struttura HTML è a posto, posso aggiungere stile al prototipo semplicemente includendo classi CSS e salvando il documento. Il framework front-end di ZURB Foundation, che è già collegato nello starter kit, fornisce classi di stile per un'ampia gamma di modelli di applicazioni Web e nativi. Nell'esempio mostrato qui, semplicemente inserendo due classi diverse, ho dato al mio prototipo mobile una sensazione più "toccabile" e ho introdotto un senso molto più chiaro della gerarchia visiva. Queste modifiche si propagano automaticamente a tutto il contenuto che utilizza questo modello.

Foundation semplifica inoltre l'inclusione di un comportamento reattivo mobile first e l'utilizzo di dozzine di layout, container e componenti multimediali predefiniti. Poiché è tutto CSS, puoi modificare e mettere a punto tutto secondo i tuoi gusti. Per questi esempi, ho modificato la tavolozza dei colori di base di Foundation in uno stile "wireframe monocromatico", ma puoi adattare Foundation a qualsiasi stile tu voglia. Scopri di più sull'uso di Foundation sfogliando la documentazione o i tutorial o frequentando un corso (tra l'altro, i corsi sono eccellenti).

Ricevi feedback in anticipo e rivedi man mano che procedi

Una volta che il contenuto è a posto, creare e testare più varianti della struttura è facile. Etichette, categorie, parole chiave e altri metadati possono essere modificati direttamente nel foglio di calcolo del contenuto. Allo stesso modo, le variazioni alla struttura della pagina, al flusso e alla visualizzazione sono solo una questione di creare versioni alternative dei tuoi modelli Jekyll. Tutte queste modifiche si riverseranno istantaneamente sul prototipo nel momento in cui premi "Salva".

Per completare una prima versione del prototipo del Green Lake Community Center, ho creato tre varianti della home page mobile. In questo caso, tutto ciò che dovevo fare era riorganizzare gli elementi nel modello della home page e scambiare le origini dati per i due elementi di navigazione (ad esempio i pulsanti a larghezza intera e i riquadri dell'immagine).

Anche se ho presentato tutti questi passaggi in sequenza, tieni presente che Gulp (il task runner JavaScript che collega insieme tutti i nostri sistemi semplici) aggiorna le modifiche ogni volta che salvi un documento. Ciò significa che puoi tornare a qualsiasi passaggio in qualsiasi momento e apportare modifiche in base alla risposta degli utenti, al feedback degli stakeholder o a nuove scoperte sul contenuto o sul contesto.

Questa flessibilità ti consente di testare facilmente diverse gerarchie di schermate e trattamenti dei contenuti con gli utenti e ti consente di utilizzare contenuti reali in quei test, contenuti che il tuo pubblico può sperimentare (e a cui reagire) in prima persona. Poiché la forma finale del prototipo è HTML, CSS e JavaScript, puoi raccogliere il feedback degli utenti con qualsiasi strumento di test ti trovi più a tuo agio (mi piace UserTesting e Lookback).

Il formato del prototipo di HTML, CSS e JavaScript significa anche che il tuo lavoro informerà più prontamente gli sforzi paralleli e successivi. Se il tuo prodotto finale sarà costruito su una piattaforma CMS esistente, ad esempio, i requisiti di contenuto, struttura e visualizzazione che sei in grado di articolare ti aiuteranno a valutare le opzioni CMS. Allo stesso modo, il tuo prototipo può fungere da documento di specifiche per le decisioni di progettazione che coinvolgono la griglia, la gerarchia, le intestazioni, il comportamento dei collegamenti e i caratteri per i tuoi sviluppatori front-end.

Non dimenticare, tuttavia, che l'obiettivo della prototipazione del contenuto non è semplicemente quello di progettare nel browser: l'obiettivo è utilizzare il browser e il feedback dei tuoi utenti per ottimizzare l'organizzazione dei tuoi contenuti al fine di creare semplici strutture che funzionano bene.

Il punto di forza di questo metodo sta nel permetterti di modificare rapidamente i sistemi creati dalle tue categorie, etichette e percorsi di navigazione. Ciò fornisce un netto vantaggio rispetto alla modellazione del contenuto statico. Se scopri che stai usando molti CSS extra per far funzionare i tuoi contenuti dinamici nel modo desiderato, torna alla fonte. Puoi suddividere il contenuto in modo diverso per farlo funzionare meglio? Aggiungere (o rimuovere) un insieme di classi o tag? Prova diverse varianti fino a trovare la soluzione semplice ed elegante che fa sembrare tutto il resto a posto.

Il pensiero sistemico oltre il Web

L'esempio di base mostrato qui illustra come un approccio di prototipazione incentrato sul contenuto può aiutarci a creare sistemi di contenuti semplici che funzionano, sistemi che, a loro volta, preparano il terreno per sistemi più grandi e complessi che funzionano. La prototipazione content-first ci aiuta a scoprire luoghi in cui piccoli aggiustamenti nel modello di contenuto, nella gerarchia, nelle categorie e nelle etichette possono portare a soluzioni più pulite ed eleganti per le esigenze di informazione dei nostri utenti.

Sebbene questo strumento sia basato su tecnologie web, il modo in cui strutturiamo i contenuti per la comprensione trascende i singoli strumenti, tecnologie e piattaforme. Se il tuo contenuto nella sua forma più elementare, spogliato dei requisiti e dei vincoli di particolari implementazioni, ha senso per il suo pubblico e raggiunge i tuoi obiettivi di comunicazione in modi semplici ed eleganti, allora hai già costruito una base che va oltre le singole implementazioni tecnologiche. Hai creato contenuti che non necessitano di una piattaforma o di uno script particolare per avere un senso; è un insieme di contenuti che vuole essere compreso in un certo modo.

Quando mettiamo il contenuto al centro del processo di progettazione, iniziamo a risolvere non per una particolare implementazione, ma per la comprensione. Tutto il resto è un passaggio intermedio. Riconoscendo che la piattaforma finale per la quale progettiamo è la mente umana, possiamo identificare le strutture semplici che danno origine alla comprensione e possono lavorare per rafforzare quelle strutture durante l'intero processo di progettazione.

Lavori citati

• Complessità, una visita guidata , Melanie Mitchell (New York: Oxford, 2009)
• Un'introduzione al pensiero sistemico generale , Gerald Weinberg (New York: Dorset House, 1975)