Jutut avainsanalla: suunnittelu


Ohjaako presis tekemistä?

Pekka • 14.6.2011, 17.13

Kahden ympyrän Venn-diagrammiKahden ympyrän Venn-diagrammi on presentaationa hiukan tylsä: Juusto+herneet = juustoherneet. Yksi plus yksi on kaksi. Semmoisella ei aiheuteta viestin vastaanottajassa ooh!/wow!-reaktiota, paitsi tietenkin jos siitä tehdään tarpeeksi jotain joka on sopivasti ihq ja skrubuttunutta (oh, melkein yhtä söpöä kuin kissavideo!).

Neljän ympyrändiagrammiOn oikeasti oltava spektakuläärisempi, vaan ei kuitenkaan vaikea, etenkin jos haluaa esimerkiksi myydä jotain presentaatiollaan. Neljän ympyrän diagrammi jossa on 4+4+4+1 eli kolmetoista eri asiaa on vaikea (eikä se muuten ole Venn-diagrammi). Sellainen saattaa aiheuttaa viestin vastaanottajalle alemmuudentunteen, kun ei esitetystä ehkä saa selkoa. Harva haluaa tuntea itsensä tyhmäksi, etenkään jos pitää rahoistaan erota. Yksinkertaisempaa tarvitaan jos haluaa tuloksia.

Kolmen ympyrän Venn-diagrammiOnko sattumaa, että kolmen ympyrän Venn-diagrammissa on 3+3+1 eli seitsemän asiaa? Juuri sopivasti se määrä asioita jonka sanotaan pysyvän ihmisen lyhytaikamuistissa samanaikaisesti. Se määrä linkkejä joita enimmillään joskus suositeltiin näytettäväksi verkkosivulla. Seitsemän. Sattumaa? Tuskin.

Hmm… Montakohan hyvää juttua on tungettu kolmen ympyrän Venn-diagrammiin presentaation vuoksi, vaikka idea olisi toiminut paremmin ilman Venniä ensinnäkään?

Comments Off

Avaisanat: , , , , ,


Internet ei tee asiakkaasta käyttäjää

Pekka • 22.9.2010, 13.30

Tähän mielipiteeseen on helppo yhtyä: Don’t start with the tools (via @nettiapina).

Haluaisin siihen lisätä siihen seuraavan: Internet ei tee asiakkaasta käyttäjää.

Lehti, kauppa tai mikä tahansa ”brändi”, jolla on lukijoita, asiakkaita, pelaajia ja ehkä jopa faneja, laajentaessaan (liike-)toimintaansa verkkoon (esimerkiksi tällä hetkellä niin kovasti hypetettyyn sosiaaliseen mediaan tai avaamalla vaikka verkkokaupan) ja siinä prosessissa samalla piilottaa asiakkaansa, pelaajansa, lukijansa ja/tai faninsa termin ”käyttäjä” taakse (joko oman ajattelemattomuuden tai palkkaamansa suunnittelijan/toimiston ymmärtämättömyyden avulla), tekee paremmin pysyessään poissa verkosta kokonaan.


Kaupan kautta

Pekka • 3.6.2010, 11.54

Helsingin Sokoksen alakerran S-market on rempannut tilojaan. Kun siellä tulee aina toisinaan käytyä, olen huomannut uudistuksesta jääneen mieleen kaksi asiaa.

Aikanaan Stockan herkulla taisi oli keskustan alueella yksinoikeus jumalattomaan ahtauteen ja ostoskärrykolareihin. En tiedä miten ovat sen saaneet aikaan S-marketissa, mutta aika hyvin ovat onnistuneet uudistuksessa tuomaan kärrykaaoksen ja tilanpuutteen shoppailukokemukseen. Hiukan ahdistavaa.

Sitten on nuo pikakassat. Mikäköhän suunnittelun kukkanen se on, että puolet siitä tilasta johon asiakas voisi ne korkeintaan kymmenen tuotettansa laittaa on varattu (selvästikin jälkikäteen lisätylle) lapulle joka kieltää tavaroiden laittamisen siihen. Eikö olisi ollut järkevää jo alusta asti hankkia kassapöytä pienemmällä pinta-alalla johon tuotteet voi laittaa niin, ettei tarvitse erikseen kieltää laittamasta tuotteita siihen mihin ne on kätevintä laittaa?

Pikakassan yksityiskohta kiellolla, S-market, Sokos Helsinki


Lukko tai ei

Pekka • 16.3.2010, 13.52

Huomasin tällaisen viestin eräässä palvelussa: ”Selaimen alapalkissa oleva lukko osoittaa, että yhteys on salattu.”

Tällä hetkellä eniten käyttämäni selaimen alapalkissa ei näy mitään lukkoa, siinä ei edes ole alapalkkia, paitsi silloin kun osoitin on linkin päällä, mutta mitään lukkoikonia ei missään, yhtään missään. Toisessa selaimessa, se jota käytän toisinaan, on alapalkki, mutta ei siellä mitään lukkoa ole: Lukko ilmestyy yläoikealle, hakukentän viereen. Kolmannessa selaimessa, siinä jota en juurikaan käytä, on lukkoikoni alapalkissa.

(Olisi helppo naurahtaa LOL FAIL, kun selaimessa ei ole alapalkkia tai lukkoikonia vaikka ohjeistuksessa niihin viitataan ja julistaa, että et vaan osaa. Mutta koska se on helppoa, lankeisi ilkkuja samaan loukkuun kuin se jolle ilkutaan: mennään siitä missä aita on matalin. Tosin sillä erotuksella, että alkuperäisen virheen tekijällä on ollut joko aikataulullinen ja/tai ekonominen rajoite kun taas kommentoija olisi vaan laiska ja ylimielinen.)

Selaimen ominaisuuksiin viittaaminen verkkosivuilla on aina haasteellista. Tämä siksi, että eri selaimia ja niiden versioita on aina käytössä enemmän kuin mitä edes haluaisi uskaltaa kuvitella ja selaimet päivittyvät nopeammalla tahdilla kuin monet (ehkä useimmat) verkkosivut. On siis helpompaa, ja kustannuksiltaan halvempaa, kirjoittaa ohjeita rajatulle määrälle selaimia (esim. analytiikan mukaan parille suosituimmalle) kuin miettiä miten tehdä asia kaikkia, selaimesta riippumatta, yhtä informatiiviseksi. Kuitenkin jos toiminnallisuuksia tai ominaisuuksia joutuu selittämään, on toteutuksessa tehty virhe eikä selittäminen asiaa korjaa vaan saattaa jopa pahentaa asiaa.

Mutta miksi lukkoikoniin pitää viitata? Siksi, että ei ole olemassa mitään yhtenäistä tapaa kertoa ihmiselle liikkuuko tieto selaimen ja serverin välillä salatusti. Jokaisella selaimella on oma tapansa.

On tietenkin täysin normaalia, että jokainen tekee tyylillään, eli tässä tapauksessa kommunikoi salatusta tai turvallisesta verkkoyhteydestä miten parhaaksi näkee: Selainten valmistajat omilla tavoillaan ja palveluiden valmistajat omillaan. Erikoista ei siis ole se, että tavalliset ihmiset, valtaosa verkossa liikkuvista, jotka eivät ymmärrä (joiden ei tarvitse ymmärtää) tai välittä tekniikasta sen enempää kuin mitä tarvitsevat päästäkseen nettiin ja siellä eteenpäin, eivät huomaa/tajua salatun ja salaamattoman yhteyden eroa.

Erikoista mielestäni on kuitenkin se, että suojatulle yhteydelle ei ole saatu sovittua yhtenäistä merkkikieltä joka ilmoittaa ihmiselle – riippumatta selaimesta, käyttöjärjestelmästä, verkkopalvelusta tai todennusohjelmistosta – sen, että nyt on esimerkiksi turvallista vinguttaa Visaa (/erota rahoistaan) tai syöttää palveluun sosiaalturvatunnus tai muita yksityisiä tietoja.

Ehkä joku muistaa miten aikanaan syötteille oli hyvin kirjava valikoima ikonia ja tunnistetta (IE7:lle suunniteltiin vaikka mitä omaa ikonia), mutta sitten Matt Brett piirsi ikonin, laittoi sen ilmaiseksi jakoon templateineen ja muokkausmahdollisuuksineen (lue tarina täältä). Näin niin selainvalmistajilla kuin verkonpunojilla oli, yllättävän vikkelästi (ei kuitenkaan täysin ongelmitta) jonkinlainen yhtenäinen tapa, standardi, ilmoittaa ruudun toisella puolella istuvalle ihmiselle, että syötteitä on tarjolla.

Kun nyt sitten viestintä salatusta (turvallisesta) yhteydestä jätetään isoilta osin verkkopalveluiden tekijöiden niskoille (selainten tapa ilmoittaa asiasta kun on hyvin huomaamatonta, etenkin kun ihminen on keskittynyt verkkosivun sisältöön), on lopputulos hyvin… monimuotoinen, jos näin neutraalia ilmaisua tässä uskaltaa käyttää. Osa palveluista viestittää hyvin, osa huonosti. Jotkut todella huonosti tai ei ollenkaan. Ja niille jotka eivät muutenkaan oikein ymmärrä miten internet toimii, mutta kuitenkin seikkailevat netissä päivittäin, on tilanne hyvin hämäävä.

Oli se sitten lukkoikoni tai huutomerkki, joko ylhäällä tai alhaalla, niin salatulle yhteydelle pitäisi saada selaimiin, merkistä tai mallista riippumatta, yhtenäinen esitystapa. Jos ei muuten, niin ainakin siksi, ettei verkkopalveluiden tekijöiden tarvitsisi keksiä pyörää aina uudestaan ja uudestaan.


Pienellä kirjoitettu teksti

Pekka • 12.9.2009, 16.00

Miksi lääkepakkausten viimeinen käyttöpäivä (tai vuosi/kuukausi) on präntätty johonkin nurkkaan tai sivuun niin pienellä ja yleensä semmoisin kohopainonumeroin, että kyseistä tietoa on ensinnäkin hirveän vaikea löytää ja toisekseen tasan todella vaikea tulkita. Luulisi kyseessä olevan sen verran tärkeän tiedon, että sen näkyvyyteen hiukan panostettaisiin. Meinaan jos minä en niitä oikein näe, miten on niiden kanssa joilla on heikompi näkö?

Viimeksi ostamassani laastaripaketissakin on viimeinen käyttöpäivä merkitty selkeämmin, ainakin 200 % isommalla tekstillä ja paremmalla kontrastilla kuin monessa lääkepakkauksessa. Ja laastareista tuskin tulee mitään sivuvaikutuksia jos niitä käyttää vanhentuneina.


Kuka pelkää skrollipeikkoa?

Pekka • 30.11.2008, 20.20

Syksyn mittaan olen useaan kertaan joutunut keskusteluun jossa toinen osapuoli miettii verkkosivujen vieritystarvetta. ”Kyllähän sivun pitää näkyä kokonaan ilman vieritystä”, on sanottu, kuten on myös ”Vieritys on huono juttu, sillä käyttäjät eivät vieritä”.

Että häh, siis anteeks’ mitä? Viimeksi kun tarkistin kalenterista, totesin ettemme enää elä 1990-lukua.

Mistä tämä vierityspelko on löytänyt tiensä ihmisten mieliin? Ei havaintoa, mutta kuvittelisin sen olevan jäänteitä menneiltä ajoilta ja sitä, etteivät ihmiset aina oikein tiedosta omia tapojaan.

Jotta voisin helpommin taistella tätä outoa skrollipeikkoa vastaan, päätin hakea hiukan taustaa perusteluille, työkaluja myytin murtamista varten.

Yksitoista vuotta sitten (eli tämä asia taitaa olla niitä harvoja juttuja verkossa jotka ovat vanhempia kuin IE6) Jakob Nielesenin Alertboxissa luki: Scrolling Now Allowed. Sittemmin Jaakko on keskittynyt haukkumaan lähinnä sivuttaissuuntaista vieritystä tai sellaisia vierityspalkkeja jotka ovat ylidesignattuja eivätkä minkään standardin mukaisia: ”Usability is almost always enhanced when you use the built-in scrollbars rather than design your own.

Jos sivujen vierittäminen olisi paha asia, eivätkä ihmiset sitä tekisi, niin aika monella sivustoilla menisi varmaan aika huonosti. Meneekö? Jos ihmiset eivät vierittäisi, jäisi Amazonilla paljon näkemättä. Jääkö? Kannattaako sivun alatunnisteeseen panostaa?

Jos pelkää sitä, ettei palvelun alalaitaa kukaan näe, on pelko aika turha. Fittsin lain mukaan sivun ylälaita on tietenkin nopein löytää: se on siinä heti tarjolla (kun tulee sivulle). Toiseksi nopein, saman lain mukaan, on sivun alalaita. Se vaatii tietenkin liikkeen (vieritys), mutta koska alalaidan ohi ei pääse, voi sinne vierittää itsensä miten vauhdikkaasti vaan. Alalaitaanhan pääsee myös yhdellä napin näpäytyksellä.

Kun tein työtä Plazan parissa, muistan siellä tulleen esille sen, että oli juttunosto etusivulla missä vaan, se ohjasi aina liikennettä juttusivulle. Ja Plazan etusivu on aika pitkä. Eli riippumatta siitä tarvitseeko sivua vierittää tai ei, ihmiset löytävät sieltä sen mikä heitä kiinnostaa. Tietenkin ylälaidan linkit saavat enemmän klikkejä, mutta se johtuu niin siitä, että ne ovat näkyvillä heti sivulle tultaessa kuin myös siitä, että ylälaidassa yleensä on kaikkein tärkeimmät asiat (esim, navigaatio, uusin sisältö, jne.).

Oma olettamukseni skrollipeikon sitkeydestä on, että ihmiset eivät aina tajua tai muista vierittävänsä. Vierityspalkit eivät ole nettispesifinen ilmiö, vaan vierittämistä esiintyy muissakin ohjelmissa (Wordista videoeditointiin) ja se on ollut osa graafisia käyttöjärjestelmiä kohta neljännesvuosisadan ajan. Ihmiset ovat oppineet – vierityksestä on tullut itsestään selvää, eli rutiinina ja rutiinin jättämä muistijälki ei ole erityisen helposti purettavissa jälkikäteen.

Niin, ja sitten on myös tämä:

While placing valuable content above the fold is a best practice, most users will be exposed to content halfway down the page.

Scrolling: Do They or Don’t They? A Data-Driven Analysis (Digital Design Blog)

Eiköhän tässä nyt alkajaisiksi ole jotain kättä pidempää skrollipeikkoa vastaan.

Tutki data,
mittaa muu,
skrollipeikko lannistuu!

Sitten tietenkin voi miettä, että lukevatko ihmiset sitä mitä sivulla on, ja miksi lukevat, tai jättävät lukematta? Mutta se onkin jo ihan toinen keskustelu.


Pääsy todellakin estetty

Pekka • 23.2.2008, 17.29

Kun miettii miten pitkään nettisuodatustamme on valmisteltu, on suorastaan uskomatonta miten huonosti se on toteutettu. Enkä nyt viittaa siihen miten suodatus toimii, vaan siihen miten se manifestoituu käyttäjälle. On surullista nähdä niin ala-arvoista toteutusta kuin poliisin estosivu.

Pääsy estetty - poliisin estosivu

Estosivua ei kai voi ihan verkkopalveluksi kutsua, mutta koska se on viranomaisen virallinen sivu, kuuluu se mielestäni saman lainsäädännön alle kuin mikä tahansa julkinen verkkosivusto ja sen pitäisi ehdottomasti seurata julkishallinnon verkkopalvelun suunnittelun ja toteuttamisen periaatteita, eli JHS 129 -suosituksia.

Verkkopalvelua suunnittelevan viranomaisen tuleekin varmistaa jo suunnittelun alkuvaiheessa palvelun mahdollisimman hyvä saavutettavuus ja esteettömyys, jotta ei tarpeettomasti estetä verkkopalvelun käyttöä vammaisilta tai muilta erityisryhmiltä.

Suomi.fi: Laatua verkkoon, Julkiset verkkopalvelut ja lainsäädäntö

Pääsy estetty -sivu ei pääse lähellekään mitään saavutettavaa sivua.

Virheitä estosivusta löytyy niin paljon etten oikein tiedä mistä aloittaa. Kaikki menee päin puita jo siinä ettei sivu ole validia koodia millään standardilla (ei doctypeä, ei mitään). Muita nopeasti havaittuja mokia: kehykset, kehykset nimetty tyhmästi ja niistä puuttuu title-määreet, sivujen otsikot eivät ole kuvaavia, koodi on vanhanaikaista ja sekavaa, metatietoa puuttuu tai se on virheellistä, sisältöä tarjotaan pdf-muodossa tarjoamatta siitä HTML-versiota (en tutkinut pdf-tiedoston saavutettavuutta, mutta oletan muun toteutuksen pohjalta että siihen ei ole panostettu), merkistökoodaus windows-1252…

Miten estosivu siis toteuttaa yhdenvertaisuusperiaatetta? Todella huonosti.

Mitä tapahtuu kun näkörajoitteinen kansalainen, joka on riippuvainen lukulaitteesta, joutuu estosivulle? Jos estosivulle joutuva ei näe, tai lukulaite ei lue, kehyksiä (epätodennäköistä, mutta täysin mahdollista)? Tämä kansalainen saa eteensä version sivusta josta puuttuu kaikki linkit lisätietoon.

Lukulaitteen lukiessa sivun viidessä kehyksessä (joista osa on kehyksiä kehysten sisällä!) olevan sisällön, on jo ensimmäinen puolitusinaa toistoa ”poliisi polisen” aivan hirveätä ja täysin turhaa kuunneltavaa.

Pääsy estetty - kännykän ruudullaKehykset aiheuttavat myös tekstin katoamisen jos selaimen ikkuna on liian pieni, tai jos jollain on kirjasinkoko säädetty isoksi. Eli taitto ei jousta, eikä se sovellu pienille näytöille (esim. kännyköihin).

Ymmärtääkseni kehykset eivät ole saavutettavuuden pahimpia ongelmia. Mutta ne eivät tee sivusta parempia, ja osaamattomien sivuntekijöiden käsissä ne vaikeuttavat näkörajoitteisten kansalaisten mahdollisuutta päästä viranomaistietoon.

Miksi ihmeessä sivu on toteutettu kehyksin? Siihen ei voi olla olemassa mitään järjellistä syytä. Järjettömiä ja surullisia syitä siihen varmasti on, ja yksi niistä lienee Microsoftin toimisto-ohjelmisto, joka näyttäisi olevan (ainakin osittain) syypää estosivun majesteetilliseen huonouteen.

Kun, tai jos, estosivun sisältöä joskus pitää päivittää, on poliisi onnistunut luomaan ei vain viiden vaan kuuden sivun sivun päivitysrumban. Kaiken lisäksi estosivuista löytyy useampia versioita (joista jälkimmäisessä, KPO:n estosivussa, ei ole mitään sisältöä niille jotka eivät näe kehyksiä). Ei mitenkään erityisen tehokasta toimintaa joka viittaa usein suunnitelmallisuuden puuttumiseen (tunnettu myös koheltamisena).

Jos estosivun tarkoitus on olla informatiivinen ja saavutettava, ei se onnistu siinä rakenteeltaan. Eikä se onnistu siinä myöskään visuaalisilta ominaisuuksiltaan. Sivun ei pidä olla kaunis, mutta kyllä uskottava ja selkeä. Poliisin estosivun pitäisi huokua virallisuutta ja viranomaista. Nyt se muistuttaa kotskasivua viime vuosituhannelta kahden tunnin kansalaisopiston kurssin jälkeen.

Estosivu on rauhaton ja rytmitön. Sisällön ryhmittely on sekava. Oikean laidan piperrys on vaikealukuista ja siitä puuttuu looginen jaottelu, kuin se olisi suunniteltu sellaiseksi ettei sitä haluta luettavan. Linkki, joka vie vastauksiin yleisimmistä kysymyksistä (niissä versioissa joissa linkki on), on aivan väärässä paikassa.

Emme varmaan koskaan saa tietää onko poliisin estosivu tällainen siksi, että jossain ei vaan osata vai siksi, ettei piitata. Kummankaan ei kuitenkaan pitäisi olla syy huonoon jälkeen, sillä maa on täynnä niitä jotka osaavat.

Lopuksi kysymys: kuka auttaisi poliisia saamaan laatua verkkoon? Kuka osaa tehdä estosivusta selkeän, luettavan ja informatiivisen, niin, että se on standardin mukainen, rakenteellisesti korrekti ja saavutettava? Miltä näyttää esteetön estosivu joka seuraa viranomaisille säädettyjä ohjeita ja lakeja? Linkkejä toteutuksiin saa jättää kommentteihin.

(Kalamukille kiitos juttuideasta.)