Skip to end of metadata
Go to start of metadata

Sakai Interface Renovation

On Friday, January 21, SI 791 began discussing ideas for improving Sakai’s interface, specifically University of Michigan’s implementation CTools . The scope of the intended project was initially limited to the left and top navigation bars.

Members of SI 791 include SI faculty, graduate students, undergraduate students, and several CTools developers.

I had trouble viewing the images on this page, which I traced to needing to be logged in to Google Docs. Once I had an active Google Docs cookie, the images appeared. 

Update: We have an initial implementation to play with Portal (Neo) Prototype

Top navigation

Tab preferences

A few people in the room had an issues with the drop down list of courses on the right side of the top navigation.

Others in the room expressed that the drop down is not an issue if you manage the number of courses displayed on your navigation. More than one student in the room was not aware that users can control which tabs are displayed.

Suggestion 1

Add an “edit” link in the top navigation that takes students directly to the the Preferences tool.

The group also discussed the frequency of updating tab preferences, and concluded that these changes are made very few times, usually only once or twice per semester. Tab changes included removing courses from previous semesters and reordering remaining tabs. The group felt that this behavior is common among students aware of the ability to change tab preferences.

Suggestion 2

Automatically hide the tabs of completed courses.

This would likely reduce the frequency of tab preference updates.

Suggestion 3

For each tab, add a drop down menu with links to Assignments, Resources and Announcements.

Based on the discussion, students usually know where they want to go within CTools, however students are required to navigate through course home pages to get to popular tools. This feature will reduce the time for students to reach their destinations, as well as the number of page loads.

The group discussed common issues associated with “onHover” navigation drop downs. The requirement of fine motor control to maintain a hover can result in accessibility issues. Mobile touch screens will not trigger the hover effect. One suggestion was to add an arrow icon on each tab. When the arrow icon is clicked, a drop down menu is revealed, and hidden when clicked again.

My Workspace

While discussing the value of top navigation real estate, the students in the group agreed that “My Workspace” is a waste of tab space.

The students see the “My Workspace” page after they login, and quickly navigate away. It is extremely rare for students to read the “From the CTools Team” announcements. Based on our discussion the only time students really utilize the “My Workspace” page is to update preferences, once or twice a semester.


Early on in the discussion several students discussed features they would like to have, but do not exist. All of the students asked the same question, “Why can’t I see the assignments from all of my courses in one list on the ‘My Workspace’ page?” Students also mentioned it would be useful to see the announcements for every course in single list.

After discussing the most regularly checked content, the students in the group agreed that time sensitive assignments, events, tests and quizzes should be grouped in a single list.

In the mock-up above  the “Calendar” block represents the list of time sensitive events. Each row consists of the due date, the course name, a title, a star and a check box. The course will link to the course page. The title will link to the assignment page. The star allows students to pin Calendar entries to the top of the list. The check box allows students to remove items from the list.

The “Notifications” block will be below the “Calendar” block, and work in a similar manner. Notifications consist are equivalent to Announcements.

It is not shown in the mock-up but the group discussed adding a show more link at the bottom of each block, which would load the next ten entries. Within the block students will have the ability to sort the shown assignments or notifications by each available  field.


Appendix A

Group “Sakai” Sketch


Appendix B

Group “Students” Sketch


Appendix C

Created by Caitlin Holman

Appendix D

Created by Caitlin Holman


Appendix E

Created by Caitlin Holman

Appendix F

Created by Caitlin Holman

  • No labels


  1. So if I understand correctly, you're proposing replacing the current My Workspace with a My Dashboard that contains some of the current My Workspace functionality, and adds new components (like an aggregated Assignment view). Do you think that will encourage more use of the features

    I like the drop-down submenu idea for the individual sites.

    Are you suggesting we get rid of the Message of the Day entirely? Frequently there is important information there about upcoming outages, known issues, etc. Maybe we could present that info in a one-time login announcement. You think the default landing pad should be the Calendar and Notifications lists?

    1. We have the same data here. Users (staff and students) hate these forced messages and the space they take up. They insist that they ignore them/blank them out. Our Ops team regard them as essential and overlook the fact that nobody reads them.

      My only thought here is a growl-like approach to messaging so that messages are only presented to those who need to know (e.g. the system will close down for maintenance in 4 hours (2 hours, 15 minutes, ...) you may want to save your work.

      1. I think this is a great idea. We also discussed pushing system messages into the "Announcements" feed and giving them high priority, so they stick to the top of the list until marked "read."  

  2. I really like the drop downs on the site tabs, nice. Having an edit link next to the site tabs is also a good idea (seems obvious now I come to think of it). How about a link to the password reset tool placed below the login fields, for non SSO users? So many small pragmatic steps can be taken which will help make the CLE UI far more intuitive. Keep up the good work !

  3. The "My Active Sites" tab is a vast improvement on the -more- drop down list, why not use that as a starting point for improvements?

    Like the lad Fish, I also like the idea of a drop down tools list associated with the site tabs, I would extend it to have ALL tools on a site not just the 3 mentioned.  This will surely be immediately requested if Assignments, Resources and Announcements are added.

    Implementation details: If all tools were included, even though clicking on the tab takes one to the Home page, this tool should still be presented in the list. I say this because the ordering of the tools may have been changed in the site so Home may no longer be at the top.One must also be aware of tools that have been hidden via the Page Order tool

    Oxford has also discussed the idea of a synoptic assignments tool. This would be a great addition although there would be a question as to whether it just gets added to My Workspace or whether it also goes into any site with the Assignments tool.

    1. Replying to my own post here ......

      We've had another requirement for a synoptic assignments tool. The requirement would be to have a tool in My Workspace which displays upcoming (due) assignments PLUS a way of navigating to already submitted essays in order that a student has quick access to all their essays in an on-line environment.

  4. Mathieu Plourde mentioned an idea in a thread on sakaidev yesterday that sounded like it'd be good for this redesign (Re: [Building Sakai] Asking for advice):

    "We probably wouldn't need to unpublish if customizing the tabs was easier. Most users don't think of My Workspace > Preferences as the way to change those tabs. A simple hovering of the mouse should offer the chance to remove, move, or add new tabs by offering a contextual menu (a grip zone to move, an "X" to remove, and a link to customize even more if desired, for instance)."

  5. without myworkspace, you should add a messages notification ( optional for schools that don't use msgcntr) that could be as simple as:

    (1)   which could pop up the synoptic msgcntr page in a box (or since you already have the synoptic info, you could just display it in a hidden div and have like look like a "dropdown" of info the user can click).... performance would not be an issue since this is a single row per site lookup indexed on student id

  6. Great ideas all around. The drop-downs are a particularly good idea. And you've hit on a frustration of mine - My Workspace being treated as a site is an attempt to shoehorn some overarching concerns into an existing UI metaphor. The dashboard is a good replacement. Though I could see My Workspace broken into two pieces: a Dashboard with synoptic tools and links to other sites, and a Preferences link in the header which displays a page with tools affecting overall configuration for the user (eg. Profile2). Both could be implemented under the hood as "Sites", but there is no need to show them that way in the UI.

    Good job, folks (smile)

  7. Why not get rid of using the tabs as a way to navigate to sites altogether?

    We are working on a similar redesign project for the portal and in our early designs we have take more the approach used in Sakai 3 (also with the idea to provide the students with a smooth migration path towards the new version).

    So instead of the site tabs you would see:

    • Dashboard
    • Messages
    • Calendar
    • Sites
    • Content

    The sites tab would lead to a list of sites the user is a member of grouped by site type. A similar approach has been implemented in the Canvas LMS by Instructure:

    In Canvas the Assignments, Grades and Calendar links lead to pages that aggregate Assignments, Grades or Calendar items from all sites you are a member of.

    Also I think the dashboard page can be very usefull to students when you use it to aggregate information from different worksites such as new forum posts, announcements, favourite worksites, activity feed etc.

  8. In case it is useful, this is the dashboard landing page we have been using at Cambridge for 3 years now. The tabs of standard sakai are useful for quick switching between sites. We have approximated this by allowing favourites in the site list and then having favourites populate the courses and project drop down. The functions of MyWorkspace were moved into Personal Tools