Popup-Maker
Popup-Maker copied to clipboard
PopupMaker
Template Wizard for New Popups
Creating a 1-3 step new popup process will allow us to streamline onboarding of new users and popup creation.
Similar to how Ninja Forms has premade forms we will offer a variety of use case icons, each will have a base set of preset popup settings & content. There could be additional questions based on the use case they chose to help further fine tune specific settings based on the choices they make.
This will be an effort to begin the process of moving users towards an interface that focuses on making intuitive decisions, not choosing from tons of options.
Of course once they get into the editor they can tweak it however they like.
@danieliser For popup creation wizard, should we have this open when they get to the Add New screen. So, clicking add new takes them to the add new popup screen and then maybe a modal opens with some steps to take? The first step being to choose from a few main types of popups (similar to NF's form type picker).
For new users, once they finish the wizard, does the guided tour (#743) of the popup editor then start?
@danieliser For the overall popup wizard, it will probably show some use cases, such as "Auto-opening announcement" or similar. Once clicked, it will add in some triggers, cookies, and apply display presets, right? That would all be done with the first question of use case.
What would the other 1 or 2 steps of the wizard involve?
The steps might not be there initially, but should be considered. Things like setting up an AJAX login popup might have a second and 3rd screen for choosing which forms to add and customizing their layouts etc.
The additional steps are likely dynamic based on initial chosen options.
Also @fpcorso I think we should do what you said, but we can also consider doing it immediately after they click the add new button and then have it as a GET based form that submits to the new popup url with additional parameters which set the default values.
Doing it the way you suggest means its all done using JavaScript, the latter would also allows using PHP to parse and set things if there was a need. Not sure which is most ideal, but definitely moving toward more JS lately so its probably the right way.
@danieliser Yeah, I think steps are a useful thing to plan for, even if not there initially. So, we need some sort of data model that we can then enqueue or add "use-cases" or "templates".
For what data we need, maybe:
$use_case = array(
'name' => 'Auto-opening announcement popup',
'settings' => array(/* default settings, triggers, etc... */)
);
And then we maybe have an extra key that, if present, designates fields for other steps:
$use_case = array(
'name' => 'Subscribe top bar',
'settings' => array(/* default settings, triggers, etc... */),
'steps' => array(
array(/* PM fields for step 1 */)
)
);
Oh, but if we are doing something with the data from the steps, do we need to pass a function to be called for that use case?
@fpcorso The data should probably be fluid, that is changed step by step.
I'd say each option should be like a git commit and apply a change set.
That way further steps can override those previous applied change sets.
Essentially each option should apply an array_merge of its selected values with the new_settings array.
But as for how the dynamic part happens I think we will likely have to flesh it out a bit more to see how that logic should best be handled.
Does each step get defined by the use case, or do steps have their own conditions that get processed based on previous options similar to how our forms work now. The first is likely simpler overall, but may be limiting, so we need to explore those limits and see if they impact our needs.
@danieliser, I've been thinking through the flow of the wizard and sketching out some rough wireframes. I think we can take this in one of two directions.
Option 1
The first step shows a list of popular templates with options such as:
- Auto-opening slide-in opt-in
- Exit-intent center popup opt-in
- etc...
Upon clicking, it either takes them to the popup editor with all content/settings adjusted or to a second step when needed, such as with some of the extensions.
This option's benefit is that they can quickly select a template and jump right to the editor with everything filled in to start editing. But, there are hundreds of configurations. We could show the top 5 to 10 templates and then maybe have a search/filter field to narrow down to the right one.
Option 2
The wizard "builds" the popup over a series of steps.
- Step 1: What type of popup (opt-in, lead gen, upsell, etc...)
- Step 2: When to open (After x seconds, click open, add to cart, exit intent, etc...)
- Step 3: How to display (center popup, slide-in, top bar, etc...)
- etc...
The benefit of this option is that it can walk them through creating their popup exactly the way they need it.
Of course, in both scenarios, we'd have a "Skip Wizard" or similar option. It is also possible to combine these where the first step is option 1, which has a "blank start" or "Start fresh" type option, which, when clicked, goes to step 1 of option 2.
Thoughts on how you see the wizard being used?
@fpcorso Both have benefits, but I think option 2 gives us a better shot at aligning outcome with expectation.
The first option though sounds ripe for making it exportable, indexable & searchable. Similar to how I planned for Popup Themes to be handled via a community repository.
@danieliser Okay. What if, we start with option 2 in 1.15?
Then, we try to start mapping out templates. In a future update, we can then have a first screen of the wizard that asks if they want to "Select a template" or "Start fresh". The first option would take them to some new templates screen whereas the second option takes them to the popup wizard. Or, maybe they are two separate buttons that can be clicked to add a popup. Regardless, maybe that's the v2 version of the feature.
@danieliser Hmmm....thinking it over some more and I realized that option 2 would have us almost recreating all the popup settings editor into a new format. Might require us to abstract out a bit of those methods/classes to be used in both places. Not sure we'll get it all done in 1.15.
I'll have to review the code once we have some of the initial concepts/wireframes finalized to see what it might take technically to achieve it.
@fpcorso 2 might be the long term goal then. 1 Might be easier for a quick win.
@danieliser Hmmm.... I am going to break this out into two separate issues and then we can evaluate which to pursue first.
@danieliser I'll also review some ideas and basic sketches for this template screen so we can identify any other questions/issues we'd want to answer before moving forward with either.
@danieliser Here is the first pass at this template wizard. So, I am thinking that when someone clicks "Create New Popup" this modal opens (or a new screen).
The first option "Blank popup" would take them to the existing empty popup editor. The others would take them to the popup editor but with the settings and content filled in.
Additionally, there is a search bar to be able to search through the templates, if we end up with more than a couple.
Upon working through this, we do have some extra questions to answer:
Question 1
Should there be categories or types here? We could have "opt-ins", "upsells", etc... that one could filter or only show those of. With the search and the list, we might not need that. If we do add that, do we show the templates in a list as shown and then have a row where they can jump to only certain categories, or do we start with showing only the categories and then letting them drill down.
I like starting with all the templates shown (or the most popular) as it will increase the chance they will get new ideas or see different use-cases.
Question 2
Should we have templates in the core that are marked as "premium only" or similar? For example, if they are just using the free version, we could show an "Exit Intent Opt-in Popup" that is marked as needing premium. We could have these as stub templates that don't actually have any code in them. The extensions would then still have the code for the actual template.
Question 3
Would we eventually let them create their own templates (or community ones as we've discussed before)? If so, would those also appear in this general list or should we have those in a separate sub-section?
Question 4
Should we plan on, eventually, adding a preview system to preview the template before deciding to create the popup using it?
@fpcorso that looks pretty clean.
Q1
I would keep that concept in mind, but leave it out of the initial build out. Sounds like a great additional feature when we have more templates available.
And always start at the top, so I'd show them all, and let them drill down when they want.
Q2
I very much am on board for playing with these types of concepts where we advertise premium features by greying them out but still including them in the free version.
Q3
Good question, maybe just a section at the top/bottom with a heading of User Templates.
Q4
Maybe. Depends on how they are generated, if its static screenshots that have to be created, probably not.
@danieliser Okay, we can design the prototype with all of those in mind but probably keep most of that in a v2 or v3 version.
Actually, we might want to push the "content" part of these templates to the v2 version and aim to get the block editor the default by then. That way, we can build the templates using blocks.
One user we showed this initial concept to suggested allowing a user template to be created based on an existing popup. This would be useful to allow them to make other popups based on a popup they have already created and like to copy.
@danieliser Here's a very rough, early prototype: https://www.loom.com/share/dcfd9ff97fa04c49ab6b0c4f33fd924f
Now that I see the flow better, I think we should probably add some explainer text above the search box. Also, should we show some message after clicking on a template? Should there also be a confirmation step?
Do you think the process should occur on the new popup page? Can we reliably hotload all the different settings & contents for these in both the editor and block editor?
Otherwise looking good.
@danieliser Right now, I was only mapping out a quick prototype to visualize the flow. The exact technical steps we take to implement isn't the question right now.
Please refer to the previous comment for the questions I was asking.
@fpcorso confirmation step, no I don't see a need for that.
But a confirmation/affirmation message that its being processed or has been processed on the next page yes.
Just something to indicate that it is progressing or did do its job.
@danieliser Okay. Here is the next version of the prototype with some small explainer text at the top with a success screen once the template has been applied:
https://www.loom.com/share/06f1b88f3d1749218a7ab8b461520ddd
How should we phrase the success screen? Right now, I am saying the template was applied but not sure if there is a better, more user-friendly way to phrase it. Also, the next action for them to take is probably to edit the content, right? Or should we direct them to the targeting first?
@fpcorso Maybe This message will self destruct in 5.. 4.. 3.. then simply fade it out and close it.
@danieliser It seems that you missed all my questions again. Please refer to the two questions in my previous comment.
@fpcorso I'm not sure what your talking about, just reread your questions and my answers, they all match up.
Should there also be a confirmation step?
@fpcorso confirmation step, no I don't see a need for that.
Also, should we show some message after clicking on a template?
But a confirmation/affirmation message that its being processed or has been processed on the next page yes.
Just something to indicate that it is progressing or did do its job.
How should we phrase the success screen? Right now, I am saying the template was applied but not sure if there is a better, more user-friendly way to phrase it. Also, the next action for them to take is probably to edit the content, right? Or should we direct them to the targeting first?
Maybe This message will self destruct in 5.. 4.. 3.. then simply fade it out and close it.
That last one does answer all 3 questions, it would just fade out to the content editor. If we have the tip tour in place already then they will get dragged to those other panels already anyways.
@danieliser That doesn't quite answer the flow questions I was asking about regarding what the next action for them to take is.
So, you're saying we should show a self-closing message that has nothing to do with what they are doing and then just drop them into the content editor with no other guidance other than the tour which they'd see only the first time they are in the editor?
Many UX people have told me over the years to never have a self-closing success message that disappears quickly as people could easily miss that if they glance away or temporarily switch tabs to only come back to the content editor with no indication the template has been applied. So I wouldn't suggest having it fade out and close on its own.
Also, I think having a cryptic text of message self-destructing gives no clear indication at all of what they just did or what they should do next.
If several people have trouble getting their popups created, I don't think just dropping them into the editor each time with no clear direction or push solves the issues Popup Maker has which is why I was asking about what the next action for them to take should we be recommending.
So, you're saying we should show a self-closing message that has nothing to do with what they are doing and then just drop them into the content editor with no other guidance other than the tour which they'd see only the first time they are in the editor?
Since we can't assume to know how any one person would actually use the editor in a specific flow, YES, that is kinda exactly what I'm suggesting. We don't have any evidence that one would be better than another, and since we are moving to the block editor dropping them into a premade layout editor would be ideal.
Again that assumes they are gonna take the tour at some point which should elaborate maybe a bit more about each sections of the settings wizard.
So I wouldn't suggest having it fade out and close on its own.
Technically that is what I suggested, but not really. It would have a countdown before fading out to focus on the content editor. They could of course close it manually, but the alternative is what, leave it open?
They already chose what they wanted to use as a template, we made those changes to the popup for them, notified them of the change (which was a nice ux improvement but not required), and what they do next is ultimately up to them from that point.
Unless we are going for the full "Wizard" where we would have additional steps to collect info on how they will use it, this is exactly how I'd expect it to work.
Also, I think having a cryptic text of message self-destructing gives no clear indication at all of what they just did or what they should do next.
I see my attempt at passive humor was lost here, the message would clearly say The changes have been applied, your popup is now ready for customization. This message will automatically close in 5, 4, 3....
If several people have trouble getting their popups created, I don't think just dropping them into the editor each time with no clear direction or push solves the issues Popup Maker has which is why I was asking about what the next action for them to take should we be recommending.
The problem here is we are not building a wizard to ask them what they really want/need, so we can't make any single (1) assumption about where best to send them next. If you have a suggestion I'm open, but I think I've laid out a case against it for the context of this issue.
I mean the best I can think of would be:
- Ask them where they want to go next, which might be annoying to a power user looking for a quick start.
- Make an educated best guess assumption for each of the given templates as to where they should go next, default to content if none is set for that template. This gives us a bit more control at least to try and narrow each use cases follow up rather than trying to lump every user into the same path which is alternate to the entire concept of the guided wizard.
@danieliser I don't think I phrased my original question clearly. I am not saying to open up/scroll to/highlight/setup a specific next action. I was suggesting we phrase the success message in a way that suggests what next action they should take. (e.g. "Your template has been applied. Be sure to go set up your targeting to ensure the popup is loading on the correct pages").
That is why I was asking about what the next action would be. A subtle suggestion/reminder to the admin to make sure they do some specific task. Definitely was not trying to make it a full wizard.
They could of course close it manually, but the alternative is what, leave it open?
I was suggesting we leave the success message open until they close it to ensure they see it.
I see my attempt at passive humor was lost here
Ah, yes, passive humor/sarcasm doesn't translate well in text 😅. I thought you meant to have that specific message only.
As discussed over in Slack, I am punting this to 1.16 to allow more time to get some input from the UX team.
@fpcorso To be clear, I think my answer still stands, how would we go about assuming where they should go next given without further context (wizard asking questions).
You could show 3+ places for them to check next that I can think of, so I guess if you list them all in one bullet list as quicklinks to jump to those sections, clicking any would close it.
That was just a riff, but actually sounds like a decent proposed solution now that I think about it.
@fpcorso @danieliser Here is a screenshot and the Miro Board link from our workshop today.
We can proceed to wireframes as our next action items. Please let us know how we can support with those.
https://miro.com/app/board/o9J_lZ4rGvE=/
