Optimizing Directory Path Bar

Question

I'm working on a complex project in insert language here, which involves creating a simple directory viewer, similar to Windows Explorer or Mac Finder, but much more simple.

I'm not sure where and when to "minify" or "shorten" the path bar (on top) to show all available text. This is a software design question, not a "how do I program this" question.

Shown above is one arangement. The middle black bar can be slid left and right to resize the two separate directory selectors. User can select a file item to open, and click a top directory to change the current directory. Note that the right directory selector is cut off, that is what I'm going to fix. I need to either shrink, shorten, or cut of part of the text to show the first and last folder in the path bar at all times.

Here is another example, but the bar now moved left. The right directory selector is now fine, but the left is now cut off. I will modify the left path bar in some way so, again, the first and last always show fully.

Here's the question. How should I cut / minify the path bar? I have a few ideas, but I'm unsure which will be easiest to the user and most usable:

1. Cut text out of a middle directory and replace with ellipsis (but which directory, and do I split this out over many, or the directory with the longest name, etc).
2. Shrink the text in a middle directory (again, which directory do I select for this: the middle most? uppermost? (excluding the first) all at the same time?)

Side note: Ignore the clash-y colors of the project, they'll be changed.

Answer 1

There's a couple of notable examples I've found particularly effective:

• The Windows 7/8/10 Way
• The Transmit/Coda Way
  • Not mobile friendly

---

The Windows 7/8/10 Way

Windows 7/8/10 provides the best mobile-friendly example I've come across:

How does it work?

When space in the path bar becomes limited, it does the following:

1. Remove directories furthest from the current directory.
2. If we reach the level above the current directory...
   • ... truncate it's name instead of removing it...
   • ... and if possible, truncate by removing whole words rather than individual letters.
3. If the truncated name of the level below is 4 characters long ...
   • ... truncate the name of the current directory to a max of 4 letters.

.

What are the advantages of this?

It prioritises the most important folders and actions.

And it ensures that the user is always able to:

• See their current directory
• Navigate to the previous directory.
  • And by extension, all previous directories.

.

Showing previous directories

Windows provides double-arrows which when clicked, displays the removed folders in a vertical drop-down list.

The user can still perform the required actions without it.

But it makes it much easier for them to traverse large portions of the hierarchy.

---

The Transmit/Coda Way

Transmit and Coda 2 don't remove folders at all, and only truncate the names.

When the user hovers over a truncated name, it expands to reveal the full name.

This won't work on touchscreen devices, but provides a viable alternative to the Windows method.