0

I made an LMS webapp which, in the main page, shows a list of courses. The page looks like this:

enter image description here

The goal of the app, from a graphical interface standpoint, is to keep an elegant material design look.

However, while I personally don't dislike the minimalistic look of the page above, I would like something that differentiates the courses visually to the user.

For example, Google Classroom solves this issue by giving custom illustrations & graphics to each course, which end up looking pretty different from one another.

enter image description here

I would like to add an element that visually distinguishes one course from another in an immediate way, thus reducing the cognitive load of the user having to look for the course they want to access. The important thing is that it must not "break" the design of the application, so to speak, so it has to fit in well with the rest of the interface, which is pretty minimalistic.

Currently, it's possible to bookmark courses in my application, which makes them appear at the top of the page.

One way I've thought is to show a bookmark on the card of the bookmarked courses, each of a different color. The color is always the same for a course (for example, it could be generated from the course name).

This is what my experiment looks like:

enter image description here

Could this be a good way of achieving my goal? Is there anything better to try?

1

1 Answer 1

2

It's important to understand the role of a framework like Google's Material: The goal is to get the designer off the ground as quickly as possible without them having to spend time on basic things like buttons and icon sets.

There is a point where every design system has to stop and let the designer take over.

This is where you are right now - the design system has reached its limit and you need to step in to fill the gaps.

You mentioned "Cognitive Load" but your proposed solution is likely to increase cognitive load as the user tries to understand the significance of the colour. Try to imagine that you've been presented with this page for the first time. You can see these little splashes of colour that obviously break from the basic colour pallet of the page but there's no key to tell you what they mean. What do you understand from those colours at that point?

If you have to explain to your users what the colours mean, then your attempt to make their journey easier has failed.

A better solution may be to colour code the courses by subject OR by level depending on the needs of your particular users. This colour coding will be much easier for users to learn and utilise in their search for any specific card.

However, you should never rely on colour alone to impart any kind of information - colourblind users, users with low vision, users working with low-light screens, or users working under unusual lighting conditions may not be able to distinguish between certain shades.

Having worked with LMSs before, I would suggest you find some icons and colours to represent the different core subjects ('coding', 'mathematics', 'Data Science', etc.) AND find some visual system for indicating the course level. You might also want to consider indicating the completion status of each course too ('unstarted, 'in progress', 'completed', etc.).

Between each of these facets of information, your users will be able to find what they are looking for much more easily.

As for style; be sensitive to the aesthetics of your design system but don't let it stop you from making life easier for your users. Material works well with illustrations, iconography, and photography. Just try not to make the page look too busy!

4
  • Thank you for your feedback. The term course might be misleading, but this LMS is meant to be used directly in schools, so they're more like "classes" or "subjects" than like udemy courses, so there's not a clear concept of completion, also because that depends heavily on how the teacher uses it. If you were to add illustrations or iconography to the current cards I posted, where would you do it? I like to idea of having icons that signify the type of subject, but aside from letting the teacher choose them I would need to kind of infer the right icon from the name given to the course maybe
    – Samuele B.
    Jan 17, 2023 at 16:57
  • That would be something specific to your users/market - an image for mathematics might be a calculator, it might be geometry equipment, or something else depending on the level, focus, and audience - You'll have to discover that on your own - Your relationship with your client should not be limited to kick-off and delivery. Don't ask them what you should do but do have conversations with them about what you're thinking and see if they agree. Jan 17, 2023 at 20:40
  • I agree - as a matter of fact, I will investigate the issue with my users. However, although I realize I probably phrased the question in a confusing way, what I was trying to understand is: where would you place an illustration or icon in the course card that currently exist? I'm trying to understand if there's something that I would need to remove to make place for it, or just put it somewhere that's currently empty. What to put, as you mentioned, is a topic of its own.
    – Samuele B.
    Jan 17, 2023 at 21:18
  • 1
    You currently have three icons on each card - The bookmark and share icons and one next to the title - What purpose does this last icon serve? Could that be repurposed to add a core subject icon without adding extra elements? If you were planning on using a photo then I would suggest placing the photo far from any text - text over photos is always problematic. I can't give you a direct design decision because that's your job! ;) - Make a few versions and then imagine yourself as a first-time user and see how you feel about the page you're looking at. Jan 17, 2023 at 21:33

Your Answer

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

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