Posts Tagged ‘tutorial’

A tutorial on user-interface design

Monday, October 22nd, 2007

I attended the ‘From use to user interface’ tutorial at OOPSLA, which was presented by Jeff Patton. The approach outlined was the following. First, start by writing a scenario, with a specific user (and his associated persona) in mind. Go down to the nitty gritty details (fish and clam-level), as well as the broad scope (sea-level and above). In reality, you might have to create a few dozen scenario’s to cover the entire use-space for your particular problem.

From the scenario, identify user interface elements that help the user execute the tasks required to reach his goal. For this, Jeff advocated using post-it notes, as they can be reordered on a board, and teared up when wrong.

Given the post-it notes create paper UI building blocks, such as labels, input fields, buttons, tables, etc. these should be sticked onto paper sheets, which represent the screens a user sees as he proceeds through his stack of tasks.

Final phase is the testing. Get a person to play the computer, a person to explain the scenario, and a few people choosing to pick the UI-elements. Finally, somebody should observe and jot down everything the testers have trouble with.

The next step is to repeat the above phases as much as needed until you are confident the user interface you designed meets its requirements.

In all, I think this can be a good approach, especially when a complicated user interface needs to be designed. However, I’m still partial to the paper cutting and sticking the components onto paper. It seems to me that this might be a little time-consuming. This is especially true when you need a lot of screens, and the problem you’re dealing with is fairly complex. Basically, I think an electronical counterpart to the paper based cut-and-stick idea might work faster. Additionally, it seems as if the proposed approach is very hungry on people resources, so it might cost quite a lot to have a user interface designed in this way. And the testing phase seems to be quite awkward. But I’m no expert whatsoever. And a well-designed interface can of course rapidly earn its development price back because it can appeal to people, causing them to buy/use your application.