AboveTheFold

MeatballWiki | RecentChanges | Random Page | Indices | Categories

---

The art of selling content is to attract people's attention before they have deeply engaged with the offering, and then from that point to capture their interest enough that they will want to buy access to the rest of the offering. While the general device to do this is called the hook, each MassMedia has its own method. Newspapers in particular organize their layout to put their strongest hooks on the first page, AboveTheFold of the broadsheet. After all, this is the only part of the whole newspaper that is visible to potential customers passing by a newstand.

Web pages have a similar layout restriction, except its position is out of the hands of TheAuthor. The fold, so to speak, is the bottom of the visible part of the window (or screen or whatever). Any text that the user has to scroll to read is below the fold. To get the user to read that text, the text AboveTheFold has to have already grabbed their attention.

Of course, because the size of a window or screen is out of TheAuthor's control and varies greatly by user, the reality is that the fold is very very tight. Very few paragraphs. The earlier a hook is on the screen, the better. Banner ads are counterproductive for this reason: they push the hook below the fold.

Many websites that have time-critical data like CraigsList and Google News have adapted to this problem by cramming the webpages with tons of data. The rational is that users cannot hunt for information they don't know about. News is information they don't already know something about. Consequently, news has to be pushed to the user and arranged so the hottest information is displayed all at once for the user. Note the parallel to newspapers leads to a parallel problem of putting hooks AboveTheFold.

Websites also have a unique problem. Unlike newspapers where only the top half of the first page is AboveTheFold, the FrontPage of any website is AboveTheFold, but so are any of the other vectors into the website. As long as links can bring people to any part of the website, each page on the site has a portion that is AboveTheFold, even if the FrontPage is even more so AboveTheFold. Consequently, while the FrontPage should be well designed to attract readers, every page must also lead readers into the fullness of the site.

Corollary: Links are "below the fold"

As a corollary, putting information behind a link or pop-up puts the information below the fold since it is not immediately visible when loading a page. Thus, don't bury critical information on another page or in some dynamic layout scheme.

---

Example: editing Wiki pages

Unjustified but seemingly true assertion: a high proportion of people will not follow a link to a second page if they don't feel it's strictly necessary for what they are trying to achieve. Wikis mostly avoid that, drawing people in with the lure of pertinent and even crucial information just a link away, but they fail in one place: editing pages. If any part of editing is optional and below the fold, it will be ignored by a large number of users, especially when there is a lot happening and people feel rushed.

Therefore, keep all editing tasks above the fold on a single edit page. Remove any external links page and keep all links within the edit text, replicating the "journal-like" look of external links by allowing links to form an appendix within the text. Remove any sign-in page and move the UserName field to the edit page, remembering the contents between edits with cookies as before. Take the task of annotating edits away from the Wiki:RecentChanges page and add a summary field.

---

Summaries and links to "below the fold" content must compete for this space.

Obviously the amount of space "above the fold" is relatively limited in comparison to the (virtually infinite) space available for the rest of a page. This constraint makes the "above the fold" space rare, enhancing its value. It will also create 'competition' for the use of this resource. Since the objective was (and remains) to appeal to a reader enough to retain sufficient attention and interest that the rest of the page is also appreciated; it makes sense to place the most valuable content "above the fold". This may include;

• Summary information
• (mini) Table(s) of Content(s)
  • Ideally, only a single link to a local anchor where supplemental information is provided (e.g. additional related page references, Calegories, etc.)
• ...

Interesting results of applying these concepts together with a few other wiki capabilities, such as;

• Create a heading called "above the fold" that acts as a visual border for this area.
• Precede this 'border' with a markup, creating a dynamic list of the Contents.
• If your wiki supports TransClusion (ideally within nested tables) make this TOC a cell in a matrix, adding other cells as horizontal space allows, that include additional local anchors and other hyperlinks. (The visual effect is that of a right-hand sideBar).

is that

• Authors become very aware of how they are using the valuable "above the fold" resource.
• Readers are provided with an efficient overview of the 'hidden' areas of the page that help to engage their attention.

---

Browser developments that address the different directions in which various languages are read, are likely to affect these considerations. For example ...

• English is read leftToRight and scrolls topToBottom
• Chinese is read topToBottom and scrolls rightToLeft.

In these two cases, the "aboveTheFold" position switches from the upperLeft corner to the upperRight corner.

Interestingly, all languages (that also recognized arabic numbers) seem to 'read' numbers as ( Ax10^n + Bx10^n-1 + ... Zx10^0 ).

---

CategoryInterfaceDesign

---

MeatballWiki | RecentChanges | Random Page | Indices | Categories
Edit text of this page | View other revisions
Search: