История одного меню
19 ноября 2020 года в Санкт-Петербурге, в новом зале ИТМО на Ломоносова, 7, прошёл первый VK Tech Talks · Design. Илья Гришин, руководитель дизайна суперприложения «ВКонтакте», рассказал о преображении самого важного раздела в мобильном приложении VK — меню.
Как было раньше
Приложение VK сейчас — это мессенджер, друзья, музыка, а также мини-приложения, такие как покупки, такси, еда и другие.
Но когда-то меню располагалось в левой части приложения и находилось в шторке. Все пункты меню умещались на один экран. Ниже располагались дни рождения, и кажется, что всё было здорово.
Но «ВКонтакте» менялся, расширялся, и в какой-то момент навигация изменилась. Часть разделов оказалась в таббаре, а на пятой его вкладке появился раздел, в котором расположились остальные пункты меню.
«ВКонтакте» рос, у него менялась структура, увеличилось количество разделов, поэтому в какой-то момент изменилось его меню в том числе. Оно становилось более персонализированным, в нём появлялись различные разделы, которые располагались по популярности. Если вам нравился тот или иной раздел, мы старались повышать его. Те разделы, которые вы не использовали, становились ниже или попадали под кнопку «Ещё». Позже добавились VK Pay и сервисы.
В левом меню была достаточно удобная история с тем, что на платформе Android у нас располагались списки друзей и сообществ, дни рождения — мы не забыли об этом и на пятой вкладке. Там расположились ваши любимые избранные сервисы и игры, которые вы добавляли сами, а мой самый любимый виджет, который там есть — это дни рождения.
Виджеты приходились по душе и обычным пользователям. Нам в VK Designers предлагали размещать их по-другому, например, над меню, чтобы виджеты были на самом видном месте и перелистывались. Пользователям это казалось достаточно удобным.
«ВКонтакте» продолжал меняться и после этого. У нас менялась структура, увеличивалось количество разделов, менялась стратегия, и мы уже тогда думали, что нужно закладывать совершенно новый фундамент приложения, менять его стиль, двигаться к некоторому упрощению. Одним из концептов, как могло выглядеть меню, показано ниже. Пункты становились цветными, превращались в сетку. Мы уже тогда отказывались от синей шапки в пользу чего-то белого или его отсутствия, чтобы приложение выглядело как можно более просто.
Мы не забывали о виджетах, группировали меню в какую-то другую единую форму, а виджеты по-прежнему располагались где-то внизу и приобретали свои некоторые очертания.
В конечном итоге мы преобразовали меню чуть глобальнее. Оно оказалось на второй вкладке, туда попали те разделы, которые несли рекомендательный характер. Там же добавили мини-приложения и игры. А в правом меню оказалась более персонализированная вкладка для пользователей. В ней мы разместили закладки и то, что принадлежит именно вам.
Новый этап в меню «ВКонтакте»
«ВКонтакте», как и любой продукт, имеет достаточно большую структуру, в которой есть ряд изолированных модулей и единиц. В нашем случае это друзья, новости, сообщества, музыка и мессенджер.
Но ни один продукт не является продуктом, если его модули не начинают взаимодействовать друг с другом. Только когда эти модули начинают обмениваться информацией и упрощать вам жизнь, тогда всё становится приложением, некоторой экосистемой.
Эти модули могут понятно обосновываться физическим объектом — походным рюкзаком. Когда вы идёте в поход, вы берёте множество различных вещей. Это тоже функционально изолированные единицы: кружки, спички, спальный мешок, фонарик и прочее. Их наполняют различные переменные, которые дополняют эти вещи, либо они дополняют друг друга, тем самым наполняя рюкзак, который, по сути, является вашим приложением. Рюкзак со всеми этими модулями очень похож на приложение.
Что круто — все вещи, которые есть в рюкзаке, располагаются в определённом порядке. Все как правило часто используемые вещи вы кладёте наверх рюкзака. Всё, что вам менее нужно, вы кладёте вниз. Так и с меню. Всё самое нужное вы располагаете сверху, а те вещи, которые вам нужны в последнюю очередь, располагаются чуть ниже. Это некоторое ранжирование, используемое в нашем меню.
С большим рюкзаком достаточно сложно перемещаться. А лучше всего ехать на велосипеде, особенно в какую-то долгую дорогу. Это и приятнее, и в целом круче. И это некоторая метафора для нашего блока с экосистемными приложениями. Вы можете делать несколько вещей параллельно: вызывать такси, продолжая пользоваться сервисами «ВКонтакте». Заказывая еду, вы можете делать всё остальное. И это здорово!
Но иногда всё не заканчивается на тех самых походных рюкзаках. Есть вещи, которые действительно нужны нам здесь и сейчас. Чтобы не рыться в рюкзаке, мы кладём их в карманы, и эти карманы располагаются у нас на самых близких местах. Ключи, например.
Эти карманы символизируют наши виджеты. То, что делается одним действием, располагается ниже.
Так и выглядит вторая вкладка, и наполняется меню, экосистемными разделами и виджетами, которые находятся ниже.
Мы наполнили вкладку контентом, смыслом, и кажется, что можно отдавать её в продакшен: тут систематизированы скругления, цвета, есть общая логика. Но, как правило, этого совершенно недостаточно. И важно помнить достаточно простую вещь, что ваша задача не заканчивается в Figma.
Как только вы нарисовали продукт, недостаточно его просто нарисовать. И даже когда вы отдадите графику разработчику и скажете ему, как верстать и какие там правильные цвета, на этом ваш дизайн не закончится.
В общем-то, виджеты для нас супернеизведанная территория. Мы долго экспериментировали с меню, у нас появлялись какие-то разделы, и кажется, что здесь всё совершенно понятно. Но при этом виджеты с их появившимися контекстами, в том числе с появлением «Такси» и «Еды», немного расширили нам понимание о том, как они должны работать.
И потому виджеты должны подчиняться каким-то контекстам. То есть каждый новый пункт меню, каждое появление нового действия в приложении, это новый контекст. Так мы, например, обогатили наши виджеты появлением погоды, заказа еды, вызовом такси. В общем-то, вкладка расширилась. Результаты спорта можете теперь смотреть с помощью этих виджетов.
Но они должны жить не только по контекстам, но и по правилам. И о таких вещах нужно думать в том числе. Важно понимать, что виджеты могут быть разных характеров. Например, они не всегда призывают вас нажать на себя, им достаточно нести в себе какой-то информативный характер: рассказать о том, что сегодня или прямо сейчас такая погода, а Россия играет со сборной Сербии.
И эти виджеты нужно ранжировать различным образом. Они могут отличаться и появляться в различное время суток. Утром вам важнее поехать на такси, например, или заказать себе завтрак. Иногда их важнее ранжировать по геолокации — вы не всегда находитесь дома или где-либо ещё. Если подключаете к телефону наушники, тогда логичнее повыше поставить виджет с любимой музыкой, чтобы вы могли включить её в один клик. Не забудем и о популярности. Вы кликаете на различные виджеты, они вам нравятся, есть смысл показывать их выше. Например, вы хотите каждый день видеть новости о коронавирусе. Всё это абсолютно персонализированно.
При этом, пока мы рисовали виджеты, у нас их появилось огромное количество, и мы всё чаще находили больше общих деталей среди них. Были очень похожи левые части, было похоже наполнение, вырисовывалась система и структура. И мы взяли это за правило.
Важное правило — это наведение порядка в ваших же виджетах, в вашем же контенте, чтобы потом превратить это в некоторую систему. Когда вы складываете вещи в рюкзак, вы тоже укладываете их по некоторой системе, общим признакам.
Мы находим много общего и среди наших виджетов. И собрали из этого целую систему определённых лэйаутов, которые позволяют нам просто сделать их однажды на клиенте, и просто запускать их с бэкенда с одной лишь конфигурации. Абсолютно любые виджеты, наполнять их любым контентом, когда нам захочется. Примеры этих виджетов:
На этом задачи дизайнеров не заканчиваются, чтобы макет дошёл до пользователя, нужно донести требования до разработчиков, это облегчит им жизнь в разработке.
Но и это ещё не последний шаг в жизни дизайнера. Вы не всегда будете занимать одной и той же задачей. Это какая-то изолированная функция, которая должна отправиться без вас в дальнейшее плавание. И если вы хотите, чтобы ваша функция работала именно так, как вы хотите, задайте ей правило, расскажите принципы. Это одна из частей, по которой работают работают наши виджеты. Все создающие новые функции внутри нашей вкладки ориентируются в том числе на эти принципы:
Мы начинали с левого меню, в котором располагались все наши пункты. Оно было с виджетами, днями рождения, и выросло в нечто большее. Затем оно переместилось в пятую вкладку, часть его пунктов расположились в таббаре. Мысли о виджетах были и здесь. Придумали персонализацию. И меню стало больше.
В конечном итоге мы оказались в точке, где меню обросло новыми функциями и стало только удобнее. Вот так выглядит наша вкладка «Сервисы».
На этом у меня всё, всем спасибо и хороших вам путешествий!
Посмотреть запись выступления можно тут:
The Brown Room — независимое интернет-издание про социальные сети и современные технологии.
Авторы: Владислав Сатонин, Альберт Чёрный
Редактор-корректор: Альберт Чёрный
Изображения: Команда ВКонтакте / Илья Гришин