dan's face 
Daniel C. Robbins

Prototypes


Related Pages:

ThumbStatusWriter Mockup
StatusWriter lets you easily understand what you have been working on in the past few days. This semi-interactive mockup shows off highlighting and item correspondence cues.
3/30/2006
ThumbSpace filling items

This interactive prototype investigates different ways of transitioning a view from different numbers of items.

  • drag the triangular widget in the lower right-had corner to resize the items holder
  • change the number of items directly with the sliders
  • play with the animation speed
1/11/2005
ThumbnailFaThumb Prototype
  • Home = toggle help screen
  • Up/Down arrow = scroll, move between search field, facets, and results
  • 2-9 = choose facets to zoom into (facet view), enter text (search field),
  • / = reset/clear query
  • End = back up one zoom level
  • * = toggle pinning of current view
10/1/2004
TaskZonesTaskZones Prototype
  1. click on "Win" key (on screen) to zoom out
    1. minimized windows are shown with grey gradient
    2. ungrouped windows are in the center (5) zone
  2. switch show/hide states for groups of windows by selecting their zone
  3. group windows by:
    1. zoom out
    2. select center zone (5)
    3. select sub-zones which contain center of windows to group
    4. hit "Enter" key (on screen)
    5. select zone where you want target windows to "live"
7/20/2004
ZoneZoom PrototypeZoneZoom Prototype
  • h = toggle help screen
  • + = divide view into 9 regions
  • 1-9 = zoom into that subview
  • * = zoom out
  • b = menu
  • arrow keys = menu nav
  • Ctrl or Enter = select ("Action")
  • tap = go to subview
  • press n' hold = "glance" at a subview
11/4/2003
ScalableFabricScalable Frabic Grouping Cues

This prototype focuses on "predictive" cues. Various visual cues are used to show when a window proxy is about to become a member of a window (task) group. Cues include:

  • bar graph in title bar of each window proxy
  • increasing radius cue at centroid of each group
  • sorrounding color-coded semi-transparent group halo
9/22/2003
ThumbLatheTree and Hierachy Brushing
  • LatheTree: Hierarchy is displayed with minimal to no indenting. Thus, no horizontal scrolling is needed in tree view
  • Hierarchy Brushing: hovering over elements either in the list view or the tree view causes related items to highlight with differing degrees of highlight (based on degree of relatedness)

The tree view, list view, and tagging are interactive.

7/25/2003
Drag and PopDrag-and-Pop (Ext)

Interaction technique designed to accelerate drag-and-drop on large screens. By animating potential targets and bringing them to the dragged object, drag_and_pop reduces the user effort required for dragging an object across the screen to a desired target.

Grab the icon surrounded by outward facing arrows and start dragging it toward the other highlighted icon. To show the highlights again, press the "space bar." To try different conditions, click on the "Start" button.

12/9/2002
VIBE GroupGroupBar Prototype
Quick and easy grouping of windows into tasks: drag one icon in the Taskbar on top of another to create a group. The order of icons in a group can be changed and icons can be moved from group to group. To remove an icon from a group, drag it outside of the group. In addition, the standard Windows manipulation techniques are supported: iconify, maximize, move, resize, and restore.
11/24/2002
ThumbTask Timeline
Helping a user visualize how they switch tasks over a given time period. As you move the cursor over the timeline, a thumbnail of the hovered over task is shown. The different task rows can be collapsed into one condensed row by clicking on the small minus sign ("-") at the top-left corner of the large thumbnail. You can also look at different ranges of time (as in Outlook) by clicking on the different day segment buttons ("1", "5", "7", 30"). Appointments are also displayed in the topmost part of the timeline.
11/20/2002
High Density CursorHigh-Density Cursor Demo
Various cues to help a user find a moving cursor on a large display. Try different combinations of the techniques to see which is right for you. Some work while the mouse is moving, some work once you have stopped moving the mouse.
10/25/2002
ThumbScalable Fabric Prototype
  • drag windows by their title bar
  • as the windows enter the peripheral zones, they get smaller
  • notice how the windows snap to monitor boundaries when you release them
4/26/2002
Scope MockupScope Mockup
Drag icons around in each wedge to change their priority level. Click on the "?" to see what each icon represents. Click on the edge filters ("To", "From", etc) to see only those items that match the selected criteria. Each wedge can be expanded and collapsed by clicking on the expand icon (^) located under the title of each wedge. Tooltips give more information about each icon. Turning on the list (leftmost button in the row of buttons above the scope) lets you inspect multiple items at once. From the options screen (second from left button in the row of buttons above the scope) you can turn on the clock and change other options.
2/26/2001
3D Hierarchy Thumb3D Hierarchy Mockup
Use the "transport" buttons (Play, Next Frame, etc) to walk through this linear collection of designs for 3D File system hierarchy visualizations.
2/2/2000
ThumbLayered Windows access strategies
Here are several different ways of letting users access occluded windows.
2/1/2000
ThumbTask Gallery Widgets
A non-interactive slideshow showing several different iterations on the Task Gallery 2D widgets. The design requirement was that the widgets had to be easily understood and easily distinguishable from the arbitrary 3D content.
2/1/2000
ThumbTravel Planner Mockup
A semi-interactive mockup that demonstrates the comparison of multiple versions of a trip. This lets a user easily compare alternatives upon several dimensions (time, price, and complexity). Lessons from this mockup informed the 3D version of the Travel Planner.
2/10/1999
ThumbnailsPlus ThumbThumbnails++
Various ways to display thumbnails next to a vertical list in a very constrained space.
6/29/1998
Visual scroll ThumbVisual scrollbar Mockup
This is meant to show how one could superimpose a visual representation of an entire document onto a scrollbar to assist in large document navigation.
Non-interactive linear mockup. Keep hitting the "Play" button to
go through all the design examples.
5/15/1998
ThumbTime and Maps Mockups
This slide-show demonstrates several different ways of everlaying maps and timelines. You will need to repeatedly click on the "Play" button at the bottom of the window to step through the slides.
2/6/1997
Thumb3D Web Browsing Mockup
Very early animatic of various techniques for using 3D to make web browsing easier.
11/25/1996