Пользователь
12,9
рейтинг
15 мая 2014 в 20:28

Разработка → Что не так с редизайном Хабрахабра

Это случилось: Хабр получил новый дизайн в стиле остальных ТМ-продуктов.



Вообще-то я люблю перемены, и редизайн привычных вещей вызывает в первую очередь оптимизм. Это как перестановка мебели в квартире: обстановочку освежать надо. Но помимо приятного чувства новизны некоторые изменения вызывают вопросы. Понятно, что Хабр уже не торт и мы всегда будем помнить его тёплое ламповое старое лого, но я хочу поговорить про то, что можно оценить вполне объективно — про юзабилити нового хабрадизайна.

Две ложки мёда


▌Ссылка на создание поста

Функция «создать пост» теперь получила отдельную кнопку в самом главном меню. Раньше это была целая история — выучить алгоритм, по котором можно найти кнопку с карандашиком, чтобы написать пост. Возможно, в этом была своя сермяжная правда — Хабр не ЖЖ, как нам напоминают в правилах, поэтому перед тем, как что-то написать — нужно подумать. Но намеренное усложнение навигации, конечно, не тот путь, который ведёт к качественному контенту, так что вынос кнопки «Написать пост» на видное место — безусловный плюс и главное (для меня) положительное достижение редизайна.

Смущает разве что выбранная иконка: плюс означает добавление чего-либо, но совершенно неочевидно, что это что-либо — пост. Чаще в подобных интерфейсах за ним скрывают разворачивание дополнительных пунктов меню. Старый добрый карандашик был бы куда понятнее — мало того, что иконка знакома всем авторам Хабра, она ещё и универсальна.

▌Планшетизация

Вторая ложка мёда — адаптация дизайна под тач-интерфейс. Это победа со слезами на глазах, потому что насколько пользователям мобильных устройств остро необходимы нормально адаптированный под них веб, настолько больше юзеров всё равно читают сайты с десктопов и лэптопов. Т.е. объяснять зачем затачивать дизайн под планшеты не нужно — это правильно и за это спасибо. Но стоит упомянуть о том, почему нельзя забывать про пользователей традиционных устройств. Поэтому этот пункт я повторю в недостатках редизайна.

Бочка дёгтя


▌Планшетизация

Каких-то полтора года назад я написал исключительно популярный пост "Что не так с Windows 8". И одной из главных моих претензий к дизайну новой ОС было чрезмерное увлечение тач-штуками. Я писал о том, что рано отказываться от панели задач и на десктопах приложения во весь экран — пустая трата места. Время подтвердило мою правоту: в последнем апдейте Windows 8.1 приложения в режиме Metro получили отображение на панели задач и привычные атрибуты традиционных окон — кнопки «свернуть» и «закрыть».

Теперь на те же грабли наступил Хабр. Планшеты — исключительно важная часть экосистемы гаджетов, но они дополняют мир ПК (я имею в виду устройства с вводом НЕ с экрана, а с физической клавиатурой, мышью и т.д.), а не заменяют его. Нельзя забывать про скучающий офисный планктон, который даёт большинство просмотров в рабочее время со своих десктопов и лэптопов, а вовсе не планшетов и смартфонов. Да, это претензия скорее концептуального характера. Но ошибка в стратегии обязательно вылезает массой мелких неудобств в повседневной деятельности. Поэтому, как говорят урбанисты Собянину — помните о немобильных гражданах.

▌В поисках поиска

Это уже чисто юзабилити-момент: на сайте, где многие посты сохраняют свою актуальность годами, нельзя прятать поиск. Для Хабра внутренний поиск так же важен как для гугла, и должен быть всегда доступен. Сейчас же его спрятали аж за двумя кликами, причём поиск поиска абсолютно неинтуитивен — пришлось просто перебрать все вкладки. И это следующая претензия.

▌Пора выйти из шкафа

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

Разгадать значение иконок теоретически можно:



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

Но догадаться, какие именно функции спрятаны в этих ящиках — практически нереально. Можно только тыкать во все вкладки по очереди, пока не выучишь наизусть, где что находится или чем «Посты» во вкладке «Трекер» отличаются от ссылки «Посты» во вкладке «Меню»:



Это странное решение даже для мобильного интерфейса — во-первых, все эти пункты меню можно спрятать, за одной кнопкой. Разбивать 18 пунктов меню на 3 вкладки — это явно чрезмерная страсть к порядку. Во-вторых, их можно сделать более информативными, добавив иконки, превьюшки, нотификации.

▌Нажми на кнопку — получишь результат

И ещё один минус нового меню — все 5 кнопок в нём выглядят одинаково, но действуют по-разному. Кнопки №1 и №5 — ссылки на главную и страницу создания поста. Кнопки №№ 2-4 — вызывают подменю без перезагрузки страницы. В результате, тыкая на ссылки слева, я дважды уходил со страницы этого недописанного поста — к счастью, автосохранение на Хабре работает надёжно. Но одинаково выглядящие кнопки с разными функциями — это косяк, превращающийся в неприятную угадайку. А что если автосохранение текста сглючит? Очевидно, что нужно придумать, как визуально отличить кнопки-ссылки от кнопок-меню.

Резюме


Общий счёт перемен — в пользу ретроградов:

Ссылка «Написать»
Планшетизация

Планшетизация
Слишком далеко запрятанный поиск
Слишком много вкладок с непонятным содержимым
Путаница с действиями кнопок в основном меню

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

P.S. Официальный пост.

P.P.S. Денискин взял на карандаш:

image

P.P.S. Процесс пошёл: в ТМ ищут UI/UX-дизайнера.
егорро @andorro
карма
220,0
рейтинг 12,9
Пользователь

Похожие публикации

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (361)

  • НЛО прилетело и опубликовало эту надпись здесь
    • +163
      Потому что то, что я хотел сказать, тянет на целый пост. И если я уверен, что он будет полезным — почему бы не написать? Теперь ценность моего суждения пусть определяет коммьюнити. Кнопочки голосования не для красоты сделаны.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +5
          Это по факту так получается в ряде случаев. По идее же — голосование создано именно для оценки полезности/ценности материала.
        • +4
          Полезность тоже субъективна, а ценности в чистом виде просто не существует.
    • 0
      Согласен с автором насчет поиска и вкладок.
      В остальном — удобно, хоть и очень непривычно. Разумное использование пространства. Очень удобно для ноутбука 15.6"
  • +40
    Я бы сделал разворачивание подменю по наведению, так было бы интуитивнее. Не разворачивается — значит переход на новую страницу.
    Проверить удобство можно попробовав в консоли браузера:

    $('.nav_panel > .tab').hover(function () {
        $(this).click();
    });
    
    • –6
      А на планшетах-телефонах?
      • +18
        А на планшет-телефонах — по клику.
    • +2
      Реально, так удобнее, непонятно вообще зачем сделали 2 раза кликать.
    • +2
      Это нормально если в хроме нет возможности перейти на вложенный пункт меню, панелька сразу схлопывается при любом движении вправо?
      Как это выглядит
      • +1
        Это ненормально, но в этом порочность того кода. Событие клика действует только до тех пор, пока вы не уберёте курсор с нужного таба, вот вам и эффект. Убираете курсор — все классы и прочее тоже убираются. Тогда уж надо имитировать поведение клика полностью, а не так.
        • 0
          ясное дело что код не совершенен, это был скорее сарказм =)
          • +3
            Иногда сарказм всё-таки стоит помечать тэгом :-|
      • +4
        Из-за этого я ненавижу все сайты, где есть всплывающее меню.
      • +4
        Поблему выпадающего меню отлично решили в своё время ребята на Amazon. На Хабре даже есть статья, посвященная этой теме: Загадка выражающего списка «Амазона»
    • +3
      hover вызывает два события, по наведению и отведению мыши. Правильный код выглядит так:

      $(".nav_panel > .tab").mouseenter(function () {
        $(this).trigger("click");
      });
      
      • +1
        У меня в таком варианте не закрывается обратно при отведении мыши.
    • +1
      Согласен, так значительно удобнее и интуитивнее!
    • +1
      $('.nav_panel').on('mouseenter', '.tab', function () {
         $(this).trigger("click");
      });
      
  • +9
    Надеялся на полную рекурсию в первом скриншоте :)
    • 0
      Аналогично, смотрелось бы здорово, сначало так и показалось.
    • +2
      Сделал что смог ;)
      • 0
        Уберите серую линию предпросмотра (и пэддинг) ещё и будет самое-то.
      • 0
        Сорри, не удержался. Ховер на колокольчике все испортил :D
  • +3
    По-моему всё прекрасно) Хабр с нами повсюду и на всех платформах)
  • +64
    И еще, только из этой статьи узнал, что «плюс» — это ссылка на создание поста. Думал, что это кнопочка для просмотра ссылок, иконки которых не помещаются при просмотре на меленьком экранчике моего ноутбука. Верните карандаш! :)
    • +4
      я лично был уверен, что это кнопка кастомизации, мол можно добавить свои кнопочки, например на «новое»
    • +1
      В тостере «Плюс» значит подписаться на вопрос
  • 0
    Про «гамбургер» не согласен. Пользователи ПК уже тоже начинают ее воспринимать как положенно. Ну а пост под это выделять я бы тоже не стал. По мне так просто еще многие элементы сайта не перевели в новый стиль, например, кнопки и иконки.
    • +30
      А в Firefox OS эта иконка означает «Уведомления». А в андроиде это вызов меню (как в Thunderbird'e было сделано). А на iOS эта иконка перетаскивания элементов в списке. Ваше «как положено» это какое «как положено»?

      Вообще, имхо, на редкость неудачная иконка. Как чёрный квадрат — сама по себе вообще ничего не значит.
      • +5
        В Хроме такая же иконка открывает меню.
        • +1
          И в обновленном Mozilla firefox тоже меню.
          • +2
            Да и на iOS гамбургер всегда меню открывал
      • 0
        Вызов меню. По крайней мере я встречал только это «как положенно».
    • 0
      Кем положено и кому положено?
  • +70
    Верните карандаш! :)

    Поддерживаю! Карандаш ассоциативнее, чем плюсик.
  • +59
    Ещё один минус, лично для меня довольно значимый — отсутствие хедера. Открываешь страницу и все блоги впритык к потолку, создаётся неприятное внутреннее ощущение, что что-то не догрузилось сверху или стили полетели =(
    • +15
      Это временное ощущение. Потому что у всех сайтов бессмысленно выжраное пространство под заскролливающиеся хедеры. Это дело многолетней привычки.
      • +2
        Ага, особенно тренд помещать громадные фотографии и писать по ним большим кегелем. Боюсь, всё только начинается.
        • +12
          Ну… если бы я на секунду притворился дизайнером, то как-то так бы запилил:
          Картиночка
          image
          • 0
            Ой, карандашик забыл =(
            Но идея думаю ясна — тупо перенести эту панельку наверх и всё.
            • +1
              Учитывая, что подавляющее большинство десктопных и ноутбучных дисплеев сейчас — широкоформатные, логично использовать драгоценную высоту для отображения полезного контента, а не меню. Я был бы не против переноса хедеров в бококую часть экрана и на других сайтах.
          • –1
            Отлично!
            Да вообще в комментах уже массу вариантов предложили, в несколько раз лучше текущего.
            • 0
              Все варианты, что я углядел используют текущий вариант — сбоку, а не простую смену позиции, как набросал я. Горизонтальное пространство позволяет всё же немного больше вольностей со словами\названиями пунктов меню, нежели вертикальное.
              • 0
                Были предложения и сверху разместить, без картинки правда (теперь в двух темах фиг найдёшь, кто предлагал)
                • 0
                  Поиск по слову «сверху» действительно дал результат без картинки, только в соседнем бложике: habrahabr.ru/company/tm/blog/222855/#comment_7590189
                  • 0
                    И не лень вам было? :)
                    • 0
                      Любопытство пересилило так, что я решил узнать о каких именно предложениях по позиционировании меню шла речь, вдруг бы там ещё какие-то дельные замечания нашлись, которые я не учёл.
          • –1
            Да, название зафиксировать вверху — было бы здорово.
            у меня куча закладок с Хабром всегда открыта — первый вопрос, после переключения в любую из них — «Где я?»
    • +1
      До поиска добрался случайно
  • +16
    А где вообще поиск?)
    • НЛО прилетело и опубликовало эту надпись здесь
      • +4
        Довольно неочевидно.
        Хотя, можно искать в гугле — Хабр очень хорошо проиндексирован и по тематическим запросам будет в первых местах выдачи. Конец шутки.
        • +11
          В общем, я так и делал сегодня. Пока не нашёл поиск.
          • –4
            Ну до чего лень дошла. Поиск найти не могут. :)
          • +6
            Неделя поиска поиска объявляется открытой =)
            • +2
              Скоро страница проиндексируется настолько, что по поиску поиска будет сначала находиться поиск поиска поиска, а уже потом поиск поиска.
        • +9
          А я всегда искал в гугле: «запрос site:habrahabr.ru». Релевантнее местного поиска.
    • +1
      Ищите ответ выше — в тексте поста :)
    • +3
      Пожалуйста, делайте что угодно, но верните кнопки поиска и «Посты» ;(
    • +1
      image
  • +5
    Как автор классического логотипа уведомляю всех, что новый дизайн — ок! :)
    • НЛО прилетело и опубликовало эту надпись здесь
    • +10
      Да я в общем и не спорю. Допилить — и будет торт.
      • +7
        Да, допилить и вернуть теплое ламповое лого…
  • +3
    По-моему ЖЖ сегодня запустил очень похожий дизайн.
    • +1
      Да, сегодня день редизайнов. Но в отличие от Хабра, который ищет свой визуальный язык, ЖЖ продолжает следовать генеральной линии «Эй, мы тоже современные».
      • НЛО прилетело и опубликовало эту надпись здесь
        • +2
          Это вы ещё на 7 дюймах не видели. Читаю и плачу.
          По вечерам читаю Хабр и ЖЖ с планшета… Сегодня мои глаза кровоточат.
        • 0
          На нетбуке 11.6" с разрешением экрана 1366*768 всё вполне читаемо (Хромиум браузер).
          Мне вот другое не понравилось: несмотря на явную планшетоориентировасть, нет кинетической прокрутки aka touch panning (Ubuntu' Unity 3D на устройстве с сенсорным экраном). А жаль, прикольная фишка (после IE10 из Windows 8 немного недостает, тем не менее, ряд сайтов у себя имеет кинетическую прокрутку для таких случаев, как мой).
      • +2
        По-моему, это применимо к обоим проектам, к Хабрахабру даже в чём-то больше — рублёный флэт в качестве одного стиля для всех проектов они начали вводить сразу после того, как это стало модно. Так что своим визуальным языком назвать это сложно.
    • +3
      *Шутка про труп и палку*
      • +9
        Колитесь
        • +1
          Я думаю, что имелось ввиду «Не стоит тыкать жмурика палкой». :)
  • +54
    Планшетизация сайта выглядит нелогичным шагом особенно потому, что она произошла после выхода официального мобильного приложения Хабра. Т.е. с телефона теперь можно и через браузер, и через приложение, а на десктопе мучайся с этим пальцеориентированным интерфейсом с просто ОГРОМНЫМИ кнопками.
    • +7
      Планшетизация сайта выглядит нелогичным шагом особенно потому, что она произошла после выхода официального мобильного приложения Хабра

      Я хотел об этом написать, кстати. Но потом подумал, что выпуск приложения не отменяет необходимость адаптации дизайна под новые платформы. Т.е. неудобный сайт с мелкими (для смартфона) ссылками под лозунгом «Не нравится — качайте приложение!» — тоже не вариант.
      • +1
        А ведь анонсирована еще отдельная мобильная версия.
        • +3
          Звучит так, словно в ТМ запутались. Или это мы запутались относительно планов ТМ :)
      • +1
        Сейчас сайтом на смартфоне пользоваться невозможно.
      • +2
        Увы, сейчас сайт неудобен как раз для несмартфонов.
        ГИГАНТСКИЕ кнопки отвлекают взгляд в угол огромного монитора.
        И если «Не нравится — качайте приложение!» даёт хоть какой-то выход для всей аудитории, то текущий вариант оставляет пользователей в недоумении с несколькими мобильными интерфейсами без единого нормального.
    • +2
      А приложение на планшете не позволяет читать Хабр без авторизации. Или я чего-то не нашёл? Но я хочу иметь возможность читать Хабр без авторизации.
      • 0
        К сожалению, не могу ничего подсказать. Мне оказалось удобнее везде пользоваться RSS (+Readability на телефоне).
      • 0
        В Android версии уже можно (или скоро можно будет — не помню).
  • +3
    Хабр теперь почти юнити.
  • +5
    Да, поиск запрятали далеко, можно сказать убили
    • НЛО прилетело и опубликовало эту надпись здесь
      • +3
        Ну да, два клика с любой страницы. Это ОЧЕНЬ далеко. Представьте себе Гугл, в котором для поиска вам надо сперва кликнуть по лого, а по «поиску» в меню.
        • +2
          Главный вопрос, почему вместо слова Поиск просто не используется поле для ввода. Ах да, оно же отличается от остальных пунктов… стоп, ну да, у него и смысл другой!
  • +2
    «колокольчик» можно было и более изящно изобразить, либо заменить метафору… imho
    • 0
      У гугла стырено. У них тоже колокольчик.
      • 0
        Точно. Все никак не мог вспомнить, где же я его недавно видел?
        • +3
          Twitter ещё.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Это меню приложений, а я про гамбургер:

      • +3
        Гамбургер уже давно обитает на законном месте кнопки меню, например, в тех же Google Chrome и Firefox
        • +1
          Да, мне его уже показали. Что ж, возможно в вебе он приживётся. Я писал о другом: что некоторые символы, привычные и узнаваемые по одной платформе, не читаются с ходу на другой — просто потому что контекст и окружение меняются.
        • –2
          На счёт Firefox вы неправы, кстати. Никаких «габургеров»:

          • +2
            Скрытый текст
            image
            • –4
              Интересно. Может это только в Windows?
              • +31
                Может это только у тех, кто всё-таки обновил Firefox?
                • 0
                  А есть другой выход? Багофиксы ведь не будут выпускаться под старые версии вечно, или я чего-то не знаю?
                  • 0
                    Разумеется. Расширение называется Clasic Theme Restorer (плюс надо в его настройках выбрать желаемое и поредактировать панели). У меня теперь никакого гамбургера нет.
                • 0
                  Да, в старой версии его не было. В новой появился:

                  image
        • +2
          в моей системе (KDE на Gentoo) вообще ни разу его не видел ни в одном приложении. В том числе, в Fx.
      • +1
        Такая же кнопка в thunderbird есть. Он вползает постепенно всюду. Это как значок share. Сначала тоже все ругались, а теперь все его всюду пихают.
  • –24
    С редизайном Хабра не так то, что вас не спросили.
    • +26
      Ну это само собой.
  • +65
    Кляксу жалко.
    • +2
      Ах да. Писал комментарий ниже, забыл об этом сказать. Старый логотип был очень крут! Очень жаль, что его сейчас нет.
    • +4
      Олдфаги будут помнить!
      • +1
        А когда можно начинать считать себя олдфагом и начать жаловаться детям, мол: «вот раньше было лучше, помню в мои времена были нормальные жирные кляксы, а не эти прилизанные квадратики, которые вы любите, эх, молодёжь...»?
  • +78
    Меня больше смущает почему акцентированная «планшетизация» не коснулась кнопок голосования. Сколько раз уже промахивался пальцем.
    • +14
      Когда коснётся, страшно будет. Один комментарий на полстраницы ради гигантских кнопок.
      • +7
        на самом деле ведь не обязательно высоту увеличивать сильно, можно и в ширину. Сейчас то палец на телефоне попадает на 3 кнопки махом…
        • +19
          Разнести по разным сторонам, как в голосовалке к посту/карме.
    • +2
      И скрытую пожаловаться, в которую я постоянно тыкаю при прокручивании на телефоне
  • +3
    2014 год, а сайт не адаптируется к мобильным телефонам — это плохо.

    Не знаю, что автор имел ввиду под «планшетизацией». На планшетах, наверное, это все тоже неудобное.

    Сверху отступ можно добавить, а над правой колонкой — поле поиска:

    image

    И теперь нет уникального логотипа.

    П.С. Статья ни о чем.
    • +2
      Есть как минимум такая версия — m.habrahabr.ru/
      • +1
        о, наконец-то, хоть кто-то ее использует кроме меня…
      • 0
        Спасибо за ссылку.
        Не подскажите, какие посты попадают, а какие не попадают в эту ленту?
        • 0
          Насколько я понимаю, эта лента — то, что видят разлогиненные пользователи на главной. Так боюсь, что испортят и его. Сейчас я могу читать Хабр в полевых условиях на самом дохлом телефоне с самым дохлым интернетом благодаря ему.
        • 0
          > то, что видят разлогиненные пользователи на главной.
          да, скорее всего так
    • +6
      Извините за оффтоп, но вы не боитесь, что армия вкладок когда-нибудь на вам нападет?
      • +6
        image
      • +2
        Да, я никак не понимаю каким образом люди ищут вкладку для переключения когда не видно ни заголовки, ни иконки. И почему не используют расширения типа TreeStyle (вертикальные вкладки).
        • +2
          А я не понимаю зачем вообще нужно открывать больше десяти вкладок.
          • +3
            Чтобы не сохранять закладки и не переоткрывать из них все время.
            • +3
              Открытая страница != закладка же. Современные вебстраницы — это почти вебприложения, они в фоне могут много что делать. А потом мы удивляемся прожорливости браузера с 253 открытыми сайтами…
        • 0
          Через диспетчер вкладок, поди ))
        • +1
          Если развернуть окно, то видны иконки сайтов + Хром при наведении выводит Title страницы.
      • 0
        Нет. Их там всего 20-25.

        На прошлой неделе было 59, но я уже прочитал многое или закинул в Pocket
      • +1
        всегда после скрина с таким количеством вкладок начинается холивор по этому поводу… я думаю что многовкладочность — это религия.
    • +1
      Глядя на ваши мучения с большим количеством вкладок, хочу спросить, чем не устроила лиса?
      • 0
        Почему все думают, что я мучаюсь? Все ок.:) Это же не Опера 12. И RAM я нарастил до 3*4гб

        ФФ я никогда не пользовался. Все советовали Хром как более передовой. К тому же в ФФ всегда можно словить глюки шрифтов при увеличении или прокрутке:

        • 0
          Лиса — единственный браузер, который позволяет комфортно работать с большим количеством вкладок.
          • 0
            Странно. Я в Хроме не испытываю неудобств.
            • 0
              Все познается в сравнении )
            • 0
              В хроме насколько я знаю нет нормальных расширений для вертикальных вкладок. А в FF есть TreeStyle, и еще Tab Utilities (правда в последней версии он не полностью работает).
              • 0
                Да FF «из коробки» неплохо с этим справляется.
                • 0
                  Где в FF из коробки вертикальные вкладки? А с обычными везде неудобно после вертикальных.:) Особенно при большом числе вкладок. Например, они либо (в ФФ) занимают много места и надо больше скроллить, сложнее искать, либо (в Хроме) не видно заголовков до наведения, что тоже неудобно.
                  • 0
                    Вертикальных нет, но они и не всем нужны. Есть выпадающий список вкладок, чтобы не скролить. Есть группировка вкладок.
          • +1
            Странно, а я с Оперой не испытываю никаких проблем с большим количеством вкладок.
        • +1
          Почему все думают, что я мучаюсь? Все ок.:) Это же не Опера 12.
          А с Оперой-то что не так? Там, как раз, и площадь вкладки на «пирамидки» не расходуется — при той же ширине вкладки в Хроме видно только «пирамидку», а в Опере видно весь значок. Да и переключение по ПКМ+скролл отлично решает проблему навигации по любым количествам вкладок.
        • +1
          А что не так с Оперой? И памяти у меня всего 4ГБ и вкладок по-больше, и всё работает.
  • +47
    Убрали подчёркивание со всех ссылок. На мой взгляд, это очень неудачное решение.
    • +2
      Небось хотели как на Lenta.ru
      • +7
        И получилось как на «ленте»: совершенно неочевидно, что кликабельно, а что — нет. Старожилы, конечно, и так знают, куда нажимать, а новичку или случайному посетителю будет первое время некомфортно — особенно на планшетах (под которые, вроде бы, затачивали интерфейс), где нет hover-а.

        Черт с ними, с подчеркиваниями — способ индикации ссылок может быть любым. Но он должен быть. Даже если принять серый цвет (который не очень-то различим) за способ индикации — это не работает: например, на правых сайдбарах заголовки («Лучшее», «Вопросы по теме...») внешне выглядят как ссылки, но ими не являются.
        • +3
          Да на ленте чертовски доставляло то, что все ссылки были красными. Теперь хабр перестал подчеркивать ссылки, эти модные тенденции реально пугают.
    • +12
      Человеки с нарушенным цветовосприятием негодуют и размахивают таблицами Рабкина…
    • +1
      Я думаю, что это текущий тренд современности. Многие поисковые машины (гугл — точно, вроде и бинг) экспериментируют с этим, например.
      Почитать же Лебедева — он это говорил в другое время, другую эпоху.
      Раньше ссылки было логично подчёркивать, сейчас же — перегружает визуальный ряд.
      • +2
        Не ради холивара ради вопрос — мне правда интересно. А почему сейчас ссылки не логично подчёркивать? Ну, положим, на той же ленте.ру можно хоть как-то оправдать это, так как на главной там 90% текста — ссылки. В общем случае мне кажется, что ссылки надо подчёркивать, а текст, который не является ссылкой подчёркивать нельзя, так как сразу очевидно где ссылка, а где нет. Тем более с распространением мобильных устройств — на компьютере можно хотя бы навести курсор и он поменяется, а на том же планшете остаётся только гадать.
        • 0
          Я не знаю, как объяснят это вам дизайнеры (сам программист, поэтому можете не рассматривать моё мнение в качестве компетентного), но я лично вижу две причины этого тренда.

          Причина первая — интерейсы усложняются, поэтому дизайнеры всячески пытаются в противовес их облегчить визуально. Видели эту классическую картинку — о том, что у эппл и гугла простые интерфейсы?
          image
          Так вот — у того же гугла очень, очень сложные приложения, очень мног информации, очень сильно перегружается интерфейс. Их дизайнеры прикладывают титанические усилия, чтобы компенсировать это облегчением дизайна — и пока худо-бедно им это удаётся (по крайней мере, стёбных картинок «этот простой интерфейс — гугл 2000, а этот сложный — гугл 2014» не появлялось — рубеж не перейдён)
          Интерфейс реально усложняется и в первую очередь увеличивается число элементов, по которым можно кликнуть — и это уже давно не кнопки (занимают очень много места), это уже давно ссылки.
          Скажите, что легче выглядит — вся страница состоит из 150 подчёркнутых ссылок или вся страница состоит из 150 НЕподчёркнутых ссылок? Как по мне — ответ очевиден.
          Обратите внимание: отказываются от подчёркивания ссылок именно сайты, которые реально на странице выдают горы ссылок — именно им это важно как воздух (та же лента.ру, вы правильно понимаете тренд), а уже во вторую очередь копируют все кому не лень, кто тупо следует за модой, кто не понимает что и зачем делают крупные игроки.

          Причина вторая. Выросло достаточно много поколений десктопных пользователей, которые уже знают, что такое ссылка — и уже все давно ПРИВЫКЛИ, что можно на странице попробовать кликнуть всё-что захочешь. Навёл на синий текст, ага курсор поменялся — значит, можно кликать.
          И сейчас постепенно крупные игроки вводят эту новую модель, приучают пользователей к новой парадигме. Причём вводят не первыми — раньше SEO практики любили понапхать на страницу кучу переоптимизированных ссылок — а чтобы текст читался пользователями лучше — сделать их НЕОТЛИЧИМЫМИ от основного текста (болд и стронг тоже прятали так за css стилями)

          Вот лично такое у меня мнение сложилось. Вообще, мне самому вопрос интересен, если бы кто из разбирающихся людей подготовил бы целую статью на хабре — только поприветствовал бы.
  • +55
    Мои 5 копеек. Редизайн, мягко говоря, ужасен — все даже хуже, чем на Тостере.

    1) Планшетизация — ужасно. Честно. Responsive дизайн придумали именно для этих целей. Показывать мобильному юзеру десктопную версию сайта — это плохо. Показывать десктопному юзеру мобильную версию сайта — тоже плохо. Когда ж до людей дойдет эта простая истина!

    2) Пиктограммы абсолютно неочевидные.

    Вердикт: если дизайнерам и верстальщикам нечем больше заняться и работы у них нет — то может не мучить людей и просто их отправить в отпуск?..
    • 0
      >>>Показывать мобильному юзеру десктопную версию сайта — это плохо.

      Почему-то многие путают это с идеей «Показывать мобильному юзеру полный функционал сайта — это плохо.»
      В результате получаются всякие мерзости типа мобильных Яндекс.Картинок и Яндекс.Маркета.
    • 0
      >Показывать мобильному юзеру десктопную версию сайта — это плохо
      Владельцы 10" планшетов и смартфонов с FullHD смотрят с недоумением.
      • 0
        Только те из них, кто обладает орлиным взглядом. Не в высоте шрифта в пикселях дело. У меня 17" FullHD и то многие вещи выглядят мелко. Плюс взаимодействие мышью и пальцем — разные вещи.
  • +10
    Во-первых, мне не понравилась «прижатость к краям». Имхо, нужно увеличить отступы.

    Во-вторых, по моему мнению, надо вернуть назад хедер «Хабы, Посты...». Потому как я почти всегда сразу же кликаю на «Посты» и читаю основную ленту. Своя — второстепенно.

    В-третьих, как уже сказали — карандашик!

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

    В-пятых, я боюсь кликать по пунктам меню!!! Я думаю, что меня перебросит на новую страницу и все потеряется!

    Что понравилось, так это кнопка «Наверх».
  • +67
    Ад перфекциониста:


    • +41
      У меня, кстати, ещё один дополнительный пиксель есть
      • +42
        Ну вот зачем!?
    • 0
      Бумбурум сказал, что скоро пофиксят (как скоро — увидим).
      http://habrahabr.ru/company/tm/blog/222855/#comment_7589835
      • 0
        Недолго осталось =)
        ...совсем
        image
        ...скоро
        image
    • –1
      Ну, ты глазастый…
      • 0
        Да.
  • +39
    Вот чего не хватает(извиняюсь за paint):
    image
    • +10
      Это всё равно один лишний клик. Я бы вообще сделал полосу поиска в шапке, шириной во всю страницу.
      • +2
        Можно сделать первым в правой колонке, она все равно криво сверстана — с лишним отступом (на главной лучше всего видно)
        • 0
          Узкая для поиска слишком.
          • +2
            Поиск по хабру, честно говоря не очень хороший. Гораздо проще по нему искать через yandex или google.
            Неужели у вас Поиск такая частая функция, что бы выносить его в основное меню?
            Может командда Хабра собрала статистику использования и выяснилось что поиском пользуются в 1 из 1'000'000 хитов
            • +1
              Я постоянно юзаю поиск Хабра.
              • –5
                Ну хорошо, это вы. Но к дизайну большого портала нужно подходить все же из статистики, не?
                • +2
                  Я сильно сомневаюсь, что есть такая статистика «никто не пользуется поиском».
                  • 0
                    Есть статистика, сколько приходится поисковых запросов на N хитов, как правило.
                    • +1
                      При написания статьи хорошим тоном считается проанализировать существующее положение дел воспользовавшись поиском!
                      • 0
                        Вы только подтвердили моё мнение на то что поисковых запросов очень незначительная доля в общем потоке.
                        • +1
                          Если авторы не будут писать, или будут писать не качественно, то что будут читать остальные?
                          • 0
                            кто у вас отнял возможность искать?
              • 0
                Поиск яндекса с фильтрацией по сайту работает на порядок лучше.
            • +1
              Возможно нужно сделать поиск лучше, а не убирать его?
          • 0
            Можно при наведении разворачивать поиск за границы колонки. Тогда, конечно, пострадают мобильные пользователи, ибо hover'а у них нет.
        • +8
          Это не лишний отступ, это отмщение перфекционистам с Адблоком.
          • +13
            И тут мне стало стыдно
      • +6
        Самое интересное то, что после того как найдете поиск, перед вами почти пустое окно, в котором кроме поля для ввода ничего нового нет.
        Поиск

        Нет даже кнопки «Найти»
        • 0
          Ну так ничего не искал — ничего не нашёл. Всё просто же :)
  • +11
    Хочу добавить, что position: fixed-элементы заметно тормозят рендеринг в браузерах, заставляя последний делать repaint всей видимой на экране страницы. Особенно это заметно при скроллинге; я читаю статьи довольно удобным способом — нажав среднюю кнопку мыши на странице и немного сместив курсор вниз — страница плавно едет вслед за прочитанными строчками. Сейчас стало с заметными глазу тормозами.

    Раньше это не так заметно было, т. к. полоску скроллинга вверх, которая была слева, я скрыл, а блок «Лучшее за 24 часа» был обычно на уровне комментариев, а не статьи.
    • +2
      Кстати, на счёт скроллинга: расширения, типа Smooth Scroller, перестают работать, если мышь находится на свободной области слева или справа. Такое же поведение, например, на Ленте.ру и подобных.
      Раздражает жутко.
      • –9
        Smooth Scroller

        Что только люди не придумают, лишь бы нормальные компьютеры не покупать :)
        • 0
          Intel Core i7-3770 (четыре двухпоточных ядра), видюха GeForce GTX 660, прокрутка подтормаживает раз в секунду.

          Повинен явно не компьютер. Возможно, браузер (Firefox).
        • 0
          Да дело не в этом, тормозов-то нет. Просто меня не устраивает плавная прокрутка, реализованная в браузерах нативно. Расширение позволяет настроить всё по своему вкусу.
    • +1
      Я чаще всего читал с андроида хабр, в свободную минутку (например когда собирается проект). Теперь прийдется забыть об этой радости — оно настолько тормозит в хроме на моем S4 LTE, что читать просто нереально.

      P.S. про приложение для андроида в курсе, но в нем табов нет.
      • 0
        Открыл в Хроме на Nexus 4, тормозов не обнаружил, равно как и на N7`2012, равно как не обнаружил и position: fixed
        • 0
          Похоже успели пофиксить. У меня теперь тоже не тормозит.
  • +4
    Фиг с ним, с дизайном, пусть сделают релевантный поиск хотя бы )
  • +20
    Дуров, верни стену!)
  • +1
    Согласен про плюс, сначала подумал он какие-то новые элементы добавляет в эту колонку, никак не ожидал что это теперь кнопка создания топика.
    Ну и сама эта колонка очень много внимания на себя обращает. Всё-таки мы читаем слева-направо и глаз, хочешь, не хочешь, а сканировать информацию начинает слева и отвлекается на всякие элементы типа стрелочки вверх или того же самого плюса. Правильное предлагали решение колонку эту оставить только в шапке, а лучше ещё и у левого края экрана.
    • 0
      Левая колонка сделана хорошо, на самом деле. Она по цвету как бы перетекает в фоновый серый, так что сильно глаз не мозолит. То, что мозолит сейчас — с непривычки, но это на самом деле пройдёт. А вот что сделали зря — так это зафиксировали её у края экрана. Поэтому лого Хабра и аватарка юзера всё же немного отвлекают. Есть же эта стрелочка — оставили бы просто её, разрешив проматывать меню просто.
      • +1
        Если и оставлять эту стрелочку то только на том месте где сейчас кнопка настроек.
  • +5
    А у меня возникает настойчивое желание сделать скрытие левой панели, слишком уж внимание отвлекает.
    #navbar {
    left: -70px;
    }
    #navbar:hover {
    left: 0;
    }
    
    • +1
      Аналогично — левая панель не так часто используется, чтобы постоянно показывать её пользователю.
      Ну и одинаковые кнопки в этой панели, но с разным поведением — однозначно плохо.
    • +2
      С анимацией ещё лучше.

      #navbar { left: -70px; transition: left 0.2s ease-out 0.5s; } #navbar:hover { left: 0; }

      Я бы сделал, чтоб при нахождении вверху страницы меню было видно, но когда начинаешь скроллить вниз, оно бы автоматически скрывалось (по крайней мере на десктопах).
      И ещё я не проверял на планшете, но подозреваю, что этого не сделали: думаю, было бы правильно в вертикальной ориентации экрана помещать меню не вертикально слева, а горизонтально по верхней грани.
      • +1
        Я тоже немного поэкспериментировал, думаю пока вот этот вариант попользовать:
        #navbar {
          transition: opacity .1s ease-in-out;
          opacity: 0;
        }
        #navbar:hover {
          opacity: 1;
        }
        
        • 0
          Я себе вот так пока что сделал:
          #navbar {
          	max-width: 4px !important;
          	overflow: hidden !important;
          }
          #navbar:hover {
          	transition: max-width 100ms ease-in-out 200ms !important;
          	max-width: 72px !important;
          }
          #navbar_overlay.show + #navbar:hover {
          	max-width: 800px !important;
          	width: 800px !important;
          }
          #navbar:not(:hover) a,
          #navbar:not(:hover) a:before {
          	background: #eee !important;
          	border-color: #eee !important;
          	outline-color: #eee !important;
          }
          #layout > .inner {
          	margin-left: 28px !important;
          }
          


          Прячется в серую полоску, вылезает по наведению и после небольшой задержки.
  • +1
    Сегодня друг показал мне новый дизайн хабра.
    Сначала я не поверил, когда убедился что он теперь такой, судорожно стал искать возможность в настройках вернуть все как было, не нашёл.
    Почему нельзя дать пользователям возможность выбора?
    • +6
      Почему нельзя дать пользователям возможность выбора?

      Это принято только в открытых системах, а Хабр — не открытая система. (А иначе где исходники?)

      В закрытых системах принято менять дизайн как обухом по голове, а потом ещё годами убеждать пользователей, что так лучше «и всем нравится», показывать этих «всех», а потом потихоньку возвращать как было, поскольку нытьё не стихает. Так что ждите, через годик-другой постепенно всё вернётся на круги своя.
      • +9
        Не вернётся; здесь есть принципиальные вопросы, в которых не обращают внимание на неудовольствие и даже на бегство пользователей; а не то Q&A вернули бы на Хабрахабр.
    • +3
      Чтоб не поддерживать две версии одновременно — очевидно же.
      • +1
        Ну, мобильная существует и ничего…
        • +1
          Я бы скорее сказал, что она влачет существование…
  • +9
    Корпоративные блоги с собственным дизайном теперь в два раза сильнее сбивают с толку.
  • +1
    Картинки на десктопе выглядят пугающе огромными. Надо их как-то более разумно масштабировать.
  • +3
    я написал исключительно популярный пост «Что не так с Windows 8»

    Ну так тоже нельзя себя переоценивать, пошел смотреть насколько исключительно популярный пост, а там: +51
    При всём уважении, просто резанула по глазам ваша формулировка.


    По сути топика — в целом поддерживаю ваши аргументы, у меня тоже немало вопросов по новому дизайну (ну, например, уже говорил — очень спорно прятать панель поиска внутри меню)
    • 0
      197 голосов (всего, а не плюсов минус минусов), 118 человек добавили его в избранное, 316 комментариев. Не рекорд, но пост является весьма популярным.
      • 0
        Ну я бы сказал — относительно популярным, в топ за сутки может и входил тогда, но готов поспорить, что не был в числе популярных за неделю хотя бы))
        Ну что-то мы разоффтопились, все это не суть важно, просто как уже сказал — резануло по глазам.
  • 0
    Самый главный вопрос — как ее убрать?
    • 0
      В посте про нововведение уже достаточно различных способов о том, как минимизировать вред или исправить новый вид Хабрахабра по своему вкусу. За исключением различного рода костылей убрать новую навигацию и не лишить себя навигации вообще пока что невозможно.
      • 0
        Ее еще и штатными методами не убрать? Отлично.
  • 0
    Редизайн очень печален — я вообще не пойму где теперь что читать, а это основной показатель удобства, если постоянному посететелю сайт стан непонятен, то явно что-то не так с задумкой такого редизайна.
  • +1
    Подтверждение слов автора, про то, что не очень ясны названия кнопок. Только что хотел открыть лучшие посты (гамбургер -> посты), а попал в отслеживаемые посты (трекер, комментарии).

    В посте говорится о планшетизации. Пока ехал в метр зашел с девайса и как-то не увидел особого удобства. Как было так и осталось, только дизайн другой.
  • +5
    Лично меня дико бесит эта перманентная панель слева. По простой причине—читаю посты и комментарии я, как, думаю, и большинство пользователей хабра, намного больше времени, чем делаю навигацию по сайту. Поэтому 99.99% времени это бесполезные кнопки и иконки, которые отвлекают внимание и занимают место. Было бы здорово, если б ее можно было хотя бы скрыть. Старый дизайн выгодно отличался тем, что она была почти всегда не видна, как только вы немного прокрутите страницу вниз.
  • +2
    У меня одного новый дизайн тормозит безбожно в хроме на андроиде (на довольно мощном snap 600 с 2Gb RAM)?
    • +2
      ipad-3 — не то чтобы тормозит, но при свайпе скроллинг срабатывает с заметным лагом — на других сайтах такого нет.
      А впрочем, все-равно читать толком невозможно — почти половину экрана откусили, для такого маленького экрана это фатально.
    • +8
      У всех тормозит. Это теперь так можно — палншетный дизайн, который на мобильных же устройствах и тормозит.
  • +14
    +28 Vokabre,15 мая 2014 в 21:14#
    Кляксу жалко.

    Это не клякса, а схематическое изображение стратегии Хабра.
    P.S. На iPad 2 не работает ссылка «ответить».
  • 0
    Подскажите пожалуйста, как теперь читать вообще все посты, а не только подписки? То ли лыжи не едут, то ли я…
    UPD: Кажется, нашёл. Вот оно что — Меню -> Посты…
  • 0
    Ребят, мы же на Хабре! Сейчас кто-то, кто умеет сделает плагин для Chrome/Firefox/Opera/etc, который исправит данные моменты. Я очень на это надеюсь…

    Ты ведь сможешь %username%?
  • +4
    В новом плоском дизайне меня смущает кнопка «обновить». Как объемный взгляд из прошлого.
    • 0
      Согласен, предлагаю поставить её на место кнопки (+), а саму кнопку сменить на карандаш и сунуть внутрь меню.
  • +11
    Даже вот так было бы удобнее:
    image
    Костылекод для консольки
    $('#menu_tab .menu').find('a').first().remove(); 
    $('#menu_tab .menu').prepend('<form method="get" action="/search/" id="inner_search_form" class="inner_search_form"><a><input type="text" name="q" value="" placeholder="Поиск по сайту"><input type="hidden" name="target_type" value=""></a></form>');
    



    Ибо поиск в 2 клика, причем с потерей текущей страницы — действительно неудобно.
    • +3
      Спасибо разработчикам, что услышали :)
      • +2
        Это проблема теперь. На телефоне при открытии меню фокус тут же переходит на поиск и пол-экрана закрывает клавиатурой. Остается только ткнуть в узкий кусочек меню вокрук поля поиска, что жутко неудобно.
        • 0
          А как же мобильное приложение?
  • 0
    привыкнуть можно, главное чтобы сами статьи и комментарии были полезными. А дизайн уж понятно меняется, чтобы быть похожим на связку с tm, brainstorage, freelansim…
  • +5
    Как человек консервативный, выдвигаю петицию (в порядке важности):
    • верните старый, узнаваемый, логотип
    • верните старый, удобный для десктопов, интерфейс (можно же определять, мобильное ли устройство и уже подстраиватся по него)
    • верните мою молодость
    • –1
      Логотип в яндекс: элементах кстати остался старый:
      image
  • +1
    В новом плоском дизайне меня смущает кнопка «обновить». Как объемный взгляд из прошлого
    А меня смущает то, что она не работает на планшете.
  • 0
    Добавлю свои 5 копеек, захожу на хабр с 2х устройств:
    — ноутбука с уже довольно распространённое разрешение — 1920*1080
    — ещё не совсем старого мобильника Samsung Galaxy S3 (на S4, кстати, та же беда — а этот телефон в устаревшие записывать ещё совсем рано)

    В обоих случаях «новый» интерфейс реально мешает читать.
    Компьютер: слева и справа огромные пустые полосы. Зачем они мне? Я такой моник покупал не для лицезрения этих полос.
    Растяните статью по ширине! (уже не вспомню, возможно в прошлой версии дизайна растягивание делал userscript'ами)

    Мобильник: слева довольно жирная полоска с «настройками». Люди, подумайте сами — я же зашел с мобильного телефона, маленького мобильного телефона (всего 5", а не ~8"-10" на которые расчитан интерфейс), полоска «настроек» банально съедает и так серьёзно ограниченное пространство :(

    Ну а поиск — отдельная песня. Зачем мне переходить на отдельную, пустую (!!!) страницу для вызова поискового интерфейса ?? Разве только для создания дополнительных кликов для баннерной рекламы :)
    • 0
      Скрипт для плагина stylish (firefox), который хоть чуть-чуть, но улучшает ситуацию:

      @namespace url(http://www.w3.org/1999/xhtml);
      @-moz-document domain("habrahabr.ru") {
      #layout { max-width: 1920px; }
      .sidebar_right .block.float_block { position: relative;}
      }
      

    • 0
      Двойной тап в хрома центрирует колонку по ширине экрана. Я так читаю, по крайней мере.
  • +2
    Лучше бы вернули просмотр всех новых постов из всех хабов в одной ленте.
    • +1
      РСС есть. Или добавить все хабы в свою ленту
  • +1
    Слишком большая ширина контентной области, прикладывал линейку, чтобы взгляд не соскочил. 14-16 кегель — не зазорно. Берите пример со smashing magazine.
    Особенно это касается планшетов и телефонов, там ширина строки должна быть 40-50 символов, вместо привычных 60-75.

    typecast.com/blog/a-more-modern-scale-for-web-typography
  • 0
    А есть ли у кого такой баг В ИЕ 11 или других мб браузерах:
    Я открываю вкладками статьи, а потом в течении дня читаю их, так вот если в пост зашел и проголосовал сразу (в течении минуты к примеру) — все нормально сразу видишь результат (тоже самое при клике на скрытый рейтинг стать + и — статьи). Но если ты спустя какое то время попробовал проголосовать, то вылазит нотис в правом углу — «Повторное голосование запрещено». Такая же проблема иногда происходит при написании комментариев — мы уже получали такой комментарий от вас.
  • +7
    А ещё гамбургер почему-то ссылается на /posts/, из-за чего я даже не заподозрил что за ним скрывается меню, до тех пор пока не прочитал этот пост.

    • +11
      Сейчас ещё и ховер появился…
      Скрытый текст

      Это напоминает старый анекдот:
      — Мэри, где чай? Я никак не могу найти…
      — Ах, какой ты беспомощный! Чай в аптечке, в банке из-под какао, на которой наклейка «СОЛЬ».
      • +1
        Вспоминал этот анекдот, когда писал пост. Не нашёл просто куда впихнуть :)
    • +2
      Это сейчас оно ссылается. А вчера тайл с аватаркой ссылся на что-то типа: <url-статьи>#user-tab.
  • +1
    Скрол наверх при нажатии на боковую панель БЕСИТ. Я не просил скролится, я листал полдня комментарии, ну пожалуйста, верните меня обратно в середину страницы.
    • +6
      Так после скролла наверх эта же кнопка меняет иконку на «Вниз» и функционирует как «ну пожалуйста, верните меня обратно в середину страницы». Разве нет?
      • 0
        Вау. Не додумался попробовать, ибо после скрола наверх полоска почти полностью спряталась (сижу с планшета). Таки работает!
      • 0
        Ага, только ховер остаётся «Наверх»
  • 0
    А я крайне ждал редизайна Хабра ради того чтоб они оценку комментария вставили между стрелочками голосования, чтоб наконец перестать мазать по нужной стрелке с мобильного. Но нет))
    Апд: странный казус, когда впервые открылся у меня редизайненный Хабр то из наушников играло «Анамалия – Не для меня», вот и редизайн оказался не для меня ))))))
  • 0
    И плюсик как в Яндексе, только без мегаменю. «История повторяется...» Есть способы :) Но 100% кажется, что уж где-где, но на хабре точно делали из самых лучших и искренних убеждений, что так почти всем будет только лучше, в итоге должно все получиться :)
  • +4
    Каких-то полтора года назад я написал исключительно популярный пост «Что не так с Windows 8».

    Нет, исключительно популярный пост вы написали сейчас.
    • +2
      Спасибо :) Тот обзор Винды не блеснул рейтингом, но зато счётчик просмотров там уже на 311 000.
  • +1
    Для планшетов, да? А как загрузить скриншот с айпада? Ну или другую картинку с него вставить. Боковая панель на десктопе все время торчит сбоку, на планшете скролится вверх, кнопка вверх при этом вообще где-то ровно посередине страницы — там где ее еще найти надо. При раскрытии «меню» какие-то глюки — пара первых букв и дальше полоска смазанных пикселей., хорошо, что есть reader mode (кстати одно из неоспоримых преимуществ сафари, и наверное единственное)
    • +1
      Кнопка «вверх» кликабельна по всей доступной высоте начиная от кнопки «добавить пост» и до кнопки настроек.
      • +2
        Это если включено в настройках — но так вообще не выносимо, постоянно уносит в этот самый верх на ровном месте. Имхо, самая дурацкая идея на сайте в принципе, особенно если «вниз» оно потом не работает. На компьютере есть хоум, на планшете аналогично работает клик по верхней части строки адреса — нахрена свои велосипеды на каждом сайте, да ещё расположенные там где пальцы держат планшет?
        • 0
          Ну если взять ультрабуки или те же, макбуки (да и все ноутбуки и компьютеры с обрезаной клавиатурой), то нужно жать на что-то вроде fn+up, что зачастую сложнее чем тапнуть/кликнуть по области на экране.

          Вот, кстати, по поводу пальцев, которые держат планшет — это вы очень кстати заметили.
  • +5
    Дизайн модный, юзабилити не плохое.
    Не хватает одной маленькой кнопки — «Старая версия сайта».
  • +6
    Во-первых, читать хабр на iPhone просто невозможно по двум причинам: про responsive design авторы не слышали (слишком мелкий шрифт), на iOS 6 разрекламированное приложение не устанавливается.

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

    В-третьих, меню. Зачем его сплюснули в несколько кнопок? У меня места хватает на экране, чтобы отобразить полноценное меню. Конечно, доля планшетов около 10% (не нашел публичной статистики хабра, взял другой похожий ресурс) весьма значительна для того, чтобы просто снять со счетов десктоп.
    Вместо того, чтобы делать сайт удобнее и доступнее, вы делаете только хуже. Прежде чем что-то менять, нужно просчитать, стоит ли это того. Или это такой способ стимулирования продаж планшетов?
  • 0
    вот ты тут написали то сколько всего… в целом по делу, не спорю. но скорее всего кто то просто залил дизайн не на мобильный сайт а на главный, и нагло тестирует на обычных пользователях
    P.S. Я поиск использую редко, но вот то что логотип хабра отдизайнерили, превратив роскошный предыдущий рисунок в маленький квадратик — это очень даже заметно
  • 0
    На планшете супер, а в винде очень непривычно…
  • 0
    Одному мне кажется что кнопка Наверх должна быть в самом низу? Сейчас там в самом низу кнопка Настройки.
    • 0
      Мне вообще непонятно её наличие: мобильная опера сама после пары резких прокруток покажет кнопку наверх. Но если её и показывать, то где-то посередь экрана.
  • +8
    Все-таки как ни крути, ни верти, не внушай — текстовое меню/поиск на десктопах всегда комильфо и привычно размещать в шапке. У меня теперь полная дезориентация в связи с отсутствием отступа сверху и той привычной шапки/меню которые я вижу на каждом 2 сайте.

    Попросту забыли про responsive design если уж на то пошло, раз такие пироги затеяли. И все эти внушительные разговоры про увеличение «первого экрана» пользователя бред поскольку по части юзабилити распологать меню слева с большими иконками без текста, запрятывать поиск и расфосовывать разделы это явно не про десктоп без touch интерфейса и ноутбуки, широкоформатные дисплеи. Я уже писал ранее в темах тостера, фрилансим — унификация всех проектов в рамках одной компании вызывает спорные вопросы. Впрочем, хозяин барин. Но прав ли он?
  • +3
    Вложенность элементов управления и навигации — худшее, что могло произойти с дизайном и юзабилити веб страниц. Я уже не говорю про ужасные длинные тени. Интересно то, что затеял все это гугл. Нельзя же так бездумно все копировать:



  • +6
    Сложно сказать что-то про само меню, непривычно, но вот иконки явно не интуитивные

    — если нет аватара, то ссылка на профиль оформлена в виде серого конвертика. Какое отношение конверт имеет к профилю? Что характерно в комментариях пользователи без аватара отображаются стандартным стилизованным человеком.



    — ссылка на добавление нового поста оформлена весьма странной и нестандартной иконкой, обычно + используется не для создания нового документа, а для голосования в социальных сетях. Первая ассоциация с Google Plus, вторая со всевозможными «нравится» и +1.

    Есть вполне стандартная иконка для нового документа, которая используется почти везде — от Word до Evernote и Notepad++ — стилизованный пустой лист бумаги, иногда с маленьким плюсом.



    — старый логотип жалко

    — а вот иконка меню наоборот привычная после Android
  • +1
    Ё#а#а# жизнь, что это с Хабром сделали ироды!?!? Хрен с ним, у кого-то помутнение в башке произошло, всякие тостеры-компостеры испохабили этим уродством, зачем Хабр-то трогать было???
  • +5
    А я всё жду когда трендом будет сохранение «старой доброй» атмосферы, а не копирование лонгшедоу. Даже обидно за собрата дизайнера. Визуальная стилистика становится моветоном (по крайней мере для меня) еще не успев развиться толком, потому что её кидаются использовать все. Разом. Без оглядки.

    P.S. для полного «счастья» нужно еще сделать круглые аватарки.
  • +4
    А вот тут — habrahabr.ru/post/85852/ — код примеров слетел из-за редизайна или по другой причине?
  • +2
    Блин, из ленты в лучшие теперь в 2 клика добираться. А если левая полоса скрыта, то все 3 =( Раньше был 1 клик.
    • +1
      Еще замочек иногда наезжает на стрелочку…

      Такое впечатление, что это не финальный дизайн, а первая альфа. Ну что за косяки, ейбогу.
  • 0
    Выскажу свое мнение, как пользователь, который не часто заходит на Хабр и даже к старом дизайну не очень успел привыкнуть. Раньше четко было написано «Посты», «Новые», «Песочница». Трудно было не понять. Сейчас же я смотрю на эти иконки сбоку и даже приблизительно не понимаю куда клацать. Чтоб найти какой-либо раздел, полностью просматриваю каждый значек и все подменю.

    И эта постоянная единичка висит, которая ужасно раздражает, сообщает мне что где-то в статье добавили новый комментарий. Прям как единичка на значке App Store, которая раздражает не меньше.
  • 0
    Терпеть не могу, когда скролю страницу, а что-то прилипло и не двигается. Это ужасно, сужает всю страницу до высоты монитора.
  • 0
    Я застрял при попытке открыть лучшее.
    • 0
      Вы нашли как его найти? Сам в поисках
      • +1
        Меню («гамбургер») -> Посты -> Лучшее за сутки/неделю/месяц/все время.
  • +2
    Мое мнение: перенести кнопку меню под лого (ИМХО так более понятно что за ним что то скрываеться), и при клике на трекер, сразу отправлять в трекер, а там уже пусть пользователи определяют куда им. В любом случае кликать больше не прийдеться, а при переходе в трекер постов — один клик и меньше курсором водить.

    P.S.: только заметил что прислушались к жалом на узкое пространство для самой записи. Сейчас 1000 против 690
    • 0
      Про трекер согласен. Думаю большинство, кто им пользуется, отслеживают именно посты. Всё остальное очень редко. То есть быстрый доступ к трекеру по одному клику был бы действительно удобен (как раньше — по ссылке)
  • +8
    Good news everyone!

  • +5
    • 0
      А у меня такое в топике объявлении все время.
    • +1
      Хабраотладка в действии:

      window.onerror = function () {
          alert('onerror', arguments);
      }; 
      
    • 0
      adblock не даёт подгрузить adriver — вылезают подобные ошибки.
      Выключение адблока убирает эти ошибки на загрузке страницы.
      Но такая же ошибка появляется при попытке создать новый пост.
      Так что, вероятнее всего, что-то меняют в данный момент и скоро поправят.
      • 0
        VK.Widgets тоже генерирует ошибку из-за Ghostery.
      • 0
        А в Opera с заблокированным adriver'ом почему-то всё работает.
    • 0
      Напомнило случай на SO: meta.stackexchange.com/q/71780
  • НЛО прилетело и опубликовало эту надпись здесь
    • +9
      Обычная разработка на продакшене, тестирование на локальных серверах — для слабаков!

      habrahabr.ru/javascripts/1400231628/all.js
      /*   ==global==   */
      
      window.onerror = function () {
        alert('onerror', arguments);
      };
      
      • +1
        О, вон уже выше в комментариях тоже самое обсуждают.
    • +4
      Ух, пилят на живую!
      Я бы так не смог — кишка тонка продакшн трогать.
  • +2
    Спасибо за ваш пост. Я уже 20 минут ищу, как просмотреть новые посты!
  • 0
    На alert нужно было запилить «Вы хотите вернуться к старому дизайну Хабра?» и что бы подставляло старый дизайн вместо нового )))

    А как попасть в топ постов за 24 часа?
    Вот эта надпись «Лучшее за 24 часа» должна быть ссылка на топ постов.
  • +1
    А вообще, раз уж появился сайдбар — хотелось бы иметь подменю читаемой статьи, особенно кнопку «В избранное» на любом участке страницы. Часто еще на середине понимаешь, что статья интересная и хотелось бы ее потом дочитать, а найти эту заветную кнопочку, когда уже написано больше 100 комментариев, бывает непросто.
    • 0
      Список + и — напомнил мне старую шутку, хотя в ней все чистая правда.
      В чем плюсы блица в шахматах:
      Блиц учит быстро принимать решения
      Блиц учит мгновенной оценке позиции…
      А в чем минусы блица:
      Блиц учит быстро принимать решения
      Блиц учит мгновенной оценка позиции…
  • +1
    1. Хорошо хоть клик по аватарке переделали: вчера клик не вёл в профиль.
    2. К слову о величине трафика от планшетного планктона и офисного — было бы интересно увидеть статистику для Хабры.
  • 0
    Спасибо за пост! Нашёл нормальную ссылку на «Посты» (до этого приходилось нажимать много раз PgDn до меню в конце страницы).

    Кстати, интересно, а почему нет ссылки на «Посты->Тематические» с главной? Ведь это историческая «главная лента», которую многие и читают (и в Микрохабре именно она, похоже)… Непонятна мысль ТМ.
  • +1
    В целом, новый интерфейс Хабра мне абсолютно не понравился, так же, как не нравится дизайн «Тостера» (до сих пор скучаю по «вопросам и ответам»). Не люблю информационный шум и занимаемое место, создаваемые статическими элементами на страницах, это мозолит глаза и мешает при прокрутке и чтении, особенно длинного текста. Не люблю заточку под фулскрины, люблю окна. Спасибо, что сохранили возможность убрать лишнее при уменьшении ширины окна, жаль что нельзя отключить боковые панели насовсем. Я убежден, что меню сайта должно быть сверху, и уезжать с глаз долой при чтении. И переход наверх я всегда могу выполнить без «помогающих» в этом панелей, по хоткею или по тапу на заголовок браузера. (А при наличии навигации снизу необходимость в этом отпадает). Надеюсь, что новый дизайн интерфейса на самом деле хорош и современен, что он прнравился большинству пользователей, и это я уже стал старым брюзгой, ретроградом и отстал от модных тенденций.

    P.S. В Chromium (37.0.1994.0) залогиниться так и не смог,
    Uncaught TypeError: Cannot read property 'length' of undefined _navbar.js:14
    Пришлось через Firefox.
  • 0
    Я вчера между сменой дизайна попал, когда переполз на мак с винды… Думал это специальная версия для мака сначала… А нет, для всех
  • +1
    Никто не знает — как эту хрень слева убрать?
    Раздражает жутко.
    Хотелось бы то же самое — но сверху, и чтобы уплывало вверх со всей страницей.
    Но если не будет сверху — не беда, как-нить наковыряю.
    Но вот эта хрен слева — бесит.
    (как и та, что справа — но к справа я уже привык; хотя и по-прежнему бесит)
    • 0
      С помощью css, сам не смог смотреть на эту панель

      #navbar {
      transition: opacity .1s ease-in-out;
      opacity: 0;
      }
      #navbar:hover {
      opacity: 1;
      }
  • 0
    Подскажите, может кто уже нашел, как в этом чудесном новом дизайне можно отредактировать профиль?
    • +3
      Внизу слева кнопка настройки. Сам каждый раз мучительно вспоминаю.
  • 0
    Все устраивает, дизайн в общем стила всех площадок это правильно. Единственное что сделал так это
    ##DIV[id="layout"]{max-width: ()!important}
  • +3
    Небольшой UI-эксперимент.

    Хабр сейчас


    Хабр а-ля Medium.com и с поиском
    image
    • +3
      Простите но меня просто бесят широченные пустые поля с боков контента. Зачем было изобретать широкие мониторы и потом ограницивать себя форматом 4:3 искуственно?
      • +3
        Ну, например, потому что, если взять два нешироких абзаца по 10 строк каждый и растянуть в две очень длинные строки, то читать их станет неудобнее.
        • 0
          Окно браузера можно легко уменьшить до комфортного размера колонки, но сложно увеличить.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Меня одного вот этот реквест напрягает?

    http://garu.hit.gemius.pl/_1400255994936/rexdot.gif?l=30&id=p8zr4.NqiIZJgD2cnP2s5fWWnIQFHrAvZ280B955gIr.f7&fr=1&tz=-360&fv=Shockwave%20Flash%2013.0%20r0&href=http%3A%2F%2Fhabrahabr.ru%2Fpost%2F222965%2F&ref=http%3A%2F%2Fhabrahabr.ru%2Fusers%2Futhunderbird%2Ftopics%2F&screen=1366x768&col=24&window=1366x367
    • +1
      Поздравляю, вы словили спайвэр (у меня, например, никакого вызова garu.hit.gemius.pl нет)! Гуглить «gemius.pl spyware» и пытаться найти корень зла.
    • –1
      У меня такой же есть.
      Из http://habrahabr.ru/javascripts/1400253663/gemius.js генерируется запрос.
      • 0
        Мне интересно, Хабрахабр что, не может сам собирать статистику просмотров своих страниц своими же пользователями?
        • 0
          Рекламодатели иногда хотят независимую статистику от «авторитетного» исследователя. + Гемиус еще типа аналитику по аудитории предоставляет, а не только статистику. Хотя, конечно, фуфло редкое.
  • 0
    Я в рамках редизайна ещё и сайдбары поубирал, так как редко ими пользовался.
    userstyles.org/styles/101575/habrahabr-ru-contently
  • +1
    Тем, кто жалуется на труднодоступность поиска: для Firefox есть поисковый плагин.

    Было бы здорово, если бы habr сам предлагал установить поисковый плагин.
  • 0
    Даже не смотря на минусы (некоторые можно назвать придирками), новый дизайн мне кажется удобнее предыдущего. Кое-где, конечно, непривычно, но так всегда после перемен.
  • +3
    Стопицотпятьдесятьсемь раз согласен.
    Наинеудачнейшее ux-решение и крайне унылая ui-реализация.
    Хабр уже не тот. ЖЖ уже не тот. И ващьпе — что это за череда внезапных редизайнов этой весной прокатилась? И практически все — не в лучшую сторону. Э?

    зы. отдельный яйцеотрыв следовало бы произвести дизайнеру, создавшему этот «логотип». Ибо крайне грязно с цветами получилось. Потом — скучно (у вензельного лого Хабра было свое лицо) и глвное — «темпорально трендово»: мода на длинные плоские тени возникла каких-то полгода назад и уже уходит, как любой мимолетный дизайнерский тренд. Уже к осени этот лого будет смотреться как дремучая древнота.
    • 0
      А мне помнится ещё в 80-х рисовали так.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Делаю ночной режим юзерстиль — интересно кому нибудь?
    image
    • 0
      Сегодня ночью доделаю и обновлю на юзерстайлс.
      • 0
        Картинки на белом фоне, наверное, глаза выедать будут.
        • 0
          Решил эту проблему с помощью CSS фильтров, оригинал показывается при наведении.
  • +2
    Кажется, основная ошибка при создании нового дизайна не сколько в том, что стараются следовать всем новым трендам, сколько в том, что забывают, что основная аудитория — айти сообщество.
    У нас здесь своя специфика, иное отношение к хоткеям, логотипам, панелькам, отъедающим места.
    Любое решение, которое делается на таком сайте, должно удовлетворять массу перфекционистов сразу, это крайне важно.
    Айтишники многие любят и умеют кастомизировать, такой функционал должен быть на сайте. Например, добавлять-убирать элементы из меню, убрать его вверх, вниз, скрыть, сделать прозрачнее.
    Без всего этого хабр становится обычным безликим сайтом, каких тысячи и не имеет своего шарма и ощущения — вот, это сайт для айтишников, я пришел куда надо.
    • +1
      К дизайну можно привыкнуть быстро. Для меня крайне неприятным являются часто неработающие хоткеи (f/r/ctrl+enter) и серьезные косяки в навигации.

      Например, читать комментарии и постоянно кликать в маленькую область для перехода к следующему непрочитанному на 23" мониторе крайне неудобно. Потому что нужно переключиться взглядом с центральной колонки и найти+навести+кликнуть на крайне правую область размерами 34 х 24px (на FullHD она не сильна большая). Во-первых, сбивает процесс чтения, во-вторых, грозит попаданием в кнопку обновления и потерей состояния, как на больших мониторах, так и на мобильных устройствах с небольшим экраном.
  • 0
    Подскажите, как убрать мерзкий красный индикатор на колокольчике слева?
    • +1
      #navbar .nav_panel .tab .count { display:none; }
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Как теперь посмотреть посты за неделю которые я не видел? А то у меня за последние 3 дня, только 2 страницы постов новых (я так полагаю это за сутки)
  • +2
    В дополнение про иконки. Сегодня несколько минут не мог понять как войти на хабр — последний раз заходил до обновления дизайна. Вот какое отношение эта сумка с ручкой имеет ко входу на сайт?



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

  • +2
    Ночной юзерстиль, можно пользоваться, обо всех ошибках и замечаниях прошу в личку — буду обновлять стиль на сайте.
    image
  • +4
    Breaking news: в ТМ ищут UI/UX-дизайнера.
    • +1
      Лучше поздно, чем никогда :) И вообще это хорошо, что понимают свои слабые стороны и исправляют их
      • 0
        Они либо давно ищут, либо старую вакансию открыли.
        • 0