Here are some example tasks, the "what" you may want to show:

Keep the focus on one key goal! If more than one is included in your flow concept, split them up into separate Demo Steps!

For example:

In addition, you should note whether the Demo will simulate a desktop or a mobile application. The type of screenshot (and size) that best fits the scene will change based on which you wish to depict.

The goal of Demo is to emulate the real-life experience a user will have when interacting with software. As such, you should always take screenshots of the software's entire page, even if the learner will only be interacting with one area of the page! In this way they will get a realistic experience and your Demo won't feel disjointed.

When taking your screenshots, make sure the width of your screen/browser is consistent for each one. Unless you have a steady hand, avoid click-and-dragging over screen areas to take screenshots and use the "current screen"/"full page" options instead!

You should also avoid taking screenshots that are excessively wide and very narrow in height when possible.

For best results, get all screenshots for a single Demo at once, and establish a standard screen/browser sizing to be used for all Demos!

The area learners need to interact with to move on to the next image must be shown in every screenshot taken. Otherwise, Demos won't make any sense if a required action is skipped!

Looking at the following example, with the interaction spot unseen on the second image, where should the learner select to move on to the third page? Does the sequence still make sense?

When the second screen doesn't show the required interaction spot (profile picture drop-down menu is missing):

Keep this in mind as you take your screenshots to ensure you have all your interaction spots accounted for!

If you have text fields to fill in, you can approach it in two ways!

Your first option is to take an individual screenshot before and after each individual field is filled in. In this case:

Your second option is to take a single screenshot before fields are filled in, and one additional screenshot after all fields are filled in. Doing so gives you two options:

For text-heavy Demos containing "standard" fields such as filling out one's name, address, and phone number on a form, option 1 may be preferred. But if there are only a few text boxes to fill, or the fields are unusual, option 2 will ensure learners are paying attention to the type of information they're "entering" in the Demo!

When taking screenshots, aim to only showcase the software itself. that means:

Doing so will ensure learners aren't distracted by these elements during playthroughs and will result with a more realistic feel to the walkthroughs.

Create a new computer file and name it the same as the Demo itself. If you haven't established a name, try titling it by what the Demo is about. For example:

In addition, rename your screenshots accordingly, and include each image's numerical order in its name:

Note that uploaded images will keep the same image name in LemonadeLXP. Though they can be edited, save yourself some time by naming it accordingly from the get-go!

Depending on how you take your screenshots, they may need to be resized to better emulate the platform (mobile or desktop) they represent. Mobile phones, for example, can take screenshots that will appear several-times larger on a computer screen than how it appears on the phone itself - using them as-is won't result with a realistic Demo!

Image editing software typically has a resize menu that will allow you to change its size. Be sure to set the measurement type to "pixels" and have it "scale proportionally" as well:

Example of image dimension options (yours may look different):

Not sure what width to use? Our "What Image Size Should I Be Uploading" article should help!

Though images can be as long/high as you wish, if an image is excessively long it's best to crop it (and other similarly long images) to a similar, shorter length!

If you need the learner to scroll a long ways down to find the next interaction point, rather than have one super-long screen you can create two images and have the learner "scroll down" on image 1 (by creating a hotspot on the scroll bar) to open and view image 2!

It's imperative you make sure there is no personal information on any of the screenshots. You must always cross-reference your internal standards to make sure you are compliant! Should you encounter a screenshot that includes confidential information, such as a client's full name or a financial account number, you must omit that information from that image!

To do so, open the image file in image-editing software. Choose a method of omission (e.g., blur it out), and make a note to use that same method throughout all Demos to maintain consistency. Then, edit the image to "remove/cover" the confidential information, and save.

For example, if a client's full name is shown in an image, like so:

You could edit the image to "hide/remove" part of their name...

...or, blur the name completely!

Be sure to go through each image before including it in your Demo to ensure nothing confidential is included. You can also save yourself some time by identifying which screenshots contain confidential information when you create your flow overview, in turn avoiding having to scan through each individual image afterward!

Of course, once those edits are in place, review your images one last time to confirm all information that should be omitted is no longer visible.

To keep the illusion of the Demo as seamless as possible, remove/edit out any "revolving" visuals that may disrupt its flow. This includes visuals like:

If they're left in, the Demo's flow will feel disjointed and less realistic. For example, keeping the following "headers" on these mobile screenshots ruins the feel of this Demo's sequence:

When you remove the revolving visuals altogether, it results with a Demo that has smooth, realistic transitions between stages. In addition, the same screenshots can be used for other Demos without an issue - there's no need to try to "match" times or battery life icons between each one!