はじめに

このシリーズでは、さまさまなユーザーインターフェース（UI）を取り上げ、その効果や副作用、使い方や実装を考慮したつくりかたについて、悪い状態と良い状態の両方を交えながら紹介していきます。最初のユーザーインターフェースはタブUIです。

タブUIは、あらためて説明をする必要がないほど普及したUIパターンです。広く普及しているユーザーインターフェースのどれにも当てはまることですが、タブUIもとても効率よく情報を提供することができます。ディスプレイという表示デバイスは、物理的な作業空間と比べてしまうと面積にとても強い制限がかかっていますから、その限られたスペースの中で、利用者に必要な情報を効率よく提供しなければなりません。タブUIは、それを可能にするUIパターンのひとつです。

タブUIの効果

まず、タブUIの効果を考えてみると、次のようなことが考えられます。

• スペースの有効利用ができる
• 情報の全体像が把握できる
• 重要度の並列化ができる
• 情報の認識コストが下がる
• 動作が予測できる

それぞれについて、詳しく見ていきましょう。

スペースの有効利用ができる

どのタブを選択しても同じ場所を再利用して情報が表示される。

タブUIはとても理解しやすいアフォーダンス（コラム枠参照）を提供しています。この図に代表されるようないわゆるタブUIは、利用者がどのようにすれば隠れている情報を表示できるかということを教えてくれています。この理解しやすさがあることで、実際には見えていない非選択タブの情報が裏側に隠れている、という暗黙のメッセージを利用者へ伝えられます。そのため、それぞれの情報を縦積みに配置する必要がなくなり、スペースの有効利用をしつつ利用者へ情報を提供することができます。

アフォーダンスとは

アフォーダンスとは、平たく言ってしまえば「教わらなくても、その人の経験からなんとなく使い方がわかる感じ」です。ただし、そこにヘルプがあったから使えたとか、言葉や記号による誘導があったから使えたというのは違います。

よく取り上げられる例としては「ドアノブ」があります。ドアノブはひねってから押す（引く）という複数の動作を、「そこを通過したい」という対象の欲求に加えて、ノブの回せそうという感じから使い方を提供しています。今回のタブUIであったら「非選択中のタブを選択すると、その情報を閲覧することができそう」という部分がそれにあたります。

スペースの有効利用ができるという点は、冒頭でも触れたディスプレイの物理的な面積の制限とも関係があります。利用者へ提供したい情報をただ数珠つなぎに配置してしまっては、その少ない面積をあっという間に使い切ってしまうからです。

ディスプレイには、一度に表示できる情報量には制限がある。

仮に、利用者が無限に我慢強く自分の欲する情報が得られるまで、表示されている情報を理解しようとする努力をし続けてくれるならば、作り手は愚直に情報を羅列するだけで良いかもしれません。しかし、実際の利用者はそれほど我慢強くありません。ですから、限られたスペースを有効に利用することで、利用者に与える情報認識に対するストレスを軽減しようとする行為は、情報の提供サイドとしてとても重要な作業になってきます。

情報の全体像が把握できる

タブUIは隠れている情報も見出しが読めるので、概要を把握することができる。

タブUIでは、非選択となっているタブの見出しを見ることができます。これらは選択中のタブを先頭に横並びに配置されることが一般的で、すべての見出しは隣接して配置されます。プルダウンメニューでは、意図的な選択をしないと他の見出しを見ることはできません。

タブUIは見慣れたユーザーインターフェースですので、そこに何か特別な意味があるようには感じられないかもしれません。しかし、これらの配置はとても重要で、利用者からすると全部の見出しが近くに配置されることで、それらは、ひとつの関連した情報グループであるということが認識しやすくなります。

加えて、タブUIでは見出しの位置が分散しません。それは、利用者が全体像を理解するのに必要な、視線移動の距離を短くできるということです。そうなることで、利用者の読み取りコストは最小限に抑えられ、すべての見出しが一覧性を確保された状態で一同に表示されるので、UIが内包する情報の全体像を理解するのに役立ちます。

重要度の並列化ができる

グループであることの認識をさせつつ、重要度の並列化ができる。

タブUIではタブ項目として並んでいる見出しの重要度を、ほぼ並列化することができます。タブUIの場合、たいていの見出しが横方向に並列に並ぶことになります。ですので、これらを利用者側から見た場合は情報に上下関係を見出す可能性は低くなります。もしこれが、単純に上から下へ情報が並んでいたとすると、どうしても上の情報がより重要で、下の情報になるほど下位であるというような上下関係を連想させてしまいます。

一度上下関係を連想させてしまうと、下方になるほど読み飛ばされたり、そもそも読まれなかったりする確率が上がってしまいます。重要度を並列化することで情報提供の機会を均等にすることが可能になります。

ただし、どんな場合でも重要度が均等になって見えるわけでもありません。たとえば次の図のように、見出し部分に何かしらのサインが表示された場合は、他の見出しに比べてサインが付与されたタブが、一時的に重要度が高くなることになります。

赤い丸印が付いていることで、そのタブの重要度を一時的に引き上げることが可能。

これはデザイン装飾的なさじ加減でも変わるものなので、デザイン工程のタイミングで目立ち具合の塩梅をコントロールすることが可能です。

また、タブUIの仕組み上、ページが読み込まれた段階で選択されるタブがひとつ発生することになります。ですので、最初に表示されるタブは、利用者による積極的な操作を必要とすることなく閲覧できる分、その重要度はやや上がることになります。そのため、均等化したい情報の中でも多少の優劣が発生することを忘れないようにしつつ、利用者の立場に立ちながら、どの情報が一番最初に見えると理想的なのかを吟味して、最終的なタブの順番を決定する必要があります。

情報の認識コストが下がる

車を使う人と自転車を使う人で用途を明確に分けることができる。

利用者にとって、すべての情報が必要とは限りません。特定の文脈では必要にならないものや、同時に閲覧する必要のない情報については、利用者の目に入りにくい状態をつくることで、余計な認識コストが発生してしまうのを避けることができます。タブUIは情報の関連性は提供しつつも、非選択なタブの具体的な情報は提供しないようにできる特徴があります。

このことはとても重要で、人間はぼんやりとですが、わりと広い範囲の面積の濃淡を認識しています。ですので、その濃淡が目に入ると無意識下の段階から、何かしらの情報が表示されているということを認識して、その情報が自分にとって必要なものかどうかという判断を始めてしまいます。このような動作は、確実に利用者のコストとなります。ですから、タブUIでは情報のまとまりごとにグループを作り、それを見出しとして抽象化してタブの見出しとして配置します。そうすると、非選択中のタブの具体的な内容は見せないまま、選択されているタブのみの具体的な内容を表示することが可能になります。

また、グループを作ることで情報の対象範囲が明確に区切られるため、タブを選択する前に内容を想像することができるようになります。そうすると利用者は、内容理解を始める前に情報の守備範囲のようなものを意識するとができるため、本格的な内容理解に必要な認識負荷を軽減することができるようになります。

結果が予測できる

クリックをすると「TAB B」の情報が表示されるということが想像しやすい。

利用者が画面に表示されているボタンを押そうとしたときに、アプリがその後にどのような動きをするかが類推できたり、結果が思っていたとおりになるということは、利用者がスムーズに目的を達成するために重要なことです。逆に、操作方法や動きがまったく予測できないとういうことが、大体の場合においては、利用者のストレスとなって蓄積されます（利用者の驚きや興奮に繋がる可能性がゼロとは言い切れませんが）。ストレスのある中でそのアプリの利用を続けるのは困難ですし、正しい判断の妨げになってしまいます。

タブUIの見た目と動作は、その点においては操作後の動きが予想しやすいユーザーインターフェースのひとつです。それは、タブUI自体が広く普及しており、見た目や動作を見慣れているということもひとつの理由と言えるでしょう。加えて、「スペースの有効活用」の部分でも触れましたが、「非選択のタブを押すと何が起こるか」ということに対して、「タブが入れ替わり、関連した情報が表示される」という、シンプルで利用者がとても類推しやすい動作になっているのも理由のひとつです。

タブUIの副作用

ここまでで述べてきたように、タブUIには多くのメリットが存在しますが、すべてにおいて完全というわけではありません。あらゆるユーザーインターフェースには副作用があり、間違った使い方をすると副作用が強く出てしまいます。そうすると、最悪、届けたい情報がうまく利用者へ伝わらなくなってしまうという可能性もあります。タブUIの副作用として考えられるのは、次のようなことです。

• 閲覧コストが高い
• 一覧性に欠ける
• 情報量が多いと使いづらくなりやすい
• タブの数が多すぎると破綻する

これらの副作用に関しても、詳しく見てみましょう。

閲覧コストが高い

すべての内容を確認するには、すべてのタブを選択しなければならない。

タブUIは細かくタブに分類した情報を常にひとつずつしか表示できません。これはタブUIの大きなメリットですが、同時にデメリットでもあります。詳細な情報を並列表記することのできないタブUIは、すべての内容を確認するために利用者によるタブの選択動作をどうしても必要としてしまいます。利用者による操作が必要になるということは、情報を取得するのにそれだけの手間がかかっているということです。

選択というのは、デバイスを操作するのに必須の行為なので、それ自体が利用者のコストになるという認識はされにくいかもしれません。しかし、実際にそのような操作をしようとすると、まず対象のタブの位置を確認する必要が出てきます。そして、そのタブの状態を認識してそれが押せるかどうかの判断をします。最後は、入力方法がタップであればその目標を目指して指を動かしますし、ポインターを利用したクリック操作であれば、入力デバイスを操作します。

このように、ひとつのタブを選択するにも「確認・判断・操作」といった行動が必要となります。もしこれが複数のタブを閲覧するとなると、そのような行動が倍増していくことになります。タブUIは設置されたタブの数だけこの行動が必要になってしまうので、この数が増えてしまった場合は、タブの選択という動作が負荷として蓄積されていくことになります。

一覧性に欠ける

全体の情報量が少なければ、右のように並列表示してしまったほうが一覧性が高い。

上述した閲覧コストが高いことにも関連していますが、タブUIには見出しがありますので、ぼんやりとした情報全体像の一覧性は確保されていますが、見出しの中に収められている具体的な内容の一覧性は失われてしまいます。これは、「不要な情報の認識コストを下げる」という行為とトレードオフの関係にあるので両立することはできません。情報の総量と内容、タブ化された見出しの数と、失われる一覧性とを天秤にかけて、最終的には一覧性を優先するという選択も必要になります。

情報量が多いと使いづらくなりやすい

スクロールするとタブの見出しが読めなくなる上に、上下移動に手間がかかる。

ここでの情報量というのは、タブの内容として配置される文字量や画像数のことです。情報量が増大すると、ある程度大きなディスプレイであってもスクロールが発生してしまいます。そのような状態だと、利用者がタブの横断的な移動をしようとしたときに不便が生じます。それは、一旦スクロール位置をタブが見えていた位置まで戻してから選択しなければならないというものです。このような状態は、連続した情報閲覧にひどく手間がかかってしまうことになるので、使いづらいユーザーインターフェースとなってしまいます。

ただ、回避策がまったくないわけではありません。その一例としてスティッキーナビゲーションや、上部に設置されているタブと同じものを下部にも設置するといった方法が考えられます。しかし、これらの方法も万能ではありません。その結果、実装コストが増加してしまったり、デザイン的なスキルや、UIとして考えなければならないことが増える原因にもなるため、安易に選択してしまうと無駄に複雑なものを作ることになってしまう可能性を含んでいます。

例外として、利用者が必要とするタブが必ずひとつになるような情報設計がされている場合は、スクロールが発生していても問題にはなりにくいと言えます。たとえば次の図のように、内包されている情報が対象とする相手を完全に分けている場合は、そもそも複数のタブを確認する必然性が低いため、必ずしもタブを横断的に閲覧しやすくする必要性が高くならないからです。

車を使う人と自転車を使う人で用途を明確に分けることができる。

タブの数が多すぎると破綻する

適量のタブに比べ、下の図はタブが多すぎて表示しきれない。

タブの数はあまり増やしすぎないのが理想です。増えすぎてしまった場合、タブUIのメリットである見出しの一覧性が失われてしまうからです。タブUIが提供するアフォーダンスが強力なので、無限にタブを増やしても機能してしまいそうな気分にさせられてしまいます。しかし、この図の下の例のように、増えすぎたタブにはそれを制御するためのインターフェイスが追加されることになり、使いやすかったはずのシンプルさはたいてい失われて、UIの学習コストが増大してしまいます。

ここまでのまとめ

ユーザーインターフェースというものは、効果の裏側に副作用が隠れています。たいていの場合は情報の総量を増やしたり、見出しに長いテキストを入れてみることで副作用が表面化してきます。もし将来的に情報が増える可能性がある場合は、一度多めの情報を入れてみることで、そのUIの限界を把握することができると思います。

次回は、タブUIを作成する上で守っておきたいことについて解説します。