web-dev-qa-db-ja.com

「チェックボックスのオプションが多すぎる」ことをユーザーに示す最良の方法は何ですか?

私のウェブアプリのデザインでは、ユーザーが100冊の本から本を選択する必要があります。これらの本は、別のアプリからインポートされたユーザー自身の本です。

so many options to choose from, using checkboxes

この手順は、ユーザーがアプリに登録した直後です。貸し出す本を慎重に選択する代わりに、ユーザーは多くの情報に溢れ、このステップをスキップするかもしれません。

非常に多くの(約100冊の)本を表示して、ユーザーが簡単に本を選択し、急いでスキップしたり、すべてを選択解除したり、またはすべてを愚かに選択したりするより良い方法はありますか?

PS:ほとんどのユーザーが分類を提案しているので、ここでユーザーが本を貸すかどうかを決定する必要があることを付け加えておきます。分類(ジャンル固有、または既読/読みたいなど)はあまり実りがありません。

28
Saurabh Hooda

選択タスクを退屈なものにする1つの方法は、選択ターゲットサイズをフルイメージ+テキストサイズに増やすことです(たとえば、添付のモックアップの場合)。これにより、個々の選択にかかる労力が減り、どの本が選択されたかについて魅力的で見やすい概要を提供できます。さらに、100冊の本を複数のページに配布できます。

enter image description here

43
dfshk

これに関するユーザーテストデータは見たことがありませんが、非常にうまく機能しているように見える既存のパターンがあります。新しいユーザープロファイルをオンボーディングする過程で、Netflixはユーザーが視聴したい映画や好きな映画を選択できるようにします。

Netflix onboard

上の行に注目してください。左の項目が選択され、中央の項目はホバー状態にあり、右の項目は選択されていません。また、選択には特別なアフォーダンスは必要ありません。選択項目をクリックするだけで直感的に理解できます。

21
Daniel De Laney

私は3つの改善を考えることができます:

  • 追加afilter
  • 追加some order
  • 改善スキャン可能性

フィルターは簡単なものですが、他の2つには勝てるアイデアはありません。とにかく、いくつかの選択肢を紹介します。

あなたがテキストに賭けているなら...

検索可能性に役立つ可能性のあるものはアルファベットの区切りであり、おそらく各文字へのindexと一緒です。

ユーザーがどのように本をスキャンするかはわかりませんが、おそらく最初に画像を検索しようとするでしょうが、これを考慮に入れて常に役立つかどうかはわかりませんすべての本がそうであるわけではありません認識可能、少なくともそのサイズで。したがって、おそらく、テキストをより重視する、負荷の少ないインターフェースは、彼らがより一貫して欲しいものを見つけるのを助けるかもしれません。ここにアイデアがあります:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

あなたが画像に賭けているなら(そしてテキストには少ない)

一方、大きな画像(サムネイル)を配置できる場合は、スキャン効率が向上し、選択に関連する可能性があります。最新のGoogleドライブインターフェース(下の画像)に似たものを試すことができます。 サムネイルの任意の場所をクリックして選択
さらに、同じアルファベットの区切り内で各行に数冊の本(数は解像度によって異なります)を配置できます。

enter image description here

このようなもの: enter image description here

8

いつでもユーザーに貸し出し、後でもっと多くの本を選択できることを伝えるために、いくつかの本を提案できます。それは、ユーザーのオンボードに成功し、選択肢が多すぎて圧倒されません。

本が示唆する魔女の基準は、実際にはアプリケーションの目的に依存します(私は特に、最後に読んだ日付に関するAdamの考えが好きです)。

7
JotaRMonteiro

それをモックアップする方法は悪くありません。つまり、自分のタスクが自分のライブラリ全体を調べて、貸し出し可能な本を選択することだとわかっている場合は、自分のライブラリ全体を調べなければならないでしょう。私は私の本でいっぱいのページを見ると思います。

ただし、本を選択するのが簡単になるように、各項目を大きくし(4列または3列で表示する)、クリック可能な領域をその小さなチェックボックスよりも大きくします。ボタンにするか、アイテム全体をクリックして選択できるようにします。 (フィッツの法則を参照してください。)

私は、人々が自分の本のサブセットを検索/フィルタリングするのではなく、すべてを閲覧することによって選択を行うと思いますが、そうではないかもしれません。 (簡単なユーザー調査を行うことで確認できます。)ただし、並べ替え機能は便利なようです。

(注:このアプリを使用します。)

5
Ken Mohnkern

情報に基づいた簡単な決定を行うために、ユーザーに書籍のリストにコンテキストを適用する方法を提供することが重要です。

ユーザーが「最後に読んだ日付」または「ジャンル」でソートできるようにフィルターを提供すると、意思決定プロセスに役立つ場合があります。ユーザーは、1年間に読んだことのないすべての本を選択する可能性が高くなります。または、現時点で犯罪の本を読んでいない場合も同様です。

最初のオンボーディングステップでこのプロセスを合理化し、ユーザーがアプリケーションへのコミットメントをエスカレートしたときの意思決定を強化することをお勧めします。ユーザーが本を読み終え、レビューを書いて、本に星の評価を付けると、「貸出リストに追加」するオプションを追加すると、この機能が本当に効率化されます。

幸運を祈ります。これがお役に立てば幸いです。

2
Adam Pattenden

複数のオプションがある場合、categorizationは常にユーザーが決定を下すのに役立ちます。 Netflix/Huluはこれを非常にうまく行い、タイトルを選択するのが簡単になります。ただし、ユースケースは少し異なりますが、多かれ少なかれ、問題に適しています。本は、ジャンル、評価、最近読んだ本、読書などで分類できます。

enter image description here

ブックAPIを使用して、自動分類ブックを作成できます- 53 Book API's

2
Adit Gupta

同じ画面に視覚的な手がかりが多すぎるように感じるかもしれません。

私はそれを段階に分けるべきだと思います:

ステップ1

この時点であなたの本を貸しませんか? (共有は思いやりです!)

はい|番号

ステップ2-はい

以下は、すでに完成した書籍の一部です。貸したいものをタップしてください。

本|本|本

本|本|本

本|本|本

|私の本をすべて表示してください! |

本を貸す|気が変わったので入れて!

ステップ2-いいえ

大丈夫! X、Y、Zにアクセスして、いつどの本を貸すかを選択できます。

1
MonkeyZeus

新しくリリースされたApple音楽アプリをご覧になりました。初めてアプリにアクセスしたときApple音楽はグループからいくつかのアーティストを選択するように求め、次に、グループからいくつかのジャンルを選択します。あなたの要件はそれらとよく一致すると思います。そして、彼らはそれを本当にうまく行ったと信じています。あなたはいくつかの微調整でその種のインターフェースを試すことができます。Apple =選択する前に一連のバブルが表示されます。選択するには、円をタップします。enter image description here

enter image description here

1
Krishna

ここに面白いアイデアがあります-3つのカラム、左側には貸さないもの、右側には貸さないものがあります、中央には未定です。最初は中央だけが表示されます。ユーザーは左または右をクリックすると、アイテムが新しいリストにアニメーション表示されます。リストは画面の下部に続きます。左と右がいっぱいになると、エッジからはみ出します。ユーザーは中央部分を処理でき、アイテムが左右にアニメートするときにアイテムが上に移動します。

0
Hogan

あるいは、ほとんどの人は自分の本のほとんどを貸しても構わないと思っているかもしれませんが、今読んでいる本ではありません...たぶん、貸したくない本を選択して残りを自動貸与するように依頼する必要があります...ほとんどのユーザーは、現在手放したくないことを知っている本を数冊しか持っていないという仮定のもとです。上部に検索フィルターを含めて、貸したくない本をリスト全体からすばやく見つけます。

MonkeyZeusにも同意しますが、アプリのどこかに借りたい本をリクエストする場所があるかもしれません。これは、インポートされたインポートされた新しいユーザーライブラリ内の書籍を特定するのに役立ちます。また、本を調べることもできます。小売サイトで本の評価を取得し、最初の限定された本の選択で表示される際にそれらをより高くランク付けします。

0
axawire