Friday, March 18, 2005
Working on Work Desk - Tab Design
Let's discuss a bit of interface design. It's almost taken as common wisdom that programmers should not design program interfaces. And this is mostly true. Not because programmers are dumb or lack some sort of design gene, it's just that they aren't use to think about the user. Even programmers working on software that will be used for dozens or even millions of people quite often have NO IDEA of how all this people will be using their program! What do they do then? Simple, they take the easy way and design the program for themselves!
Programmers are so used to think that all the billions of people in the world will act and think like they do that it’s quite amusing to watch programmers discussing. For example, if in a programmer’s forum someone posted the message "Hey, what do you think about such a business: bottling pure water and selling it?" he would be bombarded with messages of the like: "Bullshit, I would never buy water in a bottle and doubt anyone would. The water flowing off the tap is treated and drinkable, in case you don't know." Mind you that the later poster is right to a certain point, his single error was assuming that billions of people would share his same point of view. Tell that to Madonna.
Well, enough with programmer bashing. Let's do a simple exercise, try to think about the plan for a house, for another person. You don't know this person, but try to think about how a house for this person should be like. Just try to design the main room, bathroom and bedroom. No easy job, right? Although you know this person will watch television, take a shower, and get some sleep, there are specific needs that you just don't know, and if you do not spend some time figuring out that other people have different needs than you, you never will. Suddenly you discover that is much easier to design the house for your own needs, and just hope that others' needs are the same as yours. And this is what most programmers do.
When we talk about computer programs, the house plan is the interface, and when you download a program that can not be used without a mouse, that's because the programmer who wrote it always have a hand over the mouse, or if the program does not show completely on your 14" monitor with 640x480 resolution, it is because the programmer is busy working at 1024x768 resolution on his 17" monitor. So, as Joel Spolsky said way better than I ever will, the secret to good interface design is to just recognize that the programmer will not be the only user of the application, and other people have different needs than him, even if they are generally equal.
Work Desk will be based on tabs, or pages, or worksheets if you are a heavy Excel user. Each tab will represent a different project that the user is working on. So I must decide how the user will create, rename, reorganize and delete these tabs. What will the visual of such tabs look like and what functions it will have.
For a lesson of what is right and wrong, let's analyze how Excel 2000 implements worksheets. Although my needs for Work Desk are a little different, this will be a nice example of doing things right and wrong.
Excel worksheets: things done right
1. Positioning
Someone must have studied and discovered that most users do not use multiple worksheets. So the worksheet information is at the bottom of the screen, reduced to the actual sheet and navigation buttons
2. Mouse Access
With the click of a button, the user has access to all functions related to worksheets, effectively managing them.
3. Advanced Mouse Access
Expert users can use the mouse to move (click and move) worksheets and rename them (click and hold)
Excel worksheets: things done wrong
1. Insertion at the Start
We are used to insert new things at the end of a list of existing things. Excel chooses to insert new worksheets as the first item. This is a design decision, but I doubt that it was based on studying user behavior
2. Menu Maze
If an Excel programmer were forced to manage sheets for an entire day using only the keyboard, I bet that soon he would discover that may be distributing worksheets commands between three different menus and a submenu was not the wisest choice.
3. Keyboard Only Access Unless the user know how to look the Shortcut keys on the help and learn that Ctrl-Page Down and Ctrl-Page Up keys are used to navigate between worksheets, we will never be able to navigate between the sheets without a mouse.
4. Naming InconsistencyIs it "worksheet" or simply "sheet"? Even the menu items got a little confused on deciding the right term. The help file refers to worksheets, as do the Insert menu, but the rest of the interface refers to sheets. Consistency in such little details is important for novice users.
Before I develop the tab functionality for Work Desk, I must first raise all requirements for such feature:
Next, I must define the profile of the user base for the program, which will profoundly impact the interface design. Decisions made for business users could be very different if the target was teenagers or even little kids.
Finally, I must define the most used actions related to tabs, in order of importance:
Navigation - Paramount to Work Desk, the tab shows in what project the user is working on, and the user must have easy access to the other project (tabs). Even is the user have 10 different project, access for all of them should be as easy as one mouse click
Inserting and Reorganizing - The user will add new tabs, and reorganize them according to criteria like most relevant, alphabetical order, or even group projects according to a theme.
Archiving - The system may have some sort of tab deprecation, were tabs that are not used anymore are stored. This is not necessary immediately, and requires more thought in order to avoid confusion
Deleting Tabs - as the user deletes a project and all of its data, the tab also must go.
So, in Work Desk's case, tab navigation is primordial, closed followed by inserting new tabs and repositioning them. The interface should be easily accessible by the keyboard, and shortcuts are welcome. I must have this in mind when choosing the objects for Work Desk. I will update this article once I find the solution.
Let's discuss a bit of interface design. It's almost taken as common wisdom that programmers should not design program interfaces. And this is mostly true. Not because programmers are dumb or lack some sort of design gene, it's just that they aren't use to think about the user. Even programmers working on software that will be used for dozens or even millions of people quite often have NO IDEA of how all this people will be using their program! What do they do then? Simple, they take the easy way and design the program for themselves!
Programmers are so used to think that all the billions of people in the world will act and think like they do that it’s quite amusing to watch programmers discussing. For example, if in a programmer’s forum someone posted the message "Hey, what do you think about such a business: bottling pure water and selling it?" he would be bombarded with messages of the like: "Bullshit, I would never buy water in a bottle and doubt anyone would. The water flowing off the tap is treated and drinkable, in case you don't know." Mind you that the later poster is right to a certain point, his single error was assuming that billions of people would share his same point of view. Tell that to Madonna.
Well, enough with programmer bashing. Let's do a simple exercise, try to think about the plan for a house, for another person. You don't know this person, but try to think about how a house for this person should be like. Just try to design the main room, bathroom and bedroom. No easy job, right? Although you know this person will watch television, take a shower, and get some sleep, there are specific needs that you just don't know, and if you do not spend some time figuring out that other people have different needs than you, you never will. Suddenly you discover that is much easier to design the house for your own needs, and just hope that others' needs are the same as yours. And this is what most programmers do.
When we talk about computer programs, the house plan is the interface, and when you download a program that can not be used without a mouse, that's because the programmer who wrote it always have a hand over the mouse, or if the program does not show completely on your 14" monitor with 640x480 resolution, it is because the programmer is busy working at 1024x768 resolution on his 17" monitor. So, as Joel Spolsky said way better than I ever will, the secret to good interface design is to just recognize that the programmer will not be the only user of the application, and other people have different needs than him, even if they are generally equal.
Work Desk will be based on tabs, or pages, or worksheets if you are a heavy Excel user. Each tab will represent a different project that the user is working on. So I must decide how the user will create, rename, reorganize and delete these tabs. What will the visual of such tabs look like and what functions it will have.
For a lesson of what is right and wrong, let's analyze how Excel 2000 implements worksheets. Although my needs for Work Desk are a little different, this will be a nice example of doing things right and wrong.
Excel worksheets: things done right
1. Positioning
Someone must have studied and discovered that most users do not use multiple worksheets. So the worksheet information is at the bottom of the screen, reduced to the actual sheet and navigation buttons
2. Mouse Access
With the click of a button, the user has access to all functions related to worksheets, effectively managing them.
3. Advanced Mouse Access
Expert users can use the mouse to move (click and move) worksheets and rename them (click and hold)
Excel worksheets: things done wrong
1. Insertion at the Start
We are used to insert new things at the end of a list of existing things. Excel chooses to insert new worksheets as the first item. This is a design decision, but I doubt that it was based on studying user behavior
2. Menu Maze
If an Excel programmer were forced to manage sheets for an entire day using only the keyboard, I bet that soon he would discover that may be distributing worksheets commands between three different menus and a submenu was not the wisest choice.
3. Keyboard Only Access Unless the user know how to look the Shortcut keys on the help and learn that Ctrl-Page Down and Ctrl-Page Up keys are used to navigate between worksheets, we will never be able to navigate between the sheets without a mouse.
4. Naming InconsistencyIs it "worksheet" or simply "sheet"? Even the menu items got a little confused on deciding the right term. The help file refers to worksheets, as do the Insert menu, but the rest of the interface refers to sheets. Consistency in such little details is important for novice users.
Before I develop the tab functionality for Work Desk, I must first raise all requirements for such feature:
- The user must be able to insert and delete tabs
- The user must be able to rename tabs
- The user must name a tab anything with a length of 1 to 30 characters
- Each tab must have a unique name
- The user must be able to sort or reorganize tabs
- Copying tabs is not a fundamental item
- Functionality should have easy access by mouse and keyboard
Next, I must define the profile of the user base for the program, which will profoundly impact the interface design. Decisions made for business users could be very different if the target was teenagers or even little kids.
- A typical Work Desk user is older than 18, using the software mostly at a work environment, has a medium familiarity with the computer and MS Office interfaces, knows how tabs work and generally has a mouse, although is also used to keyboard shortcuts
Finally, I must define the most used actions related to tabs, in order of importance:
Navigation - Paramount to Work Desk, the tab shows in what project the user is working on, and the user must have easy access to the other project (tabs). Even is the user have 10 different project, access for all of them should be as easy as one mouse click
Inserting and Reorganizing - The user will add new tabs, and reorganize them according to criteria like most relevant, alphabetical order, or even group projects according to a theme.
Archiving - The system may have some sort of tab deprecation, were tabs that are not used anymore are stored. This is not necessary immediately, and requires more thought in order to avoid confusion
Deleting Tabs - as the user deletes a project and all of its data, the tab also must go.
So, in Work Desk's case, tab navigation is primordial, closed followed by inserting new tabs and repositioning them. The interface should be easily accessible by the keyboard, and shortcuts are welcome. I must have this in mind when choosing the objects for Work Desk. I will update this article once I find the solution.
Comments:
Post a Comment
