Search Unity

Feedback Need more UI feedback on type differences

Discussion in 'Visual Effect Graph' started by Livealot, Feb 10, 2021.

  1. Livealot

    Livealot

    Joined:
    Sep 2, 2013
    Posts:
    228
    Sometimes my graphs start operating oddly and it's hard to figure out why. Often, the reason is some mismatch of types that flow through the graph.

    Here's an example... VFXbranchClarity.JPG

    At a glance, it seems that the color for both outputs should be the same. There's a single bool toggle feeding two Branch blocks with one color for true and a second color for false.

    If you peer into the greyed out values in each Set Color block, you'll see differences. And if you explode the Branch blocks, and examine settings, you'd see that one block is set for Color and the other is set for Float. Those differences are pretty hard to notice on the same graph, and pretty much impossible to compare in similar systems across graphs.

    While it seems that the color of the line is used to represent some difference, its way too vague.

    Some suggestions:
    1. Don't allow square pegs to go in round holes. I'm not sure why a float was allowed to be connected to a Set Color block in the first place
    2. Assuming there's a valid reason for #1, provide UI context at the point of connection based on the type match
      • Current UI for a valid, expected match
      • Yellow Warning Exclamation for a valid, unexpected match (like the example)
      • Red X for an invalid connection. While preventing is ideal, it's also possible to change the upstream type after a valid connection is made. I think it would be better to show a connection that was broken rather than just removing the connection.
    3. Rollover UI over the warning symbol to get context help message (e.g., Are you sure you want to feed a float input to a color field?)
    4. Consistent UI schema for each type at all levels of compression. To make my example above clear, I collapsed each Branch block completely. If you expand a level, the branch block set to Color is visually wider than the branch block set to Float, which helps. I'd suggest more visual difference than that, and make sure it's different at all levels.
     
    Livealot, Feb 10, 2021
    #1

  2. VladVNeykov

    VladVNeykov

    Unity Technologies

    Joined:
    Sep 16, 2016
    Posts:
    550
    Hey @Livealot ,

    Thanks for the feedback!

    Yes, the inputs/output slots and edge colors indicate data types:


    When there's a mix of data types, the edge changes color from the output of one to the type it's cast to in the input of another:


    Lots of operations within the VFX Graph rely on casting one type to another. For example, here's a shorthand way of setting a symmetric random velocity across all axes with just one input:


    Here is another example with color where you may want to set a pre-defined color and then with some logic control it's intensity.


    The color coding of inputs/outputs and edges is trying to address this. The other suggestions with warnings/errors imply an incorrect workflow, which is not the case.

    Invalid connections are in general not allowed. There are a few edge cases we are aware off (like trying to set a mesh or texture per-particle) for which indeed we plan to provide some in-editor error feedback like you suggested.

    Once graphs become very complex (you can check out the graphs for the VFX character from Unity's "The Heretic" short), smaller collapsed states become very much desirable. It's a consistent behavior with all collapsed types:


    Wanted to share a bit of context to explain the method behind our madness :)
    Thanks again for taking the time to share your feedback!
     

    Attached Files:

    VladVNeykov, Feb 12, 2021
    #2
    Livealot and florianhanke like this.

  3. Livealot

    Livealot

    Joined:
    Sep 2, 2013
    Posts:
    228
    Great context and examples for the current UI @vladimirneykov

    My feedback on the current UI is that the subtle line color technique is effectively an invisible UI, especially when collapsed. I'm sure there are lots of UI techniques to make those differences more clear. Many UI designers will also test their designs in greyscale to make sure that the design is effective for a wide range of users.

    As Unity moves towards more visual scripting, this is less of a VFXgraph challenge and more of an Editor wide challenge to provide effective, consistent UI

    Keep up the madness! This stuff is great!
     
    Livealot, Feb 12, 2021
    #3
    VladVNeykov likes this.