elearning
ux design, heuristic evaluation
For this university course deliverable, we were required to detect UX issues on our learning portal and do a heuristic evaluation on it. We were also asked to choose a specific issue and provide a solution for it.
I. TASK IDENTIFICATION
User: Student.
Interface: UT Dallas eLearning website.
Possible Tasks:
- Check their
- Submit an
- Complete a “Human Subjects Protection”
- Download lecture
- Submit class evaluations
II. HEURISTIC EVALUATION: CHECK GRADES
Finding 1:
Heuristic violated: Aesthetic and minimalist design
Severity: Medium
Description:
The information displayed on the eLearning homepage feels cluttered and overloaded. The most prominent dialog box, the course list, is surrounded by a lot of text and boxes.
A novice user will be overwhelmed by the amount of information displayed on the page and this will disrupt their fluency of navigation.
Recommendation:
To fulfill their primary functions of this interface, the users will have to visit their course homepage. And having the course list prominently displayed with minimal distraction will ease this process for the user. The other sections on the page, the announcements box and the Covid-19 resources box, are also of high importance but if contained in a collapsible, it will make the homepage appear aesthetically pleasing and less cluttered.
Finding 2:
Heuristic violated: Layout & Design
Severity: High
Description: The “My Grades” option is located at the bottom of the menu and it takes some effort to figure out where it is located. This is how the course homepage looks like after it opens up and the “My Grades” option could be barely seen at the bottom left corner of the screen. Having this option hidden in this way severely hinders the user’s ability to navigate to their intended page.
After scrolling down a bit, the option is then properly visible.
Recommendation:
Placing this option on the menu is such a way that the user doesn’t have to scroll down would be the first step to fix this problem. Secondly, as “checking grades” is one of the main tasks that users perform on this website, this option should be prominently placed on the menu such that, there is no additional effort whatsoever to navigate to the grades page.
Finding 3:
Heuristic violated: Offer informative feedback.
Severity: Low
Description:
Once the user has successfully navigated to the “My Grades” page, the menu on the left- hand side doesn’t indicate the user’s position in the interface. The menu should be indicative of the user’s current position, in this case, as there is no difference in the menu from the last page even after clicking on the “My Grades” option.
The menu as displayed on the course homepage:
Even in this case, the menu doesn’t indicate anything that’ll tell the user that they’re on the course homepage.
The menu on the “My Grades” page:
The menu appears exactly the same on both the pages, not indicating the step the user has taken to enter the “My Grades” page.
Recommendation:
The left-hand side menu should be indicative of the user’s location on the website. This can be achieved by making the text of the page on which the user is currently at by making it bold. Although, the user knows that they’ve successfully navigated to their intended page. Although, the user knows that they’ve successfully navigated to their intended page by looking at the text displayed on top of the page, it will help the users even further if the menu was also indicative of it.
Finding 4:
Heuristic violated: Visibility of status.
Severity: Medium
Description:
When the user hovers over the “Weighted Total” option, the additional information about the grades calculation isn’t displayed. Instead, the user is made to click on either “View Description” or “Grading Criteria” to view the information. This involves an extra step or a click which opens up a dialogue box displaying the information.
Recommendation:
It would help the user quickly receive their intended information if the information appeared by just hovering on the “Weighted Total” text. This will eliminate the extra click the user has to perform. Another possible solution would be to just add one button instead of two which includes all the grading information.
Finding 5:
Heuristic Violated: Aesthetic and Minimalist Design.
Severity: Medium
Description:
The “My Grades” page displays grades for all the exams and assignments together without there being a clear distinction between them and the weighted total. The overall grade isn’t distinct from others and all the grades appear the same. Apart from the bold text, there doesn’t seem to be anything that indicates the users their final grades.
As it can be seen in the screenshot, there isn’t a clear distinction between the overall grades and the grades for the individual assignments.
Recommendation:
A possible solution would be to just display the overall grades when the user first visits the page and then to have it expand if the user clicks on it to display the individual grades for each assignments and quizzes.
III. SKETCH/ PROTOTYPE:
My Grades Page:
Before:
Iteration 1:
The “My Grades” option on the menu now has inverted color to indicate the user’s location on the website.
Iteration 2:
When first visiting the page, the user will now first view only their overall grades. The arrow indicates that the “Weighted Total” can be further expanded to view its components.
Final Prototype:
A: The “Weighted Total” is now a main section and its sub-section being the individual items that when combined together helps evaluate the total grade. The down arrow suggests the option has been expanded to view additional information.
B: It also highlights the overall grade of the user which makes a clear distinction between the overall and individual grades.
C: This prototype ensures that the webpage is displaying the user’s location on the website by making the “My Grades” option on the menu prominent.
D: The final prototype now displays the components of the “Weighted Total” as a sub- section of it. To view the individual items, the user will have to click on “Weighted Total”.
E: The “Grading Criteria” and “View Description” options have now been merged into a single “Description” option.
IV. USABILITY TEST PROTOCOL:
This test will be performed to gain insights on a student’s grades checking process. The main motive of this test is to determine the efficiency with which the users are able to check their grades for multiple subjects and view its grading information.
User Group: Students.
Data to be collected:
- Efficiency: Time taken by the user to complete the
- Error Rate: The rate at which the users reported the correct
Reset Instructions:
- Log in to the eLearning portal with the test account. Login details:Test NetID: [email protected] Password : elearningtest@2020
- Ensure that the user is on the eLearning
Moderator Scripts:
Scenario #1:
Moderator: “It’s your spring break and you are determine how well you have done in your courses so far. For this you have to visit the eLearning portal and follow the directions below.”
Directions:
- Visit the course homepage of course
- Open the “My Grades”
- Check your overall grades at this stage of the semester.
Moderator: “After you have figured out your grades, report them to me.
Moderator instructions:
Closely observe the section from which the user reported their grades from and the time they spent on the “My Grades” page.
Did they have to hover around a bit or were they able to tell their grades almost instantly?
The task is complete when the user reports the grades, or when they are not able to figure and have given up on the task.
Scenario #2:
Moderator: “Your final exam is days away and you are to determine how well you need to do in your upcoming exam to maintain your current “A” grade in course XYZ.”
Directions:
- Visit the “Course Homepage” of Course
- View the “My Grades”
- Check your overall
- Check the description to understand the grading criteria for the upcoming final
- Determine what your score needs to be in the upcoming exam to maintain your current grade. (Note: a weighted total of >90 gets you an “A”)
Moderator instructions:
Observe the amount of time a user spends to navigate to the “My Grades” page from their starting point. Once arriving at the “My Grades” page, observe the amount of time the user spends to understand the grading criteria for the upcoming exam (the users will be displayed with “50% of final grade”). The task is done when a user reports back the score they need to maintain their grade or when the user gives up after being unable to determine the required score.
Conclusion:
Categorizing the grades section as shown in the prototype, will help users focus on only the relevant information. This will optimize the tasks users perform on this page and the users won’t be displayed with unwanted information.