Exploration
Over the course of a month, Block Zero™ has pursued various ideas aimed at re-imagining web navigation for the better, focusing on enabling user journeys that are more delightful, context-preserving and efficient.
A few of these ideas are outlined below.
From comparing products while online shopping to saving articles for later, tabs help us organize our browsing. However, handling a multitude of tabs quickly becomes both inefficient and disjointed.
Tab Knowledge is the concept of same origin tabs knowing about each other and working together. We have explored different ways in which this idea can make navigating the web smoother.
Using tab knowledge, developers can provide users quick access to all open tabs originating from the same source.
This allows webpages to recognize the way tabs are used as temporary storage, and adapt them to display information from each tab in way that fits the context.
Apart from displaying and organizing tabs, websites can utilize the information within them to enable custom actions.
A web shop could let you compare your open products, a news site could let you summarize your open articles and a media site could let you add all your open movies to a list in one go.
Tab Knowledge also opens the door to even more powerful productivity focused web apps, utilizing different views on tabs and windows across multiple displays.
Imagine a patient management system where one screen displays real-time data, while another shows medical records, or a B2B shopping platform showing cart and catalog side by side in different windows, always in sync.
Tab Knowledge could be a achieved by creating an Tabs API built on current technologies such as the tab api for extensions, as well as localstorage. Tabs of the same origin would then be able to share data via a common window object, that continuously stays in sync.
function getDataFromOpenTabs() {
const openTabs = tabsAPI.getOpenTabs();
// Iterate through each open tab and get data
openTabs.forEach(tab => {
const tabData = tabsAPI.requestData(tab.id, 'featuredImageAndPrice');
console.log(`Tab ${tab.id} - Featured Image: ${tabData.featuredImage}, Price: ${tabData.price}`);
});
}
The management of open tabs could be facilitated through something like window.tabAPI.openTabs, providing developers with access to a list of currently open tabs. This functionality could be extended by using window.tabAPI.setPageData({data}), allowing for storage and retrieval of tab-specific information.
The API could also incorporate tab events, such as pageAdded, pageRemoved, and dataChange, enabling tabs to dynamically communicate when changes occur. For organizational clarity, developers would be able to to designate a pageType or tabName to each tab, offering a way to categorize and distinguish between different kinds of tabs, like singleProduct or categoryPage.
Additionally, a new _focus value could be used with the anchor link target attribute in order to move focus to another tab when it is linke from within a sites UI.
<a href="thatTabUrl" target="_focus"/>
<img src="tab.imgUrl" alt="" >
</a>
To validate and visualize the concept, we created a demo showcasing the basic behavior of Tab Knowledge.
Being built with current technologies, the demo aims to reveal both the possibilities of the concept as well as the limitations of the methods available today. In short, it has some quirks. For more information about the methods used, challenges and possibilities, we have put some of our thoughts in a document here.
Open demo
Unlike a social media feed, a website has a clear endpoint – once you scroll to the bottom, it's done.
Page Flow would enable developers to easily transition users to the next logical step when they reach the bottom of the page.
Here is what that could look like, and how it could work.
Sending the user to the next thing without friction would allow for more exploratory content discovery. Bringing open web consumption platforms closer to “scrolling apps”.
A news site can send you to the next article in the story, or a web shop can bring you to a featured product.
Developers might even include functionality to continuously improve suggestions as you go along.
Sometimes, it's not about discovery; it's about sticking to the plan.
Think of an online course with lessons or a step-by-step onboarding process. In these scenarios, users could seamlessly scroll into the next step, keeping some elements in place to preserve context.
By combining Tab Knowledge and Page Flow, a website could let users smoothly scroll into their next open tab from the same origin. It's would be like a temporary reading list local to the each site.
On mobile, devs might even let you swipe through tabs, skipping the need for scrolling all the way to the bottom.
In its simplest form, this concept could work by utilizing basic meta tags, highlighting the previous/next pages connected to the current page. The browser then sets a default behavior for transitioning from one page to the next. If they choose, developers might override the default transition and create their own.
<meta key="canonical previous" value="/red-teddybear" />
<meta key="canonical next" value="/blue-teddybear" />
<meta key="canonical transition" value="scroll" />
This hinges on the next url being of the same origin, otherwise injection attacks could send the user to malicious sites instead.
MoreThe third meta tag, referencing “canonical transition” plays into the idea of progressive enhancements. Adding a canonical next/previous connection has values beyond scrolling and navigating (SEO/prefetching data), that might want to be used.
Consider WordPress, which already has a well-established previous/next behavior and might be very quick to add support for these meta-elements. If this were just added automatically in the browser, then it would simply break patterns that users already well trained in.
Rather than having to opt out of this transitional behavior if it is used, strictly enabling that “I'm fine with the browser dealing with the transition” would likely be better received overall. With some additional standard behaviors based on the value one could imagine the browser could help with different styles of this.
<!-- Automatically load next when scrolling to the bottom -->
<meta key="canonical transition" value="scroll" />
<!-- Automatically add a button at the bottom to load next -->
<meta key="canonical transition" value="button" />
<!-- Automatically load next and insert next page when scrolling to the bottom -->
<meta key="canonical transition" value="continuous" />
The browser itself decides on how this transition, if any, is handled. This could, of course, lead to perhaps unwanted behavior from the developer's side. Perhaps they want to use these tags for indexing purposes only or add their own buttons, so one could imagine perhaps some extended events. This would also allow developers to tap into this behavior to override or for analytical purposes (and probably more).
window.addEventListener(‘transition:next’, (ev) => {
ev.preventDefault();
analytics.event(‘scroll counter’, 1)
document.startTransition(() => { /* Do your own ViewTransition */ })
})
Over the course of the project, a variety of smaller concepts naturally emerged. While not as expansive as the two main ideas, their potential positive impact led us to embrace and incorporate them.
How could we provide a comprehensive navigation overview to power users?
Using a tab of tabs with different grouping methods to help users contextualize:
Alternatively, the same groupings could be displayed in the current Chrome side-panel under “My tabs” in the dropdown menu.
This would give a quick overview of all the opened tabs and enabling bulk actions like closing a tab tree, adding to the reading list, etc.
Link previews are already commonly in use on various websites. They come handy for quickly identifying useful pages and information.
If developers could easily implement this feature where it makes sense, it might see wider adoption, benefiting users.
Current examples from Netflix and Wikipedia; both displaying stylized previews when hovering an item / a link.
Previews could either be made a browser feature by having a small trigger appear next to links.
Alternatively, as a web platform feature, link previews could be part of an api that lets pages specify preview content (e.g. img + short description). This could be coupled with a nested preview element within anchor tags.
On target page
<meta name=”preview-description” content=”Lorem ipsum dolor”>
<meta name=”preview-img” src=”https://imgUrl.com”>
Linking to target page
<a href=”targetPageUrl”>
link text
<preview />
</a>
Most modern browsers support dragging any link, but there is not much you can do from there.
Exploring different ways to simplify link interactions sparked the concept of Drop Zones for both Desktop and Mobile.
Doing the most common actions with links is not always straightforward, as context menus have become crowded with items, fighting for space.
Using Drop Zones, dragging a link would open a zone-based context menu with the most common actions. This menu does not interfere with or replace the right-click menu; it just makes the basic stuff quicker.
Going further, users could customize their drop zones to change the actions and include more or fewer zones.
Block Zero™ an international design, technology and innovation studio.
We collaborate with our clients to envision the future and define their role within it.
Learn more at blockzero.se.