Design Focus: Student Progress Bar and In-Page Navigation in MixLink
When I first built MixLink, one of my goals was to develop a student-friendly interface for the interactive lessons that teachers create.
In this post, I am showing some early work around creating an assignment page that’s easy for students to progress through, because they can get confused when they’re required to switch tabs and navigate away from a lesson. I am looking for feedback around the usefulness of the side panel navigation and due date countdown timer.
When setting out to create the assignment page, some of my initial assumptions were:
- Students need a clean and simplified UI, with a primary focus on the lesson content.
- A lesson should be on a single page, so students never have to navigate around using back buttons or other links.
- A single-page lesson will need to have a way to navigate between the various sections of content.
- A persistent progress indicator will be an important way to provide students with feedback during the lesson.
These four points guided my initial mockup, which in turn became the beta edition of MixLink: the project went from sketch to beta in just over a month, so I had to settle for a few things I wasn’t happy with in exchange for getting the app in front of students by the end of the 2015–16 school year.
Putting The First Version into Production
To try and meet my first goal of making the UI as simple as possible, I placed the “Begin Assignment” button prominently in the center of the header, believing this would be a clear call to action for students. I also kept a lot of color out of the UI to really make the button pop, but included a header image because I think it’s highly engaging:
In order to create a single-page that was easy to navigate, I stuck a navigation menu to the left side of the screen. Because I believed a progress indicator should be persistent on the screen, I created a progress bar that slid up from the bottom of the window and spanned the entire width of the screen once students began the assignment:
The sticky navigation bar proved to be a problem for longer lessons with many sections because it stretched beyond the screen. As a temporary fix, I made the panel collapsible, but that still didn’t solve the issue when it came to having more than 15 or so sections. Plus, I didn’t think the menu would be useful if a user had to collapse it to make it fit on the screen anyway:
I also wasn’t satisfied with how a link appeared in the sticky menu when it went beyond one line. As I created sample lessons, I found myself working really hard just to keep the titles for each section as minimal as possible. I didn’t think my users would be that deliberate in trying to keep titles under 50 or so characters. I resolved to come back to the navigation after some initial testing.
Believing I had met many of my design goals in the first round and anxious to test the site before the end of the school year, it was time to put MixLink to the test in a classroom for the very first time.
Real-World Testing with Students
My wife was excited to assign her first MixLink lesson — it was, after all, the reason we started the project. Her class was in the middle of a unit on inventors, and so she created a lesson and assigned it to her class.
With a single text message, a new edTech project came to life.
Students were excited to start working on the lesson using their Chromebooks, and had no problem visiting the shortened link generated MixLink generated using the bit.ly API.
Things got off to mostly-smooth start, but a few students had difficulty finding how to begin the lesson. They were confused by a sign-in button on the top right of the screen, as well as other links in the header. Once they were instructed to click the blue button at the center, they were working away:
As students viewed the videos embedded in the lesson and responded on the same screen, they loved not having to switch tabs. Another benefit was being able to pause the video and type right below it — further validation of my hypothesis that a single-page lesson format was important.
The students didn’t find the sticky navigation particularly helpful, either — they weren’t using it, and it wasn’t a helpful indicator of anything related to the lesson, probably because it was washed out without color and not really serving any specific function (aside from keeping an eye on where the students were on the page).
Where I might have missed the mark on the “Begin Assignment” button and the side menu, the progress indicator was a hit — students loved advancing through the assignment.
Now that I had some authentic feedback from a classroom, it was time to re-visit my assumptions about the layout, start button, and in-page navigation.
Switching to a Full-Width Layout and Other Enhancements
In pursuit of my initial design goals, I decided to make a significant change to the way the page was structured. The sticky navigation menu became a fixed column on the left side of the page, with a scrollbar that could accomodate a longer list of sections. Also, the wider layout was better for accommodating longer titles, and going on to two lines wasn’t as large of a concern.
I also moved the “Begin Assignment” button to a spot on the left, as people naturally read from left to right. I removed links from the top menu bar, as well as any other possible distractions, hoping to direct students to a singular action.
When students click this button, the app initiates a sign-in modal, which lets them authenticate using Google apps or an email address without leaving the lesson page:
Another significant enhancement was the addition of progress markers in the actual menu itself: as each section is completed, the progress marker is filled in green and a checkmark indicates that the questions have been answered.
A closer look at the new side panel also reveals a new location for the progress bar, which is close to a“Begin Assignment” button that turns into a “Submit to Teacher” button and is activated when all of the questions have been completed.
I grouped these components visually, because they logically fit together — starting, progressing through, and finally submitting an assignment are all a part of students’ linear progress.
One other noticeable change is the removal of the teacher’s profile in exchange for a countdown/due date counter. It’s hard to tell when there isn’t much time between the date a lesson was assigned and when it’s due, but the countdown is a pie chart. The accompanying text starts blue, is yellow within 3 days of the due date, and turns red when the assignment is due within one day.
When all parts of the lesson are completed and the lesson is submitted, I display the following button/message in case students return to the assignment page later:
Current Design and Further Considerations
Here’s a short demo of how the progress marker advances as students answer questions in an example lesson:
Here’s the full lesson on MixLink:
What’s Next for Lessons and Assignments
Now that school is about to resume, I’m excited to see how teachers are using MixLink in the coming year. I’m especially looking forward to getting feedback from the classroom on some of the changes I was able to make over the summer. Going forward, here are some of the things I’m thinking about with respect to assignment pages:
- How can I improve the countdown timer to show a more accurate representation of how much time is remaining on the assignment? How do I make this a more useful component of the page?
- Does it make sense to incorporate a “next” screen and paginate multi-part lesson? Or should all lessons/assignments be kept on one page?
- Does the “submitted” state of the page matter? Should I allow students to un-submit and revise their answers, perhaps even if a teacher enables this feature?
If you have a chance to check out MixLink, I’d love to hear your thoughts — especially if you’re a designer or a teacher! I’ll be sharing more updates in the coming months as the site continues to evolve based on critical feedback and user suggestions.
Related reading:
This post is a deeper dive into one of MixLink’s newer features, submitted in consideration for Facebook Design’s #Facebookdesigncrit. You can read a higher-level update on what’s new in MixLink in our August Product Update.
