Rauno's Field Notes #2

Rauno's Field Notes #2 Vercel プロジェクトカード まず、カードが占める垂直方向のスペースを削減するために、パディングを調整し、情報を集約しました。例えば、一般的に常に「main」であるプロジェクトブランチをカードに表示する必要はないと判断し、一部のデータは省略しました。 これらのカードが画面上でかなりのスペースを占めることを理解することが重要です。カードの行数を減らし、情報を簡潔にまとめると、より消化しやすくなります。 変更前後の比較を以下に示します。グリッドでさらに1行分のスペースを確保できました。 コンテキストメニュー もう一つの変更点は、プロジェクトカードのショートカットメニューです。これはまだフィーチャーフラグでテスト中です。当初は、···ボタンが重複して表示されることが多いため、カードをシンプルにするだけの変更だと思われました。 しかし、後になって、コンテキストメニューは明示的な24×24のコントロールよりも明らかに利点があるため、将来的にさらに多くのコンテキストメニューを使用したいと考えるようになりました。なぜなら、コンテキストメニューは画面上のどこからでもアクティブにできるからです。もちろん、アフォーダンスや学習曲線に関する小さな問題などはありますが、Linearのようなアプリでも機能しているので、¯\_(ツ)_/¯ コンテキストメニューの発見可能性に対する緩和策として、詳細ビューには通常のドロップダウンメニューの背後に同じアクションを配置しています。これにより、誰も何も見逃すことはなく、コンテキストメニューは単なるショートカットになります。 ウィジェット その後、プロジェクトは多くのメタデータを含んでいるのに、カードにはリアルエクスペリエンススコアしか表示されていないことに気づきました。 誰もが異なるインサイトを得るためにダッシュボードを使用しています。セキュリティを重視するユーザーは、ファイアウォールステータスなどを常に把握しておきたいかもしれません。 この領域をより動的でカスタム可能なものにできるでしょうか？ 他のページパフォーマンスインサイト（LCPなど）、ウェブ分析メトリクス、プロジェクトに関連するアラートなどを追加するという、いくつかの明白なアイデアがありました。 @merycodesと共に、さまざまな形式のウィジェットを試しましたが、どれもうまくいきませんでした。 ウィジェットのレイアウトとビジュアルフォームを見つけようとしていました。背景があってもなくても、その小さなコーナーにはまったく合わないように見えました。また、ウィジェットが単にテキストや色で区別されるだけでなく、互いに視覚的に異なる「キャラクター」を持つことが有用であることにもすぐに気づきました。これにより、スキャンしやすくなります。 1行ではなく2行を使用したときに、私たちはブレークスルーを得ました。これにより、左側のラベルと衝突する可能性が減り、より合理的なスペースを確保できるようになりました。 右下のコーナーは、他のコーナーと共に、何の意味もなく浮いているのではなく、満足のいくほどタイトな小さな長方形の領域になります。 そこから、私たちは従うべきパターンを得て、創造的な苦境から抜け出すことができました。あとは、さまざまなウィジェットを作成するだけでした。 最後に、「ウィジェットスイッチャー」をいくつか改訂しましたが、それは複雑ではありませんでした。 メニューにデータを含めるべきかどうか、私たちはただ行ったり来たりしました。メニューを使用して、プロジェクトカードウィジェット自体を変更せずに、他のウィジェットのデータをプレビューできるため、これは役立つと考えました。 プロジェクトにデータがない場合、ウィジェットスイッチャーはプラットフォーム機能の有用な概要を提供し、それらを有効にするのに役立ちます。