Top E-Learning App Design Mistakes

TV series “How I Met Your Mother” is full of fictional theories on how the world works. One of them is that a man has exactly 8.3 seconds to impress a woman as this is the time she decides if you’re good enough for her.
Dec 25, 2018

TV series “How I Met Your Mother” is full of fictional theories on how the world works. One of them is that a man has exactly 8.3 seconds to impress a woman as this is the time she decides if you’re good enough for her.

Coincidently, this is also the amount of time to check the phone during the day. You assess most of the mobile apps based on the first impression you experience after seeing them for the first time.

We’ve decided to figure out how important UX/UI design for E-Learning mobile apps and courses.

What mistakes make it near-impossible for users to love a certain app? How difficult is it to build a UX mistake-free app? What are the most popular mistakes designers commit?

We at Belitsoft work on projects in many domains, including e-commerce, accounting, healthcare, entertainment, and more. But eLearning has always been of special importance to us.

In the first part of the article, we are going to cover the general UX/UI design issues for all kinds of apps.

Then in the second part, we will focus on the graphic design issues E-Learning courses specifically might have.

We’ve interviewed one of our UX designers who specializes on E-Learning apps and courses to list the most common graphic design mistakes that can ruin the first impression.

Common UX/UI Design Mistakes for E-Learning Mobile Apps

Let’s dive into the most common mistakes made by UX designers in apps across different industries, including the ones that are connected with E-Learning.

Badly executed information architecture

Building (and maintaining) the correct information architecture of an app is vital for its future (and current) success.

Content and features that are most commonly used should be placed on the top. Prioritizing features by popularity is something all designers should pay attention to.

How do you define which functions would be used more commonly? Well, it starts with using your intuition and researching the best practices of other apps. Then make adjustments according to feedback.

The core of the problem: NOT PUTTING ENOUGH EFFORT ON PLANNING INFORMATION ARCHITECTURE WITHIN THE APP.

While this seems to be an important issue, lack of consistent analysis in planning is an often met thing.

The designers should focus on a mobile platform and what is important to users.

The navigation in the E-Learning app should remain as simple as it gets. Some designers might complain that every app is using a minimalistic approach now, but in most cases, this is just what is demanded.

Learning online is hard enough already, no need to make things more complex.


Source: quickmemes.com

In short, smooth Information architecture is no rocket science. However, being overlooked, it might cause plenty of troubles in usability.

Consistency issues

As we live in a geeky world, it’s fairly easy to find a metaphor for the lack of consistency in UX design.

Imagine there is a battle at the end of another “Avengers” movie. Hulk is smashing some random space invaders, Captain America is “shielding” the snot out of the enemies, the usual stuff.


Source: flickr.com

It all changes when Batman enters the stage and kills Black Panther and Spiderman with Darth Vader’s lightsaber. Sounds ridiculous? Sure, just like seven different fonts on a single page of a mobile app.

The core of the problem: USING TOO MANY FONT TYPES, DIFFERENT STYLES ON THE SAME PAGE OF AN APP.

It is not just the same font types on a single screen, using different fonts across several screens also confuses users.

It is not just about fonts, color scheme should remain consistent throughout all the pages on an E-Learning app. More on that in the next section.

Aside from simple pieces of advice like “don’t use more than three fonts per page”, there is nothing to suggest an overall improvement of this component. Overall consistency eliminates users’ confusion and helps them save some time on navigation learning.

Wrong colors

Fashion magazines are still printing articles on “bad and good matching colors”.

Ironically, as different as they are, E-Learning apps and fashion clothes like bright and catchy colors that are well matched.


Source: africanews.com

There is no such thing as the wrong color. Basic guidelines are to focus on avoiding poisonous green and yellow for your e-learning app.

The core of the problem: SELECTING “WRONG” COLOR COMBINATIONS

Choosing the correct scheme should not be an issue for the experienced designer and yet those cases are still met.

Some people choose Viber messenger instead of WhatsApp just because they like purple more than green. This doesn’t make lots of sense, but, as Kahneman stated in his book “Think Fast, Think Slow” - human beings are not as rational as one might think.

Focus on a nice contrast between the text and background colors. Using some software to select the needed colors might help UX designers get close to the perfect color combination.

Cluttering elements

Do not make the app look like the inside of a stuffed garbage can. Even if the course is fantastic and well-structured no one is going to dive in should it be presented in a cluttered way.

The core of the problem: NOT MAKING RIGHT ALIGNMENTS AND OVERCROWDING THE INFORMATION


Source: pixabay.com

Certainly, badly-structured E-Learning course is an awful thing. Dealing with an unclear and cluttered UI is also quite bad and users won’t take it.

Keep all the important information in user’s sight - that is the general guideline here.

Lack of interaction feedback

What brings good applications closer to perfection? Good timely adjustments based on the feedback from the users.

The core of the problem: NOT GATHERING FEEDBACK ON UX/UI

The perfect example of working with the feedback is demonstrated by one of the leaders at E-Learning market - Duolingo.

They have plenty of forums and react to users’ requests immediately, making their design responsive in all the senses possible.


Source: duolingo.com

For instance, users absolutely love the adorable owl. As an element of gamification, one is able to select a dress for him after completing a certain learning task.

This is not really applicable to UX/UI functions, yet a very illustrative example of reacting on feedback.

Feedback comes in many forms - community messages, visual clues to name a few. The main qualifying criteria for its competence that it has to be natural and come from the users who use this E-Learning app on the regular basis.

Visual Design Mistakes that are Hurtful for E-Learning Courses

User doesn’t know what to focus on

The well-structured course is the one user completes in a manner its creators intended. Eye moving patterns aren’t something new and certainly aren’t something that could be ignored by the designers.

People tend to scan the screen in a Z pattern. However, their patterns might be influenced by changing colors, font sizes, restructuring other elements of the course. This part is often overlooked.

Oftentimes E-Learning courses focus solely on the info that comes the user’s way and don’t even try to display information in a representative way.

What could be done about it?

As our designer Kate claimed, at the beginning of her career she got acquainted with “The Non-Designer’s Design Book”. A must-have for designers.

It contained the idea of CRAP - contrast, repetition, alignment, and proximity principles. Should they all be intact, the user will follow the way the designer had prepared for them.

All the things displayed on-screen should be there for a reason: it is called an intentional design.

Poor images execution

Bad images executions is an often-met design mistake that is easily solved.

Sometimes inserted images get “managed” to make them fit, or being moved to another page or side. If it is done carelessly the images get scrunched, but not scaled.


Source: flickr.com

Course designers should keep a close look at the ratio of the images and keep it intact.

The overall inconsistent visual style

We’ve briefly touched this mistake in the previous article section.

It makes sense to repeat some statements one more time. It would absolutely kill the mood of the user of each screen or slide will be made in a different manner. The slide-to-slide manner of completing the job might lead to this.


Source: researchgate.com

This is just a single example of visual inconsistency in E-Learning courses that could be presented in LMS (Learning Management System) for instance.

Other elements of visual inconsistency are:

  • Using too many fonts and switching recklessly between them
  • Overcrowding the free space on the page without leaving any white spaces
  • Using decorative images instead of practical ones (just for sake of filling the gaps)
  • Not applying any design mapping

Alignment Looks Sloppy

If you are not new to online courses, you perhaps have seen the ones with poor and sloppy alignment. These courses are lacking visual balance if you will.


Source: jimfalk.com

Online courses, like furniture in your apartments, also need feng shui in terms of alignment and keeping it throughout the whole length of it.

One doesn’t need to be a feng shui master to figure out that a lonely chair in the center of the room is not the right furniture placement and bugs out the general impression of the coziness of such room.

It just doesn’t look right. It might make an understanding of the course content more complex.

To fix this issue, designers should have consistent margins and align objects in the same manner through the whole course.

Any switch in justification (from left-justified to center) should be reasonable or avoided if it is not really needed.

Grid systems are helpful to keep the objects aligned. The designers in Belitsoft usually use Bootstrap for these purposes.

Consistencies, Functional and External

You might be tired of hearing the word “consistency” across the article as we focus on it a lot.

Goes without saying that having all elements of e-learning app work in a similar way is beneficial for the users. Leaving visual elements aside (we’ve got it covered in the previous two section with plenty of details), there is also functional and external consistency.

Functional consistency means that every interactive element should work in a similar way within the e-learning app.

After all, the design is not just for making the app look “cool”. What matters the most is users’ convenience. Feedback from the target audience might help with design as well.

A/B testing comes handy for defining small elements of e-learning app design, If you are uncertain about which of the two options would make a better impact on the learning abilities of users - A/B test it till you get it close to perfection.

As for external consistency, Design must be consistent across multiple products. It is especially important for e-learning products.

One should be able to have access to the learning materials on mobile, laptop or tablet without getting to know each platform’s design individually.

As online education should be available from all types of devices, and it’s vital for e-learning software to be cross-platform.

As a practical step on the way to keeping this kind of consistency:

Respect platform guidelines

Apple’s Human Interface Guidelines and Google’s Material Design Guidelines could serve to give a general direction. Users get used to their interaction patterns of each OS (iOS and Android), and anything that contradicts general guidelines could push them away.

Conclusion

Those are common design mistakes.

Some of them are obvious, the others aren’t. We are certain our designers make a good job of avoiding them in E-Learning software made by Belitsoft, but there is always a room for improvement.

You might be tired of hearing the word “consistency” across the article as we focus on it a lot.

Goes without saying that having all elements of e-learning app work in a similar way is beneficial for the users. Leaving visual elements aside (we’ve got it covered in the previous two section with plenty of details), there is also functional and external consistency.

Blog writers

Subscribe to Belitsoft's Blog for Entrepreneurs

Join successful software startup founders! Get insights from growing companies like, where to get an idea, how to validate it, how to launch, and how to hire people - everything. Enter your email address below (no spam):

Email *

RECOMMENDED FOR YOU

If clothes make the man, the design makes the website. That's where potential customers start evaluating a product. The SaaS website can (and should) be an online lead-generation machine, so each component of it has to be as good as possible. As people generally remember the first and the last thing they see, having impressive header and footer can go a long way towards making your product successful. What do some of the best SaaS companies do with their websites’ headers/footers? Look at this list to get and keep in mind some ideas for custom software development while building or redesigning your SaaS website. ...

Our team is experienced both in PHP programming and Node.js development. We have a portfolio with both PHP-based applications and Node.js-based applications as well as mixed ones. What do we take into account when considering which tool to use in custom software development? ...

Laravel framework is very popular for custom software development. It is the Most Starred PHP Framework on Github: more than 35 000 developers from all over the world (mostly from the USA) greatly appreciate robust features of this platform. Based on data of the BuiltWith, Laravel's popular websites verticals include Business, Entertainment, Media, News, Shopping, Technology, Vehicles. Why is Laravel so popular? ...

Laravel is the Most Starred PHP Framework on Github: more than 30 000 developers from all over the world (mostly from the USA) use it for custom software development. Thinking about Laravel 5 but don’t know where to start? Among the features that make Laravel framework better than others there are awesome documentation, community and step-by-step tutorials. In this post, to save your time, we've gathered expert advices on how to download, install and configure your first Laravel-based project ...

Belitsoft has a huge experience in MVP software development for startups and prototypes for existing brands. MVP is a minimal version of the product with the minimum set of features that is enough to deploy and test the key hypothesis to solve problems of this product’ potential customers. Experts suggest that, in B2B, it’s not an MVP until you sell it. Viable means you can sell it. ...

The way to get profitable startup idea is not to try to think of startup ideas (including SaaS development). It's to look for problems, preferably problems you have yourself.  In fact, for many entrepreneurs, successful business ideas start out as solutions designed to address a challenge they face personally. Solving the problem that frustrates you may be one of the best ways of finding an idea for your startup. Look at these software developers who turned their problem into success.  ...

Get A Free Quote

Do you have a software development project to implement? We have people to work on it.
We will be glad to answer all your questions as well as estimate any project of yours.
Use the form below to describe the project and we will get in touch with you within 1 business day.

Call us:
Phone - USA
Phone - BELARUS
Skype
EMAIL US:
Contact form