Download

Thoughts on the Blueprint editor's visual design

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:

3ea2597de0019916f3b941f1f095e1404141042e.png

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:

a11241804e933c09d823d721e08b5aeea82845a4.png

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. :slight_smile:

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 :slight_smile:

Edit - Some minor corrections

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.

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.

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.

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

Clipboard Image (50).png

  • 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.

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

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.

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!

Minor tweaks:

a98f7172492e319a53b50ec2908b30fd6873e5d2.png

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. :slight_smile:

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

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.

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.

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.

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.

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.

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

Clipboard Image (54).png

I like this, but only with awesome shadows!

a6c035d282f28bbdd4e78e0fec18240e.png

basically looks like you are creating the same thing they already have by the time you get your end result, but…

everyone likes something different so…

you should post or ask this thread to be moved to the Feedback section and just ask for editable skins for users.

Personally: I’m all for freedom and variation but I just can’t really see this, sorry. I like the way it is now.

I first time I opened the blueprints up I felt like I had used it before e.g, the way it is set up it look familiar to me and probably most people, I don’t see it sorry, but in saying that I am shore they had several designs before they went with the look they did (any epic staff reading I would love to see what they look like), and I guess a good designer could come up with a alterative view that looks grate, but since you took the time to crate it it will take the time to tell you what I don’t like about it :))

  • your greys are all wrong, the letters don’t stand out enough, remember that people will be looking at it for some time, that would give me headache’s.
  • the red stand out way to much. its to much of a contrast from the gay (it’s to bright). stick to colours that match, e.g UE4 colour all look dusty.
  • there to plain combine that with lines from one node to anther and it would look like a mess every thing just just blend in

just like a new car, the blueprints are a new BMW M3 (it looks new) but if you like look of a 1995 Toyota then why not…

UnrealEd is not candy crush: it’s a tool where clarity and functionality is more important than flashy design elements. To stay with the car example, the Blueprint editor should be a race car and not an limo: no fridge or tv on board, stripped from everything not directly related to reaching the finish line.

You are right, there must be a reason for this current design, the Epic guys are not idiots. I was thinking about it before starting the thread, and figured it is probably the combination of several things:

  • Stress testing the slate UI engine with many visual components like transparency, shadows, gradients.
  • Making the look and feel flashy to attract newcomers, who otherwise might be overwhelmed by the complexity of the editor.
  • After a while the developers got used to the design and even if they are not fully happy with it, it’s considered close enough with a too high cost of changing.

But ultimately it doesn’t matter, we’re here to make things better and I’m ready to do work on the engine if it comes to that.
Change can make one feel uncomfortable but that’s okay. I hope everyone realizes that it’s not about forcing a personal preference onto the community. The point is having a collaborative process on polishing the user experience aspects of the editor. Exchanging opposing views, supporting arguments with facts, researching existing solutions and so on.
If you are fine with it then that’s alright, you shouldn’t worry, you won’t end up with a worse tool. At least I can’t imagine someone going “BP is broken now the nodes don’t have drop shadow and rounded corners, not to mention the terrible text indentation!” :slight_smile:

Anway let me address your concerns:

The contrast of 3:1 is the minimum, comfortable reading for healthy people. With a 20/80 eyesight the recommended contrast is 7:1. The current design has 7.87:1 in the node body and 4:1-10.1 in the headers. The Or and Branch node headers could indeed use some more contrast to aid visually impaired users. (Of course actual readability also depends on text size. Read more, contrast calculator.)

In which color scheme? The brightness of headers is 50% in both, only saturation differs. Would you prefer a more pastel color scheme?

I’m not sure what you mean. I guess I should make a proper, linked node network mockup next to get closer to a real life example.

As I said, what I don’t like about it, not what is the minimum levels are, just my humble personal opinion. but yes a more pastel. I guess when you look at the UE4 nodes one of them stand out more so than the other with in reason. the little things like that are very effective. so when your looking at a large blueprint your eyes are not constantly drawn to a particular node / nodes,

I disagree. it still need to look good and feel polished or people will more onto a similar product that looks and feels better, human nature suggest that people will always choses the better looking over the ugly

but I guess what could come out of this is having the ability to have more customized looks, if you like a colour explosion or something completely different then why not,

If you really wanted to do this, you could submit a patch to the UE4 github and have it applied so people get the option.

But honestly I don’t see why you need to break the aesthetic so much. The brighter colours just look ugly to me on the dark background. If you really need to do a color scheme change then go the ways of Visual Studio or similar and change everything. Not just the nodes.

Aesthetic is important but I feel that in this topic it’s glanced over. If there is no overall aesthetic to the color scheme it just feels confusing and unprofessional. All people are superficial on some level, this cannot be denied. It’s in human nature. If we don’t have something pretty to look at, we have to teach our brain to get used to it and that’s more effort put into it with too little a return to justify it. I’ve never had an issue with what the Blueprint Editor looks like because it follows the aesthetic of the Material Editor and all other Editors that are in the Unreal Editor. Don’t you think you just want a general color scheme change as opposed to just the blueprints? It seems that would be a better place to focus than just Blueprints.