Improve design of Interface and Stateful node indications

  1. Look at interacts with environment node. Wonder why a centimeter of my screen is taken up with huge curved lines.
    • It’s lost any semiotic value it might have had as a compact wi-fi / airport like icon.
    • it’s hugely inefficient space-wise, taking up lots of valuable patching real-estate.
  2. Look at stateful node. Wonder what the meaning of that strange line on the bottom is again.
    • no semiotic value at all.

Suggest working these into compact icons in the title bar. Overall, I think the node design could do a little more work – too big, to start with. Rapidly run out of space on a laptop screen (15" even), and it makes it hard to get an overview of the patch’s workings. If the editor were open source, I might have tried some tweaks myself.

Regarding making tweaks yourself — yesterday I discussed that with @vade on Facebook:

Though we don’t provide source code to the Vuo Editor, we do provide the source code that renders nodes and compositions. You can build from source and run the “vuo-render” command line utility to produce a PDF or PNG of a node or composition. You’d probably be interested in starting with /renderer/ and /renderer/ (And we’d happily accept and review patches!)

We actually use that process for a lot of design prototyping, since it’s a lot faster to just repeat a command in and watch automatically reload the output, than it is to launch the editor and open a composition and then look at the output.

Timing, eh!

I’m not on facebook, and it asks me to log in. Is there any way to see what’s going on there, make it public?

I’ll see what I can do with the code. If I do spend a chunk of my future looking at Vuo compositions, I want that to be nice!

I don’t think Facebook can do that. Grrr. Here’s a PDF of the thread. I’ve also attached @vade’s mockup for posterity.

I asked @vade et al to continue this discussion on (commenting this bug report feature request and filing other bug reports feature requests).  

HAHAHAHHA. Love it. Yep, I’m not on facebook and had completely missed all that discussion. Quite the thread.

In summary, I’m 100% behind @vade’s first comment. Picking on these two here issues was my way of keeping it grounded.

The first pass of what I’d intended to do looks pretty damn similar to @vade’s mockup.

The second pass would have redesigned ports, cords, and collapsed entries too - I really feel if you’re going with this exposure of graph evaluation, you need to design the cues better - I haven’t got it yet in my head, but there’s a trick being missed in, ah, visually ‘grokking’ whats going on.

I had a good look over the node drawing code last night. That’s well within my ability to change. I then read the compile from source instructions, and had a minor panic - I’m writing this floating in a harbour in Sardinia on metered 3G and so away from the desk and such sanities.

Also, I don’t have the time for any of this, but when was that ever not the case =]

Hey Toby,

Just like with your feature request: improving style of nodes and cables — thank you for your thoughtful feedback on this subject. We hope you noticed that we made several changes to the visual design in Vuo 0.6.0, some of which are demonstrated in the release video, and the full details are in the Vuo 0.6.0 release notes. All of your suggestions have been noted and will be used as a reference as we continue to develop and refine Vuo. Since this is more of an ongoing evolution than a specific feature request that can be analyzed and funded, we’re going to table this request. If you have more suggestions or ideas, we’d love to hear them. Going forward, please email us directly with any feedback you might have so we can reference your suggestions in our ongoing plans.  


There has been some discussion of Vuo’s visual design on our Facebook group page lately. I’ve just responded with our latest plans. Since you (and others) are not on Facebook, I’m copying the text of that post here:

I wanted to report back that we’ve attempted to cull the useful ideas that were presented from the previous threads here on Vuo’s visual design. We came up with many concrete suggestions and have spent time trying to understand them and think about what other features we can reschedule in order to mock up and implement these design changes within our timeline for Vuo releases 0.9 and 1.0. I’ll try to summarize what we’re doing with those suggestions:

• Cables and cable paths:
◦ We’re mocking up some new algorithms that would make cables always run horizontally into nodes.
◦ We’re mocking up some variations of the data+event cables being a solid color, or a solid color with an outline.
◦ Option to show linear cables. We made this a feature request (Option to show linear cables) for 16 credits.
◦ Related work: we’re planning on a way to hide some cables, Send and Receive nodes for wirelessly sending data inside a composition (Send and Receive nodes for wirelessly sending data inside a composition.).
◦ Related work: Use option+drag to initiate an event-only cable from a data-and-event output port. Scheduled for work, 0.9.

• Nodes:
◦ Adjust the vertical position of port action triangles. Scheduled for work, 0.9.
◦ Replace the unicode arrow with a triangle to separate the input and output types of a type converter. We will remove the arrow and review.
◦ Change the stateful node indicator. We’re mocking up some variations. Needs to work with any cable changes.
◦ Make node titles smaller. We’re mocking up a node with a title the same size as node class/port labels to see how that might look.
◦ Reduce the stroke width of event barriers. Revisit in the future after other visual design changes have been implemented.
◦ Add option to hide node class names. We made this a feature request (Option to hide node class names) for 16 credits.

• Vuo Editor:
◦ Allow scrolling beyond the composition. Scheduled for for work, 0.9.
◦ Switch to a dark color scheme. We’re investigating how much work it would take to do this, and whether it would be an option or the default. We have a separate feature request, Change Editor window background color and opacity (Change Editor window background color and opacity) that might end up being done in conjunction with this.
◦ Allow attaching some nodes, like “Make 3D Point”, to nodes in the same way that list drawers are attached. Consider after 1.0.

• Vuo Editor behavior:
◦ Two related ideas: Allow designating a trigger port in place of the inserted “Fire on Start” and Fire an event automatically when constant values change. We are investigating making some trigger ports “auto trigger” and enabling automatic cable hookups. These ideas will take some time to coalesce to make sure we increase the Editor’s usability without unintentionally making other things more difficult to do. Stay tuned. Post 1.0.

We also reviewed Pianomatic’s feature request, Cable connection shortcuts and features (Cable connection shortcuts and features), that contained suggestions for visual design changes. We’ve responded to that on