カレンダーアイコンを明らかにクリック可能にする
Webページには、その月の現在の日付だけを表示するカレンダーがあります。そのカレンダーをクリックすると、今月のカレンダーがポップアップします。カレンダーがクリック可能であることを明確にするにはどうすればよいですか？
毎日のカレンダーは次のようになります。
標準的な手がかりの一部：
- ホバー状態：ユーザーがホバーしたときにカレンダーアイコンを変換します。おそらく、ホバーした月を表すグリッドがカレンダーに表示されます。
- コンテキストテキスト：書き込み月を表示またはカレンダーに隣接するリンクと同様。
- 模倣ボタン：ボタンに表示されるようにアイコンにボーダーを追加します。
コンテキスト全体を表示しているわけではないので、表示しているアイコンがページのコンテキストにどのように適合しているかはわかりません。
ただし、「もの」を自己完結型のアクション可能なアイテムにしたい場合に役立ちます-ほとんどの場合、ボタンの形式（テーマに合ったスタイル）で、行動を促すフレーズ（例：show calendar）またはラベル（Calendar）。
affordance のトピックの詳細については、ここでux.seの用語について Michaelsディスカッション を参照してください。彼が正しく述べているように、クリック可能なアイテムとしてボタンは、ボタンに関するこれまでの経験に基づいています。中央に配置されたアイコン、中央に配置されたテキスト、丸みを帯びたコーナー、グラデーションなどの位置の手がかりは、それらを期待するためにusedになるため、状況でアフォーダンスを提供するのに役立ちます-私たちはボタンが私たちの心の中でどのように見えるかについての期待を構築し、そのような認識をトリガーするパターンを作成して探します。
JonWは、素晴らしいアイデアである色のしぶきを追加することを提案しました。
考慮すべきもう1つのオプションは、グラフィックの「クリック可能」な性質を強化するために、いくつかの視覚要素を調整することです。 「今日」のラベルを、サイトで使用しているプライマリリンクの色と同じ色にすることをお勧めします（または、背景のグラデーションでその色を使用する可能性があります）。現在の灰色のグラデーションの白には、コントラストと可読性の問題があるため、2羽の鳥を殺す可能性があります。
さらに、以前に使用した一般的で効果的な追加は、カレンダーの日付ページの右下に三角形を追加することです。これは、カレンダーが変更可能であることを示します（「フリップ可能」として認識されるか、ポップアップメニューを取得する方法として） ）。
ユーザーが何かをアクションのトリガーとして認識するには（したがってクリック可能）、動詞でラベル付けする必要があります。
calendarの代わりにshow calendarを試すか、画像をリレーしてopenのようにラベルを付けます。
さらに、これはmy意見であり、アイコン（この質問に対して表示される）は現実的すぎます。これは気が散ります。ユーザーは、ボタンであることを認識する前に、この特定の要素に割り当てられている認知的負荷を使い果たす可能性があります。
IMOメタリックリングと黒いベースがないため、ハリーユーザーにとっては簡単です。カレンダーページだけで、今日の日付が入っているかもしれません。
ホバー効果の時点で、ポインターがデフォルトの矢印から通常の手に変わることを確認することも非常に役立ちます。
openのみでラベル付けした場合、Wordはホバリングにも反応するはずです。
恐れているユーザーのために、ボタンをクリックしたときに何が起こるかを説明するツールチップを平文で追加します。
ホバー状態は、このアプリ/ウェブサイトをデスクトップ専用に作成している場合にのみ機能します。最善の方法は、カレンダーの色を変更するか、番号に下線を引くことです。テキストに下線を引くと、ユーザーはそれを操作できると思います。
クリック可能性のアフォーダンスは、通常、マウスポインターが何かの上に置かれたときの状態の変化によってデスクトップユーザーに示されます。
優れたアーティストがいる場合、ホバーするとカレンダーの画像をアニメーション化できます（ページをめくらせます）。
ホバーで画像自体が変化しない場合は、カーソルをデフォルトの矢印ではなくポインターに変更する必要があります。
CSS：.calendar-button {
cursor: pointer;
}
変更するカーソルがないため、モバイルユーザーにはさらに強調する必要があります。代わりに、ボタンは多くの場合、共通の形状や背景色などの統一スタイルを共有して、Webページ上のどのアイテムがタップ可能かをユーザーに示します。
Webサイトが十分に複雑な場合（実際にはwebapp）、新しいユーザーが見逃した可能性のあるさまざまな機能を強調するための簡単なモーダル*チュートリアルを検討することをお勧めします。これは、新しい機能が追加されてユーザーに変更を警告するときにも使用できます。
*ライトボックスを意味するのではなく、ページの残りの部分を非表示にする必要はありません。簡単な吹き出しとしてテキストを含む単純な矢印の場合もあります。