アクティブ・押下

定義

アクティブは、ユーザーが要素を実際に押し込んでいる、まさにその一瞬の状態です。ボタンを クリックした瞬間にサイズがほんの少し縮んだり、色がワントーン暗くなったり、影が浅くなったり することで、本当に押し込まれたような感触を生み出します。物理的なボタンを指先で押したときに 奥へすっと沈み込む感覚を、画面の上で再現しているわけです。マウスを乗せたときのホバーが 「押す直前の予告」だとすれば、アクティブは「今この瞬間、指に力が入った」という事実そのものへの 即座の応答です。指を離した途端に要素は元の姿へ戻るので、アクティブは三つの状態のなかで もっとも短く過ぎ去っていく、瞬間の反応だといえます。

なぜ重要か

人は何かを押したとき、必ず何らかの反応が返ってくることを期待します。押したのに画面が まったく動かないと、ちゃんと押せたのか、それとも固まってしまったのか確信が持てず、同じ 場所を二度三度と叩いてしまいます。この短い不安は、画面全体への信頼を少しずつ削っていきます。 逆に、押した瞬間に要素がわずかに沈む反応を返してくれれば、ユーザーは「自分の操作は 確かに伝わった」とすぐに安心できます。この即座の確認が、クリックに手ごたえと呼べる満足感を 与え、操作の一つひとつが確実で丁寧だという印象を残します。とくにネットワークが遅く、実際の 結果が少し遅れて届くようなときには、この押下反応がその空白を埋めてユーザーをつなぎとめて くれます。同じボタンでも押下反応があるかないかで、完成度の印象がはっきり分かれる理由が まさにここにあります。

よくある間違い

• 押下反応をまったく入れないことです。ホバー効果はあるのにクリックした瞬間には何の変化も ないと、とくに処理が少し遅れるときにユーザーは押せたのか分からず、不安になって同じボタンを 何度も繰り返し押してしまいます。
• 沈み込みの効果を大きくしすぎることです。サイズをガクッと落としたり色を派手に変えたりすると、 クリックが軽快になるどころかガタつく感じになり、かえって操作が不安定に見えてしまいます。
• 押下反応だけ入れて、実際の結果処理を忘れることです。押した感触はあるのに肝心の何も起こらないと、 ユーザーは反応したと信じたぶんだけ、裏切られたように感じてしまいます。

実務のヒント

• 沈み込みは、サイズを0.96から0.97倍くらいにほんの少し縮める程度で止めておきましょう。ぱっと 目立たないくらいの微妙な縮小が、もっとも自然で満足感のあるクリック感を生み出します。
• 押下状態の変化には、ごく短いトランジションも一緒に添えておきましょう。瞬間的に値が飛ばず、 なめらかに沈んで戻ってくれば、硬さのない、指先に吸いつくような反応になります。
• ホバー・アクティブ・フォーカスは重なって見えることがあるので、優先順位を決めておきましょう。 押す瞬間にはアクティブの反応がもっともはっきり前に出てこそ、ユーザーは自分の操作を確かに 確認でき、状態どうしが絡み合って不自然に見えるのも防げます。

関連概念