Tag: design

You know that websites need to be accessible to people with disabilities. But have you thought about your presentations?

Presentation accessibility means that your audience can experience, access, and understand your presentation. There are different considerations to presentation accessibility, depending on whether it is presented live or shared online. Knowing in advance how you want to present allows you to ensure that your content is fully accessible regardless of how the audience will experience it.

Accessibility Considerations for Live Presentations

Fonts

There are two major font categories:

  1. Serif (fonts with finishing strokes on the ends of characters, such as Times New Roman)
  2. Sans Serif (font without finishing strokes, such as Calibri)

It’s generally agreed that sans serif fonts are more readable and accessible at smaller point sizes than serif fonts. Serif fonts are often used for presentation elements that have a higher point size, such as headings and titles.

Several accessible fonts are common on today’s devices. Verdana and Tahoma are two fonts that are considered quite accessible and can be found across device platforms and formats.

For more detail about the accessibility of fonts, see WebAIM’s Fonts article.

Slide Design & Layout

It’s easy to create striking and well-designed presentations using the many available themes and templates. Using a theme’s built-in slide layouts promotes consistent and uniform design, which is essential for usability and accessibility. However, many themes use fonts that are either too small or too ornate to be truly accessible. Search online for accessible themes (there are plenty to choose from), or build an accessible theme using your agency logo, branding, colors, and conventions. Whichever option you choose, stick to the built-in formatting of the slide layouts with few or no modifications. Doing so will significantly increase the accessibility of the presentation with less additional work required later.

Layout Guidelines

Make sure that the slide text is large enough to be seen by your audience. Refrain from trying to fit too much content on one slide, forcing the font point size to get too small. A good rule of thumb for slide content text is between 20–28 points, and for headers aim for 36–44 points.

Here are some other things to consider when laying out presentations:

  • Make sure each slide has a unique header. If there is more than one slide on the same topic, add a numerical identifier to the header such as (1 of 2).
  • Avoid using italics or all caps.
  • Do not use color alone to indicate importance, but bold text is allowed.
  • Make sure to display slide numbers.
  • Keep transitions and animations simple. Fade or appear animations are acceptable, but avoid flashing and flying text.

Content Guidelines

While slide design is important, your content also needs to be developed with accessibility in mind. Keep it brief, focusing on short blurbs or lists of information. It’s easy to overfill a slide with content, especially when font sizes are in the accessible range. When in doubt, break a dense slide into multiple slides to keep readability optimal.

Regarding readability, Plain Language Association International (PLAIN) identifies five general areas to consider when writing:

  1. Audience and purpose
  2. Structure
  3. Design
  4. Expression
  5. Evaluation

To learn more about each area, visit PLAIN’s “What is plain language?” webpage.

Color contrast is also important. Make sure the text color contrasts sufficiently with background colors. This applies to text in images as well. Contrast Checker is a helpful place to test different colors, and the results it provides conform to recognized accessibility standards.

Accessibility Considerations for Online/Shared Presentations

If you’re posting your presentation on a website, sharing it on a slide service, or emailing it to users, there are additional accessibility concerns to be aware of. Some people might use assistive technology, such as screen readers, to access the content. Those users may have difficulty navigating or comprehending your presentation if the additional accessibility enhancements in this section are not applied. Both Microsoft and Google offer guidance specific to their tools, but here are some critical guidelines to remember.

Describing Images

Adding text descriptions to images, commonly referred to as alt text, allows for users with screen readers to get a verbal description of the images in presentations. The alt text should describe the content and function of the image. Some examples include “Photo of a smiling woman” or “Logo and link to our home page.” Images that are decorative and do not provide any content or function do not need alt text. However, when unsure if an image is decorative or not, add some alt text.

Reading Order

The order a screen reader reads a slide’s contents is important. With a word processing document, the reading order is natural as the content generally proceeds from left to right, and top to bottom. On a slide, however, content is added in separate text boxes that can be created or edited in any order. Sometimes the headings are at the bottom or side of a slide, but the intention is that they are read first. Imagine how confusing the content would become if it were read out of order.

Using the built-in slide layouts can minimize problems as they were designed to be accessible with reading order in mind. However, customizing or creating new layouts can lead to reading order adjustments being necessary.

Other Considerations

In addition to adding alt text and adjusting the reading order of slide content, there are a few more aspects of a presentation that should be reviewed if it is going to be shared online:

  • Make sure that links are clear and describe where the link will go. Avoid using only the words “Click Here”; opt instead to use the name of the website as the link itself.
  • If your presentation includes video, make sure it has captions, and ideally, audio descriptions of the action. If captions are not an option, provide a link to a transcript.
  • If your presentation includes audio, provide a link to a transcript.
  • If you opt to save your presentation as a PDF, make sure to enable the setting to allow tags for accessibility to be created; otherwise, all the hard work will be for naught, and the PDF will not be accessible.

Using Automated Tools to Check the Accessibility of Your Presentation

It is clear by now that there are quite a few facets to making presentations accessible. Ideally, accessibility should be a priority throughout the design process. Waiting until the end to make changes and edits is more time consuming and increases the likelihood of making errors.

There are automated tools that scan presentations to check for many things that may have been missed.

PowerPoint has a Check Accessibility tool, but for G Suite, you need to download an add-in. The most popular one is called Grackle.

These tools are a good first step to begin an overall review of your presentation but note that there are limits to what they will catch. For example, some software will place the URL to downloaded images into the alt text field. An automated scan would recognize that alt text was added to the image; however, that text would not be helpful to a screen reader user.

While it might seem like there is a lot to remember for accessibility, it’s easy to manage when you think about it at the beginning of your design process. Implementing accessibility will yield a presentation that everyone can access and enjoy.

Your organization has an important campaign coming up. You’ve set your campaign goals, and you know which social platforms you’ll use. Now, it’s time to create strong visuals to support your message and evoke the right emotion for your campaign.

In the organizations I’ve worked, finding the right photography, infographics, or illustrations is a common challenge. Your nonprofit needs to consider:

  • Are we picking images that inspire?
  • Does this photo evoke the story of our organization?
  • Will the information we share to our audience make a direct impact?
  • Do the photos come across as engaging and memorable, or are they flat and forgettable?

Here are three ways you can create the right images for your campaign.

Problem: When I search for stock photos, they look so generic and boring

Let’s say you are promoting a campaign to get more rural women from your area to sign up to vote. If you were searching for images, you might use terms such as “women, voting.” With search terms that broad, you’d probably find photos of smiling women putting a ballot into a box. Also all of the women will look disparate: 20s, 40s, 60s, white, etc.

To zero in on the right photos for this audience, get more specific. Start by thinking about what makes your campaign authentic. In the above example, it’s “women, rural, voting.” You could even scale down further since this campaign would be targeting certain types of women: “women, 30s, 40s, latinx, women of color.”

And, since you’d be in a rural location, think about what it is about that landscape that is particular to that area. Instead of featuring “any person, anywhere,” you want to search for images with visible context that puts them distinctly in a place recognizable to your audience. Use search terms like “woman, rural, mountains, 40s”, “Woman, farm, family, rural”, or “Woman, small town.”

By the way, you don’t have to use images of women voting. You want to show who they are, what they do, and how they live, to help your supporters feel an immediate connection.

Problem: my impactful data looks so flat.

Illustrating strong data points is a quick way to catch someone’s attention. Just the act of showing a large number in a social media feed of photos makes someone pause and ask, “Hey, what are they saying here?” A way to make your visuals stand apart is to animate your information.

The animations don’t need to be complex. An example where this works really well is on Vote Run Lead’s Facebook posts. To show that 52 Vote Run Lead alumnae committed to run in 15 state primaries across America, the organization created a simple animation of the number running up from 1 to 15. Other types of these simple animations are interspersed throughout their image feed, which makes their content instantly more visually engaging.

There are many ways to create animated data. The best way is using your staff graphic designer or hiring a freelance designer.

  • A designer is comfortable with image creation and animation software, such as Photoshop.
  • A designer will pay close attention to your organization’s brand guidelines.
  • Most importantly, a designer understands aspects of animation that will give it the right effect, as speed, fading, timing can all be attuned appropriately.

Problem: I don’t know how to search for stock photos, I can’t hire a designer—but I do interact with my audience often.

Having photos of your community, donors, and people that you serve is a huge win. Let me say it again, because this is important: A HUGE WIN! These photos give your campaign authenticity and are perfect for social media.

Here’s an example: Let’s say you work for an organization whose goal is to provide families with resources to support the education goals of their children. You’re probably holding events like college fairs and family nights. Bring a camera and photo release forms to your events. As people enter the event, ask them if it’s OK for you to take their photos, and if it is, have them sign the release form.

It’s best to have active photos, such as a child learning to use a stethoscope, versus passive photos of people in a large audience. Candid photos catch someone in the act, and adds life to your pictures. A word of caution: never post a photo on social media of someone who hasn’t given you their authorization.

By taking the time and effort to intentionally select and design your graphics, you can turn a daunting task into engaging and impactful work.

Donation form example

 

 

 

 

 

 

 

 

 

 

 

 

Because my spouse and I have different last names, I probably filled it in like this:

Donation form example 2

 

 

 

 

 

 

 

Donation form example 3

 

 

 

 

 

 

 

 

 

 

 

 

If your organization constantly struggles with low-quality data, whether it’s incorrect or incomplete, chances are that there is an underlying usability issue—or several.

That’s right: It’s not the fault of your website visitors, your colleagues, or your volunteers.

Wait, so does that mean it’s your fault?

Good news: you can do something about it!

Guidelines to improve user interfaces

There are 10 usability heuristics that are commonly used both as guiding principles and to identify opportunities for improvement. The examples I shared of the online donation form are what happens when something is awry in the match between the system and the real world.

Here are the other nine:

  • Visibility of system status—Ever had a panicked donor call you because they accidentally submitted their online donation twice? This is probably because they clicked the “Submit” button, and there was no spinning wheel, progress bar, or anything to indicate that the form was submitted and processed.
  • User control and freedom—I once worked on a database when once you entered something as one type of record, you couldn’t change the record type. You had to copy EVERYTHING to a new record and then delete the old one. This is the opposite of user control and freedom.
  • Consistency and standards—If you’re a PC user, it’s jarring to use a Mac because the program controls are in a different place, and vice versa. However, if you’re a Mac user using a Mac, you probably don’t even think about how to minimize a window.
  • Error prevention—Do you have phone numbers in your database that are missing area codes or are incomplete? Data validation is a form of error prevention.
  • Recognition rather than recall —You’re making a guest list for the ribbon-cutting on the new playground. Would you rather try to list off the largest donors from memory or look at a donor report to create the guest list?
  • Flexibility and efficiency of use—When copying and pasting, do you prefer to use CTRL+C and CTRL+V, or to right click to see all your options? The first may be more efficient if you remember the keyboard shortcuts, but both work, allowing flexibility and efficiency.
  • Aesthetic and minimalist design—Ever visited a website and felt like you were in Times Square because you didn’t know where to look? Someone got carried away with all the cool visual things they could do and forgot what they really wanted the user to do.
  • Help users recognize, diagnose, and recover from errors—“Error code 4238” doesn’t tell me what’s wrong, how to fix it, or whether I can. “Tray 2 is empty” tells me that the copier is out of paper in Tray 2 and that I simply need to refill it.
  • Support and documentation—In an ideal world, it would be so intuitive that you wouldn’t need any help and documentation. But we don’t live in that world, so provide some other support for when people need it.

Draw a complete picture of your data flow

Have you heard of service design? If not, here’s a good explanation from the team at Practical Service Design:

Service design is a human-centered design approach that places equal value on the customer experience and the business process, aiming to create quality customer experiences, and seamless service delivery.”

Think about a particular process in which you start by collecting data and use it to do something, like make a decision or send a mailing. Identify all of the inputs and outputs, the start and end points. Who are all the people in between? Is there anybody on either end of the start and end points? Does the process need to be extended?

Map out the process. Then walk through it, talking to as many users as possible. Find out what parts of the picture are missing and fill in those blanks. Go through the parts of the process you don’t normally see Sit with people. Ask why they do things the way they do—the answer may surprise you. And often when you sit with people and watch them perform a task, you begin to see why.

Then look for the common denominators. For example, if data is entered incorrectly or inconsistently, consider what may be missing:

  • Data validation, like requiring a postal code have five digits if the country is the United States
  • Multiple choice options when there should only be a limited set of answers, like having a dropdown for states instead of a free text field
  • Templates, so you make sure that everyone collects the same data each time
  • Form questions or field names that are commonly misunderstood. Consider rewording them in language that makes sense to whoever is entering the data.
  • Training or up to date documentation—Perhaps people are getting confused because your organization changed its program model and the how-to guides keep referencing data you no longer collect. Or perhaps, the data being asked for is no longer relevant.

The more you can do to design for better quality data upfront, the less time you’ll spend trying to clean up, sort through, or interpret incorrect, incomplete, or inconsistent data.

If people put off entering data or using the database, find out why it’s frustrating. Maybe there are steps or redundancies that are no longer necessary now that your systems are integrated. Are there any data you no longer need to collect to streamline the process? Maybe there are too many report options and now only a few of them truly get used—how is a new staff member to tell and not simply get overwhelmed? Perhaps the order of the process needs to be arranged to better match the real (current) workflow—it’s frustrating because the system doesn’t match the real world.

This is just a start, but it hopefully can illustrate how to begin looking at your own data management processes and systems. You’ll be rewarded with better quality data and less frustrated colleagues, volunteers, program participants, and donors.