 |
Portfolio Video |
Short (3 minute) rapid-fire video that gives an overview of
my projects from 1997 - 2008. This video is quite large
(40mb) and is in WMV format.
|
8/6/2008 |
 |
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. NOTE: this deck links to several interactive
demos that only run on specially configured machines. Also,
these slides are meant to support a live talk and do not, in
themselves, stand-alone.
|
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 |