Feedback on new UI for v13

ERPNext
1

I’ve had a look at the redesigned UI for v13 (branch rebrand-ui). There a lot of pretty nice improvements over the old UI. But there are also some things I don’t like. So I’d like to give some critical feedback:

  • Input Fields: I find it rather confusing that the input fields are now having a gray background instead of a border. I don’t think that this is good UX.

  • Gray Background/Shadows: Because of the gray background and the shadow effects the new UI looks a bit washed out, especially on a non-retina display. I don’t see how this is an improvement over the old UI.

  • White Buttons: I would say that it’s way more common to have non-white buttons on white background than the other way around. And from a UX perspective I would say it’s better to stick to what is common.

  • Icons: I prefer solid icons. The look sharper on non-retina displays and make the UI look more cleaner in general.

  • Section Headings: Too big and too bold.

  • Typeface: More elegant now, but not as good to read as before, also pretty unsharp on a non-retina display.

In my opinion the UI update should a bit more evolutionary than revolutionary. Maybe a bit more like this …

desk%20evolution
desk%20evolution1440×900 58.8 KB
form%20evolution
form%20evolution2880×1800 297 KB
list%20evolution
list%20evolution2880×1800 317 KB

For comparison currently it looks like this …

desk%20revolution
desk%20revolution1440×900 61.5 KB
form%20revolution
form%20revolution2880×1800 308 KB
list%20revolution
list%20revolution2880×1800 333 KB

Happy to hear other opinions.

8 Likes
2

Highly Agreed and exactly what I wanted to say!

1 Like
3

Let me tag the people who are working on this: @surajshetty, @scmmishra, @prssannad

1 Like
4

I think its opinion. The reason for adding a gray background was since we have a high density screen with lot of elements, grouping elements was a great way to reduce the cognitive load. Having 2 layers means, the core content pops out strongly against the supporting content.

But I do agree, the contrast can be a bit higher.

5 Likes
5

@rmehta Thank you for explaining the reasoning behind the redesigning.

Let’s leave all other points aside, I stick to my opinion that gray input fields without borders are just bad. I’d really like to hear some other opinions on that.

3 Likes
6

From the screen shots you shared. I agree with you that doctype when opened looks too patchy with gray bg for input fields.
This one looks better in my opinion.

7

I agree with the grey background.
But I also agree with the bordered, no-fill text input field. So users can perceive it as writable / filled in (to differentiate with read-only field).
Button can have fill color because it is perceived solid so can be clicked.

2 Likes
8

Just want to add some general input.

Some users are really far from being tech oriented (I’m thinking of our administration staff). Working with different applications, they will have a hard time when things are very different in ERPNext.

They will use the system, so in my opinion we should follow common practice first.

3 Likes
9

I think this is important to address @rmehta it also defeats the purpose of having the background and foreground separated by color in the first place.

2 Likes
10

@rmehta how can I tell apart editable fields from non-editable fields? I see the font gets a tiny bit bolder but you need really sharp eyes to catch that.

Even though I know the system quite well, I found myself trying to edit non-editable fields.

1 Like
11

Just found this:

https://github.com/frappe/frappe/pull/12343

12

Tag @surajshetty and @prssannad for feedback!

13

Thread necromancy!

I’m really quite surprised that I couldn’t find more people complaining about this in issues and on the forum - maybe I just couldn’t find them (there are over 1,000 open Frappe issues, after all).

I am happy that the UX has moved from Bootstrap 3 to Bootstrap 4 (which is much better), even though it will probably break lots of the custom abuse I have implemented. Matching the website is very sensible. So my criticisms are related to some (not all) of the design decisions.

By far the worst offence is using boxes without a border and with a grey background for data entry fields. This goes against basically every UI that a user will encounter across any operating system. The difference between read-only and writeable fields is so minor that they are very difficult to tell apart.

Could you honestly say that you could tell the difference between an empty read-only field and an empty writeable field, if you didn’t have them next to each other to compare? You should be able to instantly distinguish them - good UX should be reducing the cognitive load of the user,

I also don’t like that the titles of the fields, and the content of the fields, have both become more similar to each other. Users know what these fields are - because they use them all the time. The old titles were a paler grey and generally more subtle - they stayed out of the way and were there for you to orient yourself but didn’t get in the way. Meanwhile, the content of the fields (the bit you were interested in) was strong, often bold, and easily identifiable and readable. The yellow background to mandatory fields was subtle but useful.

In the new version, the title text and the content is all the same, all overlaid on grey. It just hits you as a wall of greyness - text all of a similar size in various shades of grey on fields with not borders and various shades of grey. No good indication of read-only/writeable, no good indication of mandatory fields, no clear structure to help guide the eyes.

Basically, ERPNext seems to have decided that ‘all shall be grey’, aiming for the lowest possible contrast washed-out style. Currently, I can’t release V13 to our business, although I think just a few minor CSS tweaks can fix an awful lot.

Rant over :slight_smile:

2 Likes
14

Applying white theme can address your no border issue

15

Could you explain where you can apply themes for the Desk/App?

Next annoyance - is there a way to always display filters when on the list view? Not always being able to see filters is just asking for trouble, because it’s very easy to waste time because you didn’t realise a filter was on.

1 Like
16

Install this app for theme

It can address your border issue

17

I also had to integrate this whitetheme css into my custom app.
Greyed editable input breaks all standards … It makes no sense to me and is really confusing for users.