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
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.
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
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.
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
We’re trying a more joystick-like control. Anticipating people
dragging both the handle and the chute, we support both
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
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
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
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.
Our blog post about the doodle
Jules Verne doodle
Jules Verne doodle in HD
Send us feedback: