Beta 2: UI Suggestions

[samc]

Not that pressing as you guys are working through tons of features
With that the complexity is going up. Just some ideas that might be good. useful for navigating everything quickly

1. On breadcrumb If you click an item that is already open like “Setup” it will scroll to that section and close it. I think this is fine but hard to see what has happened. maybe if the expanding/collapsing sections had a very short animation? or option for one? (or subtle flash of colour that fades away.)

2. Also the breadcrumb doesn’t give much feedback that its toggled open(especially when hovering over the item). I don’t know if this can be made more obvious. I can see things want to be kept compact
   

3. In the setup panel if you hit advanced checkbox it adds background options in Design maybe it would be useful to flash the banner to show something has changed here. if its collapsed the average user won’t know.

4. Do you think an option for 2 rows would be possible or would that just clutter it up?
   

5. Link Sides not mega important. but is it possible to have this working for breakpoints as you can only adjust one side. I can imagine this has its own complications.

6. Very rough idea but I really like the way blender uses tabs on the left to keep things to hand and intuitive to the column on the right(would be nice as an option). if done right… now that you have put all these parts into expandable sections. you might even be able to do away with the control groups section altogether.
   

   
   
   If not I like what is has been done to bring the Effects, Customise, Presets closer to the main panel but does it clutter the interface a bit? maybe Setup, Size, Design… headings could just have a different colour to the drawer contents.

Anyway these suggestions might be just personal taste but would be interested to know what you think.
Thanks

[alexander]

Hi Sam,

Really great feedback here! thanks for taking the time to write it up.

For 1, 2 and 3. There were definitely some quirks with the two navigations not relating to each other properly. We have changed it to behave like this:

• When the Workspace is vertical, clicking an item will open it if it isn’t already open, then scroll you to it
• The active state is not tracked in vertical mode. They’re all just light gray with a hover state.
• The Advanced backgrounds have been moved into their own group that appear directly after Setup when enabled. The only exception is elements that have a “Layout” group which is prioritized to always be the first thing after Setup. This way in most cases you’ll see it right away. We don’t really want to add any kind of transient flashing. For some features enabled from Setup like “Graphic” you’ll still need to scroll down to discover those controls.

4. I can see what you’re getting at here. We don’t really want to facilitate taking up more space out of the preview-able area. There’s also some other ideas we want to explore for utilizing that space (I’ll ask you about it at the end)

5. We’ve got some issues with the dimensions control at the moment to work through. If I recall correctly, what you’re describing should actually be the final behavior.

6. This would for sure be a very space efficient approach. Thanks for showing the mocked up comparison with Blender. They’ve got some really cool UI patterns. As much as possible we try to avoid icons when it comes to navigation. They’re nice for performing actions, but we feel when onboarding new users it’s easier when things are just displayed as text. The labels “Setup”, “Size”, etc. were still there before, so compared to the previous update we’ve just made them collapsible.

While testing this internally, we had some discussions like this and there were two schools of thought that emerged in relation to those headings. 1. If they are more pronounced, there’s a more clear visual hierarchy. 2. If they are less pronounced, it draws your focus to the actual controls inside that matter. We ended up settling on the first path. You’re right though, it’s definitely one of those subjective things that could come down to personal preference. Under Dev Toolkit > UI CSS you could play around with customizing it for your own workflow. Here’s some CSS that would prevent it from turning white when active. You could also try adjust the font size.

.tco-control-section-heading.is-control-accordion-heading.is-active,
.tco-control-section-heading.is-control-accordion-heading.is-active svg {
  color: var(--c-base);
}

You’ve certainly put some critical thinking into all this, so just while we’re here let me float something by you that we’ve talked about potentially doing down the road. I don’t have Imagine this hypothetical:

• When the Workspace is vertical, the control navigation (Column, Effects, Customize, etc.) is absent from the Element Bar Navigation. Our thought is at this point it is redundant since all the same actions can be doing faster in the Inspector itself.

• When the workspace is horizontal (drag to top/bottom edge) the control navigation will sit in the same bar as the actual workspace navigation, but off to the right. For example:
  

  

• At this point the Element Bar only shows breadcrumbs. Because that space is freed up, we could create an area for actions like duplicate, delete, and a popout for managing presets and remove the respective actions from the Inspector). That would help the Inspector be truly data focused, while keeping those actions top level.

I’m sorry for trying to communicate most of this in text form since often it’s easier to just see it, but it’s far enough that I can’t make a proper proposal just yet. Curious of your hot-take on reshuffling things like that.

Thanks again for your time and feedback!

[samc]

Oh ha I’ve opened a can of worms

@alexander

Advanced backgrounds have been moved into their own group

The custom UI styles is a great feature I wonder if there might be built in presets down the road.

Horizontal is great I’ve not used it loads as the vertical was working for but now things have expanded somewhat.

.tco-control-group:nth-child(2n) {
      background-color: #4a4a4a;
}

//maybe this also
.tco-control-group-label {
  font-size: 16px;
}

“personally” I quite like that style but again subjective.

When you select a text element. it scrolls forever and wish I could use(enable) the mouse wheel. oh I can with shift!

I think my bar is isn’t working as it comes in two parts for me and dragged it down separately to look like this.

I wonder if "Setup, Size, … might be separated from within #Element | Effects | Customize bit as they jump around. this really let you concentrate on jumping to where you want in that section. in pic below

Rather than relocated the duplicate delete maybe it can be a hub for more stuff. see very rough pic.

Horizontal might be the way to go for me now as the titles all line up nice.

OK I’m done now. must get back to work

Thanks

[alexander]

Glad you like the custom UI CSS!

When you select a text element. it scrolls forever and wish I could use(enable) the mouse wheel. oh I can with shift!

Yes, that’s just a normal horizontal scrolling area. We don’t hijack the browser behavior at all, so with a mouse you have to hold shift. It scrolls naturally with a trackpad though.

I think my bar is isn’t working as it comes in two parts for me and dragged it down separately to look like this.

Your screenshot is the current behavior. My last screenshot was just a mockup of an idea we’re considering later on.

I wonder if "Setup, Size, … might be separated from within #Element | Effects | Customize bit as they jump around. this really let you concentrate on jumping to where you want in that section. in pic below

I don’t think we’d ever separate the sub-groups from their corresponding top level groups since it helps new users understand the relationship. Definitely an interesting idea though to be more space efficient.

[samc]

@alexander

I don’t think we’d ever separate the sub-groups from their corresponding top level groups since it helps new users understand the relationship. Definitely an interesting idea though to be more space efficient

Yes I can appreciate that. wide range of users. (clients and developers) if there is room for more power options then I’m sure it would be appreciated by that group. I don’t know if a bit of color would work to keep the relationship.

Anyway thanks for looking into these requests.

[alexander]

There’s also a huge range within what might be considered “developers”. Being a WordPress theme, a significant part of our user base is people who are just getting started in development and may not even have experience in design tools. Sometimes it takes us several revisions to strike what feels like the best balance of everything. At this point we’re sticking with what we have and are focused on bug fixing/polish work to finish the release. That said, there are some more adjustments we’ll need to make when we get back to the Theme Options reboot, that’s months away but I’d appreciate any more feedback once we start iterating again. Thanks again for you time and thoughts shared here!

[Maratopia_Digital]

Hello,

As I’ve been working more and more on Beta 2 and with a bit of experience of other builders, I’ve put together a few suggestions that I thought I’d run past you guys in case it intrigues you.

---

Height & Width Labels
In the previous version, the width and height were labelled a bit better. It can be a bit confusing to the eye differentiating between the width and height when they all have very similar labels ie. min width, min height, max width, max height, etc. In the rush of things I find myself having to double-check or even triple-checking which value I’m changing. A bit of separation between width and height might do the trick, here is a little mockup of how it could look:

---

Position - Quick Positioning Buttons
With the introduction of the DIV element, I’ve been using them more and more because of how versatile they can be. When using the absolute position, most of the time I either have them fully spaced ( top:0px right:0px btm:0px left:0px), or I like to position the div starting from each corner and work my way through where I want them to be. I thought that maybe some quick buttons for these occasions mght be helpful. Below is how it could look like:

---

Flexbox Direction
At the moment the flexbox direction is behaving as a dropdown menu with 4 options. In my opinion, because it’s such a small menu these options can be transformed into buttons for quick access. The direction dropdown is essentially 2 clicks but with buttons, it will only be 1 click. In the grand scheme of things, it might not sound like a lot but when working with loads of flexboxes, the 2 clicks can really add up. So maybe a solution like the one below might help with this:

Just icons can be a bit hard to understand for the new users or users with little experience on flexboxes, so a hover over these icons with the label of each would be useful for these users. After they’ve used it a couple of times it becomes more muscle memory and they won’t have to wait for the hover label to understand what they are.

I would even go as far as to say that the horizontal and vertical options could also go into a button layout but I know that would then be 6 buttons which can be harder to put into the current UI layout and might clutter things up which I know it’s not something you want. Nevertheless, I thought I’d put it out there

---

Cheers,
Jonathan

[alexander]

Thanks! Great ideas here. We’re going to leave the height/width labels as they are for now but I definitely see your point. Really cool idea with the quick actions for position absolute (would work for fixed as well). Very elegant way to get the most useful result in a single click. I’m going to add it to our feature backlog so we can review once we’re back out of bug fixing mode.

Regarding Flexbox, I’m glad you mentioned that! We actually went to the 4 options in that picker control because we had to update everything to be related to a single label on the lefthand side - so we just roughed that in to make it work for the time being. We were meaning to get back to it before the beta but weren’t able to. Earlier this week we made an adjustment and it now looks like this:

Horizontal/Vertical options are still in those pickers but at least we’ve been able to bring direction back to top level clicks.

[Maratopia_Digital]

@alexander

Earlier this week we made an adjustment and it now looks like this:

That’s even better, quicker to understand right off the bat!

[alexander]

Thanks!