The Design of a Window

It’s amazing how much thought ends up going into user interface design. It can be quite a process. A never-ending cycle of experimenting and refining.

As mentioned below, I expect many CRON-o-Meters to dislike the major change I made to the main window. What I did was to remove the entire left-side food search panel, and place it in a pop-up dialog box. I expect users to initially dislike this change because it feels like something was taken away. Many people fear change, and initially I was quite against this idea myself. I have a natural tendency to favor embedded reactive interface elements over pop-up modal dialogs.

I spent a lot of time thinking about this design choice, and playing with various different implementations. The initial decision was one of consistency and metaphor. A good user interface has to be consistent. It is also good if there is an underlying metaphor to the design. When we can link the abstract concepts in a program into something more physical, our minds operate more naturally. Witness the success of the original Macintosh, which relied on the metaphors of a desktop, file folders, waste baskets, and so on.

In the older CRON-o-Meter, the placement of the food search panel was inconsistent at times. For instance, if you are editing your biomarkers, it doesn’t make sense to be searching for foods — and in fact you can blindly add foods to your day’s list. I wanted to focus the program more on the metaphor of showing the single day. There’s a boldly visible date at the top, and everything else beneath should apply to the day in question. By taking the panel and making it a pop-up from within the servings list, it makes more sense.

While bouncing these issues back and forth with Gerald, a new volunteer with the project, Gerald had an excellent idea for the future versions to use a unified metaphor for both foods, biomarkers, and exercise. I’m excited about that next step — its going to be really cool. The new organization will make a lot more sense.

The second issue in good UI design is to streamline the things a user does most frequently. By far, the most common thing a user in CRON-o-Meter does is search for foods and choose amounts to add to their log. At first glance, it feels like the pop-up dialog adds an extra step in this process — you have to click a button to show the dialog. However, if you count the steps between the old version and the new version, the new version requires less user-input.

In the old version, you have to click the mouse into the search field. If the search field contains text from a previous search, you have to select and delete the old text, then type in the new search term. Then you have to select a food from the list, then choose a serving and add it.

In the new version you either have to click the “Add Serving” button (or type the keyboard short-cut). This brings up the dialog with the keyboard focus already in the search box, ready to type, so it actually saves a step over the old version.

There are also many ways to accelerate through data entry with the keyboard. If you used the keyboard short-cut, then you don’t even have to move your hand to the mouse. If the top ranked search result is what you’re looking for, hitting tab twice will auto-select it. When you select a food, the keyboard focus automatically transfers to the amount field. Hitting enter after typing an amount will automatically add the food. Tab will select the Measure menu and you can use the arrow keys to page through them. You can actually enter foods without ever touching the mouse.

A third important aspect is Simplicity, without compromising the power of the application, and without harming the first two considerations. Moving the search panel simplifies and clarifies the main window. It presents less to a new user and helps focus them on their task.

I certainly can’t claim to be a great UI designer. It’s a hard (but fun) process for me. I feel I’m always getting better, but there’s so much room for improvement. I do try to put a lot of though into it all. To me, it’s a matter of craftmanship. I’m interested to hear if y’all agree with my overall analysis here. Especially those with discriminating tastes towards user interface design (you know who you are!).