- Pattern: Live Demo
- Antipattern: Dead Demo
- Pattern: Lipsync
- Pattern: Traveling Highlights
- Pattern: Crawling Code
- Pattern: Emergence
- Pattern: Live on Tape
This chapter is from the book
This chapter is from the book
This chapter is from the book
Pattern: Traveling Highlights
Definition
Use graphics, opacity, and other emphasis tools to decorate something you are discussing or demonstrating.
Motivation
This pattern is a Slide Construction pattern, but it and the following two patterns appear frequently in presentations that illustrate features and details about a tool, procedure, process, or other concrete artifact.
Displaying numerical data or source code while you talk about it is visually dull. Traveling Highlights helps you to focus audience attention on specific parts of the screen while leaving the rest obscured but visible to provide consistent context. And it encourages creative use of animations and transitions to add visual effects to otherwise static screen shots. Like bullet points, it also serves as a reminder to the presenter that something in particular needs attention.
This pattern increases the information density of your slides. You can cover more information in one slide by using Traveling Highlights than by showing single-screen shots on multiple slides. This is an advantage for presentations forced to implement the Slideuments antipattern because it keeps the slide count (and therefore page count) down.
Applicability/Consequences
This pattern is useful if a presentation uses many detailed artifacts—source code charts, spreadsheets, tool output, and so on—that you want to show in varying degrees of detail while keeping a larger context available.
Mechanics
This pattern is easy to implement in a variety of ways in all modern presentation tools. Figure 5.2 shows how a tutorial presentation illustrates computer source code using this pattern.
)
Figure 5.2. Traveling Highlights in source code
In Figure 5.2, a single slide (shown here as six animated steps) builds source code as the presenter talks about it and then highlights a particular part on subsequent animations.
To create this effect, don’t start by displaying source code in a text box or numeric data in a table. Instead, use screen shots of the software tool that the code or numeric data comes from, and show them full-screen. For computer source code, take a screen shot from a development environment. Software developers are accustomed to seeing computer source code colored in specific ways by their tools, so representing code as plain text would look odd to them. Similarly, if you’re showing data that comes from a spreadsheet, use a screenshot of the spreadsheet. Your audience is accustomed to seeing the data in a spreadsheet anyway, and now you’ve got one less transcription to perform.
For the effect shown in Figure 5.2, follow these steps:
- Capture just the region of the development environment’s screen that encompasses the source code you want to show, not the rest of the tool. A developer audience will recognize the context from the tool’s built-in syntax highlighting alone. (For screen captures from a tool like a spreadsheet, you might want to include more of the tool’s user interface to provide context.) Many of the screen-capture tools enable you to capture a fixed region and will preserve that region between subsequent screen shots.
- For the first portion of highlighted code you want to show, highlight those lines and recapture the screen shot, using the exact same region.
- Place the new image directly over the old one, using the presentation tool’s rulers and guides to help you line it up.
- For the presentation, use a dissolve entrance animation: because you’ve captured the exact region both times, only the highlighted portion changes, and the highlight seems to “grow” around the part you’re trying to emphasize.
The highlights don’t have to be in color. Consider the slide shown in Figure 5.3.
)
Figure 5.3. Information-dense status-report slide
Generally, we would shun a slide with as much information as Figure 5.3, preferring to deliver it in more meaningfully sized chunks (see the Cookie Cutter antipattern). However, perhaps the audience is accustomed to this status-report format, and it really represents the agenda of the meeting. By using Traveling Highlights, you can keep this whole thing on the screen and highlight interesting parts, as shown in the four serial slides in Figure 5.4.
)
Figure 5.4. Using boxes and lines as Traveling Highlights
Notice the use of the Analog Noise pattern for both the lines and text to distinguish presentation-added text from the original source. When used in this way, Traveling Highlights serves as a Context Keeper, enabling you to return to a familiar context between each drill-down into detail.
You don’t even have to use graphic elements to implement this pattern. Consider the version shown in Figure 5.5.
)
Figure 5.5. Using zoom and opacity for traveling highlights
In this version, the original image stays in the background while the presentation uses a combination of opacity, movement, and scale to emphasize each part in turn. This version looks nice because each chart “grows” out of its original position, centering itself while the rest of the spreadsheet dims.
To implement this pattern, you must carefully layer animation effects. Consider the Keynote Inspector shown in Figure 5.6.
)
Figure 5.6. Keynote Inspector for size, motion, and opacity settings
In Figure 5.6, the overall image (named Status_spreadsheet) has its opacity set to 30 percent. At the same time (using an automatically with transition to start the build), the overlaid graph is transitioned in at its size and position on the original. Then, using an after transition, it moves to the center of the screen and grows to 200 percent at the same time. The visual effect makes it appear to “grow” out of its position on the spreadsheet. To move to the next element, dissolve-transition the current focused element and “grow” the next one. You don’t need to “put it back” afterward: making it appear in its original location and move to the center has a much greater visual benefit than doing the reverse. Instead, spend your visual budget on the item you’ll talk about next.
Be careful to test the presence and performance of any advanced animations and transitions if you plan to deliver your presentation on a tablet such as an iPad. The version of Keynote for the iPad is severely limited compared to the desktop version, so plan accordingly.
The same series of animations appear in the PowerPoint version of the same pattern, as shown in Figure 5.7.
)
Figure 5.7. Traveling Highlights in PowerPoint
The implementation details of Traveling Highlights differ in detail but not concept in PowerPoint:
- Start with the summary slide. This will be the slide you return to after each emphasized item. It serves as your Context Keeper.
- Paste the full-size embedded image (in this example, the chart) onto the slide and then make its size and position the same as the summary image’s. Pasting the full-size image and then resizing it generally results in a higher-quality image. The alternative—pasting a small image and telling PowerPoint to scale it upward—generates image noise.
- Set an entrance animation to make the embedded image fade in.
- Add a motion path animation. PowerPoint has a huge number of these, tracing all sorts of patterns, most of which we think look pretty bad. For animations like this, simpler is often better. In this case, we chose a straight line.
- Add an emphasis animation such as grow/shrink and set it to Start with Previous. This lets the movement and growth occur simultaneously, making for a more fluid effect.
Be sure to test this sequence under real-world conditions. PowerPoint isn’t forgiving of inadequate hardware, which manifests as ugly, jerky animations. If that’s the result you get, you’ll create a better audience experience by eschewing fancy effects in favor of a simpler approach, such as simple appearance animations rather than ones that rely heavily on motion.
Related Patterns
This pattern works well for text (and images) that fit in a single slide. If a chunk of text that works as a unit is too large for one slide, Crawling Code might be a better choice.