Designing Kinect-Based Experiences

More than 10 million Kinects have been sold since the depth- and gesture-recognition Xbox accessory first launched in November (selling so quickly in its first 60 days that it beat out the iPhone and iPad for a Guinness Book of World Records award).  Given that it’s aimed at a much larger consumer audience than the Xbox has been, and with Microsoft’s announcement of an official Kinect SDK on April 13, it’s likely more of us will be designing for Kinect-based interfaces in the near future.

I recently partnered with two talented developers to prototype a Kinect-based experience. We had the opportunity to observe more than 30 people use the prototype, which allowed for some great, ad hoc user research.

After the jump, you can read my takeaways and design recommendations based on observations of our experiment.  I’ll also try to post any new Kinect info I might gather from MIX11 next week.

Continue reading

Update to Simulated Drag-and-Drop: Create a Fail State

In my earlier post, “Simulated Drag and Drop with Catalyst,” I showed how a horizontal slider could be used to demonstrate some drag-and-drop interactions.  In that case, I showed how a successful (accepted) drop would behave.

There will be cases when you want to demonstrate a failed (rejected) drop.  In this update I’ll show you how simulate a draggable element resetting after it’s been rejected from a drop zone.   This tutorial assumes you’ve set up your file the same way as in the previous example.

What we want to do:
  • Create two states–one in which we can drag the slider thumbnail over to the drop zone, and one in which it’s back in its original position
  • Be able to repeat the behavior without having the refresh the SWF.

Continue reading

A Squirrely Catalyst Demo

Over the past weekend, I put together a quick and dirty (and cheesy!) Flash Catalyst prototype, to show off the capabilities of this application to my colleagues.  The end result seemed worth sharing.

Here’s a screenshot of, and link to, “Squirrl,” an imaginary web app for finding and stashing tchotchkes.  Its purpose is to demonstrate PSD > Catalyst import, quick component creation, data lists, and custom/generic components. Though this is a mid-to-low-fidelity prototype, there should be enough to fiddle around with.

Continue reading

Simulated Drag and Drop in Catalyst

(Check out my follow-up tutorial showing how to simulate a drag-and-drop with a fail/reset state)

Recently, I was asked if I could help someone build a Catalyst prototype to help them demonstrate drag-and-drop functionality.   The current version of Catalyst does not yet support this as one of the built-in interaction types.  But, since my goal is to help my peers get on board with using prototyping tools including Catalyst, I set out to find a way to simulate the nature of drag-and-drop using the tools available in the application.

Ultimately, the simulation had to:
  • Allow a piece of artwork to be dragged from one location to another
  • Upon release of the artwork, trigger a state that makes it appear as if the artwork has been successfully dropped inside of a zone.
  • Allow the artwork to be dragged at an angle (given the setup of my peer’s UI)
After a little investigation, I found that hacking a horizontal slider element would be the best way to achieve these goals. It gives the visual illusion of drag-and-drop, and triggers the “dropped” state upon mouse up of the artwork.

I created this “Trip Packing List” demo to show off the basic idea.  Click and drag the bikini artwork from the “Clothing & Accessories” module and release it (while still holding the mouse cursor over the artwork) when it slides over the empty square in the “Packing List” module.

Continue reading

Custom Tooltip Prototype in Flash Catalyst CS5

I’ve been playing around with ways to simulate rich tooltipping with Flash Catalyst CS5.  I decided to create a prototype around the idea of having a geotagged, map-view showcase of my watercolor paintings from around the world.   In this prototype, I focused on simulating rich tooltips that would contain their own gallery controls to view each location’s artwork, as well as trying to simulate simple tooltips with a datalist element for the large gallery view.

Continue reading