Skip to main content

Now that customer success is the focus of the Universal GUI, we can prioritize User Experience too.
This blog is the first step, introducing quick win UI Styling updates that require no Model changes or changes in User Experience. Later, we'll introduce and discuss Data Density improvements and more comprehensive UX & Universal Theme implementations.

In the past years a lot of features have been added to the Universal GUI, but in the meantime the visual side of this interface hasn’t changed a lot. Comparing our Universal GUI to other enterprise applications, we do notice that our interface lacks a little conviction. We want to improve on this together with you, to ensure that our ideas support you and your users. So please, join in the conversation and let us know what you think.

We took the Insights application as a benchmark.

The Projects screen in the current Universal GUI

There is a lot going on in this screen, which means our users have a lot of elements to visually look through.
We think we can do better.

Based on the Material UI components and the 10 Usability Heuristics we altered the UI styling, bringing us to the following design:

Styling update of the Universal GUI

This is the same Projects screen in the Insights application, with only visual alterations. Let us take you through it, so you know what is going on.

Styling update with subject indicators

  1. Menu

Currently, the background color in the menu has the same color as the general background of the rest of the application, which can distract the user in their navigation through an application.

Menu design

We want to introduce the primary color as background of the menu.
This provides a better visual hierarchy and helps the user focus on the data. With this change, we also introduce a lot more color in the application.

We also want to change the alignment of the Open Documents (aligned with the submenu items) and the badges in the menu (make them stick to the right).

 

  1. Prefilter buttons

The current setup of the Prefilter buttons is based on an icon, with a primary-colored underline when the prefilter is active.

Prefilter buttons with solid background

 

Like you, we think this can improved by making the Prefilter button a more distinctive button, by introducing a solid background in a round shape.
When the prefilter is active, the background could get the primary color or secondary color.

Which do you prefer, the primary or the secondary color for active prefilter?

 

  1. CRUD and Task/Report buttons

Like with the prefilters, we introduce a solid background for the CRUD and Task/Report buttons.
By making these button backgrounds square, they are better distinguishable against the round prefilter buttons.

Default CRUD and Task/Report button styling

 

Also, we would like to know what your stance is on introducing the primary/secondary color to the Task buttons to make it a clear Call To Action button.

Concept of button with color

 

What do you think of introducing the primary or secondary color to the CRUD and Task/Report buttons?

 

  1. Conditional layout

The current setup of the Conditional layout colors the entire cell. We want to improve on this visual cue, highlighting the text only.

Conditional layout around text

 

With text fields and an icon, we could encapsulate the icon with the text highlight:

Icon in Conditional Layout highlight

 

Or we could give the icon the conditional layout color (if it’s an SVG icon of course) and place it outside the text highlight.

Icon in Conditional Layout color

 

Which one do you prefer?

 

 

  1. Lookup control

Especially in read-only Grids, the lookup control needs a little love.
To make the Universal GUI more consistent with other controls like the email, map, URL or phone number control, we want to change the current lookup control into a hyperlink. This way we follow behavior the users expect from other platforms.

Evergreen, Kim Wilde, Country building and Budget office are the Lookups in this image. In this idea, the underline in the grid is only shown on active row/hover, to prevent a grid full of underlined data.

 

  1. Column headers

Vertical space is a great challenge in the Universal GUI.
The grid headers now demand a lot of vertical room compared to the rows, and the styling of the header text make them fall into the background.

In this design, we want to introduce a lower header bar and a bold font style. Subtle vertical dividers between the columns in the header and the active row are also added to emphasize column width.

Column headers design

 What do you think of this Column headers design?

 

  1. Form fields – Outlined style

One of the major elements in this design is changing the Filled style to the Outlined style form fields.
We think the Outlined style holds a lot of answers for data density, control alignment, conditional formatting, visual hierarchy, focus indication, etcetera.

To give you an impression, we put the current Filled style next to an Outline style setup. The field content and setup are the same.

On the left the current Filled Form Field styling, on the right the Outlined Form Field style

 

Because this will be a major change, this is not exactly a ‘quick win’. We want to get rid of the Form field background color setting and implement this idea. This also means that forms in non-edit mode have no background nor outline.

Forms in non-edit mode without background color

 

What do you think of the Outlined Style for Form fields replacement?

 

  1. Active row color

Universal uses grayscales to draw the attention of the user, we think that color is a better guidance and looks nicer.

While using a hint of the primary color (a pass through of 12% to be precise), the active row would stick out a lot more.

Active row indication in Primary color

What do you think of coloring the active row?

 

Conclusion

As stated in the intro, these Design changes are predominantly focused on visual changes. They will have an impact on how the Universal GUI looks and feels, but not on its behavior.

To react to the designs, use the number of the subject and place your comment next to it, so we know which subject you are referring to.

We look forward to your opinions!

 

 

Currently, the Menu elements of this Styling update are in development.

All, it has been silent on this topic for a little longer than hoped and promised. Sorry for that, but I’m glad we at least delivered the first and most colorful part of the UI Styling update with the Universal GUI 2024.3.13 (release candidate) today: the menu restyling! Most significant changes:

  • Menu uses the Primary color as background too
  • All Badges are aligned at the right
  • Open documents are aligned with submenu items instead of the menu groups

I would also like to shed some light on the next steps. We need a couple of releases which will result in the full implementation of these UI Styling changes, and also the Data density changes on Grid, Form and Collapsible Form tabs (this last one requires a Model change with Release 2025.1).

Basically we can distinguish 3 groups (releases) of changes, most of which you can see in the below design image:

Grid

  • Column headers (point 6)
  • Reduce padding to 4px (mentioned in Data density)
  • Use tooltip for total label (mentioned in Data density)
  • Active row color (point 8)

Action bar

  • Pre-filter buttons (point 2): note that we’ll go for using the Primary color.
  • CRUD and Task/Report buttons (point 3): note that we’ll go for using a gradient of the Secondary color instead of gray to highlight the fact that these are ‘action’ buttons. We’ll later on introduce the ability to highlight a particular ‘Call To Action’ using the Secondary color with the same gradient as Badges.

In addition, the 2025.1 Release will introduce much more flexibility in configuring your Action bar, as explained by Anne in a response to this Idea:

Form / Controls

All Control types will have to be re-styled. 

  • Conditional layout (point 4): we’ll encapsulate the icon with the text highlight
  • Lookup control (point 5)
  • Form fields - Outlined style (point 7)
  • Tab header font size (mentioned in Data density): we believe these can become the same size as Group headers, since they’ll be displayed within a slightly colored collapsible bar (gradient of primary color - see below design)
  • Collapsible form tab (mentioned in Data density - see below design)

 

Hi team,

Those are some great improvements to the UI already, I think these really enhance the over user experience and there are some great things yet to come!

However, I noticed that the original mockup with rounded corners hasn’t been implemented yet. It’s a bit of a shame because I really liked that design element.

After some trial and error with custom CSS, I managed to get the rounded corners working consistently in my demo application:

 

If anyone is interested, I’d be happy to share my approach.

Is this feature still on the roadmap?

Anyway, keep up the great work!

Hi Kevin,

Thanks for taking the time and look through the changes.

Correct, the rounded corners (and not only the rounded corners on the top left of the workspace area, also on menu items/Open Document items) the corners have not yet been rounded. We are aware of it, and is still on the roadmap!

Regarding the top left workspace area corner, we do our best to include it in the next release, however, I can not give a guarantee of this visual element to be included. This would then be postponed to a next release candidate.

 

Hi all!

During the design updates of the form we saw that the current darkmode settings of the Universal UI seem off. The chosen colors for the background make further design choices hard, as the current color is too light. 

This causes several challenges: outlines and text are harder to differentiate versus the background, due to contrast values being too low. This also causes error colors to lack emphasis in color. And that is just the start. 

Here, see for yourselves:

In this example, we see the current Universal Darkmode with a couple of buttons (in the new styling) with a form and the collapsible form sections.
The colors seem flat, dull and the error color is hard to spot

Now, let's change the values in the exact same screen:

In this example, the background color of the paper is made the darkest (which makes it ‘higher’ in the visual hierarchy. The colors are far more brighter which prevents straining the eyes looking for fields that need attention. Error fields pop and guide the user far better

Changing the background darkmode color instantly improves readability, contrast values and offers a lot of wiggle room for future changes. 

If you have any remarks, I hope to hear from you!

I have one problem with the update, think that is should be possible to choose if and when you switch to a new layout. 

The problem is that a layout change can also make that you have to change things in the application, and the application looks different in instruction videos and documentation.  

I would like to wait until all the changes can be done at once, and plan if and when we do the update. 

To add, there are some design changes I would really like. It would be great if those improve.

  1. If you don’t fill out a mandatory field the error message changes the location of all the controls in the form (I don’t like that).
     
  2. The fact that the label becomes big in edit controls makes that you can not quickly see which controls are empty.
     
  3. I did a lot of work last year to highlight empty “pseudo mandatory” cell’s, to give a stronger visual effect and guide the user to the most important cells in a large form. ( “pseudo mandatory” means that you can save the record as draft).

    It would be great if it would be possible to do something like this with an effect like a slightly darker border instead of the background. ( And I just learned that the background is going to change… being able to change it to a border effect would be a large improvement ).
     
  4. It would be a large improvement to have clear css classnames, with a custom part, for example from the layout procedure, in the html output as there is no “one shoe fits all” style. A large form with 40 input fields has different requirements then a small form (for example that you want to be able to save it as draf like in point 3).

I understand that both point 3 and 4 require model changes. But that would give most flexibility. It would also be nice to have a “strikethrough” option in the conditional layout settings (that is a small one which also requires a model change).
​​​​​​
 

Hi Daan!

Regarding with waiting with an update, we implemented the new UI styling as an upgrade instead of the old one.

This new UI version is based on the premise that no model changes are needed, these are purely visual changes of existing elements. (We are aware that color choices for Main and Accent color in the theme settings of a project might need attention though, use the adobe color wheel if you have difficulties selecting complementary colors). Colorwise, the UI will indeed look different, but for the rest the layout of everything should remain the same. 

Also, we have some other features coming up, like Configurable Action Bars and Collapsible Form Sections, which will improve usability of our platform. Waiting with updating will prevent your users from access to these features. 

To answer your further quiestions:

  1. We are aware of this, and we are working on solutions. 
  2. Showing the label as a placeholder on empty form fields is something we've planned to work on, another reason to stay up to date!

Indeed, as point 3 and 4 require model changes, and your fifth point about strikethrough in conditional layout options surpasses this design, I am afraid these ideas will disappear in this comment section. If you haven't already, can you raise them as separate ideas?

Terms & ConditionsCookie settings