FileMakerで効果的なUIをデザインするには

Designing FileMakerのAlexis Allen氏が2016年のFileMaker Developer Conferenceで行ったセッション「Introduction to the UI design process」の内容から抜粋

効果的なユーザインターフェイスを設計するプロセスは、往々にして長く複雑になるものです。 これを細分化する方法はいくつかありますが、ここではプロセスをより管理しやすくするある方法とその取り組み方を説明します。

最初に、要件を定義し、いくつかの初期スケッチを描いて準備します。

次に、ソリューションの計画を立てます。組み込みたい機能とエンドユーザーの両方に合うインターフェイスになるように、どのようにインターフェイスを構成するかを決定します。

第三に、色やフォントなど、より具体的な詳細について考えます。

最後に、レイアウトの作成に取り掛かり、必要なオブジェクトを選択して整理します。そして最終的に結果を評価します。

上記の各段階において、目標を達成するために決定と妥協が求められます。ここでいう目標とは、ユーザーが簡単に理解して使用できるものを作成することです。

とはいえ、言うは易く、行うは難しです。これは、どのプロジェクトにも多くの変動要素が存在するためです。例えば、機能の適用範囲、エンドユーザーの技術精通度(またはその欠如!)、クライアントの予算、および自身のデザイン経験のレベルなどがそれです。 自分がコントロールできる決定の影響を正しく理解しておくことが賢明です。そうすれば、構築にあたってしっかりした基盤を確保し、残りの部分を管理することができます。

上記の4つの段階のそれぞれについて考えなければならない具体的な事項は次の通りです。

準備

要件定義

要件を記述するために特定の文章形式を使うことをお勧めします。これは、ユーザーが「何を」「なぜ」望んでいるかの根幹を把握するためです。次のようなものです:

a. <ユーザー>として、
b. <機能>が欲しいのは、
c. <理由/利点>だからです。

システムを使用するユーザーのタイプごとに、これらの文章を1セット作ってください。この文章形式は、ユーザーがある特定の機能を求めている理由の背後にある目的を明らかにするために役立ちます。機能の記述のみに焦点を当てると失われがちになるものです。

スケッチを描く

芸術的なスケッチを描くアーティストである必要はありません。必要なのはペンや鉛筆と紙だけで、線や四角が描ければ良いのです。 コンピュータを開いてすぐにレイアウトの作成を始めたい誘惑に駆られますが、最初に予備的なスケッチを描く習慣を身につけておくのは価値あることです。アナログなツールを使った方が、より創造的になれるし、複数のアイデアを模索するにも速いのです。

計画

プラットフォーム

エンドユーザーがシステム(カスタム App)へのアクセスにどのプラットフォームを使用するのかを事前に知っておいてください。どのように見えるかによってソリューションを調整したいはずです。たとえば、デスクトップ用に設計されたレイアウトは、WebDirectやFileMaker Goでは、うまく機能しない場合があります。

ステータスエリア

また、ウィンドウの上部にステータスエリアを表示するかどうかについてよく吟味してください。ステータスエリアはFileMakerの標準装備で非常に便利なものですが、貴重なスクリーンをできるだけ広く使うために、それを隠すことができます。 ただしそれを選択した場合は、ユーザーが必要とする機能をすべて提供するよう慎重を期す必要があります。そうしないと、ユーザーが行き止まりになってしまうことがあるからです。

アプリケーションウインドウ

1つのアプリケーションウィンドウ(新しいウィンドウが既存のウィンドウに置き換わる)にしますか?あるいは複数ウィンドウ(新しいウィンドウが別に開いて既存のウィンドウが残る)にしますか? FileMakerを長く使用しているユーザーの多くは、複数ウィンドウの柔軟性を好んでいますが、1つのウィンドウのアプローチがより適しているシステムもあります。 ウィンドウ管理はプログラムが面倒なものです。どちらのアプローチにするか早めに確定させましょう。

レイアウトゾーン

どのアプリケーションインターフェイスやWebページも、いくつかの異なる機能ゾーンに別けることができます。 デザインにこれらのゾーンを設定すると、データの見せ方によってデザインを適用または拡張するときに、機能を配置する場所がすぐにわかります。

  1. コンテンツ— 実際のデータ
  2. ナビゲーション— どこかに移動する方法
  3. ボタン — 何かを実行する方法
  4. メタデータ — レコードの作成や情報の更新

デザインにこれらのゾーンを設定しておくと、首尾一貫した矛盾のないインターフェイスを作成することができます。新しいレイアウトをデザインするときもオブジェクトをどこに配置するか迷うことなく、機能ごとに自然とグループ化され、簡単に見つけたり理解したりできます。

デザイン

色はつい使い過ぎてしまうものです。 実際には、ベース、バックグラウンド、アクセントの3色しか必要ありません(もちろん、白と黒に加えて)。

ベースは支えとなるもので、通常は画面の上部に表示されます。それは恐らく、存在感のある強い色でしょう。バックグラウンドは画面の多くの部分をカバーし、通常は明るい色です。 そして、アクセントはまさにアクセントとして使うもので、たとえば、アクションボタンを目立たせるためだけに控えめに使います。

フォント

フォントもあまり多く使う必要はありません。 1つか2つで十分です。フィールドとボタンのラベルなどの “表示”情報用のものと、それと別にデータ用のもの。実際には1つのフォントだけを使用して、スタイルを変えるだけでもかまいません。たとえば、ラベルは太字に、フィールドは通常にするなどです。

フォントファミリーを選択する上での最大の問題は、アプリケーションへのアクセスに使用されるプラットフォームでそのフォントファミリーを利用できるかどうかということです。 100%クロスプラットフォームのフォントはあまり多くありません。ユーザーがデスクトップを使用していて、Microsoft Wordがインストールされている場合は、もう少し拡張されている可能性があります。それでも、慎重に進めてください。

作成

レイアウトオブジェクト

ようやくレイアウトの作成を開始する準備が整いました。 まず、使用するオブジェクトを選択する必要があります。フィールド、ボタン、ポータル、タブ、図形、線、およびテキストを組み合わせて、実際のインターフェイス自体の基本となるものを作っていきましょう。

ユーザーが求めるものに立ち返り、定義した機能を提供するのに役立つオブジェクトを選択するようにしてください。そもそもそれらの機能が必要な理由が何だったかを念頭に置いて進めます。情報をタブに分割する必要がありますか? ポータルを使用して関連するレコードを表示しますか? この種の質問はあなたが必要とするものを決めるのに役立ちます。

目標を達成するためには、ユーザーがレイアウトとどのようにやり取りするかを知っておく必要があります。(最初にどんなステップを踏み、そして次は何をするのか等)この目的に沿ったオブジェクトを選択し、各ステップでユーザーがどのようなアクションを取るべきかはっきり分かるようにしましょう。

グループ化

必要なオブジェクトを決定したら、合理的にすべてを整理する必要があります。 たとえば、似た者同士をグループ化したいと思うでしょう。 ポータルが、その最たる好例です。各ポータルの行は上の行のすぐ下に表示され、同じ情報が表示されています。 それは自然なグループです。 同じ原則を他の異なるデータにも適用できます。たとえば、アドレス情報をまとめてグループ化するなどです。

整理

できるだけ、見た目のフローを実際のデータフローと一致させるようにしてください。私たちは左から右へ読むので、左のアイテムは右のアイテムより先に処理されると想定します。例えば、顧客情報は、請求書の前(左)にあった方が合理的です。

同様の規則が上から下にも適用されます。より大きな分類のカテゴリやグループ化は、普通はレイアウトの上部に表示され、下部へ行くにつれてより具体的になります。 見た目のフローが実際のフローと一致すると、ユーザーはあなたのシステム(カスタム App)をよりよく理解できるようになります。

評価

最終的に、正しく機能すると思えるデザインができたら、初心に帰って自分が作成したものを評価する時間を取ってください。 要件定義に戻り、構築すると言ったことを実際に構築したかどうかを確認します。驚くべきことに、いくらかの要件がどういうわけか隙間にこぼれ落ちているものです。

一歩下がって、各レイアウトが単独でも、他のレイアウトと比較したときでも、ちゃんと動作するかどうかを確認しましょう。レイアウトからレイアウトまで一貫性がありますか? ユーザーが各レイアウトでどのような行動を取るべきかは明らかですか?

自分の仕事を批評的に眺める習慣を持つことは、デザインエクスペリエンスを向上するのに役立ちます。何が効果的であるのか、何を何故に変えたいのか、意識することができるようになるからです。

最後に

ユーザーが簡単に理解して使用できるものを作成するという目標に向かって作業するとき、多くのデザイン上の決定を下すことになります。 今回ご紹介したヒントを参考にすれば、簡単に決められるようになるものがありますので、より良いデザインをより高速に設計することができます。

さらに詳しくは、 ここをクリックするか、このトピックについて私が2016年の DevCon in Las Vegasでプレゼンテーションした下記のビデオをご覧ください。


FileMakerについてもっと詳しくお知りになりたいですか?ファイルメーカー社のWebサイト リソースページ をには様々情報を提供するeBookが無料で公開されています。また、無料評価版をダウンロードすれば、製品版と同じ機能を試用することが可能です。

Originally published at medium.com on August 30, 2016.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.