web-dev-qa-db-ja.com

「n行を追加」ボタンをデザインするには?

Webアプリには、編集可能なデータ(入力、チェックボックスなど)を含むテーブルがあります。結び目

rows

一度に複数の行を追加するオプション付きの行追加機能が欲しいのですが。これに最適なデザインは何でしょうか? 「ゲストを追加する」という入力とボタン?では、どのようにして1人のゲストを追加しますか?それともこのパターンはありますか?

ホットキー(例:Ctrl + Shift + Enter)を使用して新しい行を追加することも考えていましたが、それほど見つけることはできません。

7
Runnick

ユーザーの調査で複数の行の追加が一般的であることがわかった場合、[ゲストを追加…]ボタンをクリックすると、ユーザーが行数を入力するためのダイアログまたはミニライトボックスが開き、デフォルトの数が事前に入力されています(1にすることもできます)。 。ただし、多くのアプリケーションでは、ほとんどの場合、ユーザーは一度に1行追加するだけで済みます。これらのユーザーがダイアログを通過してデフォルトの1を受け入れるようにすると、他のユーザーが[ゲストを追加]を複数回クリックして必要な数の行を追加するよりも、すべてのユーザーで平均して時間がかかる場合があります。追加された行数の分布を取得し、平均してユーザーの負担が少ない設計を計算できます。

通常、ユーザーは一度に1行しか追加せず、一度に1行ずつ追加することで複数の行を取得することは(簡単ではない場合でも)常に可能であると想定しても、ユーザーの便宜上、複数の行を追加できます。 「ゲストを追加」ボタンに加えて機能。これはめったに使用されず、タスクを実行するために厳密には必要ないため、このような機能は、各行を一度に1つずつ追加するためのより専門的なショートカットであり、それほど発見可能である必要はありません。

  • 分割ボタンゲストの追加ボタンを、横にドロップダウン矢印のある分割ボタンにすることができます追加する行の一般的な数をリストします(おそらく2、3、4、5などの低い数で十分です)。ドロップダウンの最後のオプションは[詳細]で、ユーザーが任意の数値を入力するためのダイアログを開きます(ユーザーが非常に大きな数値を追加する必要があるEdgeの場合に役立ちます)。これは最も見つけやすいオプションです。

  • 行の選択。既存の行の複数選択をサポートしている場合(おそらくそうする必要があります)、[ゲストの追加]ボタンでユーザーと同じ数の行を追加できます。選択しました。たとえば、ユーザーが一度に4行追加した後、ユーザーは4行すべてを選択し、[ゲストの追加]をクリックして合計8行を取得できます。これはデスクトップアプリ(MS Wordなど)でかなり一般的であるため、ユーザーによっては、思ったよりも見つけやすくなる場合があります。ユーザビリティテストは、それがユーザー向けかどうかを教えてくれます。

  • Typomatic。ユーザーが[ゲストを追加]ボタンをクリックして押し続けた場合(指を離したり、マウスボタンを離したりしない場合)、アプリは少し遅れて、ユーザーがボタンを押し続けている間、スクロールバーまたはキーボードのキーを押しながら操作を繰り返すのと同じように、行を追加し始めます(たとえば、1秒あたり2)。これは、ユーザーが必ずしも正確な数の行を求めているわけではなく、単に「束」を求めている場合に最適です。空白行の削除は簡単で(確認なしのワンクリック)、ユーザーがオーバーシュートをすばやく修正できるようにする必要があります。発見しやすさは素晴らしいものではありません。ユーザーはこの「トリック」について学ぶためにトレーニングが必要になる場合があります。

  • エキスパートアクティベーションまたは、ユーザーが[ゲストを追加]ボタンをクリックして押し続けると、小さなボックスが表示されますボタンを押したまま、追加する行数を入力するようユーザーに求めます。 OKボタンはありません。アプリは、ユーザーがボタンを離したときに、入力した行数を追加します。これも訓練が必要かもしれません。

これらのメソッドのいくつかは、同じアプリで組み合わせることができます。

行を追加するためのホットキーまたはアクセラレータを提供することは、特にユーザーが定期的にアプリを使用する場合に適しています。私はこのために挿入キーを使用して を個人的に推奨しています 。アクセラレータはエキスパートショートカットであるため(お気づきのように、発見の可能性は低くなります)、[ゲストを追加]ボタンに追加する必要があります。実際、「ゲストを追加(キーを挿入)」ボタンにラベルを付けて、ユーザーにアクセラレータの使用を促すことができます。

10

「追加n行」は問題に対する間違った解決策です。

ユースケースを検討してください:

  • ユーザーが1人のゲストを追加する場合は、「ゲストの追加」で十分です(理想的です)。これは最も基本的な一般的な操作です。したがって、not分割ボタンにしたり、ポップアップダイアログや借用したスプレッドシートのイディオムを追加したり、ユーザーの注意を他の「追加」ボタンと競合させたりして、複雑にする必要があります。)

    パワーユーザー機能は、単なる人間のユーザー機能を妨げるべきではありません。

  • ユーザーが複数のゲストを追加する場合、各ゲストのデータエントリの後に「ゲストを追加」でもほとんどの場合十分です(サーバーへの往復ではなく、入力フィールドの別の行を描画するクライアント側の操作が迅速であると想定しています)。行を埋める、行を追加する、次の行を埋める、など(以下の脚注も参照)

  • 「追加nゲスト」は、一度に多くのゲストを追加する必要があるユーザーにのみ役立ちます。非常に多くのゲストが「ゲストの追加」ボタンをクリックするn回は過剰な作業。しかし、これらのユーザーにとっても、すべての情報を入力する必要があるため、あまり便利ではありませんnユーザーを個別に入力します-これは、「行を追加」ボタンをクリックするよりもはるかに多くの作業です。 「追加nゲスツ」は、簡単な部分を少し簡単にしますが、面倒な部分は同じくらい面倒です。あまり改善されていません。あなたがやったことはそれらを保存するだけですn-1クリック。確かに、それがもたらすユーザーインターフェイスの複雑さを正当化するのに十分な改善はありません。

    入力するデータが大量にある場合は、おそらく既にテキストファイルに保存されています(または、一連のフォームフィールドよりも簡単にデータを生成できる可能性があります)。したがって、実際にデータを保存するのは、「ゲストリストのインポート」です。 "またはいくつかの同様の一括追加関数。たとえば、ユーザーがカンマ区切りまたは行区切りの名前のリストを貼り付けるかアップロードできるようにします。ブラウザでその入力を解析し、データが事前に入力されたテーブルに行の完全なセットを追加する前に、確認または再試行する機会を与えます。

    これには、これまでに受け取った多くのユーザートレーニングが必要な、または発見できないホットキーの提案とは異なり、認識可能で親しみやすいという追加の利点があります。「追加」および「インポート」アクションは一般的で簡単です。

脚注:パワーユーザーに投げかけることができる1つの小さな問題は、 tab 最後の行の最後の入力フィールドから自動的に新しい行を作成し、最初のフィールドをフォーカスします。フォームフィールドを頻繁にタブ移動するキーボード中心のユーザーは、これを行ったことに必ずしも気づくことなくこれを発見します。これは目に見えないため、他の人の邪魔になりません。この手法の注意点:2つ目の空の行が上の行がまだ完全に空白である場合、2番目の空の行を自動的に作成しないでください(ユーザーが誤って tab キー);データを保存するときに、空の行を暗黙的に無視します(ユーザーが誤って不要な新しい行を作成した場合に備えます)。

5
Daniel Beck

「Xゲストを追加するための2番目のボタン」を追加できます(Xは、アプリにとって意味のある数字、たとえば5または10です)。あまり使用されませんが、ゲストリストが長いユーザーの時間を節約できる可能性があります。

ただし、[ゲストを追加]ボタンだけから始めて、後で複数のユーザー調査を実行して、一度に複数の行を追加する機能が必要かどうかを確認することで、時間を節約できます。 (その後、さらにユーザー調査を実行して、正確な数値を追加する必要があるかどうか、または別のボタンで十分かどうかを判断できます。)

1
Llewellyn

Googleドキュメントのテーブル挿入ドロップダウンは、かなりうまく機能します。マウスを下に移動すると入力が拡大し、必要な数のセルが含まれます。 1つの列のみを許可するテーブルがあります。

enter image description here

0
icc97