Обновление десктопной версии ВКонтакте

Иван Барышев и Алексей Мазелюк из команды продуктового дизайна рассказали на первом онлайн-митапе VK Tech Talks · Design, зачем обновляется десктопная версия «ВКонтакте», как она меняется, с какими сложностями сталкиваются дизайнеры и какие планы строят.

The Brown Room подготовил расшифровку выступления.

Иван:

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

Алексей:

Привет-привет! Меня зовут Лёша, я тоже работаю дизайнером в продуктовой команде департамента дизайна. Занимаюсь образовательной платформой, сервисами, играми, сообществами, «большим» вебом и многими другими интересными вещами.

Сегодня мы расскажем вам, почему мы решили обновлять «большой» веб, какие цели преследовали, как тестировали, как запускали, и даже немного затронем список на будущее. Но обо всём по порядку.

Любое обновление — это больно

Иван:

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

Сейчас мало кто помнит, например, как выглядела стена, и что это вообще такое. Но мем «Верни стену» знают все. Но раньше это был не мем, это была жизнь, это была настоящая безумная боль для пользователей. Примерно тогда же появилась шутка-сравнение: приходишь домой, а кто-то переставил тебе всю мебель, переложил ложки к вилкам, отнёс обеденный стол в спальню, а порой ещё и комнаты местами поменял. Вот как-то так, наверное, и воспринимаются резкие изменения в дизайне продукта пользователями.

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

До 2016 года сайт выглядел вот так. И 1 апреля команда объявила, что будет проведён редизайн. Многие тогда подумали, что это шутка. Но оказалось, что это правда. Команда набрала 1 000 000 добровольцев и полгода обкатывала на них обновлённый дизайн. Вот как стало после:

Конечно, после этого редизайна сайт ещё менялся, множество деталей изменились к текущему моменту, но самое яркое впечатление от изменения, от чего-то нового, было именно тогда — в 2016 году.

И сейчас мы смотрим на до и после, и, наверное, мало кто хотел бы вернуться в то время, когда этот редизайн не произошёл. Мы понимаем, что развитие — это важно.

Алексей:

В 2017 году мы обновили мобильное приложение. Мы очень сильно поменяли навигацию, избавились от левого меню и добавили таббар.

Вот так приложение выглядело в 2017 году:

А вот так — после редизайна в 2017 году:

Самые популярные разделы «ВКонтакте» были вынесены в таббар. Это новостная лента, поиск — будущий дискавер, мессенджер, уведомления и вкладка «Ещё», на которой остались другие менее популярные разделы.

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

В тот момент обновление приложения «ВКонтакте» запускалась с помощью QR-кодов. Они были размещены на билбордах, в бизнес-центрах, торговых центрах, на улицах Москвы и Санкт-Петербурга. Также их можно было встретить в статьях в интернете.

В интернете есть не только хорошие статьи, в которых написано, какой дизайн «ВКонтакте» хороший. Там есть много комментариев пользователей, и они не всегда хорошие. Много, конечно, позитивных комментариев — это именно то обновление, которое пользователи хотели поставить, они видели его у своих друзей и искали способ установки.

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

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

Цели

Перед обновлением веба мы поставили для себя небольшие цели:

1. Поддержать единый стиль с мобильными приложениями.
2. Поддержать новый фирменный стиль.
3. Выделить больше места под будущие сервисы «ВКонтакте».

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

Что было дано

Иван:

Давайте посмотрим на вводные, что нам было дано. Ещё совсем недавно на сайте было какое-то невероятное количество цветов. Если быть точным, это 1 632 цвета, большинство из которых встречались на сайте ровно один раз. Они добавлялись без всякой системы, имели какие-то странные значения, и с этим нужно было разбираться. Это было серьёзное ограничение.

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

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

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

Если посмотреть сейчас на старую версию сайта и на текущее мобильное приложение, сразу кажется, что здесь что-то не так. Они не дружат между собой. Нет общей системы, сложно понять логику, почему на сайте сделано одним образом, а в приложении совсем другим.

Это плохо. Мы хотим, чтобы «ВКонтакте» для пользователей воспринимался единообразно, чтобы пользовательский опыт был как можно более близким на всех платформах.

Естественно, он не может быть одинаковым. Всё-таки сайт и мобильное приложение — это очень разные способы взаимодействия человека и интерфейса. Но не должно быть двух разных вселенных. Должна быть логика.

Что мы сделали?

Может показаться что не так много. Обновили меню, сделали новую шапку.

Но всё гораздо сложнее. Была проделана огромная работа, которая заняла достаточно большое количество времени.

Ещё весной у нас возникло желание разобраться с цветами на десктопном вебе. Всё-таки 1 632 цвета — это не шутки, это безумие.

Тогда мы вместе с разработчиками собрали табличку, отсортировали цвета по популярности. Я стал проходиться по ней и расставлять, какой цвет заменить на какую переменную. Пройдясь по 50 самым популярным цветам мы сформировали первоначальную палитру. И когда она была создана, мы запретили заливать на сайт новые цвета. Теперь, чтобы на сайте появился новый цвет, нужно сначала добавить его в палитру. Мы старались не нарушить логику и не раздувать палитру почём зря.

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

Практически каждый день я смотрел на них и говорил что-нибудь вроде: с 30-го по 40-й можно заменять. Например, 40-й давайте посмотрим в контексте, и с 41-го и так далее можно заменять. Сверху представлен цвет, который на сайте присутствует, а снизу — замена из палитры, которую порекомендовал алгоритм. Если нам эта замена не нравилась, то мы либо подбирали что-то вручную, либо заводили в палитру новый цвет.

Работа продолжалась несколько месяцев. После неё мы смогли уменьшить количество цветов. Из 1 600 с лишним осталась всего лишь пара десятков.

Переменные были как в коде, так и в Figma. Благодаря этому мы смогли упростить жизнь себе и разработчикам, стало гораздо проще поддерживать макеты. Раньше нужно было сходить в какой-то соседний макет, найти там HEX, перенести его в свой. Сейчас появились чётко зафиксированные оттенки цветов, которые пробрасываются во все макеты из библиотек. Благодаря тому, что то же самое сформировано у разработчиков, мы достигли определённого уровня синхронизации. И всем стало проще жить.

Алексей:

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

До обновления мобильного клиента они ещё более-менее совпадали, были залитыми. Но сейчас их стиль достаточно разный. Поэтому мы решили, что пора обновлять их и на вебе.

Вот так выглядят наши новые иконки, которые мы использовали в нашей обновлённой версии «ВКонтакте»:

После того, как обновили иконки, мы принялись за левое меню, header, поле ввода и начали обновление с них. Мы увеличили кегль текста и ячейки, применили новые иконки, добавили новый логотип в верхний левый угол. Так стало чище, и, на самом деле, это то, к чему мы стремились.

На этом этапе мы выдохнули: поняли, что в целом всё, что мы уже сделали сейчас, хватает для первой итерации. Давайте вернёмся к целям, которые поставили немного ранее.

Иван:

А в целях у нас — единый стиль с мобильными приложениями, новый фирменный стиль и больше места под будущие сервисы «ВКонтакте». У части этих пунктов можно поставить галочки уже сейчас — всё-таки стало лучше!

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

Тестирование и запуск

Алексей:

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

Однако первые пользователи для нас — это наши сотрудники. У нас есть отдельное сообщество, где дизайнеры, разработчики, продакты рассказывают о новых фичах, которые поедут в прод в ближайшем будущем. Здесь же сотрудники могут оставить свой комментарий, порадоваться за новую фичу, оставить несколько ласковых слов или сказать, что что-то не так, что нужно поправить. Обновление веба не было исключением. Точно так же оно попало в это сообщество, точно так же оно прошло через наших сотрудников.

Удивительно, но это обновление собрало больше положительных комментариев, чем обычно. Людям понравилось обновление, и в целом мы понимаем, что это то, что мы хотели.

Однако были какие-то недочёты, которые мы смогли поправить в тот период времени до выкатки на всех пользователей. И мы даже смогли затронуть некоторые вещи из доки после релиза, которые мы планировали сделать чуть позже.

Тестирование

После того, как мы протестировали на сотрудниках, мы запланировали публичное тестирование. Оно проводилось на трёх группах людей.

Первая группа — 500 000 человек, которой мы принудительно включили редизайн.

В следующей — 500 000 человек, которым мы вообще не разрешали включить новый дизайн.

Следующие 100 000 человек — это те люди, которые могли его включить в настройках веб-версии «ВКонтакте». Это те люди, которые пришли к нам с различных статей на vc.ru, TJ, других новостных источников и различных записей «ВКонтакте», других социальных сетей. Однако эти люди не участвовали в результатах тестирования. Это достаточно лояльные к «ВКонтакте» пользователи, которые могли испортить конечную картину и тестирование.

Результаты

Перейдём к результатам тестирования. К ним можно отнести то, что за момент тестирования в Поддержку написали более 400 человек с обращениями о том, как включить дизайн. Они видели его у своих друзей и не понимали, как его включить в настройках. Потому что те 100 000 человек набрались буквально за день.

Из этих 400 обращений всего 25 были негативными. Конечно, были люди, которым обновление не понравилось, которые включили его просто чтобы попробовать, им было интересно. Кто-то ожидал чего-то большего, кому-то просто не понравилось. Кто-то не нашёл разделы, хотя они остались на своих же местах.

Иван: Но так или иначе было очень много позитивных отзывов.

Алексей: Да-да. 375 против 25.

Иван: Неплохо!

Алексей: Да.

Потом мы начали смотреть на наши основные метрики — это таймспент и посещаемость разделов внутри десктопной версии. Они не изменились.

Однако у нас изменилось реклама. За счёт того, что высота левого меню выросла, рекламные блоки опустились. И с этим нужно было что-то делать. Нужно было отыгрывать те деньги, которые мы проигрывали. Поэтому мы начали думать, как это можем сделать.

Начали думать о быстрых решениях, таких как убрать лишние отступы, лишние сепараторы, сделать чуть меньше ячейки. Такие тесты уже пошли в тестирование и мы ждём их результатов. Однако это промежуточный шаг. Ещё на этапе проектирования обновленного веба мы думали о сворачивании меню.

Но это достаточно большой шаг, который нужно тестировать. Потому что очень легко обронить посещаемость разделов, которые будут скрыты за кнопкой «Показать всё», «Показать ещё».

Планы на будущее

Иван:

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

Первое и, наверное, самое главное, что нужно сделать всё крупнее. Сейчас на сайте встречаются шрифты размером 12 и 13 точек, это очень плохо. Их сложно читать. Люди выкручивают масштаб в браузере, ставят 110 или 125 %. Так просто не должно быть, нужно сразу сделать нормально, чтобы всем было удобно пользоваться сайтом как есть.

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

Помимо этого, «ВКонтакте» теперь имеет свой собственное семейство шрифтов VK Sans. Оно представлено шрифтами VK Sans Display, который используется для крупных заголовков или коммуникации, и VK Sans Text, который используется в качестве основного шрифта, и именно он вытеснит системные San Francisco и Roboto как в мобильных приложениях, так и на вебе.

Мы много чего хотим систематизировать на сайте, и одна из таких вещей — это закругления. Раньше они подбирались дизайнером заново в каждом конкретном случае. Хочется этот процесс упростить и сформировать некую систему токенов: border-radius-s, border-radius-m и так далее. Эти токены будут как в макетах, так и в коде. Благодаря этому мы сможем, например, при необходимости перейти с четырёх точек закругления на шесть просто изменив одно значение переменной. Это проще, чем менять в нескольких местах. Ну и, конечно же, радиус закругления будет зависеть от того, какого размера этот объект: чем он крупнее, тем больше радиус закругления.

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

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

Итоги

Алексей:

В завершение хотелось бы подвести некоторые итоги.

1. Очень здорово, что мы запустили сам процесс обновления десктопной версии «ВКонтакте». Небольшими шажками мы будем двигаться в сторону того, чтобы обновить веб в будущем.
2. Достигли тех целей, которые мы поставили до момента начала редизайна.
3. 100 000 пользователей-добровольцев набралось за день. Это очень большая сумма, и очень здорово, что такое большое количество захотело обновить десктопную версию.
4. За момент обновления мы получили достаточно много положительных комментариев, которые дают нам понять, что мы всё сделали правильно и на верном пути. С каждым положительным комментарием хочется делать только лучше и больше, чтобы пользователям было только лучше.
5. Большое количество СМИ написало о запуске. Это действительно большой запуск.

Иван: Это было неожиданно и очень приятно, конечно.

Алексей: Это очень неожиданно, да.

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

Посмотреть выступление можно в видео:

The Brown Room — независимое интернет-издание про социальные сети и современные технологии.

Автор: Альберт Чёрный
Корректор: Лена Метцберг-Эдерле
Изображения: Команда ВКонтакте / Иван Барышев, Алексей Мазелюк