3

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.

image 1 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.

image 2

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.

  • Why does it need to be simplified? the best user experience would be to embed the native file system browser of whatever the platform. I really, really have a hard time with apps that have weirdly custom views of the file system, ignoring my shortcuts or familiar ways of interacting with the FS. – J. Dimeo Jul 7 '17 at 23:54
  • @J.Dimeo I'd totally agree, but this is on the browser. If you really want to know, I'm using Dart-Js-Html-Css. I can't know what the user's OS is, nor can I use their program. The "File Items" are also not real files, they're parts of a larger file that the user interacts with. – Zzzach... Jul 8 '17 at 5:00
4

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:

Windows 7/8/10 Path Bar First Stage Windows 7/8/10 Path Bar Second Stage Windows 7/8/10 Path Bar Third Stage

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.

Windows 10 double-arrows to show truncated folders

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.

Transmit Path Bar Coda 2 Path Bar

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.

  • Great ideas, thanks! This is what I was looking for. So far I've implemented a simpler version of the Windows method. – Zzzach... Jul 10 '17 at 0:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.