-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
General redesign #31
Comments
@wiliamjk couple of questions, In the following illustration,
|
In your original post you suggest,
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? |
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. |
Yes!
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.
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. |
An inspiration for this layout is the WPBakery Page Builder plugin. Perhaps solutions they adopted could serve as inspiration for us: https://wpbakery.com/ |
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.
yes and no, from an HTML perspective it is easier to handle, scan, convert to more complex structures
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.
that would be good so you can maybe come up with more suggestions 🙂 Some of the video tutorials that you may want to checkout,
|
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. Please note the following:
Feedback requiredQ1 - 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? |
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...
I don't think it's subtle, but a tip might be helpful.
Excellent. Keep it that way.
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?
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. |
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 :) re Q3
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. re Q4
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. |
@wiliamjk regarding column size editing....
its already available in the current beta I just realised. |
I made some more updates on v5.0 with a beta2 release that now incorporates the modal mechanism for inserting/editing fields |
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:
After some thought, I came up with a solution that would be a wrapper around the row and a color system.
Collapsible Multistep Repeater Tabs
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. |
that's a lot of ideas :)
that's a good idea to have different colours to make it visually clearer. Multistep or singular formHowever, 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? Repeater: tables and tabsDid 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.
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.
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.
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,
agreed.
sure, I see that you mean. It would indeed make the design more consistent QuestionGiven 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,
|
On this subject, I opened a separate issue because I think it involves its own discussion.
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.
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.
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. 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.
Ok! I agree that's a whole other job.
From a design point of view, this is only an issue under certain conditions:
|
🤣 more the reason to improve the UI then
I am always open to others contributions, and your time and effort to bring in another perspective are most appreciated.
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.
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.
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.
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. |
@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:
|
I have completed the integration of the columns size/offest menus into the column header as a clickable icon in v5.0 beta 6 |
Update on the development of the UI Form designer in v5.
|
I'm testing beta 9. I LOVED this new version, congratulations! 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? 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? Add column buttonNow 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. Other small detailsHere 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.
|
Woohoo! 😀😎 Much credit to you too for a clean vision of the UI 🙏🏾
Sure. 👍🏾
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.
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
row controls
column controls
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?
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?
That could be one solution but i feel it would add a lot of buttons as each column would then get an additional button.
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. .
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.
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.
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.
Good suggestion. Need to think how to do without interfering with the clickable field modal opening.
Yes, still need to complete and integrate those fully. |
You're right, my suggestion didn't make any sense! hahaha
Based on this idea, I drew some possibilities here. Column buttons suggestion 01I 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. Column buttons suggestion 02However, 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. Column buttons suggestion 03
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. Visual representation of fieldsNow, 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. Other observations
I agree, but I think if this is a real concern, maybe it would be ideal to have a confirmation box before deleting, no?
Perfect! |
set to 8px between sections and innner sections as per General Design issue #31
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.
that's my preference. In fact we could simply hide the ghost column and show it only when the mouse hovers that row. but if you feel it is not intuitive enough then we should consider it.
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 |
modal settings
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 ! column size/offset control
Wrt to this observation, I have now changed it to a button shape to make it more obvious. Do you think it works ? column splitting iconI 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. Column typethe column settings modal offers 3 types of columns,
|
Beta 11 completes admin UI editor changesI 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. split/add column buttonI 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. Front-end changesI 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. |
v5.0 Beta12 flebox gridA 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,
The text was updated successfully, but these errors were encountered: