Конкурс на дизайн отображения новостной ленты Хабра

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

В следующей версии скриптов подход будет более гибким. Он уже частично реализован в имеющихся скриптах. Он позволит брать в браузере пользователя содержание из страниц и перекладывать его в совершенно другую, собственную вёрстку. Мы уже не будем так привязаны к вёрстке сайта, мы можем построить себе любую страницу новостей и даже несколько их видов.

Одна из таких страниц будет реализована мной (другие — на усмотрение энтузиастов). Я представляю себе некоторый дизайн, который может быть реализован, если не будет альтернатив. Если будут варианты, есть много шансов, что один из них будет выполнен как основной. Ведь только 10% читателей нравился дизайн ZenComment. И это неудивительно, потому что приходится идти на компромисс «дизайн сайта — количество переделок». Если будет много переделок, их разрушит волатильный дизайн сайта.

Вёрстка не может быть точной копией сайта, потому что это — продукт компании, а скрипт сможет обрабатывать не только материалы компании.

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

Принципы, которые будут заложены в вёрстку страниц нового дизайна

Само понятие «дизайн» тесно связано с юзабилити в данном случае, при проектировании новостной ленты. Поэтому нужно, чтобы он подчинялся ряду требований поведения, которые не застывшие правила и могут быть дополнены пожеланиями участников проекта. Сейчас список требований выглядит приблизительно так.

* Сайт наблюдается через браузер компьютера или мобильного устройства в виде ленты сообщений, которая трансформируется, разворачиваясь от одиночных строчек — заголовков сообщений, до заголовков с аннотациями, далее — до просмотра полной статьи или сообщения (при этом другие сообщения могут оставаться свёрнутыми) и до статьи с комментариями к ней. Почти всё из этого, кроме первого пункта, можно видеть в работающем скрипте HabrAjax. Он показывает ленту, подгружает статьи без перезагрузки страницы, разворачивает и сворачивает комментарии. Чего он не может — свернуть аннотацию до строчки (хотя есть функция сворачивания статей по ключевым словам и авторам во время загрузки ленты), не может пометить статью как прочитанную и представить ленту в ином виде, чем тот, который предоставляется сайтом. Например, есть желание убрать статью из ленты как прочитанную (или непристойную) — вариантов нет. К имеющимся вариантам планируется добавить сворачивание до уровня, примерно похожему на список «Прямой эфир» справа.

* на ленту действует сортировка и преобразование, достигаемое скриптами второго поколения, которые вырастут на базе HabrAjax и помогут получать пользователю более точно подобранные статьи и давать более гибкое оценивание (без второго нет первого).

* лент может быть от одной до нескольких, а где они будут располагаться — усмотрение пользователя. Например, на тесном экране смартфона помещается одна лента, а остальные (лучшие, вопросы, избранное) свёрнуты до кнопочек, лежащих наготове. На просторном экране компьютера может быть традиционная раскладка с правой колонкой, в которой 1-2 ленты, а может быть одностраничный вариант. Всё управляется пользователем. Разработка движка — наша забота, разработчиков, от вас требуется дизайн основного элемента (ленты), действующий прототип которой можно увидеть, как выше описано, а Хабре с HabrAjax + ZenComment. (По ссылкам можно предварительно познакомиться с функциями скриптов, скриншотами стилей, но основная функция, имеющая отношение к поставленной задаче — это сворачивание-разворачивание подгруженных статей в ленте.)

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

Автор: spmbt