巷で人気のフラットデザインだが、この記事の中で著者は、フラットデザインをフォームに適用する時の意外な落とし穴について語っている。やみくもに情報量を削ったフラットなフォームでは、直感的に操作ができず使いにくい。使いやすいフォームには適切な装飾が欠かせないと言っている。

# 384

フラットUIとフォーム

当記事は、Fで始まる2つの重要な4文字語について書いている: すなわち「flat(フラット)」と「form(フォーム)」についてだ。

フラット・ユーザーインターフェースを単なる一過性のファッション、もしくはスキューモーフィズムというトレンドへの露骨な反応だとして否定的に見る人達もいないではないが、多くのデザイナーはフラットUIのアプローチを(グラデーションやドロップシャドウ、ボーダーなどの)ビジュアルスタイルを減らして、よりシンプルでよりクリーンなインターフェースを実現するものだとして歓迎した。

問題は、ほとんどのフラットUIは、コンテンツの方に焦点を当てて作られ、フォームというトランザクション・コンポーネントの方にはほとんど留意されていないということだ。フラットデザインとフォームがぶつかると、一体何が起きるのか?結果、ユーザー・エクスペリエンスがしばしば損なわれることになる。

フォームは重要だ

私がフォームという時、それは製品もしくはサービスを受け取る目的で情報が交換されるインタラクションすべてを指す。これには、インターネットバンキングからモバイルコマースまで、また、新しいタブレット用アプリを使うための登録からweb検索までを含む。

下記の表にまとめられたように、フォームデザインにユーザーが求めるものは、コンテンツにユーザーが求めるものとはかなりの差があることがある。

フォームの場合 コンテンツの場合
タスクの完了 リサーチとタスクの完了
ユーザーは「フィールド重視」 ユーザーは「フィールド重視」ではない
直帰率が高い サイト内の回遊率が高い
「成功」と「失敗」の概念が明確 「成功」と「失敗」の概念が流動的
一度しか使われないことが多い 何度も訪問されることが多い

まず何と言っても、フォームの目的はタスクの完了だ。世界広しと言えど、まず趣味でフォームのチェックをしているのは私と他に数人を数える程度だろう。他の(まともな)人達は、自動車を登録したり新しい靴を買うために、フォームに記入したいだけだ。しかしコンテンツの場合には、タスクの完了が目的だとは限らない。例えば私達は時々、明確な目的なしに何となくインターネットを眺めていたいこともある(ウィキペディアなんかがそれだ。)。

人は、タスクを完了しようとする時には、何となくインターネットネットを眺めている時とはまったく異なるアプローチを取る。誰かがフォームを記入しているところを観察したとしたら、その人が必要に応じて案内やヒント、またフィールド・ラベルや質問までも参照しながら、フィールドに「集中している」様子が見られるだろう。そこには開始点と終了点という順序があり、終了点において、うまくいったか失敗したか分かるように(通常は)なっている。

他方、コンテンツはしばしば多様な経路や場所からアクセスでき、人々はページからページヘと動きまわり、色々な形でそのコンテンツに目を留める。成功という概念は依然存在するが、ユーザーの使い方が多岐に渡るため、それはしばしばシフトする。

タスクの完了が目的ということはまた、そのフォームに関係するコンテンツは何回も訪問を受けるかもしれない一方で、ユーザーのそのフォームへの記入は一度きりの可能性が高いことを意味する。結果的に、ユーザーにはそのフォームの視覚的な言語(例えば、ボタンはなくテキストリンクのみ、など)を学ぶ機会はほとんどないということになる。

フラットとは、情報が少ない、ということ

つまり、フォームとコンテンツは性質が異なるということだ。それがフラットUIとどんな関係があるのか?

問題は、シンプリシティを追求するあまり、フラットUIが行き過ぎてしまったかもしれないことだ。コンテンツの中では、ドロップシャドウやグラデーション、ボーダーなどは、役立たずの「装飾」に過ぎないかもしれない。複数のページに渡ったニュース記事を読む時、次のページに進む仕組みがボタンだろうとテキストリンクだろうと、それは大した問題ではない。しかしフォームにおいては、ボタンとテキストリンクの違いはずっと重要になる。

フォームの「送信」と「キャンセル」アクションを例に取ってみよう。明らかにこれら2つのアクションは違う結果をもたらし、ユーザーにはいち早く容易に彼らが必要としている方を使って欲しい。だから、私や尊敬されているデザイナーのLuke Wroblewski氏を含む人々は、主要アクション(送信)はボタン、副次的アクション(キャンセル)はテキストリンクとすることを推奨しているのだ。ビジュアルデザインは単に見た目を美しく整えるだけではない。機能の違いと相対的な優先順位を伝えてくれるのだ。

一方、下記のKloutのフォームは、フラットUIでしばしば起こる情報の欠如を示している。「送信」の前に「キャンセル」を配置することは、極めて悪質なダーク・パターン(訳注:ユーザーを意図的に欺こうとするUIのこと)だが、ひとまずそれは置いておこう。フラットUIアプローチは、主要なアクションと副次的アクションを共に、同じ文字色同じ背景のテキストリンクにしているが、それではユーザーはアクションを取る前に余分な注意を払わなければならず行動が遅くなる。

もしビジュアルデザインを通じてアクションの違いが伝わっていたら、このフォームがどれだけずっと使いやすかったか想像してみよう(重ねて言うが、ダーク・パターンのことはひとまず脇に置いておく):

フラットなフォームが失敗する主な3つのケース

上記Kloutの例は、フラットUIがユーザー・フレンドリーな経験をもたらすことによく失敗する主なケース、三通りを分かりやすく示すものだ:

  1. アフォーダンスの欠如(アフォーダンスとは、例えば椅子を見たらそれが座るものだと分かるように、あるオブジェクトのデザインが ー 物理的なものでもデジタルなものでも ー その使用方法をどれだけ示唆しているかを指す)
  2. フォーム要素の差異が不十分(例えば、フィールド、ラベル、案内、ボタンの間で)
  3. フォーム要素の各カテゴリーでのヒエラルキーが不十分(例えば、主要ボタンと副次的ボタンの間で)

Kloutの「キャンセル」と「送信」アクションのデザインは、適切なインタラクションを誘導するものではなく、アフォーダンスに欠けている。もしボタンの形をしていたら(とどのつまりはアクションなのだから)、もしくはせめて下線(webの世界でリンクを意味するお決まりのアフォーダンスだ)が引かれていたら、クリックできるということが伝わっただろう。

またフォーム要素もあまりうまく差異化されていない。クリックできるテキストリンクとできないテキストとの視覚的な違いは、文字色の違いだけだ。

リンク間でのヒエラルキーについては、Kloutの例は特に興味深い。最初に置かれているため、「キャンセル」は「送信」よりも幾分目立っている(それ故にダーク・パターンなのだ ー 人は最初に来たものが一番普通の選択肢だろうと想定する。それはお決まりのルールだし、また人間生来の心理でもある)。しかしこのわずかな差異を除くと、この2つのテキストリンクはまったく同じスタイルだ。それなのに(あなたがこのフォームをKlout側の立場で見るかユーザー側の立場で見るかに関わらず)これらは同等ではない。

では、フラットUIを維持しつつ、これらの落とし穴を避けるためにはどうしたらいいだろう?秘訣は、アフォーダンスとフォーム要素、そしてヒエラルキーを伝えるのにちょうど十分なだけのビジュアル的な処理を加えることだ。これは、フォームの中で一番大切な要素で、フォーム・インタラクションの中核であるフィールドボタンに注力することで達成できる。

フィールドとボタンのデザインを調整する

もしフィールドを凹んだ空欄のように見せられてボタンをでっぱっているように見せられたら、あなたのフラットなフォームの使い勝手はぐっと良くなるだろう。そういうデザインは、アフォーダンスを提供し、且つフォーム要素の違いを視覚化してくれるからだ。

下記のスクリーンショットは、Lowdiのスピーカー購入のプロセスだが、これはもしそのようなデザインができなかった場合に何が起こるかを示している。数量のフィールドと購入ボタンはとても平面的で、適切なインタラクションを誘導してくれない。注意して見ない限り、ユーザーは数量を変えられることに気付かないし、どこを押したら次のステップに進めるのか分からないだろう。

下記は、フィールドとボタンの差別化とアフォーダンス付与のやり方だ:

目的 方法
フィールドを凹んだ空欄のように見せる
  • フィールドに、わずか幅1ピクセルでもいいので、ボーダーか内側ドロップシャドウを付ける
  • 背景色をなくす
ボタンをでっぱっているように見せる
  • ほんの少しだけ、ドロップシャドウや角丸、グラデーションやボーダーを付ける
  • ページやフィールドとは違う背景色を使う

フィールドの修正

まずはフィールドに注目して、修正前後の違いを見てみよう。HipstamaticのOgglのモバイル用登録フォームは、下記一番左のスクリーンから始まる。Eメールアドレスを入力するのにどこをタップしたらいいかを見つけるのは、まるでイースターエッグの卵探しのようだ(しかもあまり楽しくはない)。これを、私が試作した別のデザイン、左から2番目と3番目のものと比べてみよう。2番目のデザインは、要素を差異化するために、単にフィールドの周りにボーダーを足しただけだ。3番目のデザインでは、同じくボーダーを足し、且つフィールドではページの背景色を外している。今やフォームの使い方はシームレスで、周りと馴染んで継ぎ目が分からない。2番目も3番目も共にフラットUIではあるが、しかし修正前と比べてアフォーダンスは格段に向上している(特に3番目のデザインにおいて)。

Facebookがグラフ検索をリリースした時、フィールドが凹んだ空欄に見えることがいかに大切かをFacebookは身をもって学ぶことになった。当初、この検索フィールドに背景色はなかった(すなわちヘッダーバーと同じブルーだった)。結果はどうだったかって?結果、多くのユーザーはグラフ検索機能を見つけることができなかった。その後Facebookはグラフ検索フィールドで4つの異なるデザインを試し、白い背景で内側にかすかにドロップシャドウを付けたもの ー すなわち凹んだ空欄に見えるフィールド ー が一番効果的なアプローチだと気が付いたのだ。

ボタンのバランスを調整する

さて、今度はボタンの修正前と後の違いを見てみよう。

下記は不動産のモバイル検索の例だが、元々のデザインが左で、修正された(そして私が思うにずっと使いやすい)バージョンが右だ。

元々のデザインではボタンはとても平面的で、ヘッダーやフッター、もしくは他のコンテンツのブロックと間違えやすい。スクリーンの幅いっぱいに広がっていたボタンの幅を減らして、角を丸くすれば、アフォーダンスがずっと良くなる(タッチするエリアはそれでもまだ十分にある)。

主要なアクション vs 副次的アクション

最後に、主要なアクションは、副次的アクションとは違うスタイルにしておくことを忘れないようにしよう。これには二通りのやり方がある:

  • 主要なアクションはボタンにして、副次的アクションはテキストリンクにする
  • 副次的アクションのボタンと比べて、主要アクションのボタンはもっと目立つスタイルにする

最良の実践例のひとつだが、Fiverrは登録フォームで副次的アクションにはテキストリンクを使っている。

更に改善された例としては、Riki Tanone氏が、Dribbble上の氏のブログUIテンプレートの中で、主要なアクションと副次的アクションをどのように差異化するかを示してくれている。

情報量が多いほど、アクセスビリティも向上する

より使い勝手がよく直感的なフラットUIフォームは、ある程度のダブりを伴うことに気が付いたかもしれない。多くの場合、差異を伝えるのは、ただ一つの視覚的なデザイン要素(例えば色)だけではない。代わりに、それは色形だったり、色サイズだったりする。

このダブりは、インターフェースをより幅広い層のユーザーにとって使いやすいものにしてくれる。なぜなら、インタラクションの種類を伝えるのに、デザインは、ユーザーがたった一つの視覚的な違いに気付けるかもしくは理解できるかということに頼らなくていいからだ。

色彩が好例だ。全人口の約12%は何らかの色覚異常を持っている。もし色が、クリックできないテキストとできるテキストとを見分ける唯一の手がかりだとしたら、Kloutの例が示したように、あなたはたちまち自分のユーザーの約12%に対して困難を与えていることになる。

これを Luke Wroblewski氏や、他のデザイナーが推薦している、入力必須項目には赤いアスタリスク(下記左に示されているように)を付けるべきだという説と比べてみよう。ここでは、色形と両方がユーザーに情報を伝達しており、色覚異常を持つユーザー(彼らには下記右のように見えているかもしれない)でも使えるフォームとなっている。

すべての世界で最善のもの

デザイナーとして、私達はシンプルさと明瞭さを通じて、素晴らしいユーザー・エクスペリエンスを創出したいと思っている。

シンプルさと明瞭さとは何だろう?それはユーザーが苦もなく、どうしたらいいのか、明確に分かる状況のことだ。このようなユーザー・エクスペリエンスを達成するには、正しいバランスを見つけることが必要で、決してフラットデザインのためのフラットデザインに陥ってはいけない。

順調な時ですら人をイライラさせるフォームだが、そのフォームについて言えば、少ない方がよりシンプルだとは限らない、ということを理解することがより良いユーザー・エクスペリエンスへと繋がる。