Track/bus header design

No replies
thorwil
User offline. Last seen 3 years 45 weeks ago. Offline
Joined: 2007-11-05
Posts:

Hi!

A few mockups focusing on track/bus headers, but also with a differently coloured automation track:
http://thorwil.wordpress.com/2008/03/05/ardour-headers/

Comments, please ;)

mattb
mattb's picture
User offline. Last seen 46 weeks 9 hours ago. Offline
Joined: 2007-02-22
Posts:

Hi Thorwil

I like the changed colours in B very much; the whole thing seems more cohesive and easier to read. I don't know if it's familiarity or not, but I like the current-style buttons best. The large letters aren't as clear and the icons look rather confusing. D is interesting, but I wonder about getting rid of so much of the track list; it could get rather confusing. I'd like to see it in action though. So, my vote (for what its worth) is for B, with D a curious second.

Thanks for your efforts.

Matt

lincoln
User offline. Last seen 2 years 20 weeks ago. Offline
Joined: 2007-04-03
Posts:

Strange as it may seem I vote for keeping things as they are. It works, it is clear and it does the job. The icons are confusing and the stylized letters really add nothing.

In the heat of a traking session, the sort of detailing you have treated here is of the least importance (for me at least).

Still I appreciate your effort to push the UI beyond what it currently offers.

Lincoln

porl
User offline. Last seen 30 weeks 3 days ago. Offline
Joined: 2006-07-20
Posts:

i think i like c and d the best. i think the icons need to be made more clear though, they look a little busy at the moment. the only other issue i have with d is that it looks almost like a rendering error, so maybe (if ardour's current canvas supports it and it doesn't take too much performance) have a subtle transparent area covering the track under the header... i've done a (quick and nasty) mockup of what i mean:

ardour_headers.png

certainly looks neater than the current ui though, keep it up! :)

porl

the C.L.A.
the C.L.A.'s picture
User offline. Last seen 2 weeks 3 days ago. Offline
Joined: 2006-12-03
Posts:

I think I like the original design the most, if only it's because I got used to it. ;) So of your mockups I would prefer version A with the original buttons but would also prefer if the meters stay at the right side of the header.

The biggest problem I have with the current design is that now with the track header faders the space to select a track is very limited. Maybe the track should be selectable by single click on the label and double click to change the label.

In my opinion the faders should be optional as well - first as a global option when creating new tracks and second on a per track basis. I normaly mix externally and those faders would only be useful to me when submixing a few channels because of limited physical in- and outputs.

OT: Last year you did a conception for an export redesign - is there something in the making? Currently I would be very interested in your concept for track export with pre/post fader/plugin options. ;)

beta
User offline. Last seen 6 years 3 weeks ago. Offline
Joined: 2008-02-13
Posts:

Comment from a new ardour user:

- I like the changed colors in automated track.

- Dont like icons or stylized letters [the original design is immediate and functional], and meters on the left.

cbreeze34
User offline. Last seen 4 years 50 weeks ago. Offline
Joined: 2007-01-16
Posts:

how about something consistent with the toolbar buttons, like this:

http://idiosympathy.com/images/buttons.jpg

(sorry my mocking-up skills are rather limited)

I also think sticking with "M" and "S" for mute/solo is wise, as most users with DAW experience will recognize them immediately.

cbreeze34
User offline. Last seen 4 years 50 weeks ago. Offline
Joined: 2007-01-16
Posts:

although, upon further reflection, if _all_ the icons in the app went to the faded-with-a-shadow look like in mockups C and D, that could be cool. (though perhaps they could be a bit simpler.)

thorwil
User offline. Last seen 3 years 45 weeks ago. Offline
Joined: 2007-11-05
Posts:

Thanks for all the comments!

I agree the icons are not clear enough.

porl: My first idea was to make the track headers (partly) transparent, but then thought actually being able to work in that space would be more useful. Just making the unused space somewhat transparent might help with orientation without looking odd.

the C.L.A.: I moved the meters to the left because with many short regions (zoomed out), the right-side meters make it harder to see where the headers end and the canvas starts. For me, at least.

Oh, and the mockups are also about the selection problem: I removed the entries. Single click for selection and double-clicking (+ context menu option) for renaming. Because selection happens much more often then renaming.

The export dialog _might_ become a project in the finnish summer of code.

cbreeze34: that's surely an option. Some DAWs use M and S, others don't. Once in a while I just have to try to come up with icons for these ;)

porl
User offline. Last seen 30 weeks 3 days ago. Offline
Joined: 2006-07-20
Posts:

i agree with cbreeze34 regarding the m and s buttons. apart from that i think the icons are a great idea. i'd like to see that used elsewhere in the program too, such as getting rid of the 'old fashioned on screen button' look of the transport and making them look more modern. obviously usability comes first here, but i think that may improve the desirability of the more aesthetically minded folk out there :)

porl

cbreeze34
User offline. Last seen 4 years 50 weeks ago. Offline
Joined: 2007-01-16
Posts:

porl: and when done well, aesthetics and useability go hand-in-hand. i wouldn't mind having just simple (non-3D) icons in a row like what you'd see in a typical Gnome/KDE app, with a little emphasis of some sort on mouse-over. i think it could be done while maintaining Ardour's professional look. (though i'm no UI designer.)

porl
User offline. Last seen 30 weeks 3 days ago. Offline
Joined: 2006-07-20
Posts:

cbreeze34: i like that idea actually, subtle icons that don't make the interface look messy, but react (saturation increase? drop shadow? slight zoom in?) with mouseover and selection clearly. i think once cairo is used more through the interface things will look a lot cleaner if they go down this path: nice antialiased icons etc.

porl

thorwil
User offline. Last seen 3 years 45 weeks ago. Offline
Joined: 2007-11-05
Posts:

Another: http://thorwil.wordpress.com/2008/03/07/ardour-headers-2/

thorgal
User offline. Last seen 1 year 21 weeks ago. Offline
Joined: 2007-08-03
Posts:

I like the first best. The black background is a little disturbing to me. Good idea to have the meters along the fader, it looks more natural (though one can discuss whether they should overlap).

beta
User offline. Last seen 6 years 3 weeks ago. Offline
Joined: 2008-02-13
Posts:

Great!
In this design all is in-place and coherent, for my taste.

03b [the second] is perfectly functional and easy to see, maybe too black for the majority..
[not me, I love black backgrounds because of eyes-fatiguing issues in brighter ones].

Only a little note:
maybe the "M" and "S" letters a bit smaller?

cbreeze34
User offline. Last seen 4 years 50 weeks ago. Offline
Joined: 2007-01-16
Posts:

Ooh, I'm liking these.

Transport looks great, maybe the shuttle control could be a bit narrower (vertically) and it could have a texture like the faders do. The buttons definitely look less cluttered. Though I am a bit against square 3D buttons, for reasons starting with "win" and ending with "dows 95"... ;)

One other thing that's really effective in those mockups is "nesting" the automation track header within that of the parent track. This gives a good visual cue that the automation is "part of" the track. It could probably be even more prominent than it is.

thorwil
User offline. Last seen 3 years 45 weeks ago. Offline
Joined: 2007-11-05
Posts:

Thanks for the comments!

I will likely try a less harsh background.

cbreeze34: I actually thought of applying the same texture to he shuttle control but was too lazy ;)

porl
User offline. Last seen 30 weeks 3 days ago. Offline
Joined: 2006-07-20
Posts:

the second image is brilliant, i really like this. it is getting much less like a 'dark gtk app' and more like a modern daw look. the only thing i don't like in that image is the coloured faders, i think they look a little busy, which to me goes against the whole reason for changing the headers for clarity. the meters integrated with the faders is a really clever idea :)

oh, the transport without button effects is much nicer.

porl

edit:
just looking more at the second screenshot, and i have a couple of thoughts.

i think the black background really helps to keep things clear and more easily distinguishable. i think the automation track should maybe have a slight background tint of the same hue as the track it is attached to though to make the connection more obvious. i like the nested look of the automation header, but i think maybe the background colour of it should be less of a contrast.

i think that the shuttle thingy (can't remember what it is called) needs to be made more obvious as to it's function, and maybe a little more compact and out of the way (that might be disagreed on by others that use it more though).

the transport looks great with the button backgrounds removed, but maybe the 'hover' and 'selected' effects should be like the small buttons next to the 'slide edit' dropdown. this would also make it a simple gtkrc edit to do i think.

this comment kind of contradicts my last, but it's just another thought. :) the subtle 3d look of the header buttons is nice, but i think it looks odd when the other buttons on the toolbar etc look so different. i think they all need a simple and subtle common look. maybe it is time to look at a different engine to clearlooks? i played with murrina a while back and it looked really interesting.. i think the idea of flat buttons etc that either pop up or get highlighted on hover/selection is really fitting with ardour's look and feel.

porl

porl
User offline. Last seen 30 weeks 3 days ago. Offline
Joined: 2006-07-20
Posts:

just had another thought... the horizontal meters look cool, but i think they will be a problem for people with elaborate multi-out setups (imagine 8 meters inside the fader for a 7.1 mix output for instance). maybe the look of the meters needs to change to work with more channels without taking too much room? perhaps getting rid of the seperate-rectangles look of them and make one standard width/height meter that shows left and right etc inside it, dynamically scaling the width of each channel to fit in the area provided?

porl

thorwil
User offline. Last seen 3 years 45 weeks ago. Offline
Joined: 2007-11-05
Posts:

porl: channels on the meters need space, be it vertical or horizontal. Vertical means at some point more width is required, taking away from the canvas. Horizontal means the meters can be partly hidden on low tracks. Larger height tracks offer plenty of space in this direction.

Having clear separation has the advantage of clearly showing the number of channels even if there's no signal.

Thanks for your thoughts!

thorwil
User offline. Last seen 3 years 45 weeks ago. Offline
Joined: 2007-11-05
Posts:

Taking feedback from here and IRC into account, here we go again:
http://thorwil.wordpress.com/2008/03/11/ardour-headers-3/

porl
User offline. Last seen 30 weeks 3 days ago. Offline
Joined: 2006-07-20
Posts:

i like the third one, but the regions are harder to differentiate now. could you (or paul) tell us the reason he doesn't like the regions coloured? maybe using just a slight tint on the look you did in the third mockup?

i think the header buttons look a bit amateurish (sorry, nothing personal) with the dark border around them like that. any reason we can't just change the gtkrc file to remove the button border for the mouse-out state? ie. make them like the buttons next to the 'slide edit' dropdown? that should (i think) just be a one-line change in the gtk file, no need to even recompile...

the transport buttons look great, but i think they should also be flat except for on hover etc. i seem to have a thing for 'on hover' don't i :)

the meters i think would look better separate from the faders. i think with lots of outputs they will look really chunky. i think the faders should be the same size on all the tracks, as they are in the meter window.

keep it up, it's looking great (despite all the negatives i seem to bring up)! :/

porl

thorwil
User offline. Last seen 3 years 45 weeks ago. Offline
Joined: 2007-11-05
Posts:

porl: Paul finds different coloured regions hard to look at.

I don't want to make the transport buttons all flat. There should be some hint they're clickable.

cbreeze34
User offline. Last seen 4 years 50 weeks ago. Offline
Joined: 2007-01-16
Posts:

I initially suggested having the transport/etc. buttons with no "button", i.e. just an icon... however after having used Ardour some last night I find that thorwil's desire to keep the "button look" is well-justified: there's immediate functionality evident when there are obvious buttons. Plus the user knows, without having to mouse-over, just how large the clickable area is. And it's got to be easier to code.

Workflow should be the #1 concern, followed by an intuitive interface, with good looks third. So I'm going to put my vote in for practicality over appearance. Not that my vote is worth much. ;)