Thoughts on the Blueprint editor's visual design

[ZoltanE]

Recently Unreal Engine 4's new car smell wore off (after a year...) so a few usability issues started to bug me. The one I'd like to address here is the visual design of the blueprint editor.

I think it's way too busy, not good to look at for a longer period of time. Here are a couple of nodes:



Probably by now most us are very familiar with this look so I'd like to point out a few issues:

- Low contrast and high contrast at all the wrong places: The boxes barely stand out from the background, it takes a little extra mental effort to extract them from the surroundings. The super high contrast text feels like an accessibility feature which is tiring to look at, at least for me.

- The icons at the top left corner are unnecessary. I know it's a branch because it's written on it. If nodes had a super mini state, less wide than the node name then an icon could be a valid replacement for the text. However right now they just increase the amount of things on screen without adding new information.

- Radial and linear gradients fading out, glass reflections: Looks fancy but has no practical purpose, only adds clutter.

- That big, transparent OR overlapping other text and the checkboxes, that is just messy.

- The tiny arrow at the right side of input slot circles: Not needed, the left to right flow of blueprints becomes clear in the first 2 minutes, plus the exec slots are clearly indicating that anyway.

- The grid is nice but I really don't need it to be shown this much. It's presence is clearly felt when snapping kicks in during node drag.

I tried fix these issues in the following quick mockup:



A few things to note:
- I kept a gentle gradient on the nodes because that gives the boxes substance/weight but even that could be discarded, I would have no problem with the "sticker" feel.

- The interface use is indicated by the golden text which should stand out even at higher zoom out levels.

- The partial header of the OR operation helps keeping the footprint the same as the original. It looks a bit weird by itself but might be fine if all the operators are like that. Or it could have a thin header and therefore a bit greater height.

- The finer background grid is replaced by dots to indicate that the grid exists. I'm not sure about how strong or faint the more coarse should be, someone might use it to visually structure the node tree. I could even imagine ditching the grid display entirely.

So that's it, let me know what you think.

[Sparven]

A few good points and a few I like with the original better. I'll go through some of the thoughts that came to my mind right of the bat.

Icons - Actually there is a good point I think with the icons on the branch etc. But I really think the f icon for function etc. should be left there as it holds more information about the node through that icon.

Little arrow next to variable inputs - I think this one is actually better with the original as it feels more intuitive that the variable is going in/out even though you still know what it will do in your example.

Your new color scheme - I personally couldn't use your example as my eyes hurts to look at that much bright color to a darker background. My eyes adapt better to the original colors.

The grid - Here I really like yours, it feels great to look at. The current one feels really messy for me.

Some more thoughts - Overall I like the current one better, perhaps as I'm so used to it by now and those colors actually works better for my eyes. But I think Epic really should consider some settings for visuals in blueprints as people really do have different taste and what they feel better working with. I mean just look at all programming IDE´s how many different settings they have for colors and such. So, good point you have brought to light here I think, but for me current one is better as said, but allowing settings to be made in the editor regarding the visuals would be a great thing I think with all the time people spend in the blueprint graphs these days. These are my initial reactions

Edit - Some minor corrections

[Castle]

Anyone else tormented by how the nodes dont fit perfectly on the grid? Yes no?

I like your design a lot.. but if I had one thing it would be to have them actually line up perfectly.

[Jamendxman3]

I will have to agree with you for the OR behind branch, and I would like a way to super-minify nodes, but I think that everything else is perfect the way it is. And if it helps, when you have nodes in a comment box, you can change the comment box color.

[Yun-Kun]

Anyone else tormented by how the nodes dont fit perfectly on the grid? Yes no?

Yes. It's pretty annoying. I'd pay a lot to make them align percectly.

I'd love to be able to customize the color of my nodes. That would make everyone able to choose the best outlook for their eyes.

I believe we can already change the color setup of the wires and variable types but that's it.

Really good insight, thank you. I would definitely turn my node white.

[ZoltanE]

Thank you guys for the feedback, here is a new iteration:



- Light and dark color schemes are indeed a basic requirement at this day and age. They could be pushed toward the extremes a bit further if necessary.

- Inputs and outputs are now pointy, constants are rectangular for consistency.

- Slots are snapped to grid (8x8 px) just as the node dimensions so they should always align.

- Removed bevels and gradients to further simplify the look. Now thickness is implied by the subtle inner shadow.

- The golden "f" indicates a function call. It was placed at the end of the header to keep the front consistent with other nodes. Looks a bit weird so I'm not totally happy with it.

- Variables got a footer color band so they don't look imbalanced.

[Chef_Seth]

This new design absolutely has stronger colors and shapes, I can't help but feel it's a little lacking in the execution though. It seems like the colors could use a little tweaking to find the most appealing versions of them, particularly the yellow on the Switch on Mission State node. The gradients that you have are a little too harsh, maybe give them a little more distance to fade in. If this is a rough draft you probably already know all this and I'm just being redundant, but in case it isn't I'll say it

[Sparven]

Thank you guys for the feedback, here is a new iteration:

Oh, I almost missed the update in this one. The new dark one would fit me very well I think. Great additions to it and it's easy on my eyes!
Great, just wish that Epic would get some options for altering the looks of the Blueprint editor in there.

I do think I have to agree to some extent to Chef_Seth's comment about some of the colors, but that is really small tweeks. Nothing big at all for me at least.

[DatenThielt]

I'm sorry but I still prefer the original. I seem to be able to pull out the individual nodes without any issues at all. But every person has a different eye sight etc.

However I do prefer your grid, and 100% wish the nodes re-sized on a proper global scale rather than local!

[ZoltanE]

Minor tweaks:



I think this is as far as this little experiment can go. Tweaking final colors would need all possible node types laid out in context, in the editor viewport (not too saturated or too bright, yet colors are still easy to distinguish, etc). Also there could be any number of other requirements I've never considered.

It would be great to get some feedback from Epic. If they are open to changes and willing to explain how to change things then I would be happy to do the reskinning, we have the source code after all. But it's probably a rather tedious task so if it won't end up in the binary release then I can't be bothered.

[ItsBenji90]

I'd love to see these layouts as an extra option. Your first version seems very pleasing on the eye.

[RhythmScript]

Some notes on the aesthetics:

Please do not put so much emphasis on white. I like that UE4 has a dark background hue; remember a computer screen is not a piece of paper it's a lightbulb, and bright white and light grey hues are eye-catching in the short-term but in the long term they're extremely difficult on your eyes.

Go back to using rounded nodes for data pins. Using triangular arrows makes them too similar to execution pins and invites confusion where it isn't necessary.

I do like the matte colors (maybe a really gentle gradient to add a sense of depth; I don't like the way your nodes look sunken into the background rather than resting on it) much better than the glass-and-gloss thing we currently have. It's probably cheaper to compute too, and since the blueprint editor is extremely performance-intensive already removing some of that unnecessary graphical flare would probably do wonders. The DISADVANTAGE, however, is that your node layouts make it impossible to see BEHIND the nodes, which is actually a bad thing. Complicated graphs sometimes cannot avoid a few wires running back underneath nodes and the visual clarity of being able to see the wire in those cases trumps the aesthetic unpleasantness.

Your background is better, no two ways about it.

I like the layout of your OR node, too. In fact there are several functions which need that treatment (oh my god the cross product node is completely insane looking. It's like five feet wide for an operation with three pins, all because of the monster-sized text with 15 letters, that's just pointless clutter) because giant letters standing on the node don't really fit with the aesthetic or offer any advantages (it's not like it makes them more visible from a distance, most nodes you use would have to be zoomed-in to read anyway. You can't use the BP editor at any scale but full zoom or maybe one out in my experience; it feels like a leftover choice from a time when it was thought you should be able to read most nodes at a far-zoomed glance).

I also dislike how you've exaggerated beveling changes. It's better for them all to have the same degree of corner rounding, whatever it might be.

[Lindsay Aries]

This is going to sound ludicrous, but I miss the drop shadow between the nodes.

However, I love the matte scheme. Very chic.

EDIT: OMG I just read the post above me and realized why I need the shadow. The wires run under the nodes at times and they cannot be pasted to the background. Oh sweet above commentor, thank you. I was so confused as to why I could not stand looking at nodes integrated into the grid.

[ZoltanE]

remember a computer screen is not a piece of paper it's a lightbulb, and bright white and light grey hues are eye-catching in the short-term but in the long term they're extremely difficult on your eyes.

Depends on the person, the brightness of the surroundings, the brightness of the monitor and so on. A light skin is included in Photoshop, Unity, 3dsMax, Visual Studio, etc. The dark theme is not the best for everyone.

Using triangular arrows makes them too similar to execution pins and invites confusion where it isn't necessary.

I don't think even absolute beginners will be trying to drag a link from a big white slot to a smaller colored one especially with the automatic dimming of incompatible slots.

impossible to see BEHIND the nodes

That is indeed a functionality lost, however consider this: Making every node partially transparent means that they will lose contrast compared to the background and pick up graphical details from there which are not providing any information. That would be degrading the entire design just to support a rare edge case. I don't think that's a good idea especially now that we have the reroute node which allows us to really clean up the node networks and avoid ambiguous crossings.

I also dislike how you've exaggerated beveling changes. It's better for them all to have the same degree of corner rounding, whatever it might be.

Fair point. I think this detail comes down to public appeal so here is a comparison:

[ikifenix]

I like this, but only with awesome shadows!