Education

10 Design Mistakes That Will Ruin an Online Course / ITech content

10 Design Mistakes That Will Ruin an Online Course / ITech content

Course with employment: "Profession Methodologist from Scratch to PRO»

Find out more

An independent screenwriter and developer of e-courses, working in the field of online education since 2012. During his activity, he has successfully created more than 200 educational courses covering various topics and formats. He is the author of the popular Nova Academy Telegram channel, where he shares useful materials and tips for creating high-quality content for online learning.

In his book, "The Design of Everything: How Things We Never Think of Became" designer Scott Berkun cites a quote from book design expert Douglas Martin. He argues that the question of whether design is necessary or whether there is a budget for it is meaningless. Design is inevitable, and the alternative to good design is bad design, not no design. Effective design plays a key role in creating products that attract attention and improve the user experience. Understanding the importance of design allows companies to stand out in a competitive market and meet the needs of their customers.

A similar situation is observed in e-learning course design. Firstly, according to one of the laws of UX design, users tend to perceive an aesthetically pleasing interface as more usable. Secondly, the level of user awareness in the digital space is constantly increasing. Beautiful mobile apps and websites are becoming commonplace, and when users open a course, they expect to see not only high-quality content but also a well-thought-out design. This emphasizes the importance of visual design and its impact on the perception of educational materials. Aesthetics not only attract attention but also contribute to more effective learning, creating a comfortable and inspiring atmosphere for users.

Let's look at common e-learning course design mistakes that even experienced designers can make. We'll discuss effective ways to prevent them to improve the quality and appeal of educational content. Proper course design not only promotes better information comprehension but also increases user engagement. Understanding the main problems and ways to solve them will help create more effective and user-friendly e-learning courses.

Different Text Sizes for Different Blocks or Slides

When designing a course, designers and developers sometimes use different font sizes on different slides to fill the space. In cases where there is little text, the font is increased, and in cases where there is a large amount of text, the font is decreased. However, imagine reading a book with a constantly changing font size on every page. This would likely make it significantly more difficult to comprehend the information. To ensure easy reading and comprehension, it's worth maintaining a consistent text style throughout the course. This will not only improve the user experience but also increase the effectiveness of the learning process. Proper use of font and font size is key to creating clear and accessible content.

This is not recommended.

The font size of the headings and main text changes on each slide. This helps create visual dynamics and emphasize key points of the presentation. Choosing the right font size improves the perception of information and makes content more readable.

Images: Katerina Golomshtok's portfolio

This section presents Katerina Golomshtok's personal portfolio, which includes a variety of works demonstrating her professional skills and creative approach. The portfolio covers various genres and styles, emphasizing the uniqueness and individuality of each work. Katerina actively uses modern techniques and methods, which allows her to create visually appealing and memorable images. Browse her portfolio to see the high quality and originality of the work presented.

When laying out a slide course, it is important to adhere to uniform standards for text, headings, and subheadings. It is recommended to focus on the size of the slide itself. For example, with a resolution of 1920x1080 px, the optimal font size is 20-26 pt. If a slide contains a significant amount of text, to avoid it becoming too small, it's best to convert it to an interactive format, where some of the information is hidden in tabs, or to split the material into multiple slides. This will improve the information's comprehension and make the course more user-friendly.

Headings and body text on different slides have the same font size. This ensures harmonious perception of information and creates a unified style of presentation. Maintaining a single font size for headings and body text improves readability and promotes better assimilation of the material. Proper slide design, including consistent font use, plays an important role in creating a visually appealing and professional presentation.

Images: Katerina Golomshtok's Portfolio

Katerina Golomshtok's portfolio is a unique collection of images that showcase her artistic style and professional skills. This portfolio features works that reflect the diversity of themes and techniques used in Katerina's work. Each image is a testament to her talent and creativity, making the portfolio a valuable resource for potential clients and collaborations. Pay attention to the details and expressiveness of the works, which highlight the author's personality and skill.

Overuse of Different Colors and Fonts

Overuse of different colors and fonts in a training course makes it difficult to perceive information. Each new element creates additional visual noise, making it difficult to concentrate on the content. Optimizing the design with a limited palette of colors and fonts will help improve the perception and assimilation of the material, making it more accessible and understandable for students.

This should not be done.

One block of text uses highlighting in three colors, bold and italic. Image: personal Katerina Golomshtok's portfolio

To avoid design errors, it is recommended to limit the use of two fonts: one for headings and one for the main text. Regarding the slide's color palette, it is worth choosing between monochrome and high-contrast schemes. However, to highlight semantic accents, it is best to use no more than two colors. This approach will improve readability and perception of information, which has a positive effect on the overall quality of the design.

In addition to the colored heading, the text retains a single color and one format of emphasis - bold font. Image: personal portfolio of Katerina Golomshtok

Centering Text

When laying out text, it's recommended to use left-aligned alignment. This format makes information easier to read, as opposed to centered alignment or randomly arranged text on the slide. Justified alignment should also be avoided, as it can create uneven spacing between words and lead to "hanging" prepositions, making it difficult to read. Correct text alignment promotes better understanding and assimilation of information, which is especially important for creating high-quality content.

It is not recommended to do this:

The blocks on the slide are arranged in a "ladder" manner, and the text in them is centered - this is difficult to perceive. Image: personal Katerina Golomshtok's portfolio

Left-aligned text creates an invisible line, significantly simplifying the perception of information. The reader doesn't have to make an effort to determine the beginning of each new line—they only need to shift their gaze to the left. This promotes easier and faster reading, which is especially important for users seeking effective comprehension. Proper text alignment improves user experience and makes content more accessible.

Here, the blocks are placed on one line, and the text is aligned to the left - it looks much better, doesn't it? Image: Katerina Golomshtok's personal portfolio

Images that take up almost the entire slide

For a course designer, text is the primary element, while visual aspects play a key role for the designer. This sometimes leads to curious situations. For example, I've encountered fellow designers with whom I worked on presentation designs who argued that certain information should be removed not because it was unimportant, but solely because it clashed with the overall visual style.

In the example shown, the designer has placed a large image that takes up a significant portion of the slide. This resulted in the text beneath the image being inaccessible, forcing the user to scroll. As a result, the user must perform additional actions to fully perceive the information. The question arises: is it justified to use such a large image if it complicates interaction with the content?

You should not resort to such actions:

The image with the ring is too large, and the explanatory text does not fit on the slide. Image: Katerina Golomshtok's personal portfolio

Slides can have different emphases, and in some cases, the main element is an image, such as a graph, diagram, or photograph illustrating the topic being covered. In such situations, the image truly takes center stage. However, when key information is conveyed through text, it's important that the design and layout don't distract from the content. In such cases, the text becomes the main element of the slide, and the image should complement, not replace, the main content. The correct combination of text and visual elements promotes better perception of information and increases the effectiveness of the presentation.

It is enough to slightly reduce the image, and the text explanation will fit entirely. Image: personal portfolio of Katerina Golomshtok

Incorrectly cropped images

In the book "Design "In total," emphasizes that high-quality design is invisible. If the user notices any flaws, it indicates a flaw in the designer's work. This rule also applies to images where, for example, characters' legs are cut off. Such errors are glaring and distracting to the user, negatively impacting the content's perception. Therefore, it is important to pay attention to details in design to ensure a comfortable user experience.

It is not recommended to do the following:

A character with a cut-off lower body appears to be hanging in space. Image: Katerina Golomshtok's personal portfolio

It's not always necessary to show characters full-length. Often, using an outline or an AutoShape background is sufficient to enhance the visual impact of the slide. This approach makes the visual content more engaging and helps emphasize key elements. Proper image design promotes better understanding of the information and increases interest in the slide.

The character appears to be in a window or frame, which makes it look more natural. Image: Katerina Golomshtok's personal portfolio

Low Contrast

Color should be used to highlight important information and accents. For example, in the example shown, the section the user is currently viewing is a color that is barely distinguishable from the main background. As a result, the accent becomes barely noticeable, and it's unclear whether the course author intended to draw the student's attention to this element or whether it's simply a color scheme error. Proper use of color can significantly improve the perception of content and help the user better navigate the materials.

This is not recommended.

The dark blue highlight is almost invisible among other blue elements. Image: Katerina Golomshtok's personal portfolio

The contrast of your screen may differ significantly from the contrast of the student's screen. Therefore, when choosing color schemes to highlight information, it is recommended to use contrasting colors. This will ensure clear visibility and help better convey the information to students.

Highlighting with a contrasting color serves its purpose well. Image: Katerina Golomshtok's personal portfolio.

Incorrect placement of information

When reading a slide, we perceive information from top to bottom and left to right. Therefore, it is important to organize the content according to this order to ensure maximum readability and comprehension. Properly structured elements on a slide promote better understanding and assimilation of the presented data.

In the example shown, this feature was not taken into account, resulting in the user first encountering the answer options and only then the statement to which they relate. This creates confusion and makes it difficult to perceive the information on the slide. To improve the user experience, the content should be reorganized, presenting the statement first and then the corresponding answer options. This will make it easier for users to navigate and absorb the material faster.

You shouldn't do this:

The answer options are placed before the question, which disrupts the logic of the slide. Image: Katerina Golomshtok's personal portfolio

To solve this problem, simply swap the question and answer options. This simple action will improve the information's perception and make it more understandable for users. A well-structured Q&A promotes better engagement and understanding of the content, which is essential for making it more effective and engaging.

Please provide the text you want me to revise.

The student sees the question first, then the answer options, and there is no confusion. Image: Katerina's personal portfolio Golomshtok

Little space for text

When visiting a clothing store, you can quickly determine the price segment, whether economy or premium. In mass-market stores, the assortment fills every available space, and the shelves and hangers are overflowing with goods. In contrast, in high-end brand stores, each item has ample space, allowing for its individuality and quality to be highlighted. This approach not only creates an atmosphere of luxury but also encourages customers to pay more attention to the products on display.

Slide design plays a crucial role in how information is perceived. Slides with insufficient white space create a cluttered appearance. When text is crammed tightly to the edges, it makes the presentation appear less professional. This approach can create the impression that the designer tried to squeeze as much information as possible into a limited space, leading to a loss of focus and a less effective delivery. Good slide design requires a balance between text and white space, which promotes better perception of information and increases audience interest.

This behavior is incorrect.

The text is pressed against the borders of the blocks, and the distance from the text to the edges is uneven. Image: personal portfolio Katerina Golomshtok

To create a more "expensive" design, it is recommended to increase the amount of white space on the slide. This will improve the perception of information and make the composition more elegant. Make sure the design elements are harmoniously arranged, and the white space highlights important accents, creating a sense of luxury and style. Proper use of white space contributes to a better perception of content and increases the overall appeal of the design.

Increasing the white space makes the slide look neater and easier to read. Image: Katerina Golomshtok's personal portfolio

Different styling of elements

Another sign of poor design is inconsistency in the styling of elements. For example, differences in corner radii and stroke thickness can significantly degrade the user experience. In the example shown, the text block and menu bar have a larger corner radius than the buttons on the left, and the button strokes are noticeably different. These inconsistencies create the impression of sloppy, low-quality design. To achieve a harmonious and professional appearance, it is important to ensure consistency across all interface elements.

This is not recommended.

The green buttons have wide black borders that are not used anywhere else on the slide. The corner radius also varies across different elements. It all looks disorganized and untidy. Image: Katerina Golomshtok's personal portfolio.

It's best to take the time to align the roundings and harmonize all elements within a unified style. This will help create a more attractive and professional appearance, which will positively impact user experience. A consistent style for elements improves navigation and interaction with the site, which is also important for SEO.

All blocks on the slide have the same corner radius, and all borders are the same thickness. Image: Katerina Golomshtok's personal portfolio

No alignment between objects

At first glance, this slide might evoke a vague feeling of discomfort in an inexperienced user. Although they won't be able to pinpoint the problem, the sense of a disruption in harmony and order will be obvious.

The devil is in the details. In this case, the text fragments placed within the colored blocks are not aligned. This minor error creates a sense of sloppiness and can negatively impact the perception of the content. It's important to pay attention to such issues, as they affect the overall design quality and page readability. Proper alignment of text blocks contributes to a more professional look and improves the user experience.

It is not recommended to do this:

Uneven margins create chaos on the slide. Image: Katerina Golomshtok's personal portfolio

Aligning text in speech bubbles to the top and left edges will significantly improve the slide's appearance. This approach not only adds a neat design but also makes the information easier to digest. Proper text alignment improves readability and helps create a harmonious composition. Optimizing visual content is important for improving the overall quality of a presentation and capturing audience attention.

Text in blocks is evenly and uniformly placed, making it easier to read. Image: Katerina Golomshtok's personal portfolio

Read also:

  • Creating online courses: a selection of designers that make this possible
  • A comprehensive guide to creating presentations: how to create compelling text, design, and structure
  • What is a course map and what types are there?
  • How to make course text clear and engaging
  • How to create longread courses