A lot of good design is overlooked. When you are able to get a task done smoothly, without having to understand how to interact with a fancy widget or discover the way forward, you are often less likely to notice. You may notice if the interaction pre-existed and was recently improved. This happened to me the other day when Gmail introduced a button to delete trash contents in a single click instead of multiple. I’m sure they realized that most people go to empty the trash completely and so provided a link for this. Thanks Google. Things should just work and on occasion delight.
Having said this let’s explore a specific example I recently came across:
The requirement calls for a widget to create and store paths with logical names to external files. Here is the initial design and workflow:
The user clicks “+” and a new row is created. A default name assigned.
The user must next click in the “Path” field, then a dialog launcher will display.
Clicking on the “…” dialog launcher presents a standard “Browse for file” dialog. Once a file is chosen and OK pressed the path is defined.
DONE
So looks good…or does it? Let’s review the task flow in detail:
- Create a new entry
- Activate the path field
- Click the dialog launcher button
- Select a file (double-click or click OK)
- Activate the “Name” field
- Select the text
- Type in a new name
Several steps fall into a category of things the user might not think to do or things that unnecessarily interrupt the desired flow. Is the default name meaningful? Should it be created before the file is specified? Why make the user activate fields? (the dialog launcher does require field activation but this is due to a toolkit that has rooted itself everywhere in the UI – another post perhaps)
What would an idealized workflow look like? Its pretty clear what this particular sequential task demands.
- Create a new entry
- Activate the path field
- Click the dialog launcher button
- Select a file (double-click or click OK)
- Activate the “Name” field
- Select the text
- Type in a new name (optional)
Let’s see how close we can come.
The user clicks “+” and the “Browse for file” dialog is launched where the user chooses a file.
The path field is populated, the “Name” field matches the name of the chosen file (better default) and the field is activated and text pre-selected. The user can now immediately type to specify a new name if they prefer something else or move on.
DONE
So we can see by performing this task analysis of what is performed by user vs. machine a more streamlined and pleasant experience can be had. No fancy widgets. Sometimes this analysis is easier to perform on working code - making changes in a second iteration but it could also be simulated via prototypes.
There are other places in the UI that could benefit from this analysis, renaming items in the Project Browser comes to mind. Please share others, especially if they are frequent.
_erik
Recent Comments