Effective Communication

class: title

<div class="scene f2 absolute top-0 left-0 w-10 bg-red bg-blue">4</div>
<h1>Effective Communication</h1>
<h2></h2>
<div class="conf-logo"></div>
<div class="talk-meta">
<p class="talk-author">Garrick Aden-Buie & Silvia Canelón</p>
<p class="talk-date">
<a href="https://presentable-user2021.netlify.app" class="underline f-lato" style="color: var(--text-light); text-underline-offset: 7px;">Professional, Polished, Presentable</a>
</p>
</div>

---
class: f6 inverse middle

.mh5[
# Effective communication<br>has the power to:

- capture the attention of your audience
- convince others of your findings
- help you teach more effectively
- reach a broader audience]

---
class: header_background

# How does xaringan already help us build effective presentations?

.f7.mt4.mh4[
<svg aria-label="Check Square" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>Check Square</title><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"/></svg> &emsp;Use the right markup for your presentation’s structure

.footnote[Guidelines from [Making Scientific Content More Accessible<br>by Goring, Stack Whitney, Jacob, Bruna, and Poisot](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible)]

---
background-image: url(assets/img/04/04-inclusive-design.png)
background-size: contain
background-position: right

# Make "accessible"<br>your default mindset

.f7[.pull-left[

We communicate effectively when we make our work .b[open] and .b[accessible] to a broad audience

Principles of [inclusive design](https://www.microsoft.com/design/inclusive/)
- Recognize exclusion
- Solve for one, extend to many
- Learn from diversity

]]

.footnote[
[2.1 Make “accessible” your default mindset](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible/#author-label-make-accessible-your-default-mindset)<br>
Figure from the Inclusive Design 101 Toolkit by Microsoft
]

???
Recognizing exclusion helps us call on our humanity and powers of empathy

By designing for someone with a permanent disability, someone with a situational limitation can also benefit

By putting people at the center of our design process we learn from diverse perspectives and experiences

---
class:

# Design for the mode of delivery

.f7.mt4[.pull-left[

Slide presentations require .b[different design considerations] than papers or posters

Design content with .b[fewer and more focused details]

We don't have to format a<br>slide presentation like a paper

]]

.pull-right[
.bg-washed-yellow.b--yellow.ba.bw0.br0.shadow-5.pa2[
.b[Design tips:]
- Use context-relevant .b[visual aids] to help communicate your message

- Focus attention and include only the .b[most relevant details]

- Unify your content by .b[maintaining consistency] in layout and structure
]
]

.footnote[
[2.2 Design for the mode of delivery](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible/#author-label-design-for-the-mode-of-delivery)<br>
[Better Presentations: A Guide for Scholars, Researchers, and Wonks](https://policyviz.com/books/better-presentations/book-materials/) by Jonathan Schwabish]

---
name: visual

## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M139.61 35.5a12 12 0 0 0-17 0L58.93 98.81l-22.7-22.12a12 12 0 0 0-17 0L3.53 92.41a12 12 0 0 0 0 17l47.59 47.4a12.78 12.78 0 0 0 17.61 0l15.59-15.62L156.52 69a12.09 12.09 0 0 0 .09-17zm0 159.19a12 12 0 0 0-17 0l-63.68 63.72-22.7-22.1a12 12 0 0 0-17 0L3.53 252a12 12 0 0 0 0 17L51 316.5a12.77 12.77 0 0 0 17.6 0l15.7-15.69 72.2-72.22a12 12 0 0 0 .09-16.9zM64 368c-26.49 0-48.59 21.5-48.59 48S37.53 464 64 464a48 48 0 0 0 0-96zm432 16H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg> In practice: Using visual aids

.panelset[
.panel[.panel-name[Not Good]

[Ex. slide: not good](#visual-not-good)<img src="assets/img/04/visual-not-good.png" alt="Slide containing only plain text provided in paragraph form and going across the entire slide" width="75%" style="float: right;"/>

]

.panel[.panel-name[Good]

[Ex. slide: good](#visual-good)<img src="assets/img/04/visual-good.png" alt="Text has been moved to the left of the slide and an image has been inserted next to it on the right side" width="75%" style="float: right;"/>

]

.panel[.panel-name[Better]

[Ex. slide: better](#visual-better)<img src="assets/img/04/visual-better.png" alt="Text remains on the left of the slide but now the image is a background image taking up the right side of the slide fully and without interfering with the text" width="75%" style="float: right;"/>

]

.panel[.panel-name[Summary]

.f6[
- Avoid writing a "wall of text," break up the content

- Add a visual aid if it will help carry the message

- Turn your visual into a larger background image

- If your text overlaps with the background image, consider using CSS styling to give your text a background for contrast

]
]

]

---
name: focus

.panelset[
.panel[.panel-name[Ok]

[Ex. slide: ok](#focus-ok)<img src="assets/img/04/focus-ok.png" alt="Paragraph text on the left of the slide and a background image on the right" width="75%" style="float: right;"/>

]

.panel[.panel-name[Good]

[Ex. slide: good](#focus-good)<img src="assets/img/04/focus-good.png" alt="Paragraph text has been removed of unnecessary wording and organized into bullet points. Background image remains on the right." width="75%" style="float: right;"/>

]

.panel[.panel-name[Better]

[Ex. slide: better](#focus-better)<img src="assets/img/04/focus-better.png" alt="The bullet point list of text now has some words highlighted with a bold blue font face for emphasis, Background image remains on the right." width="75%" style="float: right;"/>

]

.panel[.panel-name[Good, alternative]

[Ex: good, alternative](#focus-good-alt)<img src="assets/img/04/focus-good-alt.png" alt="This alternative layout has no background image, but the bullet points are larger and appear incrementally with each click." width="75%" style="float: right;"/>

]

.panel[.panel-name[Better, alternative]

[Ex: better, alternative](#focus-better-alt)<img src="assets/img/04/focus-better-alt.png" alt="The large bullet points that incrementally reveal remain but now have select words highlighted for emphasis with a bold blue font face." width="75%" style="float: right;"/>

]

.panel[.panel-name[Summary]

.f6[

- Structure your text into smaller pieces and eliminate extra text

- Emphasize important words or phrases with text formatting

- Use incremental reveals to control the timing of content

- .b[Note:] Provide a version of your slides without<br>incremental reveals for screen readers users

]

]

]

---
class: f7
## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M139.61 35.5a12 12 0 0 0-17 0L58.93 98.81l-22.7-22.12a12 12 0 0 0-17 0L3.53 92.41a12 12 0 0 0 0 17l47.59 47.4a12.78 12.78 0 0 0 17.61 0l15.59-15.62L156.52 69a12.09 12.09 0 0 0 .09-17zm0 159.19a12 12 0 0 0-17 0l-63.68 63.72-22.7-22.1a12 12 0 0 0-17 0L3.53 252a12 12 0 0 0 0 17L51 316.5a12.77 12.77 0 0 0 17.6 0l15.7-15.69 72.2-72.22a12 12 0 0 0 .09-16.9zM64 368c-26.49 0-48.59 21.5-48.59 48S37.53 464 64 464a48 48 0 0 0 0-96zm432 16H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg> In practice: Unifying your content

.mt4[
.pull-left[

- Be consistent in your use of content classes

- Place text and images consistently between slides

- Balance content so that the slide is not too full
]

.pull-right[

### <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M149.333 216v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-80c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zM125.333 32H24C10.745 32 0 42.745 0 56v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zm80 448H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm-24-424v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24zm24 264H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24z"/></svg> Structure
- Use headings and lists to provide hierarchy and organization

- Use color, font size, and<br> font type consistently

- Use a similar style or theme of images or photographs
]
]

---
# Use clear and simple figures & graphics

.mt4[
.pull-left[
.b.f6[Complex images and figures can be difficult for:]

.f7[

- your audience to process during your presentation

- you to describe out loud as you are presenting

- you to describe with alternative text (alt-text)
]]

.pull-right[
.center[
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:6em;width:6em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#75aadb;overflow:visible;position:relative;"><path d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z"/></svg>&emsp;&emsp;
<svg aria-hidden="true" role="img" viewBox="0 0 544 512" style="height:5.65em;width:6em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:#75aadb;overflow:visible;position:relative;"><path d="M527.79 288H290.5l158.03 158.03c6.04 6.04 15.98 6.53 22.19.68 38.7-36.46 65.32-85.61 73.13-140.86 1.34-9.46-6.51-17.85-16.06-17.85zm-15.83-64.8C503.72 103.74 408.26 8.28 288.8.04 279.68-.59 272 7.1 272 16.24V240h223.77c9.14 0 16.82-7.68 16.19-16.8zM224 288V50.71c0-9.55-8.39-17.4-17.84-16.06C86.99 51.49-4.1 155.6.14 280.37 4.5 408.51 114.83 513.59 243.03 511.98c50.4-.63 96.97-16.87 135.26-44.03 7.9-5.6 8.42-17.23 1.57-24.08L224 288z"/></svg><br><br>

.footnote[[2.4 Use clear and simple figures and graphics](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible/#author-label-use-clear-and-simple-figures-and-graphics)]

???
- complex images can direct the audience attention away from your main message

- complex images are harder to describe with alt text, which is necessary to make the image accessible to screen readers

---

# Write clearly

## Engage a broad audience with clear language

.f6[

- Provide descriptive slide headings

- Introduce and define abbreviations

- Define field-specific terminology

- Write to an audience outside of disciplinary<br> silos and even outside of academia
]

.footnote[[2.7 Write clearly](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible/#author-label-write-clearly)]

---
class: f6

.mt4[From [Web Accessibility in Mind](https://webaim.org/techniques/writing/#intelligent)

- 8th grade reading level if targeting a broad audience
- 12th grade level for an educated or specialized audience

From [The A11Y Project]()

- Audience between the ages of 12 and 15 years old<br><br>]

.b.f6[
## Let's [check the readability](https://www.webfx.com/tools/read-able/check.php) of our [lemur content](#focus-better)!]

---
class: header_background, middle

# We are finished with this scene!

.f7.mt4.mh4[
<svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"/></svg> &emsp;Use the right markup for your presentation’s structure

## <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M206.86 245.15c-35.88 10.45-59.95 41.2-57.53 74.1 11.4-12.72 28.81-23.7 49.9-30.92l7.63-43.18zM95.81 295L64.08 115.49c-.29-1.62.28-2.62.24-2.65 57.76-32.06 123.12-49.01 189.01-49.01 1.61 0 3.23.17 4.85.19 13.95-13.47 31.73-22.83 51.59-26 18.89-3.02 38.05-4.55 57.18-5.32-9.99-13.95-24.48-24.23-41.77-27C301.27 1.89 277.24 0 253.32 0 176.66 0 101.02 19.42 33.2 57.06 9.03 70.48-3.92 98.48 1.05 126.58l31.73 179.51c14.23 80.52 136.33 142.08 204.45 142.08 3.59 0 6.75-.46 10.01-.8-13.52-17.08-28.94-40.48-39.5-67.58-47.61-12.98-106.06-51.62-111.93-84.79zm97.55-137.46c-.73-4.12-2.23-7.87-4.07-11.4-8.25 8.91-20.67 15.75-35.32 18.32-14.65 2.58-28.67.4-39.48-5.17-.52 3.94-.64 7.98.09 12.1 3.84 21.7 24.58 36.19 46.34 32.37 21.75-3.82 36.28-24.52 32.44-46.22zM606.8 120.9c-88.98-49.38-191.43-67.41-291.98-51.35-27.31 4.36-49.08 26.26-54.04 54.36l-31.73 179.51c-15.39 87.05 95.28 196.27 158.31 207.35 63.03 11.09 204.47-53.79 219.86-140.84l31.73-179.51c4.97-28.11-7.98-56.11-32.15-69.52zm-273.24 96.8c3.84-21.7 24.58-36.19 46.34-32.36 21.76 3.83 36.28 24.52 32.45 46.22-.73 4.12-2.23 7.87-4.07 11.4-8.25-8.91-20.67-15.75-35.32-18.32-14.65-2.58-28.67-.4-39.48 5.17-.53-3.95-.65-7.99.08-12.11zm70.47 198.76c-55.68-9.79-93.52-59.27-89.04-112.9 20.6 25.54 56.21 46.17 99.49 53.78 43.28 7.61 83.82.37 111.93-16.6-14.18 51.94-66.71 85.51-122.38 75.72zm130.3-151.34c-8.25-8.91-20.68-15.75-35.33-18.32-14.65-2.58-28.67-.4-39.48 5.17-.52-3.94-.64-7.98.09-12.1 3.84-21.7 24.58-36.19 46.34-32.37 21.75 3.83 36.28 24.52 32.45 46.22-.73 4.13-2.23 7.88-4.07 11.4z"/></svg> [materials/act-02/04-effective-communication](/materials/act-02/04-effective-communication#activity)

---
class: inverse middle

# Example slides start here

### All slides use example text from the [Duke Lemur Center site](https://lemur.duke.edu/100-lemurs/)

---
name: visual-not-good

# Visual: Not Good

Meet the critically endangered blue-eyed black lemur (Eulemur flavifrons), a crowd favorite here at the DLC!

Blue-eyed black lemurs are the most distinctively sexually dichromatic of all the lemurs. Males are black with blue eyes, whereas females are orange-brown with blue eyes.

Hailing from the tropical subhumid forests of northwestern Madagascar, these rare lemurs are among the most threatened primates on Earth.

.footnote[Travel back to the [Using visual aids slide](#visual)]

???
No use of slide or content classes

### Demo

Use of `name: visual-not-good`

```
---
name: visual-not-good

---
```

The `name` can then be used for internal linking like in the slide that brought us to this one

```
[Example slide: not good](#visual-not-good)
```

---
name: visual-good

# Visual: Good

.pull-left[

Meet the critically endangered blue-eyed black lemur (Eulemur flavifrons), a crowd favorite here at the DLC!

Blue-eyed black lemurs are the most distinctively sexually dichromatic of all the lemurs. Males are black with blue eyes, whereas females are orange-brown with blue eyes.

Hailing from the tropical subhumid forests of northwestern Madagascar, these rare lemurs are among the most threatened primates on Earth.

]

.pull-right[
<img src="assets/img/04/04-blue-eyed-black-lemur.png" title="Black lemur with black fur and blue eyes" alt="Black lemur with black fur and blue eyes" width="100%" />
]

.footnote[Travel back to the [Using visual aids slide](#visual)]

???
- `.pull-left[]` and `.pull-right[]` classes

- image inserted with `knitr::include_graphics()`

- `fig.alt=` code chunk

---
name: visual-better
background-image: url(assets/img/04/04-blue-eyed-black-lemur.png)
background-position: right
background-size: contain

# Visual: Better (sometimes)

.pull-left[

Meet the critically endangered blue-eyed black lemur (Eulemur flavifrons), a crowd favorite here at the DLC!

Blue-eyed black lemurs are the most distinctively sexually dichromatic of all the lemurs. Males are black with blue eyes, whereas females are orange-brown with blue eyes.

Hailing from the tropical subhumid forests of northwestern Madagascar, these rare lemurs are among the most threatened primates on Earth.
]

.footnote[Travel back to the [Using visual aids slide](#visual)]

???
- `.pull-left[]` and `.pull-right[]` classes

- image inserted using:

- `background-image:` url(<url>)
 
 - `background-position:` right
 
 - `background-size:` contain

---
name: focus-ok
background-image: url(assets/img/04/04-blue-eyed-black-lemur.png)
background-position: right
background-size: contain

# Focus: Ok

.pull-left[

Meet the critically endangered blue-eyed black lemur (Eulemur flavifrons), a crowd favorite here at the DLC!

Blue-eyed black lemurs are the most distinctively sexually dichromatic of all the lemurs. Males are black with blue eyes, whereas females are orange-brown with blue eyes.

Hailing from the tropical subhumid forests of northwestern Madagascar, these rare lemurs are among the most threatened primates on Earth.
]

.footnote[Travel back to the [Focusing attention slide](#focus)]

???
- `.pull-left[]` and `.pull-right[]` classes

- image inserted using:

- `background-image:` url(<url>)
 
 - `background-position:` right
 
 - `background-size:` contain

---
name: focus-good
background-image: url(assets/img/04/04-blue-eyed-black-lemur.png)
background-position: right
background-size: contain

# Focus: Good

.pull-left[

Blue-eyed black lemurs are:

- sexually dichromatic: males are black with blue eyes and females are orange-brown with blue eyes

- native to the tropical subhumid forests of northwestern Madagascar

- rare and among the most threatened primates on Earth
]

.footnote[Travel back to the [Focusing attention slide](#focus)]

???
- `.pull-left[]` and `.pull-right[]` classes

- image inserted using:

- `background-image:` url(<url>)
 
 - `background-position:` right
 
 - `background-size:` contain
 
- use of an unordered list with dashes `-`

---
name: focus-better
background-image: url(assets/img/04/04-blue-eyed-black-lemur.png)
background-position: right
background-size: contain

# Focus: Better

.pull-left[

Blue-eyed black lemurs are:

- .b.blue[sexually dichromatic:] males are black with blue eyes and females are orange-brown with blue eyes

- native to the tropical subhumid forests of .b.blue[northwestern Madagascar]

- rare and among the .b.blue[most threatened primates] on Earth
]

.footnote[Travel back to the [Focusing attention slide](#focus)]

???
- `.pull-left[]` and `.pull-right[]` classes

- image inserted using:

- `background-image:` url(<url>)
 
 - `background-position:` right
 
 - `background-size:` contain
 
- use of an unordered list with dashes `-`

- use of CSS classes to highlight text with a blue bold face

---
name: focus-good-alt

# Focus: Good (sometimes), alternative

.f6[Blue-eyed black lemurs are:

- sexually dichromatic: males are black with blue eyes<br>and females are orange-brown with blue eyes]

.f6[
- native to the tropical subhumid forests of<br>northwestern Madagascar]

.f6[
- rare and among the most threatened primates on Earth
]

.footnote[Travel back to the [Focusing attention slide](#focus)]

???
- use of an unordered list with dashes `-`

- incremental list items with `--` separator

---
name: focus-better-alt

# Focus: Better (sometimes), alternative

.f6[
Blue-eyed black lemurs are:

- .b.blue[sexually dichromatic:] males are black with blue eyes <br>and females are orange-brown with blue eyes]

.f6[
- native to the tropical subhumid forests of<br> .b.blue[northwestern Madagascar]]

.f6[
- rare and among the .b.blue[most threatened primates] on Earth
]

.footnote[Travel back to the [Focusing attention slide](#focus)]

???
- use of an unordered list with dashes `-`

- incremental list items with `--` separator

- use of CSS classes to highlight text with a blue bold face