Conținut-primul prototip

Conținutul este marfa de bază a economiei digitale. Este aurul pe care îl transformăm în experiență de lux, diamantul pe care îl includem în programele de loialitate și vânzări suplimentare. Cu toate acestea, în calitate de designeri, adesea îl conectăm după fapt. Ne prototipăm până la epuizare interacțiunea și designul vizual, dar acceptăm că „cuvintele adevărate” pot fi introduse mai târziu. Există o cale mai bună.

Din ce în ce mai mult, bunurile digitale pe care le creăm operează într-un sistem dinamic de conținut, funcționalitate, cod și intenție. Produsele și serviciile noastre se răspândesc și se răspândesc în site-urile web partenere, fluxurile de rețele sociale și nenumăratele agregatoare electronice, toate încercând să modeleze comportamentul și înțelegerea vizitatorilor. Sistemele se bazează pe sisteme și, pe scurt, am împletit un colos a cărui amploare dă mințile uluitor.

Citiți suplimentare despre SmashingMag:

• Optimizarea designului dvs. pentru testarea rapidă a prototipurilor
• Alegerea instrumentului de prototipare potrivit
• Prototiparea conținutului în design web responsiv
• Reînvierea prototipurilor interfeței cu utilizatorul

Deși am fost destul de buni în a descoperi sisteme simple în trecut (gândiți-vă la site-uri web statice și intranet-uri), se dovedește că sistemele dinamice mari sunt ceva mai complicate - și mai puțin previzibile. Pe măsură ce sistemele cresc, ele devin exponențial mai complexe și, pe măsură ce cresc în complexitate, comportamentul lor devine din ce în ce mai neliniar și greu de anticipat pentru noi, bietele maimuțe. În sistemele mari, erorile de rotunjire la a miilea zecimală pot schimba radical rezultatele (Mitchell 33). Pe măsură ce Internetul se apropie de un trilion de noduri, aceasta este lumea pentru care proiectăm cu toții acum.

Acele sisteme simple cu care suntem obișnuiți , totuși, pot oferi o cheie pentru proiectarea pentru spații mai complexe. După cum spune teoreticianul sistemelor John Gall, „Un sistem complex care funcționează se constată invariabil că a evoluat dintr-un sistem simplu care funcționează”. În spațiul designului digital, dacă ne asigurăm că cele mai simple sisteme dinamice ale noastre de conținut, structură și semnificație funcționează așa cum s-a intenționat la un nivel fundamental, atunci putem pune bazele pentru sisteme mai mari, mai complexe, care funcționează, de asemenea, așa cum este prevăzut.

O modalitate prin care noi, în calitate de designeri, ne putem menține rațele de complexitate la rând este să ne aducem conținutul în procesul de prototipare de la început. O abordare bazată pe conținut ne încurajează să ne confruntăm mai devreme cu constrângerile și oportunitățile conținutului nostru și să testăm funcțional soluțiile noastre propuse cu utilizatorii arătați de conținut real înainte de a fi luate decizii majore de proiectare.

În acest articol, vă voi arăta cum să utilizați un set simplu de instrumente open-source pentru a introduce conținut real și dinamic în procesul dvs. de prototipare din prima zi. Această abordare vă permite să vă concentrați asupra modului în care utilizatorii vă înțeleg conținutul încă de la începutul unui proiect și, ulterior, să construiți elemente structurale, vizuale și tehnice pe baza acelei baze de înțelegere.

Un model de cutie albă pentru conținut

Unul dintre instrumentele pe care cercetătorii de sisteme le folosesc pentru a înțelege comportamentul sistemelor dinamice este numit model „cutie albă”. Savantul în sisteme Gerald Weinberg scrie că, în timp ce comportamentul unui model cutie neagră este „perfect ascuns”, comportamentul unui model cutie albă este „perfect dezvăluit”. Pentru sistemele complexe, această transparență este importantă: Weinberg notează în continuare că „chiar și cele mai simple sisteme conțin uneori surprize pentru constructorii lor” (172).

Scopul prototipării în primul rând al conținutului este de a crea un model de cutie albă pentru conținutul nostru, structura sa internă și arhitectura de informații de sprijin. Acest lucru ne va permite să descoperim la începutul procesului de proiectare modul în care utilizatorii noștri finali își construiesc sens din conținutul structurat pe care îl oferă sistemele noastre digitale. Făcându-ne timp pentru ca structura sistemelor noastre de conținut să fie corectă la bază, am pregătit scena pentru ca aceste sisteme simple care funcționează să fie integrate în sisteme mai mari și mai complexe care funcționează.

Pentru a crea o cutie albă pentru conținut digital, trebuie să luăm în considerare trei lucruri:

• conținutul în sine , compus din pachete de conținut cu diferite niveluri de granularitate, în funcție de tipul și scopul conținutului;
• structura , atât la nivel local de pagină sau de ecran, cât și la nivel global de site web sau aplicație;
• implicarea utilizatorilor în contextul și postura (desktop, tabletă sau telefon) în care conținutul nostru va fi în cele din urmă consumat.

Pentru a rămâne „perfect vizibil”, acest model trebuie, de asemenea, să fie transparent în funcționalitatea sa, astfel încât membrii echipei de proiectare să poată înțelege de ce modelul se comportă așa cum se comportă. Această ultimă piesă — transparența, în combinație cu implicarea utilizatorilor — este crucială pentru modelul cutiei albe: nu construim un prototip pur și simplu pentru a demonstra funcționalitatea, ci mai degrabă pentru a învăța, revizui și rafina structura noastră de conținut bazată pe modul în care cuvintele și structura pe care o folosim sunt interpretate de publicul vizat.

O abordare de prototipare a conținutului este utilă atunci când proiectați conținut existent, dar este și o modalitate bună de a implica o echipă editorială în procesul de creare a conținutului. Obținerea de cuvinte, imagini și materiale reale în fața utilizatorilor la începutul proiectului permite tuturor timp să ajusteze, să ajusteze sau să pivoteze pentru a îndeplini obiectivele proiectului. Dacă planul dvs. de proiect este să urmați o strategie de completare a cuvintelor mai târziu, prototipul de conținut mai întâi vă oferă șansa de a obține câteva variații de conținut în fața utilizatorilor - și apoi de a obține reacțiile utilizatorilor în fața părților interesate.

Un cadru de prototipare a conținutului în primul rând

Luând principiile și obiectivele descrise mai sus, am creat un cadru de pornire pentru crearea acestui tip de prototip. În spiritul gândirii sistemelor în sine, acest instrument se bazează pe o cuplare liberă de sisteme mai simple, care îndeplinesc fiecare bine o sarcină principală simplă.

Pentru acest cadru, am asamblat Excel, Jekyll, ZURB Foundation și Browsersync și le-am legat pe toate împreună cu un script Gulp. Am ales aceste aplicații și cadre particulare pentru că sunt disponibile pe scară largă, sunt open source (în mare parte), au comunități de suport active și au o documentație excelentă.

Puteți descărca o copie a exemplului de proiect discutat mai jos și un kit de pornire a cadrului de prototipare a conținutului, de pe pagina proiectului de pe GitHub. Să vedem cum se potrivesc piesele și ce face fiecare dintre ele.

excela

Excel - sau orice program de foi de calcul care salvează în formatul XLSX - este utilizat pentru a crea și edita conținut structurat și sisteme de clasificare. De fiecare dată când salvați documentul, fiecare pachet din setul de conținut (reprezentat printr-un rând în foaia de calcul) este exportat atât ca pagină Jekyll, cât și ca document JSON. Acest lucru vă permite să executați atât operațiuni de pagină, cât și operațiuni globale asupra conținutului dvs. și să propagați modificările de conținut pe întregul site web cu o singură comandă de „salvare”.

Jekyll

Jekyll este un generator de site-uri web static open-source și este folosit pentru a articula structura dinamică între pachete de conținut, pagini și categorii. Jekyll reprezintă conținutul pe care îl salvați în foaia de calcul ca variabile și vă permite să efectuați operații asupra acelor variabile pentru a crea structura. Jekyll oferă, de asemenea, etichete „dacă/atunci” pentru aplicarea logicii condiționate și for bucle pentru parcurgerea și filtrarea seturilor de conținut.

fundație

Fundația ZURB, un cadru front-end open-source pentru mobil, este folosit pentru a articula ierarhia informațiilor și pentru a structura comportamente receptive. Grilele, definițiile de stil și comportamentele receptive ale Fundației vă permit să creați aproape orice model standard de aspect web prin simpla aplicare a claselor elementelor dvs. HTML.

Sincronizare browser

În cele din urmă, Browsersync oferă prototipul tău browserului și actualizează CSS și paginile pe măsură ce faci modificări. Browsersync vă permite, de asemenea, să accesați prototipul de pe orice dispozitiv conectat la aceeași rețea. Aceasta înseamnă că puteți vedea actualizările automate pe un telefon și pe tabletă pe măsură ce faceți modificări pe un laptop.

Legate între ele, aceste instrumente vă permit să construiți prototipuri într-un mediu similar cu sistemele dinamice care vor alcătui eventualul dumneavoastră mediu de producție, dar fără a fi nevoit să suferiți bazele de date, serviciile cloud și latența rețelei care v-ar încetini atunci când trebuie să vă mutați. repede pentru a încerca idei.

Dacă intrați în panică pentru că acest lucru implică cod...

Nu intrați în panică. Aceste instrumente sunt prietenoase cu designerul și au comunități excelente de asistență. Nu trebuie să fii un dezvoltator front-end pentru a-ți da viață ideilor. Trebuie să cunoașteți elementele de bază ale HTML și CSS. Aceste limbi nu sunt dificile – iar învățarea lor nu vă va distruge capacitatea de a face o muncă bună de proiectare. În cuvintele legendei de design de tip Erik Spiekermann, „Trebuie să înveți dacă nu să codificați, măcar pentru a aprecia codul, pentru a înțelege codul. Pentru că codul este ceea ce erau piulițele și șuruburile în urmă cu o sută de ani.” Cel mai bun mod de a începe este să te scufunzi.

Un exemplu de prototip de conținut: Centrul comunitar Green Lake

Pentru a înțelege mai bine cum arată prototipul de conținut în acțiune, să luăm o colecție de conținut digital din lumea reală.

Iată scenariul. Centrul comunitar Green Lake oferă cursuri, programe și evenimente membrilor comunității din cartierul Green Lake. Din păcate, toate informațiile actuale despre clasă, program și evenimente sunt disponibile online numai prin PDF, care, la rândul său, este disponibil doar de pe site-ul web optimizat pentru desktop al centrului cu lățime fixă. Iată:

În efortul de a ajunge la membrii comunității care încearcă din ce în ce mai mult să acceseze informații despre cursuri, programe și evenimente prin intermediul telefoanelor lor mobile, centrul a decis să lanseze un site web pentru programele mobile. Această inițiativă va servi în cele din urmă drept catalizator pentru un site web receptiv la nivel de oraș pentru parcuri și recreere.

Ca orice alt proiect de design, voi începe cu o analiză euristică și competitivă și analizând traficul disponibil și datele utilizatorilor. Dacă părțile interesate și utilizatorii finali sunt disponibili, voi fi sigur că voi vorbi și cu ei. Odată ce simt că am o bună înțelegere a scopului site-ului web, voi explora câteva idei de bază de arhitectură a informațiilor de nivel înalt și de interfață cu utilizatorul pe hârtie.

Pe măsură ce o abordare inițială de proiectare începe să prindă contur, pot folosi un flux de lucru de prototipare a conținutului pentru a introduce ideile mele inițiale - și, mai important, conținutul pe care aceste idei sunt menite să îl servească - în contextul în care vor fi în cele din urmă consumate - în acest caz, browserul. Să trecem peste cum arată acest proces în detaliu.

Capturați conținut

În acest exemplu, puteți vedea cum conținutul structurat pe care îl capturez într-o foaie de calcul cadru de prototipare a conținutului este scris automat într-un șablon de pagină de fiecare dată când îmi salvez fișierul _data . Aici am folosit foaia „catalog” pentru a structura conținutul. Variabilele „Titlu”, „descriere”, „categorie” și „etichete” sunt deja incluse în șablonul de pagină, astfel încât acele valori se actualizează imediat. Puteți adăuga câte alte coloane la un rând de conținut doriți - asigurați-vă că includeți variabila corespunzătoare în șablon (mai multe despre asta mai jos).

Foile „Director” și „feed” sunt, de asemenea, incluse în kit-ul de pornire și includ diferite categorii (coloane) pentru tipurile de conținut respective. Fiecare foaie exportă conținut în propriul folder (în aceste cazuri, „catalog”, „director” și „feed”) și în propriul fișier JSON. Puteți adăuga câte alte foi aveți nevoie - asigurați-vă că actualizați fișierul de configurare Jekyll, astfel încât acesta să știe să le extragă (consultați documentația pluginului „Jekyll Data Pages Generator” pentru detalii complete).

Adăugați mai multe pachete de conținut

Pe măsură ce adaug pachete de conținut (rânduri în foaia de calcul), noi pagini sunt adăugate automat la prototip. Fiecare rând reprezintă o singură pagină, iar fiecare coloană din acel rând reprezintă o variabilă pe care Jekyll o completează în șablon în timp ce construiește o pagină. În acest exemplu, conținutul din catalogul „Centrul comunitar” este destul de uniform, dar dacă descrierile articolelor au variat foarte mult în lungime, puteți vedea (și experimenta) cu ușurință modul în care această variație ar afecta aspectul paginii. Poate că atunci ați putea decide să împărțiți conținutul în mod diferit sau să adăugați elemente noi, cum ar fi rezumate sau slug-uri.

Acest sistem vă permite, de asemenea, să experimentați cu ușurință cu etichete, categorii și etichete. Schimbând valorile din coloana „categorie”, puteți testa modul în care diferitele abordări arhitecturale afectează capacitatea utilizatorului de a găsi cu ușurință o anumită bucată de conținut. În acest exemplu, de exemplu, am creat sisteme organizaționale bazate pe tipul de clasă și pe grupa de vârstă a unui participant. Acest lucru îmi permite să testez cu ușurință diferite abordări de navigare în meniu și pe pagina de pornire pe măsură ce prototipul prinde contur.

Adăugați structură și ierarhie cu HTML

Odată ce sunt mulțumit de conținutul la locul său, voi începe să împachetez acel conținut în markup, astfel încât structura sa să aibă sens pentru utilizatori. Tratați variabilele de aici ca text și marcați-le așa cum ați marca textul într-un fișier HTML „plat”. Rezultatele de aici ar trebui să arate destul de previzibile (acesta este un lucru bun).

Sistemul de șabloane Jekyll va prelua șabloanele de pagină pe care le-ați creat și le va împacheta cu un șablon global care conține antetul și pictograma de navigare. Iată ce înseamnă „aspect: implicit”: numim șablonul „implicit” ca înveliș al acestui șablon. Puteți imbrica șabloane cât de adânc doriți, deși mai mult de unul sau două niveluri de șabloane sunt de obicei inutile. Pentru a găzdui elemente repetate, cum ar fi liste de pagini și link-uri globale, puteți utiliza, de asemenea, „include”, care inserează o anumită bucată de cod în șablon atunci când site-ul este redat. Consultați documentația oficială a lui Jekyll pentru mai multe despre șabloane și include.

Adăugați logica cu etichetele de marcare ale lui Jekyll

Jekyll vă permite să adăugați o logică de bază prin includerea etichetelor de bază care sunt specifice sistemului său de șabloane. Aici, folosesc o etichetă for pentru a parcurge lista de clase a Centrului Comunitar Green Lake (care a fost creată când am adăugat pachetele multiple de conținut de mai sus) și redau fiecare clasă de centru comunitar din listă ca link:

De asemenea, puteți utiliza instrucțiuni if ​​pentru a crea condiții. Aici, folosesc o declarație if pentru a ascunde linkul către pagina cursului pe care mă aflu în prezent:

Dacă ți-a explodat capul, te rog să nu intri în panică. Adăugarea de logică este un fel de caracteristică avansată. Prototipul dvs. va funcționa bine dacă rămâneți la variabilele de conținut și HTML. Sistemul de șabloane al lui Jekyll este, totuși, foarte ușor de citit și ușor de preluat. Consultați introducerea rapidă a creatorilor săi despre cum funcționează piesele de bază.

Adăugați stil și comportament receptiv cu CSS-ul Foundation

Odată ce o primă schiță a structurii HTML este în vigoare, pot adăuga stil prototipului pur și simplu incluzând clase CSS și salvând documentul. Cadrul front-end al Fundației ZURB, care este deja conectat în kit-ul de pornire, oferă clase de stil pentru o gamă largă de modele de aplicații web și native. În exemplul prezentat aici, pur și simplu prin introducerea a două clase diferite, mi-am dat prototipului meu mobil o senzație mai „tapabilă” și am introdus un sentiment mult mai clar al ierarhiei vizuale. Aceste modificări se propagă automat la tot conținutul care utilizează acest șablon.

Foundation facilitează, de asemenea, includerea unui comportament receptiv pentru dispozitive mobile și utilizarea a zeci de componente prefabricate de aspect, container și media. Deoarece totul este CSS, puteți modifica și regla totul după propriul gust. Pentru aceste exemple, am modificat paleta de culori de bază a Fundației la un stil „cadru monocrom”, dar puteți adapta Fondul de ten la orice stil doriți. Aflați mai multe despre utilizarea Fundației răsfoind documentația sau tutorialele sale sau luând o clasă (clasele sunt excelente, de altfel).

Obțineți feedback din timp și revizuiți pe măsură ce mergeți

Odată ce conținutul este la locul său, crearea și testarea mai multor variații ale structurii este ușoară. Etichetele, categoriile, cuvintele cheie și alte metadate pot fi modificate direct în foaia de calcul de conținut. De asemenea, variațiile la structura paginii, fluxul și afișarea sunt doar o chestiune de creare a versiunilor alternative ale șabloanelor tale Jekyll. Toate aceste modificări vor apărea instantaneu pe prototip în momentul în care apăsați „Salvare”.

Pentru a finaliza o primă versiune a prototipului Centrului Comunitar Green Lake, am creat trei variante ale paginii de pornire pentru mobil. În acest caz, tot ce trebuia să fac a fost să rearanjez elementele din șablonul paginii de pornire și să schimb sursele de date pentru cele două elemente de navigare (adică butoanele cu lățime completă și plăcile de imagine).

Deși am prezentat toți acești pași în succesiune, rețineți că Gulp (rulerul de activități JavaScript care leagă toate sistemele noastre simple împreună) se modifică de fiecare dată când salvați un document. Aceasta înseamnă că puteți reveni oricând la orice pas și puteți face ajustări în funcție de răspunsul utilizatorului, feedback-ul părților interesate sau noi descoperiri despre conținut sau context.

Această flexibilitate vă permite să testați cu ușurință diferite ierarhii de ecran și tratamente de conținut cu utilizatorii - și vă permite să utilizați conținut real în acele teste, conținut pe care publicul dumneavoastră îl poate experimenta (și la care reacționează) direct. Deoarece forma finală a prototipului este HTML, CSS și JavaScript, puteți aduna feedback-ul utilizatorilor cu orice instrument de testare cu care vă simțiți cel mai confortabil (îmi plac UserTesting și Lookback).

Formatul prototipului HTML, CSS și JavaScript înseamnă, de asemenea, că munca dvs. va informa mai ușor eforturile paralele și ulterioare. Dacă eventualul dvs. produs va fi construit pe o platformă CMS existentă, de exemplu, atunci cerințele de conținut, structura și afișare pe care le puteți articula vă vor ajuta să evaluați opțiunile CMS. De asemenea, prototipul dvs. poate servi ca document de specificații pentru deciziile de proiectare care implică grila, ierarhia, titlurile, comportamentul legăturilor și fonturile pentru dezvoltatorii dvs. front-end.

Nu uitați, totuși, că scopul prototipării în primul rând al conținutului nu este pur și simplu acela de a proiecta în browser: Scopul este să utilizați browserul și feedbackul utilizatorilor dvs. pentru a regla organizarea conținutului dvs. pentru a construi simplu. structuri care funcționează bine.

Punctul forte al acestei metode este că vă permite să modificați rapid sistemele pe care le creează categoriile, etichetele și căile de navigare. Acest lucru oferă un avantaj distinct față de modelarea conținutului static. Dacă descoperiți că utilizați o mulțime de CSS suplimentare pentru a face conținutul dvs. dinamic să funcționeze așa cum doriți, reveniți la sursă. Puteți împărți conținutul în mod diferit pentru ca acesta să funcționeze mai bine? Adăugați (sau eliminați) un set de clase sau etichete? Încercați diferite variante până când găsiți soluția simplă și elegantă care face ca totul să pară să se încadreze la locul lor.

Gândirea sistemelor dincolo de web

Exemplul de bază prezentat aici ilustrează modul în care o abordare de prototipare a conținutului mai întâi ne poate ajuta să creăm sisteme de conținut simple care funcționează - sisteme care, la rândul lor, pregătesc scena pentru sisteme mai mari și mai complexe care funcționează. Prototiparea mai întâi de conținut ne ajută să descoperim locuri în care ajustări minore în modelul de conținut, ierarhie, categorii și etichete pot duce la soluții mai curate și mai elegante pentru nevoile de informații ale utilizatorilor noștri.

Deși acest instrument este construit pe tehnologii web, modul în care structurăm conținutul pentru înțelegere transcende instrumentele, tehnologiile și platformele individuale. Dacă conținutul dvs. în forma sa cea mai de bază, lipsit de cerințele și constrângerile anumitor implementări, are sens pentru publicul său și vă atinge obiectivele de comunicare în moduri simple și elegante, atunci ați construit deja o fundație care se extinde dincolo de implementările tehnologice individuale. Ați creat conținut care nu are nevoie de o anumită platformă sau script pentru a avea sens; este un set de conținut care vrea să fie înțeles într-un anumit fel.

Când plasăm conținutul în centrul procesului de proiectare, începem să rezolvăm nu pentru o anumită implementare, ci pentru înțelegere. Orice altceva este un pas intermediar. Recunoscând că platforma finală pentru care proiectăm este mintea umană, putem identifica structurile simple care dau naștere la înțelegere și putem lucra pentru a consolida acele structuri pe parcursul întregului proces de proiectare.

Lucrari citate

• Complexitate, un tur ghidat , Melanie Mitchell (New York: Oxford, 2009)
• O introducere în gândirea generală a sistemelor , Gerald Weinberg (New York: Dorset House, 1975)