Archives for posts with tag: navigation

Problem: Imagine you’re using your app of choice, or you’re sifting through bookmarks folders in your browser of choice, or you’re working your way through the file menu or dock of your OS of choice. You’ve gone one folder in (“Bookmarks”), two folders in (“General Bookmarks”), three folders (“Fun”), four (“Movies”), five (“Comedy”), and you’re just about to click on a link to your favorite funny movie (“Jingle All The Way”)… then your mouse slips, left, down, wherever.

You just lost your filepath. It’s not a big deal, but if you use a computer like I do, you navigate filepaths dozens of times daily — more, if you’re an organization freak.

If I accidentally slide left...

The example menu path is diminished as the user slides left.

Dang it! Now I have to go back through and find my menu selection again.

Solution: One click locks a step in the filepath, a unit of hierarchy. An icon shows that this step or unit is actually locked, and there is a visual indicator of some sort that it is unlockable at any moment.

Something like this:

Locked menu demonstration - menu not quite full.

The user has just started navigating through the menu...

Demonstrating a locked menu - expanded.

...and the user desires the menu should stay put while he/she decides which option to select.

Demonstrating the locked menu - locking the menu.

So, the user clicks on the open lock icon...

Demonstrating the locked menu - menu locked.

...and the menu is locked at that position. The user may click the closed lock icon to undo this.

And that’s it! Just a simple icon change and some undoubtedly complex coding to make navigating menu paths somewhat easier.

I really feel like there could be a better way of indicating locked and unlocked menus, but the point I’m trying to make here is that for complicated paths, it would be helpful to prevent one’s own slip-ups with the mouse or trackpad by locking a section of the path.

Does anyone else remember the perimeter defense hacking scene in the original Jurassic Park? The interface that the young girl character had to work through was a 3D file system for unix called FSN (like the image below), which I think looks like a 3D version of a site map.

An image of an example 3D unix-based file system.

An example 3D unix-based file system. Look at those pretty, web 2.0 colors.

Now, two-dimensional navigation is tradition. It’s familiar, but a little tame. Talented developers are rolling out shiny interfaces using HTML5 and its spouse, CSS3, but I propose a push for more. Let’s bypass a step in user experience evolution and pay mind to some cool, if a little half-baked idea I saw in a dinosaur flick!


So I introduce 3D environmental navigation, which I lovingly call EnviroNav, using visual perspective as another factor in site hierarchy, along with color, size, style, etc. Instead of moving “back” and “forward” like pages through a book, humans can browse a site, application or any other complex, interactive system by moving left, right, forward, backward, into, out of, up and down, in and throughout.

A color sketch of a 3D environmental navigation example.

A rough sketch of what environav could look like.

All this, and not mentioning the gaming aspect, the pure fun of navigating known sites in a new way. Want to re-invent the novelty of the Internet, circa 1999? Give this a shot, and let me know how it goes!