Navigating backwards in Miller Columns

Question

I've got a set of Miller Columns on a web application that could be wider than the page width. So this means the first level of the hierarchy might not be visible anymore. What's the most effective way for users to navigate "back" in a set of Miller Columns?

Some ideas might include:

• Horizontal scroll bar
• A "back" button in the upper right corner somewhere
• A "back" item as the last/first item in each list

An example of all of these in action:

^{download bmml source – Wireframes created with Balsamiq Mockups}

(Note: my data is actually a set of reports, but I thought this would be a better example)

Or, maybe it would work well enough to autoscroll the columns so the one in focus is always in the center? Or something else?

Answer 1

It's always a good idea to keep the item that's in focus in the viewport. However, as soon as the user has taken control of the positioning of the screen (eg. by scrolling to the side) you need to be careful about repositioning (eg. scrolling back to put the focussed item within the viewport again). I would propose to only do this initially when a new/different column gains focus.

Horizontal scrollbars are the obvious choice, but they're also quite clunky to use on everything non-touch.

A possible issue with the layout of your mockup is that the three columns fit exactly. This way I don't get a clear visual clue that there is more outside my viewport.

As an alternative to back/forward buttons you could also use clickable areas (commonly used lightbox UIs). They indicate that there is stuff outside the viewport and they're easy to hit. However, if there are a lot of these columns in your application, a scrollbar more clearly indicates where in the list of columns you are while also providing a faster mode of scrolling.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

On the Mac OS, the Finder's Miller Columns uses a combination of scrolling and breadcrumbs to support navigation:

The advantage to this approach is the scrolling allows the user to see all of the items at each level of the exposed hierarchy, while the breadcrumbs makes the hierarchy path to the current level explicit.

In your use case, I believe a combination of scrolling within the Miller Column wrapper and breadcrumbs might also work because for reporting I could see both use cases being valid (i.e. what is the path that led me here, and what are the other options I could have selected up stream).

Potential Enhancement

An alternate navigation enhancement you could make, however, is be to have a "segmented" scroll tied to the breadcrumb below. This would be similar to the the NSSlider control in Cocoa:

A segmented slider would "center" the column at the selected position, which would make traversing left and right more exact.

Another option is to have a user's click within a column's white space cause the selected column to "center" in the horizontal scrolling view.

This could be combined with keyboard shortcuts that maps ← and → to the same action. On touch screens you could similarly utilize a swipe gesture.

The benefit of any of these approaches is making the horizontal scroll more exact.

Answer 3

The deeper you go in the hierarchy, you can start compressing the top level items. You are basically treating the columns as your breadcrumbs, they give you an idea of where you are and you can get the details by focusing (expanding) them. This helps you keep all the columns in focus and easy backing out.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

You could also use a breadcrumb menu. That way the user could jump right to the exact level he wants to reach.