Wednesday, December 13th, 2006

Building a Fish Eye Menu

Category: Articles, Usability

Alexei White has written a post on Building a Fish Eye Menu in which he goes over iterations of his development of a fish eye component.

  • Iteration 1 – Proximity Detection and Scaling
  • Iteration 2 – X-Axis “Zooming”
  • Iteration 3 – Alignments Left, Right, and Center
  • Iteration 4 – Labels and Menu Item Activation (Bouncing)
  • Iteration 5 – Container Object and Y-axis Zooming

Are people into less conventional UI components like Fisheye, or are they strictly eye-candy with no practical role in enterprise software?

I know there are still things that Fisheye can use in the way of functionality. It would be nice, for example, to have vertical orientations for the menus, and also to be able to attach traditional drop-down menus to each element. I would also like to see context menus and groupings.

Posted by Dion Almaer at 6:53 am

4.3 rating from 62 votes


Comments feed TrackBack URI

The only study I’ve seen that indicates fisheye widgets are better is one where they tweaked drop down menus to have several hundred ordered entries (e.g. countries of the world alphabetically). Fisheye menus were shown to be better than both submenus and scrolling options and (I believe) slightly better than the multi-column dropdown used in programs like the old Netscape navigator.

For the dock, the size and lack of ordering leads me to believe that the only benefit of zoom is being able to spot the mouse position. I preferred my popup folders of aliases on OS 9.

As for non-typical widgets in general, there are plenty of good widgets that aren’t about eye candy. The zoomed out mini-map on yahoo and google maps, for example, provides context to the main view. The address autocompleter on current webmail apps isn’t typical elsewhere, but it’s quite useful. I have my own set of custom widgets, which tend to revolve around autocompletion. e.g. Many to Many relationships tend to be troublesome for widgets, particularly when the number of choices on one side is large. My InputList widget mixes an OL for removing/displaying active relationships with an autocomplete box for adding relationships.

Comment by Karl G — December 13, 2006

Good stuff. Nice to see someone’s thoughts on building something like this from a user experience / interaction perspective. (Pity there’s no live demo to play with just yet.)

Comment by Scott Schiller — December 13, 2006

Dojo has a working Fisheye widget too.

Comment by dwimagine — December 13, 2006

Hey Ely. I’ve seen your fisheye implementation in the past and its amazing. The 2D presentation is interesting because you have to affect items in the peripherie (non-zoomed items) as well as those in focus because of the limited space. The result is you can’t use your peripheral vision to scan items along the edges because they’ve been zoomed right out of view.

I agree with you completely about predictability. The important thing there is if people make really quick gestures to grab a menu item, they don’t want to have to wait to see where the new position is. I’m getting better at this:

Couple demos:

Comment by Alexei — December 13, 2006

Hey, cool, live demos!

They feel really nice and responsive. They do seem to suffer from predictability though…I imagine the more items you add, the more offset the zoomed position of an item would be from the unzoomed position. You’re right about the loss of periphery, but that’s the price I think you have to pay if you want to combine predictability and constraints (either size, or alignment).

Comment by Ely Greenfield — December 14, 2006

I built a fisheye menu that is much more simplistic, maybe someone here can get use out of it. It just swaps images and expands, and adds a caption underneath the image.

Comment by Marc Grabanski — April 11, 2007


Comment by aaaaaaa — September 13, 2007

nice javascript fisheye menu you got there Marc.
thanks for the live demos guys.

Comment by JampMark — April 2, 2009

Leave a comment

You must be logged in to post a comment.