トップページ > IT, Internet > ボタンのマウスオーバーここが変だよ。凹むのはまだ早い
カスタム検索

ボタンのマウスオーバーここが変だよ。凹むのはまだ早い

WebデザインにおいてインタラクティブなUIの肝じゃないかとも思えるリンクボタンのマウスオーバー(ロールオーバー)。その挙動というかデザインというか、いつもちょっと気になるところがあるのです。



Clip to Evernote


皆さんはマウスオーバー(ロールオーバー)した際にどういう動作をしてほしいですか?
いつもWebサイトをみていて変に感じることがあります。ボタンの画像などにマウスを載せた際の挙動が、思っているものとは違っている場合がよくあるのです。

その挙動とはこういうものです。
マウスオーバー時(a:hover)つまりまだマウスボタンはクリックしておらず、ボタンの上にマウスを載せただけにもかかわらず、まるでボタンが押下されたように凹んだものが表示されてしまう。以下はその動作サンプル
私のウィッシュリストへ

上記のような凹んだものを見せるタイミングとしては、マウスオーバー時ではなくマウスクリック時(a:active)が適してるのではないでしょうか。やはり実際のメカニカルなボタンもそうですが、押下されたときに凹んだ方が自然ですよね。「押そうかな?」と指を近付けただけで部屋の電気が消えたり換気扇が回ったりするのは困りますから。
私のウィッシュリストへ

押下したときだけでなくマウスオーバー時にも何らかの反応を入れたいのであれば、ボタンを凹ませたりするのではなく色が変化するとかテキストにアンダーラインが引かれるという動きで知らせたほうが良いかと思います。
私のウィッシュリストへ

正直なところタッチインタフェースを使うのがWebサーフィンの主流となった今では、そんなことすらどうでもよくなっていますけどね(どうせマウスオーバー効かないし)。でもたまにパソコンで観るとやっぱりこういうところは気になるものですから。



Clip to Evernote



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2010年4月11日 20:28

コメント:

このエントリーのトラックバックURL:

このエントリーを参照してないトラックバックは削除する場合があります

» ロジクール ワイヤレスマウス M505 レッド M505RD | from お買い得連絡通信
ロジクール ワイヤレスマウス M505 レッド M505RD◆最大15ヶ月の電池... [続きを読む]

トラックバック時刻: 2010年4月17日 18:24

» ロジクール ワイヤレスマウス M505 レッド M505RD | from アマゾン探検隊
ロジクール ワイヤレスマウス M505 レッド M505RD◆最大15ヶ月の電池寿命だから、安心して使える◆精確性に優れたレーザーセンサーを装備◆信頼性の... [続きを読む]

トラックバック時刻: 2010年4月17日 20:05

Related Posts Plugin for WordPress, Blogger...

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 そしてGoogle Plusはこちらにどうぞ。また、YouTubeのチャンネル登録はこちらからできます。

なんかいいアイテム


ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー

AMN