Лого vc.ru

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

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

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

Поделиться

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

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

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

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

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


Присылайте свои интерфейсные кейсы на interface@siliconrus.com
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

Принцип "Фейсбучная спираль" им. М.Э.Цукерберга

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

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

0

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

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

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

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

0

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

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

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

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

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

Потому что в современном понимании редизайн - это не когда "удобнее, чем было", а когда "зато не так, как раньше". И это не есть правильно.

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

0

Я не понимаю как этот вопрос вообще встал)))) а что тут обсуждать я вообще хз

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

0

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

Широкий это больше 1440 в смысле, если кто не понял. Да и 1920 норм, плюс масштаб в помощь.
Да, многие UI/UX спят и видят, как у них в портфолио "редизайн вк" сверкает.

Взаимно. Поставили жене 150% масштаба и превед.
Лесенка вылазит кое-где на графике, правда.

0

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

0

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

0

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

0

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

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

0

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

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

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

Ух зря ты ссылочку приклеил.

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

0

Это же просто мобильная версия, растянутая до 16:9. Довольно уныло, честно говоря, очень перегруженные страницы.

1

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

0

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

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

0

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

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

0

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

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

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

0

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

0

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

0

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

0

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

0

Как на счет дать пользователю на выбор ставить справа, что он захочет? Диалоги, музыка, лента.

0

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

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

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

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

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

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

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

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

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

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

Вы правда думаете, что вот это перетаскивание такое сложное? Все красивости вроде перетаскивания выполняются на стороне клиента, а сервер нагружается только привычным действием - "share through private message".

Что из этого "стоит огромных сил и ресурсов"?

0

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

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

0

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

0

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

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

0

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

0

Еще раз - как связана нагрузка на сервера и "тяжесть дизайна" определяемая на глаз? Да еще учтите, что показанный здесь концепт к администрации ВК не имеет никакого отношения :)

0

1. И правда немножко ступил, прошу прощения
2. Прекрасно понимаю. Но ведь им наверняка не раз предлагали сменить дизайн, так почему они этого еще не сделали, ведь им это ничего не стоит?

0

Ну, например я, вообще не вижу острой необходимости в новом дизайне - старый хорош.

Смена дизайна такого проекта - это очень серьезное мероприятие. Как минимум, это очень объемная технически работа. А еще длительное тестирование и так далее.

Вы в курсе, что в разделе для разработчиков уже несколько месяцев тестируется кусочек нового дизайна?)

0

Нет. Но это не такая уж и большая работа по меркам такого проекта, по крайней мере, по моим подсчетам. Они ведь могут использовать старые наработки и куски старого дизайна, создавая на их основе новый. Только дурак будет делать такой проект с чистого листа. А они не дураки. То есть, на саму разработку может уйти несколько месяцев хорошей слаженной работы. Столько же времени на тестирование. А новый дизайн действительно нужен. Хотя бы нужно сделать поддержку для больших экранов. А уж о мобильной версии сайта я вообще молчу - она ужасна!

0

Какие блин ресурсы серверов?? Дизайн рисуется на стороне клиента - то есть вашим ком пом и браузером. Сервер работает только отдавая, получая и обрабатывая запросы.

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

0

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

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

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

0

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

0

stylebot.me/styles/5859 плюс установить stylebot в хром

0

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

0

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

0

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

0

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Илья Максимов

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

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Igor Blinowski

Ох уж эти аналитики. По вашим рассчетам выходит, что каждый третий - полицейский, да?
На картинке последняя графа отражает количество полицейских на 100000 жителей.

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Данислав Жуков

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

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Anton Smelov

"Женщину вынули, автомат поставили" (с)

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Antony Sedov

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

Что такое «налог на Google» и как он изменит индустрию: мнения юристов и игровых разработчиков
0
Показать еще