Kaikki käyttöliittymiä suunnitelleet tietävät, kuinka kätevää on luoda käyttöliittymästä rautalankamalli ennen varsinaisen graafisen ulkoasun lukkoonlyömistä. Rautalankamalli esittää näppärästi mm. sisällön, toiminnot ja navigointirakenteen ja antaa osviittaa visuaalisesta ilmeestäkin samassa paketissa – ennen kuin yhtään riviä koodia on väännetty tai kuvia piirrelty. Käytännössä kuitenkin on miltei mahdotonta, ettei rautalankamallia tulkittaisi ikään kuin se olisi jo valmis käyttöliittymä. Niin simppeliä mallia ja selväsanaista tulkintaohjeistusta ei olekaan, etteikö sanomista tule – jos ei muusta niin esimerkkitekstinä käytetystä loremipsumista. Mustaa ja valkoista lukuunottamatta muiden värien käyttö on ankarasti kielletty, sillä aina joukossa on joku, joka vihaa vaikkapa perussinistä linkkiväriä.
Ilmeisesti on osa ihmisluontoa, että kun eteen pistetään vaikka kuinka lyijykynällä vedetty viivapiirros käyttöliittymästä, sitä aletaan napostella palasiksi. Ratkaisuksi ehdotetaan sivunkuvauskaavioita, jotka käytännössä ovat rautalankamalleja sanallisessa muodossa (katso esimerkki [pdf]). Olen joskus kokeillut vastaavaa kuvaustapaa, ja se osoittautuikin hyödylliseksi: miinuksena tosin se, että kaavioiden läpikäynti on vähintäänkin yhtä työlästä kuin rautalankamallien, ja edellyttää asiakkaalta suurempaa ajallista panostusta, koska luettavaa on enemmän. Ihanteellisinta koko suunnitteluprosessin kannalta olisi luoda ja hyväksyä ensin sivukohtaiset kuvaukset, ja tehdä niiden perusteella rautalankamallit ennen varsinaista graafista ilmettä, mutta käytännössä (ajalliset=rahalliset) resurssit tulevat pian vastaan. Toteutusohjeena tämä kombinaatio toi kuitenkin kosolti kiitosta insinööreiltä, ja onnistui sikäli toimimaan oivallisena leikkauspisteenä asiakkaan ja nörttiosaston välillä. Kokeilemisen arvoinen juttu, jos mahdollisuudet antavat myöten. [via]
Mä käytän webbisuunnittelussa yleensä ”organisaatiokaaviota” eli sitä haarautuvien laatikojen sumaa jolla yleensä kuvataan firmojen hierarkioita. teen kuvani joko ihan perinteisesti ylhäältä alaspäin laajenevana ja haarautuvana, tai vasemmalta oikealle menevänä. Riippuu mm. alasivujen määrästä ja sisäisistä linkeistä kumpi sopii paremmin. Laatikoihin sisältö otsikkotasolla ja ranskalaisilla viivoilla. On toiminut ihan hyvin.
Siinähän tulee siis kuvattua pääasiassa informaatioarkkitehtuuri, eikö niin? Miun kokemusten mukaan monien asiakkaiden on tosi vaikea hahmottaa niitä laatikoita – joita toki itekin piirtelen. Nuo rautalankamallit ovat oikeastaan ”järjestyksessä” seuraava vaihe, kun rakenne on saatu mietittyä valmiiksi ja halutaan kuvata sivujen sisältöä ja elementtejä tarkemmin.
Juu informaatioarkkitehtuuri nimeonomaan. saattaa kuulostaa idealistiselta mutta ajatukseni on se että jos informaatioarkiitehtuuri on saumattomiasti yhteydessä sisältöön (otsikotasolla tai yhdellä lauseella), se on niin loogista että useimmat ymmärtävät miksi kukin juttu on milläkin sivulla, ja yleensä se on kelvannut ja riittänyt, mutta olenkin tehnyt vain suhteellisen pieniä sivustoja. ja sit ”organisaatiokaavion” lisäksi vielä lista kaikille sivuille yhteisistä elementeistä kuten valikosta ja logosta tms..
kerran tein käytettävyystutkimusta yhdestä sivustosta joka oli niin sekava etten meinannut millään pystyä kääntämään ”prosessiani” ja tekemään niistä sivuista em. kaaviota. ei hyvä.
Tuo on ilman muuta hyvä ja kannatettava systeemi, jos kaikki osapuolet ymmärtävät mistä on kyse. Mutta usein tilaaja haluaa jotain speksiä käyttöliittymästä, jolloin rautalanka on melkein ainoa vaihtoehto; miun kohdalla monesti ollaan uudistamassa käyttöliittymää käytettävyystestauksen jälkeen. Voi olla niinkin, ettei rakenteeseen voi eikä saa juuri kajota, vaan on pitäydyttävä just siinä mitä ruudulta näkyy.
Itse olen havainnut parhaaksi tavaksi käyttää käsinpiirrettyjä käyttöliitymähahmotelmia ja kuvasarjoja. Kun kuvia ei ole piirretty koneella, asiakkaat suhtautuvat niihin paljon helpommin vedoksina. Piirtotyöläyttä voi vähentää skannaamalla käsin piirrettyjä kuvia tai näytönosia ja leikkaa/liimaamalla niitä esim. powerpointilla näyttökuviksi.
Olennaista on joka tapauksessa, että käytää mahdollisimman oikeaa esimerkkidataa ja että kuvasarjat kuvaavat realistisia käyttötapauksia: näin asiakas ymmärtää paremmin mitä sovelluksessa tapahtuu ja itsekin tulee tarkistaneeksi, että mahtuuhan se osoite oikeasti tuohon kohtaan näyttöä.
Itselläni on toiminut yllättävän hyvin sellainen mitoitus, että kun A3-kokoiselle paperille piirtää näyttökuvan käsin, niin se mahtuu yleensä vielä aika hyvin 1024 *768 monitorille puhtaaksipiirrettynä.
Jep, tämä on myös hyväksi havaittu tapa. Siinä on vielä sekin plussapuoli, että pääsee piirtelemään jotain käsin, mikä on nykyisin varsin harvinaista herkkua. Silloin kun pöydällä on käsin piirrettyjä papereita, eikä edes powerpointteja heijastettuna seinälle, on jostain syystä kaikkien osapuolten useimmiten helpompaa ”pysyä asiassa”.