MarkUs Blog

MarkUs Developers Blog About Their Project

Archive for the ‘Usability’ tag

Accessibility in MarkUs

with 6 comments

I have been working on making MarkUs more accessible, particularly to blind users.  To help me with this goal I installed a free open source screen reader, NVDA.  I plan on using other screen readers and technology in the future as well as working with blind users.

To begin with, the screen reader is really fun, but after navigating for sometime you start to get frustrated with the length of time that it takes to do some things, and the voice gets annoying too.  I can see why people who use screen readers all the time make the voice go so fast, you want to be able to listen to everything as fast as you could read it visually.

After working with MarkUs for a few days in this format, here are some key features for accessibility that I need to work on, and which other developers should keep in mind when working on user interfaces:

  • Everything has to be accessible using the keyboard only!  This is the only input method that we can assume everyone will be able to use.  The biggest problem with this in MarkUs is the accordion menus, they are only accessible through the mouse.  We will have to either get rid of them or make it so that they can be navigated to using the keyboard.  Another problem is dragging and dropping for reordering things, this is really convenient with the mouse and should not be removed, but we should add alternative buttons for keyboard access.
  • Focus is a problem, especially with javascript making new boxes and windows appear.  When these things appear the focus remains where it was before, and when you are using only a screen reader it seems like nothing happened.  For things like the upload file window, the box that seems to be in front of everything else on the screen is actually at the end of the document, so you have to tab through a lot of things until you see that something new has actually appeared.  If we could automatically change the focus when something like this appears, that would be a lot of help, and it would probably help everyone else too.
  • Every form input element should have a label!  We are pretty good at doing this so far, but there are places here and there where there is text that describes the form element, but is not formatted as a label.  It’s pretty easy to change this text into a label and it really helps to identify what each element does, otherwise you just hear something like “checkbox unchecked” and have to go hunt for the text that labels it.  There are some places where having a label does not make sense for sighted users (like in a table of students, we don’t want to have a label beside each checkbox) but we can make hidden labels in this case for the benefit of people who don’t see the visual association.

Overall we have already done a good job of making things accessible just by following web conventions well, and if we deal with the points I mentioned above then I think MarkUs will be doing well  accessibility-wise.  The next step is to work with someone who actually requires the use of a screen reader, and I’m sure I will learn a lot more about what we could do to make things better!

I am using the wiki page as a way to keep track of progress for myself, look there for more specific details.

Written by Evan

June 1st, 2010 at 9:57 am

Posted in Usability

Tagged with ,

Dashboard Design Prototype

with 4 comments

As many of you may know, we’ve had an empty Dashboard view for quite a while now.  So as part of my UI/UX role this term, I’ve came up with a new design for it!  Here it is:

MarkUs Dashboard Prototype

Feedback:

  • Karen: Instructors often like to know the assignment average as a fraction in addition to the percentage.
    New Format: “Assignment Average: 70/100 (70%)” — for example

Please leave questions/comments/concerns if you have any! 🙂  We love feedback!

Written by Victoria

March 24th, 2010 at 9:38 pm

Group Formation Tab: Prototypes

with 3 comments

As per last week’s UI/UX meeting, I’ve made changes to the first draft of the group formation tab wireframes:

Group Formation: Adding a student to a group

Group Formation: Removing a student from an existing group

Group Formation: Filtering -- Only show valid group formations

Group Formation: Filtering -- Only show invalid group formations

These prototypes will be used in a simple usability session where we will be getting preliminary usability feedback from a small sample of our current users.  More feedback and updates on these prototypes are to come.

These prototypes will also be discussed in tomorrow’s UI/UX meeting in our IRC channel, #markus.  Please join us if you can make it! 🙂

Written by Victoria

February 16th, 2010 at 11:06 pm