People consume website content:
- By scanning: 79% always scan; only 16% read word-by-word
- By reading in an F-shaped pattern:
- First, along the top of the page, left to right, where the main navigation often is, then
- Down the left-hand margin, where you’ll often find secondary navigation, then
- Half-way across the page, looking at sub-heads and the beginnings of sentences, then
- Information further down the page is even more likely to be skimmed
People scan websites:
- To find things out quickly with minimum effort
- To take action
- To find a solution to a problem
- To browse information
People prefer website content that:
- Gets to the point quickly
- Provides actionable content
- Is written at an 8th-grade level or lower
We write website content:
- To promote hospital services
- To inform patients, potential patients and visitors
- To encourage people to take action
- To keep users on the site and keep them coming back
Web Content Editor Takeaways
When formatting content on our websites, use the following elements for the most effective pages:
- highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
- meaningful sub-headings (not clever ones)
- bulleted lists
- one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)
- the inverted pyramid style, starting with the conclusion
- half the word count (or less) than conventional writing
- As a rule of thumb, the top-most and left-most areas of a page garner the most attention. Higher priority pieces of information should be placed in these areas.
- Keep navigation all the way to the left. This is where people look to find a list of current options.
- Keep the main content a bit further in from the left. The most important stuff should be showcased between one-third and halfway across the page. This is where users focus their attention the most.
- Keep secondary content to the right. It won't be seen as much here, but that's okay — not everything can get top billing, and you need a place to put less-important material.
In the case of website content, maximum receptivity is often when people are done reading a post. Offer a set of related content as cues for the next step. Doing so improves the user experience and translates into improved page views and a boost in your site’s ranking. But remember,
- Keep related links to 5–7 in order to avoid overwhelming users
- Keep the scan path clear between the bottom of the article and the set of related links
Page Length & Scrolling
Users don’t scroll for fun. They scroll for a purpose.
Webpages need to build a solid story. Information foraging theory says that people decide whether to continue along a path (including scrolling path down a page) based on the current content's information scent. In other words, users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.
We encourage people to scroll:
- By giving them good reason to do so
- By adding visual elements that draw the eye down the page
- By providing compelling content to draw the user in
Web Content Editor Takeaways
We must ensure that content on a page is related, relevant, and formatted properly for the web, in order for people to scroll the page.
If the most interesting information is at the top of the page, users may be enticed to visit the bottom of the page as well. When pages of any size offer little content at the top, it is difficult for users to know what else is available on the page. Such designs can create "false floors" that make users think they’ve seen the full page of content.
If you have a long article, it's better to present it as one scrolling canvas than to split it across multiple page views (assuming thecontent is closely related - see accordions). Scrolling beats paging because it's easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article.
When to use:
- They are helpful for users navigating Frequently Asked Question (FAQ) pages.
- If the page is long and has several loosely related pieces of information, users often cannot guess if the information in which they are interested will be found somewhere down the page and they quit before scanning it all. In this case, collapsing the information is a better alternative, because it minimizes excessive scrolling and gives users an overview of the content available on the page.
When to avoid:
- When your audience needs most or all of the content on the page to answer their questions.
- If the page is long and the content is closely related, an accordion is not the appropriate widget. In this case, present the information across several, more digestible pages. However, avoid the temptation to go extreme by cutting up content into short tiny pages.
- The accordion generator code is accessible.
- We discourage the use of videos within accordions.
- We recommend using no more than 4-6 accordion tabs per page.
- Choose a light-weight, simple visual design for the right column—one that matches the content of the site. People are more likely to trust and click on links that look like valuable content than what appears to be irrelevant advertising.
- Important facts sandwiched between brightly colored boxes look like advertising. This information doesn’t have a chance of being read. It’s better to tone down the visual design to create a more balanced visual hierarchy.
- Feature thumbnail images only if they communicate useful information quickly.
Cards are a useful UI component for grouping several related pieces of information together for providing a linked entry point to further details on that content. Cards work especially well in contexts where they provide summaries of many different kinds of content, rather than when simply used as a modern-looking replacement for a list of content.
When to use:
- For collections of heterogeneous items
- When you need to chunk several different (but related) pieces of information into one digestible unit
- For brief information that offers a linked entry point to further details
- To entice users to click through to further details contained on a separate page
- When users are browsing rather than searching for information
When to avoid:
- Card layouts are less scannable than lists. Thus, cards are not appropriate when users search for a specific item from a list or look for a particular piece of content.
- Cards are also a poor choice when users need to compare between multiple options, since cards often aren't structured in a predictable way from item to item
- When presenting very homogenous items (such as a list of similar blog posts, products, or news stories), consider using a standard vertical list of items (or, in certain cases where the items are similar and are all from a narrowly defined category, grids of images) instead of cards to support scannability and also comparisons among items.
- Icons for home, print, and search are the most universally recognized by users
- The majority of other icons continue to be ambiguous to users due to their association with different meanings across various interfaces
- The 3-line "hamburger" icon is an excellent example of an icon that is striving to become universally known. While the majority of interfaces use this icon to represent the main navigation menu, some use the same (or a very similar icon) to stand for a list.
- To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context.
- In general, icons tend to be more salient on mobile phones compared to desktop websites and applications, since there are fewer elements that compete for users’ attention.
Content Consumption & Placement
- How Users Read on the Web
- F-Shaped Pattern For Reading Web Content
- The Fold Manifesto: Why the Page Fold Still Matters
- Related Content Boosts Pageviews, When Done Right
Page Length & Scrolling
Accordions, Cards & Icons
- Accordions Are Not Always the Answer for Complex Content on Desktops
- Cards: UI-Component Definition
- The Anatomy of a List Entry
- Icon Usability
- Fight Against "Right-Rail Blindness"
- Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored
Archiving Web Content
When archiving a page in dotCMS or removing a piece of web content from an existing page, please be sure to archive the web content in addition to the page.