Huonot visualisoinnit: Facebookin raporttipallukat

Facebookista löytyi oivallinen esimerkki datan huonosta visualisoinnista. Facebook-mainoksien raporteissa Facebook on päätynyt käyttämään visualisoinnissa pyöreää muotoa, joka ei kuitenkaan ole läheskään ongelmaton. Alla olevassa kuvassa vasemmalla Facebookin nykytila ja jotta valituksen lisäksi olisi myös ratkaisuita: oikealla viiden sekunnin korvaava ehdotukseni – pallukoista pylvääksi. Taustatiedoksi: sininen kokonaisala on 498 020 henkilöä, vihreä esittää 206 902 henkilöä ja oranssin pitäisi esittää 26 485 henkilöä.

Facebook pallot vs. pylväs

Ketä tässä yritetään huijata?

Ympyrä on kaunis muoto ja antaa raporttisivun muotokieleen rikkautta, mutta sen pinta-alaa on paljon vaikeampi tulkita kuin suorakulmion. Tässä tapauksessa ympyrässä esitettynä kattavuus näyttää kohdennettuihin suhteessa suuremmalta kuin todellisuudessa onkaan ja tarjoaa tulkitsijalleen todellisuutta positiivisemman mielikuvan. Suorakulmiosta sen sijaan pystyy melko luotettavasti toteamaan, että vihreä osuus on pinta-alasta hieman alle puolet eikä reilusti yli puolet, kuten pallukat näyttäisivät.

Suurinta ihmetystä aiheuttaa yhteisökattavuuden visualisointi, jonka suhde lukujen perusteella pitäisi olla noin 5 % luokkaa siniseen pohja-alaan. Facebookin visualisoinnissa se näyttäisi noin 20 % kokoiselta (pylväässä mallin vuoksi oikean kokoisena). Oranssi pallukka alleviivaakin hienosti kyseisen visualisoinnin tyhjänpäiväisyyden – sen tarkoitus ei olekaan auttaa käyttäjää tekemään tulkintoja datasta, vaan yksinkertaisesti koristella sivua ja jopa johtaa maksajaa harhaan.

Hämy!

Puhelinnumeron on oltava enemmän kuin 3 merkkiä

Huraa Saksalainen insinöörityö! Sen enempää kantaa palvelun muuhun idiotismiin ottamatta, tämän kertainen minifail-palkinto kuuluu Siemensin hakulomakkeelle.

Insinöörien taidonnäyte

Insinöörien taidonnäyte

“Puhelinnumeron on oltava enemmän kuin 3 merkkiä”

Siemensin virheilmoitus on yksin kauneimmista koodarisuomen kieliopin kukkasista hetkeen. Ohje maalaa puhelinnumeron tulevaisuuden olomuodosta abstraktin kuvan, muttei kerro käyttäjälle todellisuudessa, miten hän tämänkin ohjelmoijan virheen voisi korjata.

Okei okei, eihän se nyt oikeasti ole mikään ongelma kirjoittaa kolmatta ja neljättä merkkiä, mutta en ollut kirjoittamassa puhelinnumeroa. Lomake on selvästi kyhätty jostain vanhasta yhteydenottolomakkeesta leikaten ja liimaten. Se ei kuitenkaan riitä selitykseksi. Puhelinnumeroissa on merkkien sijaan useammin… hmm… numeroita! On myös hyvin harvoja puhelinnumeroita, joissa on vähemmän kuin neljä merkkiä ellei nyt sitten satu edustamaan numerotiedustelua tai hätäkeskusta.

Haku toimii ohjeesta huolimatta myös kolmella merkillä, vaikka ohje sanoo, että enemmän kuin kolme merkkiä, mikä viittaa taas ennemmin peräpään (backend) koodarin kuin ihmisen touhuihin. Onneksi olkoon vielä kerran voittajalle!

MacBook Pro and Magic Mouse unable to pair

Ahh, summer holiday: sleeping late and starting another design task for a pleasant client right after a plentiful breakfast. But hold on for a sec! Why’s my magic mouse not working?! Almost two hours of digging the forums I finally found a solution.

Devices

  • Macbook Pro 2.66 GHz Inter Core 2 Duo / 4 GB 1067 MHz DDR3 / Mac OS x 10.6.8
  • Magic Mouse(s)

Symptoms

  • Magic Mouse(s) can’t be paired with MBP (batteries changed correctly, switched on and off for multiple times)
  • Any other Bluetooth device can’t be discovered (iPhone, Nokia Phone)
  • MBP Bluetooth dropdown in the top right corner doesn’t have a “Turn Bluetooth Off” option

Solution

  • Reset your System Management Controller (SMC).
  • Turn on your MBP.
  • Re-pair your Magic mouse via Set Up Bluetooth Device in the top right corner under the Bluetooth icon (especially if using the Mouse utility under System Preferences didn’t work).

Now some more coffee and Web Design! <3

Web Design puutarhatontut

Vaikka ani harvoin vaivaudun kirjoittamaan vastineita tai kommentteja muiden kirjoittamiin blogeihin, teen tässä poikkeuksen. Kiitos bongauksesta Timo Häkkiselle, jonka kanssa yritämme tehdä webbiä niin kuin sitä meidän mielestämme pitäisi tehdä.

Tarkkaamon kirjoittaja Jussi Linkola on 3.7.2011 kirjoittanut Googlen Web Fonttien autuudesta ja onnistui herättämään tunteeni. Lyhykäisyydessään Jussi ensin dissaa vähän CSS:ää ja HTML:ää ja sitten kehuu Googlen verkkofonttipalvelua.

Ulkoasulla ja sivunrakennustekniikalla ei ole ristiriitaa

Webdesignereiden perinteinen riesa on www-sivujen ulkoasun ja sivunrakennustekniikoiden ristiriita

Aivan kuin sanoisi, että arkkitehtien suunnittelemien talojen ja rakennustekniikan välillä on olemassa ristiriita. Toisaalta! Perkele! Niin onkin! Toisaalta kielikin on rajallinen työkalu ilmaisemaan ajatuksiamme tai tunteitamme. Myös kitara on rajallinen instrumentti musiikin tulkitsemiseen. Myös graafinen suunnittelu on yksiulotteinen ilmaisu- tai viestintäkanava ja siksi hyvin rajoittunut.

Yleensä kuitenkin suvereeniksi harjaantunut kirjoittaja, soittaja, arkkitehti tai web designer tuntee välineensä niin, että hän pystyy luovia keinoja käyttäen ilmaisemaan haluamiansa asioita. Hän voi jopa kunnioittaa välineensä historiaa ja vahvuuksia ja pyrkiä tuomaan niitä esille.

Oikeat Web Designerit eivät yleensä koe www-sivujen ulkoasun ja sivunrakennustekniikoiden välillä todellista ristiriitaa, vaan he ymmärtävät, miksi verkon toteutustekniikat toimivat tietyin tavoin ja käyttävät olemassa olevia välineitä parhaalla mahdollisella tavalla tukemaan viestintäänsä.

Hyvän suunnittelijan tunnistaa monesti eri menetelmien luovasta käytöstä, vieläpä niin, että menetelmät tarjoavat todellisia ratkaisuita todellisiin ongelmiin. Toisinaan nämä luovat menetelmät otetaan laajalti käyttöön ja standardisoidaan niin, että niistä syntyy uusia, helposti omaksuttavia välineitä myös muiden tarpeisiin – siitä Googlen Web Fonteissakin paljolti on mielestäni kyse.

Puhtaasti oikeaa suunnittelua apinoivalle mukaesteettiselle roskalle on olemassa oma nimensä kitsch ja sitä on netissä jo nyt tarjolla valitettavan paljon. Huono verkkosivu, jota on väkipakolla yritetty koristella Googlen Web Fonteilla on yhtä kaunis ja tarpeellinen kuin puutarhatonttu.

HTML ja CSS eivät ole rajoittavia tekijöitä

HTML ja CSS eivät luonnostaan tarjoa riittäviä mahdollisuuksia sivujen ulkoasujen visiuaaliseen esittämiseen.

Jos kirjoittaja haluaisi muistaa, mitä HTML ja CSS tarkoittaa, hän tuskin olisi vaivautunut kirjoittamaan koko lausetta. HTML on vain semanttisesti merkittyä dataa ja CSS nimenomaan semanttisten dokumenttien visuaalista esittämistä varten luotu standardi. HTML tai CSS ei missään vaiheessa ole rajoittanut sivupohjien suunnittelua. Paljon suurempia esteitä matkan varrella ovat olleet huonot selaimet: siinä IE, missä mainitaan.

Verkkosivu on alun alkaen antanut ihmisille väärän kuvan siitä mistä verkkodokumenteissa (tällehän ei tunnu olevan suomen kielessä hyvää vastinetta) on kyse. Verkkodokumentit eivät ole koskaan olleet sivuja siinä missä meidän A-standardin A4 tai A3-sivut. Ainoa yhdistävä tekijä paperisivun ja verkkosivun välillä on, että molempia katsotaan ja sikäli tietynlaiset ilmaisukonventiot on järkevääkin hyödyntää: lukutottumukset ja visuaalinen semanttinen jäsentäminen nyt vaikkapa päällimmäisenä.

Sama harhaluulo on hiipinyt myös monien verkkosivusuunnittelijoiden tajuntaan. Verkon kognitiivista ja toiminnallista luonnetta jännittävä juniorisuunnittelija haluaa tukeutua printtimaailman tuttuuteen ja turvallisuuteen ja alkaa yhtäkkiä valittaa: “kuinka huonoja verkon toteutusmenetelmät ovat.” Verkko on kuitenkin täynnä kauniita, toiminnallisia, kiehtovia ja kutkuttavia toteutuksia, jotka eivät ole pelänneet elää verkkodokumentin ehdoilla. Miksei verkkosivu saisi rohkeasti näyttää erilaiselta kuin painettu esite? Hiton nössöt!

Kokemuksesta voin sanoa: jokaisen pinnan liukuvärittäminen tai kiiltojen ja pienten yksityiskohtien hierominen nappeihin ei sinällään tee verkkosivusta parempaa. Parhaimmillaan se on piste i:n päälle ja huonoimmillaan sillä saadaan suunnitelma näyttämään paremmalta silloin, kun todellinen suunnittelu vielä sakkaa. Todellisella suunnittelulla viittaan siis siihen osuuteen, jossa oikeasti mietitään, kenen ongelmia ollaan ratkaisemassa ja miten niihin ongelmiin parhaalla tavalla löydetään ratkaisu, miten verkkosivujen pitäisi toimia ja minkälainen kokonaisuus niistä muodostuu. Näiden rinnalla kiiltävät napit ja liukuvärit ovat triviaaleja.

Web Designin ongelma ei ole koskaan ollut rajallinen määrä fontteja

Myös käytettävissä oleva fonttivalikoima on varsin rajoittunut riippuvainen käyttäjien konelle asennettua oleviin fontteihin.

Hyvä typografia on harvoin kiinni käytettävissä olevien fonttien määrästä. Typografia on kiinni suunnittelijan taidoista käyttää olemassa olevia fontteja niin, että teksti on ymmärrettävämpää ja luettavampaa. Usein käytettävät keinot aiheuttavat myös välittömästi kauneutta, koska muotoilu yhdenmukaistuu, selkeytyy ja muuttuu rytmiltään rauhalliseksi tai tietoisen rauhattomaksi. Taitava typografi tekee Times New Romanilla ja Arialilla ihmeitä – paljon enemmän kuin huonompi koskaan Googlen lähes 200 fontilla.

Mikä ongelma sitten on?

Kuten aina, ongelma on verkon erityislaatuisuuden heikko ymmärtäminen ja laiskuus tehdä huolellista perussuunnittelua. Kyllä niitä hauskoja leiskoja varmaan on ihan kivaa tehdä, mutta itse en haluaisi suunnitella eri näköisiä puutarhatonttuja tästä hamaan tulevaisuuteen – paljon mielummin vaikka invahissejä, joissa rajoituksista tehdään rikkautta.

Google asks users which results rule

Google is once again heavily experimenting with new features and visual elements: black header bars, new sidebar colors, icon based search button and the list goes on. However the most significant feature that caught my attention is the one that lets registered users recommend a good search result.

Google plus one

How do you think pushes these buttons, users or Google robot?

This is definitely an answer for those preaching in the name of user centered content and design. Predictably in the future users will have even more say in what is good and what is not – even in Google. And when users decide which results they want to see, it doesn’t matter how many content reviewing robots you’ll build or how many rating algorithms you create, you’ll probably go wrong anyway.

So, the next time someone asks you to design for search engine robots, shoot them. SEO (Search Engine Optimization) to HO (Human Optimization)! Yay!

Pizza-online Alert!

Alert! Varoitus! Järjestelmämme ei ole rakennettu älykkäästi, joten meidän on syytä varoittaa sinua tiedotteella.

Miksei sähköpostiosoitteeni voinut olla samalla käyttäjätunnus? Olen kuitenkin rekisteröitynyt kyseisellä sähköpostiosoitteella. Sen sijaan minulle on näemmä edellisen rekisteröitymisen yhdeydessä annettu käyttäjätunnus, jossa on seitsemän sattumanvaraista merkkiä tyyliin 2F83kHn. Sepä onkin helppo muistaa, kun päätän ex tempore tilata pizzaa. Varsinkin, kun salasanakin pitäisi vielä muistaa.

No nyt minua on (taas) varoitettu. En ihmettele, vaikka rekisteröitymisprosentti jäisikin hitusen odotusten alapuolelle.

Foursquare idiotismia: Kvik

Tätä voi kutsua Foursquare-tarjoukseksi.

Tämä on sen sijaan hevonkukkua ja ärsyttävä roskaviesti.

Olisiko ollut liikaa vaadittu antaa check-inin yhteydessä vaikkapa kynä tai joku muu palkinto? Sen sijaan oli näppärämpää tunkea surkea mainosviesti käyttäjiä ärsyttämään. Tässä kiteytyy loistavasti huonon ja hyvän sosiaalisen median käytön erot. Toinen palveli käyttäjiään, toinen oli vain tyhmä.

Tämän kertainen voittaja on siis Kvik.

When programs do things without asking: F-Secure’s latest epic fail

The lesson

Don’t ever ever make your software do important decisions for your user. Programs that behave in ways that user doesn’t expect them to, are bound to fail.

If it’s about freeing your user from repeating mundane tasks, please let the program do the work. If it’s something that most of the users would choose in most cases, please make the decision for them. But if it’s about trashing 90 000 files on my computer and not letting me restore them with a single click – please just let me do the decision making. Pretty-fucking-please.

The story follows.

I believed in a virus free computer

When I ditched my PC and purchased an iMac, one of the things off my chest was the vast amount of viruses I had just left behind. For a couple of months I didn’t even consider installing a virus protection software – I felt Safe. Then a friend from work told me that F-Secure’s got a free version of their protection software for Mac. Oh well, protection’s always good, right? Right.

Is this my first virus on a Mac?

Tonight I came home from work and launched my Firefox and then suddenly my F-Secure alerts me about a malware it has just prevented. I slowly close my browser and move away from the keyboard: could this be real? In disbelief I blink my eyes rapidly for a few times and relaunch Firefox… there it is again! Is this my first ever virus on a Mac?

My natural reaction

Worried about the infection I decided to start a full system scan. Little did I know what was about to happen next.

Since I’ve got over 500 gigabytes of files, I also left the F-Secure software running and went to play some GT5 on my PS3. For some reason the first 3000 files seemed to have almost 3000 dangerous files. This didn’t feel alerting, although it should’ve.

The epic fail

Later at night I came back from a floorball rehearsal and checked the status of the files right away. How many files were infected? Did F-secure remove the infection? What other actions do I need to take in order to regain my computer’s health? The report tells me that… of the 90 000 thousand infected files… almost all have been… moved to Trash!

I dash to forums to find a way to restore my files back to their initial locations. Like a word from heavens it echoed: “Put Back!” A command that could reanimate your files and repair your broken software. But just like everything that sounds too good to be true… well isn’t true. I keep on digging and in the last corner of the Internet (which is of course F-Secure’s forum) I find a thread that sheds some light on my despair.

The problem was indeed a major false positive on the TP version of our OS X offering. The problem was solved a while ago with update 2011-03-14_04. If any of you were using a non Technology preview version, please contact me. – Veli-Jussi Kesti, F-Secure corp.

I might’ve not been infected in the first place! And now I’ve got 90 000 files including my Photos, Graphic Design Files, Shared files from DropBox, Application files, etc. in the trash and no idea how to put them back where they belong. And for what? Someone had decided that the default option was to automatically trash the files. G-sus! Guess again, sir – you’ve just made and epic fail.

Internet money machine

Your five steps to Internet fortune

  1. Generate cute (funny, original, epic, fail, violent, etc.) content with your video camera (iPhone works just fine for this).
  2. Get a domain (don’t worry if it costs a bit, you’ll get your money back soon).
  3. Host your content on YouTube in order to gain Adsense money and to make sure you wont run out of bandwidth.
  4. Embed the YouTube content on your new domain and add affiliate banners via Peerfly (basically any other Affiliate program will do)
  5. Laugh your way to the bank

These guys already knew the secret

http://sosocute.info/
http://earthquake-in-japan.info/

Määrittelemätön virhe

Lentojen ja hotellien varaaminen netistä on luottamusta vaativaa puuhaa. Luulisi, ettei ole rakettitiedettä oivaltaa: kun raha alkaa liikkua, kannattaa yritysten ja käyttäjän väliseen rajapintaan erityisesti panostaa. Tämän kertaiset fail-palkinnot voittavat Supersaver ja Travelstart.

Supersaverin lomake ilmoittaa komeasti, että on tapahtunut “Määrittelemätön virhe” eikä sen lisäksi tarjoa minkäänlaista vihjettä, miten minun olisi virheen kanssa meneteltävä. Eteenpäin pääsin tietysti(?) painamalla uudestaan lomakkeen hakunappia.

Supersaverin määrittelemätön virhe

Ei näin.

Koska hintoja nyt vertaillaan, niin päätin kokeilla toistakin palvelua. Ilokseni he osasivat hoitaa tilanteen yhtä mallikkaasti tarjoamalla minulle lisää huutomerkillä koristeltua “Määrittelemätöntä virhettä.”

Travelstartin määrittelemätön virhe

Eikä näin.

Tässäkin tapauksessa eteenpäin päästiin hakemalla virheestä huolimatta. Ihmettelenkin, miksen päässyt eteenpäin ensiklikkauksella, vaan minua piti hieman huolestuttaa virheellä. Liekkö taustalla oivallinen idea saada käyttäjä vielä kerran syynäämään hermostuksissaan valinnat läpi ennen jatkamista?

Ilmoitusten samankaltaisuus herätti kiinnostukseni ja huomasin, että molempien palveluntarjoajien käyntiosoite on sama. YTJ:stä tarkistamalla huomasin, että sama porukka tunnetaan ainakin nimillä:

  • Oy SRG Finland Ab
  • Matkatoimisto Supersaver
  • Matkatoimisto Gullivers
  • Töölön Matkatoimisto
  • Travelstart
  • Seat24

Voittajan kaava: yhdestä mokasta moneksi käyttämällä samaa järjestelmää!