Designing Web Interfaces

Chapter 7. Virtual Pages

Overlays allow you to bring additional interactions or content in a layer above the current page. Inlays allow you to do this within the page itself. However, another powerful approach to keeping users engaged on the current page is to create a virtual page. That is to say, we create the illusion of a larger virtual page.

Tip

Think of the interface as a children’s pop-up book. Additional real estate can be called on as needed to extend the interface.

Patterns that support virtual pages include:

• Virtual Scrolling

• Inline Paging

• Scrolled Paging

• Panning

• Zoomable User Interface

Virtual Scrolling

The traditional Web is defined by the “page.” In practically every implementation of websites (for about the first 10 years of the Web’s existence) pagination was the key way to get to additional content. Of course, websites could preload data and allow the user to scroll through it. However, this process led to long delays in loading the page. So most sites kept it simple: go fetch 10 items and display them as a page and let the user request the next page of content. Each fetch resulted in a page refresh.

The classic example of this is Google Search. Each page shows 10 results. Moving through the content uses the now-famous Google pagination control (Figure 7-1).

Figure 7-1. The now-famous Google pagination control illustrates the most common way to move through data on the Web

Another ...