Looking for "circular" websites.

November 14, 2006 8:16 AM

Looking for examples of "circular" interfaces, as well as interesting experiments for displaying information

I've been searching around for some inspiration for a site I'm designing that will:

1. Rely on a circular motif to display content & tools.

2. Hopefully display typical chart & graph info in a not so typical way. I am struggling for a better way to describe this, so hopefully leaving it broad will solicit a variety of responses...

Also, I turn to ask.mefi a lot for these types of questions, does anyone know of a good design forum where I could ask for examples like this? Or does anyone know of any good web design compendiums that might allow someone to search specifically for things like this?

Thanks!

posted by cusack to Computers & Internet (22 answers total)

I don't know of design forums, etc, but the a couple of things that come to mind are:

1. The clock/compass as the classic round motifs for the display of information.

2. A radar-style display for presenting info in a non-typical (and circular) way. (That is, a signal which sweeps a circle and traces data.) Becase your description is so vague, this may be entirely useless.
posted by JMOZ at 8:28 AM on November 14, 2006

Like this? Chilis. [flash]
posted by Monkey0nCrack at 8:34 AM on November 14, 2006

Try to think of real-world application tools like this or this.
posted by JJ86 at 8:36 AM on November 14, 2006

I put together a pitch where the idea was, we had little icons on a "virtual lazy susan", and you could scroll the lazy susan clockwise or counterclockwise to rotate an icon to foreground. Foreground items became mouse-overable and clickable interface elements. Or I suppose you could click on 'em regardless of location. Icons increase in size when rotated to foreground; also they can run through little animated loops.

In other words - re-create the selection screens from Tomb Raider.

PS the pitch did not succeed.
posted by Mister_A at 8:36 AM on November 14, 2006

The Dead 60s band site has a very, very annoying circular navigation LP.

"Secret of Mana" for Super Nintendo had a really awesome, easy to use "ring menu" system.
posted by chuma at 8:41 AM on November 14, 2006

Like this? Chilis. [flash]

I think you mean Chipotle.
posted by mattbucher at 8:49 AM on November 14, 2006

Ushida Findlay very justly won the "Worst Web Page in the World" award, but it is a (bad) example of circular navigation.
posted by phoenixy at 8:52 AM on November 14, 2006

That is wretched Phoenixy! Thanx.
posted by Mister_A at 9:04 AM on November 14, 2006

Don Hopkins' (exhaustive) pie menus site.
Quicksilver constellation menus.
posted by Armitage Shanks at 9:09 AM on November 14, 2006

nulooq
posted by devbrain at 9:35 AM on November 14, 2006

The T-Mobile Sidekick phone (from Danger) had a circular menu interface that worked very well with the scroll wheel. They have a flash version of the interface on their website, but it really is the hardware part of the phone that makes it work.

As for displaying data, I read (in Business 2.0) about an interesting program that allows companies to plot all sorts of data as colored dots of varying size, and the visualization let you quickly see patterns that might not be evident in a pure number form.
posted by shinynewnick at 10:09 AM on November 14, 2006

Monkey Ball
posted by RobotHero at 10:11 AM on November 14, 2006

iPod is famous for its clickwheel.
posted by chairface at 10:25 AM on November 14, 2006

There's a system from Microsoft Research (google term: MSR), called Scope. PDF is here with some screenshots. The title is "Scope: Providing Awareness of Multiple Notifications at a Glance" and it's got a round radar-like interface.

For graphs, I'd check out sparklines, an idea for bargraphs that are small, so they can be used embedded into lines of text. Edward Tufte is the originator of this idea.
posted by zpousman at 10:38 AM on November 14, 2006

Best answer: Fan charts and circular treemaps are pretty, and often useful.
posted by mbrubeck at 10:43 AM on November 14, 2006 [1 favorite]

The Sims uses circular menus that expand out.

You might want to look at CHI for different ways of presenting information. I worked George Furnas who was lloking into creating what he called Fish-Eye views of information. Original Paper. It's less about circular presentation and more about trying to show you what's more/most important.
posted by plinth at 10:54 AM on November 14, 2006

Star trek filter;

The borg computer's had circular interfaces.
posted by oxford blue at 2:25 PM on November 14, 2006

Definitely second the quicksilver constellations.

They are amazing, and once you get the hang of it, selecting an item nested within a few menus becomes nearly instantaneous.
posted by Freen at 2:59 PM on November 14, 2006

Maya (a 3D animation tool) uses contextual, radial menus for its right-clicks (at least on Linux). Basically, you click on the doohickey on which you want to operate, and around the cursor appear a number of different options. You navigate through them by clicking, either expanding new rings of option, or activating commands.

I rather think the interface has significant usability advantages. And it looks cool.

Their website should give you a demo to run on your system.
posted by Netzapper at 8:47 PM on November 14, 2006

Reinventing the Wheel is a book that is perfect for what your after.

Communicating with Pattern: Circles and Dots may have something in it to inspire you.

How about a children's book about drawing with circles?
posted by stuart_s at 9:19 AM on November 15, 2006

Response by poster: Thanks all, I am now embroiled in trying to get constellations to run, as opposed to working on the site that prompted this post in the first place.
posted by cusack at 1:51 PM on November 15, 2006

roofstudio.com recently took "best of category" for Interactive Design in ID Magazine's 2006 annual design review.
posted by hydrophonic at 8:11 PM on November 15, 2006