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.
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.
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.
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).
Prefilter buttons
The current setup of the Prefilter buttons is based on an icon, with a primary-colored underline when the prefilter is active.
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?
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.
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.
What do you think of introducing the primary or secondary color to the CRUD and Task/Report buttons?
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.
With text fields and an icon, we could encapsulate the icon with the text 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.
Which one do you prefer?
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.
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.
What do you think of this Column headers design?
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.
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.
What do you think of the Outlined Style for Form fields replacement?
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.
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!
Page 1 / 2
I am more than welcoming this update that give the GUI a fresher look.
This is looking very promising, I am expecting a lot of great additions going forward! Good job!
In my opinion, this might be an absolute game changer. One of the first things I tried to figure out when starting to work with Thinkwise was how to play around with the CSS, as the look & feel of th ecurrent state does not help in attracting users attention to the ridght location and is far behind expectations of a web application.
I lost count of how many opportunities got lost, while being convinced about the power of thinkwise, when the look and feel was shown people thought it was just awefull.
menu
a big hear hear to the change. More colors is important
Prefilter:
Which do you prefer, the primary or the secondary color for active prefilter? => primary for active filter
Crud and tasks
What do you think of introducing the primary or secondary color to the CRUD and Task/Report buttons? => this is tricky. If you paint them all in primary color, it can become a carnival of colors. I can imagin it would be usefull to be able to define a color per task (not be bound by primary / secondary) as you might want to diferentiate between types of tasks.
Conditional layout
Which one do you prefer? => Icon in Conditional Layout color
Lookup control => so much better
What do you think of this Column headers design? => so much better. sapce is even a bigger problem in Brazilian market as it is in Europe. Laptops still come standard with 1360 x 768 pixels from the supplier. OPen the insights application in this resolutions, and you'll experience our struggle.
Form fields – Outlined style => OMG, finally a way to get rid of the grey and still see the bounderies of the field! no background color of the form? thats, positive, as you can create a more unified solutions in stead of all the segregation of information
Active row color => Colors Yeay a complete no brainer if you ask me.
IMHO this is absolutely necessary to be taken serious as software provider of web applications.
In order to create the correct expectations, in what stage are these ideas? Is this something we can expect being implemented this year, of is this a 5 year plan?
Looks really incredible!
Preferences at the moment:
Primary color I think
Primary color as well. I do like the distinction between CRUD actions and Task/Report actions
Both are great to me. If I need to choose, the first one, coloring both the icon and the text.
Deal! Looks similar to the Windows GUI Grid header
Outlining does give a much better visual cue of the selected field. I'd opt for that one.
The 12% coloring rule is a great choice. Also then fits nicely with the Prefiters and Task/Reports
First of all, I can't wait to have these changes in our application!
Not sure about whether my comments are "feasible” within your scope and plans or whether they are aligned with other customers’ expectations/needs, but I would like to share my braindump here in the hope of contributing to a nice UI/UX!
Active row color ==> GREAT!
@tiago Thanks for your positive remarks and extensive feedback!
In order to create the correct expectations, in what stage are these ideas? Is this something we can expect being implemented this year, of is this a 5 year plan?
As long as no Model changes are required, expect implementation this year.
The Task button coloring most likely will need a Model change, since applying the primary or secondary color to all Tasks is too rigid.
@Suleyman This is how I know you, always being a couple of steps ahead!
To set expectations:
The UI Styling changes as introduced in the blog and sufficiently approved by the Community will be implemented this year.
Data Density is also a big theme for this year, so do expect significant improvement there too (this most likely also includes reducing the whitespace around the column headers).
Collapsible Tabs is currently being investigated as one of the alternative solutions for the Next Tab behavior in the Windows GUI. It is not yet certain what solution will be chosen and how it will be implemented, but it is something to expect changes on this year.
Action bar improvements (like consistency between the Prefilter/Task overflow menu and easier clearing of filters) will be looked at as part of a more comprehensive topic around Action bar configurability and is expected to be picked up for the 2025.1 Release, together with these Ideas:
Do you still need the Menu Group Badge count? I hoped the Start Object that opens a Subject if there are open items, as implemented for Approvals in your application would be sufficient . @All: Please make sure to vote here if you need it too:
Badge display on/off per user is more or less possible with code in the Badge logic, but is not ideal. Not sure what exactly you would expect, could you raise a separate Idea for this?
What it confirms is that indeed coloring all Buttons the same (primary) color is a bad idea. What also triggers me: the concept and application of hierarchy (primary/secondary/tertiary).
We could consider applying it like that in Thinkwise, adding a Task setting with for example 3 options. This more or less safeguards that UX/UI recommendations are followed, making it harder to override (Custom CSS could still do that).
At the other end of the spectrum, we could provide a Task setting that allows to pick any color for each Task, allowing for more flexibility (also to mess with UX/UI recommendations).
Any thoughts on this?
I have no detailed opinions to share just yet. For now I would just like to say this looks impressive! I like this kind of syling a lot and it gives Universal a proper modern look. Can't wait for the data density improvements now but this is definitely a leap foward.
Now this is the update we need! As someone who has problems focusing on letters on a mainly white page, this added color is a much welcomed addition. The color to the menu alone makes the GUI much more focused. Also the spacing is a much needed addition as the current build of universal needs a 80% zoom just to be useable.
Great work!
Looks promising some changes I do see a view limitations and issues with (some have been like this in the past and that presented issues for users as well):
Prefilter active color
I would prefer the option to select a color separate from primary or secondary
Color difference between prefilters, tasks, reports and CRUD buttons the best way to go
CRUD/Taskaction buttons color
See answer on at Prefilter active color
Conditional layout
Please encapsulate the icon. Also only having the values given the color instead of the whole column is not an option for me. Because it is fine when all values are from the same length, however often this is not the case. Results coloring is not the same length which looks poorly
Column headers
I like this, less is more in this case and currently the header is using up too much size, which even results in it almost looking it stores the values for the first row instead of being the header.
Form fields - outlined style
Style looks good, but with the suggested option, user will not understand that they are in edit mode. Having the outline coloring is nice, but you still need background of fields which are editable
Read only not having a background and not having any type of lining is not ideal to. We had this in the past and a lot of users at my clients were not a fan of this. It could be setting, but you should still have to option to enable some sort of background or barrier color for form fields
Coloring active row
Yes please do, gray always suggests read only, coloring is way better.
I agree with all the proposed ideas.
Point 3 It's nice if it is possible to give tasks a color. I would like to have the option to assign a specific color to tasks and pre-filters instead of random colors.
Point 4 My preference would be the background color behind both the icon and the text
Point 7 I like the Outlined style during editing. In non-edit mode I would still prefer a light back color, especially for multi-line fields this is more clear. Or will this always be possible with custom.css?
What I miss in this overview is the styling of tabs. Have you already thought about that too? A little separator (Pipe or Dot) in between inactive tabs or
And perhaps assign different colors to tabs for in case multiple detail levels exist
Great idea’s. I’ve got some follow ups / further improvements. Some do also require model changes, so it could be next-steps.
Task highlighting
I really like the idea of these highlights. However, in a lot of cases, when you have multiple tasks you want to emphasize a particular task. Not all of them. We could add a new context-logic setting where you can emphasize one (or multiple) tasks. Based on the state of the selected row you can suggest the most likely next task a user should execute. This would guide users even more with their actual workflow.
Furthermore, I would like to be able to choose a separate color for these (or each) task rather than deriving this from a default setting.
I understand that for the first step, your idea here is a great improvement, but I think it ‘d be great to add this in the future.
Read-mode form
I really like how the form looks in read-mode. However it is not clear to me what happens when a field is empty. Currently you get the field name in bigger letters than when it is filled in. Personally I think it is hard to distinguish a filled in field vs. an empty field. I think the form labels should always stay in the same spot and be the same size. Look at the ‘painted’ example below, i’ve left project manager and planned end date empty.
Answer to the questions:
Which do you prefer, the primary or the secondary color for active prefilter?
Primary, or ideally be able to set your own color.
What do you think of introducing the primary or secondary color to the CRUD and Task/Report buttons?
Primary, better, the idea outlined above :)
Which one do you prefer?
Encapsulated, is more expressive and cohesive
What do you think of this Column headers design?
Generally like it, there are some inconsistencies in the example. 2 date-headers are right aligned, while the last date is left aligned. Also, how would sorting work on left-aligned fields? I think the sort arrow should always be in either the left- or right positing. I think on the right makes sense in most cases.
What do you think of the Outlined Style for Form fields replacement?
Much better! Please use my suggestion for empty fields. :)
What do you think of coloring the active row?
Yes, let’s get rid of ‘millenial grey’.
To summarize, @Bart Metselaar I think you guys have done an amazing job on these first improvements. Can we have them tomorrow? :)
This looks like a welcome upgrade!
2. Prefilter buttons
Using a solid background to show active prefilters is actually something we already do using custom CSS at one of our clients. So having this standard is great! I personally prefer the use of the primary color for prefilter buttons.
3. CRUD and Task/Report buttons
I think the CRUD buttons should stay simple since this is basic functionality. Tasks I prefer to be another color than the prefilters, just to be able to differentiate the two easily (which has been a problem n the past). Sine I prefer the prefilters to be the primary color, in my opinion the tasks should be colored in the secondary color.
I have to say that I am not a big fan of the grey background of the non-colored tasks/prefilters/CRUD-buttons. To me they look disabled. Maybe white works better?
4. Conditional layout
Looks really good, I prefer the 'Icon in Conditional Layout highlight':
6. Column headers
This is way more clear and a more efficient use of space, I like it
7. Form fields - Outlined style
This looks way more modern than all those grey fields. Looks great!
8. Active row color
I prefer color over grey as well. The 12% pass through of the primary color is nice to have as a default color.
@Arie V
At the other end of the spectrum, we could provide a Task setting that allows to pick any color for each Task, allowing for more flexibility (also to mess with UX/UI recommendations).
Any thoughts on this?
Setting the primary and secondary colors to be used in the theme by default is great for all these subjects, but I much more prefer this to be configurable in the theme settings. I believe this freedom can bring more unique looking applications that matches the branding of organizations. It is up to the product owners, developers and testers to make this look good
Thanks for sharing this great ideas. A modern look and feel of the interface is sure to help us in the transition from the Windows Gui to Universal. It's also nice that we are invited to think along with you.
1: Menu
Looks great! I suppose the primary/secondary colors such as the background color are made adjustable in a simple way.
2: Pre filter buttons
Again, please make the colors adjustable
3: Crud and task/report buttons
The distinction in the background between filters (round) and tasks (square) looks very nice to me.
And again as long as the colors are also adjustable here.
4: Conditional layout
That looks great for a form. But how does that react in a grid when there is a layout on fields whose content is not always the same length? In a grid I prefer the whole field, it gives a much calmer picture.
5: Lookup control
Hyperlinks are much better
6: Column headers
I like it, the shape, font and space is much better
7: Form fields
Outlined is a great idea and it looks much nicer . However, when forms are in autoedit mode by default and you have 20+ fields in a form (which is the case in a lot of the screens in our application), it might be a bit excessive.
Out of the box, it might be better to not show the outlined situation until you click in the screen and actually start changing something.
8: Active row color
Color is fine as long as the color is adjustable
Additional
it would be very desirable if (at least) the styling of the horizontal and vertical tab headers were also modernized. Our screens will look rather strange if this is not taken into account in the context of the other changes (see the example).
This would fix a lot of UI/UX problems I see our customers struggle with on a daily basis, cannot wait for this to be released!
To answer the questions:
Which do you prefer, the primary or the secondary color for active prefilter?
Definitely primary.
What do you think of introducing the primary or secondary color to the CRUD and Task/Report buttons?
Great idea, we would welcome the possibility to better communicate the importance of tasks, for the exact reasons Arie mentioned in his post.
What it confirms is that indeed coloring all Buttons the same (primary) color is a bad idea. What also triggers me: the concept and application of hierarchy (primary/secondary/tertiary).
Conditional Layout - Which one do you prefer?
I do not have a strong preference, but I think the Icon in Conditional Layout color is better. Since it’s a bit more subtle. When I imagine the Icon in Conditional Layout highlight in the grid, I’m afraid it’s put an unnecessary strain on the cognitive load of users.
What do you think of this Column headers design?
Great way to increase data density and reduce cognitive load!
What do you think of the Outlined Style for Form fields replacement?
Sounds like a good plan, however I’m having trouble visualising how this would look on a big form with a couple of long description fields. Although the current setup is far from perfect, the background of the fields to provide some needed structure on forms with a lot of (large) fields.
What do you think of coloring the active row?
Great way to improve UX and improve the general look and feel.
What it confirms is that indeed coloring all Buttons the same (primary) color is a bad idea. What also triggers me: the concept and application of hierarchy (primary/secondary/tertiary).
We could consider applying it like that in Thinkwise, adding a Task setting with for example 3 options. This more or less safeguards that UX/UI recommendations are followed, making it harder to override (Custom CSS could still do that).
At the other end of the spectrum, we could provide a Task setting that allows to pick any color for each Task, allowing for more flexibility (also to mess with UX/UI recommendations).
Any thoughts on this?
I would definitely opt for something along the lines of option 1, if a Dev can set these colors in one single place like the Theme. Too many colors in an application reduce the UX. A predetermined set of primary, secondary and tertiary colors, should be enough to communicate hierarchy. Option 1 would also reduce maintenance since a dev would only need to change 1 variable instead of 50 when the branding of a customer changes.
I haven’t read all the comments, but there are lots of happy people.
My opinions are: 1 - Really looks better!
2 - I would prefer the primary, because the secondary was designed as a warning, and an active prefilter is not a warning to me. In other words, I would prefer if the active prefilter is a different color than a (warning) badge.
3 - I would like to know if a task is executing directly or if I get a popup or something. In desktop applications, it is customary to add ... when you get popup. Do you have something similar that you could add to the design? I really like the distinction between tasks and prefilters! I would prefer if the colors of the tasks are the same as the colors of the prefilter. I would love to have a difference between crud actions and tasks. Don't have any preferences as to how, just that by making it the same we get a lot of feedback that people don't know which one to use.
4 - I would like the second option. We are now coloring icons ourselves to have a visual difference between the icons. It would be nice if we could just give the field a conditional layout.
5 - so simple, yet so much nicer! Did you think about what you will do when the item is empty? Especially in editable fields.
6 - The separator is really nice!
7 - I like the Outline style and that it makes the form more dense. I also like the way the selected column now gets more attention. I noticed the Page separator (line above trace), which could get a little more love. Because of the more lines, it fades a little.
I'm not a big fan of multiline control in non-edit mode. Especially the floating button to expand.
8 - I think the active row and the hoovering row should match. Where one is more passed through than the other. I think color would be nice, but in this example it still looks a little grey to me.
I've always liked the CRUD buttons as part of the form as is the case in the Windows GUI. I'd like to see that as an option for Universal too. Especially when a more compact layout brings the entire form and the CRUD buttons into view this could work out real nicely. Then we'd have a filter bar and prefilter buttons on the top left of the list, (only) task buttons on the top right and CRUD buttons underneath the form. I also think that looks a little less overwhelming in screens with quite a lot of buttons of all types.
I'm neutral about their shapes though. Circles and/or squares are OK for me because we already have a clear distinction through color. A proper visual distinction between task and prefilter buttons is crucial for our application though. Now we use a single color for all table tasks and black (no color) for all prefilters. The background for active prefilters is a very clear blue shade in the Windows GUI and I'd prefer to see that in Universal too (as is the case in the screenshots). A system-wide color setting for an icon type (in our case all task icons) would negate the necessity of creating and maintaining a separate set of SVG's.
To illustrate my desire I've created a mockup. So each of the forms gets its own set of CRUD buttons. The row above each list where the search bar is located only contains prefilter and task buttons. This basically mimics the Windows GUI.
The CRUD buttons at the bottom left came from the top right. In the existing situation there's somewhat of a disconnection between the buttons and form due to the distance. In this mockup the buttons are visually tied to the areas they affect. This is all rather personal of course so I'd like to hear other opinions.
To illustrate my desire I've created a mockup. So each of the forms gets its own set of CRUD buttons. The row above each list where the search bar is located only contains prefilter and task buttons. This basically mimics the Windows GUI.
The CRUD buttons at the bottom left came from the top right. In the existing situation there's somewhat of a disconnection between the buttons and form due to the distance. In this mockup the buttons are visually tied to the areas they affect. This is all rather personal of course so I'd like to hear other opinions.
@Roland Thanks for thinking along! We have been working on some designs for this part as well and are also considering adding the (C)RUD buttons to the Form, but aren't yet satisfied enough to share it with the Community. And since it is more of a ‘breaking change’ in terms of User Experience within the Universal GUI we decided to keep it out of scope for this particular UI Styling update.
To clarify a few things we are still pondering on:
In the example we shared, the Detail tab has a single Action bar that stretches over both Grid and Form. Placing the CRUD buttons at the bottom of the Form brings them further away from the Grid rows
We don't believe having the Add button in the Form is intuitive, so that one should perhaps stay on the Action bar
When selecting multiple Grid lines, it should be possible to use Delete for all selected lines, so in certain situations that should also show up on the Action bar
The Refresh button most likely is also a better fit to stay on the Action bar
The things you are hesitant about are exactly what our users are used to. So far we've been reluctant to make the switch from the Windows GUI partly because Universal looks so different. Having CRUD buttons in/under a form is the norm in our application and in 99% of all cases records are created and updated in the form and not in the list. This is partly because a form can be shape-shifted using a layout procedure depending on context and situation whereas a list is a static entity and not always the best place for said actions.
Why do you think the add button in the form is not intuitive when it's usually the form you're going to after clicking the add button? It also makes for easier adding of multiple records because the add and copy buttons are nearby during data entry resulting in smaller mouse travel distance between inserts (not many users are avid keyboard shortcut users and thus fully depend on the mouse).
That said, if you're considering to split up the CRUD buttons as you say into different groups and locations then I think I prefer to maintain the current situation in Universal. :)
@Roland@Arie V
Would it be possible to add the crud buttons as a component in the screen type? You could default to in the form if it is not added to a screen type. This way you could choose where you want the crud buttons and could choose for example on top for the main screen and in the form for details.
@Roland@Arie V
Would it be possible to add the crud buttons as a component in the screen type? You could default to in the form if it is not added to a screen type. This way you could choose where you want the crud buttons and could choose for example on top for the main screen and in the form for details.
For now, this design focuses on visual changes, this idea needs a model change which is out of scope for this step. Don't hesitate to raise that idea in the ideas section of the community!