Screen Real Estate for Online Learning
What is Screen Real Estate?
Whenever you visit a website, either on your phone, tablet or PC, there are certain things you’ll see first that grab your attention. Screen Real Estate refers to the space you as the designer have have to work in, especially related to the front page of a site, before the user starts scrolling. Of course, if the content gets cut off, most users and learners will figure out that they can scroll to see more content, but what lies below the first screen is typically unknown, which is why it’s very important to consider how you use screen real estate to give your learners information.
Let’s have a look at an example and what elements it contains.
Above you can see a class setup with a typical theme in Moodle. Of course other Virtual Learning Environments (VLEs, otherwise known as LMSs)will have a different theme and setup, but for the purposes of this examination, it would be good to use a free, and open source product that is in use in many institutions worldwide. So let’s have a look…
- Top Navigation Bar
- Class Name
- Breadcrumb Navigation — for navigating within the class
- Blocks (present on both sides as well)-these present lots of different kinds of information, from links, images, polls and other content, but are typically static across all content / assignment pages
- Dashboard link — in this instance, I have no idea why it’s there.
- Banner — banners are very common in order to show a visual similarity for classes within the same program. If you have many programs at one school, then banners have typically been a way to differentiate, so students can easily tell what department’s class they’re in.
- Class content.
So, for a 1280 x 720 screengrab, only 600 x 299 of that is for the class content, or approximately 15% of the screen. This is what we want to avoid, because students come to an online space for learning, and showing them a whole bunch of information that is not completely relevant to the content or tasks of their class would fail Usability 101.
Pedagogical Goals
When teaching online classes, you want to make sure that the latest information is presented to your students on the first page they see realted to their online learning experience. This may be the VLE dashboard, or it might be the course you’re teaching. Depending on the VLE, you may be able to push out updates to the dashboard so students know exactly what to work on when you want them to work on it.
If you can’t, then it’s important that this be the first thing they see when visiting your course. So what is meant by the ‘latest information’? Well, this could just be what you did last weekend or what kind of coffee you had that morning, but no, this should be something about the course that your students will care about, or not so much care about, but be invested in.
A good strategy for this up-to-date information is a To do List. For example, a bit of text at the top of the course that simply says “What to work on this week: [insert bullet points here]”. You can also provide feedback on ongoing discussions and reminders about upcoming due dates. Remember to put the date on this content, as if it is a blog post, because if you don’t your learners will probably just think it’s the same thing as last week (if your posts look visually similar), and skip over it.
A really good strategy, if your VLE allows it, is to record a quick 2–3 minute video doing the above, but with to do lists and due dates presented in text, for easy referral later.
Doing this will keep your students on task, and let them know that you’re actually in the online class and updating content based on their specific contributions.
With these benchmarks in mind, let’s take a look at the visual behind different real-estate no no’s in online learning.
Landing Pages
A landing page is the first page your students will see. Sometimes it will simply be a ‘Welcome to Math 100’ with a fancy image of graph paper or something.
In this example above, we see a landing page showing a banner with a video embedded that welcomes the students to the class. In many instances, this video stays there for the entirety of the semester, never changing, essentially welcoming them to a class that started weeks and weeks ago. When students visit this, they can’t see that anything in the class has changed, so they may just leave, and that’s what we’re trying to avoid.
Welcome videos are a great thing to add because they help to create a sense of community within a class, and add a personal touch from the instructor to let the students know that they’re a real person, so by all means use them, but after the first week or so, hide or move the welcome video to an ‘archived’ section of the class, so students can watch it if they want to, but won’t get annoyed seeing it in week 8 of the class.
Banners
In the above screens, you see 2 different coloured banners, identifying the particular program each class is in. This is problematic because the class name is actually presented in a third color and is identical in both classes, which doesn’t bode well for reinforcing consistency, which plays an important role in helping students to navigate. In addition, these banners take up a lot of space that could be used for more relevant information to the class itself.
So what can be done here?
- Trust that students know what class they’re in based on the title of the class. Seems kinda crazy I know.
- Remove either the banner or the title bar
- Use themes to differentiate schools or departments. A word of caution, if the themes change too much, students may get confused and think they have visited the wrong institution entirely, so keep your branding consistent while still devoting enough real estate for class content.
Long Pages
In some VLEs / LMSs, the only way to present lots of content is in a huge long page, which can take minutes and minutes to scroll. Obviously, this is a terrible idea. Information, especially related to the structure of a class should be broken up in easy to navigate chunks. No SUPER easy to navigate chunks. If your students have to scroll more than a full screen below the initial screen to get to content or different parts of the site, rethink the design of your class. Many VLE’s have sidebar or tab options that allow for quick navigation between sections or weeks of a class, which avoids all content for a class presented on the same page.
The other bad thing about long pages is loading times. If you embed pictures, videos or other multimedia content within one huge long page, this content needs to load every time the student looks at it, when they may only need access to 5% of the content for any given module or week. This is another reason to use the VLE’s functionality to break up content.
Learning
The examples presented above are by no means exhaustive. There are many aspects of Screen Real Estate, Learning Interface Design and Usability that can be honed within the design of an online class and within a VLE. Redundant, dead or empty links within a course should also be addressed, but the key lesson here is to consider the assumption that an Online class is a place of learning.
In your physical classroom, you wouldn’t have a door that led nowhere, or you wouldn’t put a projection TV on the wall constantly showing a sports game, so don’t do this online. Reduce the unnecessary visual distractions and focus on what students need to do, whether it be reading, watching a video, working together or completing a specific task, because if they can’t SEE what they’re supposed to be doing, the won’t KNOW what they’re supposed to be doing.
