Скорый редизайн мобильных приложений и iOS. Первые концепты обновлений внешнего вида опубликованы в официальном блоге «ВКонтакте», в котором, помимо всего прочего, Князев также рассказал о работе дизайнеров в компании.
В клиентах и iOS снова появится таббар - единая навигационная панель с вкладками в нижней части экрана, охватывающая основной функционал. К слову, дизайнеры социальной сети отказались от нее в 2012 году. В новом видении дизайна таббар включает главные разделы «ВКонтакте»: «Новости», «Поиск и рекомендации», «Сообщения», «Уведомления» и меню пользователя. Боковое меню, судя по опубликованным скриншотам, в редизайне приложений полностью уберут.
Помимо кардинально нового пользовательского интерфейса, дизайнеры «ВКонтакте» с грядущим обновлением внешнего вида добавят и несколько функциональных нововведений. В разделе «Поиск и рекомендации» появятся прямоугольные истории пользователей, находящихся поблизости, а также лента потенциально интересных записей от новых авторов. Ведущий дизайнер «ВКонтакте» описывает новый раздел как «такую залипательную штуку, где можно найти что-то качественное и незнакомое с учётом личных предпочтений». В ленте новостей введут счетчик просмотров (сейчас он отображается только при открытии записи), а лайки станут красного цвета.
Когда выйдут обновленные
Рунет беден обзорами редизайна известных сайтов и сервисов. Эта статья не ради того, чтобы это исправить. Моя цель обсудить с сообществом решение одной из проблем веб-версии Вконтакте.
В прошлогоднем конкурсе на редизайн ВК, авторы конкурса упомянули о проблемах веб-версии. Проблемой номер один они назвали узкую ширину сайта. Я согласен с командой Вконтакте и решил построить свое решение в борьбе с этой проблемой.
Боль
Проблема №1 - Узкий экран
Помимо ширины экрана я выделил еще 2 проблемы.
Проблема №2 - Разный стиль веб-версии и приложений
Проблема №3 - Месенджер
Мессенджер в ВК появился сравнительно недавно. Первая его версия заметно выбивалась по стилю и со временем это решили. Основная проблема месенджера на мой взгляд это то, что он живет параллельно с сайтом. Окно переписки маленькое. И хоть оно и масштабируется, но оно привязано к абсолютным координатам - пользоваться сервисом не удобно. На Фейсбуке месенджер также живет отдельно от сайта, плодя при этом множество маленьких окон-переписок.
Теория - способы стать шире
Давайте сначала решим, что такое узкий экран. Текущая ширина ВК - 791пк. В конкурсном задании было сказано адаптировать сайт под разрешение от 1024пк. Как я вижу, решением проблемы узкого экрана будет интерфейс рабочий на разрешении 1024-1600пк. То есть интерфейс способный работать как на узком (1024пк) разрешении, так и на широком (1440+пк).1. Физическое растяжение
Решение в лоб - делаем сайт резиновым.
Плюсы:
+ Легко реализовать
Минусы:
− Контент становится не читаемым
− Нужно полностью пересматривать некоторые разделы сайта (например, друзья)
2. Параллельное изложение
Прием был замечен в концепции редизайна Фейсбука 2006 года от iA - комментарии расположены справа от постов. 5 лет назад я опробовал его на одном из своих проектов.
Плюсы:
+ Посты располагаются линейно, не разрываясь комментариями
+ Комментарии к постам видны сразу без дополнительных переходов
Минусы:
− Неравномерная плотность информации на экране
− Версия под 1024пк с большим трудом может быть создана или вынуждена отличаться от широкой
− Нужно полностью пересматривать некоторые разделы сайта
3. Смещаемые панели
Подход ставший популярным в веб-сервисах: срм-системах, таск-менеджерах. Экран состоит из зависимых панелей. Панели появляются справа друг от друга, если экран не вмещает все, то левые панели скрываются по мере появления правых.
Плюсы:
+ На маленьких разрешениях можно переключать панели, на большом показывать все сразу
+ Схожесть интерфейса с версией под планшеты
Минусы:
− Не привычный для веб-пользователей вариант
− Сайт расположен не в центре экрана, а слева
− Большой обьем архитектурной работы
− Отсутствие линейного просмотра, требуется клик по новости для прочтения комментариев
4. Два окна
Интерфейс с двумя активными рабочими разделами на экране.
Плюсы:
+ Требует мало изменений в текущем интерфейсе
Минусы:
− Не ясно как работать с 2 режимами одновременно и зачем
5. Две колонки
Режим отображения информации схожий с таймлайном на Фейсбуке. Концепт, основанный на этом варианте, победил в конкурсе редизайна ВК.
Плюсы:
+ Легко компоновать информацию
+ Равномерная плотность данных на экране
Минусы:
− Раздваивается внимание при чтении новостей
− Фейсбук
6. Карточки
Переход от вертикального повествования в сторону сетки. Пример - Пинтерест.
Плюсы:
+ Легко масштабируется под любое разрешение
Минусы:
− Трудно воспринимать контент (трудно переучиваться)
− Нужно полностью пересматривать все разделы сайта
Практика - мое решение
Свое решение я построил на 4-м подходе: экран с двумя активными окнами. Второе окно - месенджер. Это позволяет переписываться во время чтения новостей. При этом не используя 2 вкладки браузера.
На небольших (<1440пк) экранах окно чата сворачивается.
При желании оно открывается поверх основного контента. Сценарий ведения переписки во время чтения новостей работает также.
Сама панель пользователей с последними переписками остается на экране во всех разделах сайта:
Детали за кадром
Если всмотреться в скриншоты, то видны и другие изменения в интерфейсе:
1. Фон. Появился фон для повышения контраста блоков.
2. Разделение на блоки. Посты расклеились на независимые блоки.
3. Лайки переехали вверх. Пожалуй самое спорное изменение и, вероятно, заслуживает отдельного обсуждения.
4. Пропало прежнее верхнее меню. Все его функции уже были задублированы в разделах сайта. На его место встал уровень вкладок. Таким образом удалось сократить один этаж навигации. Фильтры (редко используемая вещь) переехали в выпадающий список. Пропал еще один этаж навигации.
5. Два режима просмотра друзей. Один заимствован из веб-версии, другой из планшетной. Трудно оценить какой популярнее и удобнее.
6. Личные заметки. Появился блок личных заметок о каждом друге. Кому понравилось, берите тут - VK Memos .
7. Веб-звонки. Они уже были раньше в ВК, но были сделаны как отдельный режим работы. Сейчас это незаметная функция, не мешающая основному серфингу и общению.
Вместо постскриптума
Разве может быть редизайн социальной сети без прототипа страницы пользователя.Текущая версия перегружена информацией: музыка, видео, группы, паблики, фотографии, фотографии на карте, фотоальбомы, друзья, общие друзья, друзья онлайн, подписчики… Я решил отрезать все лишнее:
На этом все, спасибо за внимание.
Все плохо
Я оцениваю данный редизайн как не соответствующий профессиональному уровню: слишком много важных функций сайта сделали хуже, чем были, а мелочи, которые дополняли и делали сайт отличающимся, убрали или превратили в хлам.
Стоило вводить редизайн постепенно
Работа была проделана большая, и это понятно: перезапустили все сразу, что в принципе неправильно. Лучше было бы обновлять сайт частями, как делает Facebook. Ведь пользователя нужно подготавливать к новому, частями тестировать новые вещи и потом постепенно их запускать на основе отзывов.
Синий гроб, прибитый вверху
Фиксированную шапку можно делать такой, если в ней есть важный контент. Сейчас в ней, кроме поиска и иконки аудиозаписей, нет ничего, сплошной фиксированный гроб, который отвлекает.
Страница новостей стала уже и захламленнее
Фотография стала открываться как в фейсбуке
Топ-5 менее заметных недостатков
Неявные для глаз, но явные для мозга. Вот ключевые.
- Иконки-пиктограммы в меню
- Бледно-серый фон, который убрал чистоту старой версии
- Левая колонка в профиле при скролле фиксируется и не дает расширить новости на всю ширину допустимого контента (как это было в старой версии)
- Новый логотип не вписывается в шапку и создает еще больше пустого пространства
- Мой индикатор активности (онлайн) в моем же профиле! Это край логики! Мало того что существует текстовый индикатор возле моего имени в профиле, так теперь есть еще и зеленый кружок
Самое раздражающее для пользователей
Так ли все плохо на самом деле? Альтернативное мнение эксперта
Виктор Козырев
UX-дизайнер в Frog Design, Badoo и Cogniance; cоздатель приложения Spender
«Возможно, многие ожидают от больших компаний более радикальных и агрессивных шагов в дизайне, но, на мой взгляд, «ВКонтакте» пошли по прагматичному пути и решили конкретные задачи. Бросается в глаза новый визуальный стиль, который однозначно стал современнее и приятнее. Также навигация была переработана и упрощена. Теперь все смотрится лаконичнее и воспринимается легче. Типографика аккуратная, чисто и контрастно, что обеспечивает комфортное использование для большинства пользователей.
Шрифт «ВКонтакте», который видит пользователь, зависит от его версии операционной системы и браузера (пользователи iOS будут видеть шрифты San Francisco, а Android будут видеть Roboto). За счет использования системных шрифтов, пользователь получает почти привычный для него и за счет этого ненавязчивый, комфортный look-and-feel-продукт.
Следует быть готовым к тому, что большинство аудитории будет негодовать в любом случае, независимо от характера изменений. Это можно понять: среднестатистический пользователь не всегда может моментально оценить потенциальную выгоду от изменений. А вот дискомфорт от потери привычных удобств ощущается сразу. Не потому, что старые решения так уж хороши, а потому, что люди привыкли. Это объясняется психологией. Большую часть аудитории будет раздражать сам факт редизайна в принципе. А поводом может стать любая деталь, которая зацепит больше всего: кто-то заметит разницу в шрифте или иконках, а кто-то будет придираться к новой навигации.
Я лично не являюсь поклонником трехколоночного лейаута и попытался бы упростить его, чтобы сделать страницы более простыми в восприятии. В частности, это касается профиля пользователя. Страница кажется перегруженной, визуально однородной, не хватает правильно расставленных визуальных акцентов. Несмотря на больше количество схожих решений, «ВКонтакте» все равно выглядит чище и современнее, а интерфейс воспринимается проще».
Если вы все-таки хотите вернуть старый дизайн «ВКонтакте», то скачайте расширение для браузера Stylish. После его установки необходимо открыть страницу стиля для старого дизайна соцсети, нажать кнопку «Install with Stylish», подтвердить выбор нового стиля и перезагрузить браузер.
Написать про новый дизайн? Ну наканецта!
!!! Внимание!!! В общем, сразу предупреждаю, что я оцениваю дизайн не только как пользователь, но и как дизайнер (в том числе имеющий отношение к вебу) и напишу много не только про сам дизайн, но и про то, почему так много недовольных. И будет многа букав!
Насчет того, почему все так непривычно:
Как только первого апреля (из-за чего все очень сомневались в серьезности обновления) стал доступен новый дизайн с ограниченным бета-тестированием, я сразу зашел в блог Вк и подключился. После этого принялся скакать по всем разделам и смотреть что да как там. В первый же день нашел около пяти багов, которые сразу отправил администрации для исправления. Не исправили только один, который считают логическим (то, что нельзя переслать изображение другу например из сообщества или ленты и после этого сохранить его в альбом. логика в том, что мол сам отправил - значит зачем сохранять), но эта штука была и в прошлом дизайне.
После этого я опубликовал в своем сообществе с краткой информацией о редизайне и голосованием. Стало интересно, как первые пользователи отреагируют. Большинство жаловались на то, что не могут найти какой-то функционал, например тумблер в сообщениях (который легко находится если навести мышку на край диалогового окна). Да, такие элементы интерфейса очень непривычные на фоне всего того, что было в рунете в последнее время. Но это не проблема нового дизайна. Это проблема того дизайн-мышления, которое сформировалось в рунете за последние годы. У нас очень редко делают прогрессивный и хороший (!) дизайн, который становится удобнее и эволюционирует плавно и равномерно, позволяя пользователю привыкать к новым элементам, более интуитивным и правильным с точки зрения UX (user experience - та часть дизайна интерфейсов, которая отвечает за доступность пользователю и удобство). Вместо этого мы имеем резкие скачки у самых прогрессивных разработчиков, которые вызывают волну недопонимания со стороны пользователей. И все это на фоне огромного количества сайтов с ужасным дизайном, который неудобен но просто напросто привычен. А все потому, что делают сайты обычно либо дешево, либо по принципу "вот как у них надо". Те, кто имеют потенциал и могут творить прогресс, просто напросто не работают за те деньги, которые предлагают в рунете, и уходят делать хорошо и дорого к зарубежным ребятам. Вот это все очень печально и вот почему введение нового дизайна Вк напоминает крещение Руси. Но через некоторое время пользователи привыкнут, запомнят где что изменилось и поймут, что все не так плохо.
Насчет того, что "косите под фейсбук, ну хоть лента без чужих лайков!".
Дело в том, что дизайн эволюционирует и пока что оптимальным считается , который называют так же дизайном форм и содержания. Его разработал не так давно Google и многие его подхватили.
В нем все базируется на пропорциональных элементах и акцентах, что делает его очень простым и понятным в умелых ручках разработчика. Вот все эти выезжающие слева в приложениях панельки с профилем, например, - это все оно.
Давайте вспомним как те же телефоны выглядели лет 10-15 назад. Каждая модель Nokia была чем-то совершенно новым: все эти выдвижные панели, раскладные во все стороны экраны, безумнейшие расположения клавиатур - это все было очень круто. При этом не помню жалоб на непонимание новинок, все ведь было такое новое, интересное и крутое!
Но с прогрессом все свелось к простой пластинке с кнопкой сверху и двумя сбоку (или тремя сзади как у LGE). Теперь продукт либо как у кого-то, либо новый и не понятный. Сейчас нет смысла изобретать велосипед, тем более если он будет менее удобен, чем тот, который уже есть. Просто напросто теперь дизайн устройств и интерфейсов, веб-дизайн пришли к оптимуму и лучше сделать становится все труднее. Крупные производители не на столько глупые, что копируют друг у друга, они на столько грамотные, что принимают те правила, которые определяют удобство, и они наконец пришли к общей концепции.
То же касается и дизайна в социальных сетях. Разработчики в последнюю очередь хотят чтобы им сказали, что они украли дизайн. Нет. Никто не осудит вас, если вы сделаешь стул похожий на тысячи других стульев. Икеа так и делает: они делают до боли банальные, но простые и хорошие вещи. Тогда в чем же проблема с веб-дизайном?
Теперь вот мое субъективное "думаю" насчет уже самого нового Вк:
Стало лучше. Вот правда. Старая версия менялась на столько мало, что она уже скорее похожа на старые тематические форумы из двухтысячных, чем на современную социальную сеть. Теперь мобильная версия и приложения стали иметь много общего с сайтом. Это ведь замечательно. Появилась логичная связь между ними. В сообществах исчезли эти уродские многоэтажные аватары на пол страницы с "Подпишись" и так далее. Теперь оповещения можно проверить кликом не уходя со страницы, это ведь просто лайки и ответы, а не графа для отдельного созерцания. Фотографии с ответами теперь дополняют друг друга при открытии, а не уходят в бесконечность вниз.
Насчет сообщений: Я общаюсь в Вк много (5-20 диалогов в день) и вот этот новый формат меня очень радует. Те же, кто не доволен, спокойно могут перейти на старый формат нажав на шестеренку внизу экрана и изменив настройки. Все должны быть довольны, разве нет?
В то же время я согласен