Image from "F-Shaped Pattern For Reading Web Content, by Jakob Nielsen, April 17, 2006" used here under terms described at https://www.nngroup.com/faqs#reprint_image.
[This page was written in the eCampus Text editor and formatted using the toolbar there. The paragraph font is Arial, 14pt, color #333333 dark grey. The first level heading font is Georgia. The pullout color is #993300 dark red. Small text is size 10pt. Image was first loaded to an Images folder in the Content Collection then linked using the toolbar in the Text editor. Line height was edited with the CSS tool to 145%.]
Let's talk about the look and feel of a page online. How you structure and layout the page can make the words easy or difficult to read.
Why should that matter? Isn't the information itself enough? Actually, no.
"The more attractive an item is, the longer people will want look at it."
–Elliot Jay Stocks, author of Sexy Web Design: Creating Interfaces that Work, Sitepoint Publishing, 2009.
True. But our "attractive" has a purpose. It is intended to solve a problem, encourage learning, and provide information. We want our students to read our stuff, don't we? Reality is, though, we get plenty of evidence everyday that our students not only didn't read it, they didn't even look at it.
Marketers know that appearance is an influencing factor. Million$ are pumped into creating a company look and feel with packaging, ads, and whitepapers that cause potential customers to at least take a look. You may not want to judge a book by it's cover, but admit it — you do.
How a web based course appears to the student looking at it for the first time may affect their attitude toward the subject and the instructor for the rest of the semester. Does it look inviting to read? Is it written in language they understand? Does the course feel like an impersonal packaged product or does it feel like there's a real person teaching it? Does it look like the material was just thrown up there, or does is look like the instructor cared enough to take some time to make it "student-friendly?"
Appearance and aesthetics will affect not only legibility and readability, but also usability, accessibility, and — your credibility.
Our focus in this course is on text, not pictures, though you will see some graphics and videos as we go along.
The guidelines I talk about here are research-based best practices. All are intended to draw readers to focus on the most important information on a page. They are part of the industry standards for user experience (UX). Most are also outlined in web standards developed by the World Wide Web Consortium (W3C). They also are a part of appropriate web design practices for people with disabilities and Web Content Accessibility Guidelines (WCAG).
We have students from many backgrounds and cultures who have many different ways of learning*. Despite the differences, they have this in common: they don't read online the same way they read the printed word. They — and I suspect, you — scan text on web pages. I admit, so do I.
The Nielsen Norman Group, an evidence-based user experience (UX) research, training, and consulting concern is one of the most respected in the web design and development field. Their article on eyetracking is one of the most cited among web professionals. Here are images showing what they found.
Viewers stay the longest time in the red areas (top left) and cascade down to about half the page. Yellow indicates less time spent on that section. Blue indicates very little time spent (seconds). So you can see, readers don't spend concentrated time on every word. It's an F-shaped pattern mostly concentrated in the top left corner.
Image from "F-Shaped Pattern For Reading Web Content, by Jakob Nielsen, April 17, 2006" used here under terms described at https://www.nngroup.com/faqs#reprint_image.
Other patterns have been identified, too.
But whatever the pattern, we have some tactics at our disposal that can help readers not get stuck in this pattern and miss vital information. That's what we'll cover throughout this course.
Now use this link to read the whole article on the F-pattern:
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/.
As you go through this course, pay attention to your own reading habits and interactions with a page.
* Learning: “The cognitive process of transforming information and experience into a relatively permanent change in one's skills, knowledge, behaviors, and attitude.” –definition from Instructional Design Guru app by Connie Malamed aka The eLearning Coach.