web-dev-qa-db-ja.com

データセグメンテーションの一覧表示

相互作用は次のようになります。ユーザーは、アルファベット順にソートされた非常に長いリストから従業員の名前を見つけようとしています。彼/彼女は、従業員の名前が「F」で始まることを知っているだけです。リストのセグメンテーション/ページネーションをどのように設計しますか?

以下にいくつか提案があります。

26文字を含むドロップダウンリストから開始文字を選択します。 Select the starting letter from the drop-down list which contains 26 letters.

ドロップダウンリストから範囲を選択します

Select a range from the drop-down list

左側を使用して、選択した文字で始まる名前にジャンプします

Use the left hand side to jump to names starting with selected letter

類似のセレクターですが、範囲で分割されています

Similar selector but divided by ranges

他のアイデアは?

1
wcdomy

オプションとしてオートコンプリートを使用していない理由がわかりません。従業員リストはすでにアルファベット順にソートされているため、ユーザーが最初のアルファベットを入力したときに、特定の文字のデータを取得するだけで済みます。

enter image description here

これは、ドロップダウンを使用するよりもはるかにうまく機能します。ユーザーがしなければならないのは、文字を入力してデータをプルアップするだけで、ドロップダウンをスクロールして必要な文字または必要なセグメンテーションを取得することです。さらに、これによって言及されているように、ドロップダウンの使用には大きなユーザビリティの問題があります スマッシングマガジンの記事

複数の問題は、大きなドロップダウンのスクロールに関連しています。マウスカーソルがドロップダウンの外側にある場合は、ページ全体を下にスクロールして、画面からドロップダウンオプションを非表示にします。ただし、他のブラウザでは、ドロップダウンはフォーカスがある間は実際にスクロールし、誤ったデータが残る可能性があります。

4
Mervin

ここで示した「スライド」セレクターオプションは、IOSで一般的なUX規則です。 IOでは、バーは左側にあり、z-indexのリストの上にあります。これは確かなアプローチだと思います。

私は、ドロップダウンセレクター、特に標準フォームコントロールは、見た目が古く、操作がとにかく刺激されないという正当な理由がない限り、すべてのコストで回避する傾向があります。

ビューポート内のすべてを使用可能にしながら、ページ上の可能な相互作用(クリックと選択)とオブジェクトの数を最小限に抑えることが常に目標です。

使用目的(デバイス、ユーザーなど)がわからないので、他のオプションを提案することはできません。

0
augurone