Ok, we know, we had a good user interface, easy to use and beautiful. Over a year of users feedback confirm just that. So how to improve it? Where we need to work more? How we can accomodate tons of new features in the same space? Those are few questions that drive ou UI development work.
Fortunately we have a good UI designer here [promo message: our boss] which come up with some good ideas taken from Microsoft's new "Metro design language".
IMPORTANT: REMEMBER THAT WE ARE TALKING ABOUT AN ALPHA VERSION SO THINGS WILL CHANGE AND IMPROVE. THAT POST IS ONLY ABOUT THE IDEAS BEHIND THE NEW UI NOT ABOUT THE DETAILS.
More features means more buttons, links, controls and such and since the beggining of Breezer 2013 development we fill the toolbar with tons of them but from the telemetry (usage reports sent by our users) we discover that some are rarely used while others needs more attention from us.
The first change you'll notice is that the buttons losts their border (aka chrome) this is consistent with new UI design trends and this small change makes easy for us to add two more command row. In those two additional rows we put the rarely used commands. Thanks to the telemetry from our users we choose for example to move the options and about button (rarely used) to a more discrete position.
To reduce workspace chaos we add two child menus: views to switch between Folder, Tag or Hybrid view and widgets under which you'll find every external window like the layered player or the harmonics anlyzer. When you don't need those menus just click again their button an they will disappear.
The context menus
We take the opportunity to redesign our context menus because we have many new commands to put in place somewhere (like the new cut, copy and paste commands) in the file/folder view and elsewhere.
We reorganize also the previewing options switches. Now you can switch on or off them with just a right click, anywhere in the workspace. In Breezer 2012 you must go under the program options and/or do a right click on the player controls, quite counter-intuitive.
We fix also an annoying bug which sometimes prevents the context menu commands to work, they appear in gray, as if they where disabled. This will never happen again with Breezer 2013.
The folder and file view
Another area where we work hard was the file and folder views. We spent a lot of time on those boxes because they are the two parts of the workspace which are most used by anyone who use Breezer. Both needs to be fast (I'll discuss the performance improvements in a separate post) and clear.
The folder view was redesigned from the ground up to be more intuitive and readable. We increase the text size and hot-track color contrast and we introduce a new feature called parent-tracking which (when you put your mouse over a folder) highlights every parent folder, so you have a clear view of where the current folder is. You need to see that feature in action to appreciate it.
With Breezer 2013 we want to make things clear and one long time user Solaris (he follow us since the first alpha) ask us to introduce another feature related to the folder view. He want to hide forever a particular folder (how many, you decide) why? When browsing a network store of 20 TB (I'm not kidding) you have tons of folders and 90% of them have nothing to do with his music-production work. With Breezer 2013 he will just right-click on the "Invoices" folder and choose "hide". If one day he will take a look to his invoices he could go under the program options and re-enable it.
As a last note if you need more screen real estate you can show or hide folder/file icons directly under the program options.
Delay, echo, bpm and note calculator
Another area where we improve over Breezer 2012 is the BPM tap pad that allows you to find out how many bpm has a sample. In 2013 edition we added a note-delay calculator. how to use it? Just enter the bpm of the song you're working on and it will give you the length in milliseconds for several note values then you can set your delays, pre-delays, reverb etc... It will also calculate the Hertz modulation for each note value too!
Great tool for setting modulation effects like Tremolo, Vibrato and... oh yeah, LFO's! All in a compact and super-easy-to-use widget.
Please note that the user interface is not mature so expect some changes in the future.
Your workspace, your style
Breezer 2013 allows you to apply a custom background image to the workspace (and you can adjust it's opacity as well as other opptions) as shown below.
This may seem only a subtle change, but is a change that allows you to make your copy of Breezer unique!
Putting all together
So how does look like the new user interface? here is it.
In the end
I haven't the time to explore deeply every change, so I write down only a short list of the most important:
- We commisioned a new set of icons. High-contrast, clean and easy to read.
- Show or hide file and folder icons. Need more space? just hide them.
- Folder tree mouse hot-tracking. Moving your mouse over a folder to highlight its parent path.
- We have redesigned the layered player which now uses only icons (no more text buttons).
- The options window was heavily reorganized to make things more clear.
- No more annoying scrool bars, you will se a scroolbar only when you need them.
- Full Windows 7 Task bar support.
I hope that this post will stimulate a constructive discussion. Tell us what do you think and if you have any suggestion use the "comment" button below! We will take care to evaluate each suggestion.
Umberto Giacobbi and Michael Sclepp - Revel Software