It starts with a Yellow Fade: The need for a more comprehensive understanding of visual effects on the web

Around the time Ajax got coined, one of the already-known patterns was 37Signals’ Yellow Fade Effect. As techniques were shared and visual effects libraries emerged, we began to see visual effects become commonplace on the web. I documented four of them in Ajax Design Patterns: One-Second Spotlight, One-Second Mutation, One-Second Motion, Highlight. (I wish I called them something else, e.g. “Spotlight Effect”.) And all of these are around today, and even in the jQuery core which makes t hem pretty darn accessible to any developer. It’s as simple as $(“message”).fadeIn().

Where we are now, most developers are stuck with trial-and-error. In an ideal world, you’d have a SWAT team of UX experts to analyse each visual effect, test with users, and maybe they’d get it right, but most UI design in the real world and developers often just have to play around a bit and then move on to something else. So I think we could do with some simple guidelines, ideally based on empirical data, but even just based on pattern mining the web would be handy.

I’ll give some examples of the kinds of problems I’ve faced as a developer building in visual effects:

  • Choosing Visual Effect. I want to update some content that’s just been received from the server. e.g. the football score changed. Do I show a yellow highlight, make it blink, make it vibrate, do nothing?
  • Choosing Effect Parameters. I’ve decided to use a Slide Down effect. How longshould it last, i.e. the duration of time from not shown to show? Should it slide down at constant pace or accelerate and bounce at the bottom?
  • Composing Effects I have a block of content with the user can edit. When switching it between edit and view modes, there are two simultaneous effects taking place – one thing is being hidden while the other is being shown. How do I handle those? Do I slide one up and when that’s done, slide down the other? Do I fade one out and simultaneously fade one in? Do I immediately close one and transition in the other, or vice-versa? Many options come into play.

It should go without saying that there’s no right answer for any of these problems. But instead of developers always working from first principles, I think there are some very useful guidelines and discussions that could be had around the design patterns involved. Maybe even leading to a high level effects library supporting those patterns.

Making a Bookmarklet: A Challenge on All Fronts

Scrumptious, a social bookmarking/comments app I began building recently, has a bookmarklet.

The bookmarklet is added from the demo homepage.

It’s not the first time I’ve made a bookmarklet for a website, the first time being WebWait.

I found the Scrumptious edition more challenging though, for several reasons. This brief article outlines the challenges. Some I’ve solved to an extent, but all need further work.

Launch UI Challenge

The most obvious challenge is, how do you explain to users what they can do with a bookmarklet. Most users aren’t geeks and I suspect most people still haven’t heard of bookmarklets. Or what are sometimes called “favelets”, since IE users have favourites, not bookmarks, which further highlights the problem. Here, I’ve explained with some text, but it ideally needs a diagram and perhaps a link to a separate page with a more detailed explanation, alongside a video.

Overlay UI Challenge

The next obvious challenge is UI design of the comments overlay. We’re overlaying comments onto a page. One of the issues was using a z-index that’s higher than what’s on the site, hence my article on max z-index. Other questions too. How much transparency, if any? What kind of positioning and scrolling, and how wide should it be?

Coding Challenge

Bookmarklets need to be fairly small. IE6 limits you to just 508 characters, so if you are doing anything remotely interactive, you’ll need to make the bookmarklet pull in a script from elsewhere, using On-Demand Javascript. This is a good practice anyway (as bookmarklet guru Alex Kirk explained to me a while ago) because it means you can always update the app. The downside is you still have to be quite concerned about size, as you want the bookmarklet to come into effect straight away. For this reason, I wrote the Scrumptious bookmarklet without using JQuery, which meant going back to Javascript 101, and lots of ugly low-level DOM manipulation therein.

Deployment Challenge

While there are various websites that let you cut-and-paste Javascript code to build a bookmarklet, I wanted to automate the process. Continuous integration, Automated Deployment, and all that. Luckily, John Gruber has a bookmarklet builder perl script. I yoinked and tweaked it so that I could keep the Scrumptious bookmarklet in its own form.

Another issue is the URL of the Javascript which the bookmarklet requests. Since Scrumptious can run on different servers, this URL will change depending on where the server is stored. Right now, there’s no server-side processing – all server-side content is static HTML. So I wrote a shell script to set the bookmarklet which any site operator could use.

Modularity Challenge

A bookmarklet is not the only place Scrumptious injects itself into the page. There’s also a Greasemonkey script under construction, and I’ve experimented with JetPack. I’ll also be building support for a site toolbar, so that an intranet operator could let you click on a “comments” link and inject Scrumptious comments on the page (so that users don’t have to bother installing the bookmarklet, at least to comment on intranet sites). The bookmarklet script has to be flexible enough to cover these subtly different scenarios. For example, the Greasemonkey script wants the comments overlay to be closed initially with a small button to launch it; the bookmarklet wants it to be open initially; and the Jetpack and toolbar want it to be off altogether until its explicitly launched.

The official olympics medal tally is broken. Let’s fix it.

This is how the official olympics medal tally looks:

Overall Medal Standings - The official website of the BEIJING 2008 Olympic Games

It’s not only the official tally, but the one linked from google each time you type “olympics” and terms like “australia olympics”. Thus making it an absurdly popular page at this time. As you can see, the design is reedeeeculous. The thing you want to see the most – total medal tally – is several miles away from the country. It’s good they’ve used alternative shading for odd and even rows, but even so, it’s still difficult to see the connection. Especially since the gold/silver/bronze tallies are shown in a different colour.

Did you notice even “open/mixed” gets preferential treatment? Look, I can’t even think of an open/mixed event at the olympics. Ballroom dancing? Friendly game of trumps? All I’m saying is, I’d rather see the headline figures first. I don’t know how many gazillion dollars the official IT contract went for, but this is what the tally should look like according to table design 101:

Overall Medal Standings - The official website of the BEIJING 2008 Olympic Games

(BTW I also pulled total to the front and emphasised it. Matter of opinion whether to go by total number versus number of golds.)

(The following images are just to record the fact it’s linked from Google since it won’t be linked much longer.)

olympics - Google Search

australia olympics - Google Search

Using 280Slides (Ajax slideshow maker): Real World Experiences

I used 280slides.com for a quick presentation today at the London Javascript meetup. (The usual Jobsesque slides – usually one phrase plus an optional image.)

The tool is very cool, as initial reviews suggested, but most of those folks had not used it in a real world situation. The tool has it’s complications when you use it for real.

What’s good:

  • Looks cool and OSX/Keynote like, but not slavishingly following the desktop in a way which would detract from usability
  • Great sharing and embedding options – can download as ppt, pptx (powerpoint 2007), pdf, and open document…and moreover, can view it full-screen, send it to slideshare, and embed it on a web page.
  • Has all the basic tools you need
  • Has undo and redo with a long history.
  • Supports OSX key bindings, i.e. uses the command key (ie the apple key) instead of what most web apps do, which is to use the ctrl-key even on OSX. (On the whole, there’s a need for a really great Ajax/Javascript key event library to do stuff like this automagically.)
  • Can easily do a slick full-screen mode presentation, using the PlainView browser, as noted on the 280slides blog.
  • Supports themes. (Themes is one rare area where the Ajax/web model makes life very easy for developers of desktop-like apps – just change the CSS style. If only life was so simple for the developers of the original desktop-like apps, where CSS-like functionality is usually lacking.)

What could be improved – this is all intended as constructive criticism. The team’s effort to date shows they are extremely talented Ajaxers and I have no doubt every one of the following can potentially be rectified in the coming months, provided they have enough will and bandwidth.

  • Cut-and-paste – this one really got me. Cut-and-paste is something we do all the time when making slideshows. The problem here is that elements are pasted directly on top of each other, so you can’t tell if it’s been pasted or how many times it’s been pasted (and you may well have several, as it’s likely you’ll be hitting command-v a few times, since there’s no feedback). This is exacerbated by the delay involved – sometimes takes a second or two to make the paste, so when you try to start dragging the copy, you might instead end up dragging the sole, original, element.
  • AFAICT cut/paste/copy are available only as keyboard shortcuts. There’s no toolbar/menu item. This exacerbates the previous problem. With “paste” lacking immediate visual feedback, you’d at least want a button you can click instead of relying on the keyboard shortcut, which feels less assuring (mainly because keyboard shortcuts are still a bit of a novelty on the web). And of course, the other problem is that users aren’t aware the keyboard shortcuts are available.
  • Saving – it’s not clear if auto-save is present. It certainly should be. They need some sort of status message for this, or an auto-save checkbox (though I think it should always be on).
  • Undo isn’t perfect. Sometimes the undo skips the most recent action and instead undoes an action before that. This often happens to be an action on a different slide – it’s good that it jumps back to that slide, but you can easily lose your place and makes it difficult to then go and manually undo the action you actually wanted to undo.
  • It’s fairly processor-intensive. This isn’t really a fair criticism, because it’s too much to expect an app like this to be gentle on resources. Still, I did struggle running it on a 3 year old powerbook and that will affect some users. On the bright side, it’s very snappy on a newly booted Firefox running on a more modern Macbook.
  • When you select text to change it, the text becomes grey to highlight it – thus making it impossible to see any new colour scheme you’ve chosen. Whenever I tweaked background or foreground colour, I had to keep unselecting the text, viewing it, and then re-selecting the text and change the colour again.
  • Text blocks don’t auto-expand/shrink when you change the text size. You must manually resize.
  • As you’d expect, there’s no support for a lot of the more advanced features. Some people would say those features are unnecessary, but personally I do find they do make an impact in live presentations and can often help to convey info in subtle ways. I’m talking about features like shadows, gradients, round corners. I know, it’s all just “bling-bling web 2.0 eye candy noise”, but really they’re essential if your aim is to keep your slides in the visual – rather than literary – realm. Also, there are some more basic features not yet implemented, e.g. borders for images and shapes, and the ability to crop.
  • Images can load quite slowly, and again, there’s no progress indicator. Unloaded images are shown just as a grey block, so viewers mightn’t be aware that an image is loading in that spot.
  • As I was writing this post, I opened up the slideshow and somehow it added a blank textboxes to every slide. Don’t ask me how or why. The existing text somehow had shifted up to the top of the page, and had been resized to one line. I think it somehow had tried to apply a standard slide template (title and main text area), whereas my slides are mostly just one line in the middle of the slide.

Anyway, it’s already usable and has huge potential. Long may 280slides rock! I only hope that if they’re acquired, the innovation keeps happening.

Firefox 3: The Changes…Firefox 4: The Wishlist

Firefox 3.0 ticker tape parade

Today is Firefox 3.0 landing day. Maybe tomorrow as the servers have been down for many hours now. Funny how Twitter is up, but Mozilla is down…it feels like today is the Juneth of 18. Anyway, this is great news as you could wile away a few lazy hours tweeting and plurking about the irony and how you’re chomping at the bit for FF 3.0, and watching other people say the same thing but with different yet equally charming emoticons. But anyway, FF 3.0 is pretty much here. Yay!

Firefox 3.0 is faster, more stable, and standards-based, and that’s no mean technical feat, but the upgrade is not so obvious from a consumer’s perspective. And my own ADD mindset craves more visible changes that will impact on usability and utility.

The modern browser is the application billions of users spend the most time in, many hours a day, and the trend is set to continue as desktop migrates to web. And Firefox is used by 18% of users (Net Applications via wikipedia, Q2 2008) – that’s 18% of some billions of users. A very big number indeed, and even more remarkable in certain markets, where Firefox dominates share, and even in the entire population of certain countries, where it appears to be neck-and-neck with IE. Furthermore, as a major player, the features of Firefox are clearly going to influence those in competing browsers. What’s in Firefox matters a lot. So, by deludedly illogical inference, the present article must also mean a lot to the future of our green planet. Here I will outline UI changes in FF3, then present my wishlist for FF4.

But first, what’s in 3.0 then?

This is a wishlist for the next version of Firefox, FF 4.0. But first, let’s review Firefox 3.0, ignoring those important but not too tasty “-ility” updates, and instead focusing on what users will actually see. I had to think about this. After several months of using both versions alongside each other (on different boxes), I really don’t notice much difference at all. as noted by wikipedia, are pretty trivial. (I noticed a better list here, though there are no other major features mentioned.)

  • More native look and feel. Nice, but a small change.
  • Redesigned download manager, can search for downloads Same.
  • Redesigned add-on managerIt’s integrated with the main distro site This is by far the most important new feature. I’ll elaborate later, but FF is all about plugins and the plugin process has been pretty silly up to now. In the book, Art and Science of Javascript, my chapter on Firebug included a section on installing the Firebug extension. And I can tell you, looking at it step by step, you can see how complicated the whole thing is.
  • Microformats are supported. Cool, we like microformats and it leads the way to the so-called “Web 3.0″!
  • Introduced Places for bookmarks. Yes, this is the most obvious new feature, but the thing is, years of rudimentary bookmarking support, combined with Google’s almightiness and Delicious et al, has weaned me, and I suspect many others, off bookmarking in general. I don’t know, how many people are really going to tag their bookmarks? What I do like is the new smarter address bar with history auto-completion and better display. It has leap-frogged IE here, which has searched by title for some time. Handy little feature.
  • OSX version supports Growl, spell check, and Aqua. Well, Growl is nice and it’s available to Add-on developers…but it should also be available to all websites, perhaps using a whitelist setup. (Similar to the Add-On trust system now – a notification panel that says “this application wishes to notify you of critical events via Growl. Do you agree?”.)
  • Default icons change Cool but fairly basic again.

These are all changes you might expect in a point release – it would be hard to justify going 3.0 in the absence of all the other improvements to stability, etc. That’s why I’m not trying to take anything away from the overall FF3 effort … there’s a lot of changes outside the UI. But when you look at these UI changes, they’re very basic. I’m hoping FF4 is more focused on seriously evolving the browser, and that means taking some chances and making some bold improvements to the shiny Fox machine.

And now … The Firefox 4.0 Wishlist!

Shipping with Add-Ons

As I’ve said before, Firefox needs to ship with a proper suite of pre-installed extensions. The “thin kernel model with optional extensions” is architecturally sound, and of course many applications now incorporate a plugin style architecture. The highly successful Linux and Apache web server projects are based on this model too. However, Mozilla misses a trick by shipping without key extensions. The attitude seems to be “if users want it, they can ^@!#$ install it themselves! The Mozilla people are in general extremely concerned with usability and the human factor, but in this case, the attitude reeks of Comic Book Guy geekery. Leaving out basic tab functionality, for example, yields unecessary advantages to Opera and Safari. Yes, it’s available in TabMix if you care to download it, but if it’s that important, then ship FF with TabMix!!!

There should be a standard distro with 5 or 6 popular plugins, all chosen for utility, simplicity, security, and compatibility with each other. This should be the one you get when you click the big, fat, super-easy-to-use, Download button (which I have always admired and has since been copied by many other websites). A bit deeper in the recesses of the Firefox distro site, you could also download the minimal edition as well as specialised editions. Alternatively, you might select your distro the first time you run a new Firefox profile. I could imagine a wizard that (a) asks you which distro (mapped to a set of add-ons), and then (b) lets you customise the list. This is much better than the current situation for creating a new profile, where you have to go and (re-)add all your typical add-ons manually, then restart.

It would be cool to see specialised editions for developers, students of different ages, gamers.

Apart from usability, this would be a boon for security, which is arguably Mozilla’s primary concern and greatest source of pride when comparing Firefox to IE. Relieving most users from the need to install add-ons reduces the chance of a screw-up involving installation of a malicious plugin, or some unanticipated interaction between plugins that creates a hole. The default stack would be designed and tested for security, and any alerts involving an add-on in that stack will be highly visible.

Make it easier, much easier, to write Add-Ons

This was supposed to be an enhancement for FF3 iirc, but may have been dropped (?). Anyway, writing extensions in Firefox is a complicated business. You have to know XUL and deal with the whole packaging structure. It should be just as simple as writing Greasemonkey scripts IMO. I’d like to be able to say something like $("addressBar").style.backgroundColor = "red" for example. These things could be made possible with enhancements to Greasemonkey, but of course Greasemonkey isn’t built in. What I’m looking for here must work with the raw version of Firefox. This will lead to a proliferation of cool new add-ons. It will also increase the risk of security violations as there will be more plugins around and it will be harder for Mozilla to vet them all, but relying on a difficult API to slow down add-on … that’s not the way to ensure security.

Installation of Add-Ons, Themes, Search

Installing search modules should work the same way as the new way to install add-ons and themes, ie all inside the client instead of bumping you to a website. Installing themes is half integrated but still requires you to go to a website. Even Add-Ons requires you to go to a website to explore fully. I think this should be unnecessary.

There is also confusion of terminology, with references to both “Add-Ons” and “Extensions”. On the official add-on website, “Search” and “Themes” are combined with 10 other category of Add-On (Appearance, Bookmarks, etc.), whereas they are in fact special types of add-on. So in some cases, they are kept distinct, and in other cases, they are lumped together.

Improve Profile Management

I like the idea of profiles – as a developer, it would be nice to switch between a developer profile and a user profile. And also between multiple dummy user profiles while testing. But switching profiles requires a restart. Not only a restart, but you have to run Firefox with the “-p” flag, and the installer doesn’t come with a launcher for profile-switch mode. For that reason, I bet most users probably don’t even know this feature exists.

The simplest improvement would be for the installer to add a launcher for profile-switch mode to the Start menu (in windows at least), just like there is one for Safe Mode. Moreover, just integrate profile switching into the actual interface…just include a dropdown in the Advanced Preferences or add a new menu item somewhere which expands to show each profile ID. Easy! True, you’d still need a FF reboot. I don’t see that constraint changing anytime soon …

Tab-Mania! Sugoi yo ^o^

I wrote this up in Taking Browser Tabs Seriously. There’s a ton that could and should be done to ease the multiple tab experience – notifying, searching, grouping, sorting, etc etc etc. This is HUGE! ‘Nuff said, see the link for details.

Retain all viewed content (or at least index it for searching)

Come on, you know you want it! Instead of bookmarks, it’s time to finally bite the bullet and let users search through every page they’ve visited (if not forever, then at least for the last X days). How many times do you have to search for something on Google that you’ve already seen before. The browser could take care of it. Just as Google search slams Yahoo taxonomies, so too does full-page history search obliterates bookmarking. I don’t know how much capacity you’d need to do it, but I bet if you asked in 1994, “will we be able to do that in 2010, with 16 years = 1000x (ie 2^(16/1.5)) improvement in hardware stuff”, you would answer a resounding yes. With the right optimisations, I’m fairly certain this is possible. BTW I realise you can effectively achieve all this now with Google, but there are a lot of reasons why it should be built into the browser (intranet and hidden content; privacy and corporate security concerns; possibility of offline browsing old content).

Improve history

With or without the previous enhancement, Firefox history has always been a bit wanting. For starters, search needs improvement – you should be able to search history the same way you search through a page. ie instead of filtering, it should just highlight matches and scroll to them. This way, you could see which other pages you were looking at around the same time. Sometimes, I’m searching for one term, but only because I know I was looking at another page at the same time, and I can’t locate the other page via search. (Although I could do so if the previous enhancement was available!)

Search should also work without having to hit Enter – it should be updated on each keystroke just like page search.

Furthermore, it’s excruciating trying to work out what time and date you viewed something. You get the “View by Date” which sorts by date, but doesn’t let you search in this mode. And in any event, it still doesn’t show you time of day. And if you view in other ways (by site or last/most visited), you don’t get any time or date at all.

That Sidebar

I never get why there’s only one sidebar when there are several possible contents (bookmarks, history, add-on-specific features). And it’s also odd that you can only control that sidebar from the menu rather than the sidebar itself. You should be able to have multiple sidebars, or at least one accordian style sidebar containing all possible contents. Similar to the All-In-One Sidebar add-on.

I could imagine Firefox achieving flexible UI with an elastic docked window style UI like Eclipse (or indeed Firebug in some respects), but I think that would be too complicated for mainstream users.

Render Non-HTML Content

I realise a browser’s fundamental job is to show web pages and it’s rarely good when applications over-step their boundary, but in this case, I feel there is a case for putting in at least some effort on non-core activities. I’m talking about how Firefox (and every other mainstream browser) deals with non-HTML content. For example, this came up on Twitter today, where my colleague mentioned the problems we have viewing JSON in the browser. It requires a download basically and then manually opening and viewing in your editor, and that’s not very satisfactory. Even with XML, which is rendered by FF, how about some intelligent interpretation. If it’s RSS or Atom, for example, provide a suitable default stylesheet explaining what it’s good for and how to subscribe.

Better File System Navigation

When you visit a local directory using file://path-to-directory, what you are greeted with is an interface that hasn’t changed since the mid ’90s. Arguably, it’s doing enough already, so why complicate it? But I think that exploring the filesystem is a rather useful feature for the browser, given its sovereign posture which means it could be used as the primary control centre for managing your local file system.

It’s also impossible to visit the root of your filesystem using file:/// on certain OS’s, at least on my Mac. This is obviously fundamental behaviour that’s missing, and the bug was logged in 1999! On my Mac, I also can’t open up /Volumes/Macintosh HD due to the space. When I click on it from /Volumes, it changes to file:///Volumes/Macintosh%20HD and that URL breaks. Doh!

Just like Explorer or Finder, files should be shown in various possible formats – tabular (with sorting), thumbnail, etc. And it should use thumbnails to show file types.

Better Keyboard Binding Support

I like those programs like IntelliJ Idea which let you control keyboard bindings for pretty much anything, and also let you save and load configurations. Firefox should do the same. A lot of the shortcuts are hidden anyway and should be available somewhere in the interface, e.g. a keyboard preferences area.

Mouse Gestures

This was one of the awesome things about Opera when I first started using it and it made browsing fun and more subconscious, one step closer to the haptically brilliant Minority Report hand control scenario. I used it all the time, but on Firefox, the main add-on didn’t work so well and I never got into it. Gestures should be built in so they are available to all users and available to all add-on developers. It would be even better if they were available to web apps as well, using some kind of whitelist if necessary (as I explained earlier wrt Growl).

Comment on the Coop

Incidentally, there is also The Coop. This was intended to ship with FF3, but dropped at some point. It’s an attempt to embed social networking and stumbleupon-type functionality. To me, this is exactly the sort of thing that really is too far removed and should remain an optional add-on. It’s actually tied to a single server run by Mozilla, which doesn’t seem right for an open-source product. It might make more sense if it was generic platform/API, with the communication protocol published and the server software also open sourced.

Fin

Firefox is by far the best browser today, already has some great UI improvements from 2.0 days, and I am pleased that v3.0 is now more stable and performant than ever. Now I’m looking forward to usability improvements and looking forward to seeing other people’s wishlists!

Dogfooding considered solipsistic

Jeff Attwood encourages developers to eat their own dogfood:

I’ve found that much of the best software is the best because the programmers are the users, too. It is UsWare. It behooves software developers to understand users, to walk a mile in their shoes. If we can bridge the gap between users and ourselves– even if only a little– we start slowly converting our mediocre ThemWare into vastly superior UsWare. To really care about the software you’re writing, you have to become a user, at least in spirit.

This is good if you’re writing an IDE, not so good if you’re writing a word processor and actually kind of plain wrong if you’re writing a medical or trading app where developers lack the knowledge and experience of typical users. As Jeff himself has noted elsewhere, “If the application you’re writing isn’t intended for expert users, having the developers dogfood it won’t necessarily buy you much, because developers are highly unrepresentative of typical users. Beyond fixing critical bugs, it could even hurt the application: developers tend to add advanced, complicated features that are useful to them.”

At this point, I’m supposed to launch into a tirade about how the inmates are running the asylum, but I actually think that’s a pretty condescending attitude, albeit one that has includes some arguments to be aware of. It’s also somewhat of a self-fulfilling prophecy. Professional software developers have an important role to play in working towards usability, especially in the very real situation where usability professionals are simply not available.

How do you improve usability when you can’t eat your own dogfood? The solution is to become an anthopologist and watch actual users eat your dogfood. There are a lot of variants of this:

  • Paper prototyping. For early design feedback. Incidentally, paper prototyping is a lot more than just lo-fi, hand-drawn, sketches. “Real” paper prototypes are interactive, like a board game, with a little real-time prodding from the researcher and possibly an assistant domain expert.
  • Contextual analysis. This goes by several names, but the idea is to sit in the real-world environment of users and see how they interact with the system, as well as other systems, other people, and the general environment. The only problem with this approach is that you can’t do it with an in-progress system; it either has to be the old, extant, system, or the new, almost-complete, system.
  • Interviews and walkthroughs. The user sits in a “usability lab” (but probably just an office) and runs a test version of the system, discussing it with the researcher. It may also be that there’s no system involved, just a qualitative discussion.
  • Automated monitoring. A fan favourite of privacy advocates everywhere ;) – so please inform users what you’re monitoring, let them opt out, etc. This involves logging and monitoring of user actions for later monitoring. Thanks to the magic of Ajax, there are now some very powerful tools that will track all activity in the browser and play it back for later analysis. For example, Scrutinizer, written by the talented Nitobi team. Scrutinizer is cool because it actually blurs everywhere outside the mouse pointer area, so is an okay approximation for a full-blown eye tracking system. I haven’t heard of biological testing – especially PET scans – but with growing inteterest in Neuroeconomics, I’m sure it’s coming.

A related problem of dogfooding is that software developers tend to enjoy writing systems for themselves, i.e. those where they really will be eating their own dogfood. This is why we have: a proliferation of IDEs and clones of the veritable Unix “make” utility; quite an unreasonable number of applications about Klingon and juggling; but far fewer about quilt making and the art of kite surfing.

All this goes a long way to explaining why the greatest usability is often seen in software related products. I rate IntelliJ Idea, Firebug, and the general Unix philosophy among the best exemplars of software usability ever created, in any domain. Mainstream business and scientific applications will never be as good as those applications through the application of dogfooding.