Или — поговорим о дизайне
На волне очередного редизайна и слияния, было открыто несколько тем, посвященных проблемам обновленного портала, разнородности размещаемых на нем статей, кармической системе и прочему. В этой я хочу рассказать о своих мыслях относительно интерфейса Хабра и приглашаю всех заинтересовавшихся — обсудить его дизайн. До этого я писал о своих идеях только в комментариях, одни из них были замечены администрацией и приняты, другие или прошли мимо внимания разработчиков, или были сочтены не актуальными. Теперь я решил оформить все свои (и не только свои) хотелки одним постом.
Проблема первая — фиксированная верстка
Вот так выглядит Хабр на моем рабочем мониторе (ссылкой, чтобы не рвать тред скриншотом 5К. Вес 1,6 Mb).
Лично я его так не читаю, но проблема все равно присутствует: у сайта фиксированная верстка и множество не отключаемых элементов по краям. Нужно ли во время чтения статьи или комментариев, постоянно видеть плашку “Читают сейчас”? Почему бы не расположить ее сверху (вместе с рекламой) и назначить ей обтекание, чтобы при скролле — текст статьи и комментарии расширялись на все окно браузера, без огромных отступов слева и справа? (Не пинайте, если с обтеканием все сложно, я не настоящий верстальщик. Но ВКонтакте это работает) Не обязательно растягивать браузер от одного края до другого (хотя многие так делают, из удобства или характера работы), но все равно Хабр порой выглядит почти как на первом скриншоте, по моему это совершенно нерациональное использование пространства.
Вот так выглядит Хабр у меня, после манипуляций с uBlock и Stylish: главная страница — (длиннющая вертикальная колбаса в PNG, 1200*12500 пикселей, 4 Mb); статья — (еще более длинная вертикальная колбаса в PNG, 1200*28000 пикселей, 10 Mb). Или PDF: 2,7Mb и 4.2Mb. (Довольно дико сделано, но зато наглядно и проще, чем хостить где-то переделанные странички Хабра. Сорри)
Я увеличил ширину элемента с текстом, задал ее в процентах и получил возможность гибко настраивать длину строк в статьях и комментариях. Строки стали длиннее, комментарии стали занимать меньше места и следить за дискуссией в отдельной ветке стало гораздо удобнее. Если строчки в статье становятся слишком длинные и неудобные, я просто уменьшаю ширину окна.
.post__body_crop > .post__text-html > img {
max-width: 20%;
}
.megapost-cover__img {
max-width: 20%;
}
.post__body_crop > .post__text-html > .oembed {
max-width: 20%;
}
.post__body_crop > .post__text-html > * > img {
max-width: 20%;
}
.layout__cell {
max-width: 100%;
}
.content_left {
padding-right: 10px;
}
.post__body_crop > .post__text-html {
width: 100%;
}
.post_full {
width: 100%;
}
.comments-section {
width: 100%;
}
.comment__message_downgrade-5 {
height: 20px;
}
.post__body_full > * > img {
max-width: 50%;
max-height: 50%;
}
.post__body_full > * > * > img {
max-width: 50%;
max-height: 50%;
}
.oembed {
max-width: 50%;
max-height: 50%;
}
.layout__cell {
margin-left: 10px;
}
.post__body_crop > .post__text-html {
max-height: 250px;
}
Стили немного костыльные, но так было быстрее всего и оно работает :) Про размеры картинок — расскажу ниже.
Вторая проблема — огромный подвал
В браузерах мало способов моментально попасть в нужное место страницы, самые простые и очевидные — переход в самый низ и на самый верх, это делается железно прошившимися в сознание кнопками End и Home. Стандартная навигация сайтов, где контент размещается постранично — бар с номерами страниц расположенный в самом верху или в самом низу, он всегда легко доступен в один клик по вышеуказанным кнопкам. Но что я вижу, опустившись в самый низ Хабра? Блок с разделами сайта и… еще два здоровенных блока “Читаемых” и “Интересных”, никакого интерфейса для листания. Для того, чтобы его увидеть, надо подняться на страницу вверх. Ребята… ну так нельзя :(
Третья проблема — управление подписками
Увы, она не решается через Stylish, потому что касается расположения элементов управления подписками на публикацию. Иногда надо отписаться от темы, или посмотреть данные автора, но для этого надо найти панель, которая расположена в абсолютно случайном месте страницы. То есть — место не случайно, она между статьей и комментариями, но “Нельзя просто так взять и перейти на эту панель” ©, ибо статья может быть любой длины, а комментарии и подавно. Потому приходится скроллить, и скроллить, и скроллить…
Эта панель нужна потому, что любой твой комментарий автоматически подписывает тебя на тему и включает ее в трекер. Часто совершенно не хочется отслеживать абсолютно все комментарии в теме, которая может быть совсем не интересна, а хочется только увидеть ответ на вопрос, который ты задал кому-то из пользователей. Такое уведомление приходит на почту и оно очень удобно. Но, каждый раз, когда ты отвечаешь в интересующей тебя ветке — тема снова появляется в трекере. Надо или убивать ее оттуда, или искать эту панель под статьей и снимать там галки. Очень неудобно. Если сложно изменить алгоритм подписки на тему, хотя бы переместите или сдублируйте эти галки в быстро доступное место на странице, как это сделали с кнопкой редактирования статьи, которая была в том же “никогде”.
Проблема четвертая — отсутствие шаблонов оформления статей
Увы, но главная страница выглядит очень неряшливо и разнородно. Анонсы статей сделаны тяп-ляп, кто во что горазд, КДПВ совершенно произвольных размеров, текст и подавно. Когда я, вышеуказанными стилями, ограничил размер изображений и высоту поста в ленте — я понял, насколько это удобно, когда все выглядит одинаково, параллельно и перпендикулярно. Лента не рвется здоровенными картинками, огромными кусками текста и тд тп.
“Во-первых — это красиво” ©
Сайт выглядит аккуратнее и привлекательнее, навигация по нему упрощается. У меня это все сделано по-быстрому и на коленке, из кучки костылей, но оно работает. Почему бы не сделать принудительно строгий дизайн для ленты публикаций, чтобы при написании статьи, анонс публикации состоял не из фотки и текста, произвольных размеров, заплейсеными в произвольный тег разметки (я насчитал около полудюжины разных вариантов), от балды отрезанных катом от основного контента, а создавался через специальную форму, чтобы потом его содержимое было размещено в конкретном месте ленты, с картинкой заранее заданного размера, с определенным числом строк в тексте, а не как попало, по прихоти автора публикации. Будем честными, далеко не каждый автор статьи — дизайнер, а единый стандарт для отображения анонса статьи, разработанный профессионалом — сильно улучшит внешний вид сайта.
Вдобавок, оказалось очень удобным, когда картинки в статье не растягиваются во всю ширину окна, а занимают примерно 50% его ширины. Если картинку имеет смысл рассмотреть крупнее — надо делать ее полноразмерную кликабельную версию. Было бы здорово, если бы Хабрасторадж имел функцию не простого хранения картинок, но мог бы автоматически ресепмплить их: для анонса статьи, для полной статьи и кликабельную полноразмерную версию, генеря две-три ссылки сразу, по выбору пользователя. Вдобавок, такую строгую верстку легче сделать адаптивной, не создавая отдельную мобильную версию сайта (хотя вы уже тестируете ее обновление, но — мало ли).
Проблема пятая — быстрое движение ленты
Текучка скороспелых новостей слишком быстро двигает ленту, особенно после слияния Хабра и ГТ (а ранее еще и ММ). Мне кажется — короткие заметки надо пускать совершенно отдельным потоком. Такое решение придется по вкусу многим любителям отдельного Хабра, которые привыкли, что технические посты не разбавляются множеством новостей об айтишных законопроектах и тп. Для этого можно выделить небольшой блок расположенный или сбоку, или наподобие промо со свежими вопросами Тостера, или вроде блока в подвале с “Читаемыми”. В этом блоке новости будут отображаться максимально компактно, в полторы строки, только с заголовками и мелкими цифрами каунтеров. Новости можно будет открыть отдельной лентой по клику на заголовке блока, тогда они будут выглядеть как обычная лента, с КДПВ и небольшим анонсом до ката. Примерно так сделано у Варламова, но его сайт без тщательной вивисекции uBlock смотреть категорически невозможно. Может быть, для этого придется пересмотреть критерии постинга публикаций в хаб “Новости” и подобных коротких заметок.
Далее я скомпилирую несколько предложений, озвученных не только мной, в других подобных темах:
- Сделать сортировку публикаций не только по их рейтингу, но и по числу закладок в избранное. Мне кажется, это более объективный параметр, определяющий то, насколько статья показалась полезной, а не просто удачно зашла под настроение. У большинства статей мало закладок, единицы и десятки, их часто откладывают “прочитать на потом”. А некоторые статьи забирают в избранное сотни и даже тысячи людей, это говорит о том, что статья не просто любопытна, но и многим показалось достойной того, чтобы держать ее в избранных и иногда возвращаться.
- Нередко возникает проблема “сгорания” новых комментариев”, если случайно обновится или не догрузится страница в браузуре, чаще всего это происходит на мобильных устройствах и добивается слабым мобильным интернетом. Иногда это не сильно расстраивает, но если ты внимательно следишь за определенной темой и не хочешь упускать ни одного комментария, то в темах с сотнями комментариев —
ЭТО БЕСИТ!!!!1111это катастрофа! Новые, но “сгоревшие” комментарии уже не найти… Хорошо бы получить возможность в настройках включать и выключать опцию, при которой счетчик новых комментариев и их подсветка вообще бы никогда не сбрасывались при обновлении страницы, пока пользователь сам не нажмет кнопку обновления комментариев. - На Хабре не раз публиковались скрипты для того, чтобы сворачивать-разворачивать отдельные ветки комментариев. Хорошо бы иметь такую возможность в штатном движке и чтобы сайт запоминал состояние ветки. Чтобы при очередном обновлении страницы, не проматывать бесконечное кармонытье или политоту, которую ты когда-то свернул. Не уверен, что они будут работать на обновленном дизайне после слияния и потому не стал их искать.
- Один из эффектов моего стиля для Stylish — уменьшение высоты сильно заминусованных комментариев до одной строчки. Как оказалось — это гораздо удобнее “забледнения”, и я еще ни разу не пожалел, что не прочитал подобный комментарий полностью. Не обязательно удалять такой комментарий, как это сделано у меня (это всего лишь CSS), но можно автоматически сворачивать его под кат. Вдобавок, это может немного уменьшить сливание кармы за неудачные комментарии.
- Не так давно починили парсинг движком сайта ссылок в комментариях, теперь хочется большего. Было бы очень здорово, если бы парсер автоматически распознавал ссылки на статьи и комментарии Хабра, преобразуя их в заголовки статей и заголовки с ником автора комментария.
- Из-за обратного слияния нескольких сайтов в один — возникла проблема слишком быстрого движения ленты и гораздо большего количества статей в сутки. Это сильно затрудняет выбор из ленты интересных статей. Вот если бы на Хабре был не обычный поиск по тегам, а экспертная система рекомендующая статьи по интересам. Например такая, как на Goodreads. Этот сайт анализирует прочитанные книги, их оценки и формирует рекомендации для дальнейшего чтения. Причем, это реально работает! Удивительно точно и хорошо. Статьи проще и короче, чем книги, статистики из трекера, комментариев и голосов можно набрать не меньше, было бы интересно читать только те статьи, которые тебе гарантированно будут интересны.
- Хабр все больше напоминает соцсеть, здесь есть возможность добавлять пользователей “в друзья” и следить за их активностью. Но при подписке на пользователя, в трекере появляются не только его статьи, но и отмеченные им у других авторов. Это бывает очень неудобно, хорошо бы разделить это на два трекера.
- Если человек пишет много статей и активно общается в комментариях, ему часто пишут в приват. Иногда это выливается в продолжительное и интересное общение, чаще это быстрый и короткий “вопрос-ответ”. В этом случае становится насущной необходимостью — поиск в сообщениях, а также добавление отдельных диалогов и сообщений в избранное. Чтобы интересный ответ на вопрос, ссылка на сайт и тп, не потерялись среди множества коротких диалогов.
Надеюсь на то, что пользователи выскажут или вспомнят еще не одну интересную идею, пост будет постоянно дополняться из комментариев. Об ошибках и опечатках — пожалуйста пишите в личку.
*.ps - векторный «клубок». Вдруг они передумают и вернут?..
Автор: vconst
