Conceptual Model

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.

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.

image_preview-10.jpeg
Radio button UI structure concept sketch • David Valente

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.

Thanks to the previously mentioned similarities between projecting and the web, this interface could be applied to both.

Next post ›

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s