C#アプリケーション

アプリインターフェース設計の原則を実践する：Tim Corey のトーナメントトラッカー UI

Tim Corey

21m 39s

このレッスンでは、Tim Coreyがトーナメントトラッカーアプリを構築する際のユーザーインターフェースデザインの段階を案内します。Timは、コードが一行も書かれる前にアプリケーションがどのように見えるかを視覚化し始める瞬間だと説明しています。 UIのデザインが"アイデアを固める"のを助け、アプリが全体的にどのように機能すべきかを理解するのに役立つと強調しています。

この記事では、TimのビデオからUIデザインプロセスを深く見て、彼の思考の流れとコーディングが始まる前のインターフェースの計画方法を理解します。 Timのアプローチに従って、明確で直感的でユーザーと開発者のニーズに合ったアプリインターフェースを作成する方法を学ぶことができます。

UIデザインの開始

Timはユーザーインターフェースデザインのステップはアプリ開発の楽しい部分だと言います。なぜなら、それはアプリがどのように見えるかの概略を示してくれるからです。彼は、アーティストではないと自認しながらも、白板やリーガルパッドを使ってフォームをスケッチすると指摘しています。これらの図は完璧や比例が必要ではない――基本的なアイデアを示し、フォームに何が含まれるべきか、どのように機能すべきかを示すだけで十分です。

ここでのTimの主なポイントは、UIデザインのフェーズは計画のためのものであって、美しさを追求するものではないということです。目標は、必要なフォームやページとそれぞれが何を含むべきかを特定することだと強調します。このアプローチは明快さに重要で、デザインプロセスの間に開発者とデザイナーが一致しているのを助けます。

デザインをどこから始めるか

Timはよくある質問に答えます："どこから始めればいいの？" 彼は、どこから始めてもいいと説明します。アプリのある部分について不安があるなら、確信のある部分から始めてください。明確な部分を完了すると、不確かなセクションに対するアイデアも得られることが多いです。

また、勢いをつけるのも助けになります。いくつかのフォームを設計した後で、自信を持って続ける準備ができていると感じるでしょう。この考え方を持ちながら、Timはトーナメントビューアーフォームから始めることを選択します。

この方法は、設計者と開発者がユーザーが1つの画面から別の画面へどのようにナビゲートするかに焦点を合わせることを奨励するため、優れたユーザーフローをサポートします。

最初にVisual Studioでデザインしない理由

TimはVisual StudioのWindowsフォームビルダー内で最初にデザインしてはいけないと説明します。そうすると主に2つの問題が発生すると警告します：

デザインを計画する代わりにレイアウトやコントロールの調整に時間を浪費してしまう。
仕事をやり直すのを避けたいがために、より良いオプションを逃したり、隠れた問題を残したりする可能性があるため、デザインプロセスを省略してしまう。

Timは、紙にデザインすることで消して新しいアイデアを試したり、素晴らしい解決策になるかもしれない"ばかげた"概念のテストができると述べます。これはUIデザインにおける重要な原則で、アプリが最初の下書きでどのように見えるかではなく、何をすべきかに焦点を当て続けることを助けます。

トーナメントビューアーフォーム

Timは、彼の最初の粗いUIであるトーナメントビューアーフォームを明らかにします。このフォームは、特定のトーナメントに関するすべての情報を表示します。

トーナメント名

Timはトーナメント名を一番上に配置し、ユーザーが見ているトーナメントが何であるかを示します（例："女子バスケットボールトーナメント"）。これは重要な情報が最上部に配置される明確な視覚的階層の単純な例です。

ラウンドドロップダウンと対戦

Timはトーナメントブランケットを画面に表示するのが特に大きい場合にどれほど難しいかを話します。代わりに、ラウンド用のドロップダウンメニューと対戦のリストボックスを提案します。リストボックスは選択されたラウンドの試合のみを表示します。

Timはさらに重要な機能を追加します：未プレイの試合のみ。トーナメントで多くの試合がある場合、ユーザーは完了した対戦をスクロールして残りのものを見つけるのは望ましくありません。そこで彼はチェックボックスを追加して完了した試合だけを表示し、試合が完了するにつれてリストが短くなるようにします。これはユーザー満足のために重要な、使いやすさと効率性を考慮した設計の良い例です。

現在のラウンドの自動選択

Timはさらに、ラウンドドロップダウンを自動的に現在のラウンドにデフォルト設定するよう提案します。どう実装するかはまだ知らないと認めていますが、それを強いデザインアイデアとして挙げています。この機能は、関連情報にアクセスするために必要な時間を短縮することで、ユーザーエクスペリエンス（UX）を向上させます。

スコアリングセクション

フォームの右側には、ユーザーが対戦のスコアを入力するためのセクションがあります。彼はそのフォームが対戦する2つのチームとそれらのスコアを表示することを説明します。ゲームがまだプレイされていない場合、スコアボックスは空のままです。スコアを入力した後、ユーザーは"スコア"ボタンをクリックして対戦を完了します。

Timはスコアボタンに対する理解を明確にするため、より良いラベルやレイアウトが必要かもしれないと述べます。これはデザイン要素がユーザーに対する目的を明確に伝えるべきであることの例です。

トーナメント作成フォーム

次にTimはトーナメント作成フォームに進み、彼はそれがトーナメントビューアーの後に必要であると考えています。

トーナメント名と参加費

フォームは基本的なフィールドから始まります：トーナメント名と参加費。 Timは参加費が参加する各チームが支払う費用であると説明します。

チームの追加

次にTimはチームドロップダウンと追加チームボタンをデザインします。これにより、ユーザーは既存のチームを選択してトーナメントに追加することができます。

彼はまたチームがまだ存在しない場合のための新しいチーム作成リンクも含めています。Timは"新しいチーム作成"アクションを視覚的に異なるものにしたいので、ユーザーがチームを追加するだけではなく、作成していると明確に認識できます。これは、ユーザーが簡単にナビゲートでき、混乱を避けるための重要なデザインプラクティスです。

賞

Timはトーナメントには賞も必要だと指摘し、賞作成ボタンを追加します。彼は賞がトーナメントごとにユニークであるため、それらは毎回新しく作成され、再利用されないと説明します。

選択された削除ボタン

各リストボックス（チームと賞）の横に、Timは選択されたものを削除ボタンを追加します。ユーザーがフォームを再起動することなくチームや賞を削除する方法が必要であると説明します。これによりユーザーフローが良くなり、アプリを使いやすくします。

存在しないラウンド

Timは1つの欠けている要素に気づきます：ラウンド。ラウンドはチーム数に基づいてコード内で生成されるため、ユーザーがそれらを入力する必要はないと説明します。したがって、フォームにラウンドは含まれていません。

チーム作成フォーム

次にTimはチーム作成フォームを設計し、それには次のものが含まれます：

チーム名
チームメンバーの選択
新しいメンバーの追加

Timはフォーム間の一貫性の重要性を強調します。彼はチーム名レイアウトがトーナメント名レイアウトと一致するべきだと言い、まとまりのあるデザインを作成します。

また、このフォームはリストから既存のチームメンバーを追加したり、フォーム内で新しいメンバーを直接作成したりできると説明します。 Timは深いナビゲーション層を避けるためにメンバー作成を同じフォーム内に保持することを好むと述べています（つまり、複数のフォームを開く）。

複数の層を追加することは混乱を招き、遅くなるからです。そのため、彼はデザインをコンパクトでユーザーフレンドリーに保つことを選択します。これにより、タスクを完了するのに必要な時間を短縮し、シンプルで直感的なアプリインターフェースをサポートします。

賞作成フォーム

Timの賞作成フォームはシンプルです。それには次のものが含まれます：

順位番号
順位名
賞金額
賞金率

Timは最後の2つのフィールドは同時に使われるべきではないと注意しています（金額か割合のどちらか）。彼はフォームが後にバリデーションロジックを必要とするが、デザインの目的ではレイアウトは単純だと言います。これは、デザイン原則がいかに洗練された機能的なインターフェースを作るのに役立つかの良い例です。

トーナメントダッシュボードフォーム

最後にTimはトーナメントダッシュボードフォームについて議論し、それに完全には満足していないことを認めます。彼は課題を説明します：Windowsフォームアプリケーションは通常、1つのメインフォームが開いたままであることが要求されます。メインフォームが閉じると、アプリケーションが終了します。

これにより、ユーザーが複数のトーナメントを同時に開きたい場合にトーナメントトラッカーが問題になります。 Timは、もしトーナメントが存在しない場合には自動的にトーナメント作成フォームを開くことを最初に考えました。しかし、トーナメント作成フォームを閉じるとアプリケーションが終了してしまうことに気づきました。

そこでTimは常に開いている中央のダッシュボードフォームを設計します。このダッシュボードはユーザーに次のことを可能にします：

既存のトーナメントを見る
トーナメントを読み込む
新しいトーナメントを作成する

Timは、ダッシュボードは他のフォームが閉じられても開いたままであると説明します。それはアプリの中央ナビゲーションポイントとなります。彼は"ばかげるほどシンプル"に見えるかもしれないと言いますが、それは機能し、後にデザイン要素やアニメーションを追加して視覚的な魅力を向上させるかもしれないと言います。

結論

Timはビデオを締めくくり、目標は必要なフォームを特定し、それぞれのフォームが何を表示すべきかを決定することだけだと強調します。 UIが設計されたら、次のステップはロジックの計画であり、彼はUI要素がデータモデルとバックエンドにどのように接続するかを計画します。

TimのUI設計プロセスは、アプリインターフェースの設計が計画、一貫性、明確さに関するものであり、早い段階で完璧なビジュアルを作成することではないことを示しています。このアプローチは開発者とデザイナーが一致しており、最終的なアプリケーションがユーザーにとってナビゲートしやすく使いやすいことを保証します。