Monday, December 20, 2010

Reworking Beat Dialer's UI

I've decided it is time to give Beat Dialer a new UI. The original UI (above) was intended to be the simplest possible representation of the inputs and status - the disk was one input, the centre of the disk was another. The "LED's" around the outside signified the status of patterns (on the left) and steps (on the right). Initially I thought this UI was the "bees-knees" of Tron-esque minimalism but after a couple of week's reflection I realised there were two major problems with this approach.

Firstly, and least importantly, it was simply the most boring and uninspiring interface an application could have. This had massive implications if I wanted to actually grab people's attention and sell the application on the Android Market.

Secondly, and most importantly, it was impossible for a someone other than myself to use without 5 minutes of instruction. This was a killer for convincing people not to immediately ask for a refund after installing.

To remedy this situation, I've decided to re-represent the same inputs that the old UI had (touch wheels and buttons) in a way that was closer to how real-world versions may look. This should make the application more visually appealing and provide intuitive hints for users without help pages.

So far this reworking looks like the below image (this is not yet on the Market).

I've kept the elements in the same positions, focussing on giving them better visual representations. The dial has a current setting marker and a raised border inside and outside (there is more work to come in this area). The button now has a 3D gradient and an inset LCD to display the current setting info (sample or sequencer step). I expect to release the reworked UI in the next week.