ユーザーカードのリデザイン実験

本日、メタフォーラムに新しいバージョンのユーザカードをインストールしました。これは、皆様からのフィードバックを収集し、何が機能し、何が機能しないかを確認するために行っています。

新バージョン

更新内容

  • ユーザーヘッダーの背景
    • ユーザーの背景を、カードの背景画像ではなく、ヘッダー画像に移動しました。
    • ユーザーが背景画像を設定していない場合、アバターの色を使用してヘッダー画像を作成します。
    • バッジを新しいユーザカードの「バナー画像」領域の上部に移動しました。
    • ユーザーの場所も「バナー画像」に移動しました。
  • ユーザー統計情報の再スタイル設定
    • ユーザーのステータスを、完全な説明ではなく、アバターアイコンに移動しました。
    • アクションボタンをカードの下部に移動しました。
    • 場所をGoogle MapsまたはOpenStreetMapにリンクできるようにしました。

参考用の旧バージョン


あらゆる実験と同様に、この新しいユーザカードで問題が発生する可能性があると想定しています。

視覚的/機能的なバグ、およびカード自体の意見については、このトピックを使用して報告してください。

バグが修正されたら、ソートするコンテンツの量を減らすために、バグを報告した投稿を削除します :smile:

あなたのフォーラムで使ってみる

上記で述べたように、これはまだ実験段階です。長期的な目標はこれをコアに新しいユーザカードとして統合することであるため、テーマコンポーネントとして長期的にサポートする予定はありません。とはいえ、今すぐあなたのフォーラムで使用したい場合は、以下からインストールできます。-> GitHub - discourse/experimental-usercard

「いいね!」 55

ちょっと気になったのですが…

「自己紹介」が不要なら、なぜポイントや読書時間、そして最も奇妙なこと :wink: 、ケーキの日(cakeday)は表示する価値があるのでしょうか?

編集: 自己紹介はここで見えますが、フォーラムでは見えません…さらに奇妙です。

「いいね!」 6

ケーキの日(cakeday)は奇妙なディスコースの概念であることには同意します。「メンバー منذ..」の方が好きでした。

しかし、それらの情報はすべて、あなたが対応している人物を判断するのに役立ちます。

「いいね!」 8

素晴らしいですね!:slight_smile:

Locations pluginについて、いくつか些細な点があります。

  • ピンの1行下に場所が表示されます。
  • また、2つのウェブサイトのURLが異なるレイアウトで表示されます。これは数週間前までそうでしたが、@merefield によって修正されました。しかし、古いユーザカードにはウェブサイトが2つあり、場所はありませんでした。
「いいね!」 7

たとえば、カテゴリなどにあるように、ユーザーにダークモード用の画像を別途アップロードするオプションを提供することも考えられます。

「いいね!」 4

アバターの画像要素の背景色を削除してみませんか?背景に透過PNGを使用したユーザーのアバターが、かえって見栄えが悪くなってしまいました。

ユーザーカードの背景/ヘッダー画像は以前の半分の高さにも満たないのですが、もう少し高くすることはできないでしょうか?:thinking:

全体的に、素晴らしい出来栄えで、非常に洗練された見た目です。

「いいね!」 9

フォント付きのテーマでは、ユーザーカードの実験で、Minima のようなユーザーカードにフォントがありません。
例:

「いいね!」 8

クールな再デザインが登場しますね!:star2:

一つ変えてほしいのはヘッダーです。今のヘッダーは少し寂しいと感じています。

image

背景画像を入れるのはあまり独創的ではなく、コミュニティ機能をサポートしているようにも見えません。場所のタグはファイルのような感じです。そしてバッジは最小化されて隅に置かれています。

私はバッジが大好きで、多くのコミュニティマネージャーがバッジをクリエイティブに活用したいと思っていると経験上知っています。新しいカードでは、バッジが最小化されるのではなく、もっと目立つようにしてほしいです!例えば、こんな感じです。

「いいね!」 18

これは設定にした方が良いと思います。私は個人的には3つだけが良いです。

「いいね!」 3

これに対処するために、サイトにカスタムCSSを追加することを検討する価値があるかもしれません。これは公式のDiscourseプラグインではないため、コアにマージされる可能性があるため、CSSを追加してサポートするかどうかはわかりません。

「いいね!」 1

申し訳ありませんが、改善のための提案があまりないにもかかわらず、ネガティブになってしまいますが、正直なところ、最初の印象は文字通り「うわー、うわー、これはバグか?」と言うことでした。それは私が正しいという意味ではありませんし、これが他の人全員にとって改善ではないという意味でもありませんが、私にとっては古いユーザーカードは本当に素晴らしくシンプルで、変更したくなかったものです。

慣れるでしょうか?

要点:

  1. バッジは資格目的で非常に役立ち、ユーザーカードに表示されるべきです。「これまでにこのような貢献をしてきました」ということ以上に、「これが私です…」を伝えるものはありません。右上にあると思いますが、いくつかのユーザーカードを調べた後でしか気づきませんでした。
  2. 「投稿済み」、「乾杯」、「ソリューション」などのタグスタイルのボックスは、私の目を引きすぎます。太字のフォントも関係しているのでしょうか?以前のユーザーカードでは、この情報がどれほど控えめだったかが気に入っていました。なぜなら?それはあまり気にならないからです。
  3. ケーキの日(cakeday)の側面も「気にしない」カテゴリに入ります。楽しくて良いことですが、ユーザーについてもっと知りたいときに、それは彼らについて知りたい4つの最も重要なことの1つでしょうか?おそらくそうではありません。

ケーキの日を右上に移動し、バッジをフル行または2行に戻し、注目のバッジのフル展開名を表示するように切り替えたいと思います。ほとんどのユーザーはアイコンの意味を知らないため、テキストの説明が必要です。これにより、バッジがさらに宣伝され、他のユーザーのユーザーカードで見かける特定のバッジを獲得するために、さらに貢献したいという好奇心を一部のユーザーに呼び起こします。

「いいね!」 6

私が確認している問題はLocationsプラグインによって引き起こされていることを知っています。このプラグインが非常に一般的であるように思われるため、ここでこの件を持ち出しました。また、CSSやコードの調整は、少なくとも主に、Discourseコアではなくプラグインで行う必要があると思います。そして、Locationsプラグインを保守している人々がこれを見てくれることを願っています。そして正直に言うと、新しいユーザーカードがコアになるなら、彼らは多かれ少なかれそうしなければならないでしょう。 :wink:

皆のためにトピックで私が抱えている問題に対処したかっただけです。

「いいね!」 3

アニメーションの不具合をさらにいくつか見つけました。
まず、すべて異なるサイクルになっています。Wi-Fiから切断してからカードをクリックすると、最もよくわかります。

また、早すぎで停止します。

画像がまだ読み込まれていないのに、アニメーションが停止しました。

「いいね!」 2

ホバー時にバッジ名が表示されるようになりました!

サイドバーのように、ユーザーが参加日、最終ログイン日時などを設定できるようにすると良いと思います。

「いいね!」 2

ミニマリズム的なアプローチを好むのですが、まだ直接的な答えのない一つの主要な疑問があります。

ユーザーカードのコンセプトは、実質的な目的のない装飾的な要素なのでしょうか? ほとんどのユーザーは、単にプライベートメッセージを送信したり、チャットチャンネルを開いたりするために使用していると思います。ですから…目に見える要素を増やすのではなく、もっと整理すべきでしょうか?

管理者/モデレーターのニーズは、まったく別の領域です。

「いいね!」 6

カード内のさまざまな場所に散らばっているのではなく、メインのユーザー詳細を1か所にまとめることもできます。

これがオーバーホールされる場合、バッジから信頼レベル情報を削除する良い機会になると思います。それらはバッジではなく、フォーラムでの権限とアクセス権を示すグループメンバーシップです。

「いいね!」 5

何が起こっているのか分かりませんが、私のサイトではひどい見た目になっています。多くの情報が欠けています。他のCSSなしで試しましたが、このようになります。プラグインの競合か、何か他の問題でしょうか?

新規:

旧:

「いいね!」 6

何かがうまくいっていないようです。セーフモードで試していただけますか?おそらく、テーマも変更を重ねているのではないでしょうか?

「いいね!」 5

問題の原因は公式プラグインのいずれかですが、どれかは特定できていません。最初に非公式プラグインを無効にしたときは同じ状態でしたが、すべて無効にすると動作しました。コンソールでのエラーは以下の通りです。

編集:私の公式プラグインすべて

          - git clone https://github.com/discourse/discourse-chat.git
          - git clone https://github.com/discourse/discourse-user-notes.git
          - git clone https://github.com/discourse/discourse-reactions.git
          - git clone https://github.com/discourse/discourse-calendar.git
          - git clone https://github.com/discourse/discourse-adplugin.git
          - git clone https://github.com/discourse/discourse-whos-online.git
          - git clone https://github.com/discourse/discourse-canned-replies.git
          - git clone https://github.com/discourse/discourse-follow.git
          - git clone https://github.com/discourse/discourse-push-notifications.git
          - git clone https://github.com/discourse/discourse-gamification.git
          - git clone https://github.com/discourse/discourse-templates.git
          - git clone https://github.com/discourse/discourse-automation.git
          - git clone https://github.com/discourse/discourse-fontawesome-pro.git --branch fa5
          - git clone https://github.com/discourse/discourse-spoiler-alert.git
          - git clone https://github.com/discourse/discourse-data-explorer.git
「いいね!」 6