How we trimmed, toned, and firmed up our look and feel.
by David Lang (Posted: 2/20/04)
The Battle of the Bulge
Ever looked at an unflattering photograph and thought to yourself, "Have I really put on that much weight?" Ever run into a friend you haven't seen in a while and noticed the look of surprise that flashes across their face? Ever tried to put on an old pair of pants and been startled at how much effort is required? Funny how we can look at ourselves every day in the mirror and not notice that we're gradually letting ourselves go, but when we see ourselves from a slightly different perspective, we suddenly become aware that a dramatic and undesirable transformation has taken place.
Whenever we arrive at this moment of truth, what is the first thing we do? No, I mean after we eat that bowl of ice cream while watching the latest BowFlex or Pilates infomercial! That's right, we embark on an ambitious program of diet and exercise in an effort to shed those excess pounds.
After nine years in software development, I'm discovering that program interfaces, like waistlines, can gradually get out of control. After years of expanding a program's capabilities, you turn around one day and realize that your software is no longer as simple, intuitive, and easy to use as it originally was. Suddenly, you begin to notice a few unsightly bulges and places where things just don't seem to fit quite right. That's where we found ourselves with Accordance Bible Software: after four major upgrades, countless minor updates, and a challenging transition to OS X, the program's interface was getting a little bloated.
So after we got inspired by the infomercials and downed our last quart of ice cream, we got to work trimming the fat and tightening things up. Here's a look at Accordance before (version 5) and Accordance after (version 6):
How we trimmed twenty-five icons and one whole palette!
Talk about trimming the fat! As you can see from the screenshots above, the number of icon buttons the user is initially faced with has been reduced from forty to a much more manageable fifteen (twelve on the palette and three on the window). In addition, the number of floating palettes has dropped from three to two. Yet amazingly, all of the features which were previously available through all those buttons are still available, and are still just as easily accessed.
In the previous version of Accordance, the palette of buttons along the top of the screen was used to open a new window containing any Accordance module you selected. Thus, if you selected Matthew Henry's Commentary from the appropriate pop-up button of this palette, that resource would open in a new window, just as if you had taken a book off the shelf and opened to the front page.
The palette of buttons along the right of the screen was similar to this New Window palette, but it served a slightly different function. Known as the Amplify palette, it was designed to let you look up any selection of text in any Accordance module. Thus, if you selected the word "justified" in a window containing the text of the Bible, and then chose Matthew Henry's Commentary from this palette, Henry's Commentary would not only be opened, but would automatically be searched for every occurrence of the word "justified."
Rather than continuing to use two separate palettes to serve such similar functions, we consolidated the two palettes into a single Resource palette. If you choose a resource from this palette without previously selecting some text to look up, a new window containing that resource will simply be opened. If you do select some text to look up before you choose a resource from the Resource palette, that resource will be opened and automatically searched for the text you had selected. It's a simple matter of looking at what the user is doing and responding accordingly, rather than forcing the user to keep straight which palette will get him the result he wants.
Going for the "Wet Look"
Before and after photos are never quite fair. Typically, the before photo is displayed in black and white with the subject having a bad hair day, wearing no makeup, and clad in a frumpy-looking bikini. In the after photo, the subject is now tan, made-up, has a new hair-do, and is wearing a much more flattering piece of swimwear. In the same way, when we decided to trim the fat in Accordance, we also decided to make over the program's look.
As everyone in Mac circles knows, the "wet look" is in this season, so we made over every window, palette, icon, and dialog box to better conform to the fashion standards of OS X's Aqua interface. Take a closer look at the before and after photos above, and you can see immediately how "retro" Accordance used to look. I'm sure you'll agree that the look of Accordance 6 is delightfully "fresh" and "now."
Convert from Business Wear to Casual
When designing an interface, it is always a challenge to know how to avoid overwhelming the beginning user with a bunch of advanced features he may never use, while keeping those features readily available to power users. Some "designers" offer completely different wardrobe lines for "business" and "casual." That is, they make their programs' basic features easily accessible, while hiding away the more advanced features in nested dialog boxes and other interface elements that require the power user to dig. With Accordance, we have always wanted the advanced features to be just as easily accessible as the basic ones, but doing so left the beginning user feeling confused, intimidated, and unsure where to begin. A change in wardrobe was definitely in order!
We eventually hit upon the idea of using Finder list-view-style disclosure triangles on our palettes and Bible windows to enable users to hide the features they didn't need while keeping the ones they used all the time easily accessible. The result is a "wardrobe" that easily converts from business wear to casual to "barely there."
As you can see, this new approach helps to shield the beginning user from features he may not need, yet the closed disclosure triangle and its label remain visible as a constant reminder that those features are still available. Thus, whenever he is ready for more, he can always find what he needs. It's an interface which can expand as the expertise and confidence of the user increases.
The Coordinated Look
With so many resources and features instantly available through the Resource palette, it's quite easy to open lots of different windows in the course of a Bible study. We needed some way to tame this potential for window clutter in order to achieve a more "coordinated look."
Enter the Workspace window, which keeps all other Accordance windows neatly organized as a series of tabs. You can cycle through each tab using keyboard commands, and can control whether you want a new window to open within the Workspace or as a separate window. Best of all, you never again have to go digging through the Window menu for that one window that's gotten hidden behind all the others.
In interface design, as well as in fashion, it's those little touches which make all the difference. So here are a few less visible, but important changes which help to round out Accordance's new interface.
Sleek and Svelte
After months of hard work and self-denial, Accordance has undergone a complete makeover, and users are loving its new look. Where it had gotten a little bloated and unsightly, the Accordance interface is now sleek and svelte, shielding users from complexity they don't need while giving them instant access to all the features they do need. Frankly, it feels good to see Accordance get back in shape ... now, if I can just do the same myself!