Differences between revisions 4 and 5
Revision 4 as of 2010-10-22 00:49:01
Size: 3357
Editor: eberkman
Comment:
Revision 5 as of 2010-10-22 18:24:23
Size: 3921
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 24: Line 24:

For scroll-and-select devices, a single click should move to the entire next frame (with the animation). For gestural scrolling, dragging so the frame divider is about halfway across the screen will cause a "snap" to the frame in the gestured direction; if touch input is stopped at this point, the next frame will slide into view anyway. Movements smaller than this will revert back to the starting frame. Acceleration, to scroll across many frames at a time, should also be supported for gesture, and as a press-and-hold action for scroll-and-select devices.

Problem

Present a set of information, which is either a series of screen-sized items or can be grouped into screens, for viewing and selection.

Vertical List

Solution

A series of screens are displayed as a continuous strip, with small spaces or markers between them. When a screen is centered, it fills the entire viewport. When scrolled, part of two screens and the divider can be seen at the same time.

For viewing individual items, such as images, the image will be fitted to the viewport. For collections or groups of information such as articles, lists or groups of icons, the individual screen may also scroll up and down.

Variations

Filmstrips generally only have one axis of movement at a time, either vertical or horizontal. This may vary when the device is rotated, and generally is parallel to the ground, so always left and right.

A variant is of this pattern may be used to choose from thumbnail versions of truly full-screen items within or between applications on the device (such as web browser windows). In this case, the thumbnail is smaller than the viewport, and the gap between screens is increased. If the adjacent screens are visible, this begins to be more like a *Carousel* instead.

Rarely, it may be useful to implement the Filmstrip as a large grid, with scrolling between frames in both axes, or possibly even at angles.

Interaction Details

Scrolling may be by gesture, directional keys, or selection of scroll functions on the screen. Scrolling must always be "live" or show the items moving on the screen. If this cannot be done, do not use the pattern and select another method.

For scroll-and-select devices, a single click should move to the entire next frame (with the animation). For gestural scrolling, dragging so the frame divider is about halfway across the screen will cause a "snap" to the frame in the gestured direction; if touch input is stopped at this point, the next frame will slide into view anyway. Movements smaller than this will revert back to the starting frame. Acceleration, to scroll across many frames at a time, should also be supported for gesture, and as a press-and-hold action for scroll-and-select devices.

Menus available for individual screens, either Fixed Menus or Reveal Menus will not be made available, and when visible will be suppressed during the scrolling action.

For certain types of data, or certain interaction models on the device (e.g. especially scroll-and-select devices) a *Pagination* widget may be used. This may be visible at all times, made to be visible via an option, or only visible when scroll has otherwise been initiated.

Circular scrolling is encouraged, but may not apply to certain types of data. It may be important, for example with date-ordered information, that the set have a distinct start and proceed from there.

For screens larger than the viewport, the vertical scroll component only functions when the screen is locked.

Presentation Details

Each image in the grid will be the same size, and will have absolutely consistent spacing. Lay out all items on a regular grid.

A Location Within widget should be displayed. Depending on the type of data used, this may be visible only when scrolling, or at all times.

Borders, shadows and halos should be used to make images stand out from their background. The degree to which these are mere hints, vs. prominently visible, depends on the content, background and effects applied.

Antipatterns

Use caution allowing scrolling within a single panel of the filmstrip. This may be confusing and break the filmstrip paradigm for the users.

If live scrolling (animating the transition between screens) cannot be implemented for technical reasons, the pattern being used is not a Filmstrip.

Examples

Film Strip (last edited 2013-04-10 23:58:54 by shoobe01)