Horizon、最新テーマのテストにご協力ください

新しいテーマ「Horizon」をご紹介します!Horizonは、Discourseサイトの新しい標準エクスペリエンスとなることを目指した、シンプルで美しいテーマです。

:sunrise: Horizonについて

Horizonは、Discourseサイトの新しい標準エクスペリエンスとなることを目指した、シンプルで美しいテーマです。

:warning: Horizonはまだ実験的なテーマです! コミュニティにインストールしたりフィードバックを提供したりする前に、このトピックの残りを読んで、このテーマに何を期待できるか、そしてどのようにフィードバックを提供すればよいかを理解してください。

Horizon Theme

:mirror: Horizonは誰のため?

Horizonは多くのコミュニティに適していると考えていますが、特に技術に詳しくない管理者と一般ユーザーを念頭に置いて作成しました。

  • 技術に詳しくない管理者:技術的な専門知識が限られており、デザインや開発リソースにアクセスできないコミュニティ管理者。Discourseの外観をコミュニティに最適化するためのリソースやノウハウを持っていませんが、Discourseがコミュニティに適していると信じています。

  • 一般ユーザー:一度だけ訪問するユーザーと、熱心なパワーユーザーの中間に位置します。コミュニティを定期的に読み書きし、主に(または唯一)携帯電話からDiscourseにアクセスする可能性が高いユーザーです。

Discourseの柔軟性とカスタマイズ性の高さを誇りに思っていますが、技術的な専門知識やリソースに関係なく、すべてのコミュニティにとってDiscourseが優れた選択肢であり続けることを保証したいと考えています。デザインや開発リソースにアクセスできない管理者でも、メンバーが愛する素晴らしいコミュニティの外観を実現したいと考えている方のためにHorizonを作成しました。

:magic_wand: Horizonの何が違う?

デフォルトのテーマは比較的空白のキャンバスですが、Horizonは「意見のあるテーマ」です。これは、ターゲットユーザー(上記参照)に優れた全体的なユーザーエクスペリエンスを提供するために、このテーマを使用する際のDiscourseの外観と操作方法について、特定の選択を行ったことを意味します。以下に変更点の一部を示します。

  • トピックカードの情報密度が低い。 Horizonの最も顕著な特徴はトピックカードです。トピックリストをクリーンで親しみやすい状態に保つために、可能な限り多くの情報を削除しました。トピック参加者の詳細なリストやトピックタグなどの特定の情報は、トピックカードには表示されません。

  • Horizonは追加のカスタマイズをサポートすることを意図していません。 Discourseの外観や動作をカスタマイズすることに興味がない、またはできないユーザーをターゲットにしているため、Horizonはすべてのテーマコンポーネントやカスタマイズと正常に連携することが保証されていません。
    ただし、最も人気のあるテーマコンポーネントに対してHorizonをテストしましたが、これまでのところ互換性の問題は軽微です。これらは時間とともに解決していきます。現時点では、Horizonでテーマコンポーネントを有効にしたり、独自のカスタマイズを追加したりすることは推奨しません。

  • Horizonには、管理者が有効にできる新しいカラーパレットが含まれており、メンバーはコミュニティエクスペリエンスをより細かく制御できます。 管理者のカラーパレット設定を通じて有効にすると、メンバーは6つのテーマ固有のカラーパレットから選択して、カスタムの外観と感触を得ることができます。

  • 閲覧エリアのテキストが大きくなりました。 Horizonの閲覧エリア(つまりトピック)では、インターフェイスの他のテキストよりもわずかに大きいテキストが表示されます。この差別化されたテキストサイズは、トピックを読みやすくし、サイドバーリンクなどの重要度の低いテキストを最小限に抑え、気を散らさないようにすることを期待して実験しています。

:mega: テストとフィードバックの共有

サイドバーの下部にあるテーマスイッチャーを使用して、MetaでHorizonをチェックできます。

Metaまたは独自のコミュニティでテストする際に、視覚デザインの問題や特定のテーマコンポーネントまたはカスタマイズとの互換性の問題に遭遇する可能性があります。その場合は、お知らせください。皆様からのフィードバックは、Horizonを改善し、より広く利用可能にするのに役立ちます。

現時点では、すべてのフィードバックに対応できない場合があることに注意してください。それは、皆様のフィードバックが無効または価値がないという意味ではありません。単に、特定のアイデアやデザイン上の決定がターゲットユーザーのニーズをどの程度満たしているかをよりよく理解するために、テストを続けたいと考えているだけです。

:wrench: 既知の問題 / 作業中の領域

現在積極的に取り組んでいる領域をいくつか紹介します。

  • カラーパレットの調整によるアクセシビリティの確保。 Horizonはより合理化されたカラーシステム(Lily、Clover、Royal、Marigoldなどの新しいカラーパレットのインスピレーションにもなっています)を備えています。Horizonがアクセシブルであり、ライトモードとダークモードで適切なコントラストを備えていることを確認するために取り組んでいます。
「いいね!」 38

「いいね!」 4

Discourseは何年も使っていますが、「トピックカード」という言葉は初めて聞きました。トピックページのリスト行のことを指しているのでしょうか?

標準テーマでは、トピックページはテーブル形式で、以下の列があります。

  • トピック:タイトル + カテゴリ + タグ
  • トピックに投稿しているアバターのリスト
  • 返信:返信数
  • 表示回数:表示回数
  • アクティビティ:タイムスタンプ、例:10分、4時間など

Horizonではテーブルはありません。各行には以下が含まれます。

  • タイトル
  • 1つのアバター、最新の投稿者
  • その投稿者のユーザー名、「返信」または「投稿」とアクティビティのタイムスタンプ、例:「lindseyが9分前に投稿しました」「tobiaseigenが11分前に返信しました」
  • いいねの数。(それは何ですか?「トピック」のいいね?誰かがトピック全体で誰かに付けたいいねの総数ですか…?それは非常に奇妙な数字のように思えますし、特に目立つように強調する数字としては奇妙です。)
  • 返信の数、小さな返信矢印の隣
  • カテゴリ、現在は一番右にあります

私の考え:

  1. IMO、トピックのカテゴリは、たまたま最近返信した人の特定よりもはるかに重要です。それを左に戻し、「lindseyが9分前に投稿しました」をアクティビティのタイムスタンプがあった一番右に移動させたいです。
  2. 「表示回数」を削除することに同意します。今思えば、それを目立つように表示するのは奇妙な数字でした。
  3. 他のアバターを削除することについては確信が持てません。慣れるかもしれません。
  4. 「おかえりなさい、ユーザー名!」という目立つメッセージは好きではありません。ヘッダー領域は貴重です。
  5. やっと、トピックリストの行が「カード」になり、角が丸くなり、各「カード」の間に隙間が見えるようになりました。あまり好きではありませんが、慣れるかもしれません。単純な区切り線でトピックを区切る方が好きです。
  6. トピックタグがトピックカードから完全に消えています。これは悪いことだと思います。トピックタグはトピックページ自体でしか見ることができないということです。
「いいね!」 9

テーマコンポーネントに同様のデザインの先行事例があります — Topic Cards —。

デフォルトとホライゾンのトピックリストのデザインが大きく異なることはご指摘の通りです。これは意図したものです。早速のフィードバックありがとうございます。1、2日後に初期の意見が変わるかどうか(あるいは変わらないか)ぜひお聞かせください。また戻ってきてお知らせいただけると嬉しいです!

「いいね!」 2

ご報告ありがとうございます。チームに伝えます。

(参考までに、これはモバイル版の /categories ページの最上部にあるカテゴリ/タグフィルターに関する透明性の問題です。)

「いいね!」 3

非技術系の専門家向けのフォーラムを運営しているので、このアプローチにとても興奮しています。

「ようこそ」の画像には、検索の上部に奇妙なアーティファクトがあります。

ニックネームではなく、名前で呼ばれる方が良いのですが。

「いいね!」 3

デバイス/ブラウザについて、いくつか詳細を教えていただけますか?現時点ではこれを確認できませんが、このような問題をさまざまな領域で修正しているので、具体的な詳細を教えていただけると非常に役立ちます!

これは、サイトテキストの編集によって達成できます。これは、Discourseコアに最近追加された機能であり、こちらで読むことができます。Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji

「いいね!」 4

DiscourseHubとモバイル:

新しいトピックを開始するためにサイドバーの使用を強制することは、特にモバイルが使用されている場合、最も熟練したユーザーを対象としていない場合、最も賢明な動きではないでしょう。

「いいね!」 6

macOS 15.3.2 の最新バージョンを搭載した 14 インチ MacBook Pro で、Safari 18.3.1 (20620.2.4.11.6) の最新バージョンを使用しています。

「いいね!」 3

私もこのことについて考えました。デスクトップでも、読んでいる間サイドバーを消すことができるので、新しいトピックに誘導する別の簡単な方法があるのは理にかなっているように思えます。どこにあるかはわかりませんが、提案はありますか?Googleはサイドバーを完全に削除せずに「最小化」するだけなので、新しいメール作成ボタンを失うことはありません。

一方で、Discourseでは、すでにコミュニティのやり方を理解していない人にとって、新しいトピックボタンはどれほど重要でしょうか?結局のところ、私たちはコミュニティの新しいメンバーに、既存の議論を読んだり返信したりすることでコミュニティを知るために時間を費やしてほしいのです。

「いいね!」 4

これはコミュニティによって異なるでしょう。私たちの小規模なプライベートコミュニティでは、新規ユーザーが作成した、または使用しているリソースを共有したり、助けを求めたりする方法として、トピックを投稿することを奨励しています。

「新しいトピック」ボタンは、何らかの形で表示されたままでいてほしいです。

編集:カテゴリ通知設定も私たちにとって重要です。興味のあるグループ(異なるカテゴリで表される)へのアドホックなメンバーシップとして使用しています。現在のデザインでは、それらが軽視されています。それらがより明白で、現在のカテゴリに明確に結びついている方が良いでしょう。現状では、それが何を指しているのか不明確です。

これらは「ドキュメント」カテゴリを指している可能性があります。

バナー自体の左上または右上に配置できるかもしれません。

「いいね!」 4

今あるもので何が悪いんですか?なぜまた車輪を再発明しようとするんですか😏

(言語は変更しませんでした。この設定はご存知でしょう)

読むことだけが問題ではありません。私はここのサイドバーを全く使いません。なぜなら、私にとって何も有用なものを提供してくれないからです。それは単に目的のない別のコンポーネントであり、大きな画面の空きスペースを埋めるだけの邪魔なものです。

しかし、モバイルでは常に隠されています。つまり、モバイルユーザーはトピックを開始するために余分なタッチ操作をしなければなりません。デスクトップユーザーが欲しいものを手に入れるためにクリック数を数えているトピックや投稿がいくつあるか数えましょうか?そしてその後、クリック数を最小限に抑えるために物事が合理化された後では😏

「いいね!」 2

私もこれで同じ結論に至っています。インターフェース要素を削除してトピックカードで視覚的な分離を作成するのは良いですが、一方で「新しいトピック」ボタンのようなものを移動すると、技術的でないユーザーが他のDiscourseテーマを理解するのがより困難になります。

「いいね!」 4

ついに!一見すると素晴らしいですね!:chefs_kiss:
GitHubで以前のバージョンを見つけ、最終バージョンに興味がありました。きれいに仕上がっています!

すぐに思いついたフィードバックをいくつかご紹介します:

  • メインのアウトレット周りの統一された背景が好きです。エレガントで、コンテンツに集中するのに役立ちます。しかし、大きな画面では、コンテンツの明確な境界線がないと、目がすぐに疲れてしまいます。広い範囲に焦点を合わせることを強制します。Meta Brandedテーマは、これを軽減する良い例です。明確な境界線と背景を提供することで、バランスが取れているように感じられます。

  • 新しいトピックボタンの配置は理にかなっています。見逃すことはありません。モバイルでどこに消えたのかを理解するのに数秒かかりました。私はMetaではモバイルユーザーではありません。ここにボタンがあると思っていました:

  • トピックリストでは、行は素晴らしいです。シンプルで、本質に焦点を当てています。気になる点が2つあります:

    • ホットステータスの位置は、前の行に近すぎるため、少し混乱します。
    • 全体の境界線は好きではありません。個々に見ると非常に良いですが、積み重ねると、特にスクロール時に実際のタイトルを読むのに労力がかかります。少し distracts すぎるかもしれません。もっと間隔や/または微妙な境界線が役立つかもしれません。(慣れる必要もあります。後でフィードバックを修正するために待つべきかもしれません。
      編集:公平に言えば、タイトルの下のアバターが原因であり、境界線自体ではないと思います。これにより、読み取りがそれほど簡単ではありません。モバイルビューでは、カテゴリが上にあり、アバターがタイトルの下にあるため、この問題がさらに強調されます)
  • カラーパレットは素晴らしいです。

  • (無関係)このテーマでは、コンポーザーのピークモードはかなり見栄えが良いです。

今後の改善を楽しみにしています!

「いいね!」 8

Nice theme! It takes a bit of time to get used to visually (or at least for me)

One thing I thought might be nice is to make the /categories page look a bit like in Air Theme because everything seems to be in a box in this horizon theme having a default looking category page looks weird imo.

「いいね!」 5

ああ、わかりました。そのバージョンのSafariでは再現できますが、最新バージョン(18.4)ではできません。アップデートして、問題が解決しているか教えてください。

「いいね!」 1

このテーマは非常にモダンで洗練されていて素晴らしいですね!特に、丸いボタンやトピックリストなどが気に入っています。

ただ、4つの小さな問題を見つけました。これらはすべて、ChromeでDiscourseをモバイルで利用した際に発生したものです。

  1. トピックは、未読のままでも「新しい」として青い点で表示されます。

  2. コンポーザーが開いていると、機械翻訳ボタンが非常に大きくなります。

  3. 投稿プレビューの角が白く、投稿ボタンのある領域が接続されていません(スクリーンショットを参照)。

  4. 投票カウンターとボタンがトピックタイトルと揃っていません。

「いいね!」 6

ここに高さに関する奇妙な現象が発生しています。

コンソールコードをざっと見ましたが、アマチュアのCSSの目には何も変わったところはすぐには見つけられませんでした。

「いいね!」 5

私もこれを言おうと思っていました。これは、ユーザー名が折り返されているためです。下のリストの2番目のトピックでも確認できます。これを修正するには、おそらく簡単なCSSが必要になるでしょう。

「いいね!」 3

奇妙な(そして少し厄介な)理由で、このテーマはこれ以降別のテーマを選択しても変更されません。色は依然として同じで、アクセシブルコントラスト(ダーク)は非常に暗く、メタブランドと色の違いがありません。

この新しい色は、メタブランドが提供していたものと比較して暗すぎます。早急に修正してください!

「いいね!」 2