Wappler UI improvements

Wappler General
#10

Yes and what an amazing piece of software you have created so far. Just giving feedback as requested. Please don’t feel that Webflow is the panacea, there was a learning curve for me there too, more about best practices though; the interface I ‘just got’.

I also use most Adobe products too and is also quite intuitive although they can miss the mark (gave up on DW years ago), but I can really give PS, Illustrator, InDesign, Premiere, Dimensions, XD a good work out.

Ableton Live (audio software) has a great tooltip box positioned bot right of screen which changes dynmically on rollover - see screenshot.

27%20copy
Screenshot 2019-02-19 at 20.25.27 copy.png1194×730 111 KB
28
Screenshot 2019-02-19 at 20.30.28.png1191×743 109 KB

2 Likes
#11

Wow I was thinking the same, I also use ableton and I really enjoy the quick info tool. This should definitely be implemented.

#12

As long as it can be turned off. Screen real estate is already at a premium in Wappler.

#13

I think the main drawback of wappler is the lack of documentation, videos and other learning tools. The UI is a matter of getting used to, once you understand it you’re good to go. But you really need proper learning tools otherwise it’s just not intuitive enough.

Videos are key in this by the way, for most people it’s the preferred way of learning i suppose.

5 Likes
#14

Hi again Teodor! I was reading Pachamama impressions about Wappler and I do understand how he feel using Wappler from a “Webflow” or similar visual builder perspective.

Many of them don’t know that Wappler is a compilation of dynamics php extensions put together in one tool and that at is base, is a tool for building dynamic sites (databases and queries etc.)

Now many new comers to Wappler are attracted by the “ALL VISUAL’ DESIGN” promise, but in fact what is the first goal of Wappler is that you can build “dynamic” sites" the visual way instead of coding.

The reality is that Wappler is not yet as visual builder as are Webflow, Wix, FlexiLayout etc.
Wappler is very powerful and that comes with some complexity level and need some time to understand as for the terminologies (needing some explanations in the UI). As Pachamama mentioned, visual tools like Weblow do offer some explanations right in the UI so users don’t always have to search and look for videos. One good example is the difference between Wappler APP panel and the DESIGN panel, for a new comer that itself need some explanation, and that goes for many other things in the Wappler UI.

But Wappler has already improved a lot in very short period of time and the dev team is awesome and listening to users feedback and suggestions.

So if you are new to Wappler and and come from Webflow or similar, just be patient and explore the possibilities of Wappler and I thank you will do like me: Love and stay with Wappler!

3 Likes
#15

Thanks to all of you for the comments and suggestions :slight_smile:

Just wanted to clarify this a bit:

It is true that with Wappler you have advanced back-end framework (Server Connect) which allows you to build server-side/dynamic workflows visually BUT it’s not true Wappler does not offer visual tools for designing your page.
That’s why the world’s most popular front-end component library Bootstrap 4 is included in Wappler. And as you mentioned the App Structure panel offers you all the customization options available for all the Bootstrap 4 components, but visually with options, sliders and buttons!

Maybe the problem is with people who have zero or minimal experience with web design/development as our docs are referring to terms like framework, class, ID, repeat region, component which such users might not be familiar with.

You can check some great examples in our showcase section showing what the design tools in Wappler are capable of:





#16

Yes that is exactly what I mean! From there perspective it is asking for some efforts and they do expect some level of explanation in order to know what to do.

#17

The question here is then - should we start documenting then general HTML/CSS/Bootstrap 4 topics? :slight_smile:

I believe there are great resources like https://www.w3schools.com/ which exlplain really nice what class or ID is, what’s the difference between them etc.

And discussing the help texts in Webflow (screenshots provided above) look at their explanation about <section>:

Screenshot_38

The only right thing in this text is that the section is a block element.

The <section> is actually a semantic element used to define sections in a document, such as chapters, headers, footers, or any other sections of the document.
It is not related to usage of background images or videos … you can apply background image to any element, it doesn’t have to be a section :slight_smile:

So people have to be careful what sources they use to learn about HTML/CSS/Semantics.

2 Likes
#18

for me the issue with the UI is that its not great when you want to focus on one side (interface- server side actions)
for example i find myself wanting to compare two server actions but i cant do it since i have to keep switching between them and if i click on any element in the server action then try to switch i get the “do you want to save the changes” message.
i know that wappler want to have everything on one screen. but in practice the screen is not enough to jam everything. you get left with too much scrolling to reach what you want.
and pull to expand panel is not useful at all. check the screenshot of my project.

Untitled
Untitled.png1000×562 135 KB

and here after i try to get more width to the panel.
Untitled2
Untitled2.png1000×562 156 KB

why does the panel get to become two column? that is unusable now. so you must go full width or stay in the 30% screen space

#19

@mrbdrm
Please for specific requests please use the feature request category in the community.

#20

im pointing to the design difficulties in having.
i dont know how to improve it.

#21

The issues you describe must be related to some really small screen.
On a 27" screen with 2560x1440px resolution the panel looks perfectly fine in a two columns layout:

Screenshot_44
Screenshot_44.jpg2558×1358 1.17 MB

And still you have more than 1200px of working space in Design View with the Right Panel open.

#22

Are you sure this isn’t because you’ve made a change - in which case the message should appear? I switch between server actions a lot and haven’t noticed the message appearing unless it should.

I agree a lot of scrolling is required and though I really like the interface and layout generally, it does leave a lot to be desired in some respects (eg not being able to view much of the text in many of the fields - for classes and conditions etc - really slows things down). It helps having a large monitor but Wappler doesn’t make the best use of it (I have a 43" monitor).

Do you not use the full screen option - ‘Expand Server Connect’ button? I think this is a very useful option. Eg I have some queries with 50 conditions, but the conditions tab only shows 6 or 7 by default. Having this panel full screen makes a big difference. It might be worth exploring this option more.

#23

im working from my laptop with 1920x1080

#24

i don’t want to take the whole space. just to have more room to fully see the action tree without horizontal scrolling.

#25

You certainly wouldn’t want to have Server Connect taking up the whole screen most of the time. However while you’re working on SC files, it can be very useful and of course you probably won’t be needing App Connect etc. during this time.

I agree with you that the panel management generally is not very flexible and can be frustrating. Eg I would like to have the dates displayed next to files in File Manager while working in App Connect - but the panel organisation doesn’t make this possible. even if you have plenty of screen space.

1 Like
#26

@Teodor instead of pointing out how wrong webflow is, you should listen what is being said as feedback. The general point is that we want to be educated by wappler.

As far as I can read between the lines it seems like you’re not that fond about educating people (but I might be wrong). But it should be an integral part of wappler, unless you only want to cater to experienced developers. Which is fine of course, but then just say that out loud.

1 Like
#27

when i started using webflow, i had 0 html/css knowledge. was a total noob.
what i learnt on webflow, is most definitly helped me to navigate around wappler, which has lot to improve on the ‘visual design’ part of front end development.
i did not find webflow overwhelming at all.
rarely did i encounter that an option was being displayed which could not be used. and in such cases, a simple nudge comes from the ui saying ‘this is not possible’.

it may not seem logical to you from a highly experienced developer point of view - but from a noob’s point of view, it worked beatuifully and rather it taught me about the tech.

PS: keep up the incredible work with wappler. absolutely love it. have even given up on my webflow license now. but will still rant about stuff that we don’t like about wappler :sweat_smile: - coz we really really want wappler to be the very best web design+dev tool in the world.

4 Likes
#28

Very late reply - @nshkrsh is spot on.

There seems to be a defensive stance employed with some Wappler supporters/team posts. Let’s put it another way. If Webflow were to announce a new arm to their current offerings i.e. allowing users to create apps within its software, I guarantee, their tutorials would accommodate ‘everyone’. Not just techies, not just designers, but all. They would be easy to understand and fully comprehensive.

The implementation would be elegant and intuitive - not just to me but thousands of others using WF. But it is missing the developer functionality, and therefore this is where Wappler could step in (which it does to a degree). But the learning is not comprehensive. I have seen the training videos.

You need to get someone on board who completely gets this.
There is a skill and an art to getting this right.

Sort this Arcjhilles heal out and you’ve just grabbed a bigger slice of the market - that’s if you want it? If not then me and others will just move on, no sweat.

#29

Hello @pachamama,
Thanks for your feedback!

I agree there is a learning curve with Wappler and things are a bit different than what the automated page builders like Webflow or Wix offer, but that is only because of all the possibilities which Wappler offers.
You are not just locked in a single workflow without being able to fully customize every aspect of the design or functionality of your sites.
Once you get through the docs and get the basics you will see how easy actually it is to build anything with Wappler.
Of course it will really make the things easier if you have some basic knowledge of website development :slight_smile:

Anyway, we are constantly improving Wappler so we try to make it easier for people without much experience in building websites. It has already evolved quite much since this topic was created 4 months ago :slight_smile: