Beta 1: Initial Feedback

Beta
#1

Bravissimo! This update is a huge step towards the throne in the world of Page builders. Or perhaps even Pro is at the throne already, and this just creates a huge layer of dust between it and its competitors. :wink:

I absolutely love the Dev Console! The issue with it is that once I enable it, it doesn’t stay enabled permanently I see myself using it a lot as a way to quickly get to various settings.

I am noticing that Global block content is not properly rendered inside the Pro builder. I have bunch of pictures inside columns, and they don’t have any margins and their row is not showing the correct layout.

I didn’t expect to be saying this, but I find the new visual UI to be a step backwards a bit. The old design was minimalist, non-intrusive. For example, the blue highlight on the selected tab is too much in my opinion. The UI design should not compete with and distract from the Content.

image

I’ll get back with more. Thanks!

#2

I do think the new design will take some getting used to…

I agree about the blue bar being a little too much, and I also wonder whether certain aspects like theme options can be blocked out by user account type. Thinking about client usage and the headache if things become overly complex for them

1 Like
#3

Thanks Misho!

I absolutely love the Dev Console! The issue with it is that once I enable it, it doesn’t stay enabled permanently I see myself using it a lot as a way to quickly get to various settings.

Thanks! Try saving after editing the preferences. It should be tied to your WordPress user account.

I am noticing that Global block content is not properly rendered inside the Pro builder. I have bunch of pictures inside columns, and they don’t have any margins and their row is not showing the correct layout.

Yes, something is definitely off there. I’ll update this thread when it’s worked out: Beta 1: Global Block Rendering

I didn’t expect to be saying this, but I find the new visual UI to be a step backwards a bit. The old design was minimalist, non-intrusive. For example, the blue highlight on the selected tab is too much in my opinion. The UI design should not compete with and distract from the Content.

Really appreciate the openness about it. So with the UI, is it the contrast of that colored area being so large?

One of the challenges we’ve seen with new users of Pro is people finding it complicated and overwhelming with everything going on. I can see how that UI element (big blue button) itself could be seen as intrusive compared to everything else. I’m a bit torn though because I don’t want it to feel like everything blends together. The purpose of that accent color is to focus your attention on important things you can interactive with.

Looking side by side at the old/new versions you can see one of the focuses was actually making it more minimal by reducing use of borders and shading. It’s more of a feeling thing, but we hope making it less busy will make it feel more simple.

In your personal option, what would make it better? Different color? Curious on any other thoughts you might have. Also, after you’ve played around with it some more let us know if there’s anything else that sticks out to you like that.

One idea we’ve thrown around is making a whole bunch more UI themes. In the spirit of choosing your own path with the workflow, I could see there being different color and contrast options. They’re not overly difficult to make because all the colors are managed as CSS vars. We would probably base them around popular code editor schemes.

You know that code editor in the dev console? Something you can play around with for yourself is tossing one of these inside:

Override the blue accent color everywhere

:root.tco-ui-theme-dark {
  --c-accent: #000;
}

Override the blue accent color in just the workspace header:

.tco-workspace-nav {
  --c-accent: #000;
}
#4

Scot, as for Theme Options, even though it’s directly accessible in the builders now, that tab doesn’t appear unless the user has the WordPress manage_options capability. you could restrict access by giving them a different user role.

2 Likes
#5

Perfect Alex, that calms my mind

1 Like
#6

I am also not a fan of the big blue buttons. I also find it quite disconcerting when the buttons change size and shift around because you are adding the wording after we click them. I get why you’re doing it but…

#7

@Misho Wanted to followup to let you know that Global Block issue is solved for the next patch.

1 Like
#8

Hi Alexander!

Yes. When we do conversion optimization, we are creating contrasting Call to actions because we know they should draw attention. This is happening at a subconscious level. With the current buttons part of the attention is “stolen” all the time. We would get used to it, but it would never actually stop.

Great UI in tools like Photoshop is made in the least intrusive way possible, so it doesn’t “disturb” the creative process. Pro is very similar in nature and I don’t think people would find blending to be a bad thing. :slight_smile:

Since the whole UI is monochromatic as it should be, a different color doesn’t seems like a solution at all. If we take everything that is happening on the page, taking both the builder’s UI and the content we are working on, any button in the UI is at the “secondary CTA level”, because the primary stuff is inside the content builder.

If we go with a different color, we are moving into the “primary CTA” ground, and that competes with the website that is being built. I am not saying this is a huge problem or something. It just doesn’t feel natural and professional.

I think that the background color of the sidebar would be one of the options that could work nicely:

image

Plus it is the font-weight of 400, to make it more clear. I must say that I am not a big fan of bold fonts when they are against monochromatic backgrounds. For example, the “Apply Preset” below looks blurry because of anti-aliasing involved. I think those fonts should either be thinner or sharper.

I am also noticing the redundant second click with the button to view the page on the front-end. I understand this has a purpose in other builders where loading the preview shares the popup with the Preview switcher, but this is not the case in the Content builder. Also, this is not the ideal place for it anyway. For example inside the Header builder, the Preview switcher to me makes more sense inside the Header settings, bellow the assignment. It is fantastic to have it, but we will make disproportionally more previewing on the front end than using the preview switcher.

I’ll play with the rest over the weekend and see if I can find anything else. :+1:

1 Like
#9

Ok, I’m tracking with you. So it’s mostly the idea of having a color at all doesn’t sit right with you. You make some really great points here, and I like how a monochrome approach solves those concerns. As for things blending together, I think people who are veterans of the tool wouldn’t at all mind it, and many like yourself would prefer it. My concern is more for the new users. That color, used sparingly, brings a distinct visual hierarchy to things in many areas of the tool.

We do focus on Pro being for professional users, and that has quite a bit to do with the feature sets available. In our decision making we also have to consider that the same UI is shared with X/Cornerstone users, and we want to keep a consistent experience for people graduating to Pro.

As to the comparison with Photoshop, you’re right, not much going on there that distracts from the workflow. Photoshop is also at the higher end of the learning curve when it comes to design tools. If you look at tools like Sketch and Figma, there’s often use of an accent color to reinforce hierarchy.

I think in cases like this when we have strong cases for multiple directions, we need to make more options available. So at a bare minimum we have the app CSS editor, but maybe we want to add “Dark (Monochrome)” and “Light (Monochrome)” color schemes that are based on the originals but omit the accent color. This would give users a way to opt-in for a more distraction free experience once they are more comfortable with the tool.

I am also noticing the redundant second click with the button to view the page on the front-end. I understand this has a purpose in other builders where loading the preview shares the popup with the Preview switcher, but this is not the case in the Content builder. Also, this is not the ideal place for it anyway. For example inside the Header builder, the Preview switcher to me makes more sense inside the Header settings, bellow the assignment. It is fantastic to have it, but we will make disproportionally more previewing on the front end than using the preview switcher.

Good point. I think what we can do in this case is make the base button an anchor tag. So you can cmd/ctrl click it to jump right to the front end. The content builder view is a bit underwhelming. We’re reserving some space in that dropdown to potentially manage other functionality of the preview window when we get further along with responsive styling.

1 Like
#10

@alexander, sounds like a great solution!

Ok, anchor tag would be good as well. I think I was clicking it with the middle mouse even before, out of some strange unnecessary habit, so it won’t change a lot for me. :slight_smile:

Btw, I am now noticing even more bold fonts. This time in the html text editor. It goes against most legibility rules. The paragraphs of bold text is hard to read, especially if the letter spacing is not adjusted to accommodate the bolder type. I think that the font weight should go back to as it was before.

I like that the Rich text now has the white background, even in the dark mode.

1 Like
#11

Thanks! Sounds good. Will confirm here when that anchor tag is in. Still haven’t gotten there. I’ll pass this feedback over to Kory. He’s been working on light mode and making other adjustments here and there.

#12

I’ve gone ahead and updated the HTML editor to go back to a monospace font and lowered the weight on it.

1 Like
#13

Confirming that we made the main bar button for “View Site URL” an anchor so it can be ctrl/cmd clicked to open in a new tab.

1 Like