Radio buttons

This interface is essentially identical to the previous circle in regards to the components just with a new structure. However, rather than selecting a relative body, the user can only select the observing planet. The others would then, in accordance, be reflective of their relative distance and velocity.

Drawing from Jakob’s Law of Internet User Experience I thought to just do a wall of clocks, the same as the classic 3 clocks showing New York, London and Tokyo. These simply show the difference in time at several locations in a coherent manner. Similar to what I’m trying to achieve.

image_preview-2
Initial mockup of flat interface for clock • David Valente

In user testing this, the user thought this was a static interface to be observed, not interacted with.

image_preview-3.png
Iteration of flat interface of clock • David Valente

I experimented with subtle changes including a zooming animation when the rectangle is selected (similar to the ios11 z-axis bouncing animation when notifications are selected). Increasing the contrast of the selected planet with a stronger accent for the background, in addition to clear conventional radio button style indicators beneath each option. This received positive feedback from the class saying the was one of the clearest designs yet.

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