[6.x] Let's Talk UX

[andjsch]

Bug description

I hate to bring this up on the all new shiny interface, and while it is shiny at first glance, I believe it comes with some huge downsides when it comes to usability. I don't know how others feel about it, but it's early and I hope we can find a solution. Let's break it up. I'll mark some of my conclusions/suggestions bold.

While these are some severe issues I see with the new design, please don't take them too harsh, but also don't take them too lightly. Currently we are still in an alpha state where things could improve a lot. I also know how hard it is to redesign a thing completely, yet alone how many hours it must have taken the whole team to pull this huge Vue 3 transition that took place in the background even off.

Primary button color

It's black! 😬

This is in my opinion a really bad choice, because it makes the UI hard to scan as it is mostly white and gray.

The primary actions are immediately visible, no searching required.

While this is still fine in light mode, some color would definitely make it way more easy. Bring back the blue! Why you might ask? Because the black primary color totally breaks in dark mode.

One could make some guesses that the light-gray is now a primary button. But is the selected-site-pill named "Statamic 6" one as well? The real primary button has some shadows and a light gradient applied, the pill is flat. Barely a difference. Some color would fix this here as well.

GH for reference.

Bring back a color for primary actions. Blue, green, pink - all great!

Destructive actions should always be red.

Color

This is a great example of the current hover situation for many items. It's all gray and white and you can barely tell a difference. Context: you are looking at a table with 2 items, the second one is hovered. It's barely visible and I am sure it will be even worse on a consumer grade monitor. Sitting here on a calibrated one just to have that mentioned. Make hover states darker.

Same issue with the menu items: A hovered element shouldn't be only distinct by it's background color. Give the text a different color - any color that makes it stand out more. The active state is fine I think - the text gets bold.

v5 did a great job here btw

Here another example on a replicator field. Right one is hovered.

Main navigation

While the old navigation was probably a bit too big text-size-wise for more nav entries, the current one is way too small for an item you interact the most with. This get's even worse when there are sub-items. We are at 14px (sm) on a level-1 nav item. Make them 16px again or let's meet in the middle at 15 ;D

Icons

Could sometimes be a notch bigger than the actual text (that's just a taste thing of mine) and have some more color or more contrast. Again, it's all so gray 😢

Inputs

Buttons should be darker.

What if inputs had a different background than white? Or the container they are in had a different background than white? White is a really shiny color that makes an element pop out if it's surrounding is a different color - make use of that! Use less white backgrounds. In the image above, I gave the container a color of zinc-50 and it works great in my opinion, huge improvement. What doesn't work is the slimmer border around the container, but who needs that one anyway?

For real?

This shouldn't be needed in the first place. Currently it gives inputs a darker border color. My suggestion is to not keep adding stuff to this mode to improve things. Improve them properly and get rid of that option.

How to reproduce

Spin up v6

Logs

Environment

v6

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[avocadesign]

I noticed a couple of other things straight away about the UX/UI that bother me. While I like the overall design choices there's some perplexing things that slow down the user and or make it more confusing. I agree with the colour points above. I know it's alpha so some of this might well be on the to do list already.

In addition I noticed

The removal of the quick link back to the collection list above the title of the entry you are editing.

I use this link all the time and immediately missed it when navigating a new install of v6 - I know you can click on the left hand menu and the collection in the dropdown but that's a lot more cursor movement and it felt slow and since it breaks muscle memory it also felt broken.

Secondly I find the new interface for managing field options very visually confusing. I think this is a significant usability step backwards. I totally understand the desire to shorten the page but the overal effect is that I don't know where to look. There's two columns then one then four then back to one etc. The old interface was very scannable and you could quickly scroll and find what you need. I don't know if it's the combination of all the different rows and widths and small borders but I just "bounce off" this interface and don't know where to look. It's hard to at a glance get a feel for where fields start and stop.

It also doesn't shorten it enough to make less scrolling for advanced options to justify it my opinion

There's a different approach taken in the Site options and I much much prefer this:

There's also still the issue where if you have a large bard field in a replicator and you scroll down you lose the text options off the top of the screen. this makes it very hard to add links or styling options that don't have keyboard shortcuts to the bard text. This last one is an existing issue with v5 also.

In live preview there's a lot of borders and lines that add to the confusion. I'd love if the small grey border and the rounding was removed for this view, it's not necessary and looks like visual bug against the drag bar on the preview window.

Finally on wide screens (27") i get the desire to make the editing interface not locked to a specific size but this feels way too much and will dramatically change the line length in text for clients (the current limit on the editing window roughly matches max line length that anything would reasonably be on a page)

What I do like (to balance the ship)

I love the new replicator set UI. That's really nice and keeps things "connected" with the dotted line

I also love the dark admin bar and the bread crumbs that's a winner

Hope that's helpful

[avocadesign]

The new placement of the item actions is also less intuitive. I accidentally ticked an entry in the list and then couldn't work out why I was getting a warning about leaving the page. Then I glanced at the bottom of the screen. The lack of colour in the buttons mentioned by @andjsch really makes that even worse. I doubt many clients would think to look down the bottom of the list for actions though as the filtering UI is at the top of a list and the system puts controls at the top of a view for the most part.

[avocadesign]

Finally from me - sorry for the many posts.

the placement of the column control in list views "inside" the view chrome (i.e. below the line that delineates the view tabs)

Makes it seem like the columns are a per view option not an overall option for the list view. I'd LOVE it if they were a per view option but the UX of that is confusing for new users.

[Oleafeon]

3 issues with 2fa

on dark mode there should be a white border arround the qr now scanners wont trigger it because of the background color

the copy button doesnt work

recorvery codes arent in dark mode

[duncanmcclean]

@Oleafeon This issue is more about general UX issues. Can you create an issue for the 2FA-related bugs?

[Oleafeon]

@Oleafeon This issue is more about general UX issues. Can you create an issue for the 2FA-related bugs?

@duncanmcclean
offcourse #12074

[afonic]

I agree with @avocadesign on the field options design. It's visually very confusing and the cognitive load is very high. It's a downgrade from the old design. Certainly changing the number of columns doesn't help (2 - 3 - 4 - 1 columns) and also putting everything on a "card" with its own toggle is not good UI because based on the content the controls are in different positions.

Also the Collection settings page suffers a bit from the same issues.

Also, maybe some display options that are common for most fields can be hidden? For instance the whole Sortable / Preview area with 4 toggles could be on a collapsed "Control panel display" section as I doubt many people change these.

[JonKaric]

I feel like there is something inherently wrong with the visual colour hierarchy. There are many layers stacked on top of one another, making it hard to parse the page visually.

Sidebar dark > Main area white > Section dark, > Section content white

I think an aim should be to reduce the number of layers and distinguish areas and sections differently, reducing cognitive load whilst helping guide peoples eyes and attention to the information they need.

I spent some time experimenting with what this could look like. In the examples below, a maximum of 3 layers is used. This makes a lot more hierarchical sense and creates a stacking effect that gives you a sense of where you are on the page.

1. Sidebar in the background
2. Content container in the middleground
3. Content sections, etc, are in the foreground

All I really did here was:

1. Increase the darkness of the sidebar background slightly
2. Increased darkness of the main content background
3. Removed the 'card' thingie background, borders and shadows.

Of course, they're just examples and mockups, but I feel like it's a great improvement, especially in some areas of the control panel like the field picker.

Before	After

Before	After

Before	After

Before	After