 | Joyful Design: Principles and Projects | This presentation outlines the principles I use in designing effective and joyful user experiences. These principles are illustrated through many of my past project with prototypes and videos. | 7/1/2008 |
 | MapCrunch: Addo National Park South Africa | Microsoft Research has developed the ability to overlay AND register arbitrary images on top of maps in Virtual Earth. I have provided usability feedback to the product group and MSR. Here's one sample "crunch." | 4/18/2008 |
 | TapGlance PIM 2008 Paper at conf web site | Second version of TapGlance paper. Presented at PIM (Personal Information Management) workshop held at CHI 2008, Firenze, Italy. This paper focus specifically on the standard PIM apps: Calendar, Inbox, and Contacts. | 4/5/2008 |
 | MSR Student Design Expo | In the spring of 2008 I mentored a Rhode Island School of Design Industrial Design class. The class, with instructor Lorna Ross, competed in the Microsoft Research Student Design Expo 2008. Their brief was do a project that centered on "Education and Learning." As part of my role, I made three trips to RISD: to introduce the brief, to offer feedback and guidance and mid-point check-in, and to help with the final selection at the end-point crit. | 3/20/2008 |
 | TapGlance abstract from DIS 2008 | First paper on TapGlance, presented at DIS 2008 in Cape Town, South Aftrica. This paper had a focus on tagging, searching, and glanceability. | 1/28/2008 |
 | Boku character samples | Boku is a game that introduces kids to simple programming concepts. I created several sample characters for some of the early Boku prototypes. Each character was meant to evoke different physical and logical abilities. These were created in "3D Studio Max" and "Moments of Inspiration" | 8/24/2007 |
 | Boku UI and characters sample video | Boku is a 3D environment where kids can learn how to program by editing simple scripts (in 3D) that control characters. This 3 minute video shows some of the UI development work I did for the programming Boku UI. The video also shows some of the prototype characters I created for the first version of Boku. There are several iterations of cars, blimps, missles, and other vehicles. | 8/24/2007 |
 | Beyond The Desktop Metaphor Book | | 3/22/2007 |
 | TapGlance demo for Scoble | I did a demo of TapGlance for Robert Scoble at our annual Microsoft Research TechFest event. My portion starts around 9:20 into the video. | 3/5/2007 |
 | TapGlance web page | TapGlance provides a glanceable version of the Smartphone home screen. From this tiled, zoomable, display, users can easily navigate to any of the commonly used information sources. Navigation is aided by the ZoneZoom glanceable technique whereby we differentiate between clicking on a number key and pressing-and-holding a number key. | 1/1/2007 |
 | PhotoSynth | Photosynth takes a large collection of photos of a place or object, analyzes them for similarities, and displays them in a reconstructed 3-Dimensional space. | 11/1/2006 |
 | Local.live.com (3D) | See 3D views of mountains and cities in Live Search Maps like you're actually there. Navigate 3D cities and terrain with the mouse, keyboard, or an Xbox 360 Controller for Windows. Tilt the map and change your viewing angle to see different perspectives. | 11/1/2006 |
 | StatusWriter 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 |
 | Faculty Summit - Zone Based UI | Talk given to 2005 Faculty Summit. Overview of ZoneZoom, Smartphlow, TaskZones, and future research directions | 7/18/2005 |
 | Zone-based UI Talk | Video of my presentation on ZoneZoom, SmartPhlow, & TaskZones. My talk starts at 16:35 | 7/1/2005 |
 | UIST 2005 Website | I designed and created the UIST 2005 Conference web site. This included all graphics, layout, and content updates. | 2/1/2005 |
 | 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
| 1/11/2005 |
 | FaThumb 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 |
 | TaskZones Prototype | - 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"
| 7/20/2004 |
 | TaskZones | TaskZones replaces the notion of grouping windows “in” or “on” a desktop with the notion of simply showing and hiding groups from stored locations. This allows multiple groups to be simultaneously visible as well as groups made of any number of monitors.
TaskZones also maintains the advantages of virtual desktops, namely the exploitation of spatial memory and the ability to conduct group operations quickly through keyboard shortcuts. Note that the example grid has the same layout as a keyboard keypad. | 7/20/2004 |
 | ZoneZoom Overview Presentation | Talk given at AVI 2004 on ZoneZoom for Smartphone | 5/1/2004 |
 | ZoneZoom Web Page | ZoneZoom, segments a given view of an information space into nine sub-segments, each of which is mapped to a key on the number keypad of the smartphone. This segmentation can be hand-crafted by the information space author based on a priori knowledge of the dataset or dynamically created at run-time. ZoneZoom allows users to easily “glance” at nearby areas and then quickly return to their current view by discriminating between tapping a button and pressing-and-holding a button. | 12/10/2003 |
 | ZoneZoom Video | 58mb unnarated video showing several examples of browsing a map, calendar, PowerPoint, photos, and a web page. | 12/10/2003 |
 | SmartPhlow Web Page | SmartPhlow accesses information from the Washington State Dept. of Transportation. The application downloads a relatively small file, usually on the order of 200 bytes, and expands it to populate a Seattle area traffic map. ASI SmartPhlow stems from ongoing ASI research on software for notifications, interaction, and visualization. The SmartPhlow application also is a testbed for our research on interaction and display on small devices. | 11/7/2003 |
 | SmartPhlow Video | 28 mb video showing navigation around a Puget Sound area traffice map. | 11/7/2003 |
| ZoneZoom 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 |
 | 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
| 9/22/2003 |
 | 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. | 7/25/2003 |
 | Phlat | Phlat is the next step after SIS. Phlat is an exploration into how a user can easily filter and tag large amounts of data. | 7/3/2003 |
 | Microsoft Surface | The Microsoft Surface is an innovative computing device that fits naturally into your home. It has a large horizontal display built into the tabletop that can detect multiple fingers, barcodes, dice, and arbitrary objects on the surface. This enables entirely new types of entertainment experiences, which blend the engaging dynamics of computer games with the intuitive and social interactions of tabletop games. And the central location of the Surface allows it to be conveniently used for other activities, like playing music, viewing photos, and browsing the Web. | 1/9/2003 |
 | Drag-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 |
 | GroupBar 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 |
 | GroupBar | GroupBar is lightweight desktop tool that offers enhanced window management capabilities in a Windows taskbar-like setting. The basic concept is that through simple drag-and-drop operations on window tiles within the bar, users can create lightweight, transient grouping relationships that allow them to perform certain higher-level window layout functions on multiple windows at once. | 11/21/2002 |
 | GroupBar Video | Short video showing basic interactions: how windows can be grouped and then acted on as groups to give true "Task" management. | 11/21/2002 |
 | Task 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 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 |
 | Stuff I've Seen | A working version of Filtered Views has been incorporated into Stuff I've Seen (SIS). Stuff I've Seen (SIS) is a tool for helping people easily find web pages, files, and e-mail messages that they've viewed in the past. From this web page, you can easily install SIS. | 7/2/2002 |
 | 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
| 4/26/2002 |
| Scalable Fabric download | A central focus area, defined by you, contains windows that behave in the traditional way. When you drag a window into the periphery, it becomes smaller and continues to get smaller the closer you get to the edge of the screen. This makes it possible to keep windows open all the time, and change "minimize" to mean "return to the periphery". Groups of windows can easily be created to represent different user tasks. Switching between groups is done simply by clicking on the task marker flag. | 4/24/2002 |
 | Scalable Fabric Video | Short video showing how groups of windows can easily be created to represent different user tasks. | 4/24/2002 |
 | The Scope | A glanceable notification summarizer. This simple information visualization tool helps unify notifications and reduce distractions for the user, thus avoiding notification overload. The Scope allows users to remain aware of notifications from multiple sources of information, including e-mail, instant messaging, information alerts, and appointments. The design employs a circular radar-like screen divided into sectors that group different kinds of notifications. The more urgent a notification is, the more centrally it is placed. | 1/1/2002 |
| Scope video | | 1/1/2002 |
 | Scope 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 |
 | Photo Mountain | Adaptation of the dataMountain metaphor to digital photo management. | 1/1/2001 |
 | 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. | 2/2/2000 |
 | Layered Windows access strategies | Here are several different ways of letting users access occluded windows. | 2/1/2000 |
 | 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. | 2/1/2000 |
 | Minority Report | Interface concepts for pre-production including outdoor holographic kiosks, virtual information displays, and systems diagrams for the movie Minority Report | 7/27/1999 |
 | The Future of Work | Set of slides for exhibit at Microsoft Museum. | 7/9/1999 |
 | 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. | 2/10/1999 |
 | Task Gallery | A running 3D research prototype user interface that expands the desktop into an entire office with an unlimited number of desktops. The screen becomes a long gallery with paintings on the walls that represent different tasks, and the user moves quickly and easily from one to another with a simple series of mouse and keyboard commands. | 1/1/1999 |
| TaskGallery Video | Short video showing users creating tasks (collections of windows), rearranging windows in a task, and navigating between tasks | 1/1/1999 |
 | 3D Spirals | Novel technique for showing periodic data. This visualization minimizes occlusion and takes advantage of focus and context style interaction. Useful for TV listings and other time-based information. | 9/1/1998 |
 | Thumbnails++ | Various ways to display thumbnails next to a vertical list in a very constrained space. | 6/29/1998 |
 | 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. | 5/15/1998 |
 | Data Mountain | A new technique for document management that allows users to place documents at arbitrary positions on an inclined plane in a 3D desktop virtual environment using a simple 2D inter-action technique. | 2/2/1998 |
| DataMountain Video | Short video showing users rearranging and inspecting tiles on the DataMountain | 2/2/1998 |
 | Travel Planner | Gives an overview of an entire trip. Relate geographical, time, content, and theme information. Allows tentativeness/uncertainty in the planning process. Lets the user compare alternative trip configurations. | 11/4/1997 |
| Travel Planner Video | 5 minute video showing features of Travel Planner: - 3D spatial arrangement of tools (notepad, map, calendar, and web pages)
| 11/4/1997 |
 | 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. | 2/6/1997 |
 | 3D Web Browsing Mockup | Very early animatic of various techniques for using 3D to make web browsing easier. | 11/25/1996 |
