web-dev-qa-db-ja.com

要素がユーザーのクリックに応答することをどのように示すべきですか?

ユーザーが連絡したい人のリストがあります。連絡が取れたら、「完了マークを付ける」ことができます(3日後にフォローアップリストに移動します)。 「完了としてマーク」ボタンを表示すると、リストが非常に長く表示され、ページから外れるため、デフォルトでは非表示にして、ユーザーが連絡先をクリックしたときにのみ表示します。

昨日リストを操作しているユーザーを観察したところ、連絡先をクリックして完了とマークできることに気付きませんでした。

連絡先をクリックして完了マークを付けることができることを示す最良の方法は何ですか?または、「完了としてマーク」ボタン/リンクをデフォルトで表示する必要がありますか?

enter image description here

6
kwh941

ユーザーが非常に明白でない限り、ユーザーは常に期待されるアクションを知っているとは限らないことに注意してください。したがって、ほとんどの人は気づかない可能性があるため、非表示の機能にカーソルを合わせて発見するように要求することは、ユーザーエクスペリエンスの低下につながります。

今日、Eventbriteでイベント編集を行っているときに、その例に直面しました。 Eventbriteは、件名行をクリックすると有効になるインライン編集を使用します。彼らに信用を与えるために、彼らはユーザーが下に示すようにそれの上に置いたときに行を強調表示しますが、私は件名行を変更する方法を理解しようと20分ほど費やしたので直感的ではありません。

enter image description here

したがって、ユーザーが機能を探す必要がないため、実行できるアクションについてユーザーに通知するために、単純なテキストリンクまたはチェックボックスを使用することをお勧めします。実行する単純なアクションがあると、パスの次のステップが明確になります。以下はastridが行う例です:

enter image description here

5
Mervin

GmailのようなWebサイトでは、このページのURLと同様に、クリック可能な要素の上にカーソルを置くとカーソルが変わります。それを行うか、またはMark as Doneボタンと同じ機能を実行する各名前の横にチェックボックスを追加できます。

2
ScottK

私が思うチェックボックスが好きです。実際に配置できる機能の1つは、ユーザーがボックスをチェックすると、一貫した場所の上部に完了ボタンとしてマークが表示されることです。ユーザーが15個のアイテムを完了としてマークしたい場合、名前をクリックする必要があり、毎回「完了としてマーク」ボタンをクリックする必要があるので煩わしくなります。ここで、完了マークを付けるアイテムをチェックオフしてから、完了マークボタンをクリックして確認することができます。

1
astarnino