ユーザーがテーブルの任意の位置に新しい行を挿入できる必要があるフォームがあります。現在、これは以下によって行われます:
1)行をクリックして、新しい行を上または下に挿入します
2)プルダウンから、上または下のどちらに挿入するかを選択します(デフォルトは上)
3)ボタンをクリックして行を追加します
このインターフェイスの例は、このフィドルで見つけることができます: https://jsfiddle.net/fp686ptn/
私の質問は、このタイプのアクションを実現するためのより簡単で、ユーザーにとって直感的でわかりやすい方法があるかどうかです。
「行を追加」アイコンを行自体ではなく、実際には行間のスペースに配置するのはどうですか?
これにより、ユーザーが行を追加しようとしている場所が明確に表示されます。以下のモックアップを参照してください(「追加」アイコンの形状を改善して、行間の隙間を指すようにすることができます)。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
私の提案したアプローチ(JSFiddleに示されている)はうまく機能し、次のようにいくつかの小さな調整が必要だと思います。
1。ユーザーがまだ行を選択していない場合は、[行を追加]オプションを表示しないでください。これには、現在表示されているポップアップエラーメッセージを回避するという追加の利点があります。行'。
2。ボタンとして「行を追加」するのではなく、ラベルにします。ユーザーが「選択した行の上」または「選択した行の下」を選択すると、行が自動的に表示されます。
これにより、ユーザーが最初にドロップダウンを選択し、次に左側のボタンを選択する必要がある現在の少し混乱する相互作用を回避できます。
3。行が追加されたら、すすぎ、繰り返します:)
シンプルな方法...ユーザーが1つのステップでそれを行う方法を提案できますが、現在のメンタルモデルには適していないと思います。
列または行の間の線を使用して、列と行を追加できると思います。行を追加するには、行間の線を2回クリックします。利点は、ユーザーがすでに行があるはずの場所を指しているため、すべて1つのアクションで実行できることです。悲しいことに、署名者がこれをそのように行うことができることをユーザーに通知する場所はありません。通知またはチュートリアルによってのみ通知できます。これは、行と列を追加するためのボタンも実装する必要があることも意味します。
ホバーの行を広げて、可能なアクションがあることをユーザーに通知できますが、どのアクションを示しているかを明確に示すことはできません。また、私はユーザーがこれにどのように反応するかを心配しています。私は、このすべての線がホバリングに反応しているときに、それがいらいらすることをイメージしています。別の可能な解決策は、ポインターが行をホバーしているときにポインターを「+」に変更することです。
明らかに、このソリューションには調査が必要です。