Referenssit

Referenssi, lat. referre + entia.

Sarjakuva-asettelu

UX- ja UI-suunnittelijalle on hyvä ymmärtää sarjakuvia, sitä mikä saa katseen siirtymään haluttuun suuntaan, kuinka pitää käyttäjä kiinnostuneena siitä tarinasta, jonka haluat käyttäjälle välittää. Rachel Nabors avaa sarjakuvan ja UX- sekä UI-suunnittelun välistä yhteyttä kaksiosaisessa kirjoituksessaan UX Booth -blogissa.

Sarjankuvan ja UX-suunnittelun läheisen suhteen vuoksi harjoittelin sarjakuvasivun asettelua. Sivun aiheena on matkani New Yorkiin ja Chicagoon.

Sarjakuva-asetteluharjoitelma,

Konttipaikannus

Yleensä käyttöliittymässä luotetaan teknologian puolelta vain yhteen vuorovaikutuksen keinoon ja yhteen käyttäjän aisteista: visuaaliseen dataan ja näköön. Visuaalisuuden lisäksi käytetään informaation välittämiseen joskus ääntä. On myös mahdollista välittää informaatiota haptisesti, eli tuntoaistin välityksellä.

Konttisatamissa on ainakin kuvien perusteella paljon kontteja, joiden pitää olla oikeassa järjestyksessä. Onneksi logistiikka hoitaa sen puolen konttien siirtelystä, täytyy vain huolehtia siitä että oikea konttipino löytyy helposti. Maailman vilkkain konttisatama on Shanghain satama jonka kautta kulkee vuosittain 776 miljoonaa tonnia tavaraa.

Konttinosturi, johon tämä paikannusjärjestelmä on suunniteltu tunnetaan nimellä kiskoilla kulkeva pukkinosturi, joka näyttää tältä:

Kiskoilla kulkeva pukkinosturi

Kiskoilla kulkeva pukkinosturi (c) Konecranes

Kiskoilla kulkevilla pukkinostureilla voidaan nostaa kontteja junan sekä rekan kyydistä ja pinota ne rauta- tai autotien suuntaisiin riveihin.

Videoiden perusteella konttinosturien hytit ovat joko melko meluisia tai melko hiljaisia, joten molemmat ehdotetut ratkaisut visuaalisen informaation lisäksi ohjaamiseen oikealle kontille voivat toimia.

Aloitetaan kuitenkin visuaaliseen informaatioon perustuvalla paikannuksella.

Visuaalinen informaatio

Graafisessa paikannuksessa näytetään konttinosturille kuuluva konttirivistö ylhäältä päin, siten että kuljettajan normaali katseensuunta on kuvaruudun yläosassa. Kuva on sovitettu siten että konttinosturi täyttää kokonaan pystysuuntaisen kuva-alan. Tämä tarkoittaa käytännössä sitä että konttirivistöt eivät näy ruudulla kokonaan (Kuva 1).

Konttipaikannuksen alkuasetelma, konttirivit ja pukkinosturi

Kuva 1

Jos nostettava kontti on ruudulla näkyvällä alueella merkitään se ruudulle. Mikäli nostettava kontti on ruudun ulkopuolella, näytetään ruudulla nuoli siihen suuntaan, jossa kontti sijaitsee (Kuva 2).

Konttipaikannus, kontti on ruudun ulkopuolella, jolloin suunta esitetään nuolella tai kontti on ruudun alueella, jolloin kontti värjätään

Kuva 2, kontti on ruudun alueella (vas.) ja kontti on ruudun ulkopuolella

Lähestyttäessä kontin sijaintia, tarkennetaan ruudun näkymää pitämällä nostin keskellä näkymää. Samalla konttia merkitsevälle alueelle tulostetaan tietoja kontista, muun muassa kontin massa (Kuva 3).

Lähestyttäessä konttia kontin tiedot ilmestyvät  kontin värjäävään kenttään

Kuva 3

Auditiivinen informaatio

Auditiivisessa paikannuksessa käytetään hyväksi ihmisen kykyä paikantaa äänilähde erittäinkin tarkasti. Paikannuksen tarkkuus on kahden korvan ansiota, lisäksi aivoilla on erinomainen kyky huomata pienetkin aikaerot äänen saapumisessa eri korviin.

Auditiiviseen paikannukseen ehdotan kahta erilaista toteutustapaa.

Ensimmäinen toteutustapa perustuu johdatteluun. Toteutustavassa äänilähteen näennäisellä siirtymisellä tilassa ohjataan kuljettajaa kohti konttia.

Jos kontti on kuljettajan vasemmalla puolella, äänilähde liikkuu kuljettajan katseen suunnassa oikealta vasemmalle ja päinvastoin. Kontin ollessa kuljettajan katseen suunnassa äänilähde liikkuu hytin lattiasta kattoon. Kun kontti on kuljettajan takana, äänilähde liikkuu katosta lattiaan.

Toisessa toteutustavassa äänilähde ilmoittaa suoraan kontin sijainnin tilassa. Äänilähde voi liikkua vapaasti tilassa ja se sijaitsee sillä näennäisellä akselilla, joka voidaan johtaa kuljettajan pään kohdalta paikannettavaan konttiin.

Haptinen informaatio

Haptisen informaation välittämiseksi ehdotan kahta eri keinoa: kiinteästi asennettuna kuljettajan penkissä tai puettavana liivinä.

Kontin sijainti kuljettajan vasemmalla tai oikealla puolella välitetään värisyttämällä kuljettajan penkin istuinosaa joko vasemmalta tai oikealta puolelta. Kun ollaan sivuttaissuunnassa oikealla kohdalla, istuinosa värisee sekä oikealta että vasemmalta puolelta.

Tieto kuljettajan etu- tai takapuolella olevasta kontista voidaan ilmoittaa kolmella tavalla, joista kaksi on kiinteitä ratkaisuja ja kolmas on puettava.

Kiinteä ratkaisu

Kiinteistä ratkaisuista ensimmäinen sijaitsee myös kuljettajan penkin istuinosassa. Siinä tieto kuljettajan edessä olevasta kontista ilmoitetaan värisyttämällä istuimen etuosaa ja takana olevasta kontista värisyttämällä penkin takaosaa.

Toinen kiinteä ratkaisu on sijoitettu kuljettajan penkin selkänojaan. Selkänoja värisee alhaalta ylös kun kontti on kuljettajan etupuolella ja ylhäältä alas kun kontti on kuljettajan takana. Tämä ratkaisu on epävarmin, koska kuljettaja ei välttämättä nojaa jatkuvasti selkänojaan. Lisäksi värinän suunta selkänojassa pitää testata, jotta saataisiin selville kuinka pystytasossa kulkeva värinä käsitetään vaakatasossa tapahtuvaa liikettä vastaavaksi.

Puettava ratkaisu

Puettavassa ratkaisussa kuljettajan yllä olevassa liivissä on värinää tuottavat moottorit sekä rinnan että selän puolella. Kontin sijainti kuljettajan etupuolella ilmoitetaan värisyttämällä rinnan puolella olevia moottoreita ja sijainti takapuolella värisyttämällä selän puolella olevia moottoreita.

Tietystikään haptista informaatiota välittävä värinä ei voi olla jatkuvaa, koska kuten kaikkiin ärsykkeisiin, myös värinään turtuu jossain vaiheessa.

Auditiivista tai haptista informaatiota voidaan käyttää visuaalisen informaation lisänä. Voi olla että kaikkia kolmea keinoa ei kannata käyttää yhtä aikaa, vaan visuaalisen informaation lisäksi joko auditiivista tai haptista informaatiota. Kaikkien kolmen käyttäminen yhtä aikaa kuormittaisi kuljettajaa turhaan.

Company Inc

otsikkokuva

Kuinka saada omat tuotteet kaupaksi mutta samalla kuitenkin esitellä omaa yritystä? Verkkokaupassa myydään, yrityksen sivulla esitellään yritystä ja sen tuotteita. Tämän konseptin tarkoituksena on yrittää yhdistää nämä kaksi. Siis:

  • kuinka kaupata tuotteita mutta samalla esitellä yritystä?,
  • lisäksi koitetaan saada navigaatiosta kiinnostavampi,
  • harjoitetaan samalla myös graafista silmää.

Varsinaista verkkokauppaa ei ole mietitty tai suunniteltu, eli konseptista puuttuvat ostoskori ja maksamisprosessi kokonaan.

Tuotteiden esittelysivuille on tuotu mahdollisuus lisätä tuote ostoskoriin heti tuotteen tiivistelmän yhteyteen, jolloin tuotteen voi ostaa siitä saatujen mielikuvien perusteella. Tiivistelmän tuleekin olla erittäin tunteisiin vetoava, jos halutaan myydä tuote tiivistelmän perusteella. Käyttäjällä on tietenkin mahdollisuus saada lisätietoja samalta sivulta.

Tuotenavigaatiosta on tehty Nielsenin lain vastainen, eli se ei juuri vastaa navigaatiota, johon käyttäjä on muilla sivuilla tottunut. Tuotenavigaatiossa ei lue suoraan mistä valikkoalkiosta pääsee millekin tuotesivulle. Tuotenavigaatiota ei edes välttämättä käsitä navigaatioksi ellei huomaa kursorin muuttuvan sen ylittäessä navigaatiopalkin. Mobiilissa ei edes ole kursoria näkyvissä, joten navigaation huomaaminen on vielä vaikeampaa.

Tuotteiden yhteenvetosivulla tuotteet on kuitenkin värikoodattu samoin kuin tuotenavigaatiossa, jolloin käyttäjä voi käsittää että sivun yläreunan palkki ei olekaan pelkkä koriste. Varsinaisella tuotesivulla palkista työntyy alaspäin tuotteen värikoodia vastaava laatikko, jolloin tuotteen ja tuotenavigaation yhteys tulee voimakkaammin esille.

Tällaisten yhteyksien tajuamisien aiheuttamat ahaa-elämykset voivat herättää käyttäjässä ilahduttavia tuntemuksia, jolloin sivuston käytöstä tulee mielekkäämpää, muistettavampaa ja käyttäjä palaa helpommin sivulle kun hänellä on taas tarvetta yrityksen tuottamille tuotteille tai palveluille.

Sivustonavigaatio on sijoitettu ainoastaan sivun alapalkkiin, mikä sekin on harvinainen käytäntö. Sivustolla on kuitenkin tärkeämpää esitellä yrityksen toimintaa ja tuotteita kuin varsinaisesti antaa yleistietoja yrityksestä. Käyttäjät kuitenkin osannevat etsiä tietoja yrityksen henkilökunnasta tai yrityksen yhteystietoja sivuston alapalkista.

Käytännössä sivusto on siis navigoinniltaan sivustosuunnittelun käytäntöjen vastainen. Ovatko käytetyt ratkaisut sitten käyttäjien mieleen? Se selviää ainoastaan käyttäjätestauksella.

Graafisessa ilmeessä on käytetty yhtä väriä ja sen eri sävyjä sekä mustaa ja valkoista. Ohut fontti ja elementtien litteys on lainattu sekä Googlelta että Spotifyn työpöytäversiosta.

Onko siis oikein rikkoa sivustosuunnittelun kirjoittamattomia sääntöjä, jos käyttäjät saadaan siten palaamaan sivustolle. Mielestäni kyllä mutta sellaisen suunnittelun tulokset pitää aina varmistaa käyttäjätesteissä.

Tutustu sivustoon tästä: http://jossain.org/companyinc/.

Kultainen leikkaus + joonialainen pylväs

Koska kiinnostuksen kohteisiini liittyy arkkitehtuuri ja muutkin taiteet, harjoittelin hieman joidenkin arkkitehtuurista ja taiteista tuttujen periaatteiden soveltamista. Samalla yritin oppia jotakin typografiasta ja graafisesta suunnittelusta.

Kultainen leikkaus on luultavasti tuttu suurimmalle osalle. Kultainen leikkaus määritellään seuraavasti:

Kultainen leikkaus eli kultainen suhde saadaan, kun jana jaetaan kahteen osaan niin, että lyhyemmän osan suhde pidempään osaan on sama kuin pidemmän osan suhde koko janaan.
Wikipedia

Joonialainen pylväsjärjestelmä kuuluu niihin viiteen klassiseen pylväsjärjestelmään, jotka ensimmäistä kertaa tarkasti määritteli Giacomo Barozzi da Vignola (1507 – 1573). Vignola määritelmän mukaan joonialaisen pylväsjärjestelmän, kuten muidenkin pylväsjärjestelmien mittasuhteet perustuvat pylvään poikkileikkauksen säteeseen. Joonialaisessa pylväässä pylvään korkeus, jalusta mukaan lukien on 28,5 kertaa poikkileikkauksen säde. Jalustan korkeus on kuusi kertaa poikkileikkauksen säde ja entablatuurin (pylvään varassa oleva poikkipalkki) korkeus 4,5 kertaa poikkileikkauksen säde.

Kultainen leikkaus + Joonialainen pylväs

 

Tässä harjoitelmassa käytin ainoastaan hyväkseni pylvään osien korkeuksien suhteita, en korkeuden suhdetta poikkileikkauksen säteeseen. Poikkileikkausta voisi soveltaa esimerkiksi jos palstoja olisi enemmän kuin yksi. Harjoitelman teksti on peräisin Architectural Orders -sivustolta.

Monitahoinen hakutulos mobiilissa

Otsikkokuva

Monitahoinenhan on jonkinlainen käännös sanasta “faceted”, joka taas liittyy termiin “faceted search“. Fasetoitunut hakutulos ei vain kuulosta hyvältä suomelta.

Pöytäkoneella tai läppärillä monitahoisen haun tahot esitetään hakutulossivun vasemmassa reunassa. Amazonin hakutulossivu on ehkä tunnetuin esimerkki monitahoisesta hausta. Mobiliissa ei kuitenkaan ole tilaa vasemmalle palstalle ja näin ollen ei myöskään monitahoiselle haulle.

Kokeilin kuinka tahot saisi siirrettyä paikkaan, johon ne sopivat mobiilissa, eli käytännössä pois näytöltä. Ainoastaan painike tahojen esiintuomiseksi on näkyvissä. Ongelmana tässä ratkaisussa tosin on se, ettei ruudulta voi nopeasti nähdä mitkä hakuehdot ovat käytössä.

Seuraavaan versioon voisi myös lisätä tahojen poiston hakuehdoista raahaamalla tahoa ilmaiseva painike ulos tahojen joukosta.

Tämä on ensimmäinen konseptitoteutus, jonka olen tehnyt käyttäen minulle suositeltua Foundation-alustaa käyttäen. Lisäksi käytössä oli Jade koodin kirjoittamisen apuna. Kaiken lisäksi molemmat pyörivät vielä NodeJS:n päällä. Sanotaanko että opin jonkin verran uusia menetelmiä ja tekniikoita tämän konseptin toteutuksen yhteydessä.

Mikäli haluaa nopeasti konseptoida / toteuttaa ideoitaan suosittelen kokeilemaan Jadea: ainakin tällä hetkellä. Jos jollakin on ehdottaa jotain vielä parempaa, niin olen avoin ehdotuksille.

Konseptia mobiilista monitahoisuudesta hakutuloksissa voi katsella täältä: Monitahoisuus mobiilissa. Pöytäkoneella ja läppärillä kannattaa muutella selainikkunan kokoa ja kokeilla miltä konsepti näyttäisi älypuhelimen selaimessa.

Otsikkokuva on kaapattu palvelusta Responsinator.

Piste

piste640x320Piste on käyttöliittymätesti, jolla haluan testata sitä, kuinka vähän käyttöliittymässä tarvitsee olla vihjeitä navigointia varten. Käyttäjällehän pitää aina kertoa mahdollisimman tarkasti käyttäjän oma sijainti: mistä tulin, missä olen ja mihin voin mennä.

Yleensä sijainti kerrotaan sivun otsikolla, joka näkyy selaimen yläpalkissa ja joka toistetaan sivun pääotsikossa. “Missä olen ollut” näkyy vierailluissa linkeissä, joiden tulisi olla eriväriset verrattuna vierailemattomiin linkkeihin. Lisäksi linkit kertovat käyttäjälle, mihin hän voi liikkua nykyiseltä sivulta. Siksi linkkien tulee erottua varsinaisesta tekstistä.

Piste poistaa näistä keinoista linkit kokonaan, jäljelle jää vain viittaus siihen mihin voi liikkua ja käyttäjän oma kokeilunhalu. Tiedän, että on käyttäjiä, jotka eivät halua miettiä mitä sivulla voi tehdä mutta luulen, että heidätkin voi saada innostumaan ja kokeilemaan. Tosin Piste ei välttämättä herätä juurikaan muita tunteita kuin löytämisen riemun kun käyttäjä ymmärtää kuinka Deweyn desimaaliluokitusta voi käydä Pisteen avulla läpi.

Lisäksi Piste antoi minulle mahdollisuuden kokeilla kosketusnäytön ja sormieleiden mahdollisuuksia käyttöliittymissä navigoinnin toteuttamisessa.

http://jossain.org/piste/