Kuuntele tämän artikkelin ääniversio
Suunnittelijat luovat informaatioarkkitehtuurin tavanomaisena osana UX-prosessia, kun he rakentavat tuotteita. Tietoarkkitehtuuri määrittelee kaikki väylät ja polut, joita käyttäjät voivat kulkea sovelluksen tai verkkosivuston läpi, ja se on paljon muutakin kuin pelkkä sivukartta, joka näyttää, mikä sivu johtaa minne.
Samankaltainen kuin rakennusarkkitehdit, jotka käyttävät pohjapiirrosta talon jokaisen osan rakentamiseen fyysisistä rakenteista monimutkaisempiin sisäisiin rakenteisiin, kuten sähkö- ja vesijohtoverkkoon, myös tietoarkkitehtuuri kuvaa verkkosivuston tai -sovelluksen hierarkian, navigaation, toiminnot ja vuorovaikutukset. Ja aivan kuten piirustukset ovat arkkitehdille arvokkain asiakirja, jota hän voi käyttää rakennuksen rakentamisessa, informaatioarkkitehtuuri voi olla tehokkain työkalu suunnittelijan arsenaalissa.
Informaatioarkkitehtuurin kehittäminen ei kuitenkaan ole niin yksinkertaista kuin luettelon laatiminen ominaisuuksista ja niiden toimintatapojen kartoittaminen – tutkitaan prosessia.
Mitä on informaatioarkkitehtuuri ja miksi se on tärkeää?
Informaatioarkkitehtuuri (IA) on piirustuksen tavoin visuaalinen esitys tuotteen infrastruktuurista, ominaisuuksista ja hierarkiasta. Yksityiskohtaisuuden taso on suunnittelijan päätettävissä, joten IA voi sisältää myös navigoinnin, sovelluksen toiminnot ja käyttäytymisen, sisällön ja virrat. IA:n koolle tai muodolle ei ole asetettu rajaa; sen tulisi kuitenkin kattaa tuotteen yleistetty rakenne, jotta kuka tahansa (teoriassa) pystyisi lukemaan sen ja ymmärtämään, miten tuote toimii.
Viittaamme usein blueprint-viittaukseen, koska molempien dokumenttien tarkoitus on lähes identtinen. Aivan kuten pohjapiirros, IA tarjoaa suunnittelijoille (sekä tuotekehitys- ja insinööritiimeille) lintuperspektiivin koko tuotteesta. Yksi ainoa asiakirja, joka antaa yksinkertaisen ja ymmärrettävän kuvan siitä, miten sovellus tai verkkosivusto toimii, on elintärkeä, kun kehitetään uusia ominaisuuksia, päivitetään olemassa olevia ominaisuuksia ja nähdään, mikä on mahdollista olemassa olevaa tuotetta ajatellen.
Kun IA on käytettävissä, on huomattavasti helpompaa tehdä keskeisiä päätöksiä uusista ominaisuuksista ja toteutuksista, ymmärtää tuotemuutosten aikatauluja ja seurata käyttäjien käyttäytymistä useiden prosessien läpi.
Sukelletaanpa perusvideoon, josta näemme, miten IA rakennetaan.
How to Design Information Architecture
Koska IA-suunnittelu on osa UX-prosessia, IA-suunnittelu noudattelee hyvin samankaltaisia malleja kuin virtauskaavioinnissa: Lisää muotoja ja yhdistä ne viivoilla organisoidusti yhteen asiakirjaan. Haasteena IA:ta rakennettaessa on ymmärtää, miten sovelluksesi tai verkkosivustosi todellisuudessa toimii käyttäjän näkökulmasta, ja miten järjestää tämä tieto luettavaan ja luettavaan muotoon.
Ia:n varsinaiseen rakentamiseen liittyy kaksi päävaatimusta: sen järjestäminen visuaalisen hierarkian (eli ominaisuuksien, toimintojen ja käyttäytymisen hierarkian) avulla ja legendan luominen erityyppisten ominaisuuksien, vuorovaikutuksen ja virtojen esittämistä varten. Tavallisessa vuokaaviossa muodot noudattavat tiettyjä vaatimuksia (suorakulmiot ovat prosesseja, timantit ovat päätöksentekopisteitä jne.); tämän nimikkeistön noudattaminen ei kuitenkaan ole vaatimus.
Muilla sanoilla, tärkeimpiä tekijöitä vaikutustenarvioinnin rakentamisessa ovat se, mihin arkkitehtuurin yksittäiset komponentit sijoitetaan (hierarkkisesti), ja se, miten ne merkitään ja näytetään.
Visuaalisen hierarkian ymmärtäminen ja esittäminen
Haastavinta uuden informaatioarkkitehtuurin luomisessa on lähes aina sen rakentaminen hierarkkisesti. On yleinen väärinkäsitys, että IA on rakennettava ”ylhäältä alaspäin”. Se on lähes aina vaikeampaa, ellei kyseessä ole olemassa oleva tuote, kuten yllä olevassa videossa.
Kun IA:ta rakennetaan tyhjästä, ellei verkkosivusto tai sovellus noudata vakiomuotoista muotoa, kaiken ylimmän tason jälkeisen hahmottaminen on hyvin vaikeaa. Se on kuin pyytäisi mekaanikkoa rakentamaan auton ylhäältä alaspäin eikä osissa. Jokainen osa on rakennettava etukäteen, ja siihen on varattava oma tutkimuksensa, suunnitteluaikansa ja kehitystyönsä. Sama pätee IA:n kohdalla.
Visuaalisen hierarkian esittäminen on arvokas IA:n etu, ei ainoastaan siksi, että se tarjoaa lukijalle paremman kontekstin, vaan myös siksi, että se yleistää tuotteen keskeisiä alueita. Jos sovelluksesi merkittävin ominaisuus on kyydin tilaaminen (a la Uber tai Lyft), jonka voi tehdä etusivulta käsin, kyseisellä sivulla on eniten kosketuspisteitä ja tuotteen suurin arvo. Sama pätee myös visuaaliseen hierarkiaan.
Sitemapit ovat käteviä hierarkian ymmärtämisessä, sillä ne järjestävät sivut numeerisesti (esimerkiksi 1.0 Etusivu, 2.0 Maksu, 2.1 Lisää maksutapa jne.). Tai mieti alla olevan kuvan esimerkkiä Duken yliopiston kirjastosivustosta, jossa ylänavigaatio ei ole vain ylhäällä, vaan se on myös korostettu näkymään koko sovelluksessa.
Muotojen, värien ja muiden visuaalisten elementtien hierarkia
Hierarkian ohella yllä oleva arkkitehtuuri tekee toisenkin asian hyvin: Se näyttää jokaisen sitoutumispisteen yksiselitteisesti tarpeen mukaan yksinkertaisen legendan ja muutaman avainsanan avulla. Legenda ilmaisee sivun ja sisältötyypin, ja se merkitsee muotojen värien väliset vaihtelut. Tämä on tärkeää, sillä vaikka Duken sivusto näyttää melko yksinkertaiselta, IA ulottuu vain kolmeen tasoon. Jokainen keltainen suorakulmio tarkoittaa sovellusta, joten kunkin laatikon sisällä olevia prosesseja ei ole sisällytetty tähän asiakirjaan!
Jopa ilman näitä osia rakenne on sellainen, että voimme ymmärtää, miten sivustolla navigoidaan pelkästään IA:n avulla. Se loppuu, kun pääsemme verkkosivuston sisällä olevaan sovellukseen – sen ei tarvitse.
Alla oleva IA on peliä varten. Käyttämällä neljää muotoa, ei värejä ja fiksusti sijoitettuja tekstinpätkiä jokainen tärkeä vuorovaikutus on ymmärrettävissä ilman prototyyppejä, ja mikä tärkeintä, kuka tahansa sen parissa työskentelevä ymmärtää sen.
Tämä malli ei ole täydellinen, mutta se järjestää sovellushierarkian selkeästi ja rajaa, mitä käyttäjä joko näkee tai tekee missäkin vaiheessa.
Parhaat informaatioarkkitehtuurityökalut
On olemassa paljon ohjelmistosovelluksia, jotka mahdollistavat IA:n rakentamisen, mutta vain harvat niistä ovat tarpeeksi yksinkertaisia ja nopeita tehdäkseen kokemuksesta miellyttävän. Tai ainakin helposti hallittavissa.
Yllä olevalla videolla käytetty Draw.io on täysin ilmainen henkilökohtaiseen ja ammattikäyttöön, ja se liitetään automaattisesti Google Driveen. Sillä on myös integraatiot Confluenceen ja JIRAan, jotka ovat maksullisia. Draw.io on erinomainen virtauskaavioihin, käyttäjävirtojen ja informaatioarkkitehtuurin luomiseen, ja Drive-toiminnallisuuden ansiosta useat ihmiset voivat työskennellä saman asiakirjan parissa ja nähdä muutokset livenä. Tarjolla on myös ilmainen offline-versio.
Lucidchart on toinen loistava työkalu, joka tarjoaa hieman paremman käyttökokemuksen kuin Draw.io, ja sillä on lisäetuja, kuten valmiita malleja, paljon enemmän integraatioita, mobiilisovellus (arvioitu 2,5 tähteä App Storessa) ja tuki yrityksille.
Omnigraffle ja Visio ovat alan pitkäaikaisia kantavia voimavaroja, ja ne toimivat erinomaisesti IA-suunnittelun rakentamisessa ja ylläpitämisessä, vaikkakin Visio on vain online-työkalu (vanhempi offline-versio on vain Windows-käyttöjärjestelmään tarkoitettu), kun taas Omnigraffle taas vain Mac-käyttöjärjestelmään tarkoitettu, ja se vaatii erilliset hankinnat MacOS- ja iOS-versioita varten. OmniGrafflella on yksi etu tärkeimpiin kilpailijoihin verrattuna, sillä se tarjoaa JavaScript- ja AppleScript-automaation, mikä voi olla useimmille suunnittelijoille tarpeetonta, mutta tyypillisesti päätoimiset informaatioarkkitehdit arvostavat sitä.
Kaikki edellä luetellut työkalut on tehty nopeutta ja helppokäyttöisyyttä silmällä pitäen, erityisesti virtauskaavioinnin osalta, joka noudattaa lähes identtisiä periaatteita informaatioarkkitehtuurin kanssa. Muut sovellukset, kuten Balsamiq, MindMeister, MindManager tai XMind, tarjoavat samantyylistä käyttäytymistä, mutta ne on rakennettu muihin päätarkoituksiin, kuten prototyyppien luomiseen tai mielikuvakartoitukseen.
Informaatioarkkitehtuurin parhaat käytännöt
Vaikka on olemassa vain vähän määriteltyjä sääntöjä siitä, mitä informaatioarkkitehtuuri pitää sisällään, prosessia läpikäydessäsi kannattaa kuitenkin ottaa huomioon seuraavat seikat:
Älä keskity hierarkkisuuteen, keskity rakenteeseen
Tierarkkuus on säädettävissä. Kotisivu on aina kotisivu, mutta mihin se johtaa, miten käyttäjät pääsevät näihin paikkoihin ja kaikki siltä väliltä ja sen jälkeen määräytyy myöhemmin.
Kaikkien prosessien pitäisi olla loogisia
Vaikka IA UX-prosessissa on käyttäjän vuorovaikutusta varten, jokaisen vaiheen on oltava järkevä. Rekisteröintinäytöt eivät saisi johtaa asetuksiin, kameratoiminto ei saisi hypätä karttanäkymään…lista jatkuu…
Muista UX-prosessi
Yleinen virhe on, että IA:ta tehdään vain ilman resursseja, tutkimusta tai muita resursseja tai työtä. Se on kuin käskisi kirjailijaa kirjoittamaan kirjan ilman hahmotelmaa tai ohjelmoijaa koodaamaan sovelluksen ilman prototyyppejä.
Sinä olet kartografi
Kartografit ottavat kartassa huomioon kaiken, vuoristoista osavaltioiden rajoihin. Aivan kuten kartantekijät, myös suunnittelijat määrittelevät, mitä IA-suunnitteluun kuuluu. Yksittäiset sivut, erityiset käyttäjäkäyttäytymiset, päätöksentekopisteiden konteksti… ja niin edelleen.
Viime kädessä kartografi päättää käyttäjän tarpeiden perusteella, mitä kartalle tulee. Sama pätee suunnittelijoihin, joten rakentakaa IA loppukäyttäjälle eli tuotekehitys- ja suunnittelutiimille.
Informaatioarkkitehtuuri on jatkuvasti muuttuvaa ja kehittyvää
Kerratakseni asian vielä kerran, kaikki IA:t rakennetaan muutosta varten. Tuotteet kehittyvät, mallit muuttuvat, käyttäjät mukautuvat, ja sykli jatkuu yhä uudelleen ja uudelleen. Älä ota sitä liian vakavasti ja tiedä, että aina on parantamisen varaa. Älä tavoittele täydellisyyttä, vaan rakenna yksinkertainen, mukautuva vaikutustenarviointi.
Tietoarkkitehtuurini on valmis… Mitä nyt?
Yleinen käsitys on, että mikä tahansa suunnittelutyö ei ole koskaan todella valmis, ja näin on varmasti myös tietoarkkitehtuurin kohdalla. Ne kasvavat ja kutistuvat ja muuttuvat tuotteidemme mukana. Toisin kuin rakennuksen pohjapiirustus, IA kehittyy aina käyttäjien tarpeista uusiin ominaisuuksiin tai tuotteen uudistamiseen perustuen. Suuri osa rakenteesta voi pysyä samana ja tarjota johdonmukaisuutta eri versioiden välillä, jotta käyttäjät eivät mene sekaisin.
Ja se on hyvä asia. Tieto siitä, että IA on joustava dokumentti – sellainen, joka todennäköisesti muuttuu viikoittain ja joskus jopa päivittäin – on tehokas tapa ylläpitää sovelluksen tai verkkosivuston yleistä rakennetta koskematta koskaan koodiin tai luomalla uusia prototyyppejä. Mitä paremmin koko tuotekehitystiimi tuntee IA:n, sitä nopeammin kaikki tietävät, mikä on mahdollista ja mikä ei, ja kuinka vakavaa oletettu ”helppo työ” todella on.
Tästä pääsemmekin tietoarkkitehtuurin todelliseen kauneuteen: Ennalta määriteltyä lähtökohtaa ei ole. Vaikka perinteinen UX-suunnitteluprosessi sanelee, että IA rakennetaan sen jälkeen, kun on saatu valmiiksi riittävästi käyttäjävirtoja; runsaan käyttäjä- ja kilpailututkimuksen avulla varustautuneena se voi myös olla ensimmäinen asia, joka tehdään… tai viimeinen. Prototyyppiprosessi tuo usein esiin tietoa siitä, miten tiettyjen käyttäytymismallien tai toimintojen pitäisi tapahtua, joita olisi vaikea kuvitella loogisen tai mielikuvituksettoman IA:n avulla.
Jatkuvasti kehittyvänä käytäntönä IA-suunnittelu on yhtä lailla taidetta kuin taitoa, mikä on osittain syy siihen, miksi suurissa yrityksissä on informaatioarkkitehdin tehtäviä. Nämä suunnittelijat ovat massiivisten järjestelmien portinvartijoita, ja heidän ymmärryksensä tuotteen kasvusta ajan myötä auttaa ohjaamaan tuote-, suunnittelu- ja insinööritiimejä tekemään oikeita päätöksiä vuosien mittaan. Tämän mittakaavan organisaatio ei sovi kaikille suunnittelijoille, mutta jokainen suunnittelija voi rakentaa yksinkertaisen ja ymmärrettävän informaatioarkkitehtuurin.
– – – –
Suositeltavaa lukemista informaatioarkkitehtuurista
IA for the Web and Beyond
How to Make Sense of Any Mess: Information Architecture for Everybody
Information Architecture Basics
The Difference Between Information Architecture and UX Design