The install is very WordPress-like, if you have ever installed that. FTP the piwik files to your server and run their installer in your browser. They do some server checks to make sure everything uploaded correctly (I had to go back and explicitly upload 3 files in binary mode) and to verify that you have php, mysql, etc. They then ask for the database they are going to be creating tables in, and the site you want tracked first. They then spit out a bit of javascript for you to put on the pages you want tracked (I chose this blog as my experiment), and you’re done with the installer. Copy that bit of javascript over to the footer of the site you want tracked and you are completely done. For analytics software, it doesn’t get much easier to install.

On to the dashboard. What can I say? It’s analytics. The first thing you see is a line chart of the visitors for the past months. Also easily visible are charts/tables for the length of visits, browsers used, and keywords. The live stats are my personal favorite. As a test, I clicked on a page on this site, and by the time I tabbed back over to piwik, it had recorded the click (complete with browser, OS, screen res, etc). More importantly, there are a ton of widgets, and you can build your own, to add to the dashboard. Oh, and you can drag them around the page to be wherever you want. Still deciding if it is gimmicky. I think that you can add your own widgets means that it is not. Often, these sort of interfaces mean the design team refused to make hard decisions and opted to pass it off to the user. But since the person is allowed to add their own whatevertheywant to the page, it works. Some of the charts have a feature that allows you to view the data in multiple forms, meaning I never have to see a pie chart again, and isn’t that worth whatever downsides Piwik might have? Of course, it also stinks of the common open source problem of ‘too much choice’. But it is open source, so that is to be expected. And as this is an analytics package with, I suspect, power users as the primary audience, it can even be forgiven. The geek in me certainly doesn’t mind all the buttons.

Since I just installed Piwik in the past hour, I haven’t gotten to all of the other features you might want to try out. But they track all sorts of actions, and you can set goals and whatnot, as you would expect. What I did do was add another website to see how much of a hassle that was. It was actually very simple. A click over to Settings->Websites->Add a Website, and there you type in the site’s info and you’re done. Again, they give you some tracking javascript, which you can get back to at any time, and voilà. What I thought was especially nice is that in the same place you can list excluded ip address and excluded parameters (by default they ignore some common ones, like phpsessid).

I obviously don’t know how any of this scales yet, but there are some things in Piwik that show they have thought about how to scale to large websites. Under general settings, there are options about generating archives and how often you should allow Piwik to do so, complete with recommended settings. For large sites, they recommend setting up a cron job for archiving, which is good, as it shows they understand the limits of the what the software can handle.

There are other advanced options that I have not looked into yet. If you don’t want to use javascript to tracking your site, there is a pixel you can use instead. Note that you can’t track everything with a pixel that you can with javascript. There is also an API in case you need to give your server the ability to trigger conversions. I haven’t looked into how complicated or robust it is, but that it exists at all is hopeful for those of us doing more complex transactions.

And that’s really as far as I have gotten in my looking around Piwik v1.0. If something explodes, I’ll let you all know. At first glance, I’m happy with it. Piwik has an online demo, which uses their site for data, that you can check out. At the end of the day, Piwik is still something you have to install, which will probably keep it behind Google Analytics for the majority of people. But, if you are like me, and have good business reasons to not agree to Google’s awful terms of service, Piwik may just be your open source solution.

Ugh... ‘open source solution’ sounds like some marketing bs, doesn’t it? Next thing you know, I’ll be spouting off about ‘Web 3.0′ or some other gag inducing nonsense. I’m sorry. Go try Piwik.

This is what I started with...

$('#someDiv').find( 'dl.list:visible input[checkbox]' );

$('#someDiv').find( 'dl.list' )
             .filter( ':visible' )
             .find( 'input[checkbox]' );

RequireJS
Simple Modules Feedback
Patterns for Dry-er Javascript by @rmurphey.
Why You Should Pay Attention to Node.js
Plugin Enhancements with .queue and .trigger. All of this site is good, really; The queue stuff especially caught my eye.

Avoid Being Embarrassed by Your Error Messages by Caroline Jarrett
Innovate, Yes, but Make It Practical – New York Times
The Most Uplifting Vandalism Ever (PHOTOS)
Women in Technology by @stubbornella
Learning to Say No to Bad Ideas by @whitneyhess

And really, just got read all of Whitney Hess’ blog, Pleasure & Pain. It kept me up until about 2am earlier this week, which is a rare feat, I assure you.

What is this, indeed, Gmail? What are this elements affordances? Well.. clicking. It inherits the affordances of the elements it combines (checkboxes and select boxes). The trouble is not in this general term of affordance (all of the screen affords clicking), but in perceived affordance. What is the user to expect from clicking that element? The standard labels (or perhaps first item in the case of a select) are not present. The user has only to guess.

From this more complete view, one might guess from the context, especially if you are a long time Gmail user, that checking that box does a ‘select all’ on all those other checkboxes. I even cropped the image to help your guess. And you would be correct. Good job! You won Google’s version of mystery meat navigation!

Of course, you still don’t know what type of items are in that drop down.

You only have to look to the Google support forum to find people who thought Gmail has removed all filtering from the site. Now I imagine that Google tested this with users and got a result that said people still used the filters found in that drop down (it has ‘select all’, ‘select none’, ‘select read’, etc, if you hadn’t guessed). I also imagine that they didn’t bring anyone into their testing labs and actually look at them while doing this test. Sure, when I first saw the new design, I was still able to use the filters. Much like mystery meat navigation, it is just a matter of trial and error. But if they had just watched the people using it instead of using some software to track usage, I am sure they would have seen the same confused reactions I did in my friends (and that I had myself); One of ‘what the heck is that? Let’s click it and see what happens.’

This is not the way to design an interface. “Well, they will figure it out,” is not good enough. Even if it does save 16px in page height.

I’ll be using a table row as the target of clicks, and jQuery throughout because that is what I use.

So, simple table structure with nothing special except an id on the table for a hook.

<table id="myTable">
    <thead><tr><th>Row Header</th></tr></thead>
    <tbody>
        <tr><td>Click Me!!!</td></tr>
        <tr><td>Click Me!!!</td></tr>
    </tbody>
</table>

See? Nothing special. For whatever reason, we need one action to happen when a user clicks one of those rows, and a different action to happen when the user double clicks. To do that, we will use the dreaded ‘setTimeout()’. You hate it, I know. We are going to use it anyway.

First up, we need two variables.

/* Variables */
01. var clickTimeout = null,
02.     clickDelay = 100; //milliseconds

These, of course, are inside of the closure all your code is in, right? No screwing with the global namespace for us.

Now, I’m just going to throw all the rest of code at you at once and break some bits down after. Here it is.

03. $('#myTable tbody tr').live('click', function(){
04.     if(clickTimeout){ return; }
05.       
06.     clickTimeout = window.setTimeout(function(){
07.         //do whatever you want to do right here
08.         clickTimeout = null;  
09.     }, clickDelay);
10. })
11. .live('dblclick',function(){
12.     if(clickTimeout){
13.         clearTimeout(clickTimeout);
14.         clickTimeout = null;
15.     }
16.     //do whatever you want to do right here
17. });

Lines 3 and 11 just add the click and double click lines, respectively, with jQuery goodness. Line 6 sets up a time out whenever the user clicks a row, with a delay of 100 milliseconds (see lines 9 and 2). So after 100ms, this timeout will fire and do whatever you wanted to do on click. If they only click once, then all is well and this works just fine.

But we need a double click in there and don’t want the click action to fire if the user double clicks. So see line 12. If ‘clickTimeout’ exists (and it will since a click always precedes a double click), then remove it with clearTimeout, thus stopping the click event from ever happening. Then just do whatever you want to do with the double click (line 16).

That is it except for one thing, line 4. Because setTimeout() returns a unique id every time it is called, each click in a double click will get it’s own timeout event. So without that line, the second click would call setTimeout() again, and that id would replace the one our ‘clickTimeout’ variable is storing. But the actual timeout itself is not replaced, just the variable that holds the id! This means that the action from the first click fires even though the double click function clears the timeout from the second click. To prevent this, we simply check to see if clickTimeout is set (meaning they clicked less than 100ms ago and are going to trigger the double click), and if so, return.

I was working in FF, so IE’s odd handling of the order of click events may require extra tuning or checks in the script. But that’s another day.