New Editor Theme

Many thanks for the fast updates!

I'm genuinely curious: what's so wrong with the current font that requires a change so hard? I can't barely see a difference, and Lucida Grande actually works pretty good in all OSes and DPIs.

Additionally, I'd suggest the option in Preferences for choosing the desired Editor font, even if it's just a choice between Lucida Grande y Roboto.

Oh, and I'd also suggest you to test the new UI in non-hDPI setups first (and share the screenshots)

 

Hi,

I have one request that I wish would be default in Unity.
Can you make the label justify to the right ? it is so much easier on the eyes to make connection with the "label" and the "form" element.

(also if TABing inside the inspector could not select labels, that would save some time)

Here is a quick mockup of the design you posted to see the difference:

 

Looks cool, but i believe you can make it a lot better, like a small arrow down for dropdowns etc. Take a look at Ableton Live, they nailed the flat design.

 

OK, sorry, but...I'm afraid this is exactly what I'm complaining about. Change for the sake of change, not to improve anything. But if you insist on changing it anyway for some reason, the replacement should be at least as good, and should work on retina/non-retina displays equally well. (So, I assume the next update will be using Papyrus. )

Hmm, nah, as someone unfamiliar with that app, I still can't really tell for sure what's informational and what's interact-able. Why not just make it obvious? What's the point in obscuring functionality?

--Eric

 

2560x1440 (Alienware 17" laptop).
Everything is too small (just compare to the Assetstore web insert). I can't even see what I'm doing after 5 minutes despite the fact that I have 20/20 vision at the age of 42.

 

This could probably alleviate the problem, would love to test it out.
Can the font go to 13 maybe ?

 

What about having an option to switch between these fonts in the new Settings window and maybe even having an option to add custom fonts?

 

What I'm going to show below isn't new to Unity 2019, but I wonder if it makes sense that the highlighted buttons in the image below get represented using an actual button style.

At the moment, also prior 2019, they appear as icons only, but they're clickable. Unlike the component icon, which looks the same, but isn't clickable.

Would it be from advantage, for readability and consistency, if these "icon only buttons" also get a typical button style?



EDIT: Would it be possible that you include a mono-space font in the editor as well? As an extension developer, this would be very useful for me, so I and many other publishers don't have to bundle different mono-space fonts with their tools.

 

Good idea. I never noticed this, but it's a clear improvement. The only issue I can see with this, is that indentations wouldn't be as obvious e.g. if you have an array of structs and expand some elements.

In Xcode's inspector the labels are also right aligned.

 

Although it looks more like this on recent versions:



It's a little bit of a step back in usability compared to your screenshot, but an improvement over the proposed Unity design.

Design like this is better: more contrast, more differentiation:

Basically, do that and I won't complain. (Well, I'll complain less. )

--Eric

 

Thank you so much! Of course, we are all on the same boat here

 

Feedback:
Please stop changing things just for the sake of it. I cant think of a worse practise for a company of your size and reach to be implementing.


On a seperate note:
Also, why in 2018/2019 are you still the only program to offer a dark theme as "paid".

I work with pro at work and free at home, and because of the RSI from the free version theme I end up using unity far less.

I would love to invest in a pro sub to undertake home development more often, but I honestly am unwilling to give you money simply for a theme. I would be far more likely to subscribe if you didnt have this quite frankly ridiculous, outdated and "elitist" behaviour (your not paying, you can have RSI then for your eyes until you do...) within unity after years of it.


Really want to update your UI? Follow the trend of every other competitor and give a non-RSI inducing theme to free users.


@jonathans42 I cant believe I still have to mention this in a year we are developing flying cars, have AR glasses in abundance and have developing world entering space flight.

 

Take it easy man, they're a small indie company, valued at only 3 bil, they gotta make a living

 

Do you have any goals whatsoever? I still don't understand what you're trying to achieve. What are the metrics for "this redesign was a success"?

You probably have some very good reasons for doing all of this and some plans for where you're going, but the communication right now isn't instilling any confidence in that.

 

I've got to say.. I've went through an eye surgery and every thing is SUPER BRIGHT and SUPER TINY on my 2K monitors that's makes my eyes burn like hell when working on Unity.

 

So a little bit more detailed:

- It would be great if you provide a font-size slider in the settings (you're developing an XHTML-based UI after all, it's easy to do)
- feel free to add more spacing vertically (see the hierarchy box, the top-right buttons under each other), small buttons cluttered in a very small region, it's easy to misclick
- please adjust the background of the asset store (also the search bar) inside the dark skin editor, it's too much contrast to work with
- I think the bold and the normal characters should be more separate (although it's possible that it's the result of the very small font size)
- please make the buttons distinct (inspector), the Add Component button is almost the same as the input boxes, the rounded corners are not enough distinction, especially if you have inline buttons (for example draw borders for buttons only even in the not hovered state)
- please make the small top-right buttons more visible when hover and add tooltip to all of them
- Also add some verttical spacing in the inspector window (between element rows and especially between the title and the first row)
- I would make the toolbars (in the game, scene and asset store windows for sure) auto-hidden (which means it shows itself only when you're hovering over the window, in this case, they can be a little bit taller than now and it would lower the visual clutter when it is not needed
- the console icons look like very bad (revisit the resolution of these icons)
- the console text should be considerably bigger (bigger than the other parts of the UI -> it is error or warning message-space, it's very important)
- the console's toolbar also needs vertical space and some separation from the other windows/content

Otherwise I really like where this is going! I'm really big fan of the flat designs and it's easier to use (less visual clutter) when it's done perfectly.

Just subscribe for the Plus. You don't need Pro just for this. And you don't pay only for the skin, you also pay for the excellent engine as well.

 

I modified your most recent update a little more. The input boxes still looked like clickable buttons as well as a few others, here's what I did

• Darkened the panel with all the parameters but kept the 'title' bar lighter to help break up the sections
• Adjusted the spacing of each parameter to be evenly spaced (it could probably be spaced a little more, but right now the padding between places like Color, Indirect Mult and Shadow Type, etc just seems to take up too much need space
• I left the buttons light (which pop more off the darker BG) but also made the input boxes (and drag and drop sections) have a darker BG. Allowing the buttons and dropdowns stand out more
• Made Realtime Shadow section, a sub section, have an even darker BG and made the settings collapsible. This, I think, helps break specific settings up into its own area a bit more
• Made the checkboxes the same height as the input boxes... they're too small and hard to click sometimes. Making it the size of an input box will even out the spacing and make it easier to click
• Replaced the dropdown arrows to just one larger arrow. Everyone's talking about things being too small... one large arrow is easier to see than two small ones
• Added an Icon on the Add Component button. Since Dropdowns and Buttons are the same color, having buttons include icons with centered text/alignment could help them stand out.
• Also changed the Static arrow to use the same as the dropdowns, since it is in fact a dropdown too.

Edit: Before I did the edit above, I was editing the image from the first page. Here was some additional tests I was playing with, just want to share in case someone likes an idea from it.

• Modified parameters have an additional blue line on the left of the parameter itself instead of just the left side of the inspector. I love the inclusion of the blue line, this was just an idea to make your eyes scan it even faster
• Skin the dropdowns as well

Also:

2018 > 2019 Initial Post > 2019 My Edit

 

It came up several times, that the buttons in a windows' top-right corner are difficult to click. Here is an idea, where all buttons are placed on the same a row. It allows to make those buttons bigger.

Before


After

 

is this new ui system much heavier to use?
since it seems to do much more, compared to old system when checked with profiler
(below is profiler view when opening/maximizing material , couldnt actually fit whole tree..)

 

Lots of great enhancements in your mockup. The modification marker really does make it easier to notice. I'm not sure about the color though, blue is reserved to highlight the focused element.

I played around with different colors, see below. The first one is blue, because the element has the focus.





... and here without the modification marker picking up the focus color.





With these modification markers, perhaps it's also not needed anymore to display the text in bold?

 

2019.1 seems to run slower than earlier versions. See this post, where another user reported it:
https://forum.unity.com/threads/new-editor-theme.564484/#post-3752386

 

preview box text unreadable with those colors

new


old

 

I agree the way Unity formats lists of labels is not ideal in terms of readability. However, justifying them to the right is not ideal either because our brains are trained from a lifetime of reading to instinctively look for text to be justified on the left.

The way with best readability in my opinion is to have the labels justified to the left but with trailing dots to connect the label to the field. Cinema 4D for example does it this way.

 

Yes, that is so much better already. Looking forward to the next update!

 

Yeah, except for Arabic, Chinese, Korean and many more. Also it's only partially true for text paragraphs(!), not input elements and tables.
In ToCs you don't have dots or lines because your brain trained for the left-aligned text, they're there because they make vertical alignment of your vision a little bit easier. But they're only in ToCs and other rarely used spaces because of the visual clutter.

And with a bit bigger fonts and a bit more padding around rows and input boxes it will be more usable, no need for more visual noise.

 

Hey, I dunno if it's the right place to ask, but is it possible to disable the newest dpi scaling behaviour for the editor at all? After Unity 2018.2 it is impossible for me to work in the Editor (and testing all the great new features .2 and .3 brings to the table) because the scaling now works differently and it's no longer possible to disable the scaling behaviour for the Editor like it was possible to do in the previous versions

More info in this thread

And I also filed a feature request for this here

 

Looks much better but is this taken on a 1920x1080 resolution ? That's what I believe most folks work with. From your picture it's not clear what's your desktop resolution. The pic is 1292x722.

And can it be changed to size 11+ as someone from unity hinted ?

 

I thought it was obvious but just for clarification I was talking about for the English version of the UI.

The image I posted was in reply to several posts earlier in the thread such as the one posted by Ziboo. It would probably be better to show it as a comparison of the different ways that were suggested. The first is the way it is now, the second is the suggestion by Ziboo, and the third is my suggestion.

I don't know if there is any way to scientifically determine what the majority would prefer but I've noticed I find the third way the most readable in other apps I use.

 

I have never seen (or it's possible that I don't remember) an app which used this kind of thing. Could you please give me some ideas, which apps you use which uses dots or lines to connect labels and input boxes in order to make it more readable?

BTW, definitely labels should be aligned to the left without any visible lines or dots.

 

Interesting idea. It does help, they kind of act like breadcrumbs to find the path back to the left-side label.

I find the color stands out too much in your mockup. I created another one (based on this one), where the breadcrumbs are more subtle, yet still visible to notice.

Not sure if it's good or too much though.



... and here is one using lines instead.

Spoiler

 

Cinema 4D. The dots are darker than the text, though. Imho it looks kinda pleasing this way... but I guess it all boils down to personal preference.

Text being aligned to the right is used in Autodesk's Maya (screenshot, from What’s new in Maya 2018), for example.

 

Yeah, he indicated that he has multiple applications he's using with this. Honestly, I don't use C4D, so I have no first hand experience with it, but I've never seen any other applications to show this kind of thing.
I have looked up some screenshots, IDK, I don't like it at first sight, but IDK if I can get used to it, probably would, although it's not the same as he did above, not even close.

Yeah, I know Maya, I used it a couple of times. Also 3DMax and the old 3DS and Blender, and various Programming tools with 'properties' window.
The best so far is the table layout with subtle cell borders I think. Although I don't think Unity will do that.

The second best option is to implement hover behavior (something like that left hand side vertical line when hovering), even if people hovering over the input field, show the left line next to the label.

The problem with the align to the right label is that it makes the label less readable. Because of the varying left letter. All the programs which does the right alignment are either one-time forms (registration or such) or build on muscle memory (which means after you're used to it, you won't really read the labels anymore).
Now, this does not really apply to Unity. And the reason is, you're using a lot of plugins and assets from the store, all different with different inspectors, so we're not talking about a known set of property windows, we're talking about a varying window with any content. This is why I think the best option is to left align the label and left align the input boxes (preferably without visual clutter between them).
So my vote is on @Peter77 's mockup.

 

Yeah, the left blue modified line is what's being used already, I actually don't mind it, though. It doesn't interfere with the focused highlight as it's off to the left.

Just captured this and differentiating between what's been modified and what I have selected seems pretty clear. The bold may not be needed anymore, but I think it's just another way of notifying it's been modified, which doesn't hurt.

 

Rather than tweak these styles internally based on arbitrary bits of subjective feedback, have you considered exposing them (and their associated hard-coded spacing values) so the editor UI becomes more flexible altogether? A way for the user to "theme" the editor, if you will.

 

random small things,

material icon doesn't really give much idea that it means "material"

and icon is not visible when selected



shader and script icons are too similar (old version had clear difference),
also sh sounds more like linux shell script..

 

I'm generally a fan of a cleaner flattened UI. However, the font made this a non-starter for me. Tried on both my systems (a Macbook Pro 15" and 34" desktop widescreen monitor) and the text was close to unusable on both. In contrast the older design certainly looks a little more "clunky" but is completely readable.

The other items mentioned which I very much agree with:

1. The breaks between components/sections in the inspector are too subtle now. There's no reason it can't be "flat" and clear, right?

2. It seems like a lot of the inspector visual "clutter" feeling comes from having next to no negative space. This is a utilitarian area to be sure - it's not going to win the beauty contest - but the feeling of clutter is my biggest problem with it - and that also runs somewhat antithetical to a clean, modern design IMO.

In any case - I don't mean to be all negative. The direction of a modern, clean, flat UI is very appealing to me... I just hope the usability doesn't regress because of it.

 

I've checked the 2019.1a4 against our internal tools (and the ones we have on the UAS); here're my "2 cents" apart from what has been said before (buttons, font issues in general):

- We have some bold headings that just look terrible (and are even full black on the regular, free theme:

- The disabled state almost looks like the normal components do - there's almost no distinction
- The toolbar gradient is missing which adds no visual break between elements. we've used it as a the background for som headings, which now just looks out of place.
- The new scrollbar could be a few pixels smaller, just looks a tad too wide.

I like that unity tries to update the UI of their editor, but this is not even a step forward and adds no visual value, in fact it now makes it look like "it has no life" (quote of a team member).

 

So I am saying this from the perspective of someone with PSE (Photosensitive epilepsy). The change in brightness of the light theme is not healthy for people with seizures. I literally had to stop using Unity because I felt like I was about to puke. People have complained about the brightness of the UI and not giving free users the ability to use Dark Theme and now you guys make the Light Theme worse. Some people ask for dark theme for health concerns such as eyes and seizures. This is not the way to go and a lot of people will agree with me. Please allow free users to have dark theme or revert the color scheme back to the old colors. This is not something to joke about and it can hurt people. Your user base won't be able to look at the light theme as long before having to take a break. Users have asked for dark theme for years. At this point making the theme brighter is a kick in the face of your users and shows you guys are doing the complete opposite of looking at for us, but instead only care about making the dark theme attractive so people would buy a license.

 

background too is actually lighter/brighter.. (new #d1d1d1, old #c2c2c2)


**
cannot see if checkbox is currently selected or not
new


old (has blue border)


**
Lighting window has bigger minimum width now, cannot resize to smaller like before..
(which is annoying if you want to keep inspector narrow, but then lighting tab jumps to its min size when touch the border..)

new min adjustable width


old min adjustable width


**
(not really ui issue..) asset store preview model broken


**
cannot see that small drop down arrow when this toggle is selected (same for Gizmos toggle)