lechowski / 19.09.2020

Architektura informacji stron internetowych. Kompletny przewodnik dla początkujących.

Twoi klien­ci nie będą uży­wać tego, cze­go nie mogą odna­leźć. Obecny cha­rak­ter biz­ne­su w sie­ci wyma­ga (i umoż­li­wia) pla­no­wa­nia zacho­wań kon­su­menc­kich w stop­niu dotych­czas nie­spo­ty­ka­nym. To dla­te­go archi­tek­tu­ra infor­ma­cji, jest dziś klu­czo­wym skład­ni­kiem suk­ce­su stron inter­ne­to­wych. W tym arty­ku­le, wyja­śnia­my dokład­nie czym jest archi­tek­tu­ra infor­ma­cji i pod­po­wia­da­my w jaki spo­sób możesz zapla­no­wać ją na wła­sną rękę. Czytaj uważ­nie. Posiadanie takiej wie­dzy, napraw­dę się opła­ca.

Architektura informacji. Uczynić skomplikowane, jasnym...

Dobra archi­tek­tu­ra infor­ma­cji pozwa­la ludziom zna­leźć to, po co przy­szli. Genialna archi­tek­tu­ra infor­ma­cji spra­wia, że stro­na zacho­wu­je się tak, jak tego ocze­ku­ją. Słaba archi­tek­tu­ra infor­ma­cyj­na jest jak film bez reży­se­ra. Aktorzy mogą być świet­ni, sce­ne­rie wspa­nia­łe, lecz publicz­ność opusz­cza kino wkrót­ce po roz­po­czę­ciu pro­jek­cji.

Choć praw­dą jest, że archi­tek­ci infor­ma­cji udo­sko­na­la­ją to, co do tej powsta­wa­ło głów­nie przy oka­zji (bądź przy­pad­kiem), to wie­le firm, włącz­nie z Owocnymi, pla­nu­je archi­tek­tu­rę infor­ma­cji zanim zacznie pro­jek­to­wać jaką­kol­wiek inną część ser­wi­su inter­ne­to­we­go.

Dawać klien­tom to, czego potrzebują, dokładnie wtedy, kiedy tego potrzebują.

W prze­ci­wień­stwie do spo­so­bu myśle­nia laików, gra­fi­ka to jed­na z mniej istot­nych czę­ści, w pro­ce­sie pro­jek­to­wa­nia wyjąt­ko­wej stro­ny. Teksty, któ­re się na niej znaj­du­ją, to kolej­ny ele­ment więk­szej cało­ści. Również pro­gra­mi­sta nie odpo­wia­da na całość prac zwią­za­nych z witry­ną, podob­nie jak inwe­stor czy np. infor­ma­tyk obsłu­gu­ją­cy wir­tu­al­ny sklep. Wszyscy odpo­wia­da­ją za pewien aspekt powo­dze­nia pro­jek­tu, nikt zaś za całość przed­się­wzię­cia (przy­naj­mniej, jeśli cho­dzi o funk­cjo­nal­ność i sku­tecz­ność stro­ny). I tu poja­wia się zagad­nie­nie jakim jest archi­tek­tu­ra infor­ma­cji w ser­wi­sach inter­ne­to­wych.

Postępująca spe­cja­li­za­cja i roz­bi­cie obo­wiąz­ków wywo­ła­ły zapo­trze­bo­wa­nie na nowy rodzaj pro­fe­sjo­na­li­stów, dosko­na­le rozu­mie­ją­cych mode­le dzia­ła­nia stron, ale i klien­tów, ich ogra­ni­cze­nia i moż­li­wo­ści.

To połą­cze­nie psy­cho­lo­gii (klien­ci) i tech­no­lo­gii (witry­ny) pozwa­la im zoba­czyć przy­szły pro­jekt w cało­ści, zanim resz­ta zespo­łu rozpocz­nie pra­ce, prze­wi­dzieć wszyst­kie wyzwa­nia i odpo­wied­nio zapla­no­wać całe zada­nie.

Gdy stro­na prze­ko­nu­je klien­tów kom­for­tem, a mene­dże­rów sku­tecz­no­ścią, możesz być pewien, że to nie przy­pa­dek. Takie rezul­ta­ty są obec­nie osią­gal­ne jedy­nie dzię­ki ogrom­nej pra­cy i namy­sło­wi nad każ­dym aspek­tem dzia­ła­nia przy­szłej witry­ny.

Czym tak naprawdę zajmuje się architekt informacji?

Gdy dotych­cza­so­we spe­cja­li­za­cje sta­ją się zbyt wąskie, bły­ska­wicz­nie roz­wi­ja się nowa, sku­pia­ją­ca je i doda­ją­ca, dzię­ki szer­szej per­spek­ty­wie, nowych moż­li­wo­ści. Architekt infor­ma­cji:

  • Planuje struk­tu­rę witry­ny, tak, aby wspo­ma­ga­ła ona osią­ga­nie wyma­ga­nych wyni­ków (np. ruch na stro­nie, odpo­wied­nie wyni­ki sprze­da­ży, zapi­sy na new­slet­ter itp.)
  • Decyduje o tym, jak stro­na komu­ni­ku­je się z odbior­cą (a przede wszyst­kim, z klien­tem)
  • Organizuje i opi­su­je całą sie­cio­wą obec­ność mar­ki (stro­na, fora, intra­net), mając na uwa­dze łatwość obsłu­gi i dostęp­ność odpo­wied­nich zaso­bów
  • Wyznacza i egze­kwu­je prio­ry­te­ty kon­kret­nej stro­ny (cele róż­nych witryn, nawet tych spo­ty­ka­ją­cych się na jed­nym ryn­ku, mogą być róż­ne; powin­ny więc dzia­łać odpo­wied­nio odmien­nie)
  • Współpracuje z gra­fi­ka­mi, pro­jek­tan­ta­mi stron, spe­cja­li­sta­mi od usa­bi­li­ty, infor­ma­ty­ka­mi oraz pro­gra­mi­sta­mi, będąc nie­ja­ko łącz­ni­kiem ich kom­pe­ten­cji
  • Bada i pró­bu­je zarzą­dzać zacho­wa­nia­mi użyt­kow­ni­ków na stro­nie, poma­ga­jąc im dotrzeć do poszu­ki­wa­nych wia­do­mo­ści

Architekt infor­ma­cji dobie­ra środ­ki do celów.

Dobrym przy­kła­dem mogą być ser­wi­sy publi­ku­ją­ce foto­gra­fie w sie­ci. Istnieją ich bar­dzo licz­ne odmia­ny, wyko­rzy­sty­wa­nych przez bar­dzo róż­nych użyt­kow­ni­ków: spo­łecz­no­ści foto­gra­fów-ama­to­rów, blo­gi arty­stów czy podróż­ni­ków, bądź też typo­wo towa­rzy­skie przed­się­wzię­cia, jak np. Fotka.pl czy Flickr. Obok nich funk­cjo­nu­ją też ser­wi­sy o zupeł­nie innym celu i spo­so­bie dzia­ła­nia – komer­cyj­ne plat­for­my do obro­tu pro­fe­sjo­nal­ny­mi zdję­cia­mi, agen­cje mode­lin­gu czy foto­gra­fo­wie oso­bi­ście sprze­da­ją­cy swo­je dzie­ła onli­ne.

„Im więk­sza jest kon­ku­ren­cja w sie­ci oraz im więk­szy pla­no­wa­ny ser­wis, tym pomoc archi­tek­ta infor­ma­cji oka­zu­je się bar­dziej koniecz­na.”

Wszystkie one opar­te są na pew­nej wspól­nej idei (publicz­na pre­zen­ta­cja zdjęć), jed­nak w każ­dym przy­pad­ku ta idea zosta­ła ona zre­ali­zo­wa­na ina­czej. Decydujące były tu cele, jakie wyzna­czy­li sobie wła­ści­cie­le stro­ny, oraz ich doce­lo­wi użyt­kow­ni­cy. Wedle tych dwóch wytycz­nych powsta­ły odmien­ne archi­tek­tu­ry, któ­re przy­sto­so­wa­ły pod­sta­wo­wą kon­cep­cję do szcze­gó­ło­wych wyma­gań.

Kodeks architekta infor­ma­cji: tylko trzy krótkie zasady!

Tam, gdzie ocze­ki­wa­nia są wyso­kie, nakła­dy sta­rań nie mogą być niskie.
Dotyczy to w szcze­gól­no­ści stron, któ­re speł­nia­ją funk­cje han­dlo­we. Gdy od sku­tecz­no­ści bane­rów inter­ne­to­wych, tek­stu rekla­mo­we­go i wła­ści­we­go wybo­ru kolo­ry­sty­ki zale­żą pen­sje całe­go zespo­łu, każ­dy szcze­gół powi­nien zostać zba­da­ny, oce­nio­ny i zmie­nio­ny, gdy tyl­ko jest moż­li­wość osią­gnię­cia lep­szych wyni­ków. Tak wypra­co­wa­na struk­tu­ra stro­ny nie jest już tyl­ko kom­bi­na­cją gra­fi­ki i tek­stu – to pre­cy­zyj­nie zapro­jek­to­wa­ny algo­rytm sprze­da­ży.

Odpowiednio zaplanowana strona
powinna prezentować się internaucie tak, by:

  • zachę­ca­ła do pod­ję­cia ocze­ki­wa­nych przez twór­cę akcji
  • moż­na było się po niej poru­szać zacho­wu­jąc poczu­cie kie­run­ku i loka­li­za­cji nie­za­leż­nie od zagłę­bie­nia (duże ser­wi­sy o obfi­tych zaso­bach bywa­ją praw­dzi­wym labi­ryn­tem)
  • przy­no­si­ła zyski wła­ści­cie­lo­wi oraz satys­fak­cję użyt­kow­ni­kom Te trzy punk­ty to sama isto­ta odpo­wie­dzial­no­ści, jaką podej­mu­je archi­tekt infor­ma­cji – nowa, ale coraz bar­dziej spe­cja­li­za­cja w wal­ce o odpo­wied­nie miej­sce na ryn­ku.

Najlepsze praktyki w projektowaniu architektury informacji.

Zastanawiasz się jak zapro­jek­to­wać archi­tek­tu­rę infor­ma­cji dla swo­jej stro­ny inter­ne­to­wej? Popularną stra­te­gią jest też budo­wa­nie tzw. per­son — uni­kal­nych dla dane­go pro­jek­tu sym­bo­li repre­zen­tu­ją­cych kon­kret­ny typ klien­ta. Ich opra­co­wa­nie uła­twia póź­niej­szą dys­ku­sję; dobrze opra­co­wa­ny model nabywcy/gościa na stro­nie może stać się fun­da­men­tem sku­tecz­nej witry­ny, któ­ra będzie auten­tycz­nie odpo­wia­dać na jego potrze­by.

  1. Ustal bardzo jasny cel.

    Każda stro­na powin­na mieć jasny cel, bez wzglę­du na to, czy jest nim sprze­da­wa­nie pro­duk­tu, infor­mo­wa­nie ludzi na jakiś temat, czy tyl­ko zapew­nia­nie roz­ryw­ki. Bez jasne­go celu, stwo­rze­nie jakiej­kol­wiek sku­tecz­nej archi­tek­tu­ry infor­ma­cji jest prak­tycz­nie nie­moż­li­we.

    Na stro­nie, któ­rej osta­tecz­nym celem jest prze­ko­na­nie odwie­dza­ją­cych do zaku­pu pro­duk­tu, tre­ści powin­ny być zor­ga­ni­zo­wa­ne w taki spo­sób, by kie­ro­wać odwie­dza­ją­cych do tego celu. Na stro­nie, któ­rej celem jest infor­mo­wa­nie, archi­tek­tu­ra infor­ma­cji powin­na pro­wa­dzić ludzi poprzez tre­ści tak, by każ­da stro­na bazo­wa­ła na poprzed­niej i kie­ro­wa­ła do następ­nej.

    Oczywiście możesz mieć na stro­nie tak­że cele pobocz­ne, wyma­ga­ją­ce uzu­peł­nia­ją­cych zesta­wów tre­ści dla poszcze­gól­nych celów. Wszystko w porząd­ku, dopó­ki rozu­mie­cie, w jaki spo­sób poje­dyn­cze tre­ści dzia­ła­ją w odnie­sie­niu do celów stro­ny.

  2. Nie projektuj na podstawie własnych preferencji.

    Nie jesteś użyt­kow­ni­kiem. Jako pro­jek­tant musisz pamię­tać, że odwie­dza­ją­cy stro­nę nie będą chcie­li tego same­go, co Ty. Pomyśl o tym, kim tak napraw­dę jest „użyt­kow­nik stro­ny” i cze­go może od niej ocze­ki­wać.

  3. Zbadaj potrzeby użytkowników.

    Zbadanie, cze­go chcą i potrze­bu­ją użyt­kow­ni­cy, jest jed­nym z naj­waż­niej­szych kro­ków w two­rze­niu sku­tecz­nej archi­tek­tu­ry infor­ma­cji. Istnieje wie­le spo­so­bów na zebra­nie danych na temat potrzeb użyt­kow­ni­ków. Możesz otrzy­mać opi­nie dzię­ki wywia­dom lub kwe­stio­na­riu­szom, ale naj­le­piej będzie poeks­pe­ry­men­to­wać z testa­mi A/B (w fazie beta testów), by zoba­czyć, czy użyt­kow­ni­cy są w sta­nie spraw­nie poru­szać się po stro­nie.

    Gdy już będziesz wie­dzieć, cze­go tak napraw­dę chcą użyt­kow­ni­cy – a nie tyl­ko, tego co wyda­je Ci się, że chcą – będziesz w sta­nie dopa­so­wać struk­tu­rę infor­ma­cji tak, by jak naj­le­piej odpo­wia­da­ła tym potrze­bom.

  4. Stwórz wirtualnych użytkowników strony.

    Tworzenie hipo­te­tycz­nych opo­wie­ści i róż­nych użyt­kow­ni­ków Twojej stro­ny to kolej­ny wspa­nia­ły spo­sób na usta­le­nie naj­lep­sze­go spo­so­bu struk­tu­ry­zo­wa­nia tre­ści na stro­nie.

    W bar­dzo pod­sta­wo­wej for­mie, roz­wi­ja­nie posta­ci to po pro­stu okre­śla­nie róż­nych rodza­jów odwie­dza­ją­cych danej stro­ny, a następ­nie two­rze­nie „praw­dzi­wych” ludzi, któ­rzy pasu­ją do każ­dej z kate­go­rii.

    Następnie, w trak­cie pro­ce­su pro­jek­to­wa­nia, wyko­rzy­stuj ludzi, któ­rych pro­fi­le są bazą do pro­jek­to­wa­nia i testo­wa­nia struk­tu­ry infor­ma­cyj­nej stro­ny. By dowie­dzieć się wię­cej na temat posta­ci, prze­czy­taj porad­nik doty­czą­cy posta­ci na Webcredible.

    Wybierz dla tych celów odpo­wied­ni wzór struk­tu­ry infor­ma­cyj­nej. Wykorzystaj cele do uza­sad­nie­nia tego, dla­cze­go struk­tu­ra infor­ma­cji powin­na wyglą­dać tak, jak ją zapro­jek­to­wa­łeś.

  5. Bądź konsekwentny.

    Konsekwencja jest naj­waż­niej­sza we wzor­co­wych struk­tu­rach infor­ma­cji. Jeśli osiem z dzie­wię­ciu Twoich stron infor­ma­cyj­nych znaj­du­je się na liście w danej sek­cji, dla­cze­go by nie zamie­ścić tam tak­że tej dzie­wią­tej? Użytkownicy ocze­ku­ją kon­se­kwen­cji.

    To samo doty­czy tego, jaka jest struk­tu­ra infor­ma­cji na każ­dej stro­nie. Wybierzcie wzór i trzy­maj­cie się go. Jeśli odcho­dzi­cie od wzo­ru, upew­nij­cie się, że macie ku temu dobry powód i w podob­nych przy­pad­kach kon­se­kwent­nie doko­nuj­cie podob­nych odstępstw. Niekonsekwencja zwy­kle dez­orien­tu­je odwie­dza­ją­cych.

Trzy podstawowe techniki używane przez ekspertów.

W facho­wej lite­ra­tu­rze moż­na spo­tkać kil­ka róż­nych podejść powszech­nie wyko­rzy­sty­wa­nych w pro­jek­to­wa­niu struk­tu­ry infor­ma­cji. Przyjrzyjmy się kil­ku naj­po­pu­lar­niej­szym tech­ni­kom.

Sortowanie kart to nisko­bu­dże­to­wy, pro­sty spo­sób na usta­le­nie, jak naj­le­piej pogru­po­wać i zor­ga­ni­zo­wać tre­ści na pod­sta­wie danych zebra­nych od użyt­kow­ni­ków. Sortowanie kart pole­ga na zapi­sa­niu każ­de­go zesta­wu tre­ści lub stro­ny na kar­tach indek­su­ją­cych, a następ­nie pozwo­le­niu użyt­kow­ni­kom na posor­to­wa­nie ich w taki spo­sób, w jaki ich zda­niem tre­ści powin­ny zostać ska­te­go­ry­zo­wa­ne.

Istnieje kil­ka rodza­jów meto­do­lo­gii sor­to­wa­nia kart. Podstawowa meto­da zakła­da roz­po­czę­cie od kart uło­żo­nych w loso­wej kolej­no­ści, któ­re użyt­kow­ni­cy mają posor­to­wać w spo­sób, w któ­ry ich zda­niem powin­ny być pogru­po­wa­ne. W odwró­co­nym sor­to­wa­niu kart, kar­ty są wstęp­nie sor­to­wa­ne na gru­py, a użyt­kow­ni­cy mają za zada­nie zre­or­ga­ni­zo­wać je tak, jak to uwa­ża­ją za sto­sow­ne.

Otwarte sor­to­wa­nie kart pozwa­la użyt­kow­ni­kom na nada­nie nazw gru­pom kart, któ­re stwo­rzy­li, a w zamknię­tym sor­to­wa­niu uczest­ni­cy mają przy­po­rząd­ko­wać kar­ty do grup o okre­ślo­nych nazwach.

Podstawowe wireframe’y mogą zro­bić o wie­le wię­cej niż tyl­ko zapew­nić nam zarys pro­jek­tu ukła­du stro­ny. Informują nas tak­że, jak będą usta­wio­ne tre­ści, przy­naj­mniej na pozio­mie pod­sta­wo­wym. Umieszczenie tre­ści w wireframe’ach i pro­to­ty­pach daje nam dobry obraz tego, jak roz­miesz­czo­ne są tre­ści w sto­sun­ku do innych oraz jak nasza struk­tu­ra infor­ma­cji osią­ga cele.

W trak­cie wireframe’owania, a w szcze­gól­no­ści w przy­pad­ku pra­cy z pro­to­ty­pa­mi, powin­no się wyko­rzy­sty­wać tre­ści przy­naj­mniej przy­po­mi­na­ją­ce te, któ­re osta­tecz­nie znaj­dą się na stro­nie.

Mapa to pro­sty i szyb­ki spo­sób na obra­zo­we poka­za­nie tego, jak róż­ne pod­stro­ny i tre­ści wią­żą się ze sobą nawza­jem. To obo­wiąz­ko­wy krok, któ­ry two­rzy „makie­tę” tego, jak uło­żo­ne będą tre­ści.

Te zary­sy tre­ści poka­zu­ją, jak pogru­po­wa­ne są wszyst­kie pod­stro­ny na naszej stro­nie, w jakiej kolej­no­ści się poja­wia­ją, i jakie są rela­cje pomię­dzy stro­ną-mat­ką a pozo­sta­ły­mi pod­stro­na­mi. To czę­sto pro­sty do przy­go­to­wa­nia doku­ment, któ­ry może być stwo­rzo­ny po jed­nej lub dwóch run­dach sor­to­wa­nia kart. W przy­pad­ku ist­nie­ją­cych stron lub tre­ści, któ­re muszą być umiesz­czo­ne w ser­wi­sie inter­ne­to­wym, tę fazę poprze­dza zwy­kle spis zawar­to­ści.

Narzędzia, które przydają się w pracy architekta informacji.

Nie ma jed­nej szcze­gól­nej tech­no­lo­gii, któ­ra powsta­ła by i jest wyko­rzy­sty­wa­na tyl­ko przez archi­tek­tów infor­ma­cji. Jest to pra­ca zde­cy­do­wa­nie umy­sło­wa, i naj­bar­dziej widocz­ny­mi jej efek­ta­mi są na ogół róż­ne­go rodza­ju wizu­ali­za­cje opra­co­wa­nych idei. W warsz­ta­cie a.i. spo­ty­ka­ne są więc roz­ma­ite­go rodza­ju pro­gra­my do two­rze­nia tabel, gra­fów, sche­ma­tów, oraz innych spo­so­bów wizu­ali­za­cji zło­żo­nych struk­tur:

Za ich pomo­cą, nawet naj­bar­dziej roz­bu­do­wa­ną witry­nę www moż­na roz­pi­sać na czy­tel­ne dzia­ły, wyróż­nić kate­go­rie i pośród gąsz­czu moż­li­wych dzia­łań wska­zać te ścież­ki, któ­ry­mi miał­by poru­szać się klient. Oczywiście to tyl­ko lako­nicz­ny wstęp do wiel­kiej dys­ku­sji o pro­fe­sjo­nal­nym pro­jek­to­wa­niu archi­tek­tu­ry infor­ma­cji.