On our new reality the way we learn has been dramatically disrupted, according with the UNESCO, closures are impacting almost 70% of the world’s student population (1.2 billion), traditional education need it to switch to online in matter of days, the faster solution for several teachers was to use Zoom or Google Meet, these platforms weren’t designed with this particular goal in mind also most of the teachers weren’t trained for this new way of teaching, so I don’t think is fair to judge them in the same way, but for me the important point is that education has been transformed forever.

In 2019 global edtech investments reach around US$18.66 billion and before the pandemic the market for online education was projected to reach $350 Billion by 2025, the acceleration on adoption after COVID-19 will increase that number by far.

In the early days of e-learning, typically only big education institutions took the time and effort to produce courses, but now any individual can produce and distribute high-quality content in a relatively easy way. New knowledge is generated at an amazing speed so the forever student paradigm is normal for some careers. My own experience as a user experience (UX) designer is that each year new software, platforms, and processes are required in the field so I need to go back to the classroom and learn something new. Online classes have a big advantage for a busy professional,no virus, no need to suffer through traffic, generally they are cheaper, and usually, you can choose your own schedule.

I register constantly on different platforms for these courses and as a UX designer, I have found some features or components on the screen help to create a more enjoyable experience. From my own perspective, I’ll try to analyze the course page on several platforms.

Coursera, Edx, and Udacity are some of the first sites offering Massive Open Online Courses (MOOC) online I can remember. Coursera and Edx have courses from universities and education institutions and Udacity courses are self-produced. You can take short courses (around 8 weeks) but a new trend is that if you take several courses you can pursue a certificate or specialization.

Kadenze, Skillshare, and Udemy also offer courses but they are a bit different than the previous examples. Kadenze is a mix between Udacity and Coursera where you can find institutions courses but they also started to develop their own content. Skillshare and Udemy are platforms, most of the courses are from individuals that publish and monetize using these sites.

Most of the sites use the same structure and similar sections, I’ll try to describe what I think is working and what needs some improvement.

Header

How different services design their headers is probably where we find the most differences. From these samples, I think the less the better since a course page is a little bit like a checkout page where you don’t want to distract the user with too many links or actions that take him or her out of this page. The course content is more immersive when we keep the links just related to the content, any other section or link is better to leave just on the main index course page.

Some good examples are Udacity and Udemy, their headers are clean and with minimal info. They use a different header on the content page than on the rest of the site, a leaner version. Udacity even removes their branding and Udemy uses some gamification showing your progress on the course in a clean way. I found this feature really helps to motivate you.

On headers, we can find those situations where business goals collide with user goals. It seems that most of the time the business goals create distractions. I’m already taking this course, so why tempt me to search for another one or invite me to explore more with an attractive CTA? Why add alert messages with urgent visual language.

Menu

The menu on the left is a common pattern. Most of the sections are video content so it is easy to show the time duration for those, or when the content is text or a quiz they might show an estimate. Showing the time really helps so you know in advance how much time you need to commit to this lesson, is a bit frustrating when you don’t see that info.

Edx menu is different from the regular left or right vertical menus. They use a horizontal menu on the top, maybe because their sections are different from other sites with a blog post-like layout on one long page. But the menu is a bit awkward. You can just see a bunch of icons that don't give you too much information when you hover you can read the section title but still these icons are distracting and don’t give much in return.

Kadenze has two menus, one for the main course content on the left and the section content on the right, the menu on the left is not really necessary and just steals attention from the content. The menu on the right beside the player works well and in general, is easy to use. 

Udemy menu has some nice extra features here. Most of the sites use a checkmark for noting completed sections, but Udemy has a checkbox so you can uncheck easily. It may seem silly, but when taking courses online you go back and forward several times so this helps you with that flow. Like when you mark an email “unread” telling yourself you need to get back. Also if the section has extra resources they place a resource dropdown so first, they hint that this section has some resources and second they give you an easy way to access it. This way there’s no need to scroll or hunt for the resources section.

Video Player

Most of the sites use a custom player except for Udacity that uses a traditional Youtube player.

On Latin America internet connections things go from bad to worse so two features I really found useful on the video players are choosing your own resolution and changing the speed. 

Kadenze player is great because you just hover on the button to see the options, in contrast to Coursera’s player you don’t see the options, and you need to use + and - buttons to navigate. I think it is better if you let the user see their options from the beginning. 

Notes

Not sure if I’m too picky here, but I just don’t feel any of the sites could get this section right. How hard is it to just have a create note link? It seems that it’s pretty hard.

For example, on Coursera the notes section is prominent and the colors there invite action, but once you try to click into it you realize it’s not actually clickable. Once you finally stop to read (remember, users tend to skip reading) they tell you to click the Save Note link below the video player. The feature is nice because when you save a note, the feature saves a screenshot from the video and a time stamp. So, when you read your saved note you can jump to that scene in the video.

Skillshare is similar, you can see a view notes link and view all notes icon but not really a “create note” link anywhere. It is only when you click view all notes that you can see a way to create a note.

On Coursera is easy to fix just add a “Create Note” link on the section you already have, don’t ask the user to go to a different section of the screen. On Skillshare, if the user has never created any note is hard they will try to view all notes, maybe they can replace that “View all notes” to “Create Note” once the user creates at least one then you can replace to view or have both options there create and view.

Additional Sections

On most of the sites, you can find those sections as a base but some of them try to improve the experience with some additional features.

Language

English is not my first language, so any feature that helps you with the language is welcome. Most of the sites use at least a see captions in English, Skillshare has captions in several languages so they go the extra mile. Also, Coursera has a nice transcript feature where you can read all the content of the video, and they even have a kind of sing-along feature to not get lost.

Portfolio

Skillshare has a nice portfolio below the fold. It’s useful to see the level a student can reach after the course and also is nice to see other people’s projects. 

Code 

Edx course pages have a nice code feature so you can do the exercise right there and not need to leave the page to complete.

Forums

Kadenze has a forum activity section that shows us the most recent activity. Honestly, I usually don’t visit the forums unless it's required (on some courses, to go to the forum and present yourself is a common task). This is a nice way to give us a glance of what’s in there. Most of the content is below the fold so it doesn’t steal your attention. Skillshare also uses a discussion section that works in a similar way.

Conclusion

There are several more options for taking courses online but the common patterns don’t change too much. It’s awesome that people from so many places and backgrounds now have access to knowledge.

In the next few years, our time and where we focus our attention will be the next battleground. Netflix’s competition is not just Disney+ it’s also Fortnite, Instagram, dining out, and podcasts.

Experiences that need intense concentration and need to polish their platforms to allow their users to reach their ultimate goal: to learn something new. We as UX designers still need to work on improving these experiences. It’s great to plan new features to make learning easier, but we also need to remember that attention is gold and each feature or link that steals our focus can also get us away from our goal.

Share :