Immediate redesign of mobile applications and iOS. The first concepts for appearance updates were published on the official VKontakte blog, in which, among other things, Knyazev also spoke about the work of designers in the company.
The tabbar will again appear in clients and iOS - a single navigation bar with tabs at the bottom of the screen, covering the main functionality. By the way, the designers of the social network abandoned it in 2012. In the new design vision, the tabbar includes the main sections of VKontakte: “News”, “Search and Recommendations”, “Messages”, “Notifications” and the user menu. The side menu, judging by the published screenshots, will be completely removed in the application redesign.
In addition to a radically new user interface, VKontakte designers will add several functional innovations with the upcoming update of the appearance. In the “Search and Recommendations” section, rectangular stories from nearby users will appear, as well as a feed of potentially interesting posts from new authors. The leading designer of VKontakte describes the new section as “such a sticky thing where you can find something of high quality and unfamiliar, taking into account personal preferences.” A views counter will be added to the news feed (currently it is only displayed when opening a post), and likes will turn red.
When will the updated ones come out?
Runet is poor in reviews of redesigns of well-known sites and services. This article is not about fixing that. My goal is to discuss with the community a solution to one of the problems of the VKontakte web version.
In last year's competition for the redesign of VK, the authors of the competition mentioned the problems of the web version. They named the narrow width of the site as the number one problem. I agree with the VKontakte team and decided to build my own solution to combat this problem.
Pain
Problem #1 - Narrow screen
In addition to screen width, I identified 2 more problems.
Problem #2 - Different style of the web version and applications
Problem #3 - Messenger
Messenger appeared on VK relatively recently. Its first version was noticeably out of style, and over time this was resolved. The main problem of the messenger, in my opinion, is that it lives in parallel with the site. The correspondence window is small. And although it is scalable, it is tied to absolute coordinates - it is not convenient to use the service. On Facebook, the messenger also lives separately from the site, creating many small correspondence windows.
Theory - ways to become wider
Let's first decide what a narrow screen is. The current width of the VK is 791pcs. The competition task said to adapt the site to a resolution of 1024pk. As I see it, the solution to the problem of a narrow screen will be an interface that works at a resolution of 1024-1600pcs. That is, the interface is capable of working both at a narrow (1024pk) resolution and at a wide one (1440+pk).1. Physical stretching
The solution is straightforward - we make the site rubber.
Pros:
+ Easy to implement
Minuses:
− Content becomes unreadable
− It is necessary to completely revise some sections of the site (for example, friends)
2. Parallel presentation
The technique was seen in iA's 2006 Facebook redesign concept - comments are located to the right of posts. 5 years ago I tried it on one of my projects.
Pros:
+ Posts are arranged linearly, without being interrupted by comments
+ Comments on posts are visible immediately without additional transitions
Minuses:
− Uneven density of information on the screen
− A version for 1024pcs can be created with great difficulty or is forced to differ from the wide one
− It is necessary to completely revise some sections of the site
3. Sliding panels
An approach that has become popular in web services: SRM systems, task managers. The screen consists of dependent panels. Panels appear to the right of each other; if the screen does not contain everything, then the left panels are hidden as the right ones appear.
Pros:
+ At small resolutions you can switch panels, at large resolutions you can show everything at once
+ Similarity of the interface with the version for tablets
Minuses:
− An option not familiar to web users
− The site is not located in the center of the screen, but on the left
− Large volume of architectural work
− No linear viewing; you need to click on the news to read the comments
4. Two windows
Interface with two active work sections on the screen.
Pros:
+ Requires few changes to the current interface
Minuses:
− It’s not clear how to work with 2 modes at the same time and why
5. Two columns
The information display mode is similar to the timeline on Facebook. The concept based on this option is won in the VK redesign competition.
Pros:
+ Easy to organize information
+ Uniform data density on the screen
Minuses:
− Divided attention when reading news
− Facebook
6. Cards
Shifting from vertical storytelling to a grid. Example - Pinterest.
Pros:
+ Easily scales to any resolution
Minuses:
− Difficult to perceive content (difficult to relearn)
− It is necessary to completely revise all sections of the site
Practice is my solution
I based my solution on the 4th approach: a screen with two active windows. The second window is the messenger. This allows you to chat while reading the news. Without using 2 browser tabs.
On small (<1440пк) экранах окно чата сворачивается.
If desired, it opens on top of the main content. The scenario of chatting while reading the news works the same way.
The user panel itself with the latest correspondence remains on the screen in all sections of the site:
Behind the scenes details
If you look closely at the screenshots, you can see other changes in the interface:
1. Background. A background has been added to increase the contrast of the blocks.
2. Division into blocks. The posts were separated into independent blocks.
3. Likes have moved up. Perhaps the most controversial change and probably deserves a separate discussion.
4. The previous top menu has disappeared. All its functions have already been duplicated in sections of the site. In its place was the tab level. Thus, it was possible to reduce one navigation floor. Filters (a rarely used item) have moved to the drop-down list. Another navigation floor is missing.
5. Two modes for viewing friends. One is borrowed from the web version, the other from the tablet. It is difficult to assess which is more popular and more convenient.
6. Personal notes. A block of personal notes about each friend appeared. If you like it, get it here - VK Memos.
7. Web calls. They were already in VK before, but were made as a separate mode of operation. Now this is an invisible function that does not interfere with basic surfing and communication.
Instead of a postscript
How can there be a redesign of a social network without a prototype of the user page?The current version is overloaded with information: music, videos, groups, public pages, photographs, photos on a map, photo albums, friends, mutual friends, online friends, subscribers... I decided to cut off all the unnecessary stuff:
That's all, thanks for your attention.
Everything is bad
I assess this redesign as not up to a professional level: too many important functions of the site were made worse than they were, and the little things that complemented and made the site different were removed or turned into trash.
It was worth introducing the redesign gradually
A lot of work was done, and this is understandable: they restarted everything at once, which is fundamentally wrong. It would be better to update the site in parts, as Facebook does. After all, the user needs to be prepared for something new, new things need to be tested in parts and then gradually launched based on feedback.
Blue coffin nailed at the top
A fixed header can be made like this if it contains important content. Now there is nothing in it, except for the search and the audio recording icon, a solid fixed coffin that is distracting.
The news page has become narrower and more cluttered
The photo began to open like on Facebook
Top 5 less noticeable flaws
Implicit to the eyes, but obvious to the brain. Here are the key ones.
- Pictogram icons in the menu
- Pale gray background that took away the purity of the old version
- The left column in the profile is fixed when scrolling and does not allow the news to expand to the full width of the allowed content (as it was in the old version)
- The new logo does not fit into the header and creates even more empty space
- My activity indicator (online) in my profile! This is the edge of logic! Not only is there a text indicator next to my profile name, but now there is also a green circle
The most annoying thing for users
Is it really that bad? Alternative expert opinion
Victor Kozyrev
UX designer at Frog Design, Badoo and Cogniance; creator of the Spender app
“Perhaps many people expect more radical and aggressive steps in design from large companies, but, in my opinion, VKontakte took a pragmatic path and solved specific problems. The new visual style is striking, which has definitely become more modern and pleasant. Navigation has also been redesigned and simplified. Now everything looks more concise and is easier to perceive. The typography is neat, clean and contrasty, ensuring a comfortable experience for most users.
The VKontakte font that a user sees depends on their version of the operating system and browser (iOS users will see San Francisco fonts, and Android users will see Roboto). Due to the use of system fonts, the user receives an almost familiar and therefore unobtrusive, comfortable look-and-feel product.
You should be prepared for the fact that the majority of the audience will be indignant in any case, regardless of the nature of the changes. This is understandable: the average user cannot always immediately assess the potential benefits of changes. But the discomfort from the loss of familiar amenities is felt immediately. Not because the old solutions are so good, but because people are used to them. This is explained by psychology. Most of the audience will be annoyed by the very fact of the redesign in principle. And the reason can be any detail that sticks out the most: someone will notice the difference in the font or icons, and someone will find fault with the new navigation.
I personally am not a fan of the three-column layout and would try to simplify it to make the pages easier to read. In particular, this applies to the user profile. The page seems overloaded, visually homogeneous, and lacks correctly placed visual accents. Despite the greater number of similar solutions, VKontakte still looks cleaner and more modern, and the interface is easier to perceive.”
If you still want to return the old VKontakte design, then download the Stylish browser extension. After installing it, you need to open the style page for the old social network design, click the “Install with Stylish” button, confirm the choice of the new style and restart the browser.
Write about the new design? Well, finally!
!!! Attention!!! In general, I immediately warn you that I evaluate design not only as a user, but also as a designer (including those related to the web) and will write a lot not only about the design itself, but also about why there are so many dissatisfied. And there will be many letters!
As for why everything is so unusual:
As soon as the first of April (which made everyone very doubtful about the seriousness of the update) a new design with limited beta testing became available, I immediately went to the VK blog and connected. After that, I began to jump through all the sections and see what was going on. On the very first day I found about five bugs, which I immediately sent to the administration for correction. The only thing that hasn’t been fixed is that they consider it logical (the fact that you can’t send an image to a friend, for example from a community or feed, and then save it to an album. The logic is that they say you sent it yourself, so why save it), but this thing was in the past design.
Afterwards, I posted to my community with a summary of the redesign and a vote. It became interesting how the first users would react. Most complained that they could not find some functionality, for example, a toggle switch in messages (which is easy to find if you hover the mouse over the edge of the dialog box). Yes, such interface elements are very unusual compared to everything that has happened in RuNet recently. But this is not a problem with the new design. This is a problem with the design thinking that has emerged in RuNet in recent years. We very rarely make progressive and good (!) designs that become more convenient and evolve smoothly and evenly, allowing the user to get used to new elements that are more intuitive and correct from a UX point of view (user experience is that part of interface design that is responsible for accessibility user and convenience). Instead, we have sharp spikes in the most progressive developers, which cause a wave of misunderstanding on the part of users. And all this against the backdrop of a huge number of sites with terrible design, which is inconvenient but simply familiar. And all because websites are usually made either cheaply or according to the principle “this is how they do it.” Those who have potential and can make progress simply do not work for the money that is offered on the RuNet, and go to do good and expensive work for foreign guys. This is all very sad and that’s why the introduction of the new VK design resembles the baptism of Rus'. But after a while, users will get used to it, remember where things have changed and understand that everything is not so bad.
About the fact that “mow for Facebook, well, at least you have a feed without other people’s likes!”
The fact is that design is evolving and so far it is considered optimal, which is also called the design of forms and content. It was developed not long ago by Google and many people picked it up.
Everything in it is based on proportional elements and accents, which makes it very simple and understandable in the skillful hands of the developer. All these panels with a profile that slide out on the left in applications, for example, that’s all it is.
Let's remember what the same phones looked like 10-15 years ago. Each Nokia model was something completely new: all these sliding panels, folding screens in all directions, the craziest keyboard layouts - it was all very cool. At the same time, I don’t remember any complaints about a lack of understanding of new products, everything was so new, interesting and cool!
But with progress, everything came down to a simple plate with a button on top and two on the side (or three on the back like LGE). Now the product is either like someone else’s, or new and incomprehensible. Now there is no point in reinventing the wheel, especially if it will be less convenient than the one that already exists. It’s just that now the design of devices and interfaces, web design have come to the optimum and it’s becoming more and more difficult to do better. Large manufacturers are not so stupid that they copy each other, they are so smart that they accept the rules that determine convenience, and they have finally come to a common concept.
The same goes for social media design. The last thing developers want is to be told that they stole the design. No. No one will judge you if you make a chair similar to thousands of other chairs. Ikea does just that: they make painfully banal, but simple and good things. Then what is the problem with web design?
Now here is my subjective “think” about the newest VK:
Got better. That's the truth. The old version changed so little that it looks more like old thematic forums from the 2000s than a modern social network. Now the mobile version and applications have a lot in common with the site. This is wonderful. A logical connection emerged between them. Those ugly multi-story half-page avatars with “Subscribe” and so on have disappeared from communities. Now you can check notifications by clicking without leaving the page, these are just likes and replies, and not a column for separate contemplation. Photos with answers now complement each other when opened, rather than going down endlessly.
About messages: I communicate on VK a lot (5-20 dialogues a day) and this new format makes me very happy. Those who are not satisfied can easily switch to the old format by clicking on the gear at the bottom of the screen and changing the settings. Everyone should be happy, right?
At the same time I agree