The user experience details of Google Jules Verne doodle.

We celebrated Jules Verne’s birthday on Google’s homepage exactly a month ago. In the spirit of further exploration, this little site looks at the process of designing the user experience of that doodle.

Come see our talk at SxSW, Friday, March 11, 5pm, to learn more!

Illustration: Jennifer Hom. Coding: Marcin Wichary and Kris Hom.
This site: Marcin Wichary.

HTML5 Powered with CSS3 / Styling, Device Access, and Graphics, 3D & Effects

Note: This website mirrors a design process initially focused on modern browsers. As such, it will work best only on Chrome, Safari, and Firefox 4.

The only hint at the interactivity of this doodle so far is the ship gently bobbing on the surface.

Not unlike Pac-Man, the initial prototype provides just keyboard controls. This might not make it obvious for our users that it is an interactive, playable doodle – Pac-Man is an old-school game, and widely known that it’s typically controlled by keyboard on PCs. (Try to press keyboard arrows now!)

We are also worried this kind of looks like a lever!

The ship can now move horizontally as well as vertically, and we’re exploring adapting a vintage maritime control for mouse interaction.

However, there are too many problems with this approach: the mapping is off (a linear control is used to cover both horizontal and vertical movements), and since there is no center state, the user has to click and hold the control that doesn’t require holding in real life.

We’re trying a more joystick-like control. Anticipating people dragging both the handle and the chute, we support both options.

The dragging will take more effort to get right. Here, notice how weirdly the control feels both if you drag your pointer outside, and if you try to cross from controlling horizontal to vertical movements. The cursor also changes to an i-beam text selection while you drag due to a bug.

Also, we are now supporting accelerometer-based tilting!

Here we “wobble” the lever initially, and then let the ship go down automagically for a while – or until the user starts interacting with the doodle.

In our corridor usability tests, we notice a number of problems:

Users are clicking on the dials

The lever doesn’t look very draggable

Users are trying to click on the edges of the cross

Sideways movement seems slow to many users

In response, we proceed to make a number of changes to make the control easier to use and more inviting:

The lever is more prominent

The vertical chute is more visible, since vertical movement is more important

Arrows make this look more actionable by inviting people to click

Clicking on the dials causes the lever to glow on the other side

The ship is now twice as fast when moving horizontally

If you click anywhere on the cross (we define click as mouse down + up within 500ms), the lever goes back to the center much slower. This allows the user to move by clicking, and hopefully realize clicking and holding works even better.

We end with applying a bit more polish to the entire user experience:

Instead of the awkward “wobbling,” we highlight the lever after some time of inactivity, and then proceed to do a short “auto dive.”

While dragging, the mouse pointer disappears completely, making the interaction feel more tangible; however, we show the pointer if you venture out too far away, even while still holding the button. Also, the UI handles moving far away while holding the button much more gracefully now.

Using CSS transitions and old-fashioned timeout animations to make lever movement smoother (try keyboard control here and in previous prototypes).

The lever will move in response to tilting the notebook. This doesn’t make that much sense (you’re tilting the ship, not the lever), but we thought it would make the feature more discoverable.