Coursera — Notes feature empty state design suggestion

Decorative Arrow Pattern

The first time you arrive on Coursera, you are new to the interface and this can be overwhelming. The structure is quite well defined, but you will need a bit of time to adapt and make yourself at home. As a new learner I was at the beginning, small things have bothered me. Let’s highlight one of these.

What is the issue encountered on Coursera?

The notes section is not clear at the first time. I remember struggling a lot trying to find what the “Save Note” was, or more precisely: where?

The course template page of Coursera

To be fair, I didn’t expect it just below the video, because in my mind this section is reserved to actions being made in direct relation with the video. Sharing, downloading or reporting it are part of my first expectations. But apparently, for Coursera this “Save Note” feature has its room there too.

The save note"button" placed far from the guiding text

There it is.When I found out its location, I told myself “ooooh, this is the so told “button””. Well, to me and regarding the coursera interface, this is not a button.

These two seem like buttons indeed.

Maybe the term buttons was referring to HTML buttons, or at least the technical solution, and not the visual one, which didn’t help me with my confusion at first. Maybe I’m too technical here? Yup, maybe.

To wrap up all the tiny issues here, let me list what I spotted:

  • UI/Usability: The distance between the thing described and the action is too long.
  • Wording/Tone of Voice: The appearance doesn’t match the word description.
  • Information Hierarchy/Legibility: The Notes area describes 2 ways (I think) to add notes in the same paragraph.
  • Usability/User Interaction:The empty state (the notes section without any notes) is lost or not well used.

What is our design suggestion with this Coursera issue?

I propose that we describe more precisely what the “Taking Note” feature is about to our end users. To do so, I would like to:

  • be more explicit
  • use the empty state to teach the user
  • propose a direct first action

Here is the piece of interface I propose as a solution:

A solution for Coursera Notes Taking feature with a well designed indications

I bring new things with this proposition that I hope is explicit enough:

  • Clear guidance of the multiple ways to take notes
  • Guide the user to find the “remotely placed” button,
  • Use the existing empty state to teach user
  • Use the existing empty state to test the feature
  • Applied a button-style to the action but not a primary one to avoid confusion.

This should bring a bit more guidance to newcomers on the platform. It proposes an anticipation, a purpose and a way to locate and use the tools at their disposal. Here is the total screen with this solution.

The initial screen with the solution implemented

Of course, this is only a suggestion among other ways to fix this.

Global learnings - Takeaways

With this example of small optimisations, we brought to you some concepts in UI and UX Design. Coursera is a well designed interface, and online course platforms are not the easiest to design. Listening to newcomers to tackle down their first pain points is one way to make people stay and adopt your solution.

Some things we learned together with this case:

  • Proximity Law: It’s easier to describe a feature that is close to the description.
  • UX Writing: When you write micro copy like that, don’t use technical terms like “button” to avoid confusing users. Being less precise sometimes avoids a mismatch between design and user mental model.
  • Content Hierarchy: Cut down into several pieces when you describe several elements to avoid overwhelming people.
  • Empty States: use them to onboard people and propose a first and clean action. It’s the best way to engage with users.

Coursera is full of small optimizations to work with like this one. Did you spot some of these too?
Let’s chat on social network (#suggestdesign) if you want to 😊

Start the discussion

You can find the discussion about this article on our Tribe. Can't wait to talk with you.

Let's chat on Tribe

Or you can follow up the discussion with us on our Twitter account.

Continue on Twitter

About this suggestion

The suggestions we make are not made thanks to a full and proper user research. At best we did a guerilla study about user behavior. Most of the time, these are suggestions based on our own experience and needs, which don't represent necessarily all end users needs.

Rocket Icon

UX Design case studies directly in you inbox.

Thanks! Magic stuff coming soon! ✨
Oops! Something went wrong while submitting the form.
Recent Case Studies
View All
Link Arrow
Related Case Studies
View All
Link Arrow
Not enough related case studies at the moment. Stay tuned!
Thanks! Magic stuff coming soon! ✨
Oops! Something went wrong while submitting the form.