Концепция редизайна vk.com



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


    Главное правило редизайна


    Пожалуй начну с небольшой истории. Мне приходилось заниматься редизайном одной социальной сети (к сожалению, эта соцсеть, 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 количество миллиардов изображений. На этом пожалуй все, спасибо за внимание.

    Ссылки


    Анонс конкурса
    Итоги конкурса
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 143

      0
      В сообщениях на сайдбаре с друзьями — это открытые в данный момент диалоги (которые сейчас вверху с крестиками) или список диалогов которые вообще есть на странице /im?
        0
        Список всех диалогов, сортируется по дате последнего сообщения. Предполагаю, что открытые диалоги в табах в большинстве случаев свежие, поэтому этот сайдбар в какой-то степени компенсирует их отсутствие.
        +39
        «При клике на символ «+» он поварачивается на 90°, превращаясь в крестик.» — Что простите?
        • UFO just landed and posted this here
            +21
            в том то и дело, что это 45 градусов) если повернуть на 90, то ничего не поменяется
            • UFO just landed and posted this here
                0
                Неплохая идея для капчи на вход на сайты категории 18+…
                Или 30+…
                  +2
                  Думаю, в среднем, школьники это знают лучше, чем те, кто старше;) А вот для технического сайта — да.
                +1
                если не поменяется, но надо еще раз повернуть
                  +1
                  Прям как USB
                    0
                    у USB хотя бы со второй итерации гарантирован успех. С поворачиванием плюса на 90 градусов успех не очень гарантирован
                      +1
                      Это смотря по какой оси вертеть, знаете ли ;)
                        +2
                        Как показывает опыт, далеко не всегда у USB во второй итерации гарантирован успех
                +3
                Возможно имелось ввиду на 45 градусов. И из символа + «брюки превращаются» в x.

                UPD: Виноват, долго не обновлял страницу…
                  +1
                  спасибо, исправил, конечно 45°
                    –11
                    а повАрачивается не исправите?
                      +5
                      Исправил, спасибо. Такое все-таки лучше в личку.
                        –13
                          –15
                          Сколько ж неадекватных людей. Это я про минусующих. Вдогонку к моему «вот» добавлю, что все минусующие ССУТ обосновать свой минус, зная хабражителей, что их же и заминусуют за их обоснования. ССЫКУНЫ!
                          Посмотрим сколько человек нк зассут минуснуть этот пост обосновав!
                            +4
                            О мелких ошибках и опечатках принято сообщать в личные сообщения (зайдя в профиль и кликнув на кнопку image которая находится вверху, справа от рейтинга).
                            К мелким относятся опечатки и небольшие огрехи перевода (топорность и пр.), если какой-то кусок переведен плохо, например упущен смысл, то обычно приводят цитату.
                              –9
                              Какие все озлобленные :)
                              Мне кажется, если у нас произойдет что-то наподобии Укр.кризиса у нас все друг друга с гавном съедят. Судя по упавшей карме моей. Да и насрать! Надо было давно слушать тех, кто говорил про хабр и неторт.

                              ЗЫ: и про «принято»: это принято или в правилах?

                              ЗЫЗЫ: и все же большинство ронятелей карморейтинга — ССЫКУНЫ!
                                0
                                Я ещё могу понять, когда такие вещи говорят в контексте забивания кармы ценным людям, которые дали Хабру хорошие статьи. Были такие случаи. Но это же не про вас.
                                  –6
                                  Не про меня. Все — козлы! Мне уже нечего терять :)
                                    0
                                    Эвон как разарвало пассажира… Минусанул почти каждый ваш коммент в этой ветке, ибо полнейшая неадекватность и соципатия
                                      –2
                                      начиная с первого? И второй, да?
                                        0
                                        ЧТо-то все плохо стараются, чтобы меня слить поскорее. Лучше бы на РОИ так плюсовали :)))
                  +4
                  А были мысли о том, чтобы побороться за пустующую часть экрана?
                    0
                    И превратить ВК в ФБ? В том то и дело, что дизайн ВК создаёт некую «подвешенность» и пространство.
                      +3
                      а разве оно не превращается в ФБ, цветовая палитра очень похожа… да и не только палитра, а и компоновка некоторых элементов…
                        +4
                        Это была первая мысль после строк «переносим рекламу и оповещения вправо».
                          0
                          ну не знаю даже. По моему мнению, ВКонтакте не похож на ФБ хотя бы потому, что его интерфейсом пользоваться можно. Интерфейс фейсбука настолько запутан и сложен, что пользование им вызывает довольно сильную попоболь.
                      +11
                      Избавиться от фонов и рамочек смелости не хватило? :)
                        +7
                        субъективщина — но контент на белом фоне в обрамлении более темного фона — смотрится плохо, особеннона широких мониторах плохо.
                          –1
                          а на видео в десктопной версии будет количество лайков видно? на мобильной видно, а на десктопной нет, и когда возле компа непонятно на какое д…
                          извините, кажется не туда пишу
                            +17
                            Дорогой ВК я возможно вхожу в ту 40% аудиторию, которая негативно настроена на изменении вашего дизайна по крайней мере в том направлении, в котором вы двигаетесь.

                            У вас легкий, функциональный, чистый дизайн, которому ничего не нужно!

                            Зачем этот синий фон по краям… он очень, как бы выразиться, перегружает восприятие, делает вид сайта очень тяжелым…
                            Вы начинаете двигаться в сторону фб, который как гора мусора, видя, которую теряется весь интерес к ресурсу
                            Вы сейчас имеете очень большое преимущество над фб у российской аудитории, потому что ВК быстрый и понятный.
                            Да перемены нужны, новые фичи и все такое, но дизайн я вам хочу сказать надо еще продумать, на конкурсе были хорошие варианты.
                            Посмотрите как удачно обновил дизайн наш любимый Хабрхабр. Сохранив свой привычный и легкий дизайн добавил удобную навигацию слева.
                            Мы любим ВК, конечно же мы от вас не откажемся, но еще подумайте на счет фона и заполнения пустого пространства.

                            Да именно синий фон меня просто удручает, все остальное сделано верно и хорошо!
                              +11
                              Я согласен с тем, что дизайн ВК надо менять очень осторожно, либо вообще не трогать.
                              Но категорически не согласен с тем, что обновление дизайна Хабрахабра — пример для подражания: если посмотреть комментарии к новости о редизайне, то можно увидеть огромное количество негатива и критики. И многие комментаторы довольно аргументированно обосновали свою позицию.
                                0
                                Ну как раз об этом и написал автор статьи, что аудитория делиться на несколько групп. В целом для меня дизайн Хабра остался по восприятию без изменения. Как была лента так она и осталась, как было оформление постов так оно и осталось, ничего координатно нового за исключением бара слева не появилось, в частности, в повседневном использования я не вижу. По этому и предложил его для сравнения. Так что не думаю что здесь стоит поднимать холивар по поводу дизайна Хабра, тем более это уже активно обсуждалось в соответствующей теме.
                                  +1
                                  Можно кардинально менять интерфейс, но иметь возможность возврата к старому. Вести статистику, какой чаще используется, и на основе неё делать выводы о жизнеспособности решения.
                                +3
                                > Меню фиксируется при прокрутке страницы, таким образом необходимость в кнопке «Назад» пропадает.
                                > Все напоминания и рекламные объявления перенесены в правую колонку. Это повысит CTR объявлений, что в свою очередь увеличит прибыль компании.
                                > записи занимают всю ширину — аналогично просмотру стены пользователя текущей версии vk.com.

                                Первые два пункта противоречат третьему. Да и вообще, ухудшают внешний вид сайта.

                                > Прикрепленные ссылки стали компактнее,

                                И перестали быть ссылками

                                А большего всего умиляет конечно же «упразднение за ненадобностью». Если оно вам не надо, то это не значит, что это нужно вырезать…
                                  0
                                  Поддерживаю вас, «упразднение за ненадобностью» требует явной аргументации, особенно при отсутствии реальной статистики ресурса.
                                  +10
                                  <имхо>
                                  Хватит уже единства интерфейса мобильной и десктопной версии, я не видел ещё не одного примера, когда превращение нормальной версии сайта или программы, в почти мобильную версию, делало продукт более удобным.
                                  Нормальные и, что важно, понятные кнопки с текстом, превращают в странную пимпу с иконкой, и непонятным назначением.
                                  По воле дизайнера некоторые, не самые распространеные действия прячутся под несколькими подменю => кликами, по пимпам с незнакомыми иконками.
                                  А как классно глючат все эти прикрепленые меню и панели в мобильном браузере…
                                  Всеобщее упрощение интерфейсов просто начинает выбешивать, если ты хоть чуть-чуть отошёл от «типового поведения пользователя».
                                  Хватит, пожалуйста.
                                  </имхо>
                                    +1
                                    Я о визуальном единстве. Использование хотя бы одинаковой цветовой схемы для всех продуктов и одинаковых иконок уже создаст какую-то общность.
                                      0
                                      Вы думаете, сейчас десктопная и мобильная версии разобщены и не ассоциируются друг с другом? Это же социальная сеть, в нее заходят ради общения и информации. Пока несколько версий сайта корректно работают и предоставляют доступ к ОДНОЙ И ТОЙ ЖЕ информации, они могут выглядеть по-разному. Это некоторый бардак, но не очень большая проблема.
                                    –1
                                    Мне нравится дизайн. Он осовременен и избавлен от лишних деталей, а главное — функционально ничего не изменилось. Пользователей не введет в ступор новое оформление все где было там и осталось.
                                      +3
                                      ВЕРНИ СТЕНУ, ДУРОВ!11
                                        +20
                                        image
                                        • UFO just landed and posted this here
                                        +28
                                        «Дата добавления и количество комментариев упразднены за ненадобностью».
                                        То есть как? «За ненадобностью» кому?
                                          –10
                                          В качестве примера — посмотрите на колонку «Популярное за сутки» на хабре — ведь у каждой статьи есть и дата добавления и комментарии. Только почему-то их не выводят. А потому что они здесь не нужны.

                                          Разумеется, на странице просмотра видео все это будет присутствовать.
                                            +4
                                            А как же девушка, вывесившая свежее видео из отпуска и жаждущая признания, будет отслеживать, что видео набирает комментарии и лайки? :)

                                            (это просто пример сценария использования)
                                              –2
                                              Я не думаю, что она будет заходить на свою страницу, проматывать страницу до блока видеозаписей. Да и кстати, лайки там и так не выводятся. Всю активность она увидит в уведомлениях, либо откроет страницу с этим видео.
                                              –4
                                              Минусующие, объясните в чем я не прав? Вконтакте выводит дату с точностью до минуты. Зачем вам эта информация? У меня нет точной статистики, но на основе той сотни аккаунтов, которые я просмотрел, только у пары человек были какие-то комментарии. У остальных 98, было написано «0 комментариев». Зачем вам это знать?
                                                +4
                                                Во-первых, так удобнее ориентироваться. Гораздо информативнее выглядит «20 августа в 5:55», чем «вчера». Когда вчера? Утром? Вечером в без одной минуты двенадцать?
                                                Во-вторых, иногда бывает просто интересно. Всегда ненавидел сайты с неинформативными «месяц назад, вчера, сегодня».
                                                Когда говорите «за ненадобностью», пишите либо «ненадобностью мне», либо прикрепляйте ссылку на опрос, где вы узнавали мнение людей. Глупо приходить на Хабр с голословными утверждениями по типу этого.
                                                  –2
                                                  Речь не о формате вывода даты, а о необходимости вывода даты и количества комментариев в блоке видеозаписи на странице профиля пользователя в сайдбаре.
                                                    –1
                                                    Серьезно? А как же это?
                                                      0
                                                      Серьезно. Моя фраза «Дата добавления и количество комментариев упразднены за ненадобностью», и вся эта ветка комментариев об этом
                                                        –1
                                                        А почему тогда на приведенной мной картинке написано «вчера» вместо «N чего-то назад»?
                                                  0
                                                  Минимализм — отличная штука. Пока он не идет во вред функционалу.

                                                  Если комментариев нет, то есть два варианта: показывать «Нет комментариев» или не показывать ничего.
                                                  Если комментарии есть — показывать их количество.
                                                  Это ведь разумно и не сложно, правда?

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

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

                                                  У вас есть три выхода:
                                                  — Оставить как есть и ничего не менять (Х секунд/минут/часов назад, вчера в ЧЧ: ММ, ДД ммм (гггг) в ЧЧ: ММ)
                                                  Самое, как мне кажется, правильное решение. Можно его улучшить, показывая полную дату-время при наведении.
                                                  — Сократить отображаемую дату (как на этой картинке, справа), но при наведении показывать точное время, например используя тэг time.
                                                  Это компромисс, но всё равно в ущерб функционалу.
                                                  — Убрать точное время
                                                  Вот вам задачка: найдите у себя в новостях вчерашнюю запись, утреннюю, если в сутки у вас 200+ новостей.
                                                  А теперь то же самое, но запись была неделю назад.
                                                  Удобно? Я сомневаюсь. А это довольно частый юзкейс.
                                                  Второй вариант — не так уж плох, но первый всё равно лучше, имхо.

                                                  И еще, большая просьба: проводите ОБТ нового дизайна перед его запуском.
                                                    +1
                                                    Пришло в голову, что дату отображать как: день время суток, например:
                                                    — сегодня днём
                                                    — вчера вечером
                                                    — 23 сентября ночью
                                                    — 1 августа утром
                                                    По наведению на дату показывать точное время.
                                                    Время суток можно сделать кликабельным и по нажатию показывать все записи, опубликованные в соответствующее время суток.

                                                    Аргументация:
                                                    1. Для подавляющего большинства пользователей (пользователей ВКонтакте особенно) не слишком важно было ли сообщение опубликовано в 9:38 или в 11:25 — и то и другое можно обозначить как «утро».

                                                    2. Цифры времени — они обезличены с эмоциональной точки зрения, а названия времени суток — у каждого вызывают ту или иную ассоциацию и определенное эмоциональное отношение. Т.о. восприниматься будет интереснее.

                                              +8
                                              Это один из вариантов редизайна ВК. Победителей пятеро, и как разработчики воспользуются работами победителей — пока сокрыто.
                                              Тенденция заметна: у вконтакте, по мнению участников, слишком много свободного места — в базовом режиме используется всего два столбца! Это можно исправить — пусть столбцов будет четыре! Ну и что что у Фейбука так, и он перегружен?
                                              Плюс желание вынести иконки с сообщениями в шапку, как у Фейсбука.
                                              Также — сделать фоточки принудительно круглыми.
                                              А по поводу
                                              Дата добавления и количество комментариев упразднены за ненадобностью.

                                              хочется перефразировать Самюэля Лерой Джексона — «Что этот дизайнер себе позволяет?»
                                                +2
                                                В редизайне автора мне понравились нерадикальные изменения текущего дизайна. Для Вк вредно «все переделать заново», а вот подчистить текущее очень не помешает. Кстати, посмотрел итоги конкурса и с удивлением увидел, что первое место занял Паша — мой бывший студент (первый выпуск UX-школы, которую я веду).
                                                • UFO just landed and posted this here
                                                  0
                                                  Как по мне, так очень много голубого. Известно, что самый неприятный цвет для глаз — это синий. Так же реклама справа раздражает, потому что постоянно ведя взглядом слева на право останавливаешься на ней.
                                                    +4
                                                    а почему все джинсы синие?
                                                      +8
                                                      Кому известно?
                                                        0
                                                        Ян Эвангелиста Пуркине. Почитайте о том, какой эффект от открыл.
                                                        0
                                                        Согласен, бока настойчиво мозолят глаза.
                                                          0
                                                          Простите, что? С каких это пор синий неприятный для глаз цвет? Все известные мне исследования говорят обратное.
                                                          В макете цвет тона просто слишком насыщенный и отдает фиолетовым, вот и все.
                                                            0
                                                            Почитайте о феномене Пуркинье. У палочек в наших глазах повышенная чувствительность к синему свету. Еще в периферийном зрении синий кажется ярче. И вот как раз эти бока и будут раздражать. Возможно, я неправильно изложил свою мысль. Синий цвет будет восприниматься ярче нашими глазами, и при долгой работе будет раздражать.
                                                              +1
                                                              Нет никакой связи между раздражением от цветовых отношений и чувствительностью к тому или иному диапазону. Во-первых эффект Пуркинье наиболее заметен в сумеречное время суток (а не на подсвеченном экране с ограниченным цветовым диапазоном), во-вторых реакция на цветовые отношения явление психологическое. И уж точно повышенная чувствительность к цвету не говорит что он наиболее неприятен для субъективного восприятия.
                                                          +1
                                                          Меню фиксируется при прокрутке страницы

                                                          Именно из-за фиксированных элементов страница начинает тормозить при прокрутке и другой анимации. Фиксированные элементы должны быть минимальными, при этом прозрачность фиксированным элиментам следует придавать в случае крайней необходимости.
                                                          • UFO just landed and posted this here
                                                            0
                                                            А я-то было надеялся на какие-то более радикальные изменения, типа — vk.com/doc6492_322025961?hash=da2db8c8a6f3bac5ab&dl=ad3f8250427e658134.
                                                            Печаль
                                                            • UFO just landed and posted this here
                                                                0
                                                                Я хз что там на айпад, но то, что есть сейчас и в топике — мне не нравится
                                                              +8
                                                              Зачем вы превратили ВК в Фейсбук?
                                                                +3
                                                                У автора еще вполне адекватный и хороший дизайн. А вот побелители как то не особо. Например 1 место: что то между твиттером, фейсбуком и гугл плюс (хотя я и люблю г+): vk.com/doc6492_322024993?hash=27592644a4ea8cfdbb&dl=8d85084c317ddfea64
                                                                4 место немного похоже на одноклассники и фейсбук vk.com/doc6492_322025005?hash=d22c85e3d5601513de&dl=00d3791dd8e8a30609

                                                                Почти все работы сильно перегружены, и выглядят как каша. У автора же сохранена некая лаконичность.
                                                                  +1
                                                                  #1 — это какой-то Твиттер+ :D
                                                                    +1
                                                                    vk.com/doc6492_322024993?hash=27592644a4ea8cfdbb&dl=8d85084c317ddfea64

                                                                    Это вообще какой-то идиотизм. Как ориентироваться в этой свалке постов? Автор вообще думал об этом?
                                                                  +5
                                                                  ОЧЕНЬ много пустого места.

                                                                  Очень раздражает наблюдать его на больших мониторах. Давно есть резиновый дизайн, хватит уже верстать под 1024х768.
                                                                    +3
                                                                    А вам удобно читать километровые строки?
                                                                    Я последнее время замечаю, что лучше широкие поля по бокам, чем строчка на всю ширину монитора. Короткие строчки и читаются быстрее, и глаза от них меньше устают. Широкий монитор, ИМХО, в первую очередь удобен тем, что кроме основного «контента» есть еще много места для панелек (палитры и кисти в фотошопе, оглавление в pdf-ридерах, какие-нибудь панельки в IDE, и т.д.)
                                                                      +1
                                                                      Ну на хабре же намного меньше пустого места — так намного удобнее. В вк же новости идут в блоке шириной 627 пикселей и очень мелким шрифтом.
                                                                        +1
                                                                        Возможно потому, что на хабре больше длинных текстов. Если средней длины хабра-статью вжать в контакто-ленту, получится бесконечная колбаса текста. Что неудобно. С другой стороны, если среднюю контакто-запись растянуть на ширину хабра, получится тоже не очень удобно.
                                                                        Кроме того, ИМХО, хабр читают более целенаправлено (хабр — познавательный, контакт — развлекательный). Соответственно контакт читают менее внимательно, менее сосредоточено. И небольшая ширина строки способствует (опять же имхо, исследований по данному вопросу не читала, опираюсь на собственный опыт) быстрому восприятию текста, но не способствует внимательному чтению.
                                                                      0
                                                                      Media Queries никто не отменял. Но также нужно учитывать оптимальную длину строки. По условиям конкурса ширина нового дизайна должна была быть в районе 1000px.
                                                                        0
                                                                        По ощущениям на fullHD 23" мониторе оптимальная длина строки не больше ~1/2-1/3 экрана.
                                                                        • UFO just landed and posted this here
                                                                            0
                                                                            А где бы можно об этом почитать?
                                                                            • UFO just landed and posted this here
                                                                                0
                                                                                Спасибо, но как-то все равно ничего не понятно — я в дизайне смыслю чуть меньше чем ничего :(

                                                                                Вооружился поисковиком и нашел заметочку на хабре: habrahabr.ru/post/56625/
                                                                                Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

                                                                                Но, как мне кажется, для Хабра, или других нагруженных текстом ресурсов, 80 символов — сильно мало и у меня сейчас ширина строки порядка 120 символов.
                                                                                Могли бы вы как-то это прокомментировать?
                                                                                  +1
                                                                                  Все верно. На хабре длина строки больше оптимальной.

                                                                                  Оффтоп: забавно, но между читабельностью и уровнем восприятия текста существует связь. Не найду пруфов, придется поверить на слово, но чем больше длина строки, тем ниже читабельность и тем больше читатель запомнит. Так как соцсети ориентированы на быстрое восприятие, и чего уж скрывать, ценной текстовой информации там не так много, правила оптимальной длины строки придерживаться стоит. А вот для хабра длинные строки будут только на пользу.
                                                                                  • UFO just landed and posted this here
                                                                                  • UFO just landed and posted this here
                                                                                      0
                                                                                      Т.е. такой размер строки для Хабра — приемлем, т.к. тут много ценной текстовой информации,

                                                                                      Я себе скриптом поправил css до таких величин
                                                                                      .content, .message {
                                                                                        font-size: 14px;
                                                                                      }
                                                                                      
                                                                                      #layout {
                                                                                        max-width: 1240px; /* В результате получаю .content: width 861px; */
                                                                                      }
                                                                                      

                                                                                      В посте получается ~110 символов в ширину, в камментах ~120, что для меня комфортно при моих размерах пикселя.

                                                                                      С другой стороны — ВК, с шириной ленты в 537px и смешным размером текста в 11px, который читать сложно (ширина строки выходит 95 символов), но при клике на пост открывается просмотр, с шириной 607px и размером шрифта уже 1.45em.(75 символов), что и читается хорошо и воспринимается отлично, но всё же шрифт великоват.
                                                                                      Выходит, у них меньше ширина строки и больше шрифт — как раз для ускорения восприятия?

                                                                                      Но мне кажется, что не стоит сильно заморачиваться именно с шириной строки в символах, а уделить больше внимания ширине колонки и размеру шрифта (главное научиться не задавать рамер шрифта в пикселях).
                                                                                      • UFO just landed and posted this here
                                                                          • UFO just landed and posted this here
                                                                            0
                                                                            Как на хабре относятся к статьям в духе «редизайн программного продукта»?
                                                                              0
                                                                              Хорошо, особенно если это не просто «редизайн ради редизайна» :)
                                                                              0
                                                                              Мне нравится такой вариант, хотя насчет голубого фона по бокам нет уверенности. Оформление ссылки понравилось, лучше чем имеющееся. Правда возникло несколько вопросов.
                                                                              Когда закрепляли меню предполагали, что оно влезет по высоте в экран? Что будет если не влезет? Учтите, что туда еще добавляются приложения (по желанию пользователя).
                                                                              А колонка с рекламой тоже закреплена? (Если это было где-то написано — извините, не заметила)
                                                                              Диалоги, ИМХО, зря ужали по горизонтали. Хотя я что-то не могу представить куда можно было лучше вписать список диалогов… Я бы наверное оставила как есть (по механике взаимодействия, понятно что перерисовать все равно еще многое можно).
                                                                                –1
                                                                                Меню компактное, должно поместиться даже на мониторах 800x600. Если не влезет — просто отключаем фиксацию. Колонка справа НЕ фиксирована.
                                                                                  +1
                                                                                  А если я утром захожу со стационарного компа (большой экран, все влезает, даже со списком приложений), а вечером читаю ленту с маленького нетбука (и меню вместе со списком приложений туда не влезает). Каждый раз переключаться? Как-то не слишком удобно по-моему. Хотя что-то вроде кнопки «pin menu» могло бы помочь (достаточно просто, не требует залезания в настройки)
                                                                                    –1
                                                                                    Вам не нужно ничего переключать. На яваскрипте можно рассчитать высоту меню и получить высоту экрана. Основываясь на разности этих параметров, включать/выключать фиксацию.
                                                                                      0
                                                                                      Интересная идея :)
                                                                                      А вы рисовали дизайн в ФШ, или делали стиль? если стиль, может поделитесь?
                                                                                –1
                                                                                По мне так интереснее вариант vk.com/doc6492_322025968?hash=da6a71dbf07e472eb8&dl=d30c81fa6a776dcc6c
                                                                                Было бы схоже с мобильными устройствами
                                                                                  +1
                                                                                  А мне не нравится темное меню, оно слишком «перетягивает» внимание. Может быть, если правую колонку сделать такой же (темненькой и т.д.), получился бы эффект рамки, и внимание бы стянулось к центру. Но в таком виде как-то не оно.
                                                                                    0
                                                                                    Ну мне этот вариант нравиться из за того что меню фиксировано на странице и только так хорошо разделяется меню управления и контент. Было бы хорошо если меню можно было скрывать до укороченной версии оставляя только значки(как меню хабра). Ну и +70% времени в vk я провожу с мобильных устройств.
                                                                                    0
                                                                                    Единственная вещь, которая мне не нравится в вк, и которая лучше сделана в facebook, это поиск по людям. Столько свободного места, неужели нельзя было сделать фотографии пользователей чуть побольше. А тут об этой странице ни слова не сказано…
                                                                                      0
                                                                                      Если не секрет, исходя из чего принимались решения и какие задачи решались?
                                                                                        0
                                                                                        Так как статистики никакой не предоставили, некоторые решения принимал на основе просмотра большого числа аккаунтов, некоторые на основе своих догадок и здравой логики. Главные задачи были поставлены в условиях конкурса: сделать дизайн шире, современнее. Ну и себя я ограничил условием, что это должна быть не абстрактная красивая картинка, а то что можно внедрить, не отпугнув пользователей. То есть редизайн должен быть по сути незаметен.
                                                                                        +1
                                                                                        Извините, но плохо.
                                                                                          +5
                                                                                          Совсем в ФБ превратитесь. Для этого и конкурс не нужен.
                                                                                            0
                                                                                            Там где подписи к фотоальбомам и видеозаписям заменили — а вы смотрели как это будет выглядеть, скажем, на белом фоне? Наверное все же полупрозрачная темная подложка там не случайно присутствовала.
                                                                                              0
                                                                                              Разумеется. Подложка есть и в моем варианте, в виде градиента + тень под заголовком.
                                                                                              +2
                                                                                              При прокрутке страницы, после того как колонка с фильтрацией скроется из виду, записи занимают всю ширину — аналогично просмотру стены пользователя текущей версии vk.com.

                                                                                              Никогда не нравилось такое поведение — скроллишь себе и тут БДЫЩЬ количество колонок меняется.
                                                                                              • UFO just landed and posted this here
                                                                                                0
                                                                                                А почти все подзаголовки болдом так и задумано? Жирновастенько, мне кажется.
                                                                                                  +2
                                                                                                  Стало, знаете ли, гораздо хуже. Почему хуже? Потому что не лучше, но по-другому. Почему гораздо? Потому что контент занимает 1/4 ширины экрана. Потому что фейсбук. Потому что смотреть неприятно. Лучше это вот так.

                                                                                                  Картинками:
                                                                                                  image
                                                                                                  image
                                                                                                  image
                                                                                                  image
                                                                                                    +1
                                                                                                    Не знаю, почему никто не заметил, но это просто шикарно!
                                                                                                    • UFO just landed and posted this here
                                                                                                    0
                                                                                                    Очень клево :)
                                                                                                    • UFO just landed and posted this here
                                                                                                      +3
                                                                                                      Я тоже участвовал в этом конкурсе. Откроюсь тогда и я. Больно не пинайте, плиз.

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

                                                                                                      В примерах ниже левое боковое меню наполовину функционально. Автоматически определяет ширину экрана и подстраивается под него по ширине.

                                                                                                      Личная страница vk-newstyle.ru/mypage.html
                                                                                                      Гостевая страница vk-newstyle.ru/index.html
                                                                                                      Приватные сообщения vk-newstyle.ru/im.html
                                                                                                      Новости vk-newstyle.ru/feed.html

                                                                                                      Приватные сообщения полностью проработаны и функциональны. Можно «пощупать».
                                                                                                      Редактирование своего профиля происходит во всплывающем окне, запустить которое можно, нажав на кнопку «Редактировать страницу» под своей фотографией в левой колонке.

                                                                                                      Добавлено подтверждение выхода с сайта. Нажав ссылку «Выход», вы увидите красивое всплывающее окно с просьбой вернуться снова.

                                                                                                      Видоизменил статус Online. Если пользователь Online, возле его имени отображается фраза «в сети» с улыбающейся собачкой рядом. При наведении мышки на статус над ним появится всплывающее уведомление с указанием конкретной страницы, где сейчас находится пользователь. Например, «читает ленту новостей» или «просматривает видеозаписи Павла Дурова». Если пользователь Offline, отображается фраза «не в сети» со спящей собачкой рядом. При наведении мышки на статус над ним появится всплывающее уведомление с датой, когда пользователь был в сети.

                                                                                                      На личной странице добавлен блок с вкладками «Фотографии», «Группы», «Видео» и пр. Настроить эту панель, указав какую именно информацию стоит выводить в ней, можно будет в настройках сайта.

                                                                                                      На стене добавлена кнопка «В закладки», позволяющая отложить запись для дальнейшего просмотра. Она полезна в том случае, если человек не хочет открыто ставить лайк, при этом оставляя свою фамилию в истории пользователей, лайкнувших запись. Добавление в закладки происходит анонимно. Вкладка с избранными записями расположена как на странице «Новости», так и на странице «Закладки».

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

                                                                                                      Конечно, можно было бы еще работать и работать. Особенно над страницей Новости, т.к. она получилась совсем не так как задумывалось. Но вышло так, как оно вышло.
                                                                                                        +2
                                                                                                        Я не из тех людей, чьё мнение волнует кого-то, кроме их самих, но мне понравилось. :D
                                                                                                          0
                                                                                                          Все красиво. но статический блок рекламы при прокрутке это лишнее. Ну и слежка за тем что делает пользователь в данный момент меня покорила)))
                                                                                                          0
                                                                                                          Helvetica Neue для ВКонтакте вообще не идет…
                                                                                                            +2
                                                                                                            90% работ конкурса — дизайн ради дизайна. А где же UX, который так необходим пользователям?
                                                                                                              0
                                                                                                              победители тоже не ахти в этом плане. Сам не участвовал.
                                                                                                                0
                                                                                                                Я про победителей и говорил :)
                                                                                                                  0
                                                                                                                  я думаю, что победителей выбрали по их презентациям. Часто такое видел, когда презентация в разы качественнее самого продукта.
                                                                                                                    0
                                                                                                                    Ага, только вот пользователи как раз не в презентациях будут сидеть ;) Почему не сдалали интерактивные прототипы (основанные на простых png страничек) — непонятно. Например, в том же invision app. такие проекты без сильного ux нельзя редизайнить. А если были бы прототипы, то и оценивать можно было по удобству, а так же провести UX-тест среди пользователей как отдельная номинация.
                                                                                                                      0
                                                                                                                      та всем в основном, наверное, было пофигу на этот конкурс от контакта. Он же не первый. Редизайн все равно делать не будут.

                                                                                                                      Я лично не участвовал, потому что проект сложный, если делать качественно. Очень много данных на страницах. Поэтому решил готовиться к вступительным и изучать js. :-)
                                                                                                                0
                                                                                                                да и дизайн плохой. До дрибла и бихэнса не дотягивают. А там как раз дизайн ради дизайна, а не ради UX, но там он именно Дизайн.
                                                                                                                0
                                                                                                                использовать дополнительно появившееся места по ширине только для того, чтобы впихнуть туда рекламу — фактически плохая затея. Те у кого сорок эдблок вообще увидят только пустую колонку.

                                                                                                                  +1
                                                                                                                  вместо фактически надо феерически. т9
                                                                                                                  0
                                                                                                                  > Заголовки были объединены со счетчиками, избавив дизайн от лишнего визуального шума. Ссылка на новости, которые читает пользователь, перенесена в группу ссылок внизу колонки.

                                                                                                                  Не знаю как вам, но мне глаз теперь режет, что видеозаписи и фотоальбомы шире остальных разделов
                                                                                                                  habrastorage.org/files/32c/503/15f/32c50315f50a40609fabb1212ae0da5b.png
                                                                                                                    0
                                                                                                                    Полагаю, что работу автора отклонили (несмотря на достаточно приятный внешний вид) в частности и из-за этой пресловутой правой колонки с рекламой. В моей работе реклама так же выставляется на видное место, и фиксируется при прокрутке страницы вниз. Уже после окончания конкурса я случайно наткнулся вот на эту статью siliconrus.com/2014/08/target/ где Рогозов акцентировал внимание на том, что размещение рекламы на самом видном месте, и тем более, фиксация ее при прокрутке — это агрессивно, и ВК это не поддерживает. Что ж, теперь будем знать…
                                                                                                                      +1
                                                                                                                      В моей работе реклама так же выставляется на видное место, и фиксируется при прокрутке страницы вниз.

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

                                                                                                                      Подумайте, что будет, когда турнир окончится и когда уедут все гости. Жители Москвы, стесненные жилищным кризисом, бросятся в ваш великолепный город. Столица автоматически переходит в Васюки. Сюда приезжает правительство. Васюки переименовываются в Нью-Москву, Москва — в Старые Васюки. Ленинградцы и харьковчане скрежещут зубами, но ничего не могут поделать. Нью-Москва становится элегантнейшим центром Европы, а скоро и всего мира.
                                                                                                                      • UFO just landed and posted this here
                                                                                                                          0
                                                                                                                          Кто-то написал гневный пост на подобии того, что я писал про подставной конкурс Юкоза :)

                                                                                                                          «Как устроить конкурс и не проиграть в нем»

                                                                                                                          Если кратко:
                                                                                                                          Ах да, тут в конкурсе участвуют нынешние дизайнеры ВК, но они для своей прокачки ☺ Призы им не нужны […пара комментариев…] Для тех, у кого реально “бомбит” от того, что в конкурсе принимают участие некоторые сотрудники — охладитесь, у них это “по фану” всё.

                                                                                                                          Наконец, 19 августа в 19:45 (спустя почти три недели) Андрей Рогозов подвел итоги конкурса. Победителей было 5: Павел Шумаков, Павел Князев, Денис Прокопов, Илья Гришин и Богдан Кононец. Также еще 4 человека получили утешительные призы (iPad Air): Артем Носенко, Павел Григорьев, Шарыпин Денис и Евгений Зиновьев.

                                                                                                                          Илья Гишин — дизайнер ВК, уже побеждал в двух конкурсов ВК (Конкурс и работа). Павел Князев — работник Телеграма, и победитель предыдущего конкурса. Денис Прокопов — снова победитель предыдущего конкурса и еще более раннего. Евгений Зиновьев также работает в команде ВКонтакте. По меньшей мере три человека уже третий год подряд побеждают в конкурсах на редизайн.

                                                                                                                          то-то финалисты такие никакие.
                                                                                                                            0
                                                                                                                            Ну то есть, таки, в списке победителей конкурса внезапно оказались работники ВК? Ох лол.
                                                                                                                            0
                                                                                                                            Что-то год прошёл, а редизайна не видать.

                                                                                                                            Only users with full accounts can post comments. Log in, please.