Ghidul cuprinzător al arhitecturii informaționale

Ascultă versiunea audio a acestui articol

Ca parte standard a procesului UX, designerii creează arhitectura informațională atunci când construiesc produse. Definind fiecare cale și cale pe care utilizatorii le pot lua printr-o aplicație sau un site web, arhitectura informațiilor este mult mai mult decât o simplă hartă a site-ului pentru a arăta ce pagină duce unde.

Similar cu arhitecții care construiesc care folosesc un plan pentru a construi fiecare parte a unei case, de la structuri fizice până la lucrări interioare mai complexe, cum ar fi instalațiile electrice și sanitare, arhitectura informațiilor descrie ierarhia, navigarea, caracteristicile și interacțiunile unui site web sau aplicație. Și așa cum planurile sunt cel mai valoros document pe care un arhitect îl poate folosi în construcția unei clădiri, arhitectura informațională poate fi cel mai puternic instrument din arsenalul unui designer.

Cu toate acestea, dezvoltarea uneia nu este la fel de simplă ca adunarea unei liste de caracteristici și maparea modului în care funcționează - haideți să investigăm procesul.

Ce este arhitectura informației și de ce este importantă?

Arhitectura informației (IA) este, ca un plan, o reprezentare vizuală a infrastructurii, caracteristicilor și ierarhiei produsului. Nivelul de detaliu depinde de proiectant, astfel încât IA poate include, de asemenea, navigarea, funcțiile și comportamentele aplicației, conținutul și fluxurile. Nu există o limită stabilită pentru dimensiunea sau forma IA; cu toate acestea, ar trebui să cuprindă structura generalizată a produsului, astfel încât oricine (teoretic) ar trebui să fie capabil să îl citească și să înțeleagă cum funcționează produsul.

Vom folosi des referința la plan, deoarece scopul ambelor documente este aproape identic. La fel ca un plan, IA oferă designerilor (precum și echipelor de dezvoltare a produselor și de inginerie) o vedere de pasăre a întregului produs. A avea un singur document care oferă o reprezentare simplă și de înțeles a modului în care funcționează aplicația sau site-ul web este vital pentru dezvoltarea de noi funcții, actualizarea celor existente și pentru a vedea ce este posibil având în vedere produsul existent.

Cu IA disponibilă, devine mult mai ușor să luați decizii cheie pentru noile funcții și implementări, să înțelegeți termenele pentru schimbările de produs și să urmăriți comportamentul utilizatorului prin mai multe procese.

Să ne aprofundăm într-un videoclip de bază pentru a vedea cum este construit un IA.

Cum se proiectează arhitectura informațională

Ca parte a procesului UX, designul IA urmează modele foarte asemănătoare diagramelor de flux: adăugați forme și conectați-le cu linii într-un mod organizat la un singur document. Provocarea la construirea IA este să înțelegeți cum funcționează efectiv aplicația sau site-ul dvs. din perspectiva utilizatorului și cum să organizați aceste informații într-un format lizibil și lizibil.

Există două cerințe majore pentru construirea efectivă a IA: organizarea acesteia printr-o ierarhie vizuală (adică o ierarhie de caracteristici, funcții și comportament) și crearea unei legende pentru afișarea diferitelor tipuri de caracteristici, interacțiuni și fluxuri. Cu o diagramă standard, formele respectă cerințe specifice (dreptunghiurile sunt procese, diamantele sunt puncte de decizie etc.); totuși, respectarea acelei nomenclaturi nu este o cerință.

Cu alte cuvinte, cei mai importanți factori pentru construirea IA sunt locul unde sunt plasate componentele individuale ale arhitecturii (ierarhic) și modul în care sunt etichetate și afișate.

Înțelegerea și afișarea ierarhiei vizuale

Cel mai provocator aspect al creării unei noi arhitecturi informaționale este aproape întotdeauna în construirea acesteia ierarhic. Este o concepție greșită comună că IA trebuie construită „de sus în jos”. Este aproape întotdeauna mai dificil de făcut, cu excepția cazului în care este un produs existent, cum ar fi în videoclipul de mai sus.

Când construiți IA de la zero, cu excepția cazului în care site-ul sau aplicația dvs. urmează un format standard, este foarte dificil să scoateți orice după nivelul superior. Este ca și cum ai cere unui mecanic să construiască o mașină de sus în jos în loc să facă părți. Fiecare piesă trebuie să fie construită în avans cu propria cercetare, timp pentru proiectare și dezvoltare. Același lucru este valabil și cu IA.

Afișarea ierarhiei vizuale este un atu valoros pentru IA, nu numai pentru că oferă un context mai bun pentru cititor, ci și pentru că generalizează regiuni cheie ale produsului. Dacă cea mai importantă caracteristică a aplicației dvs. este comandarea unei călătorii (la Uber sau Lyft) care poate fi efectuată de pe pagina de pornire, atunci pagina respectivă va avea cele mai multe puncte de contact și cea mai mare valoare pentru produs. Același lucru va fi valabil și pentru ierarhia vizuală.

Sitemaps-urile sunt utile pentru înțelegerea ierarhiei, deoarece organizează paginile numeric (cum ar fi 1.0 Acasă, 2.0 Plată, 2.1 Adăugați o metodă de plată etc.). Sau luați în considerare exemplul din imaginea de mai jos pentru site-ul web al bibliotecii Universității Duke, unde navigarea de sus nu este doar în partea de sus, ci și evidențiată pentru a fi vizibilă în întreaga aplicație.

Ierarhia formelor, culorilor și altor elemente vizuale

În afară de ierarhie, arhitectura de mai sus face un alt lucru bine: afișează fiecare punct de implicare în mod unic, după cum este necesar, printr-o legendă simplă și câteva fraze cheie. Legenda denotă tipul de pagină și conținut și semnifică variații între culorile formelor. Acest lucru este important pentru că, deși site-ul lui Duke pare destul de simplu, IA merge doar la trei niveluri adânc. Fiecare dreptunghi galben denotă o aplicație, astfel încât procesele din fiecare dintre aceste casete nu sunt incluse în acest document!

Chiar și fără acele părți disponibile, structura este de așa natură încât putem înțelege cum să navigăm pe site numai prin intermediul IA. Acest lucru se oprește atunci când ajungem la o aplicație în cadrul site-ului web - nu trebuie.

IA de mai jos este pentru un joc. Folosind patru forme, fără culoare și fragmente de text plasate inteligent, fiecare interacțiune majoră este de înțeles fără prototipuri și, mai important, poate fi înțeleasă de oricine lucrează la ea.

Acest model nu este perfect, dar organizează clar ierarhia aplicațiilor și delimitează ceea ce vede sau face utilizatorul la un moment dat.

Cele mai bune instrumente de arhitectură a informațiilor

Există o mulțime de aplicații software care permit construirea unui IA, dar puține sunt suficient de simple și rapide pentru a face experiența plăcută. Sau, cel puțin, ușor de gestionat.

Draw.io, folosit în videoclipul de mai sus, este complet gratuit pentru uz personal și profesional și se conectează automat la Google Drive. Are și integrări cu Confluence și JIRA, care sunt plătite. Draw.io este excelent pentru diagrame de flux, crearea de fluxuri de utilizatori și arhitectură de informații, iar cu funcționalitatea Drive, mai multe persoane pot lucra la același document și pot vedea schimbările în direct. Există și o versiune offline gratuită.

Lucidchart este un alt instrument grozav care oferă o experiență puțin mai bună decât Draw.io și are beneficii suplimentare, cum ar fi șabloane pre-construite, multe mai multe integrări, o aplicație mobilă (evaluată la 2,5 stele în App Store) și suport pentru întreprinderi.

Omnigraffle și Visio sunt elemente de bază ale industriei de lungă durată și funcționează excelent pentru construirea și menținerea unui design IA, deși Visio este doar online (versiunea offline mai veche este numai pentru Windows), în timp ce Omnigraffle este doar pentru Mac și necesită achiziții separate pentru MacOS și iOS versiuni. OmniGraffle are un avantaj față de concurenții majori prin faptul că oferă automatizare JavaScript și AppleScript, ceea ce pentru majoritatea designerilor poate fi inutil, dar de obicei, arhitecții informaționali cu normă întreagă apreciază acest lucru.

Toate instrumentele enumerate mai sus sunt realizate pentru viteză și ușurință în utilizare, în special în jurul diagramelor de flux, care urmează principii aproape identice cu arhitectura informațională. Alte aplicații precum Balsamiq, MindMeister, MindManager sau XMind oferă toate un comportament similar, dar sunt construite pentru alte scopuri majore, cum ar fi prototipuri sau hărți mentale.

Cele mai bune practici ale arhitecturii informaționale

Deși există puține reguli definite pentru ceea ce constituie arhitectura informațională, atunci când parcurgeți procesul, luați în considerare următoarele:

Nu vă concentrați pe ierarhie, concentrați-vă pe structură

Ierarhia este reglabilă. Pagina de pornire va fi întotdeauna pagina de pornire, dar unde duce, cum ajung utilizatorii în acele locuri și totul dintre ele și dincolo este stabilit mai târziu.

Toate procesele ar trebui să fie logice

Chiar dacă IA în procesul UX este pentru interacțiunile utilizatorilor, fiecare pas al drumului trebuie să aibă sens. Ecranele de înregistrare nu ar trebui să ducă la setări, o funcție de cameră nu ar trebui să sară la o vizualizare a hărții... lista continuă.

Amintiți-vă de procesul UX

O greșeală comună este să faci doar IA, fără resurse, cercetare sau alte active sau muncă. Este ca și cum i-ai spune unui autor să scrie o carte fără schiță sau unui programator să codifice o aplicație fără prototipuri.

Tu ești cartograful

Cartografii iau în considerare totul despre o hartă, de la lanțuri muntoase până la granițele de stat. La fel ca producătorii de hărți, designerii determină ceea ce este inclus în designul IA. Pagini individuale, comportamente specifice ale utilizatorilor, context pentru punctele de decizie... și așa mai departe.

În cele din urmă, cartograful decide ce se întâmplă pe hartă în funcție de nevoile utilizatorului. Același lucru este valabil și pentru designeri, așa că construiți IA pentru utilizatorul final, și anume echipele de dezvoltare și proiectare a produsului.

Arhitectura informației este în continuă schimbare și evoluție

Pentru a forța încă o dată, toate AI-urile sunt create pentru schimbare. Produsele evoluează, design-urile se schimbă, utilizatorii se adaptează, iar ciclul continuă, iar și iar. Nu o lua prea în serios și știi că întotdeauna va fi loc de îmbunătățire. Nu țintiți spre perfecțiune; construiți un IA simplu, adaptabil.

Arhitectura mea informațională este gata... Acum ce?

Este o concepție comună că orice lucrare de proiectare nu este niciodată realizată cu adevărat și, cu siguranță, acesta este cazul arhitecturii informaționale. Ele cresc, se micșorează și se schimbă la fel ca produsele noastre. Spre deosebire de un plan pentru o clădire, IA va evolua întotdeauna în funcție de orice, de la nevoile utilizatorilor la noi funcții sau o revizuire a produsului. O mare parte din structură poate rămâne aceeași și poate oferi consistență între versiuni, astfel încât utilizatorii să nu fie confuzi.

Și asta e un lucru bun. Să știi că IA este un document fluid – unul care se schimbă probabil săptămânal, și uneori chiar zilnic – este o modalitate puternică de a menține structura generală a aplicației sau a site-ului tău web fără a atinge codul sau a crea noi prototipuri. Cu cât întreaga echipă de dezvoltare a produsului cunoaște mai bine IA, cu atât toată lumea va ști mai repede ce este și ce nu este posibil și cât de serioasă este cu adevărat orice presupusă „lucrare ușoară”.

Ceea ce ne aduce la adevărata frumusețe a arhitecturii informaționale: nu există un punct de plecare predefinit. În timp ce procesul tradițional de proiectare UX dictează ca IA să fie construită după finalizarea unor fluxuri de utilizatori suficiente; Înarmat cu o mulțime de cercetări privind utilizatorii și competiția, poate fi și primul lucru făcut... sau ultimul. Procesul de prototipare aduce adesea informații despre cum ar trebui să apară anumite comportamente sau acțiuni, care ar fi greu de imaginat dintr-o IA logică sau lipsită de imaginație.

Ca practică în continuă evoluție, designul IA este o artă la fel de mult ca și o abilitate, motiv pentru care marile corporații au posturi de arhitect al informațiilor. Acești designeri sunt paznicii sistemelor masive și, cu înțelegerea lor asupra creșterii produselor de-a lungul timpului, ei ajută echipele de produs, proiectare și inginerie să ia deciziile corecte de-a lungul anilor . Această scară de organizare nu este pentru toți designerii, dar fiecare designer poate construi o arhitectură informațională simplă și ușor de înțeles.

• • •

Lectură recomandată despre arhitectura informației

IA pentru web și nu numai

Cum să înțelegeți orice mizerie: Arhitectura informațională pentru toată lumea

Bazele arhitecturii informaționale

Diferența dintre arhitectura informațiilor și designul UX

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator