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.
|Space 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
- 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
- click on "Win" key (on screen) to zoom out
- minimized windows are shown with grey gradient
- ungrouped windows are in the center (5) zone
- switch show/hide states for groups of windows by selecting their zone
- group windows by:
- zoom out
- select center zone (5)
- select sub-zones which contain center of windows to group
- hit "Enter" key (on screen)
- select zone where you want target windows to "live"
- 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
|Scalable 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
|LatheTree 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.
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.
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.
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.
|High-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.
|Scalable 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
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.
|3D Hierarchy Mockup|
Use the "transport" buttons (Play, Next Frame, etc) to walk through this linear collection of designs for 3D File system hierarchy visualizations.
|Layered Windows access strategies|
Here are several different ways of letting users access occluded windows.
|Task 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.
|Travel 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.
Various ways to display thumbnails next to a vertical list in a very constrained space.
|Visual 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.
|Time 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.
|3D Web Browsing Mockup|
Very early animatic of various techniques for using 3D to make web browsing easier.