Home > Top E-Learning App Design Mistakes

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.


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.


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.

Never miss a post! Share it!

Written by
CTO / Department Head / Partner
I've been leading a department specializing in eLearning applications and Business Intelligence for 14 years.
0 reviews

Rate this article



I expected and demanded a lot of you at Belitsoft company, but you exceeded my expectations. You acted pro-actively, challenged me at the right moments. Thanks!

Martin Beijer

CEO at Ticken B.V. (Netherlands)


We have been working for over 10 years and they have become our long-term technology partner. Any software development, programming, or design needs we have had, Belitsoft company has always been able to handle this for us.

Bjarne Mortensen

СEO at ElearningForce International (United States, Denmark)


They use their knowledge and skills to program the product, and then completed a series of quality assurance tests. We were working in an agile way with them. Belitsoft performed very well throughout our project. We are definitely looking at Belitsoft as a long-term partner.

Eddie Nicholas

Service Delivery Director at Crimson (United Kingdom)


I highly recommend Belitsoft for website design and development. We were up against a tight deadline to launch the project. The work was delivered on time and within budget! I will continue working with Belitsoft as a valued partner for our web development!

Adrienne Herd

Program Administrator at UC Berkeley (United States)


We have worked with Belitsoft team over the past few years on projects involving much customized programming work. They are knowledgeable and are able to complete tasks on schedule, meeting our technical requirements. We would recommend them to anyone who is in need of custom programming work.

Kevin M. Rice

Main Partner at Hathway Tech (United States)


Belitsoft company is able to make changes instantly. One of our internal engineers has commented about how clean their code is. Belitsoft seems to know what they're doing, which I appreciate.

Darlene Liebman

Co-Founder at HOWCAST MEDIA (United States)


It was a great pleasure working with Belitsoft. Software Development Company. New requirements and adjustments were implemented fast and precisely. We can recommend Belitsoft and are looking forward to start a follow-up project.

Renè Reiners

Deputy Head of Division at Fraunhofer FIT (Germany)

Apollo Matrix

Belitsoft company has been able to provide senior developers with the skills to support back end, native mobile and web applications. We continue today to augment our existing staff with great developers from Belitsoft.

Pete Johnson

CEO at Apollo Matrix (United States)


Belitsoft company delivered dedicated development team for our products and technical specialists for our clients time to time custom development needs. We highly recommend that you use this company if you want the same benefits.

Bo Sejer Frandsen

Managing Director at Key2Know A/S in 2012 (Denmark)

Regen Med

We approached BelITsoft with a concept, and they were able to convert it into a multi-platform software solution. Their team members are skilled, agile and attached to their work, all of which paid dividends as our software grew in complexity.

Nicolas Tierney

COO at Regenerative Medicine LLC (United States)


Having worked with Belitsoft as a service provider, I must say that I'm very pleased with the company's policy. Belitsoft guarantees first-class service through efficient management, great expertise, and a systematic approach to business.. I would strongly recommend Belitsoft's services to anyone wanting to get the right IT products in the right place at the right time.

Guy Doron

CEO at Moblers (Israel)


If you are looking for a true partnership Belitsoft company might be the best choice for you. They have proven to be most reliable, polite and professional. The team managed to adapt to changing requirements and to provide me with best solutions. I strongly recommend Belisoft.

Ivo Downes

Director at ShowCast Limited (Germany)

Let's Talk Business
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.
Contact form
* Maximum file size is 20MB
to top