私はstackoverflowの出身で、これに対する答えはないので、UI担当者にサポートを依頼します。
ユーザー(司書)がデータベースに本を追加できるライブラリアプリケーションがあるとします。機能の1つは、特定の本に著者をタグ付けすることです。書籍には複数の著者がいる可能性があるため、複数のタグを許可するUIが必要です。基本的な機能サイトからJS/CSS拡張バージョンまで、プログレッシブ拡張アプローチにしたがっています。
私はすでに少なくとも450人の著者のデータベースを持っています。拡張バージョンでは、オートコンプリートおよび編集可能な選択が私の武器にあり、効果的であることが証明されています。問題は、基本的なバージョン、特にモバイルデバイスや機能のないブラウザ(opera miniのような?)など)にあります。
プログラマーの視点から、複数選択<select>
ボックスはすべきです。しかし、UXの本を3冊以上読んで、複数選択<select>
は、選択が複数有効であることを(明示的に言及されていない限り)指示がないため、「ノーゴー」です。また、長押しする必要があるため、身体に障害のある人には不向き Command (Mac)または Ctrl (PC)複数選択に。モバイルブラウザにもこれらのキーはありません。これに追加するには、1つのボックスに450以上の選択肢がありますか?
要約すれば:
この状況に対処する最良の方法は何ですか?彼らはどのようにしてWeb 2.0より前にこれを実現しましたか?
450以上の値を持つドロップダウンは、デスクトップを含むどのデバイスでも非常に使用できません。しかし、基本的なモバイルバージョンのソリューションのみを探していると言っているので、それに固執しましょう。
おそらく、モバイルでこれを簡略化する最良の方法は、最初の画面/ポップアップにアルファベットを表示させ、文字をタップすると、その文字で始まる著者のリストにドリルダウンすることです。最も一般的な文字であっても、文字ごとの最大のリストは、簡単にスクロールできる約30〜40の値にする必要があります。次に、名前をタップして選択し、[戻る]を押してアルファベットに戻り、[完了]を押すまで追加の著者を選択します。これは、単純な線形ナビゲーションに基づくモバイルの最も標準的なアプローチです。
もっと良い方法は電話帳アプリに似たものを開発することですが、JSなしでWebアプリでそれを行うことはできないと思います。
オートコンプリートを使用しない限り、特に複数の選択を許可する場合でも、450以上のオプションを含むリストはユーザーフレンドリーではなく、常に使いにくいです。
図書館に本を追加するタスクは非常に一般的なものであり、迅速に実行する必要があるため、次の2つの簡単な手順を使用して、よりシンプルなバックエンド駆動のソリューションを提案します。
IOS Mailアプリで得られるようなものを試してみませんか。
このソリューションは、スマートフォンやデスクトップでも簡単に使用できます。 100以上の要素については、ある種の「検索」ソリューションを使用する必要があると思います。
プログレッシブエンハンスメントを行っていることは素晴らしいことです!しかし、あなたは何もないところにあなた自身のための問題を作成しています。
UXのアプローチは、ユーザーと、製品が使用されている環境について考えることです。だからあなたの懸念を見てみましょう:
リストボックスを長押しする必要があります CTRL または Command 複数のアイテムを選択する。これは、障害のあるユーザーにとってはあまりアクセスしにくいものです。
ユーザーが押し続けることを知らないため、リストボックスでの複数選択はアフォーダンスが低くなります CTRL または Command。
モバイルデバイスにはありません CTRL または Command キー、またはJavaScriptに対応していないブラウザを使用している可能性があります。
上記のすべてを統合することで、モバイルデバイスや障害を持つユーザーのリストボックスについて心配する必要はありません。実際、最も単純なモバイルバージョンを読み取り専用にして、そこから編集および作成機能を削除して、ユーザーが試さないようにする必要があります。同時に、リストボックスは、ユーザーに複数のアイテムの選択方法を指示する限り、デスクトップブラウザーの最も単純なバージョンの誰でも完全に使用できます。
私は、すべての著者を含む単一のドロップダウンボックスでWebページを開始します。次に、その下に、「別の著者を追加する」というチェックボックスがあります。これは、おそらくJavaScriptを介して予想どおりの動作を行い、ユーザーは作者を追加し続けることができます。
私は最近複数選択を行う必要があり、複数選択ボックスでは列に追加のデータを表示できず、ユーザーはどの場合でも複数選択ボックスの使用方法を知りません。
そこで、スクロールバー付きのdivを作成しました。あなたのケースでは、あなたのスタイルに合うように複数のdivを作成できます(たとえば、著者のアルファベットの文字ごとのdiv)。
ここに私があなたにアイデアを与えるために出てきた方法があります:
当然のことながら、お使いのデバイスに合わせて間隔とサイズを調整する必要があります。
これは単なる提案であることに注意してください。
JavaScriptを使用しなくても、サーバー側で何らかのオートコンプリートを使用してみることができます。
ユーザーはname
(またはその一部)を手動で入力し、search
を押します。
その情報はサーバーによって処理され、可能な回答の簡単なhtmlリスト(チェックボックス付き)を返します。
下部に2つのボタンがあります:add
とadd & complete
これにより、ユーザーは現在のリストから名前を追加してから、さらに追加するか、このリストから名前を追加して著者の追加を完了することができます。
私はUIの専門家ではないので、直感的に使用できるかどうかはわかりませんが、技術的な面では問題ありません。