Section 1: Overview
Focus
The purpose of my info-graphic will be to help faculty, staff, instructional designer and web developers within the University of California understand the education and accessibility needs of disabled undergrads within out system. According to a recent study we have 25,000 undergrads in the University of California with some sort of disability. These students are entitled through the American’s with Disabilities Act and 508 to equal access to educational opportunities.
My info-graphic will focus on the online education aspect of accessibility and how to align best practices for web-based accessibility to actual practice. My info-graphic will be broken into 4 sections (the most common disabilities for millennial aged students):
· Designing web content for students with dyslexia
· Designing web content for students on the autism spectrum
· Designing web content for students with ADHD
· Designing web content for students with physical disabilities
· Low vision blindness
· Hearing impairment
· Motor impairment
· The info-graphic will be both printable and also a web based PDF that can be shared and downloaded.
Learning Objectives
After reviewing the info-graphic you should be able to:
· Describe the best practices for building web-based content for students with dyslexia, autism, ADHD and physical disabilities
· Identify and summarize the three standards of accessibility ADA, 508 and WCAG 2.0
· Explain the differences between dyslexia, autism and ADHD
· Locate resources to help implement accessible web-based content
· Audience for Info-Graphic
The University of California (UC) is a large and distributed system. However the Instructional design units communicate regularly. The main audience for the info-graphic will be instructional designer (ID) working for the UC. Most IDs want to make their courseware accessible but lack the time or knowledge to fully implement accessible courseware. I cannot take a heavy-handed approach with them since they have autonomy and I must be respectful of their expertise. I believe that sending a PDF of the best practices for building accessible content will be an interesting and light touch to an issue that can be contentious at times.
After sharing with the 20 or so IDs in the UC system. I would like to distribute this info-graphic more widely to all web developers in the UC system. I do not currently have the power to email every web developer in the UC so this is have to be implemented after the initial rollout to just the IDs. But the long-term goal is the have the info-graphic printed and displayed and every workstation of every web developer here at the UC.
Tools and Technology
To create the info-graphic I will use Adobe Illustrator. I have a background in design but I have not worked in print for a very long time so this might be a challenge to relearn all the techniques to build this info-graphic. I might also use Adobe Photoshop if I would like to add more raster images to the info-graphic.
After the graphic is complete I plan to distribute the document as a PDF using the UC list serve. I might also promote the image to the general public using platforms that young people are on such at Reddit or Imgur. Depending on the reception I might also do a video talking over the info-graphic and post to my Youtube Channel and promote the video on Facebook and other social media.
SECTION 2: Design Decisions
Design Decision #1 – Icons
I decided to use icons through out the design of the disabilities info graphic. The problem that the University of California is facing is that there are a lot of designers who do not even know what accessibility is and they don’t really want to take the time to learn about all the best practices that they might find on a website like https://www.w3.org/WAI/intro/wcag. This website by the W3 is a wealth of information for people who know what they are looking at but the problem is that it looks terrible. The information is too dense and even accessibility experts find if hard to navigate. The idea of icons is to simplify the thought process. Reynolds, G. (2009) states, “Just be sure to always keep in mind the need to eliminate clutter to make your message clear” (p.19). I needed to remove all the clutter of the WCAG 2.0 and get to the heart of the information and that to me was the use of icons to make about 8 recommendations to the viewer. The icons keep it simple and straightforward for developers and teachers. At a glance the viewer and see that there are just a few recommendations for teaching students with Autism. If there were to look at the literature there would be about a thousand recommendations for teaching students with autism. Icons keep is short and simple.
Design Decision #2 – alignment
I chose to use a grid to layout my graphic. I’m was a painter when I was younger so I understand that sometime you should have more of an artistic flair when creating graphics but for the most part there are few people who should break the general rules of design. I’m definitely not one of those people. For sake of simplicity I used the same layout of all of my graphics. Each graphic divided the page the long way and aligned all content down the center. The grid was simple and did not try to do too much. I feel that a grid is important for most beginner designers. I’m not a beginner but I still use the grid. Sam Hampton-Smith states (2017), “The foremost purpose of a grid – in graphic design at least – is to establish a set of guidelines for how elements should be positioned within a layout. Not only does an effective grid provide the rhythm for a design, but it also defines the meter.” This sums up why grids are so important in graphic design, we should all strive to keep a layout simple and with a consistent rhythm. The viewer’s eyes are less fatigued by the information if the grid is easy to follow.
Design Decision #3 – Colors
I chose to use the same colors 4 through out the graphic, orange, blue, red a purple. They all tie each of the graphics together. I chose these colors because the infographics are intended to be eye catching and easy to follow. Like I said earlier the main audience for these graphics are web developers and teachers. I was hoping that they would print the graphics and put them on display in their office. So the graphics should be colorful. Also since I had 4 pages I needed a way to differentiate between each of the disabilities and I thought color would be a really fun way to highlight the differences.
Design Decision #4 – Fonts
I chose a Sans font for all the text. I thought that a font like roman or other serif fonts would look too bookish and not modern. Helvetica is a really useful font that most people have on their computers. According to Webdesigner depot:
Helvetica was originally called Die Neue Haas Grotesk, and was closely based on Schelter-Grotesk. It was created specifically to be neutral, to not give any impression or have any meaning in itself. This neutrality was paramount, and based on the idea that type itself should give no meaning.
The neutrality of the font of what makes this a perfect font to infographics. I was looking for something that had no meaning or gave off any impression. This is part of the reason why I use this font for most of my projects. It’s not distracting to the viewer.
Design Decision #5 – Four Pages
I chose to make 4 different infographics. This really made this project a lot harder since I had to collect data on four different disabilities. I created these graphics for the University of California. They have high expectation of quality and if I were to come with just one disability they would not accept this work. So I chose four of the most common disabilities in college students, ADHD, Autism, Dyslexia and physical disabilities. Using four pages allowed me to go into the depth that I needed to get the point across. One page would not be enough to discuss the complexity of each disability. If I were to make it one page I would have chosen to do the dyslexia graphic since it is the most important to myself because I have dyslexia.
Section 3: Formative Evaluation Response
Peer Review Question #1: What recommendations do you have for improving the layout?
Peer Reviewer A: You asked about improvement of icons and graphics. It looks to me that you are not quite finished putting icons in your circular purple bullets on the first page. I only see one icon in one of the eight bullets. The old-fashioned alarm clock that you did use to signify giving the student extra time is very effective and appropriate for that particular bullet. I think your icons in general are fantastic! I especially like the fidget spinner and the silent speaker icons in the ADHD panel. In the dyslexia panel, I love the little pigtailed twins in the genetics section.
Peer Reviewer B: I like how the elements of your infographic repeat across the four pages – enough that the four pages feel like one cohesive whole, but not to the degree that it feels like each page is just a copy-and-paste replicate.
Some thoughts for improving the layout of individual pages:
Look at the page from far away (or on your computer screen shrink it down until it’s the size of a postcard or smaller). Consider:
Where do your eyes go? Where do they start? What are they drawn to? Are there any sections your eyes instinctively skip over? (When looking at the infographic from afar, my eyes skip over any text longer than a short sentence)
Are there any key ideas that “disappear” when the infographic is so small? If so, how can you draw your viewer’s attention to that idea? For example: you could move that idea to a more prominent place, create a subsection of the page specifically for that idea, feature that idea in an illustration, and so on.
Considerations:
When I submitted the first time I had not collected all the icons. I had just finished writing the text and about half the graphic was not complete. I too Peer reviewer A’s advice by adding more fun icons and I also removed icons that were too busy. For example I originally had a classroom icon that had too many students so I just simplified it by putting an icon with just 5 students in the classroom.
I took Peer Reviewer B’s advice and shortened the text. There was just too much information on each of the pages. I had a list of like 15 recommendations and it looked too busy so I chose to limit the best practices section to just 8.
Peer Review Question #2: Where do you think I can improve in icons and graphics?
Peer Reviewer A: The parts of your draft that are more filled out seem to make good use of graphics. In particular, I like your use of icons and graphics in the ADHD page of your infographic. By giving a quick glance to the images on the “Ratio” and “Practices” sections of that page, I can easily grasp most of the key ideas you are presenting.
I think it’s okay to repeat certain icons across pages (for example, using the clock icon to demonstrate “extra time”, or the silhouette of the US to illustrate the prevalence of specific issues among the US student population.)
As you revise, you might consider where you can use a single large image to illustrate multiple key ideas, engage your viewer, and/or create a cohesive whole. Check out this infographic (Links to an external site.)Links to an external site. and this one (Links to an external site.)Links to an external site. for good examples.
Peer Review B: I realize you are changing up the color scheme for every panel in your info graphic. The panels on autism and Attention Deficit Hyperactivity Disorder make sense to me. The one on dyslexia stands out more than the others in my opinion because of the bright red banner at the top. This is also emphasized because it is the first one. I might choose a different color rather than red. Since the first ones are so colorful, the last one on physical disability seems relatively monochrome. You might want to add some color to that one to keep it consistent. You might also want to add that map of the United States with the ratio of people with in that disability category compared to the general public to that last panel as well. That last panel is the only one that doesn’t have it which makes it stand out and takes away from the overall consistency of the entire piece.
Considerations:
Like I said above when I submitted the first time the graphic was only partially completed. I did my best to keep things simple as peer reviewer one had suggested. I did not like the idea on making just one icon to represent everything under one key idea as she had suggested, “you might consider where you can use a single large image to illustrate multiple key ideas”. I just thought that to follow the grid layout was more important. The icons ended up being the best part of the infographic in my opinion.
Peer Review Question #3: What do you think of the information?
Peer Reviewer A: I do believe that there is too much information in this info graphic for the purposes of our assignment. However, I could see the entire info graphic being used successfully as a class aid.
You do need to edit the info graphic a little bit more for spelling errors. For example, you have ADHD listed as AHDH in the title banner of that page. I’m impressed that you included a source for your numbers at the bottom of the autism panel. However I missed the corresponding asterisk in the data.
Since one of your objectives is to have the learners compare the various disability categories, you might want to summarize some of the differences at the end so that the lesson is clear. I might not have thought to compare them without prompting.
All in all, I thought you went above and beyond our assignment and put a lot of energy and effort into this impressive work. I look forward to seeing the final product and would be honored to be allowed to use it myself, with your permission of course.
Peer Reviewer B: I think the information you have here is (with a few exceptions I have marked) the correct amount. The one change I would suggest is mixing up, altering, emphasizing, and otherwise presenting your information so that it isn't all communicated in big blocks of text.
As you work on your revisions, I encourage you to think about a few things:
You have a lot of text. Text is fine, except that the text here is mostly in big, dense blocks. These blocks limit how much information I can get from a quick skim of the infographic.
Consider: how can you make the key ideas (some of which I’ve highlighted) “pop” so that the viewer can immediately see the idea
You have successfully done this in a number of places, such as your use of clip art
Considerations:
I ended up cutting a lot of information at peer review one had suggested. I really did feel that she was correct that less was more. So like I said above I went from 10-15 recommendations down to just 8 for each of the infographics.
Lessons Learned:
In this process I really did learn how to organize my thoughts. This past month has been really hard I recently learned that I was getting laid off in May and my one year old son had fallen ill with a flu virus for the past 3 months. I had a lot going on and this project made me think about something else for a little while. This work is personally important to me, I will continue to work in accessibility. Throughout my time as an instructional designer I always thought about different learning styles and about students who had disabilities. I read a lot of literature on the topic and was able to focus my mind on learning about how education impacts young people with ADHD, Autism, Dyslexia and with physical disabilities.
Looking back I really learned to follow the grid, to keep things simple and to prioritize information. I am very happy with the final poduct and plan to use it at my job and take it with me as portfolio piece.
Bibliography
Reynolds, G. (2009). Presentation zen design: Simple design principles and techniques to enhance your presentations. Berkeley, CA: New Riders.
Heath, C., & Heath, D. (2008). Made to stick: Why some ideas die and others survive. New York, NY: Random House.
Shaywitz, Sally E. Overcoming dyslexia: a new and complete science-Based program for reading problems at any level. A.A. Knopf, 2006.
Kaufman, Raun Kahlil. Autism breakthrough: the groundbreaking method that has helped families all over the world. St. Martins Griffin, 2015.
Grossberg, Blythe N. Focused: ADHD & ADD parenting strategies for children with attention deficit disorder. Althea Press, 2015.
Hampton-Smith, Sam. “The Designer's Guide to Grid Theory.” Creative Bloq, Creative Bloq ART AND DESIGN INSPIRATION, 7 Nov. 2017, www.creativebloq.com/web-design/grid-theory-41411345.
“The Simplicity of Helvetica.” Webdesigner Depot, 7 Feb. 2018, www.webdesignerdepot.com/2010/01/the-simplicity-of-helvetica/.