Fast Clip UX Design: Rearranging the Viewport: Ways to access and navigate page sections with inner elements

As part of navigating in a story line, an user may encounter a certain event bringing an act — and act that brings its own scenes. For this act to become a meaningful experience to the user, it needs to make adjustments, such as adjusts to the layout, possibly involving tools and resources, therefore enabling its sequence of scenes to be navigated by the user. From a macro perspective is like a detour that the user does for enjoying certain scenes while she should be able to continue the main journey — when the detour ends or via a shortcut to leave.

Main Canvas Linear Traversal and Section Traversal for sub-elements

Before we dive in proposed solutions, let’s consider for cases where adaptation of the user screen is perceived by the Web user.

— Web Parallax Effect

The web parallax effect consists of allowing the user to scroll a page freely. By convention, the scroll is vertical, towards the bottom. When certain elements are brought into the viewport (the browser’s visible portion), at certain stages of appearance, the parallax engine is responsible for triggering events, such as bringing an animation, adjusting elements, and more.

Section slides

“Full page” effects also relates in a way to the parallax in the sense that they are perceived as the user moves down. A “full page” effect creates what is perceived as a slide to the user, therefore it rearranges the next section element (the one coming in a given scrolling situation) to fit the whole page.

Self-contained fixed iframe

This is simply the use of the Web old iframe in order to bring a viewable area within the course of the parent page — the larger page with many inline elements. With that, it’s possible to lookup at other page resources in a self-contained viewport. This viewport does not need to be managed by the parent container — while it could if the inner document uses post message to communicate with the parent. The effect to the user is like a window, fixed in reference to the scrollable page, to an outside world. If the user continues to scroll it usually scrolls up to the end of the iframe and when no scroll is possible then the parent page continues to scroll.

Sticky element — assisting the user to enjoy the currently viewable content

A stick bar, like a sticky sidebar, is an element that sticks around when the user is passing by certain elements such as subelements arranged in the same group. So, as she scrolls down the page she may stumble across a section that engages a sidebar that persists around as she scroll down up to a point where the bar is allowed to stick to the background pane, therefore going away.

In essence, the stick element is exactly purposed to place a header element that relates to sub-items, driven by the scroll position; meaning that the user is driving the scroll based in the subelements of the section.

• On the pro, the sticky element follows while the user navigates the section.
• It also ends when the session ends — stops at the bottom of the parent container.

Popup footer — yet it persists around for the whole page

I have seen a recent increase of popup footers when navigating online — many of them being about cookie policies. But they can also appear in other cases. In the following example you will see an audio player that persists.

Pro: The popup footer implementation is simple, it requires the “row” elements to be arranged using 100% of the page height.

On the Pro/Con, the user can’t scroll the page scrolling over the footer element — because the element eats the scroll events and of course the footer is not scrollable. Because of that it seems to be interesting for tiny bars like the permanent player bar.

Analysis

An inline element managing display of its inner content

An example of this is a gallery component that can appear at a given section in the course of the main scrollable page. This is in a way similar to the iframe case: it’s inline. The scrolling on top of it, however would likely to cause the parent page to scroll, so the user would seamlessly leave the component view.

Pro: it’s inline, so the user understand what it means to navigate the element in relation to the parent larger canvas. It’s self-contained.

Pro/Con: when it’s time to navigate within elements, the mechanism for traversing can be different from the main page. An example would be a horizontal navigation that only applies at a given slide-section, one of many vertically displayed. So the user goes from Y-navigation to X-navigation.