I began thinking of a way to illustrate the principle behind the clock in a tutorial UI. In the first wireframe, the user can select a planet, this includes two possible aesthetics for this. The second illustrated gravitational time dilation. These can adjust the distance the person is away from the large mass.
Mass time dilation mockup 2 • David Valente
Mass time dilation mockup 1 • David Valente
The circle with clock hand was used to provide a familiar interface, however, this is simply a repeating animation to illustrated the relative speed of passing time. The hand will rotate at a slower rate, the closer the person is to the mass.
At this point I thought it a good Idea to have the whole interface revolve around the radio button model. One planet will always be selected, and the user has the option to change this. This way the user is always given the concept in an active state and this constant would help the usability by simplifying the interaction to a conceptual model the user is likely to already be familiar with.
Finally, I caved in and displayed the whole solar system in one go. Maybe the obvious direction is the best. This spinning hand idea that Will gave me, I put into this mockup. In this the user can select an observing planet and a relative one from the nine displayed. The red animation on top will always spin at the same rate. The difference between this animation speed and the blue hand below will illustrate the principle of time dilation.
Projected interface flow 1 mockup • David Valente
Projected interface flow 2 mockup • David Valente
Thanks to the previously mentioned similarities between projecting and the web, this interface could be applied to both.