相互作用は次のようになります。ユーザーは、アルファベット順にソートされた非常に長いリストから従業員の名前を見つけようとしています。彼/彼女は、従業員の名前が「F」で始まることを知っているだけです。リストのセグメンテーション/ページネーションをどのように設計しますか?
以下にいくつか提案があります。
26文字を含むドロップダウンリストから開始文字を選択します。
ドロップダウンリストから範囲を選択します
左側を使用して、選択した文字で始まる名前にジャンプします
類似のセレクターですが、範囲で分割されています
他のアイデアは?
オプションとしてオートコンプリートを使用していない理由がわかりません。従業員リストはすでにアルファベット順にソートされているため、ユーザーが最初のアルファベットを入力したときに、特定の文字のデータを取得するだけで済みます。
これは、ドロップダウンを使用するよりもはるかにうまく機能します。ユーザーがしなければならないのは、文字を入力してデータをプルアップするだけで、ドロップダウンをスクロールして必要な文字または必要なセグメンテーションを取得することです。さらに、これによって言及されているように、ドロップダウンの使用には大きなユーザビリティの問題があります スマッシングマガジンの記事
複数の問題は、大きなドロップダウンのスクロールに関連しています。マウスカーソルがドロップダウンの外側にある場合は、ページ全体を下にスクロールして、画面からドロップダウンオプションを非表示にします。ただし、他のブラウザでは、ドロップダウンはフォーカスがある間は実際にスクロールし、誤ったデータが残る可能性があります。
ここで示した「スライド」セレクターオプションは、IOSで一般的なUX規則です。 IOでは、バーは左側にあり、z-indexのリストの上にあります。これは確かなアプローチだと思います。
私は、ドロップダウンセレクター、特に標準フォームコントロールは、見た目が古く、操作がとにかく刺激されないという正当な理由がない限り、すべてのコストで回避する傾向があります。
ビューポート内のすべてを使用可能にしながら、ページ上の可能な相互作用(クリックと選択)とオブジェクトの数を最小限に抑えることが常に目標です。
使用目的(デバイス、ユーザーなど)がわからないので、他のオプションを提案することはできません。