Помогите нам протестировать Horizon, нашу новую тему

Мы рады представить нашу новую тему — Horizon! Мы тестировали Horizon в течение некоторого времени внутри компании и теперь готовы протестировать её здесь, на Meta, чтобы получить ваши отзывы о том, как можно улучшить эту тему.

В этой теме мы расскажем о целях создания Horizon и дадим рекомендации по тестированию и предоставлению нам обратной связи.

:sunrise: Знакомство с Horizon

Horizon — это простая и красивая тема, которая стремится стать новым стандартным решением для сайтов на Discourse.

:warning: Обратите внимание: Horizon всё ещё считается экспериментальной темой! Поэтому, прежде чем устанавливать её на своё сообщество или предоставлять отзывы, пожалуйста, прочитайте остальную часть этой темы, чтобы понять, чего ожидать от этой темы и как лучше всего давать нам обратную связь.

Horizon Theme

:mirror: Для кого предназначена Horizon?

Хотя мы надеемся, что Horizon подойдёт многим сообществам, мы создали её с учётом потребностей конкретных пользователей — нетехнических администраторов и обычных участников.

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

  • Обычные участники находятся где-то между разовыми посетителями и элитными продвинутыми пользователями. Они регулярно читают и пишут в сообществе и чаще всего посещают Discourse в основном (если не исключительно) со своих телефонов.

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

:magic_wand: Чем Horizon отличается от других?

В то время как наша тема по умолчанию представляет собой относительно чистый холст, Horizon — это тема с чёткими дизайнерскими решениями. Это означает, что мы приняли определённые решения относительно того, как Discourse выглядит и работает при использовании этой темы, чтобы обеспечить отличный пользовательский опыт для наших целевых пользователей (описанных выше). Вот некоторые изменения, которые вы можете заметить:

  • Карточки тем содержат меньше информации. Самая заметная особенность Horizon — карточка темы. Мы убрали как можно больше информации, чтобы список тем выглядел чистым и привлекательным. Некоторые данные, например, более подробный список участников темы и теги темы, не отображаются на карточке темы.

  • Horizon не предназначена для поддержки дополнительных настроек. Поскольку мы ориентируемся на аудиторию, которая не может или не заинтересована в настройке внешнего вида или поведения Discourse, Horizon не гарантированно будет хорошо работать со всеми компонентами тем или кастомизациями.

    Тем не менее, мы протестировали Horizon с наиболее популярными компонентами тем, и найденные нами несовместимости пока незначительны. Мы будем работать над их устранением со временем. На данный момент мы не рекомендуем активировать компоненты тем с Horizon или добавлять свои собственные настройки.

  • Horizon включает новые цветовые палитры, которые администраторы могут включить, чтобы дать участникам больше контроля над опытом взаимодействия с сообществом. После включения через настройки цветовой палитры администратора участники смогут выбрать одну из шести тематических цветовых палитр для создания индивидуального вида.

  • Увеличенный текст в области чтения. Вы заметите, что текст в области чтения Horizon (то есть в темах) немного крупнее, чем остальной текст интерфейса. Мы экспериментируем с этим дифференцированным размером текста, надеясь, что это сделает темы более удобными для чтения, в то время как менее важный текст — например, ссылки в боковой панели — останется минималистичным и менее отвлекающим.

:mega: Тестирование и предоставление обратной связи

Вы можете протестировать Horizon на Meta, используя переключатель тем в нижней части боковой панели:

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

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

:wrench: Известные проблемы / области активной работы

Вот несколько областей, над которыми мы активно работаем:

  • Улучшение цветовой палитры для обеспечения доступности. Horizon имеет более упрощённую цветовую систему (и вдохновила на создание новых цветовых палитр, например, Lily, Clover, Royal, Marigold и др.). Мы работаем над тем, чтобы Horizon была доступной и имела правильный контраст в светлом и тёмном режимах.
38 лайков

4 лайка

Я использую Discourse уже несколько лет, но никогда раньше не слышал термина «карточка темы». Похоже, вы имеете в виду строки списка на странице Тем?

В стандартной теме страница Тем представляет собой таблицу со следующими столбцами:

  • Тема: Заголовок + Категория + теги
  • Список аватаров участников темы
  • Ответы: Количество ответов
  • Просмотры: Количество просмотров
  • Активность: Временная метка, например, 10 мин, 4 ч и т. д.

В Horizon нет таблицы. Каждая строка содержит:

  • Заголовок
  • Один аватар — последнего участника
  • Имя этого участника, слово «ответил» или «опубликовал» и временная метка активности, например, «lindsey опубликовал 9 минут назад», «tobiaseigen ответил 11 минут назад»
  • Количество лайков. (Что это вообще такое? «Лайки темы»? Это количество лайков, которые кто-либо когда-либо поставил кому-либо во всей теме…? Это кажется очень странным числом, особенно странным для такого заметного выделения.)
  • Количество ответов рядом с маленькой стрелкой ответа
  • Категория, теперь расположенная далеко справа

Мои мысли:

  1. На мой взгляд, категория темы гораздо важнее, чем личность того, кто случайно ответил последним. Я бы вернул категорию на левую сторону, а фразу «lindsey опубликовал 9 минут назад» перенёс бы на крайнюю правую сторону, туда, где раньше была временная метка активности.
  2. Я согласен с удалением «Просмотров». В ретроспективе это кажется странным числом для такого заметного отображения.
  3. Не уверен насчёт удаления остальных аватаров. Возможно, я к этому привыкну.
  4. Мне не нравится заметное сообщение «С возвращением, имя пользователя!». Место в заголовке слишком ценно.
  5. Только сейчас строки списка тем стали «карточками» со скруглёнными углами и видимым промежутком между каждой «карточкой». Мне это не нравится, хотя, возможно, я к этому привыкну. Я предпочитаю, чтобы темы разделялись простой разделительной линией.
  6. Теги темы полностью исчезли из карточек тем. Мне это кажется плохим решением; это означает, что теги темы можно увидеть только на самой странице темы.
9 лайков

Здесь есть некоторые предшественники в виде компонента темы — Topic Cards — который имеет схожий дизайн.

Вы правы: между отображением тем в темах по умолчанию и в Horizon есть значительные различия в дизайне — это сделано намеренно. Я ценю ваш быстрый отклик и был бы рад узнать, изменятся ли (или нет!) ваши первоначальные впечатления через день-два. Надеюсь, вы вернётесь и поделитесь с нами!

2 лайка

Спасибо за сообщение об этой проблеме, мы передадим информацию нашей команде.

(Для справки: это вопрос прозрачности, связанный с фильтрами категорий/тегов в верхней части страницы /categories на мобильных устройствах.)

3 лайка

Мне очень нравится этот подход, так как я управляю форумом для непрофессионалов в сфере IT.

На изображении «Добро пожаловать» над полем поиска видны странные артефакты:

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

3 лайка

Не могли бы вы предоставить несколько деталей о вашем устройстве и браузере? В данный момент я этого не наблюдаю, но мы занимаемся устранением подобных проблем в разных местах, поэтому конкретные детали были бы очень полезны!

Это можно сделать путём редактирования текстов сайта — это функция, которую мы недавно добавили в ядро Discourse. Подробнее об этом можно прочитать здесь: Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji

4 лайка

DiscourseHub и мобильные устройства:

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

6 лайков

Я использую последнюю версию Safari 18.3.1 (20620.2.4.11.6) на 14-дюймовом MacBook Pro с последней версией macOS 15.3.2.

3 лайка

Я тоже об этом думал… даже на рабочем столе можно скрыть боковую панель во время чтения, поэтому наличие ещё одного простого способа направить пользователя к созданию новой темы кажется логичным. Не уверен, где это могло бы быть… у вас есть предложение? Google просто «сворачивает» боковую панель, не убирая её полностью, так что кнопка создания нового письма всегда остаётся под рукой.

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

4 лайка

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

Я бы предпочёл, чтобы кнопка «Новая тема» оставалась видимой каким-либо образом.

Редактирование: настройки уведомлений о категориях также важны для нас — мы используем их как способ вступления в группы по интересам (представленные различными категориями). Текущий дизайн делает их менее заметными. Я бы предпочёл сделать их более очевидными и чётко привязанными к текущей категории. В текущем виде непонятно, к чему они относятся:

Они могут относиться к категории «Документация».

Возможно, их можно разместить в левом или правом верхнем углу самого баннера?

4 лайка

Что не так с тем, что у нас уже есть? Зачем изобретать велосипед снова :smirking_face:

(Я не стал менять язык, вы знаете эту настройку)

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

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

Дело не только в чтении. Я вообще не использую здесь боковую панель, потому что она не даёт мне ничего полезного. Это просто ещё один компонент без какой-либо цели, отвлекающий фактор, заполняющий пустое пространство на больших экранах.

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

2 лайка

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

4 лайка

Наконец-то! На первый взгляд выглядит отлично! :chefs_kiss:
Я наткнулся на более раннюю версию на GitHub и заинтересовался финальной версией. Она получилась замечательной!

Вот несколько случайных первых впечатлений:

  • Мне нравится единый фон вокруг основного блока — это элегантно и помогает сосредоточиться на контенте. Однако на большом экране отсутствие чётких границ у контента быстро утомляет глаза. Это заставляет взгляд фокусироваться на слишком большой области. Тема в стиле Meta — хороший пример того, как это исправить: наличие чёткой границы и фона создаёт ощущение баланса.

  • Размещение новой кнопки создания темы логично — её невозможно не заметить. Мне потребовалось несколько секунд, чтобы понять, куда она исчезла на мобильной версии. Я не так часто пользуюсь мобильной версией Meta; я бы ожидал увидеть кнопку здесь:

  • В списке тем строка выглядит фантастически. Всё просто: акцент на главном. Но есть два момента, которые меня беспокоят:

    • Положение статуса «горячее» немного запутывает, потому что оно слишком близко к предыдущей строке.
    • Мне не нравится полная рамка. По отдельности это выглядит очень красиво, но в стопке требует больше усилий для чтения заголовка, особенно при прокрутке. Возможно, это немного отвлекает. Может быть, стоит добавить больше отступов и/или использовать более тонкую рамку. (Мне тоже нужно к этому привыкнуть; возможно, стоит подождать и пересмотреть свои замечания позже.
      EDIT: Если быть честным, я думаю, что проблема больше в аватаре под заголовком, чем в рамке, что затрудняет чтение. На мобильном виде эта проблема ещё более заметна из-за категории над заголовком и аватара под ним)
  • Цветовая палитра превосходна.

  • (не относится к теме) Режим предпросмотра редактора в этой теме выглядит довольно неплохо.

С нетерпением жду будущих улучшений!

8 лайков

Классная тема! К ней нужно немного привыкнуть визуально (по крайней мере, мне).

Кстати, мне кажется, было бы здорово сделать страницу /categories похожей на ту, что в теме Air, потому что в этой теме Horizon всё выглядит как будто в рамке, и из-за этого страница категорий с видом по умолчанию кажется странной, на мой взгляд.

5 лайков

Ага, понятно. Я могу воспроизвести это в этой версии Safari, но не в последней (18.4). Пожалуйста, обновитесь и сообщите, сохраняется ли проблема.

1 лайк

Эта тема выглядит очень современно, стильно и просто фантастически! Мне очень нравятся закругленные кнопки, список тем и многое другое.

Однако я обнаружил 4 небольшие проблемы. Обратите внимание, что все они возникли на мобильном устройстве при использовании Discourse в браузере Chrome.

  1. Темы помечаются как «новые» синей точкой, даже когда они непрочитаны.

  2. Кнопка машинного перевода становится очень большой при открытом редакторе.

  3. У предпросмотра поста белые углы, а область с кнопками действий не соединена (см. скриншот).

  4. Счётчик голосов и кнопка не выровнены относительно заголовка темы.

6 лайков

Здесь происходит что-то странное с высотой:

Я быстро взглянул на код консоли, но мои любительские глаза, привыкшие к CSS, сразу ничего подозрительного не заметили.

5 лайков

Я собирался упомянуть об этом — это из-за переноса имени пользователя. То же самое видно во второй теме в списке ниже. Надеюсь, это можно исправить небольшим кусочком CSS.

3 лайка

По какой-то странной (и немного раздражающей) причине эта тема не меняется, даже если я выбираю другую тему после неё. Цвета остаются прежними, настолько, что «Доступный контраст (тёмная)» выглядит очень тёмной и не отличается по цвету от «Мета Брендовая». Этот новый цвет слишком тёмный по сравнению с тем, что предлагала «Мета Брендовая». Пожалуйста, исправьте это как можно скорее!

2 лайка