Whole website doesn't need to be a single page. It's important to realize that there are times when switching the page makes more sense than staying within the page. Think about the conceptual flow and if there is a major change in the flow, a page refresh should occur.

Most used ways to modifying page content:

• Inlays: Instead of going to a new page, new information or actions can be inlaid within the page. Tabs and accordions are the most common inlays.
• Overlays: Instead of going to a new page, a pop-up can be displayed in a lightweight layer over the page. Small overlays are frequently called tooltips.
• Virtual Pages: Extending virtual space by switching the whole content while using animations.

Inlays

Prefer inlines to overlays. Overlays are more heavy and should be kept to minimum, but there are cases where you want to show more content that fits onto the page.

Consider showing inline details on inputs when user is focusing the field. Allows easily simplify the visual of the form. Like showing constraints that are required for the field. Unfocusing the field should hide the inline.

Inlays are best used as page customization. Use to show extra information and secondary tools. Shows the context better than overlays.

Quick slide in animations work best with inlays. Slide it out from the element it relates to.

Use inlays with lists. Instead of requiring the user to navigate to a new page for an item's detail or popping up the information in an overlay, the information can be shown with an inlay in context.

Use accordion if each item is independent. Accordions hide the context apart from the title row. Normally you should allow only one pane open at a time.

Place tabs in the order of access frequency. The first and second tabs are accessed most frequently.

Tabs should always be activated with a click. Not hover.

Avoid showing multiple tab groups in a single page. Interface will become chaotic from all the different visual states.

Overlays

Overlays can be modal or non-modal. A modal overlay requires the user to interact with it before she can return to the application. Always use dialog overlays instead of default browser pop ups.

Avoid using modal overlays. They are intrusive and prevent other actions as long they are on. But web modals are a lot better that popup windows they replaced. Only consider modal overlays if the content requires 100% focus.

• Use tooltips and popovers for simple yes/no confirmations and messages that are pointing to a specific place on the view. E.g. form validation error should be a popover pointing to the label.
• Use inline messages to show interaction feedback. Messages can be embedded in to the already shown view. E.g. when you delete an email, a message will appear on top of the emails: "You deleted email Title. [Undo]".
• Set up a notification area to the lower right that can also be used to notify stuff e.g. Facebook Chat, Windows Notifications.

Modal overlays should always have a lightbox effect. Dim the background when the overlay is shown.

Don't cover up content relevant to the overlay being displayed. If this can happen in a dynamic interface, make overlay draggable or hideable.

Never trigger modal overlays on hover. They should be triggered only on click. Non-modal overlays should be hidden when close when user moves the mouse away from the trigger and the overlay.

Avoid non-symmetrical activation/deactivation. It should take the same amount of effort to dismiss an overlay as it took to open it. If overlay opens on mouse hover, it should close on mouse unhover. If you use modals, close them when users click outside it.

Avoid needless animation. Only use animations to reinforce cognitive model how the interface works. Needless animations will just confuse the user even more by breaking established mental models.

Avoid long animations. Keep your animations snappy, even if they convey how the elements work. User didn't come to the page to look at the animations, they came to consume information or trigger an action.

Use overlays to give a sneak peek at detailed information.

Hover-activated overlays should have a 500ms timer before they are opened. Otherwise interface appears too chaotic and might trap user in a state they didn't want to end up.

Clicking and hover an element may have different actions. For instance, hovering might show more details and clicking might open the content to a new page.

Use click if you will be providing additional links inside an overlay. Trying to keep a hover-activated overlay in place and click a link inside it is difficult.

Place keyboard focus on the first control element on modal popup. Frequently forgotten improvement.

Never use overlay just to sell something. It's intrusive and annoying. The worst is a model popup when you try to leave.

Virtual Pages

Patterns that allow virtual paging include:

• Virtual Scrolling: Endless scrolling mechanic. Scrollbar becomes pagination control e.g. Facebook news feed.
• Inline Paging: Only update a specific area not the whole page. Carousel is the most common inline pagination.
• Virtual Panning: moving through a 2D canvas e.g. Google Maps.
• Zoomable User Interface: zoom in and out in 2D canvas e.g. Google Maps.

Virtual scrolling works great with frequently updated content. Think of Facebook news feed, you can just add more content on the top when user scrolls back up. Don't add new content to the top if user is still scrolling down but you might want to give notification about incoming content.

Virtual scrolling works well with sorted and filtered content. Like search results.

Indicate user positioning when using virtual scrolling. Item count from total count or item numbering.

Avoid having content below the virtual scroll area. Especially when loading more content is triggered by scrolling down. It's very frustrating trying to read the footer on a page with endless scrolling.

Indicate when the virtual scrolling is loading more data. The user can expect a visual change soon.

Virtual scrolling as big performance hit on the server. Users are much more likely to scroll down to see additional content than clicking for it. E.g. Microsoft Live Search had endless scrolling but reverted back to pagination and Google uses pagination to increase amount of ads people see.

Inline paging works best with contents that have specific sections. There is no or very little relation between the items.

Make sure back button works if you use inline paging. Searching multiple times and then going back one time shouldn't bring you to the page before search.

Carousels are the best for dynamic or inspirational content. Like recent news or featured articles. Content that is similar but doesn't have a shared context. Carousels are bad for content that every user should see. A good use case would be recommended products where the first items are more relevant while the following items are less relevant.

If users go back and forth in the carousel, keep arrows close each other. Otherwise keep the previous arrow on the left side and next arrow on the right side.

Show a portion of the next item on carousels to show there is more. Improves discoverability.

Reinforce sliding mental model. Clicking next should slide content from right to left and clicking previous should slide content from right to left.

Virtual panning is rare but useful in these specific cases. Consider allowing panning to continue with some momentum.

Sources

• Designing Web Interfaces, Bill Scott, Theresa Neil