[Idea] Circular Interfaces﻿﻿

Ever since the existence of user interfaces there is the question of how to present them to the users. Of course back in the old days where all interfaces were text-based there wasn't much of a choice other than well-organized menu hierarchy, with keyboard as the main source of user input. Nowadays, with better graphics and hardware we enjoy the nicely laid-out Graphics User Interface (GUI). Interface designers suddenly have the entire screen as their canvas where they can put things of difference shapes, sizes, colors, and even animated. Typically all these elements are somewhat rectangular: rectangular buttons, rectangular textboxes, rectangular progress bars, rectangular dialogs... etc.Some of them make sense: texts are linear and go in one direction (until they wrap around), fullscreen content containers have to match the shape of the screen to cover everything. But many are just by convention. Here I'm going to tell you want I think about making some of them circular.

Why circles?Geometrically speaking circles are pretty similar to squares: They have a centre, and they have a "length" determining their size. This means that it doesn't take more to represent a circle than a square. They are also familiar to everyone: coins, wheels, the Sun, the Moon, balls... At the same time they really jump out from other shapes because they have no corners nor sides.

How circles can be used in interfaces?Here I'm going to talk about my thoughts about using circles as interface elements, especially with animation in play. I'll provide some existing examples and talk about some properties that one would want to take heed of when using them.

Circles as buttonsCircular buttons are everywhere (check out [1] for a crazy study about electronic buttons ). You see them in gamepad controllers, your household appliances... even in your phone if yours is an iPhone. There are 2 general kinds of buttons: state-less buttons and state buttons. Stateless buttons are those that bounce back when you lift your finger, they are usually used as triggers. State buttons are those that once pressed, holds their position, they are usually used as toggles. There is actually a 3rd kind of button: timed button, which slowly bounce back within a know period of time. So they are usually used as a timer. The problem with this kind of buttons is the user doesn't necessary know if and when the button goes back to the unpressed state.Different from physical buttons, virtual interface buttons lack visual affordance of pressing and the tactile feedback of it being pressed.