Usability in LMS Pages

Inspired by this post from the UT Web Developers outlining a usability checklist developed by Abhilash Thekkel, I thought that there should be a similar thing for LMS pages as well. Of course, some of the usability issues you need to do for a webpage aren’t necessary for a page managed in an LMS.  For instance, #28 Did you include a link to all your main pages on your homepage? doesn’t require any checking because navigation in the LMS is limited and usually controlled by the system and a link to the course home page is usually included. So here’s a list of items to look for when developing a usable course in an LMS.

Technical:

  1. Did you validate your (X)HTML using W3C Markup Validation Service?
  2. Did you validate your CSS using W3C CSS Validation Service?
  3. Did you check your website in at least IE, FF, Opera and Safari?

Images:

  1. Did you add the ALT attributes to all your images that are non-decorative?
  2. Did you make the size of your pages less then 50KB?
  3. Did you choose the appropriate filetype for your images?
  4. Did you add a description to images that support your content?
  5. Did you use plain text instead of images for important content?

Content:

  1. Did you use a sans-serif typeface with at least a 10 point font size for your body text?
  2. Did you adjusted the leading and tracking, if necessary, to increase readability?
  3. Did you align your body text to the left? (depends on language)
  4. Did you make sure that whole sentences  are not entirely in uppercase?
  5. Did you use less then 78 characters, including spaces, per line?
  6. Did you make brief and precise paragraphs with explanatory titles?
  7. Did you use lists to sum things up?
  8. Did you create enough contrast between the text and the background?
  9. Did you make your website also accessible for text-only browsers?
  10. Did you make sure that there are no ‘under construction’ pages, or links to content that do not work?
  11. Did you replace all special characters with the ISO Latin-1 codes?
  12. Did you spell check your content and did you proofread for grammar errors?
  13. Did you make a high contrast version of crucial information?

Navigation:

  1. Did you use no more then 8 items in your main navigation?
  2. Did you use describe the  link text instead of ‘click here’?
  3. Did you use self explanatory link text instead of business or jargon terms?
  4. Did you make a distinction between links and plain text?
  5. Did you make it possible to browse your website using SHIFT-TAB and RETURN?
  6. Did you make sure you didn’t use any javascript links?

Structure:

  1. Did you make a consistent page structure from page to page and tool to tool?
  2. Did you place important content above the fold/scroll?
  3. Did you make your page design on a grid system?
  4. Did you make your website also viewable on low resolutions?

Multimedia:

  1. Did you make sure that music and videoclips don’t start playing automatically?
  2. Did you make sure that music and videoclips can be turned off at any time?
  3. Did you inform the user about the size and length of your music and videoclips?
  4. Did you select or use  music and videoclips with subtitles or descriptions?

Many of the items in the original article are still useful, but they are at the whim of the administrators of the LMS or the LMS vendor itself. If your LMS is not respecting usability guidelines, maybe you shouldn’t be using it. If you are stuck using it, maybe you should advocate through whatever channels you think appropriate, that they adapt to allow learning for everyone.

What I Learned This Week (Part 4)

I’ve been working on adapting a AODA module for Desire2Learn, changing some minor things, tweaking the navigation and other minor bits. It’s intended to illuminate some of the issues people with disabilities face in daily life at an educational institution. It’s well designed (educationally speaking) but some of the sites I’ve been to in looking at accessibility have been, well, aesthetically challenged. As we all know, content is king, but I have to say, the way things are presented on some of these sites could use some sprucing up to bring it in line with modern web design that is accessible. Certainly CSS could be leveraged to provide different looks depending on what browser/screen reader was being used?

Along a similar line, this article sheds some light on the issue of teacher’s blowing out their voices – one of their main tools in the classroom. Certainly we have seen repetitive stress injuries for athletes and office workers – are we just maybe working too hard? E-learning can assist with this, of course, by recording things that might be said four or five times a week – streamlining teachers to actually get in the trenches and actually work with students to assist in their learning. The end of the article had an interesting thought, “you can’t teach French without speaking.” I think you certainly can – using a blend of native speakers on YouTube or a more community based site like Language Exchange.

Finally, from Reuters, technology doesn’t isolate people. The study doesn’t really reveal much, other than people who are active socially offline are also active in publishing and creating content online. I’ve always believed that technology doesn’t change who we are, but it does change who we communicate with. In many ways, this study and article backs that idea up.

Aesthetics as Part of Usability

So the recent past has me thinking about the aesthetics of e-learning spaces, and while that may seem like a non-issue for many people, I believe it will be incredibly important as educators move forward. We rely on aesthetics to assist us in a quick reliability check. We all do this in real life when we meet a person, as they say first impressions are important. Well, this is no different in e-learning or in a face to face class.

Certainly Blackboard, Desire2Learn, Moodle and other modern LMS’s allow a creator to exert some control over how content looks. You are somewhat functionally trapped into a frame where content is held with some of these systems, but in many cases those are constraints that you can work with (against?). As an educator you might also have other issues restricting the look of your content; headers are a certain color, color schemes might be imposed by your institution, usability experts tell you what icon to use for a link or even font size might be restricted.

As an educator you have a dual purpose as well, you need to make your content accessible as well. So that means you should consider things like contrast of color, whether your font size is large enough for the visually impaired and whether your images have alt tags to ensure a screen reader can convey the description properly to a user. In fact, your institution might be under law to make your content accessible.

Frames in and of themselves pose problems for stringent accessibility rules, so your LMS might already be screwing you. It’s quite possible it’s screwing you anyways… never mind that ugly thought…

It’s not particularly difficult to make a website accessible. It can be tricky to make it aesthetically pleasing and usable. Seeing as I’ve brought up visually impaired users, I would be very very remiss to not mention this other blog article about 10 Tools for Evaluating Web Site Accessibility especially for color blind users. While these are for websites, you can use most of these tools within LMS’s as well. The Firefox extention (#1 in the linked article) is excellent, and has identified a couple areas that I need to be aware of in my own work. Of course, this doesn’t really speak about aesthetics. Well not explicitly anyways.

Aesthetics are pleasing the eye – which can be difficult to hit the centre of the target everytime as we all view things differently. I often get asked, how can I make something look good? Practice is my default answer, but when pressed I will concede that you can’t go wrong with the classic black, white and grey. Add an accent color of (one of) red, blue or green and your e-learning space will look professional. If you have a predetermined header, or logo, grab one of the colors as an accent from that. Simplicity is key. It’s when people start to get fancy that sometimes people run into trouble.