web-dev-qa-db-ja.com

ユーザーにdivがクリック可能であると思わせる方法は?シャドウ/ハンドカーソル/色変更?

ホームページに3〜4のdivがあり、いくつかの情報(つまり、ビッグナンバー、インジケーター)が含まれています。すべての情報を同じページに配置することはできませんが、ユーザーに認知的負荷がかかると思うので、ユーザーがdivをクリックしたときに、関連する情報を含む新しいページが開くはずです。しかし、私は自分のdivにボタンのルックアンドフィールを与えたくありません(おそらくグラデーションを追加するなど)。シンプルでフラットなデザインを維持したいのですが、クリックできることをすぐにユーザーに知ってもらいたいです。このため、私はさまざまなことを念頭に置いています。マウスホバーでハンドカーソルを使用するオプションがありますが、実際には使用したくありません。 div上のマウスホバーに影を追加できますが、今は古いデザインだと思います。私が持っている3番目のオプションは、マウスオーバーでdiv背景色をわずかに変更することです。ユーザーがdivがクリック可能であると考える方がより明白になることを教えてください。または、それを行うためのより良い選択肢がある場合は教えてください。私はとても感謝します。

4
Omar Bahir

マウスオーバーのみに依存するだけでは十分ではありません。 divがクリック可能であることをユーザーに伝え、ユーザーがマウスをポイントするようにする方法を見つける必要があります。マウスオーバーの変更は、その時点で確認として役立ちます。

他のサイトがこれをどのように達成するかを見てください。テキストによる行動を促すフレーズは、divをクリック可能に見せます。またはリンクのように見せること( "詳細情報>")

6
Ken Mohnkern

上品で控えめに使えばボタンの影は古いデザインだとは思いません。ここGoogleのマテリアルデザインでは、「隆起」ボタンと影を使用して奥行きを示しています。 https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons enter image description here

4
DasBeasto

「ユーザーに認知的負荷をかけると思います」と述べ、ボタンをボタンのように見せたくないと言います。

a)少し指定してください:これはデスクトップ専用です?あなたは絶対に誰もあなたのサイト/アプリにアクセスするためにタッチデバイスを使用しないと確信していますか?そうでない場合:タッチデバイスでやりたいことをどのように行う予定ですか?

b)それらが何であるかのために要素を使用します:参照してください、これは古典的な議論です:

見栄えを良くしたり、使いやすくしたりしていますか?

両方を達成した場合、あなたは勝ちますが、特にデザインのバックグラウンドから来た多くの人々は、ビジュアルがユーザビリティのユーザビリティよりも重要であると考えています。さて、あなたの場合、これは非常に簡単です。ボタンが必要なので、ボタンとして機能させたいのです...次にボタンを使用します!

この要素については、何千ものページ、記事、調査、研究、見栄えを良くする方法、変換する方法、CTRを改善する方法、その他多くのリソースがあります。それはあなたの中にあり、あなたはこのすべての情報の使用方法を必要としていますが、結局...ボタンはボタンです.

from sability.gov

ボタンはタッチ時のアクションを示し、通常はテキスト、アイコン、またはその両方を使用してラベルが付けられます。

資源

3
Devin