フォームフィールドで便利な情報を表示する際には、どのようなインターフェイスを使うべきでしょうか？
答えはツールチップです。フィールドのラベルよりも明確に情報を伝える必要があるとき、フォームフィールドにはツールチップが必要です。
たとえば、フォームのラベルがユーザーに馴染みのないわかりにくい用語のときが挙げられます。また、通常より個人的な情報を聞く際に、なぜその情報が必要なのか説明するときにも配置すべきでしょう。
デスクトップでツールチップを表示するのは簡単です。ユーザーはマウスでホバリングできますし、画面に十分なスペースがあり、ユーザーは簡単にツールチップからヒントを得られます。
しかしモバイルでは画面のスペースに制限があり、マウスでのホバーはできないため、デザインがより難しくなります。したがって、モバイルでフォームにツールチップを表示する最善の方法は何か、という疑問が生まれます。
見つけやすく、タップしやすく、読みやすい
モバイルのツールチップは、つねに見つけやすく、タップしやすく、読みやすいものでなければなりません。これはアイコンの見た目とツールチップの配置場所によって決まるでしょう。
アイコンを見つけてタップする
大きいアイコンは、小さいものよりタップしやすいだけでなく、見つけるのも簡単です。つまりツールチップのアイコンは、フォームのレイアウトを崩さない範囲で可能な限り大きくしなければなりません。アイコンが小さすぎると、ユーザーが見つけてタップするのが難しくなります。
下の画像はラベルの隣にアイコンを配置した例です。しかし、ラベルの隣に置くとアイコンが小さくなりすぎるため、良い配置場所とは言えません。サイズを大きくすることはできますが、フォームのレイアウトやラベルとの並列関係が崩れてしまうでしょう。
ツールチップのアイコンが小さすぎて、見つけにくくタップしにくい
最善策は、テキストフィールド内部の右側にアイコンを置くことです。これによってアイコンの高さはフィールドと同じになり、フィールドのラベルよりも高くできます。またこの場所なら、ユーザーの入力作業を邪魔することもないでしょう。これでタップするのに十分な大きさになりましたが、アイコンのコントラストが低いため、まだ見つけるのは難しいです。
タップしやすいが、見つけにくい
輪郭だけのアイコンではなく、ボタンのようなルック＆フィールで存在感のあるアイコンを使うべきです。知覚アフォーダンスを強化するために、青色を使ってほかの色が薄い要素と差別化しましょう。
見つけやすくタップしやすいツールチップのアイコン
こうして見つけやすくタップしやすいツールチップのアイコンを作ることができました。次に決める必要があるのは、ツールチップのテキストはアクティブのときどのように表示されるかということです。
ツールチップのテキストを読む
ツールチップのテキストに必要なのは、読みやすさだけではありません。フィールドやラベルの見た目に合わせるべきです。
そのためには、テキストフィールドと幅が同じ吹き出しを使いましょう。アイコンのすぐ上にツールチップが表示される場合、画面の端で見切れてしまう可能性があります。そうならないよう、フィールドの幅とツールチップの吹き出しを揃えて並べることが大切です。
悪い例：吹き出しとフィールドの幅が揃っていない 良い例：吹き出しとフィールドの幅が揃っている
さらに見た目をあわせるために、ツールチップの吹き出しはフィールドとラベルの真上に配置すべきです。また、ユーザーがツールチップのテキストと、対応するフィールドとラベルを同時に読めるようにしましょう。吹き出しの尖端はアイコンを指すようにして、何がツールチップを発生させたのか伝えてください。
ツールチップを読み終えたら、ユーザーはテキストフィールドをタップして入力します。吹き出しの外側タップしたらツールチップが消えるようにして、ユーザーが元の作業に戻れるようにしましょう。
Balloon.cssというツールを使えば、Javascriptを使わなくても数行のCSSだけでフォームにツールチップを加えることができます。
フォームの要素がツールチップの外観を決める
先ほどは、ツールチップのアイコンや吹き出しのサイズ、配置場所を決めるのに、テキストフィールドの幅と高さを利用しました。この理由は、テキストフィールドがもっとも大きくて重要な要素であり、ツールチップの外観の決定要因になるからです。
デザイナーの独断ではなく、テキストフィールドによってツールチップのサイズと配置場所を決めましょう。これによって、ツールチップとテキストフィールドに統一感が生まれます。
ほかのフォーム要素
ドロップダウンのリストやチェックボックス、ラジオボタンといったほかのフォーム要素については、どのようにツールチップを表示するか迷っているかもしれません。このときもテキストフィールドのときと同じ原理に従い、フォームの要素がサイズや配置の決定要因になるようにしましょう。
フォームの要素はツールチップを決める指針であり、見た目の統一感を維持してくれる
上図の例では、ツールチップのアイコンがドロップダウンリストの右に表示されているのがわかるでしょう。アイコンの高さはリストの高さと同じです。こうすることで、ツールチップはオプションのラベルを邪魔することなく、ユーザーにとって認識しやすいものになります。ドロップダウンリストの形状によって、ツールチップアイコンのサイズと配置が決まっているのです。
ラジオボタンでは、ツールチップアイコンの配置場所がテキストフィールドやドロップダウンリストとは異なります。これは、ラジオボタンがそれらとは異なる方向へ広がるからです。テキストフィールドやドロップダウンリストは横長ですが、ラジオボタンは縦長の要素です。
そのため、ユーザーが見つけにくくなってしまうので、ラジオボタンの下にツールチップのアイコンを置くことはできません。見つけやすくするためには、ラジオボタンの上に配置する必要があります。
同様に、ラジオボタンの右にツールチップのアイコンを表示することもできません。選択肢のラベルの邪魔になるからです。テキストフィールドやドロップダウンリストで右側にアイコンを置くことができたのは、これはユーザーの入力や選択肢のラベルを邪魔しないからでした。
見た目の相関と統一感を強めるために、ツールチップのアイコンはラジオボタンと同じ形にしましょう。このとき、クエスチョンマークや「ヘルプ」というラベル、薄い青色などを使って、ラジオボタンとアイコンを区別できるようにしてください。
ユーザーが間違えてツールチップのアイコンをタップしたとしても、そのせいで悪い結果にはならないでしょう。アイコンには、フォーム入力に役立つ便利な情報が記載されているだけです。
ツールチップの目的
ツールチップとは、フォームフィールドのフリクションを和らげる便利な情報を提供するものです。しかし、すべてのユーザーがフォーム入力のアドバイスを必要としているわけではありません。情報が必要なユーザーに対しては、必要なときすぐにアクセスできるようにすべきです。一方で、そうでないユーザーに対しては、読まなくてもいいようにする必要があります。
フォームのレイアウトを壊しユーザーの関心を奪っている
ツールチップではなくフィールドラベルの下に情報を表示する方法をすすめるデザイナーもいるかもしれません。しかし、この方法には、フォームのレイアウトが崩れるだけでなく、情報を必要としないユーザーの関心まで奪ってしまうという問題があります。
作業を行っているユーザーの関心には限りがあります。関心を奪うと、ユーザーを不快にさせて、作業スピードを遅くしてしまうでしょう。ツールチップはユーザー第一で配置すべきであり、ユーザーからの要求がない限り、画面のスペースを占領してはいけません。
ツールチップの目的を私たちが理解できていれば、マウスのホバーがないことや画面のスペースに制限があることは問題になりません。ツールチップはヘルプです。ユーザーがアクセスしやすく、献身的な存在であるべきです。ツールチップがユーザーの進路を妨害してはいけませんが、手の届かない場所に配置してもいけません。
