The new Yandex.Disk interface. How did we do it and why did we do it at all

    Today Yandex.Disk has completely updated its web interface . Moreover, he received not only a new appearance - he changed the concept and logic that stand behind him. Moreover, many parts of this are the beginning of important changes for Yandex interfaces in general. We are moving to cease being an assembly of different sites under one logo, and to some extent become a single web application.

    In the first version of Yandex.Disk, the logic of its web interface was not much different from that used by other cloud storages: these were the same folders and files, but inside our Mail. Now the content and its presentation is important.

    image

    My name is Sergey Tomilov, I was one of those who worked on the new design. Today I want to tell you about how the work went, what difficulties we had, what the concept behind all this was, and how it influenced the design.

    Concept


    Today, many people, not even the most advanced ones, often have several devices on which they open the same services. Their technical implementation for laptops, tablets or smartphones may be different, but the meaning remains the same. And what people are dealing with is less and less files and formats, and more and more - content. You store not just files in .jpg, .epub and .mp3, but photos, books and music. And on every device, they will be photographs, books and music.

    Therefore, it is already clear that in cloud storage, ordinary people do not want to work with the file structure, but with the content. They need help building a structure for their content. Of course, we are not the first and not the only ones to come up with this. For example, in iOS, everything captured on the camera itself is laid out by album with video and photo, by year and place. Although it is simultaneously stored in the general stream.



    So we came to the formulation of our idea. We do not want the Disc to be a combine that mixes everything into one entity. It should help a person to structure the content and be able to work with any of its types, like an application. But formulating a concept is one thing, and implementing everything in a beautiful and convenient interface is another.

    Process


    Now I want to talk about which way we went. Redesign is the first step to a new Drive. Work on it has been going on for almost a year. We tried different options, conducted experiments, rolled beta to Yandex employees. We tried to facilitate the interface, focusing on the most important.

    First of all, Disk has already grown from the Yandex.Mail subsection. It was time to make a full service out of it.

    image

    The idea of ​​content division appeared already then, but, to be honest, vaguely. And it is noticeable that she will be cramped in such a design, and we plan to develop it for a long time. It is necessary to create an interface in which growth points will immediately be laid. By the way, the concept of the right panel with the properties of the selected object appeared immediately and reached the final.

    image

    It is difficult to overestimate the importance of full-text search on a Disk containing several hundred files, so we took a prominent place for it. He moved to his usual place - in the header of the service.

    image

    The crushing of the interface into parts turned out to be too strong, and the search bar attracted too much attention. But Disk has already begun to look like an application (especially on tablets), and at the bottom there is a panel of content slices that we have in our plans and which I will discuss below.

    The panel on the right began to contain all the basic features of actions with files and got a place for large previews. The duplication of buttons above and below disappeared - all of them fit on it. I also simplified the creation of public links - you can now share the file immediately after downloading it. To send a link to a social network, you do not need to make two clicks - immediately click on the icon of the desired social network.

    image

    In the first versions of the preview of the pictures in the folders themselves, I wanted to make them proportional, but then I decided to simplify the life for everyone, and they became square.

    image

    While working on how different types of content will be presented on the web, it was necessary to remember various important points. For example, a leaflet of images should switch between them by clicking on the image itself - the way users are used to it on sites. And the disappearance of the viewing window should not be a surprise for a person - it should be closed easily and clearly.

    Along with the design change, we tried to integrate all the actions that are familiar to the user in the OS into Drive interfaces. You can upload and move files by simply dragging and dropping to the desired folder. To make it more convenient to drag and drop, we added a folder tree on the right.

    image

    Also in the web interface of Drive appeared group operations. To select several objects, you can use the standard keyboard shortcuts: shift +, ctrl (cmd) +.

    Having rolled beta to Yandex employees, we practically did not receive any negative feedback. But unexpectedly, part of our colleagues really did not like the folder icon, the third one in the picture.

    image

    There were a lot of such comments: “THIS FOLDER CUTS ME EYES”, “This is Windows 3.1”, “Oh, what a misfortune”. The folder and the truth in a live product was too detailed and has undergone further modifications. The most noticeable you see.

    But in addition to this, we received from our colleagues a large number of reviews, which allowed us to finish a lot of things for the public launch. For example, I believed that people interact with the Drive website, like with any familiar site - that is, a set of web pages with links. But we looked at the numbers and were surprised that people really use the disk according to the rules of the OS. With the internal test, we found a serious omission in the design. In its old version there was a tree of folders and people moved them. So there was a tree for moving files and the ability to delete files and folders by dragging them onto the word "Trash" in the navigation bar.

    Further steps


    In fact, the story that in order to solve the problems of people needs to structure information and content is not new for Yandex. For almost 17 years, our search has been finding, ranking and showing people what they are looking for. And he does it so that it is convenient for them to navigate in the found. Yandex is one of those companies in the world that can find answers to his questions for a person. And these are not html pages or even sites, but addresses, news, images, objects on maps, recipes, etc. All this knowledge and understanding of people will find application in the new Drive.

    Firstly, it concerns the structuring of objects. To do this, we decided to create content slices in Drive that will determine their type, structure and launch them for each of our web applications, depending on it. That is, photos receive large previews, music - a player, archives - a structure in which you can work with familiar folders, video files - a player that allows you to view the object directly on the web. The first content slices to appear in the future for the most popular type of object - photographs.

    Also, the filtering of folders and files by some common signs has changed in Drive. For example, you can go to shared folders, public links, attachments from Mail. We have just begun work in this direction and will move on.

    This logic of work already applies to the Yandex.Disk client. For example, you take screenshots, and they are added to the “Screenshots” folder; connect the camera or phone, and photos are sent to the Camera folder.

    Secondly, the global connectivity of Drive with Yandex will develop. Already, objects from it can be attached to letters in Y. Mail, you can listen to the added songs in the Y. Music application, save albums from Y. Fotok into it. In addition, Drive technologies provide synchronization in our Browser, whose users can immediately save from it directly to their "cloud". And there will be even more such ties.

    Not everything is implemented now. The experiments are not over yet. For example, even now we are rolling out a new interface in two different versions: in one of them, navigation by type of object will be at the top, in the other at the bottom. Inside the team, not everyone believes in the survival of the bottom black panel, so we decided to conduct an experiment. In just a couple of weeks after the first results, we will transform the Disk. And it seems I can show how it will be in the near future (everyone likes pictures from the future).

    image

    But in the end, a lot can change. We have just begun work on updating Yandex.Disk, but we think that it is better to see the reaction of people earlier in order to make the service the way they need it.

    Also popular now: