9

In the previous chapters, we discussed digital accessibility and thought about the elements to consider at the forefront when designing needs to be more inclusive. Now we can move on to the second section of the Checklist, which seeks to help instructional designers create with strong visual aesthetics. I want you to think about the things you can do first before you dive in too deeply. When I design for my clients or an institution, I always prototype a small section of my project in multiple versions before I commit the design choices to the entire course. This ensures I am working my creative muscles and investigating all the possible options, and it also ensures my client will be happy with at least one of the options presented.

I also work in greyscale (shades of black and white) first so that I can hammer down the design and typography before we do a color exploratory. Every designer will work in slightly different ways, but I share this in case you are feeling overwhelmed with where to start. Just being aware of the principles of graphic design is a major step toward improving and surrounding yourself with high-end polished graphic design will help you learn to recognize and implement the concepts in this book.

Before we dive into how to spot and improve your work as it relates to graphic design, I want you to look at various designs in your world. What do you gravitate toward? Why? What could be better? What isn’t working? You may not have the industry vocabulary at this time to formulate a response, but it is important to start looking at design early and often.

Over a thousand products may compete for our attention In a single aisle of a grocery store

Take a trip to the local grocery store or a big box store, or even pay attention to the billboards on the side of the road next time you take the highway. Be aware of all the ways in which design infiltrates our lives. You may have not noticed it before because we are bombarded with thousands of messages and images a day; we tune out most of them because they are ugly, uninteresting, poorly designed, or just not targeting the right person. Those designs that stand out to you are ones you want to pay attention to and ask yourself why they “speak” to you. The purpose of graphic design is to help the page communicate visually.

Graphic design helps to visually communicate writers’ ideas without upstaging them or distracting the viewer with shiny cluttered objects. It is an intentional, meticulously practiced art that even non-designers can master if they decide to do so. So, as you make your way through this section of the book, you will become better at communicating why a design works or doesn’t. Sometimes our clients are attracted to what looks good, even if they aren’t formally trained in graphic design – still, they can spot bad design from afar. This book will teach you how to communicate why some designs are better than others and how some aspects can be improved.

Good graphic design helps improve focus

Have you ever started a self-directed online course and found the urge to check your phone, email, read the news, watch a video, listen to music, make a snack, run a load of laundry… anything but sit through the class? I can recall a time I reviewed a course for a client and what I found was just a series of embedded videos and PDFs scattered between walls of text. Now, besides this being overwhelming and boring, I noticed small visual discrepancies that had a compound effect on my ability to absorb the information. Fonts for body copy and headlines were inconsistent, colors didn’t always look good together, and some typography made it hard to read. I wasn’t always sure what I was supposed to do next until I searched for the instructions.  In another experience, I evaluated a course using the OSQR rubric. When I came to section 3 – Design and Layout I – I found 63-line items to fix. Sixty-three. This means that every time a participant went through the learner journey, they encountered 63 instances where they found inconsistent elements in the course.

Some examples were: a header that wasn’t aligned properly, was the wrong color or font, or was set in caps instead of title case; an icon existed in only some of the headers but not all, headers that were not all left-aligned, the font size of the header wasn’t correctly set as an H1 in all instances, body copy was set inconsistently, video thumbnails weren’t always the same size, assessments looked inconsistent, images were varying sizes… you get the picture. What this means is that the participants’ brains must pause to adjust and acclimate themselves to the new learning environment every time they click on a new module. Their brain has to ask itself, “am I in the right place? Is this intended for me? What do I do? Where do I go?” If everything was consistent across the board, the user would experience less friction, fewer barriers, and more access to the material. Good graphic design improves learning. Bad graphic design erects barriers to learning – because of cognitive load.

Selective Attention

Imagine you are in a room and someone is talking to you in your left ear, and someone else into your right at the same time. It would be impossible to absorb the information of both people speaking to you. You would have to purposely select only one message and even when you do that you may strain to hear it, understand it, and commit it to memory because there is friction. Visuals work the same way. Say you are in an e-learning module and suddenly two sets of instructions in text boxes pop onto the screen. Both ask for very different tasks and both set the same importance and weight (same hierarchy). Your brain would have to filter the attention and follow only one. The researcher Broadbent (year of publication) focused his work on selective attention and how it relates to situations in which learners are bombarded with too many messages, and how they can filter the one that is supposed to be the most important.

Bad graphic design makes learning harder, while good graphic design greatly improves it. When there is less friction in learning, it is more enjoyable and therefore more likely to stick. Learning design needs to be intentional and if you are reading this book, you probably already know this. But maybe you haven’t yet realized how you can be intentional in the graphic design choices you make to help learners reduce cognitive load and to remove barriers to learning.

Game Accessibility Guidelines

Game Accessibility Guidelines

A collaborative effort between a group of studios, specialists, and academics, to produce a straightforward developer-friendly reference for ways to avoid unnecessarily excluding players, and ensure that games are just as fun for as wide a range of people as possible.

Includification

Includification

The AbleGamers Foundation’s Game Accessibility Guidelines, written by developers, and gamers with disabilities.

National Center on Universal Design for Learning

UDL Center

Includes universal design articles, links, presentations, videos, and more

When we have to decode the text and search through confusing navigation, we may struggle to find meaning in the activity. Our brain needs order. In most languages, people read left to right. They scan the page starting on the top left. Therefore, the home page nav or logo is often in this spot on a website. We scan top left-to-right, then we “Z” down to the left scattered across the page, and finally look at the bottom and then bottom right. Therefore, in a Canvas module, you see the “next” button on the bottom right.

One thing I see frequently in online course design is the addition of extraneous words. The words ‘click next’ aren’t necessary.” If the course is designed well, the user will know what a hyperlink is and what they are supposed to do when they finish the work on the page. A simple button labeled “next” is all you need. Good design exists in the background because of cognitive load theory. It allows for a superior user experience and makes learning more enjoyable. Think about the time you last enjoyed a novel. You kicked back, feet propped up, and breezed along without having to stop and decipher what was expected of you. This is because the font in your novel was carefully chosen, the leading, line spacing, and point size were selected purposefully and wide margins were measured carefully. You didn’t have to struggle to read, and I would make a bet you were reading a font designed for long stretches of text. If you were reading or listening to your book from a screen reader, the designer most likely made sure there were no images with text in them and all text was able to be read properly.

I like to consume books in multiple ways, and I have found when I listen to audiobooks, sometimes the text refers to images in the book that I cannot see. It makes me realize how people who rely on screen readers struggle to grasp concepts when there is missing alt text for images. The choices we make as instructional designers impact learners in big ways.

The devil is in the details

If you work for an institution, you don’t want to sacrifice the brand reputation by making a careless error. A small grammatical error, spelling mistake, or poor graphic choice could not only ruin the organization’s reputation but also your own. There were a few times in my career when an error I made caused a bad impression. I remember years ago applying for a job and I was asked to complete a full-on marketing plan that was pages long. In this report, I did a spell and grammar check using digital tools. But I failed to read over the whole document and relied on the program’s built-in functionality. To make a long story short, the interviewer spotted a homonym. I had spelled a word incorrectly. I used “their” instead of “there,” an embarrassing rookie mistake. It wasn’t that I didn’t know the difference, but it was a matter of not checking my work well.

I was up against another candidate. They said it was so hard to figure out who to hire because it was THAT close, and they made their decision based on my misspelling. They saw it as a red flag. Perhaps if I worked for them, I would make another error like that, not realize I did it, and a huge typo would go out into the world that would affect their reputation. That is how important reputation is. The interesting thing is that research supports the idea that the more embarrassing the mistake you made, the more you learn – especially if you get feedback for the error (Willis, 2009).

I am proud to say that the embarrassing mistakes I have made along the way have stuck with me and taught me the lesson that “the devil is in the details.” Design may look easy, but it takes a carefully trained eye and an appreciation for details. When we design with our users in mind, we remember to put in that extra effort to prevent barriers and to make learning more accessible, including tiny details that could trip them up or cause them to have a bad impression of our course.

Part two of the Graphic Design E-Learning Checklist

The graphic design portion of the Checklist ensures that you consider contrast, repetition, alignment, and proximity along with color, typography, and minimalism when designing. Our goal is to attract and engage the learner, aim for accessibility, and use the various components to promote learning and reduce cognitive load. The checklist allows us not only to check our designs for accessibility using the resources in the book, but also utilize best practices on how to use graphic design theory to design visually appealing content, courses, and curricular materials.