0

I have a webapp LMS whose workflow, for students and teachers alike, goes like this:

the home page has a list of cards representing the courses available, with a button to enter the course. When inside a course, there' a sidebar displaying actions pertaining to that course: view/create exams, lessons, and so on. If the user needs to switch to another course, there's a link in the sidebar with a back arrow icon thart'll take them back to the list of courses. This is what the sidebar looks like when inside of a course:

enter image description here

I have had some feedback from my users that it is cumbersome to navigate from one course to another.

I took a look at how Google Classroom does things, and apparently you always have a sidebar with all your courses, whenever you are:

enter image description here

To show actions that you can take inside of a course, they use top tabs:

enter image description here

I don't think this'd be viable for my application, given that the number of options in my course-specific sidebar is much higher than just 4, and could possibly grow larger in the future.

How could I make it easier and lighter to navigate between courses given my current design, without giving up on the more focused course-specific sidebar?

Here's a screenshot of a full page of my application, to give you a better idea of the design:

enter image description here

Improve this question
3
  • Move "< Back to courses" above "Calculus".
    – bloodyKnuckles
    Mar 16 at 11:10
  • Which users, students or tutors (user side or admin side)? Is the app responsive, i.e. do you have a mobile phone version?
    – Garik
    Mar 16 at 12:00
  • I do have a mobile version. The sidebar is the same, but it's shown by clicking a menu icon which reveals it like a mobile navigation drawer (think mobile Gmail). The options are the same in that sidebar. My users are students and teachers. The issue is the same for both, as the options shown in the sidebar are slightly different for the two but the logic is the same.
    – Samuele B.
    Mar 16 at 13:11

2 Answers 2

Reset to default
1

Solution for desktop. You have a lot of empty space on the right side of the interface. Place your courses in a collapsible container, highlight active (selected) course.

Side bar

Improve this answer
0

Perhaps the user needs to see the full list of courses while working on one of them. You can adapt the example of DI.FM where they place all the options to choose from in a top carousel.

enter image description here

Improve this answer
6
  • I agree it's a good idea to provide the user a way to access courses from anywhere in the app. I'm more inclined to somehow add that option to the sidebar. How about a course selector put somewhere in the sidebar from which you can pick a course and jump to it? The select widget would show the current course and, when expanded, the list of courses so the user can switch to another one. Do you think that could work too?
    – Samuele B.
    Mar 16 at 13:18
  • It depends on the number of courses, if there are up to ten it could be, if there are more I don't think it's a viable option
    – Danielillo
    Mar 16 at 13:31
  • The courses may be very many in general, but the users are usually interested in just up to 2-3. I believe there could be a case for best-case optimization. For example, I could show the user the top 5-10 courses based on their activity, and at the end of the list show a "go to courses" which falls back to redirecting to the home page. I'm willing to bet it'd be extremely rare that a user would resort to it. Maybe I could allow the user to also input search text in the widget, to filter courses?
    – Samuele B.
    Mar 16 at 13:35
  • I think you have too much information and functions in your interface to even add a filter. In general, I favor out-of-the-box visible solutions over thousands of features.The more details you add in your comments, the more convinced I am of the solution I put in my answer. 😉
    – Danielillo
    Mar 16 at 13:51
  • Would you keep the carousel visible at all times? Or have an easy way of toggling it, once the user has been informed of its presence?
    – Samuele B.
    Mar 16 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.