[UI/UX研究] ボタンクリックを気持ちよくする方法

2024年4月21日

UI/UX研究

eyecatch ポイ活が流行ってますが、個人的にはショップやアプリのポイントがあまり好きではありません。 そのアプリを使って活動をすればするほどポイントが溜まって、それがお金に変えられる・・・良いように聞こえますが、その会社の広告収入を手伝ってそのオコボレをもらっているだけに過ぎないと考えると少し萎えますよね? まあ、そんな事を気にせずに自分にメリットがあればいいと考えれば、ポイ活をしていても楽しいと思いますが、やっていることに意味を感じないポイ活がどうも好きじゃないんですよ。 その多くが、ネットの広告を見るというポイ活なんです。 そして、その広告の操作がひどい時にポイ活に対して萎え萎えになってしまうという思考ですね(個人的思考です) そんなネット広告を見ている時に、気持ちの良くボタンをクリックさせれば、自分みたいなユーザーが離脱しなくなるのにな〜と思って、技術的にそれを回避できる方法を考えてみました。 【基本定義】 インターネットのWebブラウザを基本として考えるため、このブログではJavascriptベースでの技術解説をする事をはじめにお断りしておきます。 ※他のプログラム言語の場合は、それぞれ置き換えることで、UI/UXは担保できると思います。

ボタンクリックは、downじゃなくてupを使う

パソコンであれば、mousedown、スマホであれば、touchstartを使って、aタグ以外のリンクを操作しようとすると、操作感が気持ち悪くなります。 実際に、体感してみましょう。 ※クリックするたびに画像がボケたり、クリアになります。

MouseDown(TouchStart)

MouseUp(TouchEnd)

Click

それぞれの違いの解説

クリックしてみて、違いが分かりました? MouseDownは、マウスのボタンを押したタイミングで、MouseUpは、ボタンを離したタイミングです。 Clickは、ボタンを話すタイミングとほぼ同じですが、順番としては、次の順番にイベントが実行されます。
- ボタンを押す 1. MouseDown - ボタンを離す 2. Click 3. MouseUp
そして、肝心の体感の違いですが、今回はボタンを押して画像が切り替わるだけなので、少しわかりにくいかもしれませんが、画面が切り替わるような処理の場合は、明確に感覚が変わります。 人はボタンを押すという行為の時に、押し込んだ状態で、「あれ?なんかやっぱり押すのを止めたい」と思ってキャンセルをしたくなる場合があります。 その時にパソコンのボタンとしては、押したままボタンからカーソルや指をずらして押し上げないように行動します。 この時に、ちゃんとキャンセル処理をやっている設計であれば問題ないのですが、総じゃない場合や、そもそも押し込んだタイミングで動作がスタートしてしまうというのは、 気持ち早い!という感覚になります。 あと、スマートフォンなどで実際にtouchstartで動作を開始させると、押す前に動きが開始してしまうフライングのような感覚になる場合があります。 やはり、ボタンを押すという操作は、ボタンを押して離した状態で初めて発動させるほうが、気持ちよくボタンが押せるという事になります。

あとがき

今回のボタンを押すUI/UXは、今は無きFlashが全盛期の時代では、当時フラッシャーと呼ばれたFlashクリエーターの人たちが当たり前にやっていた常識でもありました。 でも、ポイ活アプリなどや、少し尖ったホームページを作っているWebサイトなどで、こうしたお作法を知らない人が作ったと思われるインターフェイスを実際に自分が触った時に気持ち悪さを感じてしまいます。 もはやそのポイ活アプリ、アンインストールですね・・・ アプリのユーザーってこういう判断を無意識にしているはずなので、改めてUI/UXは心理効果なのだと言うことに納得ができました。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ