フラットなデザインでユーザーが使いづらいのを解消するアドバイス -フォーム編

フラットなスタイルの一番使いにくいところは、どこですか？
僕はそのシンプルなスタイルのボタン（リンク）です。一見ボタンに見えない、まるで見出しやコンテンツの一部のようにデザインされていると操作に迷ってしまいます。

そんなフラットなスタイルで、ユーザーが最小限の努力で、正確に何をすべきか理解できるフォームを作成するためのアドバイスを紹介します。

Flat UI and Forms

下記は各ポイントを意訳したものです。

• フォームのUIで大切なポイント
• フォームの使いづらい例と改善例

フォームのUIで大切なポイント

フォームとは、そのプロダクトやサービスを受ける時に情報を交換するためのインタラクションです。これはサインアップやウェブ検索をはじめ、Eコマースやネットバンクまですべてを含みます。

まずは、フォームのデザインでユーザーに必要とされることとコンテンツで必要とされることの相違点を見てみましょう。

フォーム

• タスクの完了
• ユーザーはフィールドにフォーカスする
• 入り口と出口は一つ
• 成功と失敗の概念は明確
• 使用するのは一度だけのユーザーが多い

コンテンツ

• 調査とタスクの完了
• ユーザーはフィールドにフォーカスしない
• 多くの入り口と出口
• 成功と失敗の概念はさまざま
• 複数回訪問される

フォームで最も重要なことは、タスクを完了することです。しかしコンテンツでタスクを完了することは常にプライオリティが高いわけではありません。ユーザーはコンテンツに訪れる時、これといった目的もなく見ることもあります。

また、フォームには明確に開始ページと終了ページが存在し、ユーザーはフォームで目的を達成できたか、失敗してしまったかはっきりと知ることができます。コンテンツは開始ページはユーザーによって異なり、その後の動きもさまざまで、目的を達成できたか失敗したかの判断基準はユーザーによって異なります。
タスク完了するために、フォームは一度だけ訪れれば完了する可能性が高いことに対して、コンテンツは何度も訪れられるかもしれないということを意味します。

従って、ユーザーはフォームのヴィジュアル言語（そのサイトのデザイン上のルール、例えばボタンではなくリンクはテキストだけ）を学習する機会が乏しいということを覚えておいてください。

フォームの使いづらい例と改善例

フォームとコンテンツは別物であることを学びました。次にフラットなスタイルについて考察してみましょう。
フラットなスタイルはそのシンプルさのため、インフォーメーションんがより少ないといってもよいでしょう。ドロップシャドウ、グラデーション、ボーダーといったものは役に立たない飾り以外の何ものでもありません。

コンテンツにおいてのフラットなスタイルは例えば次のページへ移動するメカニズムが、ボタンなのかテキストリンクなのかはあまり重要ではありません。しかし、フォームではこのボタンとテキストリンクを区別することは非常に重要です。

フォームの「Submit」と「Cancel」を例にみてみましょう。この二つのアクションは異なる結果を持っており、ユーザーに素早く、そして容易に正しく使うことを目的とします。
下記のキャプチャの上のフォームでは、フラットなスタイルで起きるインフォーメーションが損なわれている例です。

上：使いづらい例、下：改善例

「Submit」の前に「Cancel」が配置されているのも問題ですが、今はそれを置いておきます。

「Submit」だけにボタンのスタイルを適用するだけで、ユーザーはアクションの優先順位を理解することができます。たったこれだけのことで、このフォームがどれぐらい有用になるか想像してみてください。

フラットなスタイルのフォームが失敗する3つのポイント

上記の例のようにフラットなUIは、ユーザフレンドリーに欠けてしまうことがあります。

• アフォーダンスの欠如
• フォームのそれぞれの要素の見た目の区別
  （フィールド、ラベル、ボタン、テキストリンクなど）
• フォームの要素のカテゴリごとの階層表現
  （主要なボタンと第二ボタンなど）

先ほどの「Cancel」が先に配置されている点に注目してみましょう。これは最初に「Cancel」が配置されているように見え、「Submit」がオプションのように見えることが問題です。配置の順番も問題ですが、この2つのテキストリンクは全く同じスタイルを持ってしまっているのも影響を与えています。

アフォーダンスに欠けたフォーム

このフォームはユーザーが注意深く見ても、ここで何をクリックすべきなのか、何ができるのか見つけることは非常に難しいでしょう。
左から順に、「Quantity」の下の「1」は量で、「Price」は値段、そして「Buy」は購入ボタンです。

ユーザーにあなたのフォームで最も重要な要素にフォーカスを合わせるようデザインすることは非常に重要です。このフィールドとボタンにアフォーダンスを与えてみます。

フィールドの見た目

フィールドに1pxでいいので、ボーダーやインセットシャドウを与える。

くぼみ

背景の色を排除。

ボタン

ボタンであることが分かるように、ドロップシャドウやグラデーションやボーダーを加える。

ボタンと背景は異なるカラーにする。

左から右へ、使いづらい例から改善例

左端のフォームはフィールドにフォーカスするのが非常に難しいです。2,3番目の改善例と比較してみてください。

2番目のデザインはフィールドの周りにボーダーを加えたもので、3番目のデザインはボーダーにプラスしてフィールドからページの背景を除きました。これでフォームを使うことはスムーズになるでしょう。

Facebookの4つの異なるテストバージョン

Facebookがグラフサーチをリリースした時、フィールドがあることをユーザーに気がつかれなかったので4つの異なるバージョンをテストしました。採用されたのは、ホワイトの背景とインセットシャドウをもった一番下のバージョンでした。

左：使いづらい例、右：改善例

左のフォームでユーザーが使いにくい点は、最下部のボタンです。このボタンはフラットにデザインされているため見出し、またはコンテンツのブロックと混同されてしまいます。ボタンらしく見えるように、丸い角を加えて、幅はスクリーンいっぱいではなく少し減らすようにしてアフォーダンスを与えます。

プライマリーアクションとセカンダリアクション

プライマリとなるアクションのために「Login」はボタンを使い、セカンダリアクションの「Password」にはその主要なアクションとは異なるスタイル、テキストリンクなどを使用します。
もう一つ例を見てみましょう。

プライマリーアクションとセカンダリアクション

ここではプライマリとセカンダリを区別するために、ボタンのカラーを変更しています。こういったスタイルに区別をつけることで、ユーザーにどのアクションが重要であるか伝えることができます。

カラーの変更だけでは不十分な例

このフォームではアスタリスクのカラーを変更していますが、これは色の判別ができない環境では有用ではありません。重要な箇所はカラーとスタイルの両方を使った方がユーザーに伝わります。

Translated with the permission of A List Apart and the author[s].