Archives for posts with tag: ia

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.

Problem: You work at a design agency. You and dozens of other creatives share and individually conjure thousands of ideas, large and small, but your current process leaves a mess of sticky notes, illegible scribbles and difficult-to-save, complex concepts.

Solution: ScribWall, a large, wide, transparent, touch-screen, collaborative creative interface that acts like a whiteboard, with savable and transferable canvases, or “walls.”

A rough wireframe for the ScribWall concept.

I compiled preliminary notes and ideas in a one-page wireframe. (Be kind; this is rough.)

Okay, now I already know that interactive whiteboards do exist. I am suggesting we take it up a notch, add several professional and familiar sketching tools, and really crank out an impressive, collaborative, computer-connected creative surface.

Future Components

I would suggest the interface speed and tool set should mimic and improve upon OmniGraffle, as opposed to Photoshop. The latter has been abused far too long as a web design tool. It’s an image editor. I would suggest InDesign, but it is sluggish and crashes far too often. And I’m not familiar enough with Fireworks to compare.

In essence, you should be able to construct from scratch anything you could normally do with a set of professional drawing tools and a chalkboard-sized piece of white paper.

Two-Faced

Note that the ScribWall is a glass interface, not a one-sided whiteboard. Say Designer Joe wanted to draw a screen on the side facing him. He would have the option to swap the screen to the opposite side, where, say, a 20-person team could view it while he compiled the next screen. In the meantime, Designer Joe’s partner, Art Director Jane, could present whatever Joe created.

Neat? Or not? Either way, I think it’s pretty cool.

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!

EnviroNav

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!