Dubroy.com/blog

A few weeks ago, Joshua Porter wrote about how Amazon.com improved the way they display a summary of user reviews:

For years Amazon’s interface showed the average review, so viewers could tell the general mood surrounding a book. If it was a 5 star or a 1 star book, then that would be instantly recognizable.

But over time it became clear that the rating system had a fault: if the average rating was somewhere in the middle, say 3.5 stars, it was unclear whether it was just a dull book that most people rated as mediocre or if it was a polarizing book that half the people rated 5 and half the people rated 1. A political book, for example, usually polarizes.

The solution they came up with is a graphic that shows not only the average review, but also the distribution:

I like the new visualization, but I still find that the meaning doesn’t really jump out at me. I have to really concentrate for a few seconds to grok the graphic.

I just ran across another take on this problem. David Abbet points to a much simpler solution:

Instead of using stars, Summize displays color bars which summarize the reviews: the more green, the more positive they are. Where stars only give an average rating, those color bars really add some depth to the information.

I like it. Much easier to understand at first glance, I think. And as swissmiss points out, it’s cool that both their logo and their favicon reflect the style of the color bars.

Jeff Atwood asks Why Are Web Uploads So Painful? This isn’t a problem that I run into often, since I don’t upload much video, but I agree with Jeff that the general uploading experience is pretty crappy. On the other hand, I don’t think the experience of downloading is that much better either. Sure, it’s nice to have a separate window with a progress bar, but couldn’t we do better than that?

The user experience of downloading HTML and images is great. So good in fact, that we don’t even refer to it as downloading. We don’t talk about downloading the CNN page, we talk about “hitting CNN” or “looking at CNN”. Conceptually, web browsers are viewers that can read content from remote servers. We are actually downloading content, but we don’t have to think about where we want to save it, we just get to interact with it almost instantaneously.

When it comes to downloading other kinds of files, like say a ZIP or a video, then you’re always prompted for where to save the file. Then, when it’s done downloading, you have to navigate (again!) to the spot in the filesystem where you saved it. That’s actually a kind of funny interaction. Imagine if you wanted someone to hand you a book — if instead of giving it to you directly, they said, “Sure! Where should I mail it to?” and then you had to go to your PO box to pick it up.

One possible solution to this is to just download the file to a temporary location, and then give me a way to interact directly with the file. Essentially, that’s what the browser is doing when it downloads HTML resources and images. But instead of displaying the contents in the browser window, it could display an icon in a sidebar. Then I could act on that file in the exact same way as a would with the downloaded file — double-click to open it, or drag-and-drop it to another folder to move it.

As we become more and more dependent on web applications, these are becoming bigger issues. We often talk about a “seamless” user experience, and the process of uploading or downloading is a really big seam. When you use sites like Box.net, Backpack, or Flickr — very well-designed sites — uploading and downloading is often the worst part of the interaction.

Here’s a beauty for you. I’m submitting an application for graduate funding to NSERC, a Canadian governmental organization that funds research in engineering and science. This is an actual example from their online scholarship application:

What’s it look like I’ve selected? “Institutional” and “Academic”, right? Nope. It’s actually “International” and “Communication” that’s selected. Yikes. How did no one notice this during development?

Even if that radio button hadn’t somehow strayed down to the next line, putting all the radio buttons inline with the descriptions is a bad idea. Here’s another example, from the Wordpress comment moderation page:

The problem with this layout is that you spot the option you’d like to select, but it takes a sec to figure out what radio button is associated to it. You have to look at the ends of the lines to figure out how the mapping works. Every time I mark a comment as spam, I have to double check that I’m not actually approving it instead.

We all need a little inspiration every now and then. Runners have “Just Do It”, guitarists have their Television records, and fitness freaks have pictures of Arnie. What if you’re doing human-computer interaction and usability work?

Earlier this summer, my friend Gerry told me about Antoine de St-Exupéry’s Wind, Sand and Stars (Terre des Hommes in French), which has one chapter which is particularly inspiring for people like us. Here’s my favourite quotation:

There should be delivered to us an object as natural as a pebble polished by the waves… he who uses this instrument should be able to forget that it is a machine.

A more well-known quotation from the same chapter shows St-Exupéry’s love of simplicity:

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

I was reading Mark Weiser’s famous Scientific American article on ubiquitous computing a few weeks ago, and noticed that Weiser’s vision sounds pretty similar to the polished pebble:

The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.

So ya know, why not tape those up around the office, and start awakening the giant within?

I just saw that my post Oversimplification is Confusing from a few weeks ago got posted on Signal vs. Noise. Coincidentally, I posted yesterday that things should be as simple as possible, and then some. Well, well, well. Sounds a little contradictory, doesn’t it?

As Ralph Waldo Emerson put it, “a foolish consistency is the hobgoblin of little minds.” But actually, I don’t think the two posts really contradict each other. When I talked about oversimplification, the example I gave of the Photoshop dialog box wasn’t actually a problem with oversimplification, it was a problem with not enough simplification. Or, wrong simplification — take your pick. Presumably they “simplified” the dialog box by not including a full explanation of why you would ever choose to uncheck the “maximize compatibility” box. They probably should have simplified further by removing the option altogether. Instead, they left a corner case baked into the UI. In other words, the overfitted their solution to the problem.

Maybe I should have stuck with my original title for the first post: Don’t Ask Stupid Questions.

This semester I’m taking a machine learning class with Geoffrey Hinton. The other day in class, he was talking about the balance between correctly learning a concept, and overfitting the data. Say you have a program that is trying to recognize people: an example of overfitting is if your program learns that only people between 5′4″ and 6′3″ are people, just it has never seen a person taller or shorter than that.

There’s a famous Einstein quote that goes something like: “Everything should be made as simple as possible, but no simpler.” According to Prof. Hinton, the principle in machine learning is more like: “Everything should be made as simple as possible, and then a bit simpler.”

This also seems like a good approach for designing software. Make things as simple as you can possibly bear, then remove a few features. Without fail, whatever you consider upon to be an absolutely minimal feature set, you can still remove a few features.

Today Mike and I went to see Joel Spolsky talk about FogBugz in Toronto. During the Q+A, there were two questions that I really liked Joel’s answer to:

1. Does FogBugz support cloning bugs?
2. Can FogBugz support create dependencies between bugs?

The answer to both was really “no”, but Joel said “Sure, just type ‘clone of case 123′” and “Sure, just type ‘depends on case 123′.”

That’s a perfect illustration of what I’m talking about. If someone was coming up with a list of features their bug tracking system must absolutely have, there’s a good chance they would include those two features. But specifically adding features to do those things is an example of overfitting — really, linking achieves 95% of what you need anyways, and it’s much simpler.

So my new design mantra is “as simple as possible, and then some.”

Until a few weeks ago, I hadn’t touched my Mac Mini since late last year. I was traveling for a few months, and then was without a monitor. Now that I’ve finally got a sweet widescreen 22″ display, my Mini and I are getting to know each other again.

First of all, I’d like to say that I’m not that big of a fan of the way minimizing is done on Mac OS. When you first open an application, its icon appears in the dock (unless it was already in the dock). The icon gets a little black arrow beneath it to show that it’s a running application. When you minimize one of the application windows, it actually creates another little icon in the dock, this time a thumbnail of the window alongside the trash can. For the non-Mac folks, here’s what I’m talking about:

The screenshot shows a chunk of my dock. On the left, you can see that Interface Builder, SnapNDrag, and TextMate are running; and beside that are two minimized windows, TextMate and Finder.

One complaint I have is that minimizing many windows makes the dock cluttered. For me, this ends up acting as a bit of an incentive not to minimize my windows. I don’t know why I care; I know it doesn’t really make sense. But that’s how I feel. So what happens is that I end up with a choice: either clutter my display with lots of open windows (potentially getting in the way sometimes), or clutter my dock. But, I realize that this behaviour is necessary because of the general MDI-ness of Mac OS, and maybe there no better way of handling the problem.

The other problem I have is that when I want to access a minimized window, I have to make a decision between clicking on the minimized icon and the main icon. Again, it’s a minor issue, but I do notice that I think about it, which, at the very least, interrupts my flow.

Anyhow…that’s not the point I wanted to make. I noticed some weird behaviour with a minimized Finder window. Here’s what I did:

1. Minimized a Finder window
2. Clicked on the main Finder icon; the window was revealed
3. Minimized the window again
4. Clicked on the main Finder icon again; a new Finder window is opened

Now, I thought I understood minimizing windows on OS X. But this one has me confused. Anyone have a good explanation for the behaviour I’m seeing?

Ever paid $20 to watch a guy bob his head while staring at a laptop? If you’re into instrumental hip hop or electronic music, you probably have. More and more DJs seem to be trading their Technics 1200s for Powerbooks. This means that human-computer interaction is becoming important to a lot of musicians. Here are some of the cooler music-oriented interfaces I’ve seen lately:

Reactable

Reactable is “a collaborative electronic music instrument with a tabletop tangible multi-touch interface.” It’s based on a large multi-touch tabletop display, where the music is made by the placement and manipulation of physical objects on top of the screen. Each object represents a component of a classic modular synthesizer, and the components can be connected together by simply moving them close to each other. The best way to understand it is to check out the demo video:

Apparently Björk’s band used a Reactable at Coachella, and will be using it for the rest of the Volta tour. The creators must be pretty excited to have such a high-profile artist using it. (Damn, I should have gone to V-Fest last weekend!)

Monome

Monome provides another really cool alternative to hunching over a Powerbook. The concept is incredibly, beautifully simple — a reconfigurable grid of back-lit buttons:

They’ve got some great sample videos showing the 40h being used as simple synthesizer, a sample cutter, and a drum machine. Again, the best way to understand it is to see it in action:

There are plenty of other videos on the site, including one of Daedalus performing on the 40h at the launch party.

The really cool thing about the Monome devices is that they’re not music-specific. They are completely reconfigurable, and based on open source software:

buttons can be configured as toggles, radio groupings, sliders, or organized into more sophisticated systems to monitor and trigger sample playback positions, stream 1-bit video, interact with dynamic physical models, and play games. button press and visual indication are decoupled by design: the correlation is established by each application.

And they’re purdy enough to make Steve and Jonathan jealous. I want one.

Others

Roy Vanegas’ MIDI pick caught my attention at the ITP Winter Show last year. It’s a pressure-sensitive guitar pick that interfaces with Max/MSP to add effects to your guitar sound.

If you’re interested in these kinds of interfaces, you might want to check out the New Interfaces for Musical Expression conference.

Apparently my laptop is having some network issues:

Jeff Atwood writes about the problem with tabbed interfaces, something I wrote about not too long ago. Jeff’s main complaint is that “tabbed interfaces obscure as much as they organize.”

I use tabs a lot, but I rarely have more than one browser window open. In that case, I find it’s pretty easy to find that tab I’m looking for. Click on the Firefox icon on the taskbar, then do a visual search through the open tabs. But when I have multiple browser windows open, each with multiple tabs, I have the same problem as Jeff: I lose track of the pages I had open, I start to open duplicate copies of GMail, etc. Basically, everything goes to hell.

The question is, what can be done to fix things?

I think part of the problem is that tabs in the web browser are a pretty arbitrary way of organizing things. The use of tabs implies a kind of hierarchy: there are top-level items (windows) which contain lower-level items (tabs). This works well when the top-level window maps to a well-defined “task”. For example, in Eclipse or Visual Studio, you are usually working on a single project at a time, and the tabs contain source files that you’re working on. But now that we are spending more and more of our time on the web, web browsing is hardly a “task”. It’s really just a mode, and should ideally be as transparent as possible.

We need to think about why we use tabs in the first place. I think the main reason most people use tabs is to reduce visual clutter, both in the taskbar (on Windows) and in the overlapping windows (on Windows and OS X). If that’s the case, then it points to a problem with current window management techniques. To be honest, I’ve always found overlapping windows to be a clunky way of doing things. With large displays and multiple monitors, we seem to be stretching the limits of the overlapping window paradigm.

Instead of rethinking the tabbed interface, I think it’s time to rethink the overlapping window paradigm.