UI Design & Copy
Taking any course can often lead to being bombarded by information, some critical and some not so critical. A key component of being successful in a class is navigating this information and aggregating the pieces that matter most. This skill is necessary not only in the classroom setting but also in an online learning space.
For some time, Nextthought has had the functionality to visually annotate the information presented to students. Highlighting, bookmarking, and favoriting information are common tools in the analogue, or physical, space that we have echoed in the digital space. Echoing is not enough. These methods of annotation only serve to visually indicate important information and do not provide a way of extracting and collection that information.
“The evaluation of any tool is measured by the degree it enhances human capability.”
Visually indicating important information is valuable, but on its own falls short by not collecting those items in one location. This made it difficult for those taking the course to study the information they were given effectively. The evaluation of any tools is measured by the degree it enhances human capability. In October of 2015, I was tasked with producing a solution to his very problem.
Meet with Key Stakeholders
I began with discussing the project with two of our Front-End Engineers Andrew Ligon and Pacifique Mahoro, as well as our Head of User Experience Aaron Eskam. Everyone involved recognized there was a short window for action between post-semester maintenance and our huge end of the year push to build authoring tools for the platform. This is often the case in an agile environment. While scaling the core functionality of the product high impact is needed with minimal development time.
Decide Location in the Scaffolding
I began by defining the problem that we were trying to solve and organizing possible relationships between a curated content feed and information architecture of our platform. The action that would add something to a notebook or activity stream could happen anywhere in the platform where those objects exist. However, there were four main possibilities where the notebook or activity stream itself could fit in: Global Navigation, Library View, User Profile Tab or Course Tab.
Global Navigation The main problem with this approach is that it would position notebooks outside of courses. This solution was not well suited for two main reasons. The first involved navigating the flow away from a particular lesson or reading inside a course, to a note in a notebook. This would be convoluted and a lot of effort. The second problem was on a theoretical level. By placing notebooks outside of courses you are essential severing their symbiotic relationship. This type of structure I think would be more suited to notebook creation and notebook management not necessarily connected to courses. In the short term this was not the intent.
Library View The library includes mixed object types such as communities, courses, and books downloaded for each class. Because of this, it was foreseeable that notebooks could also belong here. In practice, we decided it did not quite fit the interaction flow. This solution would result in popping from inside of a course to the library view, and then into a notebook. When finished, one would have to maneuver back to the course view and back and forth again. This pop-in, pop-out flow hindered the productivity of the user and ultimately required too much effort to be valuable.
Tab inside a Course In the end this is the direction we decided on. What was elegant about this solution was how it worked in practice. The lesson tab allows you to navigate to a particular lesson and open a reading, watch a video, or start a lesson and if you navigated away remember what spot you were on. This worked elegantly with notebook because you could essentially slide back and forth between content you are currently consuming with content you’ve collected throughout the course.
Tab under User Profile Placing the notebook tab under the user’s profile would be outside a course and could be at the cross section of multiple courses. If located here, this section could be thought of more as user activity than curated study material.
Modes of Sorting
The various methods people use to interact with objects across the platform were already in production, including: bookmarks, highlights, likes, discussions. The representation of the objects themselves needed a little refining. This project however, focused on the presentation of how users could interact with the stream of content. Most of our platform had keylines that supported two columns: one a wider column for main content, and a skinnier column for navigation and supplemental information. I knew we were going to use the larger column for the cards and leverage the skinnier column for a powerful panel to help users sort their collections. The following panels show functionality and interaction explorations.
“I began creating a behavior matrix in Google Sheets to document the functional results of certain combinations of the UI to make sure the system I created would not break.”
Once we settled on a layout and a set of functional requirements, I began creating a behavior matrix in Google Sheets to document the functional results of certain combinations and the UI controls to make sure the system I created would not break. I marked the areas where I foresaw potential technical challenges. For instance, at one point in time we were not consistent in capturing the date an object was bookmarked, highlighted or liked. This has ramifications if UI controls for date ranges or if sorting by date would render anything meaningful. Thankfully, after sharing it with the development team and discussing routes forward, they were confident they could support the functionality in the specification.
Fine Tuning the UI
Before handing it off and moving on, there were still some areas that needed be tightened up. I went through several rounds of explorations on these issues:
- Exploring Visual Treatment
- Refining UI Copy
- Designing with Native UI Controls
- Empty States
Visual Treatment Visually treating the panel was an interesting challenge. At first, there was a temptation to find a way to subdue it or push it back in space due to the amount of real estate it occupied in the view. So, I explored different visual directions with that in mind. The first two styles I tried, were translucent black and white. Both had an interesting effect when interacting with the blurred course image that sits underneath all of the panels of each view in a course. Next, I tried it without a container. While this last exploration was interesting, there were still concerns about color contrast on different backgrounds even with the darkening we apply to the backgrounds. In the end all of these explorations felt more visually active than just treating it with a white container. Lastly, I went through and gave more proportional whitespace throughout the filter panel.
UI Copy Choosing the right copy for the controls would make or break the success of it. We did a quick competitive audit of how sorting and filtering toggles were communicated to other audiences and explored our own afterward. Aaron, Sammy and I had internal discussions about whether the time range should be indicated with words: past, last, previous. In the end, I decided that “past” was the least ambiguous, using the current day as the point of reference. User testing showed that “recent activity” in combination with the date range was confusing. More on this later.
Native Controls Our team had been moving away from custom controls toward more native controls mostly for accessibility and also to provide controls that people were used to seeing. So, we designed a custom select button that triggered the native drop down and gave generous spacing to the checkboxes to make them more integrated in the design. From a behavior perspective, we made the whole row active as opposed to just the checkbox.
Empty States I also wanted to consider how this view looks like before users interact with anything or if they manipulate the filter panel in such a ways that the parameters yield no results. I wanted to look at how the system communicates how to add items to the notebook and how it informs the user if their searches do not match the parameters.
Having three designers do everything from promotional work to UX/UI flows meant being selective with what we poured time into. One of the more unfortunate instances of this is empty states. While we do try to craft intentional and helpful messaging, they did not really delight or inspire use.
Handing Off to Developers
Before I got our team on Zeplin we were red lining and creating behavior specifications as a documentation artifact for developers to refer to.
User Testing UI Copy
User testing the panels revealed that one of the controls was confusing people. In the “sort by” field, we were messaging “recent activity” to sort the view by the object that was interacted with last. The intention was to elevate objects which had a recent spark of activity. The problem was that people were not interpreting it as someone else interacting with their notes. They were interpreting is a recent activity they performed and when they tried to reconcile how that control related to date range they were even more confused.
Currently in QA, Set to Launch this Summer
The solution is currently in quality assurance testing and should ship to users at the start of the summer semester. The plan is to add support of this functionality to the iPad and mobile web application shortly after.
One idea that I hope can be added in the future is the idea of creating notes not attached to content with a compose view anchored to the bottom of the screen to offer a picture-in-picture experiences. This type of experience would be powerful, allowing student to navigate all over their course and keep all their content in one place.