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?
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.
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:
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.
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 😊
