Feedback: New UI

[alexanderkalachev]

It was really unexpected when right before the New Year I updated Sanity to the latest release (not major) and suddenly the whole Studio looked completely different. I noticed that some of the list previews are not working properly, but because it was the end of the year, I just downgraded to previous release and went for a holiday.

Now, I am coming back to current projects and, while wanting to work with latest available tools, really starting to feel a lot of dissatisfaction with new Studio experience.

New UI feels more like step back rather than forward. New dimensions feel out of proportions, text is way too small and the spacing is way to excessive in some places and too tight in others.

I wonder what everyone is thinking about it. Is it only me who thinks the release is premature and old UI was more solid?

[kabforks]

I second this. Our editors complain about the lack of contrast as well.

What is the best way to customize/override some of the CSS defaults?

[robinpyon]

Assuming you're talking beyond colours – we currently don't provide an ergonomic way to do this via studio config. Are you able to speak to the level of customisation you're after?

[kabforks]

Thanks for the response! Yes, I can get specific. A couple of notes... I, personally, find the UI pleasing using an OLED screen or a Dell 4k Ultrasharp with brilliant contrast. On my work screen though (1440p), with poorer (or should I say normal) contrast, it's not as optimal

1. Inter font is very, very popular, but it's not as sharp as Segoe UI or Arial on a windows computer, at 13px. If you combine that with font-color #252837, readability suffers.

2. Compared to the old UI, these headlines are a little hard to distinguish from normal text

3. I find the font-weight here a little on the soft side (font weight 500)

4. Grid gap is set to 3.25 rem. This works okay for some things, but not for others, like a lot of checkboxes in a row

In the screenshot below, I've adjusted the font color slightly to have more contrast, and increased the font-weight to improve readability. Also, the gap between elements is reduced:

Assuming you're talking beyond colours – we currently don't provide an ergonomic way to do this via studio config.

Yes, I am. Perhaps I could inject a custom CSS stylesheet or similar (as a hack) ?

I've included a version with Segoe UI font, which is much crisper at 13px:

I understand you are making a UI that is pleasing for all, but if I just could make these tiny adjustments, I'd be very happy.

[lirobinxc]

Agreed on all points, especially the grid-gap. 3.25rem is too much, it makes scanning documents difficult. Please shrink it or at least give us a "Compact" option.

[robinpyon]

Thanks for your feedback! We are taking this on board, especially concerns surrounding text size and accessibility.

These recent changes represent ongoing work to reduce visual complexity within the studio whilst adding more predictability to various surfaces.

Some changes (such as field spacing) may make more sense in the context of upcoming features and our longer-term ambitions, which may not be apparent now. That said, these are not immutable changes! This work also doesn't represent a finished state – but rather a starting point for a slew of UI improvements we hope to release at a much more steady clip this year.

[alejandrovrojas]

Some changes (such as field spacing) may make more sense in the context of upcoming features

In that case it would also make sense to introduce visual changes along with the features that require them.

As mentioned above, the much lower contrast (on light mode at least) along with the reduced font weight for headings impacts the general readability in the studio very negatively. The reduced font size in list items (and array inputs) is not much of an issue except that the padding stayed the same so there is no trade-off. Reducing the padding would at least increase density allowing users to zoom in without loosing as much content off screen.

On that note what really impacts information density negatively is the increased line height. I have clients who work on very dense documents on displays rotated 90° so the vertical screen estate is indispensable and the redesign therefore becomes a downgrade.

Personally I don't mind the increased gap between fields, but the increased leading is too loose, which is specially noticeable in field descriptions. Inside boolean fields the gap between field title and description is the same as the box padding, but the gap between title/description looks optically bigger (x-height to baseline) and thereby looking slightly off as well.

[lirobinxc]

These recent changes represent ongoing work to reduce visual complexity within the studio whilst adding more predictability to various surfaces.

Ironically, I find the new UI more difficult to use. Font is too small, contrast is weaker, huge gaps between fields, overly large document title.