PicNet Custom Software Development

.Net and Javascript Development

Visitor Heat Maps in WordPress - New Plugin

Posted on clock May 4, 2010 08:13 by author guido

Hi All,

I'm pleased to announce that we have just released a new WordPress plugin that will allow you to effortlessly add the PicNet Mouse Eye Tracking service to your WordPress website / blog. Now you can see exactly what your visitors are doing on your web site and not need to change a single html file.

For full details on what Mouse Eye Tracking can do for your web site see the home page.

Download the plugin.

Screenshots

Heat Map

Heat Maps

Page Navigation

Page Navigation

Thanks

Guido Tapia

Software Development Manager

PicNet Pty Ltd


Introducing Mouse Eye Tracking - Tunnel Vision

Posted on clock February 19, 2010 08:46 by author guido

One question that has been asked of me a few times since the release of the PicNet Mouse Eye Tracking Service is that of accuracy. How acurate can the Mouse Eye Tracking service correlate eye activity from mouse activity. We have done a lot of testing on this topic and we believe that the correlation is significant. In fact it was significant enough for us to invest a huge amount of time and effor in producing this product. We are also highly encouraged by the academic research in this field that supports our own tests (See product home page for links to this research).

However, we are aware that the accuracy is not 100% and it will never be. If you want 100% accurate data about activity on your site you need to use eye tracking. However this also has many downsides. One of the ways that we try to increase the correlation between mouse and eye is by using an as yet undocumented feature called Tunnel Vision.

Tunnel Vision tries to encourage the user to use the mouse to view the page whilst attempting not to alter the normal behavior of the user on the page. Lets have a look at tunnel vision in action:

Tunnel Vision Off


Tunnel Vision On


As you can see, tunnel vision creates a tunnel around the user's mouse giving you a clear area of vision around the cursor but more importantly tunnel vision still allows the user's peripheral vision to look around the page in preparation for the next area of focus.

I encourage you to try tunnel vision in your closed testing (Do not put this on your live site!!!) and see the results for your self.

Turning On/Off
To turn on tunnel vision simply add (use-tunnel-vision="true") to your PicNetEyeTracker span. i.e:


<span id='PicNetEyeTracker' usercode='picnetpilot' use-tunnel-vision="true">...


To turn off tunnel vision simply remove this tag or set use-tunnel-vision to "false".

I hope this feature helps you get that extra level of accuracy with your mouse/eye tracking.

Thanks

Guido Tapia

Manager - Custom Software Development

PicNet Pty Ltd


Html Web Worker Woes - Data Analysis not an Option

Posted on clock February 18, 2010 04:25 by author guido

During development of the PicNet Mouse Eye Tracking service I carefully investigated the possibility of using Html Web Workers.

After careful reading of the specs I thought this would be great but after some initial tinkering I found that communications between threads was done through the postMessage feature supported by modern browsers.

This instantly raised some suspicions as I know that this is a text only feature, I know FF will auto serialize/deserialize to/from JSON but this as expected performs pretty poorly for large data sets. But I gave it a benefit of the doubt thinking that there was no way that someone would go to the extreme pains of implementing a threading framework and cripple it by not allow memory references to be passed between threads.

WRONG!!! And now I can say that the new threading features in browsers is only usefull for making the UI more responsive. Now don't get me wrong thats great and a huge relief not to be having to use setTimeout hacks everywhere but seriously?? Why would you break my heart like that?

Threading is critical in calculation intensive or data analysis intensive applications. The PicNet Mouse Eye Tracking service is a great example of this. The javascript engine gets a whole bunch of mouse coordinates and from this data we render heat maps, curved mouse tracks, etc, etc. This is a huge amount of calculations that lock the browser JS thread but it is impossible for me to use web workers. Why is that?

The cost of postMessage
postMessage can transfer strings between threads. But it is very rare that data requiring analysis is solely string based, mostly we are working with other primative types as well such as numbers, booleans, DateTimes, etc. And the cost of converting (serializing) strings to/from these data types is huge. After some early prototypes I tossed the idea of using Web Workers aside. I know this is very early days in the life of Web Workers but I was quite taken aback by this crippling flaw in the specs.

Lets look at numbers
K, lets support my whinging with numbers. Below is a table that shows an expensive operation on an array of numbers. We process the array using the specified number of threads. Note: Refresh to see it running in real time:

Run Test
1 Threads2 Threads3 Threads4 Threads5 Threads
IdleIdleIdleIdleIdle


Guido Tapia

Manager - Custom Software Development

PicNet Pty Ltd


GWT in a .Net environment

Posted on clock February 3, 2010 04:11 by author guido

Hi All,

As you know we have recently release the PicNet Mouse Eye Tracking service. This project is by far the largest Javascript centric application that PicNet has developed. This led us to do a lot of research on what technologies we would use for generating a maintainable javascript project.

We were restricted to having a .Net backend as that is what our existing infrastructure supports and its the technology where we live most comfortably. So the decision for the backend was simple, ASP.Net Mvc (w/ Spark View Engine) + NHibernate.

But now came the more complex decision of the client code (javascript). Do we stick to standard jquery code minified in our continous build? do we create our own bootstrapping js framework to easily allow OO in js? Do we leverage other such frameworks?

We ended up investigating a lot of different options but this article focuses on one of these which is GWT.

Javascript development is hard, anyone that tells you otherwise thinks javascript development is for creating roll over buttons. JS development is hard for various reasons.
  • The language is very flexible and it gives you all the rope in the world to ...
  • At the heart of the language is the function. This is a concept that is difficult for most OO devs to wrap their heads around
  • Performance is such a huge issue, compared to server languages
  • Code size (and design) is a big issue
  • Finally and most importantly is: The tools for javascript development are useless in comparison to other languages
The last item is huge. I mean with Java you use Eclipse or IntelliJ to manage your projects, builds, deployments, code analysis, error reporting, debugging, syntax highlighting, unit testing, code completion, refactoring, etc, etc, etc. For .Net you have Visual Studio giving the same support. Now try this as an experiment. Write a simple app in Java or .Net using notepad! That is what javascript development is like, regardless of language features, performance, etc. The tools issue is a killer.

GWT is a great framework and I would comfortably say, its the best framework for javascript development available. The reason it is the best framework is the fact that you can use good tools (Eclipse, IntelliJ, etc), it also removes alot of the Javascript hacky mentality required for writing fast javascript (but thats a secondary benefit in my opinion). Now for .Net developers learning to use Eclipse, etc is a bit of a pain but from a maintainability issue, if you were developing a solely javascript application it is definatelly worth the effort. HOWEVER!! Having a client (javascript) / server (.Net) application written in GWT / .Net has huge drawbacks. It is actually so painful that we finally decided to abandon the attempt.

How do you do it
Well our service is a very complex html page with a very large javascript component. The html file we generate using Spark View Engine. This lets us modularise the html into nice little controls that are easy to work with. This is where we encounter our first GWT hurdle. To use GWT you have to have the html in the hosted server, well that's not true you could compile the javascript and stick it in your ASP.Net application and not have html in Java however if you cannot use GWT in hosted mode it is not worth using (My own opinion).

What does this mean? Well, basically it means that you have to view the source of your html and copy into your GWT environment. Thats correct, change html you need to remember to copy paste into GWT env every time. We tried doing crazy things like having iframes pointing to the ASP.Net app from GWT environment with cross domain policies, etc but this always failed.

Ok, this is a huge maintenance issue, however if this were the only issue I think we still would have used GWT given its previously described benefits.

Second issue!! Talking to the server. This issue actually has a few parts, the first is serialisation. GWT offers a few optimised serialisation mechanisms such as XML and JSON (and a custom one). Since our application used plain strings for its communications, rolling up our own XmlHttpRequests from GWT was no problem (we do this for performance reasons). So this was no big issue at all. The second issue is authentication. To use our application you must be logged in so in development mode we had to add a hack that would recognise GWT development requests and simulate a user, Ughh!! Still not a huge issue but getting bigger. And finally the last issue is the fact that to use GWT with a .Net backlend in development you have to use a proxy server. No problem here is a great article describing how to set this up. Now it is difficult to describe the development process here but I will try.
  • Start the hosted mode server
  • Oh forgot to copy the new html
  • Copy the html
  • Restart hosted mode
  • Crash!!
  • Hughh?
  • Oh, a crash on the .net side
  • Done, try again
  • Hmmm yes it does look better with that border
So you get my pain?

So my conclusions. GWT is awesome!! Enough cannot be said about how good this toolkit is but it is still too painful to be a real alternative in a .net application.

Guido Tapia

Manager - Custom Software Development

PicNet Pty Ltd


Mouse Tracking vs. Eye Tracking

Posted on clock February 3, 2010 02:28 by author guido

Note: I tried to make this article as unbiased as possible but being the father of a newborn mouse tracking service I highly doubt I achieved this. So please read this with an open mind and feel free to research both solutions.

Since the limited release of our Mouse Eye Tracking service we have had great feedback and we are now more excited than ever in future of this product. However some criticism has been raised over the statistics quoted on our product page, this critisism however came from employees of Eye Tracking companies so I take their comments with a grain of salt. These comments however led met to investigate the differences and benefits of each technology, that is, eye tracking and mouse (virtual eye) tracking. This blog is the result of that research.

Note: I will not describe the ultimate goals of both these approaches which is improved usability and increased marketing value of your online presence.

Firstly let me try to illustrate what I believe to be the pros/cons of each technology (Please comment if you believe I have missed anything):

 Eye-TrackingMouse [Virtual Eye] Tracking (MET)
Cost Prohibitive to SME Free
Sample Group Small sample group of people who may not be the regular users of your site. If you want targeted sample group the costs are significantly higher (and sample group smaller). Real users to your site
Environment Sample group in a research room, conscious of their actions being monitored. Some eye tracking companies still use tracking glasses which make the sample group even more conscious of their environment. Even when not using glasses current technology means that the head has to remain relatively still and within a reasonable location (Don't lean back!!). Real users using the site normally with no knowledge their usage is being studied
Interpretation These companies usually provide analysis of results which is another addition to cost but it does provide you with insight that you may miss. Usually left to up to you. However PicNet does offer these services to customers that require it but since this is a technology comparison I will leave this red.
Used in mockups Huge costs Yes, for free and set up instantly.
Easy to set up Needs to be done by third party, requires expertise Can be up and running almost instantly
Accuracy Close to 100% Accurate representation of what the sample group is viewing. 84%-88% According to the only independent - scientific research I have found (http://portal.acm.org/citation.cfm?id=634067.634234).


Now, I think this table is redundant as it illustrates the obvious. But what I really want to do is dig into is the sample group issue. I think research done on a small unrelated group of uni students or unemployed people (huge costs otherwise) is a huge drawback to traditional eye tracking methodologies. For example. Let's say you sell integrated controllers for onboard computers. Do you think that an untrained sample group will ever show you how your real customers (engineers) navigate through your web site? Offcourse not, all they will do is show you the standard usability glitches such as banner blindness, Inattentional blindness, etc. You do not need to use any system to show you this, just read a usability book or a free Google search.

In a week of usage we have had web sites that have upwards of 2000 recorded user interactions on some pages. This is 2000 real customers showing you how they use your website in a real day-to-day environment. Now whether this is 88% accurate or 60% accurate or whatever figure you can find in the statistical abyss that is Google it does not matter. This is highly valuable information. Information that will allow you to make marketing and usability decisions with a very high level of confidence.

Now, don't get me wrong I still think that eye tracking is a very valuable technique for some companies out there but to say that mouse tracking is a 'lesser' offering I think is wrong. I initially did not think they competed (I actually thought it was the lesser/poorer option) but after researching this article I am now sure they do compete and my biased view is that the free alternative is better due to the 'real users' issue discussed here.

References:

http://glinden.blogspot.com/2008/01/cheap-eyetracking-using-mouse-tracking.html
http://research.microsoft.com/en-us/um/people/ryenw/proceedings/WISI2007.pdf
http://googleblog.blogspot.com/2009/02/eye-tracking-studies-more-than-meets.html
http://www.seobythesea.com/?p=874
http://www.tobii.com/archive/files/20040/EyeWatch_Using+eye+tracking+to+optimize+the+attention+path+of+advertisements.pdf.aspx
http://www.iua.upf.es/~jblat/material/hci/students09/topic1/SusanEyeMouseTrack.pdf
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.95.5691&rep=rep1&type=pdf
http://www.gmi-mr.com/documents/bylines/Quirks_Click-Testing_0408.pdf

Guido Tapia

Software Development Manager

PicNet Pty Ltd