Quick Bytes Live! Podcast

Ann Fandrey and IT Goldy, ready for podcasting

#19:  Don't Call my Slides PRETTY

(recorded June 19, 2017)
We welcome the lovely Ann Fandrey, Academic Technologist at UMN, on the show to talk about her research and recommendations in academic slide design. She talks about bullets, clip art, stock photos, charts, conceal and reveal, and lots more about how and when to use these tools. 
 Links from this episode:

Be sure to subscribe and let us know your feedback!

Subscribe via iTunes
Subscribe via RSS


Do you need a slide? flowchart, as described verbally in the podcast


Image uploaded from iOS.jpg
Ann Fandrey, Academic Technologist, U of MN College of Liberal Arts
Last week at the Innovate! Teaching with Technology conference in Morris, I attended a workshop about academic slide design led by Ann Fandrey, Academic Technologist in the UMN College of Liberal Arts. Ann’s interactive session provided lots of examples, research, practical tips and a space to discuss challenges people have with visual design.

Below are a few of my takeaways from this workshop. Be sure to also listen to the Extension Quick Bytes podcast discussion we had with Ann this week!

We aren't born with visual literacy skills. 

  • Analyze lots of examples
  • Practice making visuals
  • Practice collaborative critique with other people and iterating your own designs. 

Try to be intentional with your design.

You should have a reason for every slide and for every element on each slide.

People cannot listen and read at the same time.

When you are doing a live presentation, people are watching and listening to you. If you show slides that are too text-heavy, you force your audience to divide their attention between reading your slides and listening to you.

Do you need a slide?

Slides that try to do 3 things at once (teleprompter, speaker notes, and visual aids) end up doing none of them well. To decide whether you need a slide, ask yourself whether your slide is meant to
  1. Clarify
  2. Help them retain information
  3. Sustain interest
Look at this awesome decision tree!

Photo of a PowerPoint slide titled "Do you need a slide?". It includes a graphic of a decision tree about needing a slide or not.

Bullet points may still be the most efficient design choice.

For example, use bullets only when:
  • You want people to recall items from memory
  • Items map directly to your learning objectives
  • You need a list
TIP: use progressive disclosure: conceal parts of your slide and reveal them when you want to talk about them.

Use assertion evidence technique.

People remember more when you put your main point (short sentence at the top) and use an image to prove it in the body. Don’t assume everyone can see/read the slide or understand the use of an image. Here is one of Ann's before/after examples:

Before:
Poorly designed slide example with the title "Buffer strips" and several long sentences bulleted.
Fandrey, A. 2017. Academic Slide Design: Visual Communication for Teaching and Learning. Mpls: Scale + Fine
After:
Redesigned slide with an aerial photo of a field with large text and an arrow showing Buffer strips improve soil, water and air quality.
Fandrey, A. 2017. Academic Slide Design: Visual Communication for Teaching and Learning. Mpls: Scale + Fine

Use a style guide.

A style guide is a set of micro-agreements you make (with yourself) at the start of the slide design process. Making these decisions with colors, fonts, animations, pointers, alignment, shapes (use round or hard edges), etc., helps you stay consistent within slides. Consisten slides create a more cohesive deck, which makes it easier to learn from your slides and adds up to your professional credibility.

Other tips.

  • White space is the best tool to focus attention 
  • The big thing or the bright thing on your slide get looked at first 
  • Eyes follow lines. Lines divide content

My notes barely scratch the surface of this workshop but I highly recommend you check out Ann Fandrey’s book Academic Slide Design: Visual Communication for Teaching and Learning. that was just published in April 2017!  It will be available in mid July at the UMN library and of course available to purchase online on Amazon. It is full of examples, tips and an excellent resource. Thank you Ann for a great workshop, podcast conversation and sharing this great information!


Quick Bytes Live! Podcast

Kari Robideau and her pal, IT Goldy

#18:  Remember these 7 things in your teaching webinars 

(recorded June 5, 2017)
This podcast is a special edition with an extended discussion of the criteria for good webinars, not to mention our special guest! Don't miss it! Amy, Karen, Alison, and special guest Kari Robideau (live from Moorehead, MN) go over the seven components of the Delivering High Quality Webinars "rubric." We also talk about how you could evaluate your own webinar performance. Spoiler alert, one way is watching your own webinars! Eww!
 Links from this episode:
Be sure to subscribe and let us know your feedback!

Subscribe via iTunes
Subscribe via RSS


What is digital accessibility? 

According to whatis.com, digital accessibility is the ability for a website, mobile application, or electronic document to be easily navigated and understood by a wide range of users, including those users who have visual, auditory, motor or cognitive disabilities. People who have disabilities navigate websites using technology that helps them understand the content on the page. For example, a blind person uses a screen reader that will read the content to them; a person with no use of their hands may use a head pointer; and people who have difficulty typing may use text input software.

Example of a Screen Reader

** In this Quick Byte, I will only be discussing website accessibility.

Who does it affect? 

Disabilities affect a large part of the population – 15-20%. These can be temporary disabilities such as a broken arm or eye surgery; permanent disabilities such as deafness or blindness; or it could be an invisible disability such as ADHD or dyslexia. All of these types of disabilities will affect the way a person interacts with the web.

What can content editors do? 

When adding content to the web, be mindful of the people who use our websites. Here are some basic rules to follow:

Content

When writing content, be clear and concise. Scan-able content is very important for people who have trouble reading. Use headers, shorter paragraphs, lists, and plain language.

Headers

The header HTML (ex: H1, H2, H3, etc.) is not just used for looks. Screen readers will scan the page for all the headers and read them back to the user. Think of using headers as the outline of the page. They should always go in numerical order, do not skip headers and go from H2 to H4. Here's an example of what it should look like:

H1
     H2
          H3
               H4
     H2
          H3
     H2

Lastly, only include one H1 on each page. The H1 should be the topic of the entire page.

Images 

Images on websites can be used to add context to content or they can just be decoration on the page. Someone who is blind cannot see these images which is why alternative (alt) text is important. Alt text are words used to describe what the image is displaying. These words appear in the code, but not on the page. When a screen reader comes across an image, it will read this text to the user.

The only images that need alt text are the ones that add context to the associated content. If they’re used as a decorative addition, only include alt=”” in the code and the screen reader will pass right by it. If the blank alt="" is not included, the screen reader will read the image's file name back to the user.

diagram for when to use alt text on images

Photo Source: Adrian Roselli from his Selfish Accessibility presentation at MinneWebCon 2017. 

Links

Many times, links are denoted with a different color. This may not work for someone who has trouble seeing color differences. Adding an underline or a specific icon to the link helps all users understand that they can click on the words and be taken somewhere else. The underline should be included in the style sheet by the web designer or developer, so this isn’t something a content editor should have to worry about.

Example of what a colorblind person sees on our site with underlines (left) and without (right).
Screen shot of U of M Extension webpage with underlined links Screen shot of U of M Extension webpage without underlined links
When writing words that will become links, remember to be descriptive. Do not use ‘learn more’, ‘read more’, or ‘click here’. Screen readers can scan a page for all the links and read them back to the user. ‘Click more’ does not tell the user where they will go. Instead, you could use ‘learn about Extension’ and add the link to the whole phrase.


Summary

Creating websites that are accessible to all people takes work from everyone on the team. The more you consider how all users of a website are navigating around, the more people you will be able to serve.