MarkUs Blog

MarkUs Developers Blog About Their Project

Archive for the ‘User Interface’ Category

Annotating Images and PDF Files

without comments

As some of you probably already know, I’ve recently finished implementing the image annotation feature for MarkUs and already committed the work. MarkUs now supports the standard web image formats – jpg, gif and png. Currently I am in the process of adding the ability to annotate PDFs.

My approach to this task is to convert the PDF files to JPG format via the ImageMagick software and the RMagick gem designed for ruby and then display it in the browser. This seemed like a reasonable approach, as we already have the ability to annotate JPG’s. Currently, I successfully managed to integrate the PDFs and I am at a point where they are converted and displayed in the browser and the user is able to annotate them.

Great! So why not commit and ship these features right away you say? Right now, the main issue is the fact that PDF-JPG conversion is a very expensive operation on the order of ~2-3 seconds per page and we obviously need to accommodate for multiple-page submissions. For example, it takes a good 25 seconds to convert a 900kb 11-paged PDF file. Class sizes can easily range in the hundreds, so a 300 person class would require 7500 seconds – just over 2 hours to convert all the PDFs.

The length of the conversion is due to the need of preserving the file-content quality. On its default settings, an ImageMagick conversion gives a poor image quality, rendering standard-sized text unreadable and thus the submission is effectively useless. To combat this, I use supersampling – increasing the image resolution while decreasing the image size. This significantly lengthens the conversion process.

In light of this problem, we clearly want as little conversions happening as possible – 1 conversion per file is the best we can do. Thus I have decided to store the binary data of the images (post-conversion) in the database, for quick access. The alternative would be to store the converted file in the student repositories, but this is very undesirable for multiple reasons.

Thus we are faced with several new questions. When do we convert and how many files at a time do we convert? After speaking with Karen, we decided to kick-off a process to collect all submissions and convert them as soon as the first user logs in after an assignments submission date and grace periods have passed. I will create a queue-like object to handle this process. It will be responsible for accommodating any graders that try to mark a submission with a PDF in it before it has been converted, by bumping their job ahead of schedule. Thus waits for conversion of individual submissions may still occur, but they will happen less often. Colour coding the list of submissions may also prevent waits on the conversion process.

Written by c8braver

June 23rd, 2010 at 2:16 pm

Posted in Uncategorized

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


  • 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

Posted in Uncategorized

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

Posted in Uncategorized

MarkUs Usability and Interface Design Plan

without comments

Section A: Project-wide

Topic A1:  Upload/Download CSV file – Replace Accordion Menu with Button + Modal Dialogue

Description: To replace the current accordion menu upload/download options with upload and download buttons running along the top of the view.  Let’s call these “Action Buttons”.

Next Steps:

  • These action buttons will spawn a modal dialogue (similar to the interface we currently have for adding a new student to a group in the Groups & Graders view), where the user can specify the location of the CSV file to upload or download.
  • To avoid confusion and maintain consistency, will have to apply this migration throughout the entire project.

Rationale: Having the accordion menu on the side will greatly affect the readability of the 2-pane Assign Graders view.  Also, the accordion menu has caused confusion amongst users in the past, so switching to modal dialogues may improve the usability of MarkUs as a whole.

Topic A2:  Reorganize Action Links & Action Buttons

Note“Action Links” refer to the action items to the right of the page header located at the top of every view.

Description: Current prototype inherits action links from the existing release of MarkUs.  However, if we were to replace the accordion menu with action buttons running along the top of the view (right-to-left), these may interfere with the existing action links we already have running from the left to the right.

Next Steps: Compile a list of action links and buttons that we will have for each view.  Analyze the list and see how we can categorize, trim down, or reorganize the layout of these options.

Rationale: As mentioned in the description, the left-to-right action links may potentially interfere with the right-to-left action buttons.

Read the rest of this entry »

Written by Victoria

February 3rd, 2010 at 10:03 pm

Posted in Uncategorized

Assign Graders View — Prototypes

with 4 comments

I’ll be writing a follow-up post for these wireframes.  But for now, please feel free to take a look and leave some comments/feedback!

Read-Only Mode — which we will most likely no longer have:

Overview: UI that allows user to view existing grader-to-group assignments.

Overview: UI that allows user to view existing grader-to-group assignments.

Edit Mode — will be the new default UI when user opens up the Assign Graders tab:

Assign Groups: UI users will use to create/modify grader-to-group assignments.

Assign Groups: UI users will use to create/modify grader-to-group assignments.

Assign Groups: Example of user interaction in edit mode.

Assign Groups: Example of user interaction in edit mode.

That’s all for now! 😀

Written by Victoria

January 29th, 2010 at 5:51 pm

Posted in Uncategorized