A common user interface pattern used on many many websites are modal dialogs. These are elements which appear above the page you are using and focus the user interaction to one area of the screen. See the animation below as an example of a modal dialog.
When using Nickelled to capture modal dialogs (or any state change) think of the different states as pages: so even though the modal dialog (or state change) may be on the same page, we will capture each state change as a separate page. For this, we will need to think about the lesson on creating multipage guides.
Rewatch the situation presented in the previous animation. You are on a webpage, you click a link, a modal window opens up in the page, you close the modal window and then back to the webpage.
To reflect this in the Nickelled guide you would take the following steps.
Go to the webpage with the modal window.
Open the Nickelled creator tools (click the Chrome extension).
The tools will open on the page.
Create your necessary steps on the page.
Once done (before opening the modal dialog) click ‘Add next page’.
Wait for the page to be saved.
Then click the action which opens the modal window.
When the modal is open click ‘Continue creating guide’.
Create you necessary steps on the modal.
Once done (before closing the modal dialog) click ‘Add next page’.
Wait for the page to be saved.
Then click the action which closes the modal window.
When the modal is close click ‘Continue creating guide’.
Continue creating your guide as normal.
This may seem like a lot of steps but it’s actually just 5 steps repeated. Knowing when to ‘Add next page’ is the real trick.