ソート時のドロップダウンとボタン、どう使い分ける?

anthony

UX Movementの著者で編集長。素晴らしいウェブ体験を愛し、ユーザーのために戦う。 。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Why Segmented Buttons are Better for Sorting

Webサイトで特定のアクションを起こす方法が見つけにくいと、ユーザーのストレスになります。ドロップダウンメニュー(またはプルダウンメニュー)にアクションが隠されている場合も同様です。このようなことがしばしば起こるケースとして、コンテンツを探す場面があります。

ドロップダウンは項目を隠してしまう

ユーザーがコンテンツを探すとき、存在しうる全てのコンテンツを見なくてもほしいものを見つけることができるのが理想です。多くの人が、すべての項目をドロップダウンメニューに入れてしまう間違いを犯します。ユーザーは選択された項目しか見ることができず、その他の項目は隠されてしまいます。

segmented-button-sorting

コンテンツを整理する際のドロップダウンメニューとセグメントボタンの例

ドロップダウンメニューを使わないで、すべてのボタンを水平に並べて使いましょう。ドロップダウンメニューは、ユーザーのタスクに関係のないオプションがある場合にスペースを節約するのに有益です。しかし、ユーザーがコンテンツを選んでいる場合は、コンテンツを見つけるために、全ての選択項目が重要です。選択する場合には、視認性を犠牲にしてスペースを節約することは最適な方法ではありません。

セグメントボタン(Segmented Button)により、ユーザーは使用可能な全ての項目を見ることができます。選択されている項目が何で、他にどのような項目を選択できるかも明白です。これによって、ユーザーはもっとすばやく簡単に選択できるようになります。

セグメントボタンの場合は、項目を選ぶのに1クリックで済みます。ドロップダウンメニューの場合は、2クリックとスクロールが必要です。ユーザーはメニューを開くのにクリックし、項目までスクロールし、それからクリックして選択しなければなりません。

[caption id="attachment_18607" align="aligncenter" width="520"]ドロップダウンメニューは、オプションがドロップダウンに隠れているため、視認性が低い セグメント化されたボタンは、全てのオプションがセグメント化されたボタンとして見えるため、視認性が高い ドロップダウンメニューは、項目がドロップダウンに隠れているため、視認性が低い
セグメントボタンは、全ての項目がボタンとして見えるため、視認性が高い[/caption]

項目が多いからプルダウンに入れるのではない

項目が多いほど、セグメントボタンは横方向にスペースを多く取ります。しかし、項目が多いからといって、あきらめないでください。項目が多いからといってすぐプルダウンに収めるのではなく、ユーザーにとって全部見えたほうがよいのかどうかで判断すべきです。

限定されたスペースに多くの項目を入れることは可能です。下記は8項目あるものと、5項目あるものの例です。

segmented-button-spacing

セグメントボタンの余白の取り方の例

上記例はリストにおけるソートを制御するメニューですが、これをうまく使えないとユーザーはページ送り(ページネーション)に頼ろうとするでしょう。しかし、ページ送りはユーザーが期待している基準でコンテンツを並べているわけではありません。

ユーザーがページ送りでのコンテンツ探しを強いられることのないよう、ソート機能はいつもユーザーの注意を引かなければなりません。

まとめ

あなたが、どのUIを使うかはUXに影響します。ドロップダウンメニューはスペースを節約しますが、ユーザーにとっての視認性は低くなります。セグメントボタンは、ユーザーにとっての視認性はより高くなりますが、項目を表示するスペースが制限されるというデメリットがあります。

与えられた状況によって、スペースと視認性のどちらがよりユーザーにとって重要か考えてみましょう。


イベント