タブとして適したデザイン

既に説明も不要なほど普及しているUIですが、タブのデザインについてしっかりと考えた事はありますか。

もしそういった経験がなく、タブを使用した画面の利用率や滞在率などに問題がある場合はタブの理解を深める事で大きく数字が改善する可能性があります。

このnoteではタブを使うメリットと基本的なデザインを解説します。この2つを知る事でタブを使うべきタイミングとユーザビリティを考慮したデザインを理解する事ができます。

タブを使うメリット

タブの良さを語る上で外せないメリットは以下です。それぞれ説明していきます。

・スペースの節約
・コンテンツの一覧性が高い
・年齢問わず使い方が分かる

スペースの節約

これは説明するまでもないですが多くの情報を限られたスペースで表示できます。

ここで気を付けておくべきなのはタブを開いている間は別タブの内容は非表示になるということです。

そのため複数の項目を同時に見る必要があるコンテンツには適していません。

例えば料金プランや同じ商品のサイズ違いなどユーザーにとって比較が必要と思われるコンテンツでの利用には向いていません。情報設計を変更するか比較をするためのコンテンツを別で用意する必要があります。

なおスペースを節約しつつ複数のコンテンツを表示できる代表的なUIとしてはアコーディオンなどがあります。

コンテンツの一覧性が高い

タブはスクロールしなくても各コンテンツの見出しをラベルで確認出来ます。

簡単に全体像を把握でき、必要な情報にアクセスできるため、ユーザーが全てのコンテンツを見る必要がない場合には特に力を発揮します。

年齢問わず使い方が分かる

タブはインデックスカードを元にしたデザインです。

これはNielsenのユーザビリティ10原則にあるMatch between system and the real world(システムと現実世界の調和)の要件も満たしており、年齢を問わず多くのユーザーが別タブを押したときにどうなるか予測できます。

これらが一般的にタブを使うメリットです。同時に複数のタブの内容を見られないデメリットを理解した上で採用しましょう。

タブの基本的なデザインと注意点

これらは重複する内容もあるためまとめて説明をしていきます。

・ラベルは簡潔な単語にする
・タブの数は最大5つ
・タブの幅は同じ幅にする
・開いているタブが瞬時に分かる
・2行にしない
・コンテンツの上に配置する
・配置は横並びにする
・並列ではない情報は並べない
・画面の再読み込みは行わない
・入れ子構造にしない
・その他のデザイン表現

多くの方が思い描くオーソドックスなタブのデザインはYahooニュースのようなインデックスカードを元にしたデザインです。

タブらしいデザインを語るのにとても参考になるためこれを参考に話を進めましょう。

ラベルは簡潔な単語にする

ラベルは簡潔な言葉を選び1つもしくは2つまでの単語にします。それよりも複雑なラベルにしかできない場合はタブの1つのコンテンツとして表示するのに適していない場合が殆どです。情報設計からやり直す必要があるかもしれません。

タブの数は最大5つ

Yahooニュースでは沢山のタブを並べていますが、人の短期記憶は想像以上に脆弱です。

全体像を把握できるメリットも失われるため、3〜5つを基準にしましょう。これはナビゲーションにも当てはまります。

iOSのタブバーはiPadなど幅に余裕がある場合も含めて最大5つまでと定めています。

タブの幅は同じにする

タブそれぞれの内容は並列な関係です。そのため視覚的な優劣が付かないよう幅も同じにしましょう。

どうしても単語が長い場合は、そのタブのみ長くする前に2行などの対応を考えます。なおラベルは「…」などを使用して省略する事は出来るだけ避けてください。

開いているタブが瞬時に分かる

タブは2つだけの場合でもどちらが開いているか分かるようにしましょう。2つだけで見たときにどちらが開いているかの判断が人によって分かれる場合はデザインとして成立していない可能性が高いです。

開いているタブはコンテンツと繋げ、コントラストを高くするのが最も基本的で簡単な方法です。

2行にしない

タブはインデックスカードが元になったデザインのため、開いているタブはラベルの部分とコンテンツ部分が繋がっています。

そのためタブが2行あると上の行のタブを開くたびに下に移動するためとても認知負荷が高くなります。

タブは少なくするのが基本ですが、どうしても画面をはみ出す場合はスクロールやカルーセルを使用しましょう。

その場合はスクロールできる事をユーザーに分かるようにします。そうでなければ画面外のタブへのアクセスは激減します。

これらの解決方法にはGoogleのガイドラインであるマテリアルデザインが参考になります。

タッチパネルデバイスでは一番左のタブをオフセットしてスクロールできる事をユーザーに知らせます。

PCではさらにタブがある事を視覚的に知らせます。

コンテンツの上に配置する

タブはコンテンツの上にある事をユーザーは期待しています。横や下に配置すると見逃す可能性が高くなります。

配置は横並びにする

とても基本的な事ですが、タブはカテゴリなどの並列な情報を並べる場合に使用し、重要度や優先度が異なるコンテンツのレイアウトには使用しません。

コンテンツは横並びの関係のため、文字通りタブは横方向に並べる必要があります。

ナビゲーションでも現れる傾向ですが、縦方向に積み上げるとその視覚的な上下関係からユーザーは下の方に行くほど重要度が低いと認識し、クリック率が低下します。

アナザーエデンのガチャは新しいガチャほど上にあり、コンテンツの内容に優劣が存在します。

縦配置による心理的な影響を逆手に取り、さりげなく優先度をユーザーに伝えるのに成功しています。

とはいえタブの基本的なレイアウトは横並びである事は覚えておきましょう。

並列ではない情報は並べない

SONYでは商品を探すためのコンテンツにタブを使用しています。そしてその1つにユーザー登録を促すコンテンツが紛れています。

類似性の低いコンテンツはユーザーがそこにあると予想できず、本当に必要な人に情報が届かない可能性があるため外した方が良いでしょう。

画面の再読み込みは行わない

タブは1つの画面にある内容を整理するために使うUIです。そのためタブをクリックした後に読み込みや別画面への遷移はしないで下さい。

ユーザーはすぐに内容が表示される事を期待しています。

入れ子構造にしない

タブの中にタブを入れるような事はしないで下さい。二重構造になる場合は1つの画面ではなく2つの画面に分けるべき場合が殆どです。

ただしデザイナーであれば様々な要件からどうしても入れ子にしなければいけない状況に遭遇する事があります。

その場合はどちらが親でどちらが子なのかがわかるようにしましょう。

ラングリッサーモバイルのショップでは、タブの中にタブがあります。この画面を見て上と右のタブのどちらが親でどちらが子か判断できますか？

瞬時に判断できない場合はユーザーの認知負荷が高いため再度デザインを検討すべきでしょう。

その他のデザイン表現

時代とともにタブのデザインも様々なものが生まれています。

新しく生まれたものはデザイン性が高くとても魅力的です。

例えばiOSやAndroidのタブのようなデザインを採用する場合はターゲットユーザーを考慮した上で採用すべきです。

iOSや Androidに触れる機会のないユーザーはその使い方を学ぶ必要があります。

まとめ

いかがだったでしょうか。たかがタブですが思っていた以上に考慮しておくべきポイントが多かったのではないでしょうか。

タブは使用頻度がまだまだ高いUIです。ユーザーが迷わず目的のコンテンツにアクセスできるようUIデザイナーは必ず基本を押さえておきましょう。