1 of 31

“Good design is like a refrigerator - �when it works, no one notices, but when it doesn’t, it sure stinks.”�- Irene Au, designer

“Design is the intermediary between information and understanding.” �- Hans Hoffmann, painter

2 of 31

Presentation Design for Usability, Accessibility, and Inclusion: ~10 Tips

Presented by:

Steve Garwood, Ed.D., Director, Faculty Development, Rowan-Virtua SOM

Again, Good Morning, and welcome to today’s webinar.

I’ll send this presentation out later today, but if you’d like to access it now, please use the QR code on the screen.

For anyone who hasn’t met me, my name is Steve Garwood and I’ll be your host for today’s event. Currently, I’m the Director of Faculty Development for Rowan-Virtua’s School of Osteopathic Medicine. Prior to starting at Rowan-Virtua SOM in December 2019, I worked as Director of Transformational Learning at Thomas Edison State University and was the Assistant Dean for Instructional Support and Assessment for the School of Communication and Information at Rutgers University. While at Rutgers, I served on the University’s Universal Design committee and taught Web and Multimedia Design. Currently at SOM, I’m the Chair of the Professional Learning sub-committee of the school’s DEI Committee. I’m also the principal investigator on a Transcript and Caption project that we are currently running.

I would not consider myself an expert in the fields of accessibility and usability, but I’m a very willing and eager learner.

3 of 31

Accreditation and Designation Statements

Rowan-Virtua School of Osteopathic Medicine (Rowan-Virtua SOM) is accredited by the Accreditation Council for Continuing Medical Education (ACCME) to provide continuing medical education for physicians.

Rowan-Virtua SOM designates this live activity for 1 AMA PRA Category 1 Credit(s)™. Physicians should claim only the credit commensurate with the extent of their participation in the activity.

4 of 31

Disclosures

There are no financial disclosures and/or conflicts of interest.

All Speakers, Course Director, Co-Directors, planners, reviewers, and staff members participating in CME activities are expected to disclose relevant financial relationship pertaining to their contribution to the activity. Relationship information is analyzed to determine whether conflicts of interest exist. All conflicts of interest are resolved prior to participation in the planning or implementation of each activity. Presenters are also expected to disclose any discussion of (1) of label or investigational uses of FDA-approved commercial products or devices or (2) products or devices not yet approved in the United States.

5 of 31

Learning Objectives

Upon completion of this webinar, attendees will be able to:

Explain the benefits of incorporating design techniques which focus on Usability and Accessibility to further Inclusion
Increase the Usability and Accessibility of presentation documents
Identify resources for further exploration

Image from �Pexels

6 of 31

Webinar “Housekeeping”

Questions & Comments
Participation = Productive and Interesting
Mute (Spacebar)
Cameras
Captions (CC)

Image from �Pexels

7 of 31

Agenda

Resources
Definitions
Design Tips

Usability
Accessibility

Q&A

Image from �Pexels

8 of 31

Resources and Inspiration

Williams, R. (2015). The non-designer's design book: Design and typographic principles for the visual novice. Pearson Education.

CAST (2018). Universal Design for Learning Guidelines Version 2.2.

WebAIM (2023). Principles of Accessible Design

There are three particular resources that I’d like to share with you. I’ve relied on each in my career and while developing this session.

WebAIM (Web Accessibility In Mind) has provided comprehensive web accessibility resources since 1999. In my early days as a web developer I used WebAIM as a resource and have found it very valuable for providing concise, practical information on accessible design.

The Universal Design for Learning, or UDL, Guidelines from CAST, are a framework used to improve and optimize teaching and learning for all people based on scientific insights into how humans learn. UDL addresses multiple topics of accessibility and usability.

Lastly, The Non-Designers Design Book is a resource I used when teaching web and multimedia design at Rutgers. I found the simple, straightforward approach easy to implement with undergraduate and graduate students with minimal design experience. It also uses an acronym that is very easy to remember which I’ll get to in just a bit.

9 of 31

Definitions

Usability

Readability

Accessibility
Inclusion

10 of 31

Definitions - Usability

Designing to be effective, efficient, and satisfying��
More information:�WebAIM:�Accessibility, Usability, and Inclusion

11 of 31

Definitions - Readability

The ease with which a reader can successfully decipher, process, and make meaning of the text read��
More information:�Readability Matters - Legibility vs. Readability

12 of 31

Definitions - Accessibility

Designing so that people with disabilities can equally perceive, understand, navigate, and interact with materials.��
More information:�WebAIM - Accessibility, Usability, and Inclusion

13 of 31

Definitions - Inclusion

Ensuring the involvement of everyone to the greatest extent possible��
More information:�WebAIM:�Accessibility, Usability, and Inclusion

14 of 31

Design Tips - Usability

Contrast
Repetition
Alignment
Proximity

Williams, R. (2015). The non-designer's design book: Design and typographic principles for the visual novice. Pearson Education.

15 of 31

1 - Contrast

If elements are not the same, make them different (pg. 13)
Types

Size
Weight
Font/Typeface

Williams, R. (2015). The non-designer's design book: Design and typographic principles for the visual novice. Pearson Education.

The simple rule of Contrast is to make things different to draw the eye of the viewer as needed. Contrast can either be low or high depending on your purposes. When you want items to be unique, you’ll want to make them different.

Some common methods of contrast are Size, Weight, and Font or Typeface.

You can see a few examples of contrast on this slide. The title or header on the page is black vs. a white background. The title is in strong contrast to the body text as it is larger and darker. You can also see contrast in the size of the text across the slide. The title or header is the biggest, the content is next in size, while the text for the book reference is small. This indicates the relative importance of each item.

Lastly, one approach to contrast that is often suggested is the use of a different typeface for headers and content. On this slide I’m using the same typeface, Arial, as it’s very Readable, but I’m using different size and weight. Another thing I could do would be to use a different typeface for the header vs. the body text. For example, I could use Times New Roman (a very Readable typeface) as the header, and Arial for the body text

16 of 31

2 - Repetition

Repeat visual elements to develop organization and strengthen unity (pg. 13)
Types:

Graphic Elements
Overall Slide Layout

Williams, R. (2015). The non-designer's design book: Design and typographic principles for the visual novice. Pearson Education.

17 of 31

3 - Alignment

Nothing Arbitrary.
Every element should have a visual connection with another element (p. 13)
Types:

Header to text
Lists

Tools:

Grids & Guides

Williams, R. (2015). The non-designer's design book: Design and typographic principles for the visual novice. Pearson Education.

18 of 31

4 - Proximity

Items related to each other should be grouped close together (p. 13)

Williams, R. (2015). The non-designer's design book: Design and typographic principles for the visual novice. Pearson Education.

19 of 31

Heading

Subheading

Lorem ipsum dolor sit amet

Proin quis sapien vel diam semper

Mauris efficitur eros ac gravida fringilla

Subheading

Lorem ipsum dolor sit amet

Vivamus ut consectetur urna

Maecenas lacinia urna et magna euismod fringilla

Lorem ipsum dolor sit amet

Proin quis sapien vel diam semper

Mauris efficitur eros ac gravida fringilla

Vivamus ut consectetur urna

Maecenas lacinia urna et magna euismod fringilla

Lorem ipsum dolor sit amet

Vivamus ut consectetur urna

Maecenas lacinia urna et magna euismod fringilla

IMAGE

20 of 31

Questions/Comments

Image from �Pexels

21 of 31

Design Tips - Accessibility

QR Codes
Links
Alt Text for Images
Color
Space for Captions - Lower Third
Provide Slides Beforehand�

More information: �WebAIM: Principles of Accessible Design

Image from �State Educational Technology Directors Association

22 of 31

5 - QR Codes

Enable Access
Review/Manipulate on own Device
QR Code Generator��
QR Code Generator

Image from �State Educational Technology Directors Association

23 of 31

6 - Links

HTTP://
Click Here
Every link should make sense when read by itself
Example

https://webaim.org/intro/#principles
Principles of Accessible Design

Image from �State Educational Technology Directors Association

24 of 31

7 - Alt-Text for Images

Add descriptive text for images that convey information
Alt-Text not needed for decorative images

Look for a “decorative image” checkbox

Image from �State Educational Technology Directors Association

25 of 31

8 - Color

Don’t use color alone for meaning
Consider those who can’t see color

Image from �State Educational Technology Directors Association

26 of 31

9 - Space for Closed-Captions

Leave space for closed-captions

Image from �State Educational Technology Directors Association

27 of 31

10 - Provide Slides Beforehand

UDL Guideline #6 - Provide options for Executive Functions

Image from �State Educational Technology Directors Association

28 of 31

Review & Thank You!

Thank you!
Review

CRAP
Accessible >>> Inclusive

Feedback? (garwoods@rowan.edu)

What’s one thing I could do to improve this workshop?

Questions?

Gratuitous Dog Pictures - Bentley & Pearl

29 of 31

END

30 of 31

From AAMC program: Accessibility best practices that need to be fully implemented include: captioning and providing transcripts of videos and lectures; providing alt text for images and diagrams; using proper color contrast in presentation materials; leaving blank space at the bottom of slides for captions; proactively posting materials in advance and recording didactic sessions for learners to access subsequently; and more.5 Common accessibility barriers in clinical settings include: incompatibility of dictation or speech-to-text software with EMR systems, reluctance to request excused absences for necessary medical appointments, needs for alterations in schedule or location, and more. As value is placed on accessibility, a welcoming message is sent to LWD that: their needs are important, they are expected to be part of the cohort, and they belong. This strong commitment to accessibility enhances an inclusive learning environment.

10 things �(ADA, UDL, Mayer)

CRAP

UDL

QR code for presentation

ALT for images

Links contextual text

Words AND IMages (Mayer)

6x6

Preserve lower third for captions

31 of 31

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget malesuada purus, id efficitur est. Duis convallis vehicula nibh, quis cursus erat condimentum non. Aenean quis justo finibus, mollis libero et, ullamcorper massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel est ut sapien dictum fermentum. Nunc eu volutpat est. Fusce tincidunt odio sed mi mollis, at malesuada libero scelerisque. Cras hendrerit placerat nulla. Nunc id diam id libero sodales suscipit nec in neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sit amet odio dignissim, sagittis mi id, tempus mauris.