Edoardo Guzzi: i just tested it... searched for "sticky" and it pulled up nothing --- even though that is a setting in the advanced wrapper

Joe Green: You need to click the settings icon if you want to search the styles in Advanced > Wrapper.

Louis Reingold: thank you

Louis Reingold: let's forget what everyone wants and what they are suggesting. Let's forget this comparison to Elementor as you're the new kid on the block so obviously you will have things done better but in 12 to 15 months they will out do you as I watch this happen across many wp plugins.

Let's forget all that - I just have one question.

In what world is clicking a tab, then clicking a drop down, then clicking to reveal a popup, then clicking to reveal another popup - all just to get to a setting that is actually critical to many design layouts - in what world is that acceptable?

Further more there are 4 breakpoints imagine having to do this at 4 different breakpoints. Imagine having to do it just to find out if it's set?

This is a very serious design fauspas by every standard in the book and you have it on countless settings and elements.

This needs fixing by anyone's stsndards.

Teaching someone to code is easier than teaching them how to get to commonly needed settings, four levels deep.

It's one of the software's largest flaws.

> a setting that is actually critical to many design layouts

Name the specific setting.

Obviously we can't put every setting front and center at the top of the panel, for reasons that are obvious and have been discussed in this thread and elsewhere.

So which setting in particular?

> In what world is clicking a tab, then clicking a drop down, then clicking to reveal a popup, then clicking to reveal another popup - all just to get to a setting that is actually critical to many design layouts - in what world is that acceptable?

Why are you not using the search feature at the bottom of the properties panel? Click once, type three letters, and voila, there is your setting.

Kyle Jude Batteson: I love you. Thank you. Exactly.

To everyone else, I'm not saying that there's no way we could re-organize certain things to get them easier. For example, z-index gets used somewhat often, we could certainly put that closer to the top of the advanced controls. So does absolute/relative positioning.

When Kyle said "I'm not prepared to scroll down 5 pages of options to find what I need ", I couldn't agree more.

Louis Reingold: how about customisable hotkeys or workspace config. I was originally very frustrated going 5 levels deep for positioning controls and z index etc (which was a lot), however now that im getting the hang of the search function its becoming quicker. Maybe its not so much about rethinking the ui but perhaps giving the user a bit of personal control over access to regularly used stuff. Photoshop would be a nightmare if i was not able to set up hotkeys and workspace layouts to make it fit my way of working. Just a thought...

Kyle Jude Batteson: Agree, I just the current UI. It could be better, yes like everything, but it works for me and it is fast for me.

Louis Reingold: heres a creative idea. Create a ui challenge. Anoyone who can produce a better ui, whether it be drawn on paper or a flow chart software detailing a better ui wins a free year of BD. Lots of talent in the wild

Louis Reingold: the thing I'm missing the most are the standard flexbox controls every builder nowadays provide. I find it exhausting to switch the tab and go couple popups deep to get the design I want.

I'm sometimes still searching what to do to get a simple 2 click flexbox configuration. Section, Inner Section, Element Wrapper, Element inner Wrapper > accessing these is difficult because some settings are right at the front – though structured in a way which is unintuitive for me and others are multiple clicks away.

Every builder is providing a simple control panel for flexbox which are also similar to one another. I would choose what people are already used to instead of reinventing the wheel.

This is def my biggest issue I have with breakdance – otherwise loving it

Your flexbox controls are only 1 click away right now: https://www.loom.com/share/4be71120a1b04cdc8923a770d39a3c80

For those of you who insist in thinking in CSS, I get it, I'm one of you, but we are not designing the product for the 1% of people who think in CSS - so the controls are going to have different labels, but they are still flexbox. We just aren't using the flexbox terminology for labeling them.

Again, the layout controls that are 1 click away for Section, Div, Column, etc. are flexbox.

The control we don't have there is flex-wrap, and we aren't gonna put it there, because 99% of you are using it wrong.

Louis Reingold: I understand. Maybe one day we get an option in the settings to toggle "Advanced Mode" for CSS-Thinkers. But I'm sure there are way more pressing and important things to do right now. And thats fine – Its a great product even if it never provides advanced CSS controls.

It provides the controls right now. Those are flexbox controls. The only thing different about them are the labels we use in the UI.

Louis Reingold: I do understand that you need to stay flexible with the multiple possibilities and you put much thought to make the granular controls manageable and not overwhelming. However, the UI could benefit a lot from a few subtle improvements. The primary goal should be to reduce the number of clicks, the need to scroll and to create better visual hierarchies.

Please take some time to read and consider my suggestions:

The most beneficial step would be to remove the toggle of all accordion groups (.properties-panel-accordion) . This would allow to reduce the height of the titlebar of each group. The setting groups should be separated from one another with some spacing and a border, the title set in bold and all the settings of the group indented.

With this change for most elements 90% of their main properties would become directly accessible.

Reduce the padding between settings so the lines are a bit closer together and more will fit on the screen without the need to scroll.

Another few ideas where space could be saved:

a) The sets for vertical and horizontal alignment (.breakdance-button-bar-input) would easily fit in one line.

b) The block with the four values for padding and for margin could fit next to each other.

c) Some settings don't need a whole line, there are many cases where two could fit nicely in one line.

Dropdowns with less than four or five options (e.g. Height: Fit Content/Viewport/Custom or Border Style: solid/dashed/dotted/none or Typography Effects Fill: Transparent/Gradient/Image) should be replaced with (radio) buttons.

The fly-outs are a good idea in principle, but there are way too many. Sometimes there are fly-outs with just two options that would fit in the same space of the line with the button to open the fly-out (e.g. ). Even if in some cases that will use up a little bit more space it were economical to have the settings in the parent (e.g. or ).

The seven categories of (Background, Layer, Size, Typography, Spacing, Border, Effects) could be moved from the fly-out to the parent and instead of another fly-out it would be consistent to have setting for the hover states directly on the seven categories.

For better usability the icon for hover settings (and also that for device widths) should not only be visible on hover but permanently in a grey-out color (and when changed in accent color).

Make .indicator-light (the tiny dot indicating a change of values) a little bigger and give it an accent color.

Give input fields' borders that same accent color while they are active.

The border of the active fly-out menu should also have an accent color border (with many open fly-out menus it would help to see on one glance which one is active)

Breakdance's presentation is very tidy and neat. But it's just tedious when you have to open fly-outs over and over again and need a multitude of clicks to get to the desired setting (or to find it in the first place).

__

I would be more than happy to discuss my suggestions in a screen sharing session.

Louis Reingold: Hi Louis, Thx for joining!

Well, What is offered here is a closer approach to UI/UX that gives a fast and easy approach. shouldn't be exactly the same.

I saw your comment with "Natalie Smthatall" Frames is looks is the right fit?

Okay let's discuss this:

Frames also copied Webflow & Figma and made what they present now.

Simply:

One panel for editing any element, And the options changed dynamically, Depending on the element.

Frames, Added more options like CSS editor there too and more.

The point is:

There is NO navigation and NO stacked popups. Just One panel, scroll, and edit, It Works with any element.

I think you have the best picture of the UI/UX approach now.

Best

Kareem

Kareem: There are some popups in Framer as well but not as stacked

Natalie Small: it's all about making the new UI/UX better! if Framers, Figma...Webflow handles one part incorrectly.

Well, They (BD) are able to create it better.

Kareem, just to be clear, many of our elements have 10 to 50x as many options are the ones you showed in the screenshot.

Are you saying you want to scroll 20000px and have them all top level?

Yes? If so, OK, understood.

If not, what are you proposing?

Christian, thanks for the feedback, I've responded here, and everyone in this thread would be served well by watching this video because it'll give you a great understanding about how we are currently thinking about this:

Louis Reingold: I think there's basically 2 users. Content editor and developer/designer.

Content editors don't need any controls short of text and images (with a few exceptions). The developer needs css controls and advanced controls folded out (not in popups). Keep the basics up front for content editors and keep your focus on them please but also allow the advanced or hidden or popup areas to be laid out flat for developers - currently slider controls on some blocks are that difficult that I find it easier writing the entire slider attribute code in script.

And please don't forget, content editors are journalists, business owners, etc - their task of actually entering paragraphs of text with links to pages and maybe a button or a hr is close to impossible in Breakdance. What's with that, don't you want people entering text?

Louis Reingold: Hello Louis,

What I suggested is subjective!

I've looked again and again, I am still confident this one is the finest approach I've seen.

Framers & Figma & Webflow have many elements also.

I did look at some of the elements again in BD that have more elements, And I did a prototype.

If you are on a small screen like 15/14 yes it requires some more scrolls, but in a big screen when this dev's mostly used. It looks fine.

even, e.g. you can adjust this with 2 tabs or 3.

One for style, another for advance, and another for accessibility.

The above and what I suggest it's still far better UI/UX than the current BD.

It's all about your decision.

I see you are so picky with the comments too, The ones who agree with you, or didn't even bring something to the table or suggest a better solution, And happy with the current popup stacked editors. you totally agree with them.

How about a poll on the FB community about the BD UI/UX?

Regards

> And I did a prototype

Please show us the prototype.

Show us exactly how you are going to organize the options for our Menu Builder element in the way you are suggesting.

Louis Reingold: Thank you for taking the time to respond. I do understand most of your thinking and the philosophy behind it.

Nonetheless I'm looking forward to UI improvements you eventually will come up with over time!

Louis Reingold: The most valuable reminder that any developer could have is to continually watch people use your product... newbies, experts, and a few dozen inbetween. These forums always get overwhelming with way too many ideas, and when people go to submit a new idea, they cross their fingers hoping that somebody may read it in a couple years, and perhaps in 10 years it will actually get implemented.

SOLUTION! The designer needs to spend at the very most half of their "listening time" reading and working on the most popular feature suggestions in canny. The other half or more should be spent watching first-hand the real experiences that people are having through the act of OBSERVATION. This is how little, tiny IDEO won more industrial design awards than BMW, Samsung, etc. It is how the little guy will beat and stay ahead of Elementor. Sit down for a couple hours every week and just watch a random user use your product. Then spend several hours talking with them asking questions and understanding why in the hell they did some of the things they did. Start with newbie, then observe a person who has done web design for decades. If you can create something that both extremes love, you've made it to designer heaven! Because chances are you will have everybody in between loving it too! Observe the extremes multiple times and observe people in the middle with a year to ten years of design experience as well. And do this indefinitely until all the friction is gone.

The first observation I recommend -- REDUCE CLICKS --- How often are people clicking when those clicks could have been avoided with a current or new feature in global settings or global blocks?

BD User: Actually a cool idea. Two different experiences. For the content editors there should be no menu at all. click the module and edit.

This.

Louis Reingold: So, can we get an UI like Framer? There's really no better UI at this point.

Please name 3 things.

Louis Reingold: Leo mention one. The UI , like many others have mentioned. I understand the need to be defensive but everyone here loves using Breakdance and these requests are not digs simply constructive advice on what would help make the builder easier for most people. Others have mentioned it but what if you had it as it is but then under the simple flex options had an accordion dropdown for Advanced?

People are probably just getting confused as they are expecting to see more than 4 options

We're genuinely asking the poster to name three most important things to them that take them longer to do in Breakdance than it takes them in Elementor.

Then we can investigate areas for improvements.

Or point the poster in the right direction to use Breakdance properly.

Please be specific. Don't say "UI" - that's way too vague.

What specific thing takes longer in Breakdance? Setting flex-wrap? OK, that's 1. But the rest of the flexbox controls are more easily accessible in Breakdance, and 99% of people are using flex-wrap wrong (and don't need to use it at all in the first place).

This feature requests board is to get feedback, and the more specific it is, the better. "UI" is vague to the point of being meaningless.

Louis Reingold: let's compare it to Gutenberg. Task 1: entering text and maintaining an information or blog-based site (60% of websites) - Gutenberg is not only 10 times faster and easier but it does things that are impossible in Breakdance. This is with core blocks only. Breakdance can't be used as an editor on information sites or blogs - it's a fish out of water. Your whole text entry philosophy needs to be thrown out and re-established.

There's many more things where Gutenberg is way faster and easier but that one is certainly the elephant in the room.

Léo Dugué: I disagree wholeheartedly. BD has easily the best and fastest web builder UI I've used so far that can manage a plethora of customisation options without slowing down. I dare say it is my favourite part of the builder and I'm actually enjoying building websites again after all the djanky ones I've used over the years.

Max Greßler: It is an hard overwrite for all i think. you only need to click on the bottom on modified and you can see all settings you have done.

Max Greßler: had the same thought. Same settings in two places