Mark Garcia

Enhancing the UI/UX of Document Feedback and Viewing with JS & CSS

Blog Post created by Mark Garcia on Jun 9, 2017

The Challenge

Some of the students at our institution completely overlook the View Feedback link that appears when they are viewing a previously submitted assignment upload. Many simply click on the download link for the file, and are somewhat surprised when they don't see any comments/markup on the document. The issue stems partially from the inline placement of the two elements, as shown in the image below.

 

Many students think that the View Feedback link is an extension of or an additional comment to the Document Download link that precedes it.

 

Current Submission Page

 

Additionally, should the student actually click on the View Feedback link, he or she then renders the document in question, with its markup in a container that is a fraction of the browser window size. The student does have the option to close the course section menu to provide additional real estate, and the document view can be resized, but its a lot of additional steps that the student has to go through to get the document rendered in an orientation that is more suitable to him or her.

 

Solution

I wanted to provide the student with a cleaner User Interface and User Experience. As such, I wrote custom javascript and css, and developed a couple of icons to achieve the following:

  1. Differentiate between the Document Download button and the View Feedback button.
  2. Once the student has clicked the View Feedback button, there is a button in the window that appears that allows the student to take the document view container to fullscreen (minus the global nav bar) and back.

 

New Button Styles for download and feedback

 

This solution utilizes custom CSS and javascript/jQuery. It is also worth mentioning that I have focused solely on assignment submissions, and have not gotten the opportunity to test this solution across the entire LMS. Additionally, I did not have the opportunity to test this solution with TurnItIn, which generates a link between the document download button and the view feedback button. In the future, I will issue an update if I am able to see what kind of content is generated when the student turns an assignment in to TurnItIn.

 

Doc View Full Screen Mode

 

Demo

 

Repository

If you are interested in applying this to your environment, please feel free to fork or download from my Bitbucket repository, which can be found here.

Outcomes