Open aurovrata opened 2 years ago
aurovrata
commented
2 years ago @wiliamjk couple of questions,
In the following illustration,
aurovrata
commented
2 years ago In your original post you suggest,
Rows take up the entire width and are filled with columns. Elements are stacked vertically within a column. You can only add a field within a column.
However, the form design currently allows for a column to be converted into a grid. This allows for more complex form designs with inner rows taking up the width of the outer column. Designs such as tables and tab constructs with repetitive fields, slider sections, collapsible sections, optional toggled sections....
So how do you envisage these inner structures?
aurovrata
commented
2 years ago I have been thinking about how we could try to achieve this simpler design,
I think the above would enable both a simple form builder (at the start) while preserving the more complex form constructs the plugin exposes.
wiliamjk
commented
2 years ago the red arrow points to a copy icon, which I am assuming is a row duplicator?
Yes!
In the current design each of the fields are in a separate row with a single column that occupies the entire width of the row. The row is an inner row of the 1/2 column of the outer row. In your design you are suggesting to hide the inner rows or simply do away with them?
I wouldn't want to make drastic changes to the plugin's functionality. I assume if it was made that way, you probably have a good reason for it. But just from reading your description, doesn't it seem like you have more rows than you really need? I think the concept of "ELEMENT" could replace this inner row. In the code it can work the same, but in the visual analogy, I think it's easier to understand, no? I don't know if I was clear or if I understood you well, anything let me know and I'll try to explain myself better.
the form design currently allows for a column to be converted into a grid [...] So how do you envisage these inner structures?
I confess that I didn't know about this feature. I'll study the plugin a little to see if I can find something to help.
wiliamjk
commented
2 years ago An inspiration for this layout is the WPBakery Page Builder plugin. Perhaps solutions they adopted could serve as inspiration for us: https://wpbakery.com/
aurovrata
commented
2 years ago the red arrow points to a copy icon, which I am assuming is a row duplicator?
the duplicator icon is a good idea. I am wondering how it can be used to both copy and duplicate, (duplicate in the same form) or copy to paste in another form.
But just from reading your description, doesn't it seem like you have more rows than you really need?
yes and no, from an HTML perspective it is easier to handle, scan, convert to more complex structures
I think the concept of "ELEMENT" could replace this inner row. In the code it can work the same, but in the visual analogy, I think it's easier to understand, no?
sure, this is what I was trying to convey in this comment, I reckon the HTML structure can remain while the UI interface can hide these inner rows.
I'll study the plugin a little to see if I can find something to help.
that would be good so you can maybe come up with more suggestions :slightly_smiling_face:
Some of the video tutorials that you may want to checkout,
aurovrata
commented
1 year ago Greetings all, I have been working on v5 of the form editor UI interface and have made some progress which you can try out with v5.0.0.beta1.
currently only the admin UI has been worked upon, the front-end form rendering still needs some work as some of the form structure has been cleaned up with v5, as well as other improvements in performance are planned.
you will need to start a new form to see the new UI, existing forms will load the previous version of the plugin's scripts/styles. So v5 will not be compatible with previously created forms, but v4.x code will instead load and therefore allow for backward compatibility.
the table construct and column controls are moved to the row header menu as per the screenshot below.
this current version does not yet enable collapsible rows, tabbed sections, slider form, these will come later.
the cf7 tag modal is still not enabled, this will come later.
Q1 - do you think the columns controls and table creation icon are too subtle ? Do we need to have more obvious controls? I was thinking to add a popup tip when the mouse hovers these icons to help users.
Q2 - the colour scheme currently uses the WP admin styling, does it work?
Q3 - the v5 'New Form' launches with a blank form template, should we have the previous 'contact form' template instead?
Q4 - any other observations?
wiliamjk
commented
1 year ago Sorry for not getting back, I've had a very busy weeks here.
I installed the beta version in a test environment here and I was very happy with the result so far!
Answering your questions...
Q1 - do you think the columns controls and table creation icon are too subtle ? Do we need to have more obvious controls? I was thinking to add a popup tip when the mouse hovers these icons to help users.
I don't think it's subtle, but a tip might be helpful.
Q2 - the colour scheme currently uses the WP admin styling, does it work?
Excellent. Keep it that way.
Q3 - the v5 'New Form' launches with a blank form template, should we have the previous 'contact form' template instead?
That's a good question. I don't think anyone uses that standard form the way it is. But on the other hand, it is a way of showing what the plugin is capable of. Thinking about it, I would say it would be really cool if we had a more elaborate template with a small sample of the plugin's potential, how about that?
Q4 - any other observations?
When I click on the columns icon, it adds a new column and automatically resizes existing columns. If I delete one of the created columns, the columns that were resized remain the same size.
I think it would be important to have an easy way to change the column size. I included this button in my mockup with that in mind.
aurovrata
commented
1 year ago thanks for the feedback @wiliamjk, I was away on a road trip in the mountains to attend a cheese making course, so my turn to apologise for the late reply :)
That's a good question. I don't think anyone uses that standard form the way it is. But on the other hand, it is a way of showing what the plugin is capable of. Thinking about it, I would say it would be really cool if we had a more elaborate template with a small sample of the plugin's potential, how about that?
I think we're on the same wavelength here. Template creation is very easy and baked into the design of CF7 plugin, so eventually it would be simple to even allow users to save their own layouts as templates.
I was thinking to have a modal popup at the start of a new form creation with the option to start a blank form or load an existing template, possibly having an option the in the general settings to always strat with one or the other once users are comfortable with the plugin.
I think it would be important to have an easy way to change the column size. I included this button in my mockup with that in mind.
so this is already possible with the column edit button, which currently is hidden (only the column delete icon shows up for now) as I didn't have time to style the edit icon on column hover.... but it will be included in the upcoming updates.
aurovrata
commented
1 year ago @wiliamjk regarding column size editing....
I think it would be important to have an easy way to change the column size. I included this button in my mockup with that in mind.
its already available in the current beta I just realised.
aurovrata
commented
1 year ago I made some more updates on v5.0 with a beta2 release that now incorporates the modal mechanism for inserting/editing fields
wiliamjk
commented
1 year ago I had some ideas that might help solve some of the redesign challenges.
@aurovrata said he had questions about how to make these advanced features work in this redesign:
sectioning forms repectitive fields with tables and tabbed constructs multistep slider forms
After some thought, I came up with a solution that would be a wrapper around the row and a color system.
1) The bar color of a normal row could be blue (#2665A4) to differentiate it from other elements.
2) At the end of the form, there would be 5 buttons (one of each color) to add these special elements.
3) I purposely renamed the elements to make their functionality clearer:
4) By clicking on add any of these special elements, a new wrapper appears allowing the addition of new rows inside it. Each wrapper will have standard colors for easy identification.
5) Evidently, each wrap will have its own behavior:
Collapsible This type of wrap will close like an accordion on the front end.
Multistep This type will allow you to divide the form into steps, each wrapper being a step. If there are step elements followed by each other, they come together as steps of the same flow on the front end.
Repeater With the repeater, the user can click a button to duplicate all fields within the wrapper. Thus, it is possible to add as much information as the user wants.
Tabs Tab type wraps will nest the content inside it in a tab. If there are tab elements followed by each other, they come together showing tabs on the front end.
6) One question I have is whether it would be possible to include several different wrappers, one inside the other. Maybe it makes sense to include different but not the same wrappers, am I right?
7) To complete this functionality, the "edit" button could open additional settings in a modal. That way, any additional configuration can go there and it doesn't clutter up the layout view.
A very useful configuration could be the possibility to include classes and the ID without having to edit the code, for example.
In fact, the possibilities are immense. In the tab settings, for example, it could be possible to set a background color for the tab. In Collapsible's toggle settings it would be useful to be able to change the toggle text. These are things that are possible to do in code, but that in the future could be native features within settings.
Also, I think it's interesting to put a supporting text in here. In this way, we have the opportunity to give the user a hint of what he should expect from each element.
I made a mockup of what each settings modal would look like. Notice the colors matching each element:
I thought of organizing it in tabs so that, if necessary, it would be possible to include other settings inside. This could be a solution for Conditional Fields Groups, for example.
With this very visual organization, I think it's much clearer to understand what can happen and what each element does. Also, as the 5 elements are added and edited similarly, the usability is more consistent. If the user understands what one of them does, he understands the others more easily.
aurovrata
commented
1 year ago that's a lot of ideas :)
At the end of the form, there would be 5 buttons (one of each color) to add these special elements.
that's a good idea to have different colours to make it visually clearer.
However, a multistep form is a different from a singular form, and as such additional steps/slides cannot be mixed with separate rows, it makes not sense. So I don't think it makes sense to have a button to add a slide/step in a general singular form.
Therefore, a user choses to create either one or the other. When selecting a multistep form, the entire form is wrapped in a slider element, and the "add slide" button will be shown. Makes sense?
Did you actually take a look at the videos? If not I would again strongly recommend you do to understand what these do and the setting configuration available.
Tabs sections (Green #199932): Allows you to organize content within tabs
not quite. Tabs are also repeaters. A user creates a form section (with multiple rows/columns/fields) and converts it into a tabbed repeater. The front end will show a single tab which the user can then add additional tabs to create a repeated section.
If you look at the video tutorial you will see an example of a property booking form for an event, where a user can book several houses and allocate a list of guests (adults and children) to each house. The House section of the form is a tab and additional houses can be added.
One question I have is whether it would be possible to include several different wrappers, one inside the other. Maybe it makes sense to include different but not the same wrappers, am I right?
This is a good question and I feel worth having its own issue #36 where I have listed what is currently possible in v4 and what I propose to change in v5.
To complete this functionality, the "edit" button could open additional settings in a modal. That way, any additional configuration can go there and it doesn't clutter up the layout view.
yes, I was also thinking of doing something like this. These are very good designs, :) thank you for the time you took in putting all this together.
Some observations,
I thought of organizing it in tabs so that, if necessary, it would be possible to include other settings inside. This could be a solution for Conditional Fields Groups, for example.
agreed.
With this very visual organization, I think it's much clearer to understand what can happen and what each element does. Also, as the 5 elements are added and edited similarly, the usability is more consistent. If the user understands what one of them does, he understands the others more easily.
sure, I see that you mean. It would indeed make the design more consistent
Given that sliders and multistep form is an either/or type of form, I still feel this is something that needs to be done are the form level. I initially thought of adding it to the form edit menu,
but then I realised that it may not be so obvious, and hence decided on a slider toggle at the top of the form.
Another option I was thinking was to have a modal at the start of a new form creation asking what kind of form they want to create....but I feel that would come in the way too much .
Any other ideas how we could incorporate that switch?
Wrt to the different colours for each sections, don't you feel there are too many colours in the form editor? I personally don't mind, but I wander if this will put off some people?
wiliamjk
commented
1 year ago Multistep or singular form
On this subject, I opened a separate issue because I think it involves its own discussion.
Did you actually take a look at the videos?
I watched it several times to try to understand it, but apparently I got it wrong. I confess that this functionality is very confusing for me. I'll try to study a little more before commenting on this.
overall these will require quite a lot of extra work
I believe that you, better than anyone else, will be able to set priorities based on your willingness to make this happen. I'm just here giving hints, but the hard work is all with you and I appreciate that. So if I make any suggestion and you don't take it, you have that right and I'll understand. Of course, if I can help you think of an effective solution, it's all a win-win for a wonderful plugin. ☺️
I even think it's a pretty radical change, it may be that several of the ideas end up staying for a future version, and that's okay. I just think it's important to register it so that nothing nice gets lost.
In some case I feel an extra modal would make it more tedious
You are absolutely right.
More technical and less frequent settings can hide in the modal without problems, but everyday things have to be more evident.
You reminded me of a cool solution on WPBakery. It works like this: next to the row move icon, there is a columns icon.
When hovering the mouse over this icon, the bar expands showing some common column arrangement options in the row (eg: 1/2 + 1/2 or 1/3 + 2/3). By clicking on the option, the columns are reordered (and new columns are created or even removed).
Just below, there is a link with "Custom structure". Clicking it, then yes, a modal appears where I can type a custom configuration using fractions.
I think this arrangement has good things and bad things. I prefer the way it is today where I adjust the size individually on the column, but perhaps it would be nice to swap out the dropdown list for a more visual solution.
I made an example mockup:
The offset I think is a little less common, can it stay in the advanced settings or maybe have another icon? I want to know what you think. If I'm going too far, let's leave it the way it is today.
styling options (such as in tabs) is something I want to leave out completely.
Ok! I agree that's a whole other job.
don't you feel there are too many colours in the form editor?
From a design point of view, this is only an issue under certain conditions:
aurovrata
commented
1 year ago I watched it several times to try to understand it, but apparently I got it wrong. I confess that this functionality is very confusing for me. I'll try to study a little more before commenting on this.
:rofl: more the reason to improve the UI then
Of course, if I can help you think of an effective solution, it's all a win-win for a wonderful plugin.
I am always open to others contributions, and your time and effort to bring in another perspective are most appreciated.
I think this arrangement has good things and bad things. I prefer the way it is today where I adjust the size individually on the column, but perhaps it would be nice to swap out the dropdown list for a more visual solution.
absolutely. We're on the same page. In fact I was thinking to convert the column label into a dropdown. Click on the column title '1/2 Col' and the list appears.
Another question: does it make sense to have all the column sizes. I know that i have not used those below 3 (1/4), and on the higher side above 9 (3/4). These are controlled by HTML classes and such the hidden sizes could be still be used by users adding them directly into the HTML editor.
It would make the UI simpler I feel.
The offset I think is a little less common, can it stay in the advanced settings or maybe have another icon? I want to know what you think. If I'm going too far, let's leave it the way it is today.
wrt to offset, I was thinking we could have a double dropdown list, one for offset and one for column size that would show up next to each other.
In short, we have to use it carefully. But I think it will work. If it gets too confusing, I'll help you make visual adjustments to alleviate it.
ok, in any case this is easy to come back to at a later stage with more feedback, Let's go with different colours for now and see how it works.
styling options (such as in tabs) is something I want to leave out completely.
Ok! I agree that's a whole other job.
I am actually thinking on writing an extension specifically for styling after v5 is stable, and possibly make it a paid add-on to make some revenue.
aurovrata
commented
1 year ago @wiliamjk i just released beta 5 which implements the colour coded sections and additional 'add' buttons for each type.
With the exception of the 'tabbed' section which still needs a little more work, all the others work. I am of for a new year break till the 2nd week of Jan and thought you might have some time in the start of the year to review the new design and give me some feedback.
I have also started to implement a custom html modal which currently is only available to edit a table section footer row. Add a table, edit its row (pencil icon) select footer row option in the drop-down. Click the footer row description field.
What I still need to do:
aurovrata
commented
1 year ago I have completed the integration of the columns size/offest menus into the column header as a clickable icon in v5.0 beta 6
aurovrata
commented
1 year ago wiliamjk
commented
1 year ago I'm testing beta 9. I LOVED this new version, congratulations!
I have completed the integration of the columns size/offest menus into the column header as a clickable icon in v5.0 beta 6
I think the functionality of this here is great. I just think it would be cool if we could try to make it more evident that this is something clickable, you know?
Thinking here, maybe adding icons can be a solution. Check this mockup:
In this example, I used the "left right" and "tagcloud" dashicons. In the mockups I make I always try to use the native WordPress dashicons because I understand they are already installed on the site, am I right? I can also try to use different icons or create something if you think it's worth it.
Now my question is if more icons here doesn't make things confusing, what do you think? Do you like this solution?
Now that I'm testing the plugin more, I got the feeling that this button is confusing.
Perhaps an option could be putting a bigger button along with the add field:
Or maybe we can change the icon for a clearer one... I thought the "table col after" dashicon might work.
But I'm not 100% sure with both options. Maybe we should analyze what some user thinks using this.
Here I'm going to draw attention to some details that are very small, but that can make a difference in giving a neat finish. Perhaps they do not affect functionality so much, but they can make a good impression on the user.
When I position the mouse over the field, I have this "move" button that allows me to move the field to another place. But I noticed that the move button is on the left in several places, but here it's on the right. I was wondering if this couldn't irritate the user who needs to keep "changing" sides depending on what he wants to move. Ideally, everything would be on the same side.
Speaking of which, one thing that could make life easier for the user would be that he could simply click anywhere and be able to drag and drop, no? It would be possible? Maybe in a future version?
I noticed that the design is still a little broken in elements like "Tab" or "Slides", so I'll leave it to comment in a next version.
aurovrata
commented
1 year ago I'm testing beta 9. I LOVED this new version, congratulations!
Woohoo! 😀😎 Much credit to you too for a clean vision of the UI 🙏🏾
Columns size/offest menus
I think the functionality of this here is great. I just think it would be cool if we could try to make it more evident that this is something clickable, you know?
Sure. 👍🏾
In this example, I used the "left right" and "tagcloud" dashicons. In the mockups I make I always try to use the native WordPress dashicons because I understand they are already installed on the site, am I righ?
Yes that's correct. I like to use dashicons too because they are part of WP core. It's also easy to change them once they are integrated. So let's go with your suggestion and we can always revisit this when we have more inputs from other users later on.
Now my question is if more icons here doesn't make things confusing, what do you think? Do you like this solution?
I was thinking about what are the most used functionality in the UI editor which we should make accessible with single click, i came to with this list
Delete row (icon)
That makes 7 controls on the column bar which is a lot.
One thing we could consider is moving the delete control to the settings modal. This would have the advantage of making sure accidental deletes don't happen.
We could also move the column splitting control to the row header bar which has is own logic i feel.
This would reduce icons to 5 on the column header and
What do you think?
Add column button
Now that I'm testing the plugin more, I got the feeling that this button is confusing.
So v4 had a plus icon, but if we move it to the row header as i suggest above, it would be less confusing possibly?
Perhaps an option could be putting a bigger button along with the add field:
That could be one solution but i feel it would add a lot of buttons as each column would then get an additional button.
Or maybe we can change the icon for a clearer one... I thought the "table col after" dashicon might work.
My only concern is that given the icons are quite small, this one is complex with a lots of details which will simply be drowned out visually. A simpler icon would be easier.
The Gutenberg block editor uses the columns dashicon. I think we could use this as users will start to get familiar with it.
.
Other small details
Here I'm going to draw attention to some details that are very small, but that can make a difference in giving a neat finish. Perhaps they do not affect functionality so much, but they can make a good impression on the user.
Yes yes yes! I just haven't focused on these as i have been concentrating on getting the main functionality to work.
I will implement all of these for the next beta release and we can revisit your suggestions to make a final decision.
- When clicking on the row settings, I think the layout is broken, right?
The modal fit the settings is still work in progress. I have decided to implement your orginal suggestion with tabbed sections in the settings modal. Allow me some more time to get that implemented properly and we can discuss it in details once completed.
- When I position the mouse over the field, I have this "move" button that allows me to move the field to another place. But I noticed that the move button is on the left in several places, but here it's on the right. I was wondering if this couldn't irritate the user who needs to keep "changing" sides depending on what he wants to move. Ideally, everything would be on the same side.
Agreed. If we decide to move the delete button into the settings section then i would suggest putting the move icon where the delete icon is.
- Speaking of which, one thing that could make life easier for the user would be that he could simply click anywhere and be able to drag and drop, no? It would be possible? Maybe in a future version?
Good suggestion. Need to think how to do without interfering with the clickable field modal opening.
- I noticed that the design is still a little broken in elements like "Tab" or "Slides", so I'll leave it to comment in a next version.
Yes, still need to complete and integrate those fully.
wiliamjk
commented
1 year ago That could be one solution but i feel it would add a lot of buttons as each column would then get an additional button.
You're right, my suggestion didn't make any sense! hahaha
I was thinking about what are the most used functionality in the UI editor which we should make accessible with single click [...]. That makes 7 controls on the column bar which is a lot.
Based on this idea, I drew some possibilities here.
I included the option to split columns in the row header. I took the opportunity to use your dashicon suggestion.
Looking at this layout, I realize that "add field" and "add row" are the most important things (that's great!). This means that the user can go straight to the most basic thing he needs, which is creating his first fields.
However, I think that one of the great differentials of your plugin is the possibility of working columns in an easy way, something that natively in CF7 is very complicated. Therefore, I feel that the button to add a column cannot be "hidden" along with other buttons.
I've been thinking about a possibility for a while, but I was afraid of polluting the layout too much...
In this scenario, we would create a narrow "ghost column" on the right that acts as an add a new column button. It would always be visible within a row, no matter the number of columns (maybe hide when it's no longer possible to create new ones?). I also think that it should always be more or less the same size, not too wide, so as not to take up space in the columns.
I like this logic for two main reasons:
On the other hand, it is clear that it consumes space that can be precious. This reminds me that we need to discuss what happens in terms of responsiveness when the layout already has 12 columns and the monitor is narrow.
One thing we could consider is moving the delete control to the settings modal.
Well, an interesting possibility would be to include some (maybe all?) of the buttons in a "more options" button.
This could be a responsiveness solution:
In an extreme case of space, the move button and the "more buttons" button would stack up. The "add field" label would also disappear leaving only the + icon.
Now, after these suggestions above, there is another issue that needs to be addressed, which is the visual representation of the fields.
Thinking about clarity and the possibility of the layout being responsive, these fields inside the columns needed a good symbolic and practical representation. Give me some time to think of a way to work this out.
This would have the advantage of making sure accidental deletes don't happen.
I agree, but I think if this is a real concern, maybe it would be ideal to have a confirmation box before deleting, no?
I just haven't focused on these as i have been concentrating on getting the main functionality to work.
Perfect!
aurovrata
commented
1 year ago Column buttons suggestion 01
you think its not obvious enough the column splitter? Remember the row header you are showing is wrong, there would be no delete button and not table button (both you have shown), only the move/settings/column split icons, which would make it easy to for someone to discover I feel, since settings and move are quite obvious, and therefore column split would be the only unknown (non-obvious) which someone would be tempted to try ?
Also note that currently none of the icons helper pop-ups are showing, this is still something I plan to add to make things easier.
Column buttons suggestion 02
that's my preference. In fact we could simply hide the ghost column and show it only when the mouse hovers that row. However, more complex to setup at this point, so still prefer option 1 which is simpler to achieve.
but if you feel it is not intuitive enough then we should consider it.
Column buttons suggestion 03 This could be a responsiveness solution:
so I have completed the responsiveness design (it mainly impact columns of width one (1/12, the smallest) and two (1/6, the next smallest). Blow 725 pixel we are out of the realm of tablets and into phones, and I think it makes little sense to edit a UI form on a touch screen, and too complicated to test and make it work properly too. So I just display a message saying that the screen is too small and they can use the HTML editor instead.
The responsive changes will come with beta10, next release, probably tomorrow or so. You can try it out and we can then discuss it. So I suggest you don't spend too much time looking at this yet and wait for beta 10
aurovrata
commented
1 year ago 7. To complete this functionality, the "edit" button could open additional settings in a modal. That way, any additional configuration can go there and it doesn't clutter up the layout view
your suggestion in this comment to move grid element settings to a modal window is now implemented in v5.0 beta 10, which looks much cleaner I have to say !
I think the functionality of this here is great. I just think it would be cool if we could try to make it more evident that this is something clickable, you know?
Wrt to this observation, I have now changed it to a button shape to make it more obvious. Do you think it works ?
I haven't changed this yet, we had discussed that we would revisit this. I am wondering if we should simply have a "+" icon like the v4 grid UI?
I could also add a button (add column) into the column settings modal.
the column settings modal offers 3 types of columns,
aurovrata
commented
1 year ago I just released v5.0 beta11 which now has all the various row transformation (to table/collapsible/tabs) settings enabled and working, as well as the form HTML markup being correctly configured and saved/loaded into the UI editor.
I have implement @wiliamjk suggestion to add an additional pop-up button after each column,
I have also retained the '+' button icon on the row toolbar for now. We can see which one fits best and decided once the plugin is ready for release.
I will now focus my energy on recoding the front-end js and css files as much of v5 changes in the HTML structure and the removal of jquery dependence requires a complete rewrite.
aurovrata
commented
11 months ago A recent request for vertical alignment controls of columns in rows made me realise that the grid layout plugin used in v4.x of the plugin which makes use of float and margin styling for layouts, should really be upgraded to leverage the CSS flexbox grid display which is supported by all modern browsers and is quite mature.
v5.0beta12 now used flexbox grid display and introduces vertial alignment control in the grid settings modal.
This is part of the general discussion issue #30
Suggestion to hide inner rows on the UI in order to simply the appearance from this,
to this,