Концепция редизайна vk.com
- пятница, 22 августа 2014 г. в 03:11:16
http://habrahabr.ru/post/234083/
Не так давно, Вконтакте объявил о старте конкурса на редизайн. Как минимум, это будет интересно, подумал я. И принял участие. Все это вылилось в некую черновую концепцию, которой я и хочу поделится — надеюсь, мои мысли, идеи и рассуждения будут полезны хабрасообществу. Осторожно, трафик!
Пожалуй начну с небольшой истории. Мне приходилось заниматься редизайном одной социальной сети (к сожалению, эта соцсеть, mobrika.ru, на настоящий момент отключена, и редизайн тут не причем). Весь интерфейс был радикально изменен, а также проведен полный ребрендинг. Несмотря на то, что объективно все стало удобнее и привлекательнее, и весь функционал сохранен, примерная статистика была таковой: 10% пользователей положительно отнеслись к изменениям, 50% пользователей не высказали свое мнение, 40% пользователей были настроены крайне негативно. Почему? Люди не любят перемены. Впоследствии, я нашел подтверждение этому и во многих других проектах. Поэтому, в контексте vk.com, было сформулировано следующее главное правило будущего редизайна:
Интерфейс vk.com всегда отличался проcтотой, минималистичностью и высокой скоростью, выгодно выделяя соцсеть на фоне конкурентов. Но очевидно, что разработка шла без опоры на какие-либо гайдлайны. В визуальном плане мобильные приложения и веб-версия — абсолютно разные продукты.
Визуальное единство всех продуктов повысит доверие к бренду, позволит компании перейти на новый уровень развития и занять лидирующие позиции на мировом рынке.
В рамках предоставленных макетов уже можно увидеть некоторые подвижки в формировании нового визуального языка.
Незначительно изменена цветовая схема, стандартизованы элементы управления, появилось единство в оформлении контента, обновлены шрифты. Используется хорошо зарекомендовавший себя стек — font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; несмотря на поддержку подключаемых шрифтов всеми современными браузерами, до сих пор наблюдается снижение производительности и проблемы с рендерингом — для столь масштабных проектов все еще стоит использовать стандартные шрифты.
Все шрифты увеличены по умолчанию. Контент выделен более крупным кеглем (записи в новостной ленте, переписка в диалогах и т.д.)
Пункты очищены от ненужного местоимения «Мое…». Меню фиксируется при прокрутке страницы, таким образом необходимость в кнопке «Назад» пропадает. Пункт «Мои Настройки» перенесен в верхнее меню.
Все напоминания и рекламные объявления перенесены в правую колонку. Это повысит CTR объявлений, что в свою очередь увеличит прибыль компании.
Профиль пользователя практически не изменился. Небольшие косметические улучшения сделали новый дизайн компактнее, и в то же время добавили немного «воздуха».
Заголовки были объединены со счетчиками, избавив дизайн от лишнего визуального шума. Ссылка на новости, которые читает пользователь, перенесена в группу ссылок внизу колонки.
Миниатюры фотоальбомов стали немного шире, при этом более компактными и менее перегруженными с визуальной точки зрения.
То же самое случилось с видеозаписями. Дата добавления и количество комментариев упразднены за ненадобностью.
Прикрепленные ссылки стали компактнее, при этом они вмещают больше информации.
Новостная лента изменена согласно рекомендациям — добавлена форма создания новой записи и правая колонка с навигацией по разделам.
При фокусе форма разворачивается. В будущем, кроме прямой загрузки фотографий в форму, хотелось бы прикреплять перетаскиванием любые файлы, аналогично любому популярному почтовому веб-интерфейсу.
При клике на символ «+» он поворачивается на 45°, превращаясь в крестик. В это время выезжают настойки разделов ленты.
При прокрутке страницы, после того как колонка с фильтрацией скроется из виду, записи занимают всю ширину — аналогично просмотру стены пользователя текущей версии vk.com.
Интерфейс сообщений претерпел самые значительные изменения. В текущей версии vk.com есть небольшая путаница с заголовками — в меню раздел называется «Мои сообщения», в заголовках, в теге “title” используются «Диалоги». Предлагаю остановиться на заголовке «Сообщения». В англоязычной версии такой путаницы нет.
Страница навигации по диалогам превратилась в компактную правую колонку. Поиск ищет не только среди существующих сообщений, но также среди всех друзей. В колонке справа, после всех бесед выводятся друзья. Таким образом, в совокупности с поиском необходимость в ссылке «К списку друзей» исчезает. Песочным цветом подсвечиваются непрочитанные сообщения, светло-синим выбранная переписка.
Настройки оповещений и уведомлений обзавелись чекбоксами и переместились в соответствующий раскрывающийся список.
Раскрытое меню действий стало привлекательнее.
Одно из самых главных преимуществ редизайна существующего ресурса — возможность воспользоваться статистикой на основе реальных данных. В процессе работы у меня возникло множество вопросов: какова средняя длина сообщения, поста; какова средняя длина заголовков; насколько часто пользователи используют тот или иной функционал и т.д. Без опоры на подобную статистику нельзя гарантировать успешный редизайн.
Хотел упомянуть еще о нескольких моментах. Введение правой колонки отчасти было необходимостью, для того чтобы выдержать оптимальное количество символов в строке в контентной области (55-85 символов). Но также правая колонка принесет весьма полезный побочный эффект — увеличение CTR, а следовательно и прибыли компании.
Еще один приятный факт — редизайн предусматривает использование всех картинок в текущем размере — то есть не нужно будет перегенерировать n-e количество миллиардов изображений. На этом пожалуй все, спасибо за внимание.
Анонс конкурса
Итоги конкурса
Не так давно, Вконтакте объявил о старте конкурса на редизайн. Как минимум, это будет интересно, подумал я. И принял участие. Все это вылилось в некую черновую концепцию, которой я и хочу поделится — надеюсь, мои мысли, идеи и рассуждения будут полезны хабрасообществу. Осторожно, трафик!
Главное правило редизайна
Пожалуй начну с небольшой истории. Мне приходилось заниматься редизайном одной социальной сети (к сожалению, эта соцсеть, mobrika.ru, на настоящий момент отключена, и редизайн тут не причем). Весь интерфейс был радикально изменен, а также проведен полный ребрендинг. Несмотря на то, что объективно все стало удобнее и привлекательнее, и весь функционал сохранен, примерная статистика была таковой: 10% пользователей положительно отнеслись к изменениям, 50% пользователей не высказали свое мнение, 40% пользователей были настроены крайне негативно. Почему? Люди не любят перемены. Впоследствии, я нашел подтверждение этому и во многих других проектах. Поэтому, в контексте vk.com, было сформулировано следующее главное правило будущего редизайна:
Радикальное изменение интерфейса столь масштабного проекта с такой разнообразной аудиторией категорически противопоказано.
Брендинг и гайдлайны
Интерфейс vk.com всегда отличался проcтотой, минималистичностью и высокой скоростью, выгодно выделяя соцсеть на фоне конкурентов. Но очевидно, что разработка шла без опоры на какие-либо гайдлайны. В визуальном плане мобильные приложения и веб-версия — абсолютно разные продукты.
Разработка гайдлайнов, брендбука и приведение всех продуктов компании к единому знаменателю, должны стать первоочередными задачами.
Визуальное единство всех продуктов повысит доверие к бренду, позволит компании перейти на новый уровень развития и занять лидирующие позиции на мировом рынке.
В рамках предоставленных макетов уже можно увидеть некоторые подвижки в формировании нового визуального языка.
Незначительно изменена цветовая схема, стандартизованы элементы управления, появилось единство в оформлении контента, обновлены шрифты. Используется хорошо зарекомендовавший себя стек — font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; несмотря на поддержку подключаемых шрифтов всеми современными браузерами, до сих пор наблюдается снижение производительности и проблемы с рендерингом — для столь масштабных проектов все еще стоит использовать стандартные шрифты.
Глобальные изменения в интерфейсе
Увеличенные шрифты
Все шрифты увеличены по умолчанию. Контент выделен более крупным кеглем (записи в новостной ленте, переписка в диалогах и т.д.)
Обновленное меню
Пункты очищены от ненужного местоимения «Мое…». Меню фиксируется при прокрутке страницы, таким образом необходимость в кнопке «Назад» пропадает. Пункт «Мои Настройки» перенесен в верхнее меню.
Дополнительная колонка
Все напоминания и рекламные объявления перенесены в правую колонку. Это повысит CTR объявлений, что в свою очередь увеличит прибыль компании.
Профиль пользователя
Профиль пользователя практически не изменился. Небольшие косметические улучшения сделали новый дизайн компактнее, и в то же время добавили немного «воздуха».
Заголовки были объединены со счетчиками, избавив дизайн от лишнего визуального шума. Ссылка на новости, которые читает пользователь, перенесена в группу ссылок внизу колонки.
Миниатюры фотоальбомов стали немного шире, при этом более компактными и менее перегруженными с визуальной точки зрения.
То же самое случилось с видеозаписями. Дата добавления и количество комментариев упразднены за ненадобностью.
Прикрепленные ссылки стали компактнее, при этом они вмещают больше информации.
Новостная лента
Новостная лента изменена согласно рекомендациям — добавлена форма создания новой записи и правая колонка с навигацией по разделам.
При фокусе форма разворачивается. В будущем, кроме прямой загрузки фотографий в форму, хотелось бы прикреплять перетаскиванием любые файлы, аналогично любому популярному почтовому веб-интерфейсу.
При клике на символ «+» он поворачивается на 45°, превращаясь в крестик. В это время выезжают настойки разделов ленты.
При прокрутке страницы, после того как колонка с фильтрацией скроется из виду, записи занимают всю ширину — аналогично просмотру стены пользователя текущей версии vk.com.
Сообщения
Интерфейс сообщений претерпел самые значительные изменения. В текущей версии vk.com есть небольшая путаница с заголовками — в меню раздел называется «Мои сообщения», в заголовках, в теге “title” используются «Диалоги». Предлагаю остановиться на заголовке «Сообщения». В англоязычной версии такой путаницы нет.
Страница навигации по диалогам превратилась в компактную правую колонку. Поиск ищет не только среди существующих сообщений, но также среди всех друзей. В колонке справа, после всех бесед выводятся друзья. Таким образом, в совокупности с поиском необходимость в ссылке «К списку друзей» исчезает. Песочным цветом подсвечиваются непрочитанные сообщения, светло-синим выбранная переписка.
Настройки оповещений и уведомлений обзавелись чекбоксами и переместились в соответствующий раскрывающийся список.
Раскрытое меню действий стало привлекательнее.
Послесловие
Одно из самых главных преимуществ редизайна существующего ресурса — возможность воспользоваться статистикой на основе реальных данных. В процессе работы у меня возникло множество вопросов: какова средняя длина сообщения, поста; какова средняя длина заголовков; насколько часто пользователи используют тот или иной функционал и т.д. Без опоры на подобную статистику нельзя гарантировать успешный редизайн.
Хотел упомянуть еще о нескольких моментах. Введение правой колонки отчасти было необходимостью, для того чтобы выдержать оптимальное количество символов в строке в контентной области (55-85 символов). Но также правая колонка принесет весьма полезный побочный эффект — увеличение CTR, а следовательно и прибыли компании.
Еще один приятный факт — редизайн предусматривает использование всех картинок в текущем размере — то есть не нужно будет перегенерировать n-e количество миллиардов изображений. На этом пожалуй все, спасибо за внимание.
Ссылки
Анонс конкурса
Итоги конкурса