Tagged: User Interface

Window of Opportunity

When you see a foremost window, and a window behind it, you’d think that Cmd-W would always close the foremost window, right?


Switch to the Finder, open a new window, then choose the menu “View” and submenu “Show View Options”. Then, press Cmd-W.

Instead of the foremost window, which is a utility window, closing, the regular window behind it closes.

Utility windows are distinguishable by their smaller window controls, and by their behavior: they float over other windows. They always have a close button, but the keystroke shortcut is never hooked up. You have to click that tiny tiny close button yourself.

Because of the control size, it isn’t hard to distinguish utility windows from regular windows. But during the kind of rapid-fire UI interactions that power users love, it’s easy to accidently treat the Find window of Acrobat Reader 5 (utility) like the Find window for Text Edit (regular). To treat the Palettes window of Interface Builder (utility) like the Catalog window of CodeWarrior’s Constructor (regular). After enough “D’oh” moments, I start to get frustrated, and I slow down.

My advice? Avoid using utility windows whenever they might be mistaken for normal windows, like when they overlap normal windows. Don’t use them when you might want to close them often.

But they can be done right. Have a look at Photoshop, where the utility windows are “docked” to the side.

Heterogeneous Trees, Part II

Uli Kusterer has a response to my Heterogeneous Trees post.

His approach on modifying TADS Workbench for Macintosh – which is his app, after all, so he has some authority in the matter – is a compromise, and I can see his point.

There are some usability benefits to using trees. Trees nodes are easier for the user to minimize, and might be less cumbersome than, say, three separate list widgets stacked vertically in a window. If you make it so the list widgets get bigger as the window gets bigger, then even the spatial arguments I made before hold less water, since the coordinates of the beginning of the lower lists are not fixed, but depend on window size. If you don’t make the lists grow in that fashion, then you’re condemning the user to endless scrolling to navigate lengthy lists, no matter how big you make the window.

Split views are one solution, but I find them a bit cumbersome. You have to click just so on a split control to resize it, unlike the larger disclosure triangles of an outline view.

Well, so how about the Finder’s Info window? It uses disclosure triangles, but I’m dissatisfied here as well. Letting the user have so much control over minimizing pieces of a window’s UI feels sloppy: window-as-accordian.

My ideal solution to this is not to have multiple lists in a single window at the same time at all. Separate the lists onto different panels of a tab view, and make those single lists grow as the window grows. Will that cover all cases comfortably? Probably not, and I wouldn’t be rigid about it, but it’s where I’d start.

Column Before the Storm

While I’m on the subject of UI annoyances…I’m not real happy with the Finder’s column view.

Here’s a test. Make a narrow Finder window, switch it to column view (Cmd-3), and then just…select one of the files in the leftmost column. What happens?

The column you just selected scrolls offscreen to the left to make way for the next column, which is either a list of contained files, if what you’ve selected is a folder, or the Preview column if it’s a file.

Does anybody find the Preview column useful for anything? If I want file details, I will explicitly ask for them, via Cmd-I. If I want to experience a media file, I will double-click it.

My usual workflow is this: select the file, curse that the file has scrolled out of view, and go down to the bottom horizontal scrollbar and scroll the column back into view so I can do whatever it is I originally wanted to do.

Lots of times, that action is dragging the file onto an app to open it; note you can’t drag a file unless you click on its icon or name, which are the first things to disappear when the column scrolls to the left.

Other times, I might want to rename a file. Same deal.

Yes, I could hit the back arrow to scroll back one column. Hm, I should try that more often. But it’s annoying to have to keep correcting for OS mis-actions. Since I find the Preview panel annoying, I think it should be the one to be partially visible if there’s contention for real estate in a Finder window.

On second thought, I think the selected item’s row should get precedence even if it’s a folder, and the column to the right is the contents of that folder. Sure, I understand it’s important to see those contents, but as a general rule, I don’t like that the mere act of selecting something can make it disappear.

Just One More Thing…

So if you haven’t been reading the comments, there’s already something similar to what I want out of a file-specifying widget in the standard Open and Save dialog boxes, if you just hit Cmd-Shift-G to bring up a separate little utility dialog.

But I don’t want a separate, after-the-fact solution, sprung on the unsuspecting user like a last Columbo question. I want something integrated.

Speaking of after-the-fact, one thing about Panther that really bugs me is is the FileVault prompt to save space in your encrypted file. There’s no preference in the UI for “always do this,” nor is it part of the “Are you sure you want to log out” dialog box. Nope, it’s just thrown in there after everything else. Instead of making the hard choices of what other UI to change to incorporate this new workflow aspect, they went the easy route: easy for the developer, a pita for the user. I’m both a (picky) user and a developer who tries to do the right thing, so this sort of thing makes my head explode.

Forest for the Heterogeneous Trees

When you’re holding a hammer, everything tends to look like a nail.

Similarly, it seems, when you’re writing an app for Mac OS X, complex UI problems tend to look solvable via an outline view. Don’t do it!

Here’s iTunes:

iTunes left panel, including Library, playlist, shared music tree, and more

Most people think of the left pane of the main iTunes window as a simple list, not a tree. But as you can see, with the addition of shared music, now it at least includes a two-level tree.

Inverting the capitalization pattern, here’s Xcode, a rather longer example:

Xcode left pane, including source files, targets, Find Results, and more

Now, what problems do I have with these examples?

The first problem is the “which one of these is not like the other?” riddle. Many of these aren’t like the others, but they should be. My belief is that a single outline should consist of homogeneous hierarchies, like the file system objects in Finder windows or the songs in a playlist. This simplifies the user experience and leads to a cleaner, less cluttered UI.

The second problem derives from the first. In Xcode, for instance, to get to the Targets, you need to get below the project’s groups & files hierarchy. But that hierarchy is a variable number of rows long: every time you open or close another group, you change where you have to click to get to Targets. Same with Find Result: any group you open or close above it shifts its position, making it more cumbersome to get to.

iTunes, with shared music, is even worse. Where you have to click to get to your playlists depends on what other users are currently on the local network!

CodeWarrior, which has to deal with a similarly large amount of complex information as Xcode, does this in what I consider to be the right way, by separating the different trees:

CodeWarrior window

Each tree is homogeneous, so the user doesn’t have to manually navigate around unrelated UI to get to what he or she wants. For example, Targets as always easily accessible. Muscle memory can do its thing.

Now, is there no value to doing it the other way? I wouldn’t say that. Some people probably like not having to switch panes to get to all that information, and certainly the whole muscle memory/spatial Finder concept isn’t in the ascendancy right now.

But if you agree with my reasoning, then hear my plea: just because NSOutlineView is easy doesn’t mean, for your own apps, you shouldn’t take the extra time to put together appropriate UI to show complex data to the user. Look at CodeWarrior for what I consider to be some good examples of this. Just remember: keep unrelated lists and trees separate, don’t lump them together as nodes of a larger tree.

One last example. Here’s TADS Workbench for Macintosh:

Workbench for Macintosh window

This is the app I’m going to be taking over maintenance and updates for, probably in December. Yup, it’s got the same heterogeneous tree behavior as the other apps I’ve mentioned. In my book, what should be separate lists of, respectively, source code files, folders, TADS 3 library files, and language constants, are lumped together in a big ol’ tree.

I won’t be able to change Xcode, and I certainly won’t be able to change iTunes, but I can still strike my own little blow against heterogeneous trees.