web-dev-qa-db-ja.com

テーブルの列をクリックしたときのアクションをユーザーに知らせる

テーブルには、Google fileのようにユーザーに列の意味を伝える先頭行があります。_テーブルにはnameidmime typecreatedおよびmodified date

しかし、表に情報を表示することに加えて、ユーザーが行オブジェクトに対していくつかのアクションを実行できるようにしたいと思いました。たとえば、ファイルを開く、名前を変更する、またはファイルのコピーを作成します。 1つの列をクリックしてファイルを開き、名前列をクリックすると、たとえば名前が編集可能になるなど、単純なクリックで実行すると非常に便利です。追加のクリックで開く必要があるすべての行ごとにメニューボタンを提供するよりもはるかに便利です。

別のオプションは、すべての行に追加の「アクション」列を追加することです。これは、展開された状態のフォームのメニューです。これにより、シングルクリックアクションが可能になりますが、多くのスペースが必要になり、テーブルがユーザー画面に収まりません。

それが私が列を二重に使用する傾向がある理由です-それは行/オブジェクトのいくつかの属性を表示しますが、クリックするといくつかの無関係なアクションを実行します。ユーザーがセルをクリックしたときに何が起こるかをユーザーにどのように伝えますか?マウスホバーのツールチップ?

1
Little Alien

一般的に、セルの値をクリックするだけで呼び出されるアクションは、明確にされない非表示のアクションであるため避けてください。

これは標準のWebドリルダウンパラダイムであるため、私にとって直観的にわかるのは、セルをクリックしてそのセルの詳細を取得することだけです。セル値が明らかにリンクである限り、これは機能します。

しかし、たとえば、Webサイトのテーブルが値をクリックして編集可能であることは明らかではありません。そして、他のアクションはあまり明白ではありません。

ここにはいくつかの選択肢があると思います。

編集などのアクションを示すアイコンをセル値の横に表示します。たとえば、編集用の鉛筆アイコン。

mockup

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

セルにいくつかのオプションが関連付けられている場合、またはテーブルが乱雑に表示されたくない場合は、これらのアイコンをマウスオーバーでのみ表示することができます。

編集が非常に一般的である場合は、セルを常に編集可能にして、表の外観をスプレッドシートのようなグリッドにするか、フォーム要素にすることでそれを伝えることができます。

これは読みやすいようには見えませんが、編集が主なタスクである場合は、物事が簡単になります。

0
user31143