Fisheye Lists

From MobileDesign

Many applications have lists of content, including email messages, local listings, and news stories. Scroll-and-select devices facilitate changes to the visual presentation based on cursor position, much like mouseover or rollover on the desktop computer.

The term fisheye comes from a type of camera lens that works similar to the human eye, with more detail in the center of the image and less detail in the edges. In a fisheye user interface, the item in focus grows (items out of focus may also shrink or may remain unchanged). Size may sometimes be an inverse function of distance from focus. Thus a true fisheye interface for a list would have one item in the middle of the screen, with four or five lines of data, a two-line item listing above and below, and all other item listings as one line.

This type of interface is best used for situations in which the user needs to get an overview of the data as well as being able to retrieve limited specific information rapidly.

[edit] Design

See List-based Layout for general guidelines on design of lists.

As the list is scrolled through, and items are highlighted, they also expand to reveal additional information. This information "peeking" can be used by the user to rapidly determine the value of the item. Choose this expanded information to be readily glanceable, and of value to the typical user.

[edit] When Used

List where further information is available, and presenting a small amount of it will help in choosing or continuing a process.

Not on most web browsers, as the code required to render is not well-supported, adds overhead to the download of the page, and would fail messily for the unsupported devices, presenting the expanded view only for each line.

[edit] Rationale

The use method of mobile device -- and to a certain degree, latency -- means that many users will only be able to glance at the screen for relatively brief moments, before being distracted by other activities. The more information can be glanced at, with simple actions and no delay, the more valuable and useful that information and the remainder of the process will be.

Most mobile phones are oriented vertically, with screens taller than they are wide. Horizontal layout mechanisms, like side bars, tables, and horizontally-oriented control strips at best will look squished on a mobile phone. Additionally, navigating through these mechanisms on a scroll and select device can be confusing and unpredictable and only variably supported by devices.

Pen- and touch-input devices generally have poor hover modality, nullifying the effects of highlight-but-not-select interaction such as this.