Archives for category: Web Design

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.

It’s been awhile since my last ideation!

Okay, this one’s pretty simple. The idea is: add collaborative editing to design applications, in real-time. Like collaborative whiteboards, but with the integrated tools, note-making, and granular functions.

20110718-104624.jpg

In the image, the web app user is adding an ‘X’, the iPhone user is adding a note, and the iPad user is scribbling away. They all do this at the same time, or one after another.

In a real-life example, a user experience designer, a visual designer, and a front-end developer could all be working on a single interface for a brand-new iPad game that has a complex logical structure. They are currently trying to understand basic interactions from one screen to another but don’t have time to have the UX designer cook up several wireframe iterations, then have the visual and front-end designers take those frames and make a basic prototype. They have 10 hours left before development. Oh, and one lives in New York, the second in Minneapolis, and the third in Houston. In-person is not an option.

So they all use their favorite basic visual tool, i.e. OmniGraffle, Photoshop, Fireworks, and work from one screen to another, visually describing the interactions with boxes, arrows, text, gradients, shadows, and most importantly, immediate verbal communication and response.

Visual might ask, “Hey, how will the user add more players to the game?” and UX would add an Add Player function to the screen (maybe a button with a modal prompt). Then Dev would say, “iOS doesn’t support that sort of modal, but you could do this” and Dev redraws the button with an text box alert instead. Then Visual says, “That works, but it doesn’t conform to the game’s proposed visual style. Maybe this?” and so on and so forth.

Like?

This would be a blog where an image of an object with unknown utility would be displayed and users would submit their suggested uses for the object. And that’s it!

Home page for the "How Would You Use It" blog.

A very rough wireframe for the home page. (Made using iMockups for iPad.)

The uses themselves would be very succinct. In the wireframe below, 30 characters is the suggested maximum. Though it could be more, could be less. For this sort of site, simplicity seems to work well. How Would You Use It would play on this, as well as that addiction factor that Facebook and Hot or Not exploited so perfectly.

The "Add a Use" form for an object.

This is what could display when a visitor wants to "add a use."

Also…

There would need to be a more navigation to allow users to view objects that are highly popular, to view objects that the user has already rated, etc., so that all objects are accessible within one or two clicks. But the goal of this blog is for pure amusement.

Wouldn’t it be interesting to see how people perceive the purposes of objects they are unfamiliar with?

An object of unknown use.

How would you use this?

Oh, by the way, if this idea is already being put in use, please send me the link. Thanks!