The future [lack] of browser interfaces from Yandex

    Yandex has just taken an important step, which, we hope, brings us closer to the future of browsers and how the interfaces through which we interact with the Internet will look. We introduced a new alpha version of Yandex.Browser, which is essentially a new approach to browser interfaces.



    My name is Gene Lokhtin. In Yandex, I am responsible for designing the interface of the new Browser, and especially for Habr I want to tell now why we came to such a new interface and what difficulties we managed to overcome on the way. Inside, for the new browser, we used the code name “Cousteau” (I’ll explain why below). So sometimes I will use it in the text.

    It all started back in 2012 with a question that many browser authors ask themselves: how to make the interface take up less space and leave it to sites? The question seems simple. And the first ideas of the answers to it are also simple. Someone removes tabs in the window title, someone - extension icons for the address bar.

    But no one has yet proposed such a radical solution as we are. It took several years to come to him and solve all the problems that it poses. After all, this is not only the removal of the framework. It is necessary that the browser is convenient to use. Inside “Cousteau” there are many new interface solutions that we have been working on for a long time and which have been tested for a long time. So.



    I'll start with a few words about the name. A detail of the new browser that catches your eye first is animated backgrounds with looped videos. At the very first of them were bushes swaying in the wind. And that’s exactly how everything inside started to call the new product first. However, as our initial idea developed, improved and changed, we were offended that the name reflects only the most superficial look. Therefore, we came up with a new name, consonant with the past, but better reflecting the inner meaning of what we did. And they called the Cousteau project - in honor of the famous scientist, researcher and traveler. The browser is a window into the world, the framework of which we decided not just to push, but to erase.



    Over the past decades, the Internet has changed dramatically. The number of domains grew exponentially, and the sites themselves turned from simple html-pages with text, hyperlinks and rare pictures into full-fledged web applications with sophisticated infrastructure. Sites now are not only pages with information, but also graphic editors, office suites, music players, social networks, online cinemas - such programs become crowded in modern browsers.

    And what happened to the browser all this time? Tabs appeared, greatly simplifying the work on the network. A universal address and search bar was invented, proving that search is an integral part of the Internet. In all other respects, a modern browser is the same program for loading pages with a massive gray interface dominating the content.

    The creators of browsers have made attempts to make the interface less noticeable before. But all steps were taken gradually and no major changes in this program occurred. Safari has recently had transparency, but as a design tool, the interface is still gray. Some examples of “hidden interfaces” can be found among video players. Remember what Quicktime.app looks like when playing a video.



    Or iA Writer text editor:



    No one tried to make the browser interface literally invisible as its most important property. The browser has become essentially the main program in the operating system. Many users do not leave it at all most of the time, solving all their tasks using web applications. It was on the use of sites as applications that emphasized Opera, creating Coast. But application sites are also the reality of the desktop with which no one has yet reconciled it.

    So maybe it's time to look at a familiar instrument differently? It would be nice for the browser, as a program for viewing web pages, to go back in time.

    It was these reflections that ultimately led our team to abandon the familiar forms and create a new Yandex.Browser that combines a minimalistic interface and recognition of sites as applications. But we didn’t get it right away.

    First idea


    Roma Voronezh has long paid attention to how websites look in modern browsers - striped.



    This is the browser into which the attacker uploaded Facebook:



    But in fact, the browser is the window behind which we see the Internet. Remember the old massive windows with a wide frame, and then look at the modern ones.



    The first thing that may come to your head when searching for the answer to this question is the idea to completely abandon any browser elements when viewing the site. The browser interface might become visible when essential. In a similar way, progress has been made with cell phones, depriving them of an analog keyboard in favor of the screen.

    Imagine a window without frames and panels, the entire available area of ​​which would be reserved for the content of the page, and the browser interface would appear if necessary (for example, when the mouse cursor approaches the screen border). Once upon a time we imagined it like this:



    Such a radical idea did not last very long. In any case, the browser window should contain system elements for closing and minimizing. It does not make sense to place such buttons on top of the site just because it will spoil the appearance of the page, and the buttons themselves will be difficult to find visually. If you dig deeper, it turns out that the main menu button should not be hidden. We would be happy to hide a “sandwich” in the context menu or come up with a pop-up option, but our experience in researching user behavior has shown that such a button just needs to be not just in the same place, but always in sight. Otherwise, there is a high risk that most users simply will never know about the opportunities that lie behind it. Add to this the title of the site, which now hides all the other tools for working with the page.

    The browser header is not the only thing that should have remained in sight. The idea of ​​the tabs was so good that abandoning them is now almost impossible. And we tried. But just each of our options as a result turned out to be another reincarnation of all the same tabs. You can find more details and some examples of earlier options below, and now we will show one of the first drawings of the new browser: It

    remains to understand how to enter the necessary interface into the new browser, but at the same time avoid returning the gray panels.

    Transparent browser


    The very idea of ​​transparency has existed in one form or another for many years. Remember the Aero interface on Windows. It would seem a simple and obvious solution. But using it, we are faced with a number of difficulties that may have prevented all browser creators from turning gray panels into transparent panels.

    Realizing transparency was not difficult. We take the page content hiding behind the interface and apply several effects to it, including Gaussian blur.



    When creating the new Yandex.Browser, from the very beginning we started from the idea that content is above all, therefore no interface should hang over it. And transparent panels are still transparent panels. Of course, they are visually not a rigid structure of the browser itself and allow blurring the boundaries between the site and the interface. But the interface does not disappear from this.



    It was necessary to work on a hat. The browser should be part of the page according to the sensations, painted in the average color of the pixels closest to itself and complementing it with a light tinted reflection. The border between the site and the interface has disappeared.



    It was difficult to figure out exactly how transparency should work in the header, if it is at the very beginning of the page. We refused immediately the option to overlay the header on the first lines of the site - the browser should not overlap the content of the page. The next attempt was the idea to take the colors of the pixels closest to the header and imitate transparency on this base. It turned out something like this:



    Not a bad option, but it is striking that the native interface of the Twitter service was visually distorted. They began to look for other options. For example, they took the color not of the nearest pixels, but the background of the page. Here's how it began to look on Facebook:



    No content distortion, but still looks artificial. Perhaps, we will skip our further torment with the selection of colors and their combinations and immediately proceed to the currently relevant option. Probably no one will even remember when the idea was proposed to use not the colors of the pixels, but to take full-fledged reflections of the content closest to the header. A bit of magic turned out to be such a current option:



    Resources with a background video look especially spectacular:



    We will not call it the final version. Work on browser transparency is still ongoing, and the end result may already be completely different. We also decided to give webmasters a special tool with which you can control the color and transparency of the panels. For example, the beta version of our Maps now looks like this:



    When you download Cousteau, you can still look at tigran.ru/panorama , where tigran , one of Yandex’s direction managers, uploads panoramas shot from the air. You can also try the transparency mode on your site. For this we have prepared a special API .

    Application Tabs


    In almost all modern browsers, tabs look the same. Favorites, page titles, and a massive add-in around it all. The main and most noticeable in this situation is the browser, not the sites. We add to this that tabs are still just a collection of documents that are not interconnected, instead of personifying running web applications and making it easier for the user to work with them.



    In an attempt to get rid of the redundant interface, but at the same time maintain and develop the ability to switch between sites, we turned to the experience of the Scoreboard. If you've seen Yandex.Browser at least once, then you know that the Scoreboard is such visual bookmarks that simplify access to your favorite and frequently visited sites. There is nothing superfluous around - only links to sites designed in such a way as to quickly find with your eyes the right resource: in the form of logos, and not small screenshots of sites.



    A few sketches and now our tabs began to look like widgets in the Scoreboard. And if the sites in the tabs and in the Scoreboard began to look the same, then why not combine these entities into a single whole? And so they did. At the same time, we moved them to the bottom of the screen in the image and likeness of the panel of running applications in Windows or Mac OS X. As a result, at some point the tabs looked like this:



    After a while, we moved the button to create a new tab to the very corner window. They wanted to finally rid the tabs of interface excesses at least next to them.



    But only the very first studies on living people showed that the button in the corner is much more difficult to find than its own, but next to the tabs. I had to return to the previous version. Where the big problem was that open tabs were very difficult to distinguish from unopened (i.e. from widgets of the former Scoreboard). Whatever label we invented, volunteer researchers continued to experience discomfort. We add to this that the Scoreboard widgets, which formed the basis for the appearance of the new tabs, initially could not be called miniature enough. These disadvantages ultimately led us to decide to abandon the merging of Scoreboards and tabs. The panel again returned to almost the same place, and the tabs began to decrease in size.



    Now our tabs look like this:



    Notice the three dots at the Movie Search tab. This is a grouping indicator. If sites are not just pages, but web applications, then why not add a grouping by domain so that users can clearly see the running services on the tab bar, rather than a mess of documents. It is enough to click on a group to reveal it. At the same time, the pages of one site are presented in the same color, so as not only to simplify the visual search, but also to preserve the logic of working with applications.



    Wrong side


    Yandex has vast search knowledge that could find its place in the new Yandex.Browser. We could collect this information and offer it in a convenient format to the user, as an extended form of data on the page currently being viewed. And work on this began even before the start of designing a new browser. By some miracle, even a photograph with a sketch on the wall in the meeting room was preserved:



    This sketch, of course, was embodied in the prototype, which we called the Phenomenon:



    And not even one. Here is a particularly original version using the bookmark menu:



    And who knows, what other exotic options could we see if not for the idea of ​​creating a new transparent browser. The transparent thin interface left us no options but to add a new layer to the browser on top of the site you are viewing. And so the Inside appeared - a special mode that contains not only the Smart line, Scoreboard and everything else, from which we cleared the interface, but also the legacy of the Phenomenon in the form of recommendations and extended information on the site. You can get to the Inside out by clicking on the page title:



    By the way, note that the screenshot above shows the headers from two different operating systems. We wanted our browser to look the same even on different systems.

    The wrong side is not a new window, but a layer on top of an open page. In this mode, you can perform the usual actions with the page, for example, edit its address, add to bookmarks or in the Scoreboard. In addition, at the bottom of the Inside Out contains extensive information related to the site. For example, links to similar resources, a better offer for a product or a map with an address.



    Work on the wrong side continues. There will be more varieties of contextual information in the future, and the regime itself may change.

    Rich search


    The wrong side is not our only area in the framework of integration with search technologies. You already know that our Smart line has a number of features. For example, it knows how to answer simple questions right in the tips. Hints are, in general, a very convenient way to interact with a user who receives the necessary information without directly going to the search service. Work on search answers in tooltips has been going on since we were preparing the very first version of Yandex.Browser. Here, for example, is the earliest sketch:



    In the current alpha version of the new Yandex.Browser, you can notice the appearance of rich answers that already contain not only text or icons, but text fragments, pictures and quick links to resource subpages.



    In the plans for the near future we have other innovations. For example, the ability to receive advanced information through a simple selection of words on the page. Here is one example:



    New animated tab


    And in conclusion, we will briefly talk about perhaps the most spectacular feature of alpha.
    A new tab in Yandex.Browser could be personalized at the expense of backgrounds before. But the statics can not be compared with the warm tube video, which is now supported in the browser. Living landscape, a fragment of beautiful local nature, laid in a 15-second loop. Words can’t convey it - we watch the video:



    We approached the selection of clips seriously. Our design team shot them in various parts of Russia: on Lake Baikal, in the Sayan Mountains, in the Elbrus region. Optionally, you can always turn off the animation.



    Today we shared with you our thoughts and early assembly, which can be downloaded at browser.yandex.ru/future. I would like to repeat once again that this is still only alpha (but it can be safely installed in parallel with the current version of Yandex.Browser). Your feedback can influence her fate quite a lot and help us. For example, we are very interested to know the opinion of the Habrahabr audience about the idea of ​​creating a special “developer mode” in the new browser, the inclusion of which would return some familiar elements (as an option, displaying the website address in the header). We have a lot of work ahead, and the new browser itself should not be expected before next year. Share your feedback and ideas with us?




    Also popular now: