How can I improve the redesign I made for a Salsa dance teaching utility?

Question

The Product is a widget that helps teach the Salsa dance rhythm by creating and playing with different music and beats.

I've volunteered to redesign the creator's "programmer ui", and I'd like some feedback for my redesign. Some of the constraints were to have the same functionality as the original and have the social buttons on the main widget page.

My redesign:

Click here for the original size.

Note that the colors here are not the final colors and they will be matched and fitted to a pleasing palette as much as possible.

Some areas I'm not sure about:

1. The upper right area with the donate and about buttons. They seem very out of place and force the save button to be too much in the center. It is amplified by the awkwardness of the PayPal donate button. How do I combine the buttons better?

2. The social buttons position. I'm sure I can shuffle them to a better place, but nothing looks great. They are just out of place and in weird shapes. How do I deal with them in a way that doesn't look awkward?

Answer 1

Actually, I think that both the buttons at the top and the social buttons are ok, except that the social buttons need to be aligned to something - preferably to the right side of the box above. But try aligning all four horizontally at the top, and placing the "Switch to Merengue" button under that. I think it could be a nice option.

What I would change is the main area.

1. It was absolutely unclear to me that the checkboxes are checkboxes, until I found the "select all" control. Of course, the graphics also play a part in this, but if you put them next to the labels, it will be much clearer. I just thought it was some kind of dropdown letting me change the instrument or something. So, try placing the checkboxes to the left of the labels, and having them both above each instrument. I would also try playing around with this layout of the instrument element: . I think it can give you a tidier structure, if you lay it out in three columns of 4+4+2. You can also make the disabled instruments grayed out or black and white.

2. Select All and Deselect All shouldn't be two controls, it should be one checkbox that says "Select All". And in any case this should be above the instruments, not below.

3. The instructor should probably be separated from the instruments, and not be controlled by the "All" checkbox. Then you can name the checkbox "All instruments".

4. The "Master key" control - it's basically a dropdown, right? You have a bunch of options from which you select one. I'd use an actual dropdown or a combo - it's far more usable than this, because operating this knob with a mouse requires a lot of dexterity and practice.

5. The "2/3?" control and the 8 circles - it's completely unclear what they do...

Answer 2

Actually, I think it works. The Donate button needs to be prominant, because you need some money for your work! And the "function" part of the top is on the left, and together - you can just ignore the right hand part during normal use.

Similarly, the very bottom might be a place you look at occasionally, and so does not need to be very prominent. They are there and noticable when you need them - probably when you are looking at the product, and building stuff with it, not when you are using it.