Zipping the new tab page

Quick reference is essential to productivity in the modern age. Yet, most new tab pages (NTP) didn't do a really good job of supporting it. 

Current Google Chrome's NTP (Photo: Google)

Navigation depends a lot on the NTP. A horribly-designed NTP increases cognitive load and interaction costs. Today, after decades of evolving the browser, they've become easy to use and free of distraction. Still, I'm not completely satisfied. NTP are aesthetically pleasing, but other than that, why the huge amount of white space on the NTP? 

That amount of white space is preventing the users to refer to the current website, the current context they are in. Users shouldn't have to go back and forth to remember why they open a new tab in the first place. Replacing that white space with web content is tremendously helpful as it would assist users' working memory while they're navigating through many many sites already.

So here we are. Introducing the compact new tab page.

Let me guide you through the high-fidelity screens of this concept.

This is the normal browsing experience with the current tab selected. You're surfing Twitter just like any other day. The UI is based on the chromium Edge with some modifications to implement a more translucent effect to the design. 

When you click on the "new tab" button, notice how it does not just transform the search bar but the whole toolbar also. Only by clicking on "discard" will navigate you back to page you're currently selected, so you can continue interacting with the content on it. The flexibility expands even more, for example instead of referring to information on the "Home / Twitter" tab, the user might want to refer to information on the "My files - OneDrive" tab. The normal behavior would be for the new tab to disappear, but I tweaked it a little so that it'll stay.

Another feature that I want to highlight is the results that the Omnibox in this specific screen provides. Let me give you an example: while I'm writing this blog post, I might need to take a look back at the other posts I have published here to see how did I format all the stuff. To do that, I need to right-click, duplicate, and go back one page; or I could right-click at the blogger logo, choose "open in new tab". But what if we could shorten this process by only pressing three keys on the keyboard? ("Ctrl+N" and then "Enter"). Imagine how that would drastically cut the interaction costs.

Moving on to the next screen where it is kind of self-explanatory. If where you are heading is nothing related to the current tab you're in, I've got you covered. Users can use a mouse or a keyboard to use this new tab page. 

In the picture above, pressing the downwards arrow key (↓) will move the selector to the "Good morning Tiara" section, and pressing that key again will move it to the "Your activities" section. To select the destination suggested in each section, press the Tab ↹ key.

So that's it for the concept. I'd love to hear feedback from you guys so I can see where I'm lacking and what part of the workflow that this design doesn't support well. I know it has been a long time since the last time I wrote here, it is because that I'm having trouble with exporting some of my "on hold" designs and as well as this piece. I'm also learning motion graphics during this time!