Концепт: Редизайн веб-версии «ВКонтакте» для широких экранов Статьи редакции

Дизайнер Виктор Никитин поделился с ЦП концептом редизайна сайта социальной сети «ВКонтакте» под широкие экраны.

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

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

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

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

Мессенджер во «ВКонтакте» появился сравнительно недавно. Первая его версия заметно выбивалась по стилю, и со временем это решили. Основная проблема месенджера, на мой взгляд, это то, что он живет параллельно с сайтом.

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

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

Давайте сначала решим, что такое узкий экран. Текущая ширина «ВКонтакте» — 791 пиксель. В конкурсном задании было сказано «адаптировать сайт под разрешение от 1024 пикселей».

Как я вижу, решением проблемы узкого экрана будет рабочий интерфейс на разрешении 1024-1600 пикселей. То есть интерфейс, способный работать как на узком (1024 пикселей) разрешении, так и на широком (1440+). Изучив варианты, я выделил шесть направлений. Привожу их на примере страницы новостей.

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

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


Плюсы:

  • легко реализовать.

Минусы:

  • контент становится нечитаемым;
  • нужно полностью пересматривать некоторые разделы сайта (например, «Мои друзья»).

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

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

Плюсы:

  • заметки располагаются линейно, не разрываясь комментариями;
  • комментарии к заметкам видны сразу без дополнительных переходов.

Минусы:

  • неравномерная плотность информации на экране;
  • версия под 1024 пикселей с большим трудом может быть создана или вынуждена отличаться от широкой;
  • нужно полностью пересматривать некоторые разделы сайта.

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

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

Плюсы:

  • на маленьких разрешениях можно переключать панели, на большом показывать все сразу;
  • схожесть интерфейса с версией под планшеты.

Минусы:

  • непривычный для веб-пользователей вариант;
  • сайт расположен не в центре экрана, а слева;
  • большой обьем архитектурной работы;
  • отсутствие линейного просмотра, требуется клик по новости для прочтения комментариев.

4. Два окна

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

Плюсы:

  • требует мало изменений в текущем интерфейсе.

Минусы:

  • не ясно, как работать с двумя режимами одновременно и зачем.

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

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

Плюсы:

  • легко компоновать информацию;
  • равномерная плотность данных на экране.

Минусы:

  • раздваивается внимание при чтении новостей;
  • Facebook.

6. Карточки

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

Плюсы:

  • легко масштабируется под любое разрешение.

Минусы:

  • трудно воспринимать контент (трудно переучиваться);
  • нужно полностью пересматривать все разделы сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я решил отрезать все лишнее:


Присылайте свои интерфейсные кейсы на [email protected]
0
75 комментариев
Написать комментарий...
Gregory Golovanov

С какой целью лайки вверх ушли, так красивее что ли? Плюсы/минусы/лайки/репосты не просто так находятся внизу. Я прочитал пост, глаза внизу, по итогам поддерживаю или нет, зачем за этим в шапку возвращаться?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Сергей Лукин

Возвращаться сначала вверх, чтобы поставить лайк, а потом обратно вниз, к следующей записи.

Ответить
Развернуть ветку
1 комментарий
Praetorian

Ну он же пишет, что можно этот пункт еще обсудить

Ответить
Развернуть ветку
1 комментарий
Сергей Клабуков

С таким же успехом можно было просто оставить блок с кнопкой лайк...зачем вообще этот контент еще нужен.

Ответить
Развернуть ветку
Sergey Nikishkin

Я решил отрезать все лишнее и добавить здоровенный кирпич для заметок на главный экран страницы профиля.

Ответить
Развернуть ветку
Gregory Golovanov

😂😂😂

Ответить
Развернуть ветку
Vladimir

Поддержу идею с диалогами справа, как и на хабре. Это наиболее оптимально.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Gregory Golovanov

Не знаю как собравшиеся, но когда я общаюсь, я новости читать не хочу, точно так же, когда читаю новости не общаюсь. Проблемы (раз два три и четыре) в принципе не проблемы. Редизайн ради редизайна?

Широкий экран/ретина явление не такое частое (процентов 10 лай Бог по всем юзерам), а если мелко - контрол зажал, да колесом двинул и норм. Разный стиль приложухи и веба? Да ехало болело!

Чат сбоку? Зачем? Чтоб все кто мимо проходит всегда были вкурсе с кем и о чем?

Меня явно не поддержат, но как-то это все нецелесообразно. Прекрасно, читаемо, продумано, руки прочь как говорится.

Ответить
Развернуть ветку
Gregory Golovanov

Широкий это больше 1440 в смысле, если кто не понял. Да и 1920 норм, плюс масштаб в помощь.

Да, многие UI/UX спят и видят, как у них в портфолио "редизайн вк" сверкает.

Ответить
Развернуть ветку
1 комментарий
Nikita Plotnikov

Согласен на счет чатов. Все, кто привык к нескольким экранам в OS X, будут по-прежнему оставлять диалоги в одной вкладке, а ленту в другой.

Ответить
Развернуть ветку
Павел Князев

На ретине сайт выглядит точно так же, как на обычном экране (не широкоформатном), просто в @2x. Проблем нет вообще.

Ответить
Развернуть ветку
eden lane

Браузерное масштабирование как-то не очень хорошо работает в ВК

Ответить
Развернуть ветку
Иљя Коробов
Ответить
Развернуть ветку
Alexey Novov

Просто мечта маркетологов.

Ответить
Развернуть ветку
Βасилий Βасильев

Контакты справа напоминают Фейсбук, да и страница пользователя тоже чем-то напоминает фейсбук..

Мне кажется это будет удобно.

Ответить
Развернуть ветку
Владимир Владимирович

вконтакте развивается по спирали - поспирали у фейсбука?

Ответить
Развернуть ветку
1 комментарий
Антон Андрущенко

Не знаю как вам, товарищи, а мне Фейсбук кажется весьма неоповоротливым в управлении. В этом принципиальное отличие ВК от Фейсбука и это отличие не должно раствориться

Ответить
Развернуть ветку
Viktor Dmytrenko

Честно говоря, проблема мне больше кажется "высосанной из пальца". Вот у меня стоит "24 и как-то не очень удобно бегать глазами по экрану слева-на-право. в поисках чего-же там находится и где. Вертикальный вариант без "отклонений" - самое то. и вообще, главное, что мобильная версия нормально отображается :)

Ответить
Развернуть ветку
Иван Горовой

Мне тоже нравится два окна. Ну то есть у многих же всегда открыто две вкладки - одна "рабочая", другая с музыкой. Можно было бы во втором окне выбирать что размещать (плейлист, список друзей, переписку), или ввести кнопочку к каждому посту "перенести во второе окно". Короче дать возможность не открывать кучу вкладок, а возможность перенести что-то в правое окно и параллельно работать во втором окне.

Ответить
Развернуть ветку
Praetorian

Согласен полностью насчет возможности выбора второго окна

Ответить
Развернуть ветку
Александр Крофт

Если уместно сравнение, то в Фотошопе реализована подобная кастомизация. Но людям вряд ли стоит давать (да и не дадут) в руки столько свободы.

Ответить
Развернуть ветку
1 комментарий
Alexander Pesenka

С чатом очень круто!

Но вот со страницей прлфиля я бы не согласился. Во-первых, вы слишком субъективны, вынося приговор о том, что фотки на карте или список пабликов - это лишнее. Я думал, задача дизайнера все это уместить, а не решать, что важно, а что нет :)

Так что лично я бы вместо 6 больших (и не очень) фоток предложил вам уместить в это пространство какие-то другие "ненужные" блоки. Как минимум потому что у львиной доли пользователей нет такого количества красивых фотографий. А если и есть, то как-то ассоциирование с одной основной фотографией профиля является чем-то более привычным и общепринятым.

Ответить
Развернуть ветку
Алексей Кочубей

Последний скриншот самый оптимальный и самый красивый я считаю . Вк быстро и на ура его примет !

Ответить
Развернуть ветку
Павел Тарасенко

Хрень какая-то, эти ваши новые inline-чаты ничем не удобнее нынешних, которые перетаскиваются и растягиваются как угодно. Если у вас большой экран вы наоборот открываете 5 диалогов и удобно общаетесь и смотрите видео или фотографии в чем проблема? А красная кнопка это вообще. Часто пользуетесь?)
Друзья сеткой - прикольно и реально экономит место.
На самом деле и нынешний дизайн клевый, удобный и т.д. Просто надоело и хочется чего-то нового)
P.S. Если ни один диалог не открыт, то что, сайт опять "убого" смотрится на широких экранах?) В чем смысл вообще?

Ответить
Развернуть ветку
Alexander Pesenka

Кстати, да. А еще мне кажется, что не с проста от нас утаили список диалогов (мои сообщения /im). Возможно, из-за нового чатика, там будет что-то противозаконное.

Ответить
Развернуть ветку
Владислав Горбенко

1. Статья же уже на habr`е была напечатана.
2. Диалоги неудобны справа. Рассеивает внимание пользователя.
3. Не надо быть похожими на facebook.

Ответить
Развернуть ветку
Андрей Лапин

За интерфейс ещё принято ругать Google+, а мне там нравится, особенно приложение, очень удобно, да и web-версия норм. Экран заполняется в любых разрешениях, меню скрыто, не мешает читать новости, с чатом работать удобно. А макеты в статье мне кажутся перегруженными.

Ответить
Развернуть ветку
Антон Смуров

В конкурсе очень удивлялся низкому уровню работ, включая и победителей. Представленный концепт от них отличается в лучшую сторону. Но не могу сказать, что мне в нем все нравится.

Ответить
Развернуть ветку
Vladimir Batishchev

Тетя хороша на первом скрине =)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
2 комментария

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Sasha Beep

Напоминает фейсбук. Но лучше, чес сейчас в 9000 раз

Ответить
Развернуть ветку
Dmitry Alexandrovich
Сама панель пользователей с последними переписками остается на экране во всех разделах сайта

Вот то текстовое поле справа там не нужно. Его функции списки выполняют. И куда делись еще две функциональных кнопочки?

Раз уж заметки в ленте на блоки разделили, нужно сделать чтоб их перетаскиванием в диалог кидать можно было, потянув за пустое пространство.

Лайки сверху - бредовая идея, тут уже объяснили почему.

Страница профиля - плохо. Нет основного аватара.
Снова эти заметочки, функцию которых успешно выполняют списки.

музыка, видео, группы, паблики, фотографии, фотографии на карте, фотоальбомы, друзья, общие друзья, друзья онлайн, подписчики

Теперь, чтобы к этому добраться, нужно нажать на кнопочку и всё равно скроллить. В чем улучшение?

Ответить
Развернуть ветку
Dmitry Alexandrovich

Блин, ну и отформатировал. ЦП, сделайте уже редактирование комментариев.

Ответить
Развернуть ветку
Антон Андрущенко

Вы правда думаете, что вот так просто все это реализовать? Те же перетаскивающиеся записи сделать, конечно, можно, но это стоит огромных сил и ресурсов

Ответить
Развернуть ветку
1 комментарий

Комментарий удален модератором

Развернуть ветку
Евгений Чернуский

Так и веет свободой, революцией и фейсбуком. Все хорошо. Но логика построения последнего скрина вообще не понятена мне.

Ответить
Развернуть ветку
Андрей Шатило

Ужс какой)

Ответить
Развернуть ветку
Павел Князев

Спорная идея с сеткой фотографий в профиле. Как будет выглядеть профиль, если нет ни одной фотографии? Или есть только одна? Плюс, стоит помнить о том, какие фотографии размещают пользователи у себя на страничках: смешные картинки или цитаты встречаются намного чаще личных фотографий.

Ответить
Развернуть ветку
ivan krapivin

Дуров, верни стену!

Ответить
Развернуть ветку
RomaS

Сначала выдумываешь несуществующие проблемы, а затем решаешь их убогим образом. Профит!

Ответить
Развернуть ветку
Sasha Nowin

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Vladislav Radu

Видел результаты конкурсных работ, но Ваш вариант однако лучший.

Ответить
Развернуть ветку
Ярослав

Давно пора. На 27 дюймовом домашнем мониторе выглядит как танкощель. Facebook не сильно лучше, а примером для подражания можно считать Google Plus.

Ответить
Развернуть ветку
Матвей Беляев

Очень часто сижу вконтакте через 17" Макбук. Весь сайт занимает только 1/3 От всей страницы. Понравилась идея с диалогами справа. Да здравствует редизайн!

Ответить
Развернуть ветку
David Svezhintsev

Заметки - это для ведения сведений о пользователе для последующего пикапа?

Ответить
Развернуть ветку
David Svezhintsev

сведения* :c

Ответить
Развернуть ветку
Илья

Вообще проблема раздута.

Большую часть времени пользуюсь монитором с разрешением 1920x1080, ВКонтакте прекрасно умещается ровно в половину экрана.

Это удобно, потому что во второй половине можно разместить другое окно.

Ответить
Развернуть ветку
Дмитрий Браверман

Отличная работа.
Главное, что еще и телачге для скриншотов подобраны достойные.
Давай зачётку, пять и "автомат" по дизайну сайтов.

Ответить
Развернуть ветку
Илья Кичаев

Крайне непонятно, как быть тем юзерам, которые не хотят проходящему мимо человеку показывать переписку. Как бы не всех воспитали, что читать чужие письма плохо.

Ответить
Развернуть ветку
Arpov Polik

Не надо карточек.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Roman Frank

Фейсбук какой-то

Ответить
Развернуть ветку
Petr Belov

И вконтакте превращается, вконтакте превращается... в Фэйсбук!

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Николай М

У меня разрешение экрана 1366*768 и для вконтакте я использую масштаб 125%
Практически всегда, открыта вкладка с диалогами, а сайтом пользуюсь в соседних вкладках.
Пытался заставить себя пользоваться инлайн чатом и окошком, которое открывается при клике на иконку в главном меню, но всё равно часто приходилось открывать "Диалоги".

Функция общения используется часто, причем параллельно с серфингом в новостях или написанием поста в группу, поэтому будет интересно попробовать решение, как на третьем скриншоте с полноценными открывающимися диалогами поверх новостей.

Ответить
Развернуть ветку
Ваня Слюсарчук

На мой взгляд лучшая идея - это месседжер с правой стороны. Главное чтобы сайт работал очень быстро. И месседжер включался сразу, а не после перезагрузки страницы. А он работает как хочет.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Виталий Дмитриев

С "лайками" вверху поста - бред. Логически так: прочитал пост, понравился - лайкнул.
Верхнее меню действительно пора отвинчивать из-за ненадобности, но кнопку для быстрого запуска плеера, желательно, оставить.

Ответить
Развернуть ветку
depalt

ВК - идеален! Не чего трогать не нужно!

Ответить
Развернуть ветку
Dmitri Verovski

Отлично! Текущий вариант ВК морально устарел. Пользоваться им приходится на 170% увеличении.

Ответить
Развернуть ветку
John Ward

Мм, диалоги, распахнутые на всеобщее обозрение - вот это класс. Есть люди, которые, возможно, хотели бы переписку как-то более деликатно вести, в частности, когда на работе. Или живут не одни.
И надеюсь, эта широкоформатная жесть хотя бы будет превращаться в нормальную "узкую", когда масштаб меняешь (У меня ноут 13 дюймов с ретиной, часто увеличиваю страницы процентов до 150, особенно когда фокусируюсь на тексте) и когда окно браузера открываешь не на весь экран (опять же, что за радость на работе палить свой вконтач на всю ширину большого казенного монитора?)

Ответить
Развернуть ветку
Антон Андрущенко

Вам не стоит забывать, что у ВК в последнее время серьезные проблемы с серверами. Так что есть шанс, что новая, наверняка более тяжелая версия сайта потребует больше ресурсов, которых у них нет. Если ВК и займется редизайном, то только после налаживания работы серверов.

Ответить
Развернуть ветку
Антон Смуров

Маловероятно чтобы дизайн сильно влиял на уровень нагрузки на сервера. Не забывайте, что есть те же мобильные приложения - работают через api, генерят львиную долю нагрузки и никакого отношения к современному дизайну веб-версии сайта не имеют. И кто вам сказал, что новая версия дизайна будет хуже старой технологически?

Ответить
Развернуть ветку
7 комментариев
Читать все 75 комментариев
null