Saturday, April 23, 2005

Creating great UI's

Was thinking the other day about what makes a great gui? The issue came up when I was trying to decide how to put together a particular piece of functionality in the project I work on. It was also helped by thinking about what I like about guis and what the properties of a good gui are.

A ui is something which is supposed to allow a user to do something. It provides a means by which the user interacts. In a sense, your steering wheel, pedals, gear stick, and speedometer are all elements of the user interface of your car.

I was trying to find a good analogy in the real world. Driving to work this morning I hit on a fairly good analogy that can help to get a handle on the properties of a good gui.

Consider the road system, without signs. That is what a bad gui is like. You can do everything, but you just don't know how, in fact, for the most part, you're pretty clueless. Think about what it would be like to drive on the road without signs, you would, for the most part, be clueless. There would be no cues along the way to guide you along. Unless you had intimate knowledege of the road system, or had a detailed map that you examined in detail, you would probably not be able to get where you want to go. Giving someone else directions would also be very difficult.

Good graphical user interfaces are like road with lots of clearly marked signs. The user wants to go to a particular place (achieve a goal), and the gui guides them through that process by saying, where would you like to go? Clicking this button takes you there, that button to some other place. Quite clear. A bad gui would let a user click and click, and then only at the end it will say, "No, you can't do that here, you should have selected the _other_ button!". It's like turning into a cul-de-sac and only realising it's a culdesac when you actually get to the end of the road.

When designing your guis, think like a motorist from out of town, and wonder if they would be able to navigate successfully in the road map that is your application.

0 Comments:

Post a Comment

<< Home