web-dev-qa-db-ja.com

選択したテーブル行の上または下に新しい行を作成する

ユーザーがテーブルの任意の位置に新しい行を挿入できる必要があるフォームがあります。現在、これは以下によって行われます:

1)行をクリックして、新しい行を上または下に挿入します

2)プルダウンから、上または下のどちらに挿入するかを選択します(デフォルトは上)

3)ボタンをクリックして行を追加します

このインターフェイスの例は、このフィドルで見つけることができます: https://jsfiddle.net/fp686ptn/

私の質問は、このタイプのアクションを実現するためのより簡単で、ユーザーにとって直感的でわかりやすい方法があるかどうかです。

3
user109159

「行を追加」アイコンを行自体ではなく、実際には行間のスペースに配置するのはどうですか?

これにより、ユーザーが行を追加しようとしている場所が明確に表示されます。以下のモックアップを参照してください(「追加」アイコンの形状を改善して、行間の隙間を指すようにすることができます)。

mockup

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

1
Mike

Suggested improvements to 'Add Row'

私の提案したアプローチ(JSFiddleに示されている)はうまく機能し、次のようにいくつかの小さな調整が必要だと思います。

1。ユーザーがまだ行を選択していない場合は、[行を追加]オプションを表示しないでください。これには、現在表示されているポップアップエラーメッセージを回避するという追加の利点があります。行'。

2。ボタンとして「行を追加」するのではなく、ラベルにします。ユーザーが「選択した行の上」または「選択した行の下」を選択すると、行が自動的に表示されます。

これにより、ユーザーが最初にドロップダウンを選択し、次に左側のボタンを選択する必要がある現在の少し混乱する相互作用を回避できます。

3。行が追加されたら、すすぎ、繰り返します:)

1

個別のボタンを使用する代わりに、「+」のような記号の付いた列を使用して、選択した行の代わりに新しい行を作成し、その行を下に押すことができます。何かのようなもの :-

enter image description here

この方法では、ユーザーは新しい行を追加するために上下にスクロールする必要はありません。また、上下のオプションを指定する必要はありません。テーブルの最後に行を追加する機能が必要な場合は、ボタンをテーブルの最後に「新しい行を追加する」とあります。これは、テーブルの最後に新しい行を追加するだけです。

シンプルなワークフローでクリック数を減らすか、ユーザーがスクロールする必要がある方がよいでしょう。

0
23nigam

シンプルな方法...ユーザーが1つのステップでそれを行う方法を提案できますが、現在のメンタルモデルには適していないと思います。

列または行の間の線を使用して、列と行を追加できると思います。行を追加するには、行間の線を2回クリックします。利点は、ユーザーがすでに行があるはずの場所を指しているため、すべて1つのアクションで実行できることです。悲しいことに、署名者がこれをそのように行うことができることをユーザーに通知する場所はありません。通知またはチュートリアルによってのみ通知できます。これは、行と列を追加するためのボタンも実装する必要があることも意味します。 enter image description here

ホバーの行を広げて、可能なアクションがあることをユーザーに通知できますが、どのアクションを示しているかを明確に示すことはできません。また、私はユーザーがこれにどのように反応するかを心配しています。私は、このすべての線がホバリングに反応しているときに、それがいらいらすることをイメージしています。別の可能な解決策は、ポインターが行をホバーしているときにポインターを「+」に変更することです。

明らかに、このソリューションには調査が必要です。

0
Ada

ユーザーにとっては十分に明確です。または、これを試すことができます。 enter image description here

行/列を追加するには、セルを強調表示してから、[列/行の追加]ドロップダウンをクリックする必要があります。その場合、列の場合は左/右、行の場合は上/下のオプションがあります。疑問がある場合はお知らせください。

0
NB4