フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察

あなたのフォームは、ユーザーが簡単に利用できますか？
もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。

ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。

Why Infield Top Aligned Form Labels are Quickest to Scan
by anthony

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• フォームは入力前、入力後の分かりやすさが大切
• 最近のフォームで見かける問題
• 1つ目：ラベルとフィールドを上から順番に配置した場合
• 2つ目：ラベルをフィールドの内側に配置した場合
• 3つ目：ラベルをフィールドの内側のトップに配置した場合
• ラベルの配置を内側トップに変えるとどうなるか
• ラベルを内側トップに配置するのが機能するフォームとは
• まとめ

フォームは入力前、入力後の分かりやすさが大切

ユーザーが最初にフォームを見る時にすることは、そのフォームが入力するのにどのくらいの労力が必要で、どのくらい時間がかかるかです。もしそれが素早く判断できないようであれば、労力と時間が無駄であると感じ、フォームから立ち去るユーザーもいます。

フォームに入力した後も、ユーザーはその内容が正しいかどうか調べるために走査します。フォームのフィールドが確認しにくいと、ユーザーは良くない情報を提供してしまうことを恐れ、フォームを離脱することもあります。

ユーザーの離脱を防ぐためには、ユーザーが走査しやすい分かりやすいフォームにしなければなりません。入力内容が素早く理解できるフォームにするだけで、離脱率は減少し、ユーザーは入力を完了するようになります。

最近のフォームで見かける問題

多くのデザイナーは、分かりやすいフォームにするためにフィールドとラベルを一列に並べます。これには、2つの方法があります。

1. ラベルとフィールドを上から順番に配置
2. ラベルをフィールドの内側に配置

2つの方法ともラベルを左寄せで配置するのが、走査するのがより速く、ユーザーにとっても分かりやすいです。

1つ目：ラベルとフィールドを上から順番に配置した場合

視覚の固定観念

ラベルとフィールドを上から順番に配置したフォームで、4つのフィールドがあります。しかし、フォームを走査した時、入力すべき項目が多くあるように感じます。これはパッと見、8つの要素が存在するように見えるのが原因です。

ラベルとフィールドは空白スペースで分割された個別の要素です。それらは8つの別々の要素として視覚上処理されます。視覚による固定観念があるため、ユーザーは入力するのが実際より多くあるように感じてしまいます。

区切りに使う空白スペース

上から順番に配置する際、ラベルとフィールドをまとめるために空白スペースが必要となります。しかし、この空白スペースがユーザーの走査の流れを邪魔し、見えない障壁となります。

より多くのフィールドを加えると、それだけフォームも長くなります。そしてこのタイプのフォームだと、長さはより増大してしまいます。フィールドは単にスペースを取るだけではありません、空白スペースはさらにもっと長さを増やす原因となります。

確認も素早くできない

ユーザーが入力を終え、入力内容の確認する時も同様に素早くできません。入力内容が正しいか見るために、ラベルから入力内容まで視線を移動し、それから次の項目に移動させなければなりません。区切りに使う空白スペースや区切り線は視覚の邪魔になり、流れの速度を遅くします。

2つ目：ラベルをフィールドの内側に配置した場合

入力前の走査が速い

もう一つの方法が、ラベルをフィールドの中に配置するフォームです。このデザインの大きな利点は、入力欄がユーザーにより多くあるように感じさせないことです。原因はフィールドとラベルで、1つの要素に見えるからです。ユーザーの視線がラベルに向いた時、視覚の固定観念はそのままでフィールドに目を向けることができます。

時々フィールド内のラベルのコントラストがぼんやりしていることがあります。明るいグレーなどを使ったテキストは読みにくく、走査を遅くするので注意しましょう。

ラベルをフィールドの内側に配置時にも、空白スペースを使うことができます。図の右にあるようなレイアウトはラベルとフィールドを順番に並べた際にはできませんが、内側に配置したフォームではフィールドのエッジのバランスを調整することで成り立ちます。

送信前のチェックは難しい

内側にラベルを配置した際の悪い面は、送信ボタンを押す前に入力内容の確認をすることが不可能であるということです。これはフィールド内に入力した内容を含んでいると、ラベルが消えてしまうためです。

ユーザーがラベルを再び見るためには、入力内容を削除しなければなりません。もしそんなことをしたら、入力内容がなくなっているため、確認することができません。これはユーザーの記憶にフィールドそれぞれのラベルを思い出させることを強います。

このことは、入力するという身体的な作業だけでなく、不必要な記憶の作業を生み出します。これはフラストレーションをつのらせてしまいます。

3つ目：ラベルをフィールドの内側のトップに配置した場合

上記2つの問題点を解決した、3つ目の方法です。

このアイデアはユーザーが入力する前と後にフォームの走査が速くなり、理想的です。フォームへの労力と時間が最小限になり、より正しい情報を入力することに繋がります。

ミニマルなヴィジュアル

ラベルが内側に配置されているので入力前の走査が速くなります。更によいアプローチは、内側のトップにラベルを配置することです。

内側のトップに配置されたラベルは、走り読みできるので視覚の固執は可能な限り少なくなります。それぞれのフィールドにはラベルとユーザーの入力欄の両方を含みます。ユーザーがフィールドを走査するとき、同時にラベルと入力欄も目に入ります。近接のテクニックを使ったこの配置は、ヴィジュアルの障害をなくし、ユーザーがフィールドをより速く処理できることを可能にします。

フォームがコンパクトになる

ラベルを内側に配置した時と同じくらいのスペースでフォームを配置できます。フィールドからは余分な空白スペースを取り除き、グリッドでお互いを同じ高さにして一列に配置できます。これはエリアを集中させることで、ユーザーの目の動きを集中させる効果があります。

グリッドの効果的な間隔は、関連したフィールド間に強い繋がりを作りだします。関連したフィールドとは例えば、姓と名などです。これらが繋がりをもって配置されているとユーザーは簡単に入力することができます。

入力後のチェックも簡単

ユーザーが入力した後のチェックも素早くでき、簡単です。ラベルはフォームから消えてしまうことはなく、一列に並べられたフォームと同様に視覚的な障害もありません。しかもフィールドごとにラベルと入力内容の一目で比較できます。

テキストのスタイルを工夫するのは、ユーザーが素早く入力内容をチェックするのに役立ちます。例えば入力した文字を少し大きく太字にすると、ユーザーは一目で区別することができます。

フィールドへのフォーカスが強まる

ユーザーがフォームのフィールドを選択する時、それはテキストのラベルではなく、フィールドをハイライトします。ラベルは姿を消したり、薄くすることができます。

内側のトップに配置したラベルが、ユーザーに最も強いフォーカスを与えます。その時フィールドのハイライトはラベルとインプットを含んでいる状態です。これによりユーザーは自分がどこのフィールドにいるか、何を入力すべきなのかはっきりと理解できます。

フィールドのフォーカスが強いことは、モバイルではさらに重要なポイントになります。入力し終わり、正しく入力できたか確認する時に一緒に強調されているので、フィールドと入力内容を見つけるのが速くなります。

ガイドとしてのフォームのグリッド

グリッドはしばしばデザインで、要素を配置するために使用されます。このグリッドはフォームにも役立ちます。フィールドの幅からフォームの幅を導き出し、フィールドの関連性を理解させることは簡単です。

下記のように同じ幅のフィールドを積み重ねるだけでも、フォームのグリッドは成り立ちます。これは各フィールドに同じような見栄えを与え、フォームをコンパクトにまとめます。それぞれのフィールドにはラベルと入力テキスト分の高さを確保してください。

フィールドは同様にテキスト分の高さを確保するだけでなく、必要があればラジオボタンやチェックボックスやセレクトメニューも配置できる十分なスペースが必要です。すべてのフォームの要素は、グリッドで区別します。

フォームを紙のようにデザインすることも

紙のようにフォームをデザインすると、たいていのユーザーはすぐにそれがフォームのフィールドであることを認識できます。特に年配の人をターゲットにした場合、通常のオンラインフォームのインタラクションには慣れていません。ラベルを内側のトップに配置したこのフォームの見た目は、紙に似ています。年配のユーザーが入力するのを楽に感じるのに役立ちます。

ラベルの配置を内側トップに変えるとどうなるか

Facebookのサインアップのフォームは一見、そのボリュームに圧倒されます。ユーザーが入力することに優しくなく、入力内容をチェックするのも分かりにくいです。図の右にあるように、ラベルを内側のトップに変えるだけで、フォームのフィールドが分かりやすく、入力しやすくなり、簡単になります。また関連したフィールドは一列に並べます。

下記の図は、たった4つのフィールドにもかかわらず、フォームを理解するのにかなり労力を要します。まずラベルを内側のトップに変え、グリッドを使用して配置すると使いやすいフォームに変わります。

ラベルを内側のトップに変えることは、単にシンプルなフォームとして機能するだけではありません。多数のセクションをもつ複雑なフォームでも機能します。下記の図のフォームでは、多数のセクションと多くの要素を持っています。ラベルをすべて内側のトップに移動し、フィールドの形を整えるだけで、それぞれのセクションをいっそう明確にします。

ラベルを内側トップに配置するのが機能するフォームとは

すべてのフォームが、良いコンバージョンを得るために速い走査を必要とするわけではありません。時には、簡単なフォームを必要することがあります。

簡単なフォームとは例えば、ログインやニュースレターボックスのような少ししかフィールドを必要としないフォームです。こういったタイプのフォームはユーザーが入力した後にラベルを思い出す必要がないので、ラベルを内側に配置したフォームがよく機能します。ユーザー名とパスワードを入力するなどのように、数が少なく、ユーザーが期待することができるフィールドパターンであれば問題ありません。

まとめ

たいていのWebサイトでは、上から順番に配置したフォームかラベルを内側に配置したフォームを使用しています。なぜなら良い方法に気がついていないからです。しかし、ここに素晴らしい方法があります。ラベルを内側のトップに配置したフォームは、ユーザーが最初に見た時に落胆せず、入力した後の確認も非常に簡単です。

フォームが可能な限り速い走査を可能にすることで、フォームの離脱を減少させることができます。使いやすいフォームを持つことは、あなたの仕事を減らしません。