Feedback UI Builder has very flawed UX

(WARNING: This thread is a gripe dump. Please be aware that in spite of all this, I think UI Builder is a cool tool, and actually a lot of fun to use.)

Trying out the UI Builder for the first time. I don't know HTML or CSS, so this tool is practically essential for me. With that in mind, here are my gripes, in order of discovery:

• The tooltips are practically worthless! Mousing over a button or property in the Inspector gives me only its HTML/CSS identifier thing--no description of what the button does or what the property is used for.
• In the Inspector sidebar, clicking the label of a bool will toggle the bool! This is completely different from the main Unity inspector, where single-clicking a label selects that label and never does anything else.
• [MINOR] Color boxes are counterintuitive. When unset, they appear black, which led to confusion before I understood the set/unset property system, and makes it hard to tell at a glance which boxes are unset vs which are actually colored black. If possible, a better indicator for "unset color" would be a white box with a red slash across it, as is standard in Photoshop, Illustrator, etc.
• Trying to position my elements and...what the heck does "initial" mean? The docs don't mention it; the tooltips are useless, as I've mentioned. Discoverability here is beyond lacking.
• This is just to say, but isn't there any way to indicate directly in the UI that ListView can only be populated via script?
• [MINOR] Element size contains the foldout "Min - Max." Its contents are listed in the order "Max, Min."
• CSS selector naming. Why is a graphical editor, which is meant to abstract away the language behind it, expecting me to know the difference between

  Toolshelf

  and

  .Toolshelf

  (note the dot)? I should just have to check a box that says "make this selector be like such-and-such," and let the program work out the dot/no-dot logic behind the scenes.
• Trying to add CSS selectors to an element...and I have to type the name in manually?! With no autocomplete?! No picking from a list, no dragging selectors from the StyleSheets view.... This is a GUI, for Pete's sake! Not a command line tool!!
  • The experience I had is: see text field hanging above Create New Selector, looking very much like a searchbar and just vaguely named "Selector" > ignore Selector field, because it's probably not what I want > click Create New Selector > get redirected to Selector field > enter selector name > press Enter (or click Create New Selector) > done.
  • A more pleasant experience for this button might be to click Create New Selector > new selector gets created, with its name already selected for renaming > rename > done.
  • A more Unity-like experience would be to crib from the Add Component menu that gets used when inspecting GameObjects. Click Create New Selector > entire inspector slides over to a new page with a text field > enter selector name > press Enter (or click Create) > done.
    
  • Either one of these would be a huge improvement. What's there is usable, but it doesn't fit in with a professional app like Unity--it feels like a careless hack, and that little bit of dissonance with the rest of the program really drags it down.
• [MINOR] On the note of renaming things, click renaming in the UI builder works in "the wrong way" (an atypical way).
  • Standard way to initialize a rename in Unity (and the rest of Windows) is "select something then click on it".
  • UI builder has it as "double click on something."
  • Having it that way really screws with muscle memory because in the normal way, it doesn't matter how soon the second click comes--you can click to select, then click again fully five seconds later click it again and it'll start a rename perfectly fine--so my slow-rename muscle memory is being violated all over the place.
• [MINOR] Possibly related: selecting an object is slow. That may be tied to the double-click behavior above, but it may also just be a technical glitch, IDK ¯\_(ツ)_/¯
• [MINOR] After upgrading to 2022.1 to see if any of this got fixed (it did not), the text of CSS selectors is hard to read against its background:
  
  See, not nearly enough contrast, even for a fully sighted person like myself.
• "Match Game View" is too easy to disable by accidentally resizing the canvas. The slightest click on the generously-sized resize borders will do this--I don't even have to move them.
  
• For that matter, accidentally resizing the canvas is painfully easy. It may help to have to manually select it for the resize borders to even appear.

I may continue updating this list as I make new discoveries.

 

This has been a known issue for a long time. I think there is a ticket to fix it but I am not sure.

 

Noted. 2022.2 beta installing right now. In the meantime, I can answer some of your questions....

Huh. I guess the way I said that was based on a wrong understanding of the system, more object-oriented programming than pattern matching.
Now that I understand a little better how selectors work, what I have in mind is something to this effect (convenient having a UI mockup tool on hand ):

The shown example would translate to

.HorizontalToolbar Button

, but if I had set it to "The next parent further up," it would've been

.HorizontalToolbar > Button

. Any extra parent constraints would go further and further up the hierarchy.

(As in the class list, a suggested-completions popup that appears as I type would be very helpful )

Ooh, that's very helpful. What I had in mind was actually drag-and-drop into this region:





And now that I've got 2022.2 installed, two more papercuts:

• Dragging and dropping in the hierarchy doesn't show expected visual feedback.
  • In Unity proper, moving an object between others looks like this:
    
    You can clearly see that "Main Camera" is being moved between two other objects.
  • In UI Builder, moving an element between others looks like this:
    
    Exactly the same as if I were moving LeftBar into CenterBar!
    (And that's not just an inconsistency. It literally looks the same whether I'm moving outside or inside.)
  • Come to think of it, I probably ought to file a bug report on this one too.
  • EDIT: Done. Case number is 10203.
• [MINOR] Element visibility inspector has two buttons: one for "shown," one for "hidden." Muscle memory from Photoshop, Blender, etc. has me expecting one button which shows the current state and toggles between them when clicked.

 

That is totally fair

 

Back again. I am again using 2022.1, but I'm testing all of these in 2022.2 beta as well.

• Entering an invalid character in a name/class field gives disproportionately frightening feedback.
  • When I do it, a big warning message pops up in the main window.
  • This is extremely concerning for the user, and makes me feel bad for not remembering.
  • I can see why you'd want the user to know characters are being rejected--silently altering their input would not be cool--but a simple warning chime immediately when the bad character is entered (then rejecting the bad character) would probably work just as well.
  • If visual feedback is preferred, a smaller message window (with NO yellow sign!) would be less scary--something like Windows shows when you enter an invalid character in a filename, for example.
• Tabbing between boxes is a touch inconvenient.
  • In most of Unity, I can tab from X to Y to Z quickly and with no trouble.
  • In the UI Builder's Size section, I have to tab from Width to Width-Unit to Height-Label to Height.
  • I'd prefer to tab directly from Width to Height.
  • I can see why you'd want to tab from Width to Width-Unit,, but tabbing to Height-Label is thoroughly inexplicable, though.
  • This happens with every field list in the UI Builder, not just under Size.
• Transition animations' Property foldout is unpleasantly narrow and cramped:
  
  
  • Unity traditionally has property-selection foldouts this wide (pictured: property selector in Animation window).
    
• On that note, transition animations' Property foldout could use some inner foldouts, like the above-pictured property selector from the Animation window. It's hard to sort through currently.
• Is there...seriously no way to say "always maintain this element's aspect ratio?" Or to read said aspect ratio from an element's sprite/texture?
• It would be lovely if we could absolute-place an object at "50% plus 25px" without adding an extra container object.

 

To continue the list:

• The class list needs a filter function or a search. When project get larger the list gets confusing
• The Elipsis-function of class names need to be optional. How can I distinguish between something like ".textSubtitleInteractableLarge" and ".textSubtitleInteractableSmall" when the UIBuilder only shows ".textSubtitleInteractable..."

 

For now, I'm working with an older version of unity, so some problems might be fixed by now, but I will list the issues that annoy me the most:

• The values for "Canvas size" in the UI builder are kept in the folder "UserSettings". By default, this folder is listed in the gitignore file. This means that we can't easily "share" the desired canvas sizes of the windows between PCs.
• There is no way to quickly change the name of the selectors (I mean, the desired result would be so it will apply correctly to visual elements and potentially other selectors).
• There is no way to quickly copy the names from the list of "Matching selectors". They tend to be long and all made by unity.
• Often, in the list of "Matching selectors", the same selectors are listed several times.
• The runtime theme has a terrible background and no way to change it permanently.
• UI Builder doesn't fully support variables.

 

Ooh, just thought of a doozy:

Element inspector controls are split up that shouldn't be.

Suppose I want to set the size of an element. As it stands, I have to look under two foldout sections, Size and Flex. These sections are separated by at least one other section, so it's not immediately apparent that they contain related functionality. In addition, the Flex section also has controls related to child element alignment, a totally separate field of interest.

A better layout for that might be:

All size-related attributes in one foldout, and all child-alignment attributes in one foldout.
(EDIT: Looks like "Align Self" was added in 2022.2b1. That would fit under Position, because it relates to this element's position instead of child elements' positions.)

Likewise with positioning. To get exactly what I want, I have to worry about the Position foldout (at the top of the list) and the Transform foldout (at the BOTTOM of the list!). These should both be under Position.


If UGUI onboarding matters to you, you might even want to take it a step further: all position- and size-related content under one foldout, just like with UGUI's RectTransform. (I know they're separate systems, but it's a decent UI that you really ought to consider copying.)


Others I can think of: Background+Border (and possibly Cursor) into "Appearance"; StyleSheet+Inlined Styles into "Style." As far as I can tell, everything else is decently split up.

 

One more thing I would like to have. Some way to quickly create pseudoclasses out of other classes. Today, I usually have to:
- Duplicate class
- Manually move the class to the correct place I wanted it to be from the beginning.
- Change the name of the class

This process could be 100% automated by simply right-clicking at the class, and selecting one button from the list.

 

UI Builder reverts changes even after saving it. Reverts it to last but one. Show some confirmation once changes saved to disk.