VST GUI Rant

[jaypee]

Heh,

Some of your GUIs aren't my favourites.

No problem ... as long as the others are

Of course everyone's entitled to their opinion. But we're also entitled to rant about it and/or engage in meaningful discussion about it. I believe McLilith (not that I'm qualified to speak for him) was simply demonstrating that more care can be taken for legibility's sake.

Absolutely! But then, the vibes in quite a few posts were not that respectful. You will agree that most of it was not really about what to do in order to improve things.
What I actually wanted to say is that there is no universal truth and wisdom as to what is 'the best'.
Also, there is not much of a need for devastating comments on the outcome of other folx's work - they do the best they can anyways, and I have much respect for this whatever the actual outcome was. I mean ... it's so easy, if you don't like it, don't buy it, do it better yourself.

And, at the end of the day... it was just a rant, which is OVERTLY his saying, "Hey, this is my personal opinion, but I wanted to get it off my chest."

Whoops ... I didn't mean McLilith specifically! It was just this general turn the whole thing took.

Nothing wrong with that... not any more than me sitting down at a pub with my friends and saying, "You know what burns my ass? Pubs that have a really thick glass bottom on the mug to make you feel like there's more in there than there really is!"

Well, 11 pages of posts ... oh so true

/jp

[jaypee]

jaypee, I was just wondering exactly which devices you did for Reason? I saw the Subtractor on your website, so I would assume that you did that. What else did you work on?

I really love the Subtractor's overall gui, and without trying to sound too ass-kissing, I find it more intuitive than any VST I've ever used.
But cyan? Why must you remind me of Windows 95?

No problem, I can stand a little ass-kissing easily ...
We did all of the graphics for the Rack and devices in Reason before 2.0 - that is before the Malström, NN-XT and so on.

Regarding the Subtractor's windows 95-ish sections - the designers are not free to decide *everything* all of the time ... if you get me

[jmh]

Ahh, now it's rolling smoothly

Nice to see mr. Bitplant participating. As a designer who's done some well known GUIs it's interesting to hear his views on this matter. Also, it'll be interesting though perhaps a tad risque to have him on board, as Z3t4 is one of those pieces of software that has loyal following and plenty of respect which might pose a problem later on, as I for one would like to use it as an example of an interface that on one level is pleasing to the eye but on another level, is so unsuitable to me that it pretty much made me decide not to get it after all. However I must clarify that it's not the looks that I'm uncomfortable with, it's the whole interaction and 'usability'. And I'm not even going to engage further in this at this point, so that this won't be misunderstood as ragging his great work or the admittely powerful synth itself.

McLilith has a really valid point, legibility in GUIs is one area that's still lagging behind, compared to otherwise nicely evolving interface design. Font choices, antialiasing, color choices, contrasts, overall looks, there's plenty of areas where people could do more exploration and perhaps find something that's not only more legible but also more aesthetically pleasing. Turned into some kind of an argument recently, it's still clear that a great looking interface (that also happens to be usable, might I add) does inspire the user.

Coming from the world of 'pixelated' design, I'm inclined to say that exploring these 'pixel' designs might give some good ideas regarding font selections, as it's rather easy to find fonts that are designed to look good without antialiasing, and there's a bonus in it too - a lot of fonts designed for small sizes, especially handy when there's limited amount of space to use and plenty of controls and functions to describle. But for me this is a double-edged sword... it really takes some trial and error, as most of the time these sort of typefaces just don't look good on GUIs, biggest issue being of course that the texts are too small.

Jaypee has an excellent point about choosing a paradigm and sticking into it. But then again, he really *knows* what he's talking about. One common 'mistake' from people who haven't studied graphic design is mixing and matching different elements that together don't form a unified, coherent visual entity. And I'm not even talking about little details such as lighting and shadows on controls all rendered like they are lighted from the same source(s).

One good suggestion that springs to mind for everybody interested in the subject, is to google. Check out as many interfaces as possible. See what it is about these interfaces that appeal to you. It shouldn't be hard to find some common nominators after a while. While you're googling, search for graphic design basics, there is a whole world of literature on this subject available. Avoid the web design instructions and the gazillions of "designers'" blogs and you'll find it. Such basic concepts as the grid are still lacking from many GUIs, though using a grid for the layout alone doesn't guarantee results in any direction, it's just one of the basic aids for design after all...

Another excellent point mentioned (though it has been mentioned already) is about GUIs always being a compromise. Nothing else will help in realising this more than studying existing interfaces, seeing how different designers have made their choices in all different areas - control sizes and shapes, colors, texts and so on. Once you do start designing something yourself, remember the most powerful tool you have available, switching resolutions See on your own monitor how big a difference it makes when you view your interface on different resolutions. Better yet if you have access to a couple of different size monitors. In this regard, GUI design is somewhat similar to web design - you're not designing for any particular screen size (at least if you know your trade), so that better be one of the rules to follow straight from the beginning.

One often overlook area in GUI design that Bones often mentions is how controls are grouped. It also happens to be under the ubiquitous 'form follows function' to a degree. It never hurts if the layout and the way controls are grouped reflects the signal flow in an instrument. Using colors on the controls and colored areas or shapes in the background can clarify things even further. Visually separating different blocks or groups each relating to a certain part in the signal flow is one of those concepts that should never be overlooked. Using some empty space to emphasize this always works - naturally only as long as the empty space doesn't take too much screen estate.

So far all this is of course rather basic stuff. At least it should be. And it goes without saying but I still have to say it anyways, rules are never set in stone. Using them as guidelines to your designs however are

Hopefully there's something useful in this post, I still feel somewhat ashamed from the earlier pages...

Regards,

JMH

[Lunch Money]

Heh,

Some of your GUIs aren't my favourites.

No problem ... as long as the others are

Dammit, this was the line I edited out because I didn't mean it to sound bad... are you sure you're allowed to quote an edited-out line?

Greg

[jaypee]

Dammit, this was the line I edited out because I didn't mean it to sound bad... are you sure you're allowed to quote an edited-out line?

Don't mind, it didn't. That's exactly what I was talking about, everybody is (of course) entitled to his own opinion.

/jp

[jaypee]

*snip*

as Z3t4 is one of those pieces of software that has loyal following and plenty of respect which might pose a problem later on, as I for one would like to use it as an example of an interface that on one level is pleasing to the eye but on another level, is so unsuitable to me that it pretty much made me decide not to get it after all. However I must clarify that it's not the looks that I'm uncomfortable with, it's the whole interaction and 'usability'. And I'm not even going to engage further in this at this point, so that this won't be misunderstood as ragging his great work or the admittely powerful synth itself.

You see, this is exactly what I meant: If you feel it doesn't work for you, you aren't forced to buy it really, and at the same time the developer is still free to go ahead with his concept.

*snip*
One good suggestion that springs to mind for everybody interested in the subject, is to google. Check out as many interfaces as possible.

Exactly - "learn from the masters" ... that has been true for centuries and it will most probably remain true for a couple more. Copying masterworks was a common method to teach art students to understand the masters' techniques, and although it may sound fishy, it's all about acquiring the knowledge and provide you with the freedom of chosing what works best for you.

Once you do start designing something yourself, remember the most powerful tool you have available, switching resolutions See on your own monitor how big a difference it makes when you view your interface on different resolutions. Better yet if you have access to a couple of different size monitors. In this regard, GUI design is somewhat similar to web design - you're not designing for any particular screen size (at least if you know your trade), so that better be one of the rules to follow straight from the beginning.

If I may add one: Size and resolution are not the only 'deliberate' parameters when it gets to the on-screen representation. Different OS'ses use different gamma defaults for monitors (=different representations of colours, and more important of brightness values). What will look right on a PC will look way too bright on a Mac. If it looks plain great on the Mac, it will appear too dark on the PC ...
So, if your app will be cross-platform, you have to switch your calibration in the process to make sure the GUI works well enough on the targetted systems. There are freeware tools out there which allow to switch gamma correction settings with a shortcut on your kb - very handy.

The other points you mentionned (grid, representing the signal chain etc.) are very important also. Actually, they should stand at the very beginning of the layout process, so one thing which is extremely time-saving is to do scribbles on paper before you launch the mighty 3d soft or image editor ... don't mind a crappy look, don't elaborate - if the pencil gets smeared all over the place, new piece of paper, next version. It's not even about getting the look done, but to get aware of what should go where, what types of controls to use and so on. And at the same time it is a good training to visualize things with minimum effort. After all, stylish effects are the icing, but there's hardly anything appearing more amateurish then 20 different photoshop effects and filters applied to a weak concept.

Cheers,
/jp

[amoebe]

Exactly - "learn from the masters"

Which brings me to another point: will your site ever (temporarily?) be available again.

@McLilith: If you think the smudge skin is acceptable considering lighting/contrast/blurryness, then I fully agree with all initial points you made. I wouldn't go further than that (unless people ask me to ). I also agree with jmh and jaypee about compromises in design and sticking to a concept, which was more or less the point I was trying to make.

I think that's enough agreement for one day.

[nBeat]

Aah, time for me to join in too.

...so one thing which is extremely time-saving is to do scribbles on paper before you launch the mighty 3d soft or image editor ... don't mind a crappy look, don't elaborate - if the pencil gets smeared all over the place, new piece of paper, next version. It's not even about getting the look done, but to get aware of what should go where, what types of controls to use and so on. And at the same time it is a good training to visualize things with minimum effort.

I totally agree on that.
Don't know how many tons of paper I've used over the years...

Visually separating different blocks or groups each relating to a certain part in the signal flow is one of those concepts that should never be overlooked. Using some empty space to emphasize this always works - naturally only as long as the empty space doesn't take too much screen estate.

Agree there too.
But obviously a delicate matter.
The common opinion it seems is that an empty space
is unnecessary and should be avoided.
Like:
"Why not reduce the size of the skin instead and get rid of these wasted areas?"
Sounds familiar ?

Anyway.
Interesting thread this.
Hey, we should have a forum of our own here at KvR.