Search Unity

New UI feedback

Discussion in 'Editor Workflows' started by 5argon, Nov 3, 2019.

  1. 5argon

    5argon

    Joined:
    Jun 10, 2013
    Posts:
    1,555
    I think there should be an official thread for aesthetic (non-bug) feedback. But anyways I have collected some of my own.

    Inter font is a step in the right direction, much better than Roboto. Loving the hover state throughout. The panel lock icon is much better that the lock turns black only when locked.

    1. I think ASMDEF icon is better looking more different than scripts, the old one was grey.

    upload_2019-11-4_1-34-51.png

    2. The drop target didn't turn blue like before, it's now just a bit darker grey. Sometimes I miss my target because of this. The shift to less blue on something like checked check box is fine, but for temporary state I think it's better to keep things more obvious.

    licecap.gif

    3. Update these to not be pixelated? (And the box is clipping the file name a bit)

    upload_2019-11-4_1-46-38.png

    4. I think layout preset needs more display space for a long time (or make it flexible?), but the new UI rework get even less space. For example I would like to save a layout for Portrait and something, but just "Portrait" would take all the available space.

    upload_2019-11-4_1-50-42.png

    (Also the Collab icon is still pixelated.)

    Previously :

    upload_2019-11-4_1-51-48.png
     
    5argon, Nov 3, 2019
    #1
    msfredb7 likes this.

  2. 5argon

    5argon

    Joined:
    Jun 10, 2013
    Posts:
    1,555
    5. The green/red/skipped/not run indicator in Test Runner is still pixelated.

    upload_2019-11-4_1-55-53.png

    6. Some transport icons like in Profiler are still pixelated.

    upload_2019-11-4_1-58-38.png

    7. S M B buttons and the mixer fader in audio mixer are still pixelated.

    upload_2019-11-4_2-1-13.png

    8. New dropdown feels less responsive, because the arrow didn't flash and the label didn't turn blue. It doesn't feel like opening.

    licecap.gif

    9. Maybe just me but I think we need more saturation/contrast on the orange color code of audio-related icons. All other colors are fine. It looks too faded in the project view also.

    upload_2019-11-4_2-12-56.png

    (The caret in the typable box slightly bugged me that there is no space on the bottom, nice if you fix that too?)
     
    Last edited: Nov 3, 2019
    5argon, Nov 3, 2019
    #2
    laurentlavigne, Xarbrough, oxysofts and 1 other person like this.

  3. kk99

    kk99

    Joined:
    Nov 5, 2013
    Posts:
    81
    The new UI is just a terrible and complete mess. But I know they will not change or do anything about it.
     
    kk99, May 15, 2020
    #3

  4. laurentlavigne

    laurentlavigne

    Joined:
    Aug 16, 2012
    Posts:
    6,328
    laurentlavigne, Jun 14, 2020
    #4

  5. laurentlavigne

    laurentlavigne

    Joined:
    Aug 16, 2012
    Posts:
    6,328
    I agree with @5argon on responsiveness, it's far more sluggish (logged as 1255617), and readability is substantially worse
    example the icons in the redesigned profiler is a huge step back and require more concentration thus causing increased tension (not really necessary these days):
    upload_2020-6-13_23-37-27.png upload_2020-6-13_23-37-45.png

    Also selection contrast is decreased: in the new one selected profiler is a little bit lighter. Instead of going back and forth on shades of gray, bring back the blue and please hire a lead GUI to tackle your designers, we should not have to bring up such obvious problems.
     
    Last edited: Jun 14, 2020
    laurentlavigne, Jun 14, 2020
    #5
    5argon likes this.

  6. laurentlavigne

    laurentlavigne

    Joined:
    Aug 16, 2012
    Posts:
    6,328
    where is "Current"?
    upload_2020-6-13_23-56-4.png
     
    laurentlavigne, Jun 14, 2020
    #6

  7. MartinTilo

    MartinTilo

    Unity Technologies

    Joined:
    Aug 16, 2017
    Posts:
    2,451
    Thanks for the feedback. I've forwarded it to our designers.
    Regarding some of the Profiler feedback:
    Current is the >>| toggle button next to |< and >| buttons, in-between the record toggle and frame display. The reasoning behind this change was twofold:
    1. With a downscaled Profiler Window, the controls at the far right of the toolbar are the first to drop out the side. Thus, having the most used buttons there was quite terrible for general use.
    2. Screen real-estate is rather limited and the Profiler Toolbar was already quite full of them. Labeled toolbar buttons just take up quite some of that space, ultimately limiting us in what controls we can place there in an easily accessible way. Trying to find fitting icons for as many as reasonably possible, making sure they all have tool-tips to clear up lingering ambiguity seemed the best course of action.

    We're open to feedback on how fitting the icons are and how they might be confusing. We're also quite conscious that any such changes are going to disrupt workflows as people switch to newer versions with these changed, until they rebuild that muscle memory and learned association and abstraction of what does what. Combined, this means we'd like to only make such changes when the benefits in clarity (and screen space) outweigh the pain and confusion such changes will cause.

    Therefore, I'd greatly appreciate if you could go a bit more into detail as to how the new Module Icons as well as to the icons used for the controls in the toolbar are less readable than before. I have my own views and can guess/deduct some points but I'd rather build my understanding of your view on these directly from you. I also get that it might be hard to fully pinpoint and formulate what exactly it is that doesn't work for you with these so feel free to go as deep or shallow as you can/want to on these. Some questions that might be helpful to answering this:
    • In which way are you using the Module icons to read what is going on in the Profiler Window?
    • Are there any icons that stand out as particularly unreadable to you, and can you formulate why?
    • Is there anything in particular you liked about the old icons or at least prefer over the new ones?
    • Are the labels for individual stats in the chart legend's more or less readable in 2019.3+?
    P.S. I've already taken notes to revisit selection/button imprinting highlighting, both in the contexts that is specific to the Profiler, as well as the UI controls that are used by the Profiler Window but are generic and defined editor wide. With the later, I can mostly relay the feedback if I don't want to break consistency with the rest of the editor. And for the most part, I don't think would be beneficial to do so for the overall result. Solving it/alleviating the issues Editor wide however certainly would.
     
    MartinTilo, Jun 15, 2020
    #7

  8. MartinTilo

    MartinTilo

    Unity Technologies

    Joined:
    Aug 16, 2017
    Posts:
    2,451
    Thanks, for pointing these out. :)
     
    MartinTilo, Jun 15, 2020
    #8
    5argon likes this.

  9. laurentlavigne

    laurentlavigne

    Joined:
    Aug 16, 2012
    Posts:
    6,328
    It's really good.
    simple: they are too small and colorless. solution is to make them >2x bigger, ideally as big as before as they provide much needed separation between the modules. And bring colors back. Stick to the color scheme already in place for icons. Audio is yellow, physics is green, deep blue for memory seems standard on the web.
    Based on this
    1. the inspector needs to be fixed: the new design eats up more space whilst providing worse readability. Increase contrast to separate components and shrink spacing between fields to what it was. When switching back to previous version of Unity and it is less readable, stop the tuning but not before that. Currently 2018.LTS is far easier to work in than 2019.LTS.
    2. the top windows eat up 5 pixel of vertical space, which isn't much but they don't increase the size of the icons so instead of being well guided, the eye wanders in a mostly empty box. Also this one pixel here and there results in lists being floaty, for example the profiler list was much better before as it was compact, allowing for more modules in window. Now that you've relaxed the UI, tighten everything up a notch, we don't need that much breathing space.
    3. the scrollbar being colorless makes it harder to see, 10% blue would make a big difference.
    4. when the mouse cursor moves from a panel through a scroll bar to another panel it flickers into an horizontal arrow so there is a bug in the mouse event.
    It can be seen that loads of work went into the redesign. The problem is that, if the right questions were asked during its development, very high bias was applied by people who admire ios7/macos, copying them instead of understanding the root of cognitive load and trying to minimize it. ios7 and macos are well known for increasing cognitive load in a lot of areas so, as done before, the recommendation is to study the subject from the ground up instead of copying what others have done.

    If reading tons of academic papers isn't the team's cup of tea, buy a cheap QEEG machine and put sensors on people. Recommendation is two on the prefrontal, two on occipital, one in CZ.
    Also read the UI design documentation of the initial Mac and of the Switch.

    Do your homework and fix it so it becomes a new standard, something kick ass that we enjoy using!
     
    laurentlavigne, Jun 15, 2020
    #9

  10. MartinTilo

    MartinTilo

    Unity Technologies

    Joined:
    Aug 16, 2017
    Posts:
    2,451
    Thank you for the feedback. I can't speak to the process of the redesign of the Editor as I wasn't involved beyond some minor adaptions of the new theme in the Profiler window. I'd also not want to assume intent (or only the best of), motivation or the process behind it, nor question the professionality, diligence and academic backgrounds of the people involved because I don't believe doing so could result in anything positive.

    I hear you on icon colors and sizes. It seems to make sense and yes, there may be a better way to solve it and I do appreciate the feedback. However, I think it might be useful to explain how we got here. Please don't take this as a defense and a way to shut down criticism. That isn't my intention. I'll still bring this back up for consideration.
    So just to highlight some complexities that I know where considered in the area that I do kbow about: The icon sizes and colors in the Profiler.

    Colors are tricky. The CPU Usage chart has some colored categories that map to some areas. Those don't necessarily map to the icon colors of those areas. There is also the Colorblind mode to be considered (found in the three dots overflow menu of the Profiler Window's main toolbar). Additionally, the same color scheme is applied to the stats in the other modules. Changing any of these breaks the learned associations of what means what, including that of e.g. screenshots posted here in the forums (with the legend cropped. Happens way to often), causing all kinds of confusion, so that's a place we gotta treat carefully. Adding colors to the icons could make them appear to be associated closer with the nearby CPU Usage chart (that I guess would be considered the default/main chart at this point) than the icon color of that area editor wide. It would also mean that some modules have their own color and others share theirs with other modules (e.g. the two UI and Physics modules). Their colors would also compete with the colors of the colored boxes in the legends.

    Regarding sizes, since the font size has changed, it is taking up more space. If the icon size takes up more space, modules with many stats would push the default height for modules, pushing the info further apart, more scrolling, etc... Kinda goes against your own points. Similarly, some module names might need to be shorter (we're also adding customly named ones)...

    We'll always strive to make a better product for you and all other Users and any feedback is appreciated as a gift. We'll listen and even try to cut through the bitterness, because we know it comes out of frustration and that it means you care about our product. It might not always result in immediate change because of a whole host of underlying factors and competing issues. But that doesn't mean we don't care either.
     
    MartinTilo, Jun 16, 2020
    #10
    laurentlavigne and Lurking-Ninja like this.

  11. laurentlavigne

    laurentlavigne

    Joined:
    Aug 16, 2012
    Posts:
    6,328
    Good point. A solution that might work: desaturate the icon color to 10 or 20% or original, drop a shadow or emboss the label square while keeping the icon flat.

    You could try compacting the line spacing of the labels and use the extra space to differentiate modules more, increase the icon size. Another way you could go about it is place the icon below the text, as an background which size then, doesn't affect the layout.

    On the topic of information density, this guy made an excellent suggestions. If ever you're tasked to adapting another part of the UI to the new design, this might pay off big time.
     
    laurentlavigne, Jun 17, 2020
    #11

  12. laurentlavigne

    laurentlavigne

    Joined:
    Aug 16, 2012
    Posts:
    6,328
    another example of why removing color information in icons is not a good idea for productivity.

    upload_2020-6-22_20-37-23.png
    vs
    upload_2020-6-22_20-38-14.png
     
    laurentlavigne, Jun 23, 2020
    #12

  13. JoNax97

    JoNax97

    Joined:
    Feb 4, 2016
    Posts:
    611
    Wow those old icons were all over the place. But I think you're right, each platform logo has a brand color and it wouldn't hurt to have that here.
     
    JoNax97, Jun 24, 2020
    #13
    laurentlavigne likes this.

  14. KarlKarl2000

    KarlKarl2000

    Joined:
    Jan 25, 2016
    Posts:
    606
    Hi @MartinTilo
    I'd like to suggest the ability to group deselect. Currently you have to do it one by one

    Deslet.gif
     
    KarlKarl2000, Jun 27, 2020
    #14
    Lionious, Ruchir and laurentlavigne like this.