Elearning App Design Mistakes

When figuring out how to make a learning app, it's crucial to avoid common UX/UI design mistakes that can hinder the app's success. 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. We’ve interviewed one of our UX designers who specializes on eLearning 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

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.

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

Consistency issues

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

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

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

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.

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.

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.

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.