LIBR 251 Final Project:
Navigation problems within the SJSU SLIS D2L Site
Alicia Zuniga
Spring 2014
Identifying the Problem
The problem this testing seeks to solve is the poor navigation of San Jose State
University’s (SJSU) Desire 2 Learn (D2L) class management platform. Specifically, it seeks
to find a way to more coherently organize the menu sections that right now are confusing
to a user. I can’t tell you the number of times I have accidentally clicked on “My Home,”
when I meant to click on “Course Home,” or vice-versa. This is due to the dual horizontal
menus across the top of the page. It’s also confusing because the word “home,” which is
culturally associated with the main page of a website, is used twice on the website (once in
each menu). Thus the resulting action and the conceptual map of the user are a mismatch.
What the user expects to happen (be transported to the main landing page of the website)
does not occur if the wrong link is clicked, and this leads to frustration and confusion.
Creating a Solution
To solve this problem I wanted to condense menus and edit the vertical menus to
ensure that there was only one of each. I also wanted users to be able to access a specific
class page from the class page they are already on. Currently that option does not exist on
the SLIS D2L site; a user has to click on “My Home” to be taken back to a page with a link to
another class on it. Although seemingly small, this extra click is very annoying. Compound
this by the fact that I mistakenly click the wrong “Home” option each time, and it creates at
least two extra clicks.
User Selection
My user selection process was not out of convenience this time around. I wanted to
use testers that were familiar with an online classroom environment, since most students
that use D2L are technically savvy enough to understand it. User 1 had completed her
Bachelors in nursing degree through a nearly all-online program within the last 5 years.
She is a 55-year-old female who is familiar with using a class management platform like
Blackboard and/or Collaborate, and had used them in past classes. User 2 was a 26-yearold female who had taken a few online courses for her Masters in Education degree within
the past 3 years. She is a current high school English teacher who uses similar class
management tools for her students’ grades. Both use the Internet on a daily basis.
Prototype 1
The first prototype that I drafted eliminated one of the horizontal menus
completely. Instead of having separate menus for main site actions and class actions, I used
a Fat Menu pattern to create a drop down menu for the Classes option, which lists all
classes you are enrolled in (and also an option for past courses in case you want to access
those). Once you click on a class page, a vertical menu along the left-hand side appears and
has the subsections of each course listed. These menu items vary from class to class, with
the course number labeled at the top of the menu. This horizontal/vertical separation gives
users the impression that they serve different functions: the horizontal menu controls the
general site navigation, while the vertical menu controls navigation within a specific course
page.
What a user sees when the first login
with Prototype 1. Note the addition of
“My Courses”
A user sees a drop down menu when he
or she hovers over “My Courses”
What a user sees when they navigate to
the LIBR 251 course page. Note the
addition of the vertical menu and its
options taken from the previously
horizontal menu
What the user sees when he or she clicks on “Course
Documents” from the vertical menu
Task Selection
The tasks I asked users to perform were in the following order:

Navigate to the page for your LIBR 294 course

From the LIBR 294 course, go to the LIBR 251 page

Find the instructions for Homework 1A for LIBR 251

Return to the first page you were at when we started this assignment
Users were instructed to tap to where they would click, sometimes having them specify
where since the text was on the smaller side. Users were encouraged to think out loud. I
wanted to test the users’ ability to navigate back to the homepage (not just the class page),
and also navigate to another class page from a different class page. To further test this, I
needed users to navigate to a page nested within one of the subsections of the class page
(Homework 1A) since I wanted them to be able to understand the site from several
different page levels.
Testing Prototype 1
User 1 navigated to the LIBR 294 page easily, but used the link on the homepage
instead of from the dropdown menu. She did use the drop down menu when navigating to
the LIBR 251 page, though. The main problem I observed was that there was just too much
information crammed onto the page once she navigated to the Course Documents page. As
you can see from the figure, it would have taken several more post-its to cover all of the
links in the Course Documents section, causing the user to have scroll for a very long time
and through. User 1’s reaction of “WHOA” as soon as I added the lengthy post-its was a
good indication of her being overwhelmed by the volume of content visible. She
successfully found the instructions for the assignment. D2L currently has some pages with
vertical accordion-style menus, but the page’s default action is displaying all of the
accordion tabs “open,” so that all possible options are visible. The result was that it was an
information overload and caused a long search (and scroll) for the intended target.
Prototype 2
The solution I developed for this problem was to use an accordion pattern (Tidwell,
p. 159) for the vertical menu that condensed each section that was not being used. When
clicked it would open up to the subsections. When the second-to-last subsection of a given
section was clicked, it would open with the last set of options on the main space.
What a user sees from the LIBR 251
course page after clicking on Course
Documents, and if he or she moves the
cursor to My Courses. The drop-down
menu to jump to another course page is
still accessible.
What a user sees when he or she clicks on
“Homework 1” from the accordion menu
Testing Prototype 2
I realized after testing the second prototype that maybe having all options “open” in
the accordion style wasn’t such a bad move by D2L after all. User 2 used the drop-down
menu to find both the LIBR 294 and LIBR 251 pages. This added feature seems to be
successful across users. User 2 initially clicked on Syllabus to find the Homework 1A
instructions, but chose Course Documents second. However, User 2 was baffled as to where
to click given the “closed accordion” options of “Orientation,” “Course Reserves,”
“Evaluation Seminar,” “Design Seminar,” “Implementation Seminar,” “Presentations” and
“Final Project”. The three seminar sections were particularly confusing to her. She ended
up choosing the orientation section because she reasoned out loud, “homework 1 would
probably be in the first section listed.” I realized that even if I, a student enrolled in the
course, had looked at this for the first time I probably wouldn’t know where to look for
given just the main headings.
Prototype 3
There still exists that pesky problem of scrolling all the way through a page, though.
To fix this, I used a Fat Menu pattern for the vertical menu. Tidwell says to use this when a
page “has many pages in many categories, possibly in a hierarchy with three or more
levels” (p. 106). This is exactly the kind of display we are dealing with on the Course
Documents page. This pattern allows a user to see all of the options available, including
those within a subset of the Course Documents section. The way this differs from the
original prototype and the current way D2L displays Course Documents is that all sections
are visible on the screen without having to scroll. This way a user can see all potential
categories and options at once. Even if they saw a potential option in prototype 1, they
would still need to scroll to see if there was a better option available before making a
decision. This makes the cognitive load of deciding where to click more manageable. These
menus are fleeting, and only exist when the mouse hovers over a specific link, so it’s more
efficient than clicking through many different links and waiting for the page to load to find
what you are looking for.
What a user sees when they move the
cursor over Course Downloads
Summary
This process was interesting because I sought to solve the problem of navigating
from one class page to another and eliminating the redundant “home” options, but in the
process I discovered a new D2L design flaw that I sought to solve: the display of lengthy
information in the Course Documents section (this problem is apparent in other sections of
other classes I have had as well). The first two problems were solved easily with my initial
prototype, but the Course Documents section problem I identified took a bit more work and
creativity. This shows how important the iterative nature of design is. You may catch
something that is problematic within your design drafts that you didn’t even think of
before, and you don’t have the option of just ignoring it because this would be in poor
designer taste. Prototype 3, the final iteration, presents a sleek solution to a cluttered
problem.
References
Tidwell, J. (2011). Designing Interfaces. Sebastopol, CA: O’Reilly Media, Inc.