Vuo redesign - Nodes

I thought that the bottom bar denoted a state full node. One that stores data somehow to use. Such as Enque etc...

I REALLY like the newest design above! Well done Bodysoulspirit!

Jaymie because I know Team Vuo has thought through everything- what was the original purpose for telling apart stateful / stateless? Currently I use it just to know what the node is doing (it remembers some value) but is there a better way to use it? You mention that many nodes were updated to stateful for performance reasons- so has it kind of lost its original meaning? The other thing is that if someone is really interested in what the node is doing- they can check out the source! ;-).

Maybe it would be better as I said before to place a symbol for stateless nodes?

After looking at the last design more- I think something needs to be done with the event triangle? (Don't know what though!)

Bodysoulspirit have you though of designing a matching UI set (for use within the new UI Node?). I really like your simple clean design!

Bodysoulspirit, I appreciate all the effort you've put into this, particularly in trying out mockups with different parameters.

I have what may be a naive question (I am not a designer): In UI design, how does one find a balance between the appeal of harmonizing the visual appearance of parts vs. the cognitive load of identifying the differing functionalities of parts? This has come up in some of the debate over flat design. In terms of Vuo, I wonder, for example, to what extent event-only ports should be differentiated from data-and-event ports. Is there any way to tell in advance if changing event-only ports from a triangular outline to a circular outline would help or hinder usability? Are there UI design principles that guide such decisions, or does it have to be decided by usability testing?

what was the original purpose for telling apart stateful / stateless?

alexmitchellmus, the stateful indicator was part of a larger effort toward being able to "read" a composition's functionality entirely from the canvas so that you could tell exactly how it would work without having to go hunting for hidden settings. Some parts of that effort worked great and we've kept them around, e.g. displaying constant values on canvas. Other parts did not work so well, based on the feedback we got about "visual clutter", so we eliminated them and no longer have a strict every-setting-is-visible paradigm.

Currently I use it just to know what the node is doing (it remembers some value) but is there a better way to use it?

Not that I know of. That information is also in the node documentation.

You mention that many nodes were updated to stateful for performance reasons- so has it kind of lost its original meaning?

Yeah.

I have what may be a naive question (I am not a designer): In UI design, how does one find a balance between the appeal of harmonizing the visual appearance of parts vs. the cognitive load of identifying the differing functionalities of parts? This has come up in some of the debate over flat design. In terms of Vuo, I wonder, for example, to what extent event-only ports should be differentiated from data-and-event ports. Is there any way to tell in advance if changing event-only ports from a triangular outline to a circular outline would help or hinder usability? Are there UI design principles that guide such decisions, or does it have to be decided by usability testing?

There's no one particular principle i can think of which adjudicates on this matter, and even if there were, design has many manifestos and philosophies around how function and aesthetics should be done. I guess that's what makes design interesting. In Architecture people have spent their whole lives developing concepts around the fusion and/or disruption of functional, cultural and aesthetic needs/traditions/principles.

One of the better known design schools of thought in the digital world is the 20s/30s German Bauhaus school of early modernist design synonymous with minimalism and and the industrial aesthetic. In this school, less is certainly more (an ideal of Mies Van De Rohe the third and final Bauhaus director ). But that less is often an excess of materialist delight, extreme engineering feats (big column spans, mullion thinness, big glazing dimensions, self-supporting circular staircases –> SJ etc etc) and luxury, not an interest in efficiency per se. Or, paradoxically, even functional effectiveness much of the time. When we talk of reading a design, it has a specific meaning in Visual Programming, as we're actually trying to read the code (not read it for beauty or semiotic delight) and what for one person might be a 'linguistic aid' to parsing the composition will for another person be clutter. Just as there are many coding styles in text programming although most agree spaghetti code is bad, which QC and Vuo can start to appear like without macros/sub-compositions and a sense of flow and order in the layout. People like Jonny Ives, Jobs etc first received Bauhaus through objects like the Braun calculator and the Dieter Rams catalog has become something of a temple of design sense at Apple and elsewhere because of it. Of course in the Architecture world things have well moved on from Bauhaus/minimalism completely (rejected in 80s for it's coldness and banality in the hands of the many) but it's still going strong in ITC (and graphic design more generally to some extent.)

So with that little historical interlude, i'd suggest that it really depends on your perspective, but I want a UI/UX to work nice (functionality is fluid and somewhat anticipatory of my needs during interaction events), look nice (just as attractive to the non-user as the user would be a good starting benchmark), behave nice (no gotchas and over-sensitivities or peculiar hangups (persistent datatype locking for example on Share Value node with no visual cue as to the datatype mode it is in)) more so than I want to get more on the screen or follow some in-principle overarching style rule or dictate.

To me using more screen real-estate to do things nicely is okay, and that's often the trade-off often comes down to — Jaymie mentioned it above. I don't want wasted space, but i don't consider nice design a waste of space. I'd love to see QC style macros or (double clickable) local sub-compositions that behave just like they do in QC to solve space and readability issues first up. Is that a feature request yet, because I made a presentation on it for Vuo that i'd be happy to post for a discussion start point?

Nice discussion. I think good visual design is well worth the effort.

Bodysoulspirit, I appreciate all the iterations! I think your last version is getting somewhere (smaller ports, less roundness, better use of space, smaller is still better, imho....) I'm sympathetic to your style -- I'm a fan of Benetton/Colors magazine, of Swiss Style, contemporary design in general. I can't think of anything skeuomorphic I like offhand, I'm sure there's something....

I think Jaymie takes it to the heart of the matter:

In UI design, how does one find a balance between the appeal of harmonizing the visual appearance of parts vs. the cognitive load of identifying the differing functionalities of parts.

With this in mind, I think I would not go all the way to flat design for Vuo (or rounded everything). This is the classic form follows function concept.

Space
I think well-handled spatial cues can help the "cognitive load" -- things to separate parts, color (of course), as well as other elements like stroke/outline, texture, gradient, shadow (with restraint!). Admittedly, I usually like some well-conceived use of "space" in design, usually balancing 2D and 3D, sometimes 4D, too (ie, space + time). (Resolving the design "space" issue is often a tough problem, but that's another discussion. In short: feeling space gives me joy).

There's a piece of audio software called Plogue Bidule I still appreciate for it's minimal visual approach to node based stuff. It uses two things worth mentioning (well, three): a tiny outline around nodes, and a gentle gradient top to bottom (and the gray/blue easy on the eye default palette). I think these subtle elements help. (This software is maybe 15 years old, btw.)

Regarding color --
I'd like to see Alastair 's idea for colored cables to help the spaghetti factor. Sounds promising.
I'd make the difference between the oranges and greens currently in Vuo more obvious.
I'd vote for an agreed upon node set palette (4 or 5 more colors?), then customizable palette for users (ie, OS color picker).

Yep, I love Bidule! I cut my teeth on node based stuff in Bidule. My path: Bidule --> Quartz Composer --> Vuo. Bidule is a great tool, props to the devs, Plogue Art et Technologie, in Montreal.

Cool FR, Alastair. (<-- how do I get rid of the space between "useful" and "design"? I don't type it this way....)

I should clarify about the Bidule reference -- I was trying to give an example of something that is not flat design, something I have found effective where the nodes have an outline and a gradient (and an easy on the eyes color scheme) that helps the user by creating a bit of perceptual space. This is not a new idea -- come to think of it, the last version of the QC editor used these concepts (and the change in design probably made some unhappy).

I would not necessarily suggest a minimal approach for Vuo -- it's not appropriate for the tool. I'm all for "form follows function", which I think is at the heart of Jaymie's post.

You do bring up a good point with your 80's synth example -- when you get to know a tool you need less visual cues. Your scripting FR might allow us to make minimal setups to save screen space.

I also think that if/when a change happens that it would reflect in some ways a re-booting of the Vuo brand. Just like OS X's iOS style re-vamp, from then on all screenshots will look different, and older screenshots will be dated.

Taking and sharing screenshots is very important, because it is a universal way to share the power of the software- and the way in which it looks and functions. Just check out the 'screenshot' gallery in many software projects.

People don't even need a Mac to see how it works. That's also why Bodysoulspirit's mock up is great! :-)