Improved Design view to include boostrap element drag and drop and in design manipulation

THE NEED

At the moment the “Design” view while a great start still needs considerable improvement to meet the no code objective and reduce the learning curve for bootstrap UI development.

While it is important to still provide options to dive into the code for those wanting to it is also important to help speed up front end deployment of a Bootstrap layouts, element manipulation, better styling in design view and so much more…

THE FEATURE REQUEST

What I am proposing is a bootstrap drag and drop and in-design view manipulation of the bootstrap elements and styles within the bootstrap framework.

For example drag and drop bootstrap prebuilt elements such as the method used here https://www.layoutit.com/build or similar would speed up creating a layout so much faster and is a framework that can e built upon and reduce the need to keep moving between panels, tabs and the bootstrap documentation to find out what is going on and how to achieve the desired look and feel.

Then if you wanted to manipulate further you could jump into the code or select options direct from design view.

It also opens up the options for personal saved design elements, creation of personal library of bootstrap design elements that can be quick reused for your projects.

CONSIDERATIONS

I acknowledge that traditional coders probably will prefer to be old school, but some of us want to build faster with a lower learning curve so we can get the product out there faster so we can start the real work of building the business. No coders are here to build, deploy and improve, not to code unless they want to.

I miss the whole ‘Drag and Drop’ craze. Wappler is ‘Point and Click’. So much easier and more precise.

2 Likes

Hi @brad not a craze more of a convention move towards no code design. Doesn’t suit coders and probably never will but new no code users absolutely, you only have to look at how kids are being introduced to coding in schools to know it’s here to stay. What I am suggesting does not go anywhere near the degree of most no code app development.

It could go further such as logic flow with connectors for back end development, voice flow is a great example for logic connection, bu5 gives you the option to get into the backend if needed.

1 Like

What are you finding hard about the point and click method? Is still no code and its smart in a way that it doesn’t let you do anything outsider of what is valid in bootstrap. It’s still no code. And much faster than trying to drag something into the right place.

2 Likes

Ok, so I will answer this by qualifying the feature suggestion. The debate is not simply drag and drop versus point and click - there is far more to it from a users behaviour. Let me explain and will qualify this coming from a career in usability research.

This is what we know.

  • All the research shows that boys prefer to drag and drop more than girls.
  • Drag and drop methods improve the learnability and discovery of a new system.
  • Point and click is not device agnostic and is ideal for some functionality but problematic in others. For example, repetitive tasks which rely on point and click can frustrate user as a drag and drop on a pizza website to build a pizza order would also frustrate users.
  • Drag and drop interface creation suits those who typically think visually rather than in code or category trees.
    *It fits for those who think in pictures and visual ideas and finds it easier to build and try ideas by taking a visual element and moving it on the screen, changing discovering and making a decision based on the visual outcome. Typically many entrepreneurs think this way, they build from ideas and need to see those ideas morph and develop.

This is not a one size fits all, but let me give you a few use cases.

Wappler has integrated drag and drop in a few places because point and click would have been interface problematic and time-consuming for the user. For example, use in sorting and ordering items on the App Structure page is far more efficient than clicking up and down arrows.

Let us take a new no-code user who wanted to add a “progress” type bars on the screen; they would look for the image or something that represents the item they think they want. In visual environment design view, we might have a selection to choose from so we drag one option on the screen and put it in the spot we want it in place and see how it looks. We don’t like it, so we drag the other on-screen and maybe compare the two, or they drag it into a different location. Having to first click on the screen and click on options and click around to find the right element is both frustrating and time consuming for this user.

Why, well because there is often an assumption by the people who build the system that the position of the element hidden behind two clicks is logical, and this is where point and click fails. “Normal” people do not think like coders, and they don’t know “where stuff is supposed to be”, or how “stuff is supposed to work” even if you point them to a help centre or documentation - because they don’t want to read it, that’s more time they could spend building and learning.

However, point and click as the only methodology defines function in terms of order trees or layered process. It assumes users would know they need to click on the page - click on the item, element category and then click on the item they want.

Where point and click restriction becomes an issue is where you add more features and often results in more tabs, more model windows, more layers and more levels. When this happens, everything gets hidden but is that a problem, well not for those building it because to them it is only logical that this is where it belongs. User frustration and dissatisfaction build when the complex system relies only on clicks bury 2 or 3 clicks down in-depth, and great features never see the light of day.

Now let us take our new no-code user, let’s assume its a male (only because from research he prefers drag and drop in this scenario). He wants to open the design view and make it the only space taking up the screen. He wants to see the available elements, choose one, move it on to the screen, position it and then if not happy drag it in a new position.

Now that he is happy, he might want to change the colour, so he sees an icon on the drag box which opens up a colour picker on which allows him to select the bootstrap options. It might also give him presets such as adding an animation strip to the progress bar - an option that you can see in the link I provided in the original post.

As I said it’s not about one versus the other, it is about adding drag and drop functionality to achieve a user objective and integrating both point and click and drag and drop to achieve the design goal.

1 Like

Actually not implementing a drag & drop system has been a design decision from the very beginning of Wappler.

Having a huge library of components that you drag and drop is very visually challenging as you have to continuously search for the right components and then drop them on the right place. So a lot of beginner designers make huge mistakes with nesting of the components and screw their layouts.

Even if the tool tries to enforce allowed dropping location then you will find another struggle of why can’t I just drop it here…

One of the strengths in Wappler is its context awareness. It offers you the right choice of components that are available at the right place. So no more choosing between thousands of components that aren’t suitable anyway - just the ones that are only possible.

Also all the bootstrap nesting rules are enforced so you don’t make a mess in the nesting.

Having all these guarantees a perfect design and visual easy as it smartly offers you just the right choices at the right location with the point and click.

So this is how Wappler is designed from the ground up - being smart for you.

People used to drag & drop systems will take a bit to adjust because they are used to work in chaos and fix their mistakes in many hours afterwards, but once you get the design philosophy of Wappler you will truly appreciate its greatness and save a lot of time.

9 Likes

I agree with @George here. Bootstrap is quite specific in how it should be used - from containers to rows to columns, etc. - so you should really have a good understanding of that when building pages. Drag and drop, when done well, can help but I can also see it ending up producing bloated layouts. I think Wappler has got the balance just right with its current ways of working. It took me a little while to get used to it, but now I can rattle out page designs very quickly and the code produced is clean and minimal.

3 Likes

This to me is the big win for Wappler, they never do things that compromises the end code result, they do it as if I were manually coding the page myself and better.

When I have looked at the code produced from other “no code” tools I have sometimes almost cried, iWeb was one that could bring the most hard ass man to tears. Un-bloated code is so important, it means less CSS, a faster website result in the users browser, less to go wrong, less for the google spider to try understand so better SEO rankings too.

Im sure Wappler could have given a far simpler “no code” product if they had been willing to make the ugliest code around, with auto generated IDs on every single character, and span tags splattered all over the place. Thank you Wappler for not lowering yourselves to where many of the other “no code” tools have gone.

1 Like

Well at the end of the day it’s your business and you app and I am not limited either way as I personally have the skills to adjust and learn and for me the outcome will be the same. But don’t lock yourself down, it might come back and bite you in the rear.

I appreciate the work done, but can also see that the early adopters here are not no coders, and I hope the community does not become critical of those who have little or no knowledge of code, bootstrap or how to manage a database. Sometimes it does feel that way, not as bad as stackoverflow, but something to be mindful off.

Delete this suggestion if you like, doesn’t make any difference to me but it might make a difference to someone else.

1 Like

You are correct on this as most of the early adopters were already DMXZone users, so for me as an example it was a very natural progression.
I started with Dreamweaver, and once I mastered Dreamweavers’ “no code” area, I started delving into the Dreamweaver code area, and once the Dreamweaver feature set started restricting what I wanted to achieve I then looked for extensions that could produce the results I wanted. Hence DMXZone and Project7 and a few others.
Once DMXZone started getting more and more extensions that filled in the gaps i needed, they moved onto Wappler.

Therefore many of us Wappler early adopters are originally from DMXZone, so already had a grasp on the tools themselves, and because many went through a similar lifecycle as myself many were already coders or “semi” coders, hack and hope, spray and pray, copy and paste coders.

I suppose for a person who has a starting point of Wappler, that did not go through many of the steps some of us did, this may still seem like a pretty daunting application to start with, but I think it’s the same as any new application, I mean I opened Final Cut Pro the other day and after just one look, closed it and opened iMovie. Could not have been bothered to learn all that to help my daughter make an instagram video, however if that were a career path I was venturing down, I think I would have to take the plunge, and I suppose thats similar in the case of Wappler.

Hopefully if the product ever gets to an almost complete phase of development, then they will add more blocks, to what they already offer, and more templates, and I think many users will also start making Wappler templates too.

2 Likes

I think one point that is also over looked is that I would guess that the user base has moved away from desktop computers and largely uses laptops with an additional monitor.

Drag and Drop without a mouse is a usability nightmare.

1 Like

I’m an early adopter and am in no way considered a coder. After 25 years I have come to understand basic code though, because it helps to know what is going on under the hood as much as possible to understand what is possible and I am a curious person by nature. But overall, I much prefer the ‘no code’ way of doing things that Wappler provides. I often go weeks without touching any code.

I am certainly not dissing you or your request. Just hoping you can understand that Wappler is ‘No Code’ if you want it to be that. You never have to touch the code if you don’t want to. It’s also ‘Low Code’ if that’s the way you like to work and even offers ‘Full Code’ if that’s your thing.

Wappler gives us a very good balance of all three workflows. :slight_smile:

1 Like

If you are a weirdo. You can say it :joy:

2 Likes

I think if Wappler could add a user watch folder that looks for custom “Blocks”, like the built in /Applications/Wappler.app/Contents/Resources/app.nw/Shared/DMXzone/dmxAppCreator/UI/blocks which are all small .html files with .svg previews it would help with this request, as well as the snippets request as well as the template requests, as I am pretty sure that the user base here would share their ready made blocks with the community, and we could build up a fairly large library.
As long as the people building them try stick with only using ready available bootstrap 4 classes for styling we could have 100 ready made blocks like the link provided on post 1 in no time.
This would make it much more like drag and drop, but actually select and click.

1 Like

Actually we will be calling them “partials” :slight_smile: part of the upcoming working with template engines and pages revamp

1 Like

Wonder if there is a discourse star rating system so users can rank the partials they share with the community, kind of like wordpress plugins does, so users don’t download a user made partial that is not quite as wonderful as intended.
Also gives people like me a fake ego boost to get a high rating and gives a false incentive to more and better ones.
Sort of like the pride I feel when I get a new forum badge, humans are odd creatures.

1 Like

Sorry disagree! I have done enough research studies to know that creative applications on tablets and touchscreen interfaces are a nightmare with reliance on point and click!

2 Likes

One thing I have learnt about this community is that you really need to think twice before taking up the baton for someone else (which I was attempting to do here), or investing time to thoughtfully communicate a different point of view to hopefully build a better product.

Now I know this it makes a lot of sense.

I am just here as a paying customer to build my app so I promise from now on I will stick to the job at hand! :grinning: Besides this is a distraction, probably need to get back to work.

I just ask that when you see me, or non DMXZone / Dreamweaver user (which will come from later adopters) when they ask a question which is clearly obvious to you, you don’t “tut tut!” the question and proceed to validate your position rather than listen and provide thoughtful responses.

But good luck everyone and on with my very large project!

You can close this suggestion now @Teodor Thanks. :grinning:

1 Like

I think the real issue is that people don’t want the team to work on something that will just make a small set of people a bit more productive. Maybe in another context(a team of 30) nobody would disagree with this being implemented. But there are other priorities that need to be addressed.

Remember that this originated from a “I come from Bubble and I want this product to behave like it” topic that belongs to a category called from Bubble to Wappler. It’s not called how to make Wappler feel more like Bubble.

It’s also not a matter of creating tribes. The Dreamweaver plebs, the fallen Bubblers and the all-mighty Coders. We are all plebs to @patrick anyway.

All in all, we have got a UI that does the job.

Edit: Forgot to mention that I did vote this FR. I don’t see a problem with adding drag and drop as an option as long as it is constrained by BS rules(Bootstrap, not bullshit). But for sure not now. Maybe for 4.0 because at some point they will need to reimagine the whole UI and UX experience. They already know that.

4 Likes

Noticed this on wappler home page :stuck_out_tongue:

image

3 Likes