Меня зовут Клаудио, я руковожу отделом UX в Canonical — компании, выпускающей Ubuntu. Это мой первый пост здесь, на Meta Discourse, хотя мы все уже давно используем Discourse для форумов наших веб-сайтов и продуктов в Canonical.
Недавно мы исследовали, как может выглядеть Discourse, если его интегрировать в основной домен существующего сайта, а не размещать на поддомене (например, перенести с discourse.ubuntu.com на ubuntu.com/discourse).
Использование основного домена вместо поддомена неизбежно потребует изменения навигации Discourse, его взаимодействия и общего визуального стиля, чтобы обеспечить согласованное и плавное включение в существующую структуру. Мы понимаем, что это исследовательская работа, которая затронет несколько аспектов текущего UX, но всё же решили поделиться ею с вами и обсудить, могут ли некоторые из этих изменений заинтересовать сообщество или стать валидным предложением (возможно, в качестве шаблона) для upstream.
С точки зрения стиля мы используем наш открытую CSS-фреймворк Vanilla и его компоненты.
Я опубликую все визуальные материалы здесь, ответив на это вступительное сообщение.
Пожалуйста, поделитесь своим мнением — мы готовы обсудить эту тему подробнее или детализировать отдельные аспекты.
В нашем предложении мы убрали «бургер-меню», которое поставляется с Discourse по умолчанию, и использовали компонент боковой навигации в качестве основной точки входа на все страницы. Причина в том, что интеграция Discourse в существующую навигацию сайта требует согласованности с текущей структурой сайта. Таким образом мы также можем сразу показать пользователям все доступные страницы и темы в одном компоненте навигации, который всегда виден.
Функция поиска интегрирована в глобальную навигацию сайта и будет включать результаты поиска из Discourse. Поскольку это может потребовать значительных изменений на стороне фронтенда и бэкенда, поле ввода поиска можно переместить на страницы Discourse, чтобы оно работало автономно.
Когда пользователи входят в систему, становится видимым призыв к действию «Создать тему», а также пункт «Аккаунт» в боковой навигации слева.
Вместо того чтобы отображать все разделы «Последние», «Новые», «Непрочитанные», «Лучшие», «Категории», «Закладки» в верхней части страницы, мы можем перенести категории в боковую навигацию, а остальные пункты разместить в выпадающем меню, где пользователи смогут выбрать желаемый вид контента.
Мы переорганизовали таблицу при отображении всех тем. Категории отображаются в виде цветных меток, на которые пользователи могут нажать, чтобы сразу перейти к конкретной теме. Аватар профиля пользователя и несколько пользователей визуально свёрнуты для экономии места. Ответы, просмотры и активность по-прежнему видны.
Внутри темы или категории отображается призыв к действию «Подписаться». С помощью выпадающего списка пользователи могут выбрать уровень уведомлений, которые они хотят получать. В нашем предложении в выпадающем списке отображается метка, чтобы пользователи могли легко понять свой статус подписки на эту тему.
Выбрав в верхнем меню просмотра пункт «Верх», пользователи могут определить, какую часть временного диапазона отображать, с помощью выпадающего списка «Всё время».
При авторизации в верхней части отображается аватар и информация профиля пользователя. На странице «О нас» дополнительные разделы раскрываются в боковом меню, а «Все темы» сворачиваются. Если пользователь не авторизован, страница «О нас» выглядит так же, но не отображает профиль в верхней части и раздел «Аккаунт».
Элементы горизонтального меню в Discourse включены в боковую панель навигации: «Обзор — Активность — Уведомления — Сообщения — Значки — Настройки». Элементы подменю будут открываться под соответствующим основным пунктом, например: Активность > Все, Темы, Ответы, Черновики, Нравится, Закладки.
Пожалуйста, сообщите нам своё мнение — мы готовы обсудить это подробнее или углубиться в детали.
Всё хорошо. Но левое меню визуально сливается с основным контентом. Попробуйте их разделить, как на Stack Overflow, например. Можно использовать фон, отступы, цвет — вариантов много.
Я заметил, что с тех пор, как мы над этим работали, в Discourse изменились иконки уведомлений/подписки (теперь они, надо сказать, гораздо понятнее), поэтому нам нужно соответствующим образом обновить это.
Не стесняйтесь загрузить свою тему в Theme Creator!
Мне бы очень хотелось посмотреть, как всё работает, и дать обратную связь. Также стоит обратить внимание на несколько скрытых элементов интерфейса, например, на UI для флага и закладок.
Выглядит отлично! Здесь, кажется, не учтены уведомления:
Будут ли они отображаться вместе со ссылкой «Аккаунт» в боковой панели?
Также я предполагаю, что не планируется использование тегов, поскольку их здесь тоже нет… Это было одной из причин, по которой мы отказались от отдельной колонки для категорий.
Размещая категорию под заголовком, мы можем тесно связать категории и теги, а также сохранить единообразие с макетом заголовка в верхней части каждой страницы темы (я также только что заметил в вашем дизайне, что после перехода в тему категория не отображается — это намеренно?).
Спасибо за ваш ответ, @awesomerobot. При переносе Discourse под основной домен (например, не meta.discourse, а The easiest way to host a Discourse community | Discourse - Civilized Discussion) нам пришлось отказаться от отображения аватара пользователя, так как он мог бы конфликтовать с уже существующим изображением профиля в основном аккаунте сайта. Полагаю, что теги не были учтены, когда мы изучали это решение, поэтому их необходимо добавить в следующем обновлении. Размещение категорий под заголовком — действительно очень хороший момент. Спасибо всем за обратную связь, она поможет доработать эти дизайны.
