SISÄLLYS
1 JOHDANTO
2 INFORMAATION VISUALISOINTI
2.1 Mitä on informaation visualisointi?
2.2 Miksi informaation visualisointia tarvitaan?
2.3 Mitä hyötyä on visualisoinnista?
2.4 Diagrammit
2.4.1 Piirakkadiagrammi
2.4.2 Pylväsdiagrammi
2.4.3 Viivadiagrammi
2.5 Esimerkkejä hyvistä ja huonoista visualisoinneista
3 LÄHTÖKOHDAT SUUNNITTELULLE
3.1 Vaadin-kehitystyökalu
3.2 Google Web Toolkit
3.3 Järjestelmän rajoitteet
3.4 Ohjelmistot
4 CUUTIO
4.1 Really Helsinki Oy
4.2 Sovelluksen käyttötarkoitus
4.3 Informaation visualisointi Cuutiossa
4.4 Cuution näkymiä
4.4.1 Avainsanan yhteenveto
4.4.2 Kilpailijan yhteenveto
5 POHDINTAA
JOHDANTO
Opinnäytetyöni aiheena tutkin informaation visualisointia ja käytän löytämääni tietoa hyväksi luodessani käyttöliittymän ulkoasuja Really Helsinki Oy:n Cuutio-sovellukseen.
Really Helsinki Oy on Helsinkiläinen IT-yritys, joka tekee monenlaisia ja kokoisia projekteja verkkoon. Olen työskennellyt Reallylla jo muutaman vuoden ja olen ollut mukana erilaisissa projekteissa koskien koodaamista ja grafiikan suunnittelua. Reallyn uusin projekti on Cuutio, joka on seurantaohjelma, joka lyö yhteen monia asioita, kuten hakukonenäkyvyyden, blogi- ja Twitter-aktivisuuden. Ohjelman avulla käyttäjä voi seurata omaa ja määrittelemiensä kilpailijoiden näkyvyyttä ja aktiivisuutta.
Cuution eri näkymät ovat hyvin tietorikkaita ja suurin osa näytetystä informaatiosta on kvantitatiivista eli määrällistä dataa. Tehtävänäni on luoda mahdollisimman näyttäviä ja houkuttelevia, mutta myös selkeitä ulkoasuja sovellukseen. Tämä tuo aika lailla haasteita, koska graafisuus ei missään vaiheessa saa mennä käytettävyyden edelle. Vaikka Cuutio käytetään internetin välityksellä, on se enemmänkin sovellus kuin nettisivu. Tämä myös muuttaa hieman sitä, miltä sen pitäisi näyttää. Kaikki näyttävät asiat eivät toimi hyötyohjelmassa samalla tavalla kuin esim. tavallisilla kotisivuilla.
Tärkeimmät asiat näkymissä on tarkoitus näyttää erilaisten diagrammien avulla tehostettuna. Tällöin tarvitaan tietämystä informaation visualisoinnista. Tärkeimmät näytettävät asiat ovat mietitty Cuution kehitystiimin kesken ja minulla on niihin alustavat rautalankamallit. Tarkoitukseen parhaiten sopivat diagrammien selvittäminen on työni keskeisin tarkoitus.
Jotta voin tehdä toteutettavia ulkoasuja, pitää minun myös tutustua Cuution taustalogiikoihin jonkun verran. Cuutio toimii Javan päällä toimiva sovellus, joka hyödyntää Vaadin- ja Google Web Toolkit -kehitysvälineitä. Niiden tuomat rajoitteet pitää ennen lopullisten ulkoasujen tekoa selvittää, jotta ei tule tehtyä turhaa työtä. Kaikkia asioita, joita voi helposti tehdä tavallisille verkkosivuille, ei voi niin helposti tehdä esim. Vaadinilla.
Ennen kuin Reallyltä toimeksiannon Cuution ulkoasujen suunnitteluun ja paikalleen laittamiseen, en ollut juurikaan informaation visualisointiin tietoisesti tutustunut. Vaikka monessa koulutyössä on tullut monenlaisia diagrammeja tehtyä, oli käsite silti tuntematon. Tutustuttuani aiheeseen, huomasin informaation visualisoinnin olevan hyvin mielenkiintoinen ja yllätyin siitä, kuinka paljon mm. erilaiset muodot vaikuttavat asioiden tulkintaan. Siitä lähtien olen pannut merkille miten erilaisissa artikkeleissa, ym. saatetaan käyttää epäinformatiivisesti erilaisia visualisoinnin keinoja. Aion työssäni myös mainita huonoja esimerkkejä visualisoinneista.
Ennen projektin aloittamista aion tutustua erilaisiin diagrammeihin ja niiden käyttötarkoituksiin. Otan selville, mitä asioita pitää eri diagrammeista tietää, jotta niitä voi käyttää tehokkaasti. Hyviä esimerkkejä etsin erilaisista mm. informaation visualisointia koskevista kirjoista ja internetartikkeleista. Tekemieni visualisointien toimivuus testataan alpha-, beta- ja release-vaiheissa Cuutio-pilottiryhmällä. Pilottiryhmältä saatujen palautteiden avulla saadaan kaikki näkymät toimiviksi.
Teen Cuutioon kaikki tarvittavat ulkoasut ja liitän niistä opinnäytetyöhöni kaksi tärkeintä. Tärkeimmät näkymät ovat avainsanan yhteenvetosivu ja kilpailijan yhteenvetosivu. Nämä ulkoasut ja opinnäytetyöni liitetään osaksi Tekesin rahoitushakemusta.
INFORMAATION VISUALISOINTI
LÄHTÖKOHDAT SUUNNITTELULLE
CUUTIO
POHDINTAA
LÄHTEET
Few, Stephen 2006. Information Dashboard Design: The Effective Visual
Communication of Data. Sebastopol: O’Reilly Media, Inc.
Few, Stephen 2009. Now You See It: Simple Visualization Techniques for
Quantitative Analysis. Oakland: Analytics Press.
Fry, Ben 2008. Visualizing Data: Exploring and Explaining Data with the Processing
Environment. Sebastopol: O’Reilly Media, Inc.
Bar chart, Wikipedia [Verkkodokumentti] <http://en.wikipedia.org/wiki/Bar_chart
>
(luettu 9.1.2011).
Irwin, Terry 2002. Information design [Verkkodokumentti]
<http://www.aiga.org/content.cfm/information-design> (luettu 9.1.2011).
Krug, Steve 2006. Don't Make Me Think! A Common Sense Approach to Web
Usability. Kalifornia: New Riders.
Line chart, Wikipedia [Verkkodokumentti] <http://en.wikipedia.org/wiki/Line_chart>
(luettu 9.1.2011).
McCandless, David 2009. Interesting, Easy, Beautiful, True? [Verkkodokumentti]
<http://www.informationisbeautiful.net/2009/interesting-easy-beautiful-true/>
(luettu 10.1.2011).
Purdy, Kevin 2009. When to Use Bar Charts Instead of Pie Charts [Verkkodokumentti]
<http://lifehacker.com/5347490/when-to-use-bar-charts-instead-of-pie-charts>
(luettu 9.1.2011).
Smith, David 2009. How pie charts fail [Verkkodokumentti]
<http://blog.revolution-computing.com/2009/08/how-pie-charts-fail.html>
(luettu 10.1.2011).
Vaadin, Vaadin Ltd. [Verkkodokumentti] <http://vaadin.com/learn>
(luettu 10.1.2011)