Arhitectura informațională, baza UX-ului și a HTML-ului

Arhitectura Informațională, așa cum scrie la carte, e o disciplină care se ocupă cu sisteme de organizare și acces la informație. Face lucrurile complexe să pară clare. Deși sună pompos și probabil merită un curs de sine stătător de câteva zeci de lecții, astăzi o vom explora pe scurt, pentru că ea stă la baza felului cum se construiesc (ca la carte) website-urile în ziua de azi.

Dacă știi Arhitectură Informațională, știi esența UX-ului (adică a User Experience-ului). Asta înseamnă că o să-ți fie foarte ușor să înțelegi motivele pentru care site-urile se organizează într-un anume fel. Vei pricepe de ce site-urile au nevoie de anumite componente ca să ajute utilizatorul să navigheze cu succes prin site. Și vei ști tehnicile cele mai eficiente să structurezi informația pentru ca oricine intră pe site să înțeleagă despre ce e vorba și care e următorul pas din experiența de navigare.

Hai să explorăm, deci, împreună, un nou episod din Cursul de Front End Development în Română, despre Arhitectura Informațională!

Hai să gândim metaforic. Imaginează-ți că ești într-o librărie și vrei să găsești o carte anume. Ai la dispoziție mai multe modalități prin care poți face asta. Spre exemplu, dacă există un librar, ar trebui să-l poți întreba unde e cartea. Dacă există un calculator sau un dosar alfabetizat, ai putea să cauți după prima literă a autorului sau a titlului cărții. Dacă alegi să o cauți direct la raft, ca s-o găsești, vei avea nevoie să fii atent sau atentă la semnele și etichetele care te îndrumă spre categoria și raftul potrivit. Poate nu știai până acum, dar felul cum e împărțită informația și modalitatea prin care alegem să găsim și să accesăm acea informație construiesc ceea ce se numește Arhitectură Informațională.

Aceste tehnici de organizare și navigare se aplică direct și pentru a construi un site așa cum trebuie. Ca să găsești ceva într-un site, poți căuta, te poți orienta, poți umbla prin site și cu cât găsești mai repede ce cauți, cu atât e arhitectura informațională a site-ului mai bună. Aș vrea să explorăm, deci, disciplina asta mai în detaliu astăzi, pentru că dacă știi bazele ei, poți la rândul tău să construiești din prima site-uri care chiar au sens, sunt organizate corect și sunt ușor de navigat de către oricine, aceasta fiind una din cele mai importante abilități ale unui Front End Developer.

Așa că ia-ți o băutură caldă (sau rece), așează-te comod și hai să-ncepem!

Scurtă istorie a Arhitecturii Informaționale

Arhitectura Informațională se practică într-o formă sau alta de zeci de mii de ani. Când intrau în peșteri, strămoșii noștri nu puneau picturile rupestre după un colț greu de accesat, departe de privirile colegilor de peșteră, ci fix la intrare, pe un perete plan, ușor de văzut și de exagerat la lumina focului câți mamuți au omorât ei în ziua respectivă.

Librăria din Alexandria, care se zvonea că înglobează toate cunoștințele lumii antice și multe secrete pierdute definitiv pentru oamenii moderni, a fost construită prin anii 300 înainte de Hristos și pe vremea lui Aristofan din Bizanț angaja cam 100 de librari full time și găzduia 400.000 cărți sub formă de suluri de papirus. Oamenii ăia sigur erau experți în Arhitectură Informațională ca să găsească ce caută printre munții de suluri. Și asta practic ne spune că arta organizării informației se trage din meseria străveche de librar sau bibliotecar, care pare o meserie trivială dar e una plină de ordine, sens și organizare. Pentru cei dintre voi cărora le place ordinea sau care au un pic de OCD, cred că niște studiu mai aprofundat al domeniului ar putea fi foarte plăcut.

Cu toate astea, varianta modernă, pe care o putem folosi astăzi pentru orice demers de comunicare digitală, își are originile în anii 70, când niște oameni luminați în frunte cu Richard Saul Wurman s-au gândit să unească noțiuni și metodologii din știința librarilor, psihologia cognitivă și arhitectură și să creeze o disciplină nouă, care a inspirat mai departe dezvoltarea zonei de design de experiență a utilizatorului (sau UX-ului).

Asta-nseamnă că e un domeniu divers, interesant și în care nu prea te plictisești, deși la prima vedere lucrurile par stufoase.

Ce înseamnă să faci Arhitectură Informațională pentru Web?

În primul rând, trebuie să înțelegi oamenii. Ce vor, cum se comportă, de ce au nevoie. Atât în general cât și în particular pentru tipologia de utilizatori care intră pe site-ul pe care-l construiești. Ca să faci asta, trebuie să înțelegi puțină psihologie comportamentală și să vorbești efectiv cu oameni, să le afli așteptările, felul cum caută informație și cum categorisesc informația în mintea lor.

Apoi, trebuie să-ți înțelegi conținutul și scopul acestuia. Ce conținut ai deja? De ce conținut mai ai nevoie ca să satisfaci nevoile oamenilor? Cum comunici despre conținutul tău, cum îl planifici dacă nu e deja scris și cum îl clasifici ca să fie ușor de găsit de cei interesați?

Abia apoi poți să te gândești la o arhitectură informațională prin care organizezi informația așa încât să aibă sens pentru utilizatori. În același timp, trebuie să creionezi un sistem de navigare care să le facă viața oamenilor cât se poate de ușoară. Arhitectura informațională se traduce pe scurt în modalități de etichetare și limbaj folosit, descrierea felului cum funcționează navigarea, căutarea și structura paginilor.

Ar trebui să răspunzi la următoarele două întrebări:

1. Care e poziția, locația, structura informației într-un widget de site, într-o pagină de site și într-un site întreg? (deci la toate nivelurile de analiză contextuală)
2. Care elemente sunt cele mai importante și trebuiesc prioritizate ca să fie mai ușor pentru utilizatori să le acceseze și folosească?

Răspunsurile ar trebui să genereze un plan pe care dacă-l urmezi în timp ce construiești website-ul, utilizatorii să fie fericiți.

Noi ca utilizatori suntem obișnuiți să găsim ușor și rapid informația de pe un site sau dintr-o aplicație de pe telefon. Dacă nu se întâmplă asta, fie ieșim de pe site sau nu mai folosim aplicația, fie ne frustrăm, ne enervăm și ne supărăm pe creatorii acelui site sau acelei aplicații. Deci din postura de Web Developeri, dacă vrem ca utilizatorii noștri să nu se supere prea tare pe noi, trebuie să ne asigurăm că informația, navigarea și structura site-ului sunt logice și ușor de înțeles. Și în plus, că site-ul folosește limbaj familiar pentru utilizatori, nu jargon științific sau de domeniu.

Asta-nseamnă și că trebuie să ai în vedere mai multe tipologii de utilizatori (fiindcă nu suntem toți la fel). Spre exemplu, unii preferă să caute rapid folosind funcția de search de pe un site, alții preferă să navigheze prin categorii și subcategorii, adică să facă browsing. Tu ca viitor om care lucrează în domeniu trebuie să te gândești să suporți tehnic și vizual ambele variante de a ajunge la informația dorită, altfel o să-i frustrezi pe cei obișnuiți să facă asta într-un anume fel pe care nu tu-l ai pe site.

Ce NU este Arhitectură Informațională pentru Web?

Din descrierea anterioară ai putea deduce că de fapt meseria asta de structurare a conținutului și înțelegere a utilizatorilor cuprinde absolut tot ce e nevoie ca să faci un site. Ei bine, nu e chiar așa.

Când faci Arhitectură Informațională, nu faci design grafic sau de interfață decât într-o măsură foarte limitată. De Arhitectura Informațională ține mai degrabă partea de UX a unei interfețe (adică partea de User Experience Design): wireframing, user testing, etc. Deci nu și partea de UI (adică User Interface Design): culori, texturi, branding, imagistică, ilustrație, etc.

Când faci Arhitectură Informațională, în egală măsură, nu-nseamnă că faci Content Management decât într-o măsură limitată. Definești natura și structura articolelor care compun paginile site-ului, dar nu și stilul scriiturii, tonul vocii, lungimea sau densitatea informației, care țin mai degrabă de Content Management.

La fel și cu alte discipline, cum ar fi: Usability Engineering, Software Development, Interaction Design, etc. Arhitectura Informațională ghidează eforturile inițiale de structură și ordine din sistemele implementate, dar nu și detaliile exacte ale implementării.

Practic, ce rezultă în urma eforturilor de Arhitectură Informațională?

Un proces complet de Arhitectură Informațională se finalizează cu trecerea prin niște procese și livrarea unor artefacte. Ca să fie mai simplu, voi da exemple din arhitectura informațională a unui eventual site de cursuri de programare și front end. Așadar, e nevoie de:

• lista tipologiilor de utilizatori cei mai des întâlniți / valoroși inclusiv nevoile de informații ale fiecărui astfel de tip de utilizator
  spre exemplu: George, 22 ani, student, vrea să se angajeze în IT, are nevoie de informații clare despre ce resurse să parcurgă și în ce ordine
  
• inventarul conținutului curent, dacă există
  spre exemplu: fiecare pagină, fiecare articol, fiecare resursă și link, etc. trebuie aduse într-o listă coerentă și completă care cuprinde întreg conținutul site-ului
  
• auditarea conținutului, a utilității sale și a eficienței satisfacerii nevoilor utilizatorilor, apoi marcarea nevoilor adiționale de conținut
  spre exemplu: 75% din pagini sunt utile pentru că oferă informații directe pentru satisfacerea utilizatorului George, 25% sunt ambigue și au nevoie de adăugiri și clarificări, plus exemple concrete, ca să devină la fel de utile
  
• gruparea conținutului, dezvoltarea relațiilor dintre bucățile de conținut în raport cu percepția utilizatorilor, categorisirea și etichetarea conținutului
  spre exemplu: avem 4 tipuri de pagini
  • cursuri (care au subtipul: modul de curs și subtipul: lecție de curs)
  • tutoriale video (care au subtipul: playlist și subtipul: video)
  • webinare
  • pagini generice (contact, homepage, termeni și condiții, etc)
    
• dezvoltarea taxonomiilor, a convențiilor de nume, a etichetelor, a vocabularului folosit pe site pentru a descrie conținutul
  spre exemplu: avem taxonomia „tehnologie” cu itemii: HTML, CSS, JS, Vue, React, Angular, Node, etc., avem taxonomia „limbă” cu itemii: română, engleză, spaniolă, franceză, etc. avem taxonomia „tip de conținut” cu itemii: curs, video, webinar, resurse, etc.
  
• definirea modalităților de navigare
  spre exemplu: meniul principal are 2 dimensiuni: una principală cu link-urile: home, HTML, CSS, JavaScript, Algoritmică, contact, iar fiecare din HTML, CSS, JavaScript și Algoritmică listează taxonomiile de „tip de conținut” (cursuri, video-uri, webinarii, resurse)
  
• structurarea informațională a paginilor
  spre exemplu: pagina de curs va cuprinde meniul principal, navigarea între module și listarea fiecărui curs în parte
  
• meta-informațiile despre site și despre fiecare pagină în parte
  spre exemplu: header principal (h1), meta titlu, meta descriere, cuvinte cheie relevante, taxonomii, etc.

Cine ar trebui să facă arhitectură informațională pentru proiectele la care vei lucra?

Tu. 🙂

Serios acum, în multe contexte și echipe în ziua de azi, de obicei persoana sau persoanele care se ocupă de UX sau de design în general se gândesc la problema arhitecturii informaționale. Dar oamenii ăștia n-ar trebui să fie singurii. Ideal ar fi ca procesul de arhitectură informațională să aibă un „owner” care știe bine UX, dar în echipa de Arhitectură Informațională trebuie neapărat să fie măcar un content manager sau content writer sau copywriter, un front end developer (adică tu), și cineva din echipa de management sau de vânzări, care știe produsul, business-ul și clienții.

Arhitectura informațională e un demers multidisciplinar care vizează pe toată lumea implicată în dezvoltarea unui site, însă din păcate de multe ori e un pas peste care se sare, mai ales când sunt deadline-uri strânse. Asta duce la multe probleme fundamentale de organizare a informației. Problemele astea sunt greu de remediat fără muncă substanțială care ar fi putut fi evitată dacă oamenii nu s-ar fi grăbit să înceapă munca efectivă și n-ar fi sărit peste această etapă esențială.

E important ca procesul de Arhitectură Informațională să se întâmple, deci, cumva, ideal înainte de orice altceva, la începutul proiectului. Dacă nu vine nimeni cu ideea să facă asta, va trebui să preiei tu inițiativa. Și dacă reușești să te implici în asta, site-ul pe care-l vei construi va fi garantat mai bun. Cu siguranță, dacă înveți să faci Arhitectură Informațională, o să-ți fie mai ușor să înveți să fii un Front End Developer mai bun. Merită 100%, atât conceptual, cât și practic.

Resurse de unde să înveți cum să faci Arhitectură Informațională

Bun, și de unde înveți Arhitectură Informațională, cum aflii mai multe detalii?

Sfatul meu e să studiezi în timpul liber câteva resurse, printre care se află niște cărți excelente și niște site-uri utile. Mai exact, iată niște resurse în engleză:

1. Găsești bazele arhitecturii informaționale pe site-ul Digital.gov: https://bit.ly/digital-ia 
2. Găsești un ghid pentru începători în arhitectură informațională pe site-ul UX Booth: https://bit.ly/uxbooth-ia
3. Găsești cele mai frecvente probleme de arhitectură informațională într-un articol excelent de la Nielsen Norman Group: https://bit.ly/nn-ia 
4. Iată o prezentare despre arhitectură informațională de la Peter Morville: https://bit.ly/understanding-ia
5. Recomand cartea de referință „Information Architecture” de Rosenfeld, Morville și Arango, ediția a 4-a: https://bit.ly/information-architecture-v4
6. Mai recomand și cartea „Everyday Information Architecture” de Lisa Marquis, publicată de A Book Apart: https://bit.ly/aba-ia

Recapitulare și temă

Felicitări, ai mai parcurs o lecție din curs! Azi am învățat despre tehnici de a organiza și structura informația pe un site, cum se face arhitectura informațională și de ce e importantă în contextul dezvoltării unui site.

Ăsta e momentul perfect să îți dau o temă pentru acasă.

• Analizează din punct de vedere al arhitecturii informaționale site-ul tău preferat, și scrie-mi în comentarii: cum e categorisit conținutul pe taxonomii, ce soluții de navigare folosește site-ul și ce probleme potențiale găsești pe site. În lipsă de inspirație apropo de ce site să folosești, poți să-mi analizezi mie site-ul: viorelmocanu.ro sau poți să încerci să intri pe emag.ro sau amazon.com unde arhitectura informațională e brusc mult mai stufoasă, și să încerci să înțelegi cum au organizat informația oamenii de acolo.
• Dă-mi exemplu de un site cu arhitectură informațională proastă din punctul tău de vedere, și explică de ce.
• Dacă poți, citește toate resursele pe care le-am menționat mai devreme. Inclusiv cărțile.

Continuăm lecțiile foarte curând, stai pe-aproape! 🙂