Referenssit

Referenssi, lat. referre + entia.

Havainnekuvain

Havainnekuvain: otsikkokuva

Osalle kaupunkilaisista osallistuminen kaupungin kehittämisestä käytävään keskusteluun tuntuu tyssäävän siihen, ettei tietoa asioista tunnu löytyvän helposti.

Maankäyttö- ja rakennuslain 62 §:n mukainen vuorovaikutus ei toteudu riittävästi pelkästään asettamalla ehdotukset ja luonnokset nähtäville lain minimivaatimusten mukaisesti. Nykyajan kiireisessä ja ajankäytön kannalta haastavassa toimintaympäristössä täytyy tahojen joiden oloihin ja työntekoon kaava huomattavasti vaikuttaa saada selkeää ja suoraa tietoa asiasta. Jos tietoa täytyy erikseen hakea työläästi viranomaisilta, kuluu tehollista työaikaa tällaiseen suoraan tuottamattomaan toimintaan jolloin entisestään heikennetään sitä tulosta jonka kaupallinen toiminta yhteiskunnan hyväksi tuottaa.

Valitus Hämeenlinnan hallinto-oikeuteen Rastin korttelista

Silloin tunteet pääsevät valloilleen ja niitä tuuletellaan lehtien palstoilla ja kaavatilaisuuksissa. Mutta jos kaava-aineistosta mielestäni tärkeimpään, havainnekuviin, pääsisi tutustumaan sekä kommentoimaan helposti, saattaisi osallistuminen tuntua mielekkäämmältä.

Kaavaprosessi ja havainnekuvat

Kaavaprosessissa on useita vaiheita, joissa havainnekuvia voidaan käyttää ja käytetään.

Asemakaavan käsittelyn vaiheet

Kaikki vaiheet, joissa pyydetään kommentteja, mielipiteitä tai lausuntoja, ovat havainnekuvien käytölle otollisia. © Tampereen kaupunki

Havainnekuvien vertailu

Havainnekuvaimen toiminta perustuu arkkitehtuuri- ja rakennussuunnittelussa käytettävän luonnos- eli skissipaperin periaatteelle. Skissipaperi levitetään olemassa olevan suunnitelman päälle ja läpikuultavana skissipaperi sallii läpipiirtämisen alla olevasta kuvasta.

Havainnekuvaimessa eri kaavavaiheiden havainnekuvat näytetään kerroksina nykytilannetta esittävän (valo)kuvan päällä. Kerroksia voidaan tuoda näkyville tai poistaa näkyvistä niin haluttaessa ja kerroksien läpinäkyvyyttä voi säätää. Jos havainnekuvia on olemassa eri kuvakulmista, niin niiden välillä voi myös liikkua.

Jokaiselle kerrokselle voi tehdä merkintöjä, joko piirtämällä, kirjoittamalla tai molemmilla tavoilla. Muiden käyttäjien tekemien merkintöjen näyttäminen voi antaa ideoita tai palauttaa mieleen omia havaintoja havainnekuvista. Oheisissa prototyypeissä ei ole mahdollisuutta muiden käyttäjien tekemien merkintöjen näyttämiseen.

Havainnekuvia päällekkäin esittäessä täytyy vain huomioida se että ne ovat täysin kohdakkain nykytilannetta esittävän kuvan ja toistensa kanssa. Tämä vaatinee näkemystä havainnekuvien tekijältä, koska kuvakulmat lukitaan aikaisessa vaiheessa prosessia.

Mobiililaitteissa on myös mahdollista käyttää hyväkseen lisättyä todellisuutta, jolloin havainnekuvan voi liittää laitteen kameran näyttämään kuvaan ja merkinnät tehdä tähän kuvaan.

Prototyypit

Perustilassa käyttöliittymässä näkyy havainnekuva ja sen alapuolella vasemmalla kuvakulma- ja kerrosvalinnat, oikealla piirros- ja kirjoitustyökalu

Käytettävät työkalut oikealla, kuvakulma- ja kerrosvalinnat vasemmalla

Kuvakulma- ja kerrosvalikot aukeavat alareunasta kuvan päälle. Kerrosvalikossa liu'ut, joilla voidaan säätää kerrosten läpinäkyvyyttä ja silmäikonit, joilla voidaan näyttää ja piilottaa kerros.

Kuvakulma- ja kerrosvalikko: kerrosvalikossa on myös kerrosten läpinäkyvyys ja näkyminen.

Piirros- ja tekstityökaluilla on tehty merkintöjä havainnekuvaan, muun muassa piirretty lisää ikkunoita. Havainnekuva on osin läpinäkyvä.

Piirros- ja tekstityökaluilla voidaan tehdä halutut merkinnät näytölle.

Muuta

Harava ja Maptionnaire ovat samalla periaatteella toimivia palveluita mutta ne toimivat karttaperustaisesti.

Tämä oli ensimmäinen nopeista suunnittelutehtävistäni. Edellisessä meni kauan, joten kehitin säännöt nopeita konseptointiharjoituksia varten:

  • Konseptin / UX-suunnitelman täytyy olla valmis yhdessä työpäivässä (8 tuntia).
  • Tekstisisällön tulee mahtua enintään kahdelle sivulle.
  • Idea ja muistiinpanot saavat olla olemassa ennen harjoituksen alkamista.

Parhaat paikat

Parhaat paikat, otsikkokuva

Minulla on ongelma. Ongelma liittyy elokuvissa käymiseen ja lippujen tilaamiseen. En koskaan muista missä olen tietyssä salissa istunut tai että oliko paikka mitenkään hyvä. Tiettynä peukalosääntönä voi pitää sitä, että keskellä riviä, hieman keskimmäisen rivin takana on hyvät paikat. Olen kuitenkin huomannut, ettei tämä pidä aina paikkaansa.

Olen koittanut ratkaista ongelman kirjoittamalla ylös mitä mieltä olin paikasta, jossa istuin. Tämä ei kuitenkaan ole mitenkään tehokasta, enkä välttämättä edes muista tehdä sitä aina kun käyn elokuvissa.

Parhaat paikat?

Keskellä salia olevat paikat, varsinkin pienemmissä saleissa, voivat olla liian lähellä valkokangasta kun valkokankaalla tapahtuu paljon, eikä yksityiskohtiin ehtisi paneutua. Jos elokuvassa näyttelijäntyö on pääosassa, niin liian kaukana oleva paikka voi hävittää tärkeitä yksityiskohtia.

Kuulin myös entiseltä Finnkinon työntekijältä, että 3D-elokuvia kannattaa katsoa lähempää kuin 2D-elokuvia. En muutamaa poikkeusta lukuun ottamatta ole katsonut 3D-elokuvia, joten en voi asiaa varmistaa. Mutta tiedän että 3D-elokuvissa näytetään joka toinen kuva vasemmalle silmälle ja joka toinen kuva oikealle silmälle. Tällöin verkkokalvolle tulevan valon määrä puolittuu, ellei sitten projektorin valotehoa tai kuvien määrää (HFR, high frame rate) lisätä.

Parhaat paikat!

Aion ratkaista ongelmani kehittämällä konseptin applikaatiosta, joka kertoo millä paikoilla elokuvateatterin salissa olen itse istunut ja pidinkö paikoista sekä millä paikoilla muut ovat istuneet ja pitivätkö he paikoista.

Sovelluksen pitää mielestäni siis toteuttaa seuraavat päämäärät:

  • Haluan nähdä missä on salin paras paikka
  • Haluan muistaa missä olen istunut ja millaiset ne paikat olivat
  • Haluan arvostella paikan, jolla istuin.

Eikä tästä ole hyötyä ainoastaan minulle tai muille elokuvien ystäville, myös elokuvateattereiden henkilökunta osaa paremmin vastata salin parhaista paikoista kyseleville asiakkaille.

Suunnittelu

Koska olen UX-suunnittelija ja tämä on vain konsepti, aion vain suunnitella sovelluksen enkä toteuttaa sitä.

Vuorovaikutus

Vuorovaikutusta suunniteltaessa kysyn ensiksi kolme kysymystä:

  • Miksi käyttäjä haluaisi olla vuorovaikutuksessa tuotteen kanssa?
    • Käytännössä tämä tarkoittaa niitä päämääriä, jotka käyttäjä haluaa tuotetta käyttämällä saavuttaa. Tähän voidaan myös yhdistää muiden sidosryhmien asettamat päämäärät.
  • Kuinka vuorovaikutus saadaan aikaiseksi, miten vuorovaikutukseen kannustetaan?
    • Käyttäjä ei välttämättä käytä tuotetta vain siksi että se tekee päämäärien saavuttamisesta helppoa. Tietty tuote voidaan alitajuisesti ottaa käyttöön myös sen tuoman arvostuksen vuoksi.
  • Mitä vaaditaan hyvään vuorovaikutukseen?
    • Järjestelmälle asetetut vaatimukset, jotka vaikuttavat vuorovaikutukseen.

Miksi

Vastaukset ensimmäiseen kysymykseen löytyvät jo ongelman määrittelystä:

  • Haluan nähdä missä on salin paras paikka
  • Haluan muistaa missä olen istunut ja millaiset ne paikat olivat
  • Haluan arvostella paikan, jolla istuin.

Nämä ovat käyttäjän itselleen asettamia päämääriä. Näiden lisäksi myös muut sidosryhmät saattavat haluta asettaa päämääriä, jotka käyttäjän olisi saavutettava. Parhaat paikat -applikaatiossa muiden sidosryhmien asettamat päämäärät voivat liittyä vaikka leffaeväiden hankkimiseen.

Päämäärät voidaan asettaa tärkeysjärjestykseen esimerkiksi sen mukaan kuinka usein ne tulevat esille sidosryhmäkeskusteluissa tai tulevien käyttäjäryhmien kartoituksen yhteydessä. Tässä yhteydessä sidosryhmät ja tulevat käyttäjät ovat yksi ja sama: minä, ja olen päättänyt että päämäärien tärkeysjärjestys on ylläoleva.

Kuinka

Minulle applikaatio tulee tarpeeseen, jonka olen jo kartoittanut mutta kaikki käyttäjät eivät välttämättä ole huomanneet piileviä tarpeitaan. Ei kuitenkaan ole kannattavaa yrittää luoda tarvetta, joka voidaan täyttää applikaatiolla.

Mutta kun käyttäjä huomaa että applikaatiosta on hänelle hyötyä, niin millaisilla vuorovaikutuksen muodoilla käyttäjä saadaan palaamaan käyttämään applikaatiota?

Käyttäjäkokemuksesta puhuttaessa ei sovi unohtaa helppokäyttöisyyttä, kuinka helposti eri salien arvostelut tai itse tehdyt arvostelut ovat löydettävissä. Mahdollisia ovat myös käyttäjän itsestään antamaa kuvaa vahvistavat toiminnot.

Palkitseminen

Voidaan myös puhua palkitsemisesta yhdistettynä ulkoista kuvaa vahvistaviin toimintoihin. Käyttäjä voi jakaa tekemänsä paikka-arvostelun, koosteen paikka-arvosteluista tai mahdolliset saavutuksensa paikkojen arvostelusta. Saavutuksia voivat olla:

  • Eksperttimittari ja siinä saavutetut tasot: taso voidaan esimerkiksi laskea arvostelujen määrästä ja siitä kuinka arvosanat vertautuvat keskiarvoihin. Mittarin lukeman määräytymisen perustelut pitää myös esittää.

    LinkedIn-profiilissa oleva, täyttyvältä astialta näyttävä mittari, joka esittää profiilin laadun.

    LinkedIn-profiilin tasoa kuvaava mittari.

  • Swarm (ex-Foursquare) / Stack Exchange -tyyppiset kunniamerkit sen mukaan montako paikkaa on arvostellut per sali, monestako eri salista on arvostellut paikkoja, monellako eri paikkakunnalla on arvostellut paikkoja ja niin edelleen.

    Stack Exchangen kunniamerkit ja niiden selitykset.

    Stack Exchangessa käytössä olevia kunniamerkkejä.

Mitä

Hyvään vuorovaikutuksen edellytyksenä on toimiva järjestelmä, joka vastaa käyttäjän pyyntöihin nopeasti ja tehokkaasti. Toimivalla järjestelmällä on myös pääsy kaikkiin niihin resursseihin, joita käyttäjä odottaa tarvitsevansa.

Vuorovaikutus II: Vuorovaikutuksen toteutus

Seuraavassa käsitellään sitä miten applikaation toiminnallisuudet voidaan parhaiten toteuttaa, jotta toiminnallisuus mahdollisimman hyvin täyttää edellisen kohdan vastausten vaatimukset.

Miksi

Vastaus kysymykseen miksi ja siten syihin joiden takia applikaatiota käytettäisiin löytyivät käyttäjän päämääristä:

  • Haluan nähdä missä on salin paras paikka
  • Haluan muistaa missä olen istunut ja millaiset ne paikat olivat
  • Haluan arvostella paikan, jolla istuin.
Haluan nähdä missä on salin paras paikka

Tämä päämäärä on huonosti määritelty ja vaatii tarkentamista. Päämäärä ei kerro yksiselitteisesti mistä salista on kyse. Onko kyse salista, jossa käyttäjä useimmin käy vai onko kyseessä kenties sali jollain toisella paikkakunnalla, jossa käyttäjä ei ole koskaan käynyt?

Päämäärä on kuitenkin määritelty kaikkein tärkeimmäksi, joten sen tulee olla helposti saavutettavissa, luultavasti jopa ensimmäiseltä näytöltä.

Jos kuitenkin halutaan tarjota käyttäjän nähtäville kaikki salit, joissa paras paikka voi olla sillä hetkellä, saatetaan päätyä esteettisesti ja informaatiosisällöltään tukkoiseen pääsivuun, joka ei ole miellyttävä käyttää.

Sali, jossa paras paikka on, voi olla:

  • Lähin sali
  • Kaikkien käyttäjien suosikkisali
    • Sali, jossa on eniten arvosteluita
    • Sali, jossa on parhaat arvostelut
  • Oma suosikkisali
    • Sali, josta on antanut eniten arvosteluita
    • Sali, jolle on antanut parhaat arvostelut
  • Sali, jossa käydään useimmin
  • Käyttäjän omien kriteerien mukaiset salit
  • Joku muu, sali, joka löytyy salihaulla.

Sali, jossa käydään useimmin on käytännössä sama kuin sali, jolla on eniten arvosteluja. Tästä syystä sen näyttäminen vain lisää käyttöliittymän tukkoisuutta ja siksi se jätetään pois. Lisäksi eniten arvosteluita saaneita saleja ei tarvinne esittää erikseen, riittää että arvosteluiden määrä ilmoitetaan salin arvosanan yhteydessä.

Haluan myös nähdä useamman saman kategorian salin yhtä aikaa, joten salit pitää pystyä listaamaan tai näyttämään listana. Listojen esittämiseen on useitakin tapoja, joista tarkastellaan kolmea:

  • Listat ovat sivulla päällekkäin
  • Listat ovat sivulla päällekkäin mutta akkordiossa
  • Listat ovat sivulla vierekkäin.

Jos listat ovat sivulla päällekkäin, niin mobiiliapplikaatiossa sivusta voi tulla hyvinkin pitkä, varsinkin, jos ei tiedetä kuinka pitkä yksittäisestä listasta voi tulla ja liikkumisesta listasta toiseen vaivalloista. Siitäkin huolimatta että listojen välistä liikkumista helpotettaisiin ankkurilinkkejä käyttämällä.

Ankkurilinkeillä varustettu listaus on selvästi ruudun korkeutta korkeampi

Ankkurilinkkien kanssa listaus on selvästi näyttöä korkeampi.

Päällekkäiset listat akkordiossa helpottavat liikkumista listasta toiseen tuomalla ne, ainakin näennäisesti, lähemmäksi toisiaan. Akkordiossa käyttäjä voi helposti luulla joutuneensa uudelle sivulle, ellei akkordion aukeamiseen kiinnitetä huomiota.

Akkordio on kiinni ja akkordio on auki. Tilaa säästyy ankkurilinkkeihin verrattuna

Akkordiot käyttäytyvät korkeussuunnassa paremmin kuin ankkurilinkit.

Vierekkäin sivulla olevien listojen välillä liikkumisessa on samat ongelmat kuin päällekkäin olevien listojen kohdalla, yhdeltäkään listalta ei esimerkiksi ole suoraa pääsyä kuin siihen listaan, joka on nykyisen listan vieressä. Listojen väliset etäisyydet (otsikoiden välillä mitattuna) ovat kuitenkin pienemmät.

Rinnakkaiset listat näkyvät avaruudessa päällekkäin

Rinnakkaiset listat liukuvat toistensa päälle avaruudessa.

Koska olen itse applikaation kohderyhmä ja suunnittelen tätä itselleni, ja koska pidän Ylen Uutisvahti-applikaatiosta, käytetään tässäkin applikaatiossa listojen esittämiseen vierekkäisiä listoja Uutisvahdin tapaan.

Haluan muistaa missä olen istunut ja millaiset ne paikat olivat

Eli “Omat paikat”. Ongelma, joka tässä pitää ratkaista on se halutaanko paikat, joissa käyttäjä on istunut tuoda erikseen esille vai riittääkö niiden tuominen esille muissa yhteyksissä?

Kuvitellaanpa pieni skenaario: Uusin DC-leffa on tulossa ensi-iltaan ja ajattelit käydä katsomassa sen ensi viikon keskiviikkona. Et tiedä missä teatterissa se menee, tiedät vain sen, että sinulla on aikaa ensi viikon keskiviikkona. Tarkistat siis ensiksi missä teatterissa, missä salissa ja monelta elokuva menee, sitten voit tarkistaa millä paikalla kyseisessä teatterissa ja salissa kannattaa istua sekä lopulta varata liput kyseiseen näytökseen. (Mieti jos tämän kaiken voisi hoitaa yhdessä ja samassa applikaatiossa.)

Tiedän että tällainen skenaario on omalla kohdallani todennäköisempi kuin se, että haluaisin istua taas jollain tietyllä paikalla, tietyssä salissa. Elokuviin mennään katsomaan elokuvaa, ei välttämättä istumaan sille samalle paikalle, jolla näit Philomenan.

On kuitenkin olemassa käyttäjiä, jotka saattavat haluta tietää millä paikalla he ovat istuneet, kuulun itsekin heihin, ei tämä vaatimus muuten olisi tullut esille.

Minulle kuitenkin riittää että voin tarkistaa salikartasta olenko ollut aiemmin salissa ja jos olen, niin millä paikoilla ja mitä pidin kyseisistä paikoista.

Haluan arvostella paikan, jolla istuin

En ole varma haluanko arvostella paikan, jolla juuri istuin, ellei siitä ole minulle hyötyä ja jos en voi tehdä sitä helposti.

Paikan arvostelusta on hyötyä, koska osaan seuraavalla kerralla valita samasta salista hyvän paikan. Samalla voin auttaa muita löytämään salin parhaat paikat. Pääsen myös kehuskelemaan muille kuinka paljon olen käynyt elokuvissa ja että olen osallistunut paikkojen arvosteluun.

Paikan arvostelusta voi tehdä helpompaa muistuttamalla käyttäjää arvostelusta heti näytöksen jälkeen. Lisäksi arvostelutapahtuman tulee olla mahdollisimman vaivaton: yksi näyttö ja valmis.

Kuinka

Käyttöliittymien ja vuorovaikutuksen tulee muutenkin olla opittavia ja muistettavia, jolloin niiden käyttö on helppoa ja nopeaa. Missään vaiheessa käyttäjän ei pitäisi jäädä miettimään mitä juuri tapahtui tai miten pääsen tästä eteenpäin.

Vuorovaikutuksen tulee olla johdonmukaista ja samanlaisissa tilanteissa yhteneväistä. Kun liikutaan informaatioarkkitehtuurissa samaan suuntaan, näyttöjen väliset animaatiot ovat samansuuntaisia. Kun siirrytään syvemmälle tasolle uusi näyttö liukuu alhaalta vanhan päälle ja kun palataan takaisin, nykyinen näyttö liukuu pois edellisen näytön päältä.

Alemmilta tasoilta palataan ylemmille tasoille vetämällä nykyistä näyttöä alaspäin, jolloin se poistuu edellisen näytön päältä.

Tämä toimii hyvin jos ajatellaan pelkästään salien selausta. Mutta entä sitten kun lähdetään liikkeelle käyttäjäprofiilista tai salihausta, mikäli salihaku ei ole yhdessä salien selausten kanssa. Miten esitetään siirtyminen suuremmasta osiosta toiseen kun pienempien osioiden (salilistausten) välillä liikutaan vaakasuoraan?

Jos lähestytään ongelmaa Googlen Material Designin tavoin paperiarkkeina, niin suurempiakin osioita voidaan pitää paperiarkkeina, jotka ovat päällekäin tilassa. Kuinka sitten tuodaan paperiarkki toisen päälle, kun sivuista päälle liu’uttaminen on jo käytössä?

Material Design kuitenkin sallii paperiarkkien yhdistämisen yhdeksi uudeksi paperiarkiksi. Material Design ei kiellä sitä, etteikö yhdistettävillä paperiarkeilla saisi olla tekstiä. Käyttäjänä häiriintyisin kuitenkin näytöllä yhdistyvistä teksteistä, joten keksitään jotain muuta.

Toinen vaihtoehto on häivyttää näytön sisältö kun siirrytään toiseen suurempaan osioon ja tuoda uusi sisältö vähitellen esiin. Häivytyksessä ja esiin tuonnissa käytetty animaatio ei saa kuitenkaan olla liian pitkä. Googlen oma Inbox-applikaatio käyttää tätä tekniikkaa.

Kolmas vaihtoehto on tuoda uusi sisältö vanhan tilalle ilman animaatiota, kuten Google tekee Inbox-applikaationsa verkkoversiossa.

Minua miellyttää vaihtoehdoista eniten sisällön häivyttäminen ja uuden sisällön esille tuonti pienen animaation kautta.

Haku

Applikaation haku perustuu ennakoivaan tekstinsyöttöön. Ennakoiva tekstinsyöttö palauttaa ensisijaisesti kaupungin, jos se tunnistaa sen syötteestä.

Jos käyttäjä tietää mihin elokuvateatteriin hän on menossa tai jopa mihin saliin, hän luultavasti kirjoittaa hakukenttään elokuvateatterin nimen ja hakee nimellä. Ollessaan oudossa kaupungissa, käyttäjä hakee saleja ja elokuvateattereita todennäköisesti kaupungin nimellä. Missä tilanteessa käyttäjä ei sitten tiedä elokuvateatteria, johon on menossa tai kaupunkia, jossa on tai jossa haluaa käydä elokuvissa?

Palkitseminen

Salien arvosteluista saatavia palkintoja laitetaan esille käyttäjän profiiliin. Samalla ne toimivat käyttäjän statusta kohottavina elementteinä. Näillä kunniamerkeillä voi olla eri tasoja.

Palkintoja (tai kunniamerkkejä) saa sen mukaan montako paikkaa on arvostellut per sali, monestako eri salista on arvostellut paikkoja, monellako eri paikkakunnalla on arvostellut paikkoja ja niin edelleen.

Stack Exchange -kunniamerkit jaoteltuna tyypeittäin: kultaiset, hopeiset ja pronssiset.

Kunniamerkit näkyvät Stack Exchange -profiilissa muun muassa näin.

Arvosteltuja paikkoja voidaan käyttää myös eräänlaisena palkitsemisen muotona. Käyttäjäprofiilissa voidaan listata kaikki arvostellut paikat sekä salit, joissa arvostellut paikat sijaitsevat. Näitä lukuja verrataan sitten muiden käyttäjien vastaaviin lukuihin. Arvostelluista paikoista olisi tietysti myös linkitys siihen saliin, jossa paikka sijaitsee.

Stack Exchangen vertailu muihin käyttäjiin saatujen pisteiden mukaan.

Ihminen on kilpailullinen eläin.

Mitä

Applikaation integrointi teatterien lippujärjestelmään mahdollistaa elokuvakäynnin todentamisen ennen arviointia ja arvioinnista muistuttamisen näytöksen loputtua. Integraatio lippujärjestelmään sivuuttaa myös tarpeen yksittäisen paikan etsintään arvostelua tehtäessä.

Suunnittelu II: Prototypointi

Alkutila

Salilistauksessa näkyy salit arvonsanan mukaisessa järjestyksessä, saleista ilmoitetaan myös paikkakunta.

Salilistauksessa näkyy arvosanan ja salin nimen lisäksi paikkakunta.

Applikaation alkutilassa eli ensimmäisessä näytössä ovat listattuna kaikkien käyttäjien arvostelemat salit, käyttäjän arvostelemat salit paremmuusjärjestyksessä ja käyttäjän kriteerien mukaiset salit sekä käyttäjää lähinnä olevat salit.

Listauksen alkioissa esitettävät tiedot ryhmitellään siten, että tärkeimmät asiat ovat oikealla ja vähemmän tärkeät vasemmalla. Koska kaikki listat eivät välttämättä ole paremmuusjärjestyksessä, voidaan epävarmuus järjestyksestä poistaa esittämällä salin arvosana tärkeimpänä. Arvostelujen määrä voidaan esittää arvosanan yhteydessä.

Salin nimi ja paikkakunta esitetään arvosanan vasemmalla puolella. Salin paikkakunta esitetään, koska on mahdollista että samannimisiä elokuvateattereita on useampia.

Listausten välillä liikutaan joko välilehtien avulla tai sivuttaisilla sormieleillä.

Haku ja hakutulokset

Käynnistetty haku, jossa näkyy millä periaatteella ehdotetu haut näkyvät

Hakuehdotuksissa kaupunki ensiksi.

Hakukenttä osaa ehdottaa sopivia hakuja samalla kun käyttäjä kirjoittaa hakukenttään. Ehdotuksissa on etusijalla kaupunki, mikäli hakukentän syöte tuntuisi vastaavan kaupunkia. Haku käynnistyy joko valitsemalla hakuehdotus tai painamalla hakunäppäintä (jos sellainen näppäimistössä on, muuten enter).

Hakutulokset esitetään samanlaisena listauksena kuin salien selauksessa ja ne esitetään arvosanan mukaisessa järjestyksessä. Tietyn haun voi tallentaa hakutuloksista salilistaukseksi aloitusnäytölle.

Sali

Salin istuinten arvosanat näkyvät lämpökarttana

Valkohehkuiset paikat ovat arvosanoiltaan korkeampia.

Salinäkymän istuinkartassa tulee esille applikaation työnimi: Hot Seats. Istuinten saamat arvosanat nimittäin esitetään lämpökarttana, jossa paremman arvosanan saaneet paikat ovat väreiltään kuumempia ja huonomman arvosanan viileämpiä.

Paikan zoomaus näyttää halutun paikan keskitytesti ja kertoo paikan sijainnin ja arvosanan.

Salin paras paikka?

Istuinkarttaa voi zoomata vapaavalintaisesti. Yksittäistä istuinta näpäyttämällä saa esille paikan yksityiskohtaisemmat tiedot, kuten arvosanan ja arvostelujen määrän. Samalla paikka suurenee ja esille tulee yksityiskohtaiset tiedot. Edelliseen näkymään pääsee näpäyttämällä valittua istuinta uudestaan.

Omat paikat -valinnalla näytetään arvosteltuina paikkoina vain ne paikat, jotka käyttäjä on arvostellut.

Hyvillä paikoilla sattunut istumaan.

Omat paikat saa näkyville painamalla “Omat paikat” -nappia, jolloin salikartassa näytetään ainoastaan käyttäjän itsensä arvostelemat paikat.

Profiili

Käyttäjästä ei välttämättä tarvitse tietää mitään muuta kuin se, että käyttäjän taustalla on vain yksi henkilö. Muuten arvostelut eivät ole arvostelijan henkilökohtaisia mielipiteitä.

Käyttäjän asuinpaikalla voi olla merkitystä, jotta tiedetään mitä elokuvateattereita hän preferoi. Muillekin käyttäjille voi paikkakunnasta olla apua samasta syystä.

Profiilissa esitellään myös käyttäjän kunniamerkit sekä paikat, jotka käyttäjä on arvostellut. Kunniamerkit ja arvostellut paikat ovat omilla välilehdillään, joiden välillä liikutaan kuten salilistaustenkin välilehdillä: sormieleillä tai näpäyttämällä välilehteä. Kooste kunniamerkeistä ja arvostelluista paikoista näkyy profiilin perustiedot-välilehdellä.

Profiilissa on kolme välilehteä: perustiedot, kunniamerkit ja omat paikat.

Profiilin kolme välilehteä: perustiedot, kunniamerkit ja omat paikat.

Asetukset

Asetuksissa voi vaikuttaa siihen järjestykseen, jossa salilistaukset näkyvän aloitusnäytöllä ja poistaa tallennettuja sali- tai kaupunkihakuja sekä muuttaa oman profiilin asetuksia.

Salilistausten järjestystä muutetaan raahaamalla listausten otsikoita listalla. Profiilin asetuksissa ei tällä hetkellä ole muuta kuin oman paikkakunnan muuttaminen ja profiilikuvan muuttaminen.

Arvostelu

Kosketusnäyttöjen ongelma on se että osoitin, käytännössä sormi peittää osoitettavan kohteen. Kuinka siis voidaan valita luku helposti ilman että peitetään valittava luku.

Valinta onnistuisi näppäimistöltä, kunhan vain näppäimistössä on pelkästään ne luvut, joiden joukosta valinta pitää tehdä. Valintaa ei kannata hidastaa esittämällä käyttäjälle virheilmoitusta väärästä valinnasta.

Koska tämä on kuitenkin konsepti, niin koitetaan jotain uutta: arvostelu suoritetaan vain yhtä nappia painamalla (kahta, jos tallennus huomioidaan). Nappia painamalla annettava arvosana kasvaa yhdellä ja kun päästään suurimpaan mahdolliseen arvosanaan, näytetään seuraavana taas pienin arvosana.

Arvostelun tallentamisen jälkeen applikaatio palaa aloitusnäytölle.

Arvostelussa on vain yksi nappi ja näytettävä arvosana.

Yhden painikkeen arvostelu.

Suunnittelu III: Kehitysideoita

Suosikkisalit

Seuraavassa versiossa voi ottaa käyttöön yksittäisten salien lisäämisen suosikiksi. Suosikit näkyvät erillisessä suosikit-listauksessa aloitusnäytöllä. Lisäksi voisi olla mahdollista järjestellä suosikkeja erilaisiksi suosikkilistauksiksi.

Kaverit

Koska elokuvissa käynti on pimeässä istumisesta huolimatta sosiaalinen tapahtuma ja sitä yleensä harrastetaan kaveriporukassa, tällaisten kaveriporukoiden tuominen osaksi applikaatiota saattaisi lisätä sen käyttöä.

Kavereiden tuominen osaksi applikaatiota tosin vaatii kaverihaun, kaveripiirien hallinnan sekä kaveripiirien sisäisten voimavarojen hyödyntämisen suunnittelua.

Salinäkymä

Salinäkymässä voisi miettiä paikkojen pisteytyksen esittämistä myös muutenkin kuin kaikkien arvostelujen keskiarvona. Olisi mielenkiintoista nähdä kuinka salin parhaat paikat eroavat jos esitettävän elokuvan genrenä on epookkidraama tai räjähtävää toimintaa. Tai kuinka 3D vaikuttaa siihen, mitä salin paikoista pidetään parhaina.

Lippujärjestelmäintegraation avulla arvostellun elokuvan genre tai 2D/3D saadaan helposti tallennettua arvostelun yhteydessä eikä sitä tarvitse kysyä käyttäjältä erikseen.

Haku

Haun toimintaa eri näkymissä pitää tarkentaa. Hakeeko haku aloitusnäytössä eri asioita kuin profiilin Omat paikat -välilehdellä? Aloitusnäytössä voidaan hakea kaikkia olemassa olevia saleja tai vain listauksissa olevia saleja ja profiilissa voidaan hakea ehkä vain itse arvosteltujen salien joukosta.

Laajennettavuus

Parhaiden paikkojen idea on helposti laajennettavissa muihinkin katsomoihin elokuvateattereiden lisäksi. Kaikki katsomot, joissa voidaan määrittää istuimen sijainti rivin ja sijainnin rivillä mukaan, ovat mahdollisia käyttökohteita.

Myös käyttäjän summittaisen sijainnin määrittely voi onnistua, mikäli GPS-seuranta sallitaan. Tällöin onnistuisi myös stadionkeikkojen kenttäpaikkojen arvostelu ja vertailu.

Opinko mitään?

Kirjoitin tämän konseptin ensiksi Google Driven dokumentiksi, jonka ensimmäinen versio on heinäkuulta 2014. Suunnittelu ei siis ole ollut mitenkään ketterää tai nopeaa. Sitä on tehty kun aikaa on jäänyt. Seuraavan UX- tai applikaatiokonseptin lupaan suunnitella alle viikossa. Tai sitten alan tehdä puolen tunnin suunnitteluharjoituksia.

Yli vuosi on pitkä aika kaikkialla muualla paitsi geologiassa. Vuodessa ehtii tulla uusia ideoita, eikä voida edes puhua iteraatioista koska ensimmäinenkään versio ei ole vielä valmis. UX-suunnittelijana pitäisi päästä siihen, ettei tarvitse saada valmista heti ensimmäisellä kerralla.

Dokumenttina tämä tuntuu sijaitsevan jossain konseptin ja vaatimusmäärittelyn välimaastossa: liian tarkka ideaksi tai konseptiksi ja liian epämääräinen sekä monitulkintainen antamaan pohjaa applikaation toteuttamiseksi.

Konseptina tämä olisi ollut hyväksyttävissä ilman käyttäjien panosta mutta kun aletaan määritellä kuinka järjestelmä toimii käyttäjät pitää ottaa mukaan. Kun käyttäjät eivät aseta mitään rajoja suunnittelulle, niin silloin tosiaankaan ei ole mitään rajoja. Tämä kun yhdistetään erittäin pitkään suunnitteluaikaan, lähtee suunnitteluprosessi helposti harhailemaan eikä tuloksena ole välttämättä paras mahdollinen järjestelmä.

Itse kyllä käyttäisin tällaista, jos sellainen joskus tulee.

#Tampere Instagramin silmin

Otsikkokuva

Aivan kuten Cerronen tutkimuksen datakin, on #Tampere Instagramin silmin käyttämä data kerätty vuoden ajalta. Cerronen datan keräysväli oli 1.11.2013 – 1.11.2014, kun taas keräämäni data on ajalta 9.6.2014 – 9.6.2015.

#Tampere Instagramin silmin käyttää datana Instagramissa #tampere-tagilla merkittyjä kuvia. Cerronen tutkimuksen aineisto on kerätty kuvien varsinaisen sijainnin perusteella ja aineiston koko on moninkertainen aineistooni nähden. Cerronen aineistossa on 18 205 kuvaa, joissa yksi tageista on #turku, kun heidän aineistonsa kokonaismäärä on 149 624. Keräämässäni ja parsimassani datassa on 33 219 kuvaa tai videota. Jos oletetaan että Instagramiin lisättyjen kuvien määrä on pysynyt samana (mitä se luultavasti ei ole), niin samassa suhteessa Tampereelta olisi saanut kerättyä noin 273 021 kuvaa tai videota.

Osaa #tampere-tagilla varustetuista kuvista ei tietenkään ole otettu Tampereella. Osa näistä kuvista on otettu joko matkalla Tampereelle tai matkalla Tampereelta, osa on niin sanottuja latergram-kuvia, jotka lähetetään vasta jälkikäteen, esimerkiksi loman jälkeen (kätevä tapa pitää murtovarkaat loitolla).

Nämä kuvat on huomioitu parsintavaiheessa, jossa poistettiin kaikki koordinaateiltaan Tampereen ja sen lähialueen ulkopuolelle jääneet kuvat.

Paikoin osa kuvista näyttää asettuvan ruudukkoon, joka on ongelma, jonka Cerronenkin tutkimusryhmä huomioi. Ruudukko muodostuu kun älylaite yrittää suojella käyttäjän yksityisyyttä pyöristämällä sijainnin koordinaatteja.

Muu data

Bussilinjasto on avointa dataa ja löytyy Tampereen kaupungin sivuilta. Tieverkko, rautatiet ja vesistöt ovat myös avointa dataa ja ovat saatavilla Maanmittauslaitoksen sivuilta.

Ratikkareitin piirsin itse, koska sitä ei löytynyt mistään sopivassa muodossa. Ratikka kulkee yleissuunnitelman mukaista reittiä, pois lukien Hervanta, jossa reitti kulkee kaupunginvaltuuston päätöksen mukaista reittiä Hervantajärven tulevalle asuinalueelle. Tarkistetun yleissuunnitelman mukaiset reitit eivät olleet tiedossa kun reitti on piirretty, joten niitä ei ole korjattu.

Toteutus

Sovellus on jälleen kerran toteutettu Jade + Foundation -yhdistelmällä. Kartta datapisteineen on luotu myös jälleen kerran D3-kirjastoa apuna käyttäen.

Käyttäjäkokemuksen kannalta sovellus ei ole toimivin. Näytettävän datan määrä on useita megatavuja, jonka lataaminen kestää hetken aikaa, eikä javascript käsittelemässä tuollaista määrää dataa ole mitenkään ystävällinen selaimelle. On hyvinkin mahdollista että selaimesi menee jumiin.

Tärkeämpää minulle oli kuitenkin testata, miten Instagram-dataa voisi käyttää hyväksi kaupunkisuunnittelussa, eikä niinkään UX-kokeilu.

#Tampere Instagramin silmin

 

Informaation visualisointi: Eduskuntavaalit 2015

Eduskuntavaalit2015: Informaation visualisointi -otsikkokuva

Eduskuntavaalit tulivat ja menivät, nyt tuleva pääministeri yrittää muodostaa hallituksen. Hallitukseen yritetään saada ne puolueet, jotka olisivat päähallituspuolueen kanssa mahdollisimman paljon samaa mieltä. Kuinka paljon puolueiden mielipiteet asioista sitten eroavat toisistaan. Ylen vaalikoneen vastausten perusteella eduskuntaan muodostuu ryhmittymiä joiden jäsenet ovat keskenään samaa mieltä.

Lisäksi tein kuvaajan siitä, miltä Suomi näyttäisi jos vaalipiirien pinta-ala olisi suhteessa vaalipiiristä valittaviin edustajiin.

Uusien kansanedustajien samankaltaisuus

Eduskuntavaalit 2015: Kansanedustajien samankaltaisuus -otsikkokuva

Kuinka vuoden 2015 eduskuntavaaleissa valittujen kansanedustajien näkemykset ja ajatukset sopivat yhteen? Tämä kysymys tuli mieleeni kun halusin tehdä uuden D3-harjoitteen vanhojen jatkoksi ja samalla testata kuinka D3:n force layout toimii.

Vaalikonedata, jota kuvaajassa käytetään on Ylen avoimena datana julkaisema.

Kuvaajassa edustajien välisten linkkien pituudet määräytyvät keksimäni algoritmin perusteella. Samankaltaisten kansanedustajien välillä linkki on lyhyempi ja päin vastoin. Koska en ole saanut data-analyytikon koulutusta, niin määrittelin algoritmin lähinnä niin että kuvaaja näyttää hyvältä.

Algoritmi

Algoritmi perustuu tiettyyn alkuarvoon, josta vähennetään kun vertailtavien ehdokkaiden vaalikonevastaus on sama tai samansuuntainen (positiivinen-positiivinen tai negatiivinen-negatiivinen) ja johon lisätään kun vastaus on sama tai samansuuntainen (positiivinen-negatiivinen tai negatiivinen-positiivinen). Alkuarvo määräytyy siten että jokainen kansanedustaja olisi itseensä verrattuna nollan yksikön päässä itsestään.

Algoritmi ottaa huomioon varsinaisten vaalikonevastausten lisäksi myös henkilökohtaisia tietoja kuten esimerkiksi asuinpaikan, puolueen, äidinkielen, vuositulot ja uskonnollisen yhteisön.

Linkit

Näytettävät linkit on parsittu jokaisesta kansanedustajasta jokaiseen toiseen johtavista linkeistä (19 900) siten että jos edustajien välisen linkin voimakkuus on alle 72 % kaikkien linkkien mediaanista, se näytetään. (72 % on valittu siksi, että kyseisellä arvolla kaikki kyselyyn vastanneet ovat yhteydessä ainakin yhteen toiseen edustajaan.)

Keskustan Juha Rehula ja Timo Kalli sekä SDP:n Krista Kiuru eivät vastanneet vaalikoneeseen, joten heidän etäisyytensä kehenkään muuhun on suurempi kuin näytettävien linkkien raja-arvo. Näin ollen he jäävät kellumaan yhtenäisen joukon ulkopuolelle.

Tulkinta

Kuvaajaa lukiessa kannattaa huomata se, että vaikka edustajat näyttäisivät olevan lähekkäin he eivät välttämättä ole asioista samaa mieltä, ainoastaan yhtä paljon eri mieltä muiden kanssa. Edustajien väliset linkit määrittävät sen kuinka paljon he ovat keskenään samaa tai eri mieltä.

Puolueen vaikutus algoritmissa on selvästi suurempi kuin yksittäisten kysymysten, jolloin kuvaajaan muodostuu puolueista selviä ryhmiä. Puolueen sisäinen yhtenäisyys taas näkyy siinä kuinka lähekkäin kansanedustajat ovat toisiaan. Toisaalta on huomattavaa että puolueesta huolimatta vihreiden, SDP:n ja vasemmiston kansanedustajat muodostavat keskenään huomattavan tiiviin ryhmittymän.

Linkit ovat väritykseltään hieman läpinäkyviä, joten päällekäisissä linkeissä ylemmät tummuvat sitä enemmän mitä enemmän niiden alla risteää toisia linkkejä. Voisi siis kuvitella että tummempi linkkikeskittymä tarkoittaa useampia linkkejä ryhmän sisällä ja näin ollen samanmielisempää ryhmää.

Eduskuntavaalit 2015: Kansanedustajien samankaltaisuus

Suomi vaalipiirien mukaan

Eduskuntavaalit 2015: Suomi vaalipiirien mukaan -otsikkokuva

Eduskuntavaalien vaalipiireistä valittavien kansanedustajien määrä ei perustu vaalipiirin pinta-alaan, vaan kaikkien vaalipiirissä asuvien ihmisten määrään, ei siis ainoastaan äänestysikäisten määrään.

Joten jos keskusta on suurin puolue Lapin vaalipiirissä ja kokoomus Helsingin vaalipiirissä, tavalliselle kartalle merkittynä tämä voi aiheuttaa ongelmia maantietoa tuntemattomille. Vaalipiirin pinta-alahan ei missään nimessä ole verrannollinen vaalipiirin painoarvoon eduskunnassa.

Mutta entä jos vaalipiirien pinta-ala kartalla vastaisikin vaalipiirin painoarvoa eduskunnassa? Kuinka paljon Suomen kartta vääristyisi tämän seurauksena?

Eduskuntavaalit 2015: Suomi vaalipiirien mukaan

Kuvaajien toteutus

Kansanedustajien samankaltaisuutta kuvaava kuvaaja on toteutettu D3-kirjastoa käyttäen. Kuvaajan data on parsittu PHP:llä kirjoitetulla ohjelmanpätkällä.

Vaalipiirikuvaaja on melko perinteinen HTML + CSS -sivu. Molempien kuvaajien sivu kokonaisuudessaan on toteutettu hyväksi havaitulla Foundation + Jade -yhdistelmällä.

UX-suunnittelun kannalta tärkeintä kuvaajissa on se ovatko ne kiinnostavia ja välittyykö niistä se tieto, joka on tarkoitus välittää. Käyttäjäkokemukseen vaikuttaa myös se kuinka helposti sivusta on nähtävissä tai arvattavissa se, miten se toimii.

D3: asumisväljyys + junat

otsikkokuva

Koska nykyisessä työssäni minun pitää miettiä kuinka informaatiota voidaan esittää mahdollisimman tehokkaasti, päätin tutustua D3-kirjastoon, jonka avulla voi luoda dataan pohjautuvia dokumentteja, yleensä jonkinlaisia kuvaajia. UX-suunnittelijana pitää ottaa myös huomioon se kuinka informaatiota esitetään, siksi harjoittelen sen esittämistä. Vaikka pidänkin itseäni teoreettisempana suunnittelijana, on hyvä tietää kuinka asioita voi toteuttaa.

Tässä on kaksi harjoituksena tekemääni kuvaajaa: ensimmäisessä esitetään asumisväljyys Tampereen tilastoalueilla ja toisessa matkustajajunien toteutuneet aikataulut Tampereen ja Helsingin välisellä rataosuudella.

Asumisväljyys Tampereella

Asumisväljyys Tampereella kuvaa sitä kuinka paljon ihmisillä on tilaa asua. Mittayksikkönä on neliömetriä per asukas. Asumisväljyys on esitetty tilastoaluekohtaisesti. Kaikilta tilastoalueilta ei ole dataa saatavilla, joka johtuu siitä, että Tilastokeskus ei luovuta dataa, josta on mahdollista tunnistaa yksittäisiä henkilöitä. Yleensä se tarkoittaa sitä, että alueella asuu alle 30 henkilöä.

Tampereella ei ole virallisesti määriteltyjä kaupunginosia mutta niitä suurin piirtein vastaavat tilastoalueet on määritelty. Näitä tilastoalueita on käytetty tässä kuvaajassa.  Joitain omituisuuksia virallisessa määrittelyssä kuitenkin on: esimerkiksi Kyttälä on jaettu tilastoalueiksi Kyttälä A ja Kyttälä B.

Tilastoalueiden rajat ovat avointa dataa ja saatavilla Tampereen kaupungilta.

Asumisväljyyden luvut tilastoalueittain on otettu Tampere alueittain 2013 -julkaisusta. Julkaisun tilastot ovat vuodelta 2011 ja ne on saatu Tilastokeskukselta.

Asumisväljyys Tampereella

Matkustajajunat Tampere – Helsinki, 13.4.2015

Liikennevirasto on avannut junien kulkutiedot avoimena datana tämän vuoden maaliskuussa. Sain sen selville vasta kun olin kirjoittanut ylös toteutuneita aikatauluja Junat kartalla -palvelusta. Junien kulkutiedot, sekä reaaliaikaiset, että historialliset, löytyvät Liikenneviraston Digitraffic-palvelusta.

Toteutuneet aikataulut on esitetty Mareyn aikataulu -nimisessä kuvaajassa. Mareyn aikataulu on graafinen esitys, jossa pystyakselilla on asemat suhteutettuna niiden väliseen etäisyyteen ja vaaka-akselilla on aika. Näin ollen viivojen jyrkkyys kuvaa junan keskinopeutta pysähdysten välillä. Nimensä kuvaaja on saanut ranskalaiselta tiedemieheltä Étienne-Jules Mareyltä.

Matkustajajunat Tampere – Helsinki, 13.4.2015

D3, Jade + Foundation

Kuvaajat siis käyttävät D3-kirjastoa informaation esittämiseen, muun sivun ulkoasun ja rakenteen esittämiseen käytän jälleen Jade + Foundation -yhdistelmää.

Tampere (noin) kymmenen vuoden välein

Otsikkokuva, jossa eri aikakausien ilmakuvat näkyvissä

Kuinka Tampere on muuttunut kuudenkymmenen vuoden aikana? Ilmakuvien perusteella ainakin jonkun verran. Ja koska kuusikymmentä vuotta ilmakuvien välillä saattaa korostaa joitakin muutoksia, halusin jakaa aikavälin osiin.

Miksi?

Olen nähnyt ilmakuvien ennen ja jälkeen -vertailuja aiemminkin mutta Oklahoman yliopiston vertailu Yhdysvaltojen Keski-Lännen kaupunkien urbaaneista muutoksista on syynä tähän vertailuun. Halusin vertailla kuinka Tampereen kaupunkirakenne on muuttunut vuosien varrella.

Miten?

Vertailusovellus käyttää hyväkseen Tampereen kaupungin avoimena datana julkaisemaa ilmakuva-aineistoa eri vuosilta. Ilmakuva-aineisto on katseltavissa myös Tampereen kaupungin paikkatietopalvelussa osoitteessa http://paikkatietopalvelu.tampere.fi/. Sovellusta varten latasin kuitenkin alkuperäisen kartta-aineiston ja avoimen lähdekoodin QGIS-ohjelmaa käyttäen loin siitä ilmakuvat haluamallani tarkkuudella.

Vertailusovellus on rakennettu nopeaan prototypointiin soveltuvalla yhdistelmällä Foundation + Jade, ja se hyödyntää hieman muokattua Zurbin TwentyTwenty -vimpainta eri vuosien ilmakuvien vertailuun. Sovelluksen koodaaminen toimi erittäin hyvänä JavaScript ja jQuery -harjoitteena. Kuten myös prototypointi- ja käyttöliittymäharjoitteena, erityisesti vuosivalinnan ja valintaa vastaavan kuvan yhteyden esittämisessä.  Käytetyt JavaScript-ratkaisut eivät välttämättä ole kaikkein eleganteimpia mutta olenkin UX-suunnittelija, en koodaaja.

Mitä?

Kirjoitin myös artikkelin blogiin, siitä millaisia ajatuksia sovelluksen esiin tuomat muutokset Tampereen kaupunkirakenteessa minussa herättivät.

Missä?

Tampere (noin) kymmenen vuoden välein -sovellus löytyy osoitteesta: http://jossain.org/tampere-noin-kymmenen-vuoden-valein/