Considerations For Screen Design

Designing a screen for online learning isn’t quite the same as designing a web page or a slide presentation. Although many components are the same, creating an interactive learning experience has some unique considerations in terms of screen design.

During the design process, one of the first things to ponder are the functional areas of the screen—their purpose in your course, their placement in the layout and their design.

Of course, there are a great variety of approaches to screen design. Even so, I’d say there are five main areas of the screen that are functionally important and often present in eLearning courses, though they don’t necessarily match this layout. These are numbered in the illustration below. With each functional area, there are certain things to consider. Please note that complex learning games and immersive environments often require a different type of interface than what is shown here.

Functional Areas of the Screen

#1 Location Identifier

The users of a course should be easily oriented to their location in it. People have wandering minds, they take phone calls and they go get a latte—right in the middle of your course! When they regain consciousness, so to speak, it’s good to remind them of where they are. So a small reference to the location, such as the name of a module, lesson, or topic serves as an orienting device. Breadcrumbs work well too. But dynamically generated breadcrumbs tend to be displayed in a smaller font and some audiences might not be attuned to deciphering them. So perhaps breadcrumbs alone work best for a more technically literate audience.

There’s also a cognitive advantage to using a location identifier because it works as a conceptual organizer. When the course content is arranged into modules and lessons that make instructional and logical sense, the display of the location can help a learner internally organize the information. Good internal organization can help people retrieve knowledge when they need it.

It’s extremely common to put a company or publisher logo in the upper part of the screen too. With screen real estate at a premium, you should consider whether this takes up valuable room that could be used for other purposes—including white space.

#2 Title Area

If you think of a screen as a canvas, you’ll see that not every screen requires a title. In storytelling, scenarios and many other contexts, the title area is not a requirement. But if your content does require a title, such as in more technical and didactic approaches to eLearning, then the top or the upper left is a conventional location for it. There’s a reason for this.

When people looks at a screen, their eyes tend to fall on the upper left portion of it. Some research shows, however, that the eyes might initially land on other portions of the screen, particularly those areas with high visual impact or fascinating complexity. Still, I like to think of the upper left as the default important location. That’s why it’s a good place for the title and the location identifier if you choose to use these.

As you know, the title is typically a phrase that summarizes or leads into the key point. But why not use a complete sentence? In his paper, How the Design of Headlines in Presentation Slides Affects Audience Retention, researcher Michael Alley shows that  stating the entire main point in the title area as a complete sentence can increase retention. One reason this is effective is because the title is in a large font, making it extremely noticeable and memorable.

#3 Content Area

The content area is where your interactions, visual media and text reside. The layout and design of the content area can cause a lot of anxiety. And for good reason. When this area is confusing or when it jumps around too much from screen to screen, learners get confused. When the content area stays the same from screen to screen, it becomes boring. Some novelty and creativity are required here, but if you go over the top, you might lose people. It’s stressful.

To facilitate consistency yet allow for creativity, many designers create several templates for different types of screens and use these repeatedly. This provides both repetition and variety. For example, there will be one screen design for video, one for similar interactions, one for a split screen with text and graphics, and one for a screen that has multiple selections.

As you design this area, consider how each screen can encompass only one main point. This gives learners the chance to process the information. Also think about the visual hierarchy, so you can make the most important learning elements be the focus through color and size or other features that provide impact. Finally, try to simplify the content area so it is easy to perceive and understand.

#4 UI Instructions

The user interface instructions help a user perform an action. These instructions, which are part of your microcopy, should always be present because they assist learners in knowing what to do next. When writing these, consider how the words will be understood by your audience. Write clearly, briefly and with precision. There are several conventions for where to place screen instructions. Although you often them at the bottom of the screen, they are also common in the content area, particularly when the instruction is part of the training itself.

#5 Navigation and Controls

If you can control the navigation area of your course, you’ll need to consider the functionality required, where to place the navigation and the design conventions to use. In courses with linear content, navigation bars are typically but not always placed at the bottom of the screen. In cultures that read from left to right, it seems natural to place Next and Back buttons in the bottom right, reflecting how we read and turn a page. Courses with nonlinear content may need nothing more than a pop-up menu, as they do away with the page turning concept. In many cases, the authoring tool defines the location for you.

An Example

Using the functional areas discussed in this article, this example shows a finished screen design for a fictitious course teaching unassuming new cat owners what’s in store for them. All of the functional screen areas are in place. That very important upper left part of the screen was left for the title, to emphasize the point.

The location identifier for this short (and fictitious) course, was delegated to the upper right as it’s not quite as important as the title here, but does help to organize the information. In other courses, like a 10 module course on legal issues, the location identifier as an organizational element would be more  important.

Because the main point is simple, a short but complete sentence for the title works well. The content area is taken over by the selectable cat foods. There’s no text area because I imagined users would hear the cat’s voice as she expressed her complaints upon selecting each food. Finally, the main screen instructions are integrated with the course content so it works to display them in the content area. The “how to continue” instructions and navigation controls are at the bottom, one of several accepted eLearning screen design conventions.

What do you consider when designing a screen? What works and what doesn’t? Leave your comments below.

Related Articles:
User Interface Design for eLearning
The Power of Visual Grouping
Storyboarding the Visuals

Related Posts Plugin for WordPress, Blogger...


  1. Gina Evans says

    Very helpful information-I especially like the idea of a location identifier, and that you identify white space as important! Thanks for the tips.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>