Infographics

We’ve mentioned infographics before and we share them with you quite frequently, but we haven’t yet devoted a separate post to the process by which one can make an infographic. As the revelry of fall fades away, Thanksgiving seems ever-distant, and the reading keeps coming, why not mix things up with an infographic?

Infographics are visual representations of data built around a theme. In telling their story, infographics usually have a mix of several small pictographs, a fair amount of data presented in chart/graph form, and a few short paragraphs and key sentences.

Consider my favorite (meta-) example:

Edudemic has a nice summary of the background and educational theory of infographics in their Ultimate Guide to Infographics. They’ve also gathered an informative assortment of education infographics. While the story each infographic tells is interesting, the ways in which the creators have used color, data, images, fonts, and manipulated the size of different design elements provide great examples for those of us thinking about making our own infographics.

You can use the resources below to create one (or multiple) infographics to start discussion with your students. What a great way to illustrate different perspectives, time frames, or sub-topics in a quick and engaging format.

Alternately, it seems to me that creating infographics could be an intriguing exercise for students. Derek Bruff, Director of the Vanderbilt University Center for Teaching, has a nice two-part blog post in which he lays out the logic behind an infographic assignment he gave his statistics students in the spring, the ways in which he prepared his students to look critically at visual presentations of data / information, how he created and refined the grading rubric, what tools his students used, and the terrific infographics they produced (post one and post two).

Without further ado, the infographic tools:

Infogr.am lets you easily create your own infographics. Using their simple interface and templates, you can upload your own data (in Excel or csv format), add video if you’d like, and then share your product on Twitter, Facebook, Pinterest, the web, or grab the embed code provided underneath your finished infographic and put your design anywhere you’d like. If, for example, you’d like to place your infographic in your Pearson LearningStudio course shell, you can do so by pasting the embed code into the HTML view in the visual editor, as our documentation illustrates.

Visual.ly is another infographic generator. Although it may not be as user-friendly as other options, visual.ly is specifically designed to help create comparison-based infographics. You can use their provided templates and then enter a pair of Twitter or Facebook accounts, hashtags, or webpages about which you’d like visual.ly to produce attractive statistics. I think the comparison feature is a nice angle, and certainly a real aid in framing a data-driven visual story.

For a bit of navel-gazing, or perhaps as part of a larger project about society or self, Intel’s What About Me? infographic engine offers to create an infographic based on your Twitter, YouTube, or Facebook profiles (or a combination of all three).

If the options above aren’t quite meeting your needs, you might take a peek at this list of 20 Web 2.0 Tools for Creating Infographics. If you’re still searching – either for theory, examples, data sources, or infographic tools / tutorials – Daily Tekk has a list of 100 Incredible Infographic Tools (these are broken into separate topics, thankfully!)

Last, if you’re using infographics in your course or considering doing so, we’d love to hear from you!

Mapping Tools

Where in the world are we? A handful of great digital mapping resources have come to my attention lately. In addition to geography courses, these websites would fit nicely in history, sociology, anthropology, archaeology, foreign language, and even literature courses; maps are also a wonderful addition to digital storytelling projects.

First, a few specific resources:

If the ancient world is your thing, ORBIS: The Stanford Geospatial Network Model of the Roman World would be a wonderful classroom addition. Like a travel site for ancient world, users can select their departure point and destination, the time of year travel is to take place, their method of travel, and their goal (speed or cost savings). The site then maps a route. No better way to bring home how ideas, people, and commerce might – and might not – spread. (Thanks to Chris Clark at Notre Dame’s Kaneb Center for tipping me off to this resource.)

There are two great interactive projects related to slavery in the United States. First, National Geographic has a great digital branching story about the Underground Railroad. In this simulation, users make choices and receive feedback as they attempt to journey from Maryland to Canada. Though plenty of historical images and rich descriptions accompany each step, there are no useable map images.

The above site, however, would pair nicely with Visualizing Emancipation, a project from the Digital Scholarship Lab at the University of Richmond (funded in part by a grant from the National Endowment for the Humanities). Visualizing Emancipation specifically focuses on the emancipation of slaves during the Civil War; data was gathered from a detailed study of primary documents including runaway slave notices, articles about returned slaves, troop locations, seasonal patterns, and instances of African-Americans helping the Union. For another review, you can consult the article in Chronicle of Higher Education about the project.

And now some more general digital mapping resources:

The United Nations Cartographic Section has a great list of regional political maps (all in an easy to use and re-use PDF format), maps about current peacekeeping and peacebuilding missions, and a small selection of institutional, historical, and regional maps. If you’d like a map of the Okavango River basin, they’ve got it. For more extensive geopolitical maps and facts,the CIA World Factbook is a great resource; this site even supports country-to-country comparisons, audio files of national anthems, and includes detailed information about each country.

I’d be remiss not to direct to you one of the finest digital map archives online, the Perry-Castañeda Library Map Collection at the University of Texas. Like the UN site, they have maps related to current events, but their collection also includes general interest maps, historical maps, and fully digitized versions of several historical atlases.

For a more interactive map experience, check out the University of Oregon’s Mapping History Project. Broken down by region and time period, these maps allow you to move a slider along the bottom of the map to illustrate the chronological progression of political, social, economic, and intellectual events. Sadly, they seem to be missing a section on Asia.

Last, to round out this survey of mapping resources, here’s a great little animation reviewing how astronomers learned to measure celestial distances.

If you’ve got a great digital map resource, please share it with us in the comments section.

Accessibility, Equal Access, and the ADA (part three)

How do you know how accessible your content is? Here is a 6-step process that will give you a decent sense of things, courtesy of the good folks at the MIT Assistive Technology Information Center:

  1. Turn off images in your browser (make sure image place holders are turned on)
  2. Turn off support for JavaScript
  3. Try to navigate without a mouse, using only your tab key
  4. Try to change the standard font colors and styles in your browser
  5. Try to increase the font size by using the browser (view > text size > increase)
  6. Turn off support for stylesheets

If you’ve done the above steps and your site still makes sense, then you are on the right path. If you’d like a more extensive checklist, complete with examples, the WebAIM initiaive has one.

Here’s a long list of accessibility evaluation tools. Note that if you are going to be checking multiple web pages, a toolbar plugin is the preferred method. A toolbar plugin will allow you to check password-protected pages and pages with dynamically generated content. Here’s a good website evaluation tool – note that there’s also the option to download a Firefox toolbar and a beta version of a Dreamweaver extension. As you evaluate your content, you may find it helpful to consider the standards for federal websites, which serve as a decent baseline for the rest of us.

What does success look like? Here are two websites that have won awards for their accessibility to people with disabilities: The Rose Project and Bay Area Rapid Transit.

Last, for those individuals wishing to dig deeper, here’s a nice look at current case law and higher education institutions – everything  from service dogs to computerized tests to diagnosing disabilities. The links on the left-hand side of the page also provides a great overview of the ADA as it applies to universities.

(This is part of a series of posts on this topic. The first post offered an introductory look at disabilities in the higher education context; the second post covered accessible design principles.)

Accessibility, Equal Access, and the ADA (part two)

The 2010 revisions of the ADA included a mandate to make websites accessible. If you are using a learning management system (like LearningStudio), it’s tempting to think that the course shell is handling all the accessibility concerns. However, if you’ve uploaded images, video / audio, or directed students to external websites, you may still need to take some additional steps.

Here is a list of best practices. Some of these are more applicable for stand-alone websites, but all are worth reading. The information below is drawn from accessibility information provided by MIT, UC Berkeley, Purdue, and Oregon State.

1.  Label all images. Use the ALT field or fill in the image description as needed. It’s better to leave the ALT tag blank than to enter text that merely repeats the image caption, since a screen reader will read both fields.

2.  Caption all video and audio. If this is not possible, provide a script or a summary.

3.  Create structure. Using headings to add structure to a page is one of the simplest ways to greatly increase the accessibility of your pages for a screen reader user.

4.  Label links properly. Without unique labels, users of screen readers can have trouble distinguishing one link from another. Consider adding a link to skip over navigation menus or lengthy lists of links. Likewise, avoid the use of “click here” and connect the link to something descriptive in the related phrase.  (Guilty as charged! We’ll be changing that ASAP on this blog!)

5.  Improve navigation. Requiring extra clicks or forcing a return to the homepage is clumsy for sighted students; it’s worse for those using adaptive technologies.

6.  Keyboard-friendly shortcuts. You can let users know which keyboard shortcuts they can use by creating a page for your accessibility statement that lists each of these shortcuts and how to use them on a mac or PC. The link to this accessibility page should appear at least on the homepage, but ideally on all pages( i.e. within the global navigation or footer links).

7.  Choose colors and contrast wisely. Use symbols and graphics that will work in a monochromatic environment. To test a page for effective contrast, you can print it on a black and white printer with the background color included. Color vision deficiencies may impact red and green (rendering them invisible) as well as yellow (beige, yellow and orange can be confused with red and green). Never rely on color alone to communicate importance,  sarcasm, or other key meanings – clearly articulate these using text. This is a great contrast checker.

8.  Allow for font resizing. Stylesheets created with pixel measurements (px) cannot be easily resized in some versions of Internet Explorer. To allow for resizing, size your stylesheets using another measurement such as em, pt, or relative sizes. A body font of 95% or 12 points is recomended (this is similar to 12 pixels in size, but percents and ems are resizeable on Internet Explorer).

9.  Avoid tables when you can. Label them correctly when you must use them. Use basic header information for data tables; use elements and summary attributes whenever possible. For visual layout design, the preference is to employ stylesheets and div tags, not tables.

10.  Be careful with PDF files. If possible, offer alternatives accessible through other programs (Word, etc.); offering the information in HTML is ideal. More extensive information on PDFs and accessibility is provided on this page. From the Purdue University web accessibility committee, here are some tips about creating accessible PDF files using Word.

11.  Use Flash and interactive content wisely. Alternate versions of all interactive content and Flash pieces should be provided, if possible. If an alternate version cannot be provided, offer a summary and description.

These are actually universal design principles that will improve everyone’s experience in the online environment: your students with disabilities will benefit, but so will the rest of the class—and you may notice a difference, too, when you need to quickly locate a key piece of information and can move smoothly and quickly through your own content!

(This is part of a series of posts on this topic. The first post offered an introductory look at disabilities in the higher education context; future posts will cover assessing the accessibility of your content, and additional access resources.)

Accessibility, Equal Access, and the ADA (part one)

Just to get us started, check out these simulations that let you experience the web as a person with a visual disability would: blindness and colorblindness.

If a simulation isn’t your thing, you can check out the Web Accessibility Initiative’s draft paper on How People with Disabilities Use the Web.

Or you can read this wrap-up on how instructors should respond when a student has a speech impairment.

You can also take a quick glance at an article reviewing the accessibility of different college and university websites:

And here’s a table ranking schools on their ease of accessibility to blind students.

Wow, huh?

So, all of this invites the following question: How do you make sure your online resources / your online course meets the needs of all your students?

One of the most common questions we get regards how to give a student extra time on an online exam. For LearningStudio users, we’ve posted a little tutorial.

But going beyond exams, what should one do? For whom? And how?

According to the MIT Assistive Technology Center, here are some different groups of individuals whose needs merit consideration:

1.  Visual disabilities: Difficulty accessing unlabeled graphics, icons, buttons, multimedia. Info may be lost in poorly marked up tables, forms and frames. May use keyboard navigation rather than a mouse. Use screen enlargement, screen readers or Braille displays. Problems with font sizes, color contrast or other display problems.

2.  Hearing disabilities: Need captioning for audio and video.

3.  Physical disabilities: May need to substitute mouse use with keyboard, voice input, or other input methods.

4.  Cognitive disabilities: Need consistent navigation structure. Overly complex presentation can be a problem. Flickering or strobing designs can be a problem.

As an aside, if the moment presents itself, you can direct your students to We Connect Now, an organization founded in 2008 focused higher education and employment access for college students with disabilities.

(This is part of a series of posts on this topic. Future posts will cover design tips, assessing the accessibility of your content, and additional access resources.)