Редизайн Вконтакте под 1440пк+

в 19:08, , рубрики: usability, веб-дизайн, Вконтакте, интерфейсы, редизайн

Рунет беден обзорами редизайна известных сайтов и сервисов. Эта статья не ради того, чтобы это исправить. Моя цель обсудить с сообществом решение одной из проблем веб-версии Вконтакте.

Редизайн Вконтакте под 1440пк+ - 1

В прошлогоднем конкурсе на редизайн ВК, авторы конкурса упомянули о проблемах веб-версии. Проблемой номер один они назвали узкую ширину сайта. Я согласен с командой Вконтакте и решил построить свое решение в борьбе с этой проблемой.
Редизайн Вконтакте под 1440пк+ - 2

Боль

Проблема №1 — Узкий экран

Редизайн Вконтакте под 1440пк+ - 3

Помимо ширины экрана я выделил еще 2 проблемы.
Редизайн Вконтакте под 1440пк+ - 4

Проблема №2 — Разный стиль веб-версии и приложений

Редизайн Вконтакте под 1440пк+ - 5
Редизайн Вконтакте под 1440пк+ - 6

Проблема №3 — Месенджер

Мессенджер в ВК появился сравнительно недавно. Первая его версия заметно выбивалась по стилю и со временем это решили. Основная проблема месенджера на мой взгляд это то, что он живет параллельно с сайтом. Окно переписки маленькое. И хоть оно и масштабируется, но оно привязано к абсолютным координатам — пользоваться сервисом не удобно. На Фейсбуке месенджер также живет отдельно от сайта, плодя при этом множество маленьких окон-переписок.

Редизайн Вконтакте под 1440пк+ - 7
Редизайн Вконтакте под 1440пк+ - 8
Редизайн Вконтакте под 1440пк+ - 9

Теория — способы стать шире

Давайте сначала решим, что такое узкий экран. Текущая ширина ВК — 791пк. В конкурсном задании было сказано адаптировать сайт под разрешение от 1024пк. Как я вижу, решением проблемы узкого экрана будет интерфейс рабочий на разрешении 1024—1600пк. То есть интерфейс способный работать как на узком (1024пк) разрешении, так и на широком (1440+пк).

Изучив варианты, я выделил 6 направлений. Привожу их на примере страницы новостей.
Редизайн Вконтакте под 1440пк+ - 10

1. Физическое растяжение

Решение в лоб — делаем сайт резиновым.

image

Плюсы:
+ Легко реализовать

Минусы:
− Контент становится не читаемым
− Нужно полностью пересматривать некоторые разделы сайта (например, друзья)

Редизайн Вконтакте под 1440пк+ - 12

2. Параллельное изложение

Прием был замечен в концепции редизайна Фейсбука 2006 года от iA — комментарии расположены справа от постов. 5 лет назад я опробовал его на одном из своих проектов.

Редизайн Вконтакте под 1440пк+ - 13

Плюсы:
+ Посты располагаются линейно, не разрываясь комментариями
+ Комментарии к постам видны сразу без дополнительных переходов

Минусы:
− Неравномерная плотность информации на экране
− Версия под 1024пк с большим трудом может быть создана или вынуждена отличаться от широкой
− Нужно полностью пересматривать некоторые разделы сайта

Редизайн Вконтакте под 1440пк+ - 14

3. Смещаемые панели

Подход ставший популярным в веб-сервисах: срм-системах, таск-менеджерах. Экран состоит из зависимых панелей. Панели появляются справа друг от друга, если экран не вмещает все, то левые панели скрываются по мере появления правых.

Редизайн Вконтакте под 1440пк+ - 15

Плюсы:
+ На маленьких разрешениях можно переключать панели, на большом показывать все сразу
+ Схожесть интерфейса с версией под планшеты

Минусы:
− Не привычный для веб-пользователей вариант
− Сайт расположен не в центре экрана, а слева
− Большой обьем архитектурной работы
− Отсутствие линейного просмотра, требуется клик по новости для прочтения комментариев

Редизайн Вконтакте под 1440пк+ - 16

4. Два окна

Интерфейс с двумя активными рабочими разделами на экране.

Редизайн Вконтакте под 1440пк+ - 17

Плюсы:
+ Требует мало изменений в текущем интерфейсе

Минусы:
− Не ясно как работать с 2 режимами одновременно и зачем

Редизайн Вконтакте под 1440пк+ - 18

5. Две колонки

Режим отображения информации схожий с таймлайном на Фейсбуке. Концепт, основанный на этом варианте, победил в конкурсе редизайна ВК.

Редизайн Вконтакте под 1440пк+ - 19

Плюсы:
+ Легко компоновать информацию
+ Равномерная плотность данных на экране

Минусы:
− Раздваивается внимание при чтении новостей
− Фейсбук

Редизайн Вконтакте под 1440пк+ - 20

6. Карточки

Переход от вертикального повествования в сторону сетки. Пример — Пинтерест.

Редизайн Вконтакте под 1440пк+ - 21

Плюсы:
+ Легко масштабируется под любое разрешение

Минусы:
− Трудно воспринимать контент (трудно переучиваться)
− Нужно полностью пересматривать все разделы сайта

Редизайн Вконтакте под 1440пк+ - 22
Редизайн Вконтакте под 1440пк+ - 23

Практика — мое решение

Свое решение я построил на 4-м подходе: экран с двумя активными окнами. Второе окно — месенджер. Это позволяет переписываться во время чтения новостей. При этом не используя 2 вкладки браузера.

Редизайн Вконтакте под 1440пк+ - 24

На небольших (<1440пк) экранах окно чата сворачивается.

Редизайн Вконтакте под 1440пк+ - 25

При желании оно открывается поверх основного контента. Сценарий ведения переписки во время чтения новостей работает также.

Редизайн Вконтакте под 1440пк+ - 26

Сама панель пользователей с последними переписками остается на экране во всех разделах сайта:

Редизайн Вконтакте под 1440пк+ - 27

Редизайн Вконтакте под 1440пк+ - 28

Редизайн Вконтакте под 1440пк+ - 29
Редизайн Вконтакте под 1440пк+ - 30

Детали за кадром

Если всмотреться в скриншоты, то видны и другие изменения в интерфейсе:

1. Фон. Появился фон для повышения контраста блоков.

Редизайн Вконтакте под 1440пк+ - 31
Редизайн Вконтакте под 1440пк+ - 32

2. Разделение на блоки. Посты расклеились на независимые блоки.

Редизайн Вконтакте под 1440пк+ - 33
Редизайн Вконтакте под 1440пк+ - 34

3. Лайки переехали вверх. Пожалуй самое спорное изменение и, вероятно, заслуживает отдельного обсуждения.

Редизайн Вконтакте под 1440пк+ - 35
Редизайн Вконтакте под 1440пк+ - 36

4. Пропало прежнее верхнее меню. Все его функции уже были задублированы в разделах сайта. На его место встал уровень вкладок. Таким образом удалось сократить один этаж навигации. Фильтры (редко используемая вещь) переехали в выпадающий список. Пропал еще один этаж навигации.

Редизайн Вконтакте под 1440пк+ - 37
Редизайн Вконтакте под 1440пк+ - 38

5. Два режима просмотра друзей. Один заимствован из веб-версии, другой из планшетной. Трудно оценить какой популярнее и удобнее.

Редизайн Вконтакте под 1440пк+ - 39
Редизайн Вконтакте под 1440пк+ - 40

6. Личные заметки. Появился блок личных заметок о каждом друге. Кому понравилось, берите тут — VK Memos.

Редизайн Вконтакте под 1440пк+ - 41
Редизайн Вконтакте под 1440пк+ - 42

7. Веб-звонки. Они уже были раньше в ВК, но были сделаны как отдельный режим работы. Сейчас это незаметная функция, не мешающая основному серфингу и общению.

Редизайн Вконтакте под 1440пк+ - 43
Редизайн Вконтакте под 1440пк+ - 44

Редизайн Вконтакте под 1440пк+ - 45

Вместо постскриптума

Разве может быть редизайн социальной сети без прототипа страницы пользователя.
Текущая версия перегружена информацией: музыка, видео, группы, паблики, фотографии, фотографии на карте, фотоальбомы, друзья, общие друзья, друзья онлайн, подписчики… Я решил отрезать все лишнее:

Редизайн Вконтакте под 1440пк+ - 46
Редизайн Вконтакте под 1440пк+ - 47

На этом все, спасибо за внимание.

Редизайн Вконтакте под 1440пк+ - 48
Редизайн Вконтакте под 1440пк+ - 49

Автор: m_a_c

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js