Below are a few recommendations on tools that you can use to elevate your skills and that will help you build high-resolution System Simulations
In order to create a quality, high-resolution System Moment, your team will need to select a screen capture and recording tool, as well as a video editing tool. Since these tools operate outside the Bright Platform, you can pick whatever tool you prefer. However, we do have a few recommendations on features to prioritize. When Bright creates Sims and Moments, we use a mix of tools depending on the situation, including:
- Snipping Tool: This tool comes pre-loaded on most PCs, is free, and is very easy to use.
- PicPick: Also free, this tool can do a mix of screen captures, including the Window Scroll Capture.
- Chrome Full Page Screen Capture: There is a great, free Chrome Plugin that captures full window screen captures, including Window Scroll Capture. A great option if your CRM is accessed via browser
- Camtasia: This is a video and screen recording software that can be used to support both System Canvas creation, as well as Simulation/Moment file creation. Camtasia also has many features that you can use to create non-simulation content, such as video walkthroughs with knowledge checks.
- Filmora: This is a video and screen recording alternative to Camtasia (though we like Camtasia more!)
- Photoshop: This is not essential, but those who are interested may wish to use Photoshop or a similar image editing tool in some cases. Most image editing needs can be met in Bright’s System Canvas builder tool. However, complicated configuration settings for some centers may require certain edits to be made before uploading to Bright. Photoshop licenses can be purchased from Adobe for $9.99/month per license.
Production + Consistency Tips
Key factors to avoid re-work and annoying inconsistencies in your System Canvas include:
- Computer Settings: It’s not always visible to the naked eye, but most computers use different screen resolution settings. This is why it is VERY important that you capture your screenshots on either a very good and big computer screen, OR on exactly the same computer type/settings that your trainees will use. The key phrase here is you can always reduce screenshot resolution and quality, but you can not increase it. This can become noticeable if you take screenshots on multiple computers and then try to blend them together in a single System Moment. Screens can become pixelated in the process, which is usually distracting to the learner.
- Consistency: Related to resolution is consistency in screenshot capture location. The upper left corner should be EXACTLY the same in every screenshot. Being off by even a couple pixels can cause the screen to ‘move around’ as the learner clicks through. Avoid using the free hand screen shot option in favor of the Window or Scrolling Window options, which automatically address this by capturing the exact same window area every time.
- Width: Finally, be sure to leave your system screen open to the same width throughout all your capture sessions – ideally full screen on a screen the same size as your future trainees. Bright’s Builder tool will automatically re-size screens down, but it can still feel "glitchy" when screenshots start at different widths and sizes and are then normalized.
Advanced Tips!
One last screen capture tip for Advanced Users is directly editing Chrome or IE UX code in your browser before capturing a screen shot.
The System Moment Builder tool allows you to customize any type of system data in the Bright Platform, creating a dynamic system experience. For legal reasons, you’ll need to anonymize data before creating a sim either way; however, there may be times when you wish to change data for the baseline screen BEFORE you take the screen shot. This may look advanced, but really it’s just a classic Ctrl+F inside some HMTL code. But the outcomes are really cool, fun and helpful.
Step 1: Go to screen you want to edit:
Start by going to the system screen you want to edit. This must be in a modern browser like Chrome to work. In this case we’ll go to The Washington Post newspaper site.
Start by going to the system screen you want to edit. This must be in a modern browser like Chrome to work. In this case we’ll go to The Washington Post newspaper site.
Step 2: Right Click near the item you want to change:
To make the text/site change, right click near the area you want to change. In this case, I don’t like the Coronavirus story – it makes me too sad. So I want to change it to something more positive. So I right click near that story as shown below.
To make the text/site change, right click near the area you want to change. In this case, I don’t like the Coronavirus story – it makes me too sad. So I want to change it to something more positive. So I right click near that story as shown below.
Step 3: Edit the Text in the HTML Bar:
Next, you’ll see a very fancy HMTL Inspector frame come up on the right side of the screen. DON’T PANIC! You don’t really need to know how to code as long as you can 1) visually find the text phrase you want to change or 2) use Ctrl+F. In this case, I can see the Coronavirus headline in the text already selected – that’s why we told you to right-click near the thing you want to edit. You can now click on the text and change it to whatever you want. I’ll type ‘Bright is the Best Learning Company in the World.’
Step 4: Click anywhere outside the Inspector:
And there you have it. It’s official – on the Washington Post home page: Bright is the Best Learning Company in the World. What just happened? Your browser referenced the original code when you first visited, but then essentially downloaded a temporary copy. When you changed the text, you changed the temporary copy, not the original. But your screenshot – and future learner – won’t know that. By editing within the HTML you’ve kept all the placement and formatting, with very little work. You can go practice on basically any website you want. Have fun!
